Skip to content

Commit

Permalink
feat(typescript): update generate scripts to use typescript (#5817)
Browse files Browse the repository at this point in the history 
* feat(typescript): update generate scripts to use ts

* feat: types ref
  • Loading branch information
@AlexanderMelox
AlexanderMelox authored Aug 14, 2024
1 parent c431ec0 commit 8cb241b
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 113 deletions.
221 changes: 115 additions & 106 deletions packages/ibm-products/scripts/generate/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

const fs = require('fs');
const { green } = require('chalk');
const { green, red } = require('chalk');
const { outputFileSync, readFileSync } = require('fs-extra');
const { sync } = require('glob');
const { camelCase, paramCase, pascalCase, headerCase } = require('change-case');
Expand All @@ -18,6 +18,15 @@ const {
} = require('yargs');

const name = _[0];

// If no component name is given in args throw an error
if (!name) {
console.error(
`${red('Error:')} No component name given. e.g. yarn generate TestComponent`
);
process.exit(1);
}

const substitutions = {
DISPLAY_NAME: pascalCase(name),
FULL_YEAR: new Date().getFullYear(),
Expand All @@ -34,113 +43,113 @@ const compile = (template) =>
);

const templatesPath = join(__dirname, 'templates');
if (name) {
sync(resolve(templatesPath, '**/*')).forEach((template) => {
if (fs.lstatSync(template).isDirectory()) {
return; // do nothing for a folder
}

let relativePath = relative(templatesPath, template);
const compiledPath = compile(relativePath);
let path;

if (relativePath.startsWith('gallery-example')) {
// relativePath = relative('example-gallery', relativePath);

path = join(
'../../examples/carbon-for-ibm-products',
substitutions.DISPLAY_NAME,
compiledPath.substr('gallery-example/'.length)
);
} else {
path = join(
'src',
'components',
substitutions.DISPLAY_NAME,
compiledPath
);
}

const data = compile(readFileSync(template, 'utf8'));

outputFileSync(path, data);

console.log(
`${green('create')} ${path} (${
new TextEncoder().encode(data).length
} bytes)`
sync(resolve(templatesPath, '**/*')).forEach((template) => {
if (fs.lstatSync(template).isDirectory()) {
return; // do nothing for a folder
}

let relativePath = relative(templatesPath, template);
const compiledPath = compile(relativePath);
let path;

if (relativePath.startsWith('gallery-example')) {
// relativePath = relative('example-gallery', relativePath);

path = join(
'../../examples/carbon-for-ibm-products',
substitutions.DISPLAY_NAME,
compiledPath.substr('gallery-example/'.length)
);
});

// Update src/global/js/package-settings.js
const settingsPath = join('src', 'global', 'js', 'package-settings.js');
const settingsData = readFileSync(settingsPath, 'utf-8');

// locate place to add new components
const newComponentsHereRegex = /(\s+)\/\* new component flags here /;
const here = settingsData.match(newComponentsHereRegex);

// add new component
const newSettingsData = `${settingsData.substr(0, here.index)}${here[1]}${
substitutions.DISPLAY_NAME
}: false,${settingsData.substr(here.index)}`;
outputFileSync(settingsPath, newSettingsData);

// add new component export to end of src/components/index.js
const componentIndexPath = join('src', 'components', 'index.js');
const componentIndexData = readFileSync(componentIndexPath, 'utf-8');
outputFileSync(
componentIndexPath,
componentIndexData +
`export { ${substitutions.DISPLAY_NAME} } from './${substitutions.DISPLAY_NAME}';\n`
);
} else {
path = join('src', 'components', substitutions.DISPLAY_NAME, compiledPath);
}

// NOTE: Styles except storybook are in a separate package @carbon/ibm-products-styles
const stylePackagePath = '../ibm-products-styles';
// add new component to end of src/components/_index.scss
const componentSCSSIndexPath = join(
stylePackagePath,
'src',
'components',
'_index.scss'
);
const componentSCSSIndexData = readFileSync(componentSCSSIndexPath, 'utf-8');
outputFileSync(
componentSCSSIndexPath,
componentSCSSIndexData + `@use './${substitutions.DISPLAY_NAME}';\n`
);
const data = compile(readFileSync(template, 'utf8'));

// add new component to end of src/components/_index-with-carbon.scss
const componentWithCarbonSCSSIndexPath = join(
stylePackagePath,
'src',
'components',
'_index-with-carbon.scss'
);
const componentWithCarbonSCSSIndexData = readFileSync(
componentWithCarbonSCSSIndexPath,
'utf-8'
);
outputFileSync(
componentWithCarbonSCSSIndexPath,
componentWithCarbonSCSSIndexData +
`@use './${substitutions.DISPLAY_NAME}/index-with-carbon' as *;\n`
);
outputFileSync(path, data);

fs.mkdirSync(
join(`${stylePackagePath}`, `src/components/${substitutions.DISPLAY_NAME}`)
console.log(
`${green('create')} ${path} (${
new TextEncoder().encode(data).length
} bytes)`
);
// move files to correct location
[
'_carbon-imports.scss',
'_index.scss',
'_index-with-carbon.scss',
`_${substitutions.STYLE_NAME}.scss`,
].forEach((file) => {
const curPath = join(
`src/components/${substitutions.DISPLAY_NAME}/${file}`
);
const newPath = join(stylePackagePath, curPath);
fs.renameSync(curPath, newPath);
});
}
});

// Update src/global/js/package-settings.js
const settingsPath = join('src', 'global', 'js', 'package-settings.js');
const settingsData = readFileSync(settingsPath, 'utf-8');

// locate place to add new components
const newComponentsHereRegex = /(\s+)\/\* new component flags here /;
const here = settingsData.match(newComponentsHereRegex);

// add new component
const newSettingsData = `${settingsData.substr(0, here.index)}${here[1]}${
substitutions.DISPLAY_NAME
}: false,${settingsData.substr(here.index)}`;
outputFileSync(settingsPath, newSettingsData);

// add new component export to end of src/components/index.js
const componentIndexPath = join('src', 'components', 'index.js');
const componentIndexData = readFileSync(componentIndexPath, 'utf-8');

const componentIndexPathTS = join('src', 'components', 'index.ts');
const componentIndexDataTS = readFileSync(componentIndexPathTS, 'utf-8');

outputFileSync(
componentIndexPath,
componentIndexData +
`export { ${substitutions.DISPLAY_NAME} } from './${substitutions.DISPLAY_NAME}';\n`
);

outputFileSync(
componentIndexPathTS,
componentIndexDataTS + `export * from './${substitutions.DISPLAY_NAME}';\n`
);

// NOTE: Styles except storybook are in a separate package @carbon/ibm-products-styles
const stylePackagePath = '../ibm-products-styles';
// add new component to end of src/components/_index.scss
const componentSCSSIndexPath = join(
stylePackagePath,
'src',
'components',
'_index.scss'
);
const componentSCSSIndexData = readFileSync(componentSCSSIndexPath, 'utf-8');
outputFileSync(
componentSCSSIndexPath,
componentSCSSIndexData + `@use './${substitutions.DISPLAY_NAME}';\n`
);

// add new component to end of src/components/_index-with-carbon.scss
const componentWithCarbonSCSSIndexPath = join(
stylePackagePath,
'src',
'components',
'_index-with-carbon.scss'
);
const componentWithCarbonSCSSIndexData = readFileSync(
componentWithCarbonSCSSIndexPath,
'utf-8'
);
outputFileSync(
componentWithCarbonSCSSIndexPath,
componentWithCarbonSCSSIndexData +
`@use './${substitutions.DISPLAY_NAME}/index-with-carbon' as *;\n`
);

fs.mkdirSync(
join(`${stylePackagePath}`, `src/components/${substitutions.DISPLAY_NAME}`)
);
// move files to correct location
[
'_carbon-imports.scss',
'_index.scss',
'_index-with-carbon.scss',
`_${substitutions.STYLE_NAME}.scss`,
].forEach((file) => {
const curPath = join(`src/components/${substitutions.DISPLAY_NAME}/${file}`);
const newPath = join(stylePackagePath, curPath);
fs.renameSync(curPath, newPath);
});
22 changes: 15 additions & 7 deletions ...cripts/generate/templates/DISPLAY_NAME.js → ...ripts/generate/templates/DISPLAY_NAME.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,13 @@
* LICENSE file in the root directory of this source tree.
*/

// Import portions of React that are needed.
import React from 'react';

// Other standard imports.
import PropTypes from 'prop-types';
// Import portions of React that are needed.
import React, { ForwardedRef } from 'react';
import cx from 'classnames';

import { getDevtoolsProps } from '../../global/js/utils/devtools';
import { pkg /*, carbon */ } from '../../settings';
import { pkg } from '../../settings';

// Carbon and package components we use.
/* TODO: @import(s) of carbon components and other package components. */
Expand All @@ -38,6 +36,16 @@ const componentName = 'DISPLAY_NAME';
// /* TODO: add defaults for relevant props if needed */
// };

/**
* TODO: add component type props
*/

export interface DISPLAY_NAMEProps {
children: React.ReactNode;
className: string;
[key: string]: any;
}

/**
* TODO: A description of the component.
*/
Expand All @@ -52,8 +60,8 @@ export let DISPLAY_NAME = React.forwardRef(

// Collect any other property values passed in.
...rest
},
ref
}: DISPLAY_NAMEProps,
ref: ForwardedRef<HTMLDivElement>
) => {
return (
<div
Expand Down
1 change: 1 addition & 0 deletions ...ducts/scripts/generate/templates/index.js → ...ducts/scripts/generate/templates/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@
*/

export { DISPLAY_NAME } from './DISPLAY_NAME';
export type { DISPLAY_NAMEProps } from './DISPLAY_NAME';

0 comments on commit 8cb241b

Please sign in to comment.