⚡ Bootstrap React component folder structure

CLI for bootstraping component folder structure for TypeScript React projects that use SCSS Modules for styling and React Cosmos for visual testing

Install

npm i -D @lr0pb/component

Using

Use npx c to create component in the current working directory:

$ npx c ui/Button
            |
            v
src/ui/components/Button

It uses the next pattern for the component path:

$ npx c [folders]/[name]
               |
               v
[sourceDir]/[folders]/components/[name]

You could switch source directory by --source-dir [dir] flag and you could remove adding nested components/ folder by --exact-path (-e) flag

Component file structure

Using next flags you could tweak what files will have your next component:

  --no-types              Separated types file
  -s, --styles            Style files (default: false)
  --no-fixture            Fixtures object file
  -f, --single-fixture    Single fixture file (default: false)
  -d, --decorator         Cosmos decorator (default: false)
  -e, --exact-path        Create exact folder (default: false)

All them you can apply via multi select interface:

Use -y flag to create component immediatelly without operating with select interface

Component have next file structure:

Button
  ├ Button.tsx                 base file
  ├ Button.fixture.tsx         --no-fixture to opt out
  ├ Button.module.scss         --styles
  ├ Button.module.scss.d.ts    --styles
  ├ Button.types.ts            --no-types to opt out
  ├ cosmos.decorator.tsx       --decorator
  └ index.ts                   base file

Types declaration file for styles is the same you get from Typed CSS Modules with --namedExports flag

Project was created using Pastel, Ink, Ink UI and Zod