react-component-scaffolder/dist/generateComponent.mjs

CLI tool for scaffolding accessible React components with built-in Storybook stories, Jest tests, and markdown documentation

#!/usr/bin/env node
import i from"fs";import s from"path";import $ from"minimist";var a=t=>`
import React from 'react'

export const ${t} = ({ type = 'button', children, ...props }) => {
  return (
    <button type={type} {...props}>
      {children || '${t}'}
    </button>
  )
}
`;var m=t=>`
import React from 'react'

export const ${t} = ({ id = '${t}Input', ...props }) => {
  return (
    <input
      type="text"
      id={id}
      name={id}
      aria-label="${t}"
      required
      {...props}
    />
  )
}
`;var l=t=>`
import React from 'react'

export const ${t} = ({ onSubmit, children, ...props }) => {
  return (
    <form role="form" onSubmit={onSubmit} {...props}>
      {children}
    </form>
  )
}
`;var c=t=>`
import React from 'react'

export const ${t} = ({ id = '${t}Area', ...props }) => {
  return (
    <textarea
      id={id}
      name={id}
      aria-label="${t}"
      required
      {...props}
    />
  )
}
`;var f=t=>`
import React from 'react'

export const ${t} = ({ htmlFor = '${t}Input', children, ...props }) => {
  return (
    <label htmlFor={htmlFor} {...props}>
      {children || '${t}'}
    </label>
  )
}
`;var d=t=>`
import React from 'react'

export const ${t} = (props) => {
  return <div {...props}>${t}</div>
}
`;var u=t=>`
import React from 'react'

export const ${t} = ({ children, ...props }) => {
  return (
    <a href="" {...props}>
      {children || '${t}'}
    </a>
  )
}
`;var g={button:a,input:m,form:l,textarea:c,label:f,link:u},h=t=>t in g?g[t]:d;var o=$(process.argv.slice(2)),e=o._[0],p=o.lang||"ts",x=o["with-tests"],b=o["with-story"],T=o["with-docs"],w=o.element?.toLowerCase(),y=o.help;(y||!e)&&(console.log(`
Usage: react-dev-scaffolder <ComponentName> [options]

Options:
  --lang=ts|js         Language output (default: ts)
  --with-tests         Include Jest test file
  --with-story         Include Storybook story file
  --with-docs          Include Markdown props documentation
  --element=<tag>      Override tag detection (e.g. input, form)
  --help               Show this help message
`),process.exit(0));var r=null;e.toLowerCase().endsWith("button")&&(r="button");e.toLowerCase().endsWith("form")&&(r="form");e.toLowerCase().endsWith("input")&&(r="input");e.toLowerCase().endsWith("label")&&(r="label");e.toLowerCase().endsWith("textarea")&&(r="textarea");e.toLowerCase().endsWith("link")&&(r="link");var C=w||r||e.toLowerCase(),S=h(C),L=S(e),j=p==="js"?"js":"tsx",n=s.join("src","components",e);i.mkdirSync(n,{recursive:!0});i.writeFileSync(s.join(n,`${e}.${j}`),L);x&&i.writeFileSync(s.join(n,`${e}.test.${p}`),`describe('${e}', () => {
  it('renders correctly', () => {
    // TODO: Add test
  })
})`);b&&i.writeFileSync(s.join(n,`${e}.stories.${p}`),`import React from 'react'
import { ${e} } from './${e}'

export default {
  title: '${e}',
  component: ${e},
}

export const Default = () => <${e} />
`);T&&i.writeFileSync(s.join(n,`${e}.md`),`# ${e}

Component props and usage.

\`\`\`tsx
<${e} />
\`\`\`
`);console.log(`\u2705 Component "${e}" scaffolded in ${n}`);