{"id":15089050,"url":"https://github.com/yudwig/atomic-gen","last_synced_at":"2026-02-23T22:11:22.290Z","repository":{"id":254694482,"uuid":"840360536","full_name":"yudwig/atomic-gen","owner":"yudwig","description":"Generate React components and Storybook for Atomic Design.","archived":false,"fork":false,"pushed_at":"2025-02-01T01:09:04.000Z","size":91,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-16T15:55:43.883Z","etag":null,"topics":["atomic-design","automation","cli","code-generation","mustache","npm-package","react","storybook","typescript","yaml"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yudwig.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-09T14:26:33.000Z","updated_at":"2025-02-01T01:09:07.000Z","dependencies_parsed_at":"2024-08-25T12:53:58.457Z","dependency_job_id":"8eda380a-80ee-4d47-a34a-95fa16dcf2ba","html_url":"https://github.com/yudwig/atomic-gen","commit_stats":{"total_commits":70,"total_committers":2,"mean_commits":35.0,"dds":"0.014285714285714235","last_synced_commit":"ece44807c3d5669eb9bee952393f4d87ca64e363"},"previous_names":["yudwig/atomic-gen"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/yudwig/atomic-gen","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yudwig%2Fatomic-gen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yudwig%2Fatomic-gen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yudwig%2Fatomic-gen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yudwig%2Fatomic-gen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yudwig","download_url":"https://codeload.github.com/yudwig/atomic-gen/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yudwig%2Fatomic-gen/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260278443,"owners_count":22985287,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-design","automation","cli","code-generation","mustache","npm-package","react","storybook","typescript","yaml"],"created_at":"2024-09-25T08:39:39.463Z","updated_at":"2026-02-23T22:11:22.258Z","avatar_url":"https://github.com/yudwig.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# atomic-gen\n\n`atomic-gen` is a CLI tool designed to automate the generation of React components and their corresponding Storybook stories. It generates standard files based on the specified component names using customizable templates.\n\n## Features\n\n- **Automated React Component Generation**: Automatically generates component files and Storybook story files based on specified templates.\n- **Flexible Configuration**: Easily configure the components to be generated using a YAML file.\n- **Customizable Templates**: Tailor the generated files to your project’s needs by customizing the default templates.\n\n## Usage\n\nYou can run the `atomic-gen` command using `npx` to generate components based on your configuration file.\n\n### Example Command\n\n```bash\nnpx atomic-gen --config=sample-config.yaml\n```\n\n### generate Command Options\n\n- `--config`  \n  Specifies the path to the YAML configuration file.  \n  **Example**: `--config=sample-config.yaml`\n\n- `--base-dir`  \n  Defines the base directory where the component files will be generated. The default is `src/components`.  \n  **Example**: `--base-dir=src/ui-components`\n\n- `--force`  \n  Forces the overwrite of existing files. If this option is not specified, existing files will be skipped.\n\n### Usage Example\n\n#### YAML Configuration File\n\n```yaml\natoms:\n  - Button\n  - Input\nmolecules:\n  - Form\n  - Card\norganisms:\n  - Header\ntemplates:\n  - PageTemplate\n```\n\nTo generate components based on the above configuration, you would run:\n\n```bash\nnpx atomic-gen --config=components.yaml --base-dir=src/ui-components\n```\n\nThis command will generate the specified components in the `src/ui-components` directory.\n\n#### Generated File Tree\n\nAfter running the command, the following file structure will be created:\n\n```plaintext\nsrc/\n└── ui-components/\n    ├── atoms/\n    │   ├── Button/\n    │   │   ├── Button.tsx\n    │   │   └── Button.stories.tsx\n    │   └── Input/\n    │       ├── Input.tsx\n    │       └── Input.stories.tsx\n    ├── molecules/\n    │   ├── Form/\n    │   │   ├── Form.tsx\n    │   │   └── Form.stories.tsx\n    │   └── Card/\n    │       ├── Card.tsx\n    │       └── Card.stories.tsx\n    ├── organisms/\n    │   └── Header/\n    │       ├── Header.tsx\n    │       └── Header.stories.tsx\n    └── templates/\n        └── PageTemplate/\n            ├── PageTemplate.tsx\n            └── PageTemplate.stories.tsx\n```\n\n### Template Customization\n\n`atomic-gen` supports Mustache-formatted template files. By default, the following templates are applied:\n\n#### Default Templates\n\n- `component.tsx.mustache`\n\n  ```mustache\n  import React from 'react';\n\n  export const {{componentName}} = () =\u003e {\n    return (\n      \u003cdiv\u003e{{componentName}}\u003c/div\u003e\n    );\n  };\n  ```\n\n- `component.stories.ts.mustache`\n\n  ```mustache\n  import type { Meta, StoryObj } from '@storybook/react';\n  import { {{componentName}} } from './{{componentName}}';\n\n  const meta = {\n    title: '{{componentName}}',\n    component: {{componentName}},\n    parameters: {\n      layout: 'centered',\n    },\n    tags: ['autodocs'],\n  } satisfies Meta\u003ctypeof {{componentName}}\u003e;\n\n  export default meta;\n  type Story = StoryObj\u003ctypeof meta\u003e;\n\n  export const Default: Story = {};\n  ```\n\nThese templates can be customized to fit your project’s specific requirements. You can create your own templates and apply them using the `--component-template` and `--story-template` options, allowing you to maintain a consistent code style across your generated components and stories.\n\n### Available Template Variables\n\nWhen generating components using `atomic-gen`, the following variables are passed to the templates and can be used within them:\n\n- `componentName`: The name of the component (e.g., `Button`, `Form`).\n- `categoryName`: The category under which the component is grouped (e.g., `atoms`, `molecules`).\n- `componentDir`: The directory path where the component files will be generated.\n- `componentPath`: The full path to the generated component file (e.g., `src/components/Button/Button.tsx`).\n- `storyPath`: The full path to the generated Storybook story file (e.g., `src/components/Button/Button.stories.tsx`).\n- `meta`: An object containing any metadata defined for the component in the YAML configuration file.\n\n### Using Metadata in Templates\n\nIn addition to the basic usage, `atomic-gen` now supports the inclusion of metadata for each component. This metadata can be utilized in your templates, allowing for greater flexibility and customization in the generated files.\n\n### Configuration Example with Metadata\n\nYou can define metadata for your components in the configuration YAML file as shown below:\n\n```yaml\natoms:\n  - Button:\n      - color: \"blue\"\n      - size: \"large\"\n  - Input\n\nmolecules:\n  - Form:\n      - method: \"POST\"\n      - action: \"/submit\"\n  - Card\n```\n\nIn this configuration:\n\n*   The `Button` component has two metadata entries: `color` with the value `blue` and `size` with the value `large`.\n*   The `Input` component has no metadata.\n*   The `Form` component has two metadata entries: `method` with the value `POST` and `action` with the value `/submit`.\n*   The `Card` component has no metadata.\n\n### Accessing Metadata in Templates\n\nWithin your Mustache templates, you can access the metadata using the `meta` key. For example, if you are generating a React component, your template might look like this:\n\n```mustache\nimport React from 'react'; \nexport const {{componentName}} = () =\u003e { \n  return ( \n    \u003cdiv className=\"{{meta.color}} {{meta.size}}\"\u003e \n      {{componentName}} component. \n    \u003c/div\u003e \n  ); \n};\n```\n\nIf you use the configuration file example above, the generated component file for `Button` will include the following content:\n\n```javascript\nimport React from 'react'; \nexport const Button = () =\u003e { \n  return ( \n    \u003cdiv className=\"blue large\"\u003e \n      Button component. \n    \u003c/div\u003e \n  ); \n};\n```\n\n### Notes on Metadata\n\n*   If a component does not have any metadata, the `meta` key will be an empty object, and attempting to reference a non-existent metadata entry in the template will result in an empty string.\n*   You can use as many metadata fields as you need, and they can be referenced in any part of your template.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyudwig%2Fatomic-gen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyudwig%2Fatomic-gen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyudwig%2Fatomic-gen/lists"}