Create Component

Prerequisites

Important: Components can only be generated within component libraries.

The target library for your new component must be created with the components-library-generator (opens in a new tab). If the library does not exist, you can generate a new one with the following command:

npx nx g @brainly-gene/tools:components-library

Creating a Component

To create a component, use the NX plugin's component-generator (opens in a new tab) or run the following command in the CLI:

npx nx g @brainly-gene/tools:component --library=my-components-ui

Generator Options:

• prompts-profile: Choose between basic, simple, or advanced.
• library: Specify the library where the component should be placed.

After generation, the components will appear in the designated location with the following structure:

repo-dir
│   README.md
│   package.json
│   ...
└───libs
    └───my-components-ui
        │   .storybook
        │   ...
        └───src
            └───HelloWorld
                │   index.ts
                │   HelloWorld.tsx
                │   HelloWorld.module.scss
                │   HelloWorld.spec.tsx
                │   HelloWorld.stories.tsx

The generator automatically handles the component boilerplate, Storybook files, SCSS, basic specs, and re-exports.

Now, you can run Storybook in the component library to view the generated component and start development:

npx nx run my-components-ui:storybook