Templates
Define your own templates for Atomic Bomb

Some text

Start Setup
View on GitHub
Atomic Bomb Templates
Atomic Bomb Templates

Templates

Templates are a powerful feature of Atomic Bomb that allow developers to define their own custom templates for generating components. These templates can be used to create consistent and reusable component structures, making it easier to maintain a cohesive design system across your application.

By using templates, developers can streamline the component creation process and ensure that all components adhere to the same structure and best practices. This not only saves time but also helps maintain a high level of code quality and consistency throughout the project.

Templates (for now are only available for components but will be extended to features in the future) are defined as a set of files with placeholders that can be replaced with actual values when generating components. This allows developers to create custom templates for different types of components, such as atoms, molecules, organisms, templates, and pages, and easily generate new components based on these templates.

For version 8.x.x the templates will be extended to support more complex use cases, such as generating entire feature folders with multiple components, hooks, and tests. This will allow developers to quickly scaffold out new features in their applications while maintaining a consistent structure and adhering to best practices.

In addition they will switch to a Jinja2 compatible syntax.

number-1

Define Custom Templates

Create your own custom templates for different types of components, such as atoms, molecules, organisms, templates, and pages. These templates can include placeholders that will be replaced with actual values when generating components. Those templates (for now) are a part of the general template system on my github. Open a PR if you want a custom template!

number-2

Generate Components from Templates

Use the defined templates to generate new components based on the specified structure and best practices. This allows you to maintain consistency across your component library and streamline the component creation process.

Shell
npx atomic-bomb --platform react-ts-vite

Uses the

react-ts-vite
template to generate components with a specific structure and best practices for React, TypeScript, and Vite projects.

Features

The templates are basically just a set of files with placeholders that can be replaced with actual values when generating components. This allows developers to define their own custom templates for different types of components, such as atoms, molecules, organisms, templates, and pages. By using templates, developers can ensure consistency across their component library and streamline the component creation process.

    Planned

    For version 8.x.x the templates will be extended to support more complex use cases, such as generating entire feature folders with multiple components, hooks, and tests. This will allow developers to quickly scaffold out new features in their applications while maintaining a consistent structure and adhering to best practices.

    In addition they will switch to a Jinja2 compatible syntax.

      Atomic Bomb Templates

      Template Resources for the [Atomic Bomb](https://www.npmjs.com/package/atomic-bomb) package.

      Contributors needed

      Contributors needed for adding more platform specific templates to

      atomic-bomb
      .

      Structure

      Shell
      .
      ├── react
      │ ├── [NAME].js
      │ ├── [NAME].stories.js
      │ ├── [NAME].test.js
      │ ├── _[NAME].style.scss
      │ ├── _index.scss
      │ └── index.js
      └── react.json

      Each template consist of a directory and a JSON file with the same name. Contents of that JSON file is (for now) the location the Atomic dirs need to be deployed, for example the

      react.json
      now only holds (possible future enhancement):

      JSON
      {
      "search": "react",
      "platform": "react",
      "destination": "src/components",
      "scss": true
      }

      Where:

      • search
        : item in
        package.json/dependencies
        to look for
      • platform
        : which platform you are running (determines the
        template dir
        )
      • destination
        : directory where to put the components (configurable in downloaded/create
        $PROJECT_ROOT/.atomic-bomb
        )
      • scss
        : boolean, werther or not adding scss to atomic dirs

      Current platforms

      • react:
        atomic-bomb --platform react --type atom --name Label
      • react-native:
        atomic-bomb --platform react-native --type atom --name Label
      • react TypeScript:
        atomic-bomb --platform react-ts --type atom --name Label