Nucleus UI Builder

Nucleus UI Builder is a powerful CLI tool designed to scaffold React components, hooks, and pages efficiently based on customizable templates. It supports both ESM and CJS builds and provides an extensible architecture for different project structures.

🚀 Features

• Customizable Templates: Define your own component structures with YAML configuration.
• Supports Extensions: Easily add Storybook, Jest, or other extensions.
• Works with Both ESM & CJS: Compatible with different module systems.
• CLI-powered Scaffolding: Generate files and directories with a single command.

📦 Installation

Install Globally:

 npm install -g nucleus-ui-builder

 yarn global add nucleus-ui-builder

Install Locally (for project-specific usage):

 npm install nucleus-ui-builder --save-dev

 yarn add nucleus-ui-builder --dev

🚀 Usage

🔧 Initialize Configuration

Before scaffolding components, initialize the default configuration file:

 npx nucleus-init

Scaffold a New Component

 nucleus scaffold component Button in Atom Buttons storybook

Command Structure

 nucleus scaffold <templateName> <componentName> in <category> [subcategory] [extensions]

Example:

 nucleus scaffold component Input in FormElements TextFields jest,storybook

This command will:

• Create a Input component inside FormElements/TextFields
• Generate files based on the template configuration
• Include Jest & Storybook extensions if configured

⚙️ Configuration

React Nucleus uses a .nucleus.yml file for configuration. Example:

settings:
  rootDirectory: output

categories:
  - name: Atom
    path: atoms
  - name: Molecule
    path: molecules

templates:
  component:
    extensions:
      - storybook
      - jest
    files:
      - name: "{{componentName}}.tsx"
        content: "export default function {{componentName}}() { return <div />; }"
      - name: "index.ts"
        content: "export { default } from './{{componentName}}';"
      - name: "interface.ts"
        content: "export interface I{{componentName}}Props {}"

🛠 Development

Clone the repository:

git clone https://github.com/yourusername/react-nucleus.git
cd react-nucleus

Install dependencies:

yarn install

Build the package:

yarn build

Run tests:

yarn test:watch

📝 Contributing

Pull requests and feature requests are welcome! However, please follow these guidelines to ensure code quality and maintainability:

🔹 Code Standards

• Ensure your code follows the existing project structure and design patterns (e.g., Adapter, Builder, Command).
• Keep the code clean and modular, avoiding unnecessary complexity.
• Use dependency injection wherever applicable.
• Avoid placing helper functions inside commands/ or core/—instead, use proper design patterns.

🧪 Testing

• All new features must include tests (Unit & Integration).
• We use Jest for testing; ensure your code has at least 90% test coverage.
• Run tests before submitting your PR:

  yarn test

🚀 Submitting a PR

1. Fork the repository and create a feature branch:

   git checkout -b feature/my-new-feature

2. Ensure all tests pass:

   yarn test

3. Format the code using Prettier & ESLint:

   yarn lint

4. Commit changes with a meaningful message:

   git commit -m "✨ Added support for XYZ"

5. Push to your fork and submit a Pull Request (PR).

Following these steps ensures that contributions maintain a high standard and integrate smoothly into the project. 🚀🔥

📜 License

MIT License. See LICENSE for details.

📌 Author

Created with ❤️ by Radin Vafaei