What about scripts to generate code ?

[yoannfleurydev]

The problem

I often find myself doing the same tasks over and over again:

• create a component with some path
• create the docs.stories.tsx for that component

The solution

What about a script that can generate a simple boilerplate to create a new component ?

yarn generate:component MyComponent

That will generate a file src/components/MyComponent/index.tsx

import { Box } from '@chakra-ui/react';

export const MyComponent = () => {
  return <Box>MyComponent</Box>;
}

And a file src/components/MyComponent/docs.stories.tsx

import { MyComponent } from '.';

export default {
  title: 'Components/MyComponent',
};

export const Default = () => {
  return <MyComponent />;
};

[yoannfleurydev]

So I did this script at the moment that is working as expected as a solution to that problem.

import { mkdir, readFile, writeFile } from 'node:fs/promises';
import { resolve } from 'node:path';

const INDEX_PATH = resolve(
  process.cwd(),
  './scripts/templates/new-component/index.tsx.txt'
);

const STORY_PATH = resolve(
  process.cwd(),
  './scripts/templates/new-component/docs.stories.tsx.txt'
);

function readFileAndAdaptToComponentName(file, componentName) {
  return readFile(file, 'utf8')
    .then((content) => content.replace(/{{COMPONENT_NAME}}/g, componentName))
    .catch((err) => console.error(err));
}

async function main() {
  // Get inputs the component name from the command line arguments
  const [, , componentName] = process.argv;

  if (!componentName) {
    console.log('Please provide a component name.');
    process.exit(1);
  }

  const component = await readFileAndAdaptToComponentName(
    INDEX_PATH,
    componentName
  );
  const story = await readFileAndAdaptToComponentName(
    STORY_PATH,
    componentName
  );

  const componentFolder = resolve(
    process.cwd(),
    `./src/components/${componentName}`
  );

  mkdir(componentFolder, {
    recursive: true,
  });

  writeFile(resolve(componentFolder, 'index.tsx'), component, 'utf8');
  writeFile(resolve(componentFolder, 'docs.stories.tsx'), story, 'utf8');
}

main();

[bonesy512]

🌊🚀

[yoannfleurydev]

I did initialize a PR that goes this way. I used plop so it will be easier to add further scripts to 🚀 Start UI [web]

[yoannfleurydev]

https://plopjs.com/ might be a good solution (just saw that package in zag.js repository)