Alloy CLI Frontend

Alloy CLI Frontend is a command-line tool designed to generate frontend components following an atomic design methodology. It streamlines the creation of structured and reusable components (Atoms, Molecules, and Organisms) by automating the generation of scripts, styles, states, types, and other related files.

Table of Contents

• Installation
• Usage
• Commands
  • Organism
  • Molecule
  • Atom
  • Edit Generated files
• Options
• Examples
• Contributing
• License

Installation

Ensure you have Node.js installed. Install Alloy CLI Frontend globally via npm:

npm install -g alloy-cli-frontend

or

yarn install -g alloy-cli-frontend

or

npx alloy-cli-frontend

Usage

Before running any commands, navigate to the src folder of your frontend project directory.

cd src

Run Alloy CLI Frontend using the following syntax:

alloy-cli-frontend <command> [options]

Example:

alloy-cli-frontend organism

Commands

Organism

Generates an Organism component, optionally creating a page view, template, data file, script, style, and type definition.

alloy-cli-frontend organism [options]

Options

Each command accepts a set of options to configure component generation:

| Option | Description | Default | |------------------------------|----------------------------|------------------| | -cd, --component-directory | Select component directory | organisms | | -pd, --page-directory | Select page directory | pages | | -tpd, --template-directory | Select template directory | templates | | -dd, --data-directory | Select data directory | _data | | -td, --type-directory | Select type directory | _types | | -sd, --script-directory | Select script directory | assets/scripts |

Molecule

Generates a Molecule component with options for script, style, and type definition.

alloy-cli-frontend molecule [options]

Options

Each command accepts a set of options to configure component generation:

| Option | Description | Default | |------------------------------|----------------------------|------------------| | -cd, --component-directory | Select component directory | molecules | | -td, --type-directory | Select type directory | _types | | -sd, --script-directory | Select script directory | assets/scripts |

Atom

Generates an Atom component with options for script, style, and type definition.

alloy-cli-frontend atom [options]

Options

Each command accepts a set of options to configure component generation:

| Option | Description | Default | |------------------------------|----------------------------|------------------| | -cd, --component-directory | Select component directory | atoms | | -td, --type-directory | Select type directory | _types | | -sd, --script-directory | Select script directory | assets/scripts |

Edit Generated Files

Allows you to modify files that will be generated by the CLI using an editor of your choice. You can select from various file types (Page, Component, Style, etc.) and editors (VSCode, IntelliJ IDEA, etc.).

alloy-cli-frontend edit-generated-file

This command allows you to:

1. Select the file type to modify, such as Page, Component, Style, etc.
2. Choose an editor like VSCode, Sublime, or Notepad++.
3. Open the file in the selected editor for easy editing.

Note: For users who want to edit generated files, it is recommended to install this package locally. This ensures that each project can manage its specific generated files independently, avoiding conflicts when working on multiple projects.

Examples

Generate an Organism

alloy-cli-frontend organism

Follow the interactive prompts to:

• Add state
• Create a page view
• Use a story template
• Generate a new data file

Project Structure

The Alloy CLI Frontend generates files like:

src/
  components/
    atoms/
      Button/
        Button.tsx
        Button.scss
        Button.states.json
    molecules/
      Card/
        Card.tsx
        Card.scss
        Card.states.json
    organisms/
      Header/
        Header.tsx
        Header.scss
        Header.states.json
  pages/
    HeaderPage.tsx
  templates/
    HeaderTemplate.tsx
  _data/
    Header.tsx
  _types/
    organisms.d.ts
    molecules.d.ts
    atoms.d.ts
  assets/
    scripts/
      header.entry.ts

Contributing

Contributions are welcome! To contribute:

1. Fork the repository.
2. Create a feature branch.
3. Submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.