Architect plugin: Atomic Structure

The architect-atomic-structure plugin extends the Architect CLI tool to help developers structure their projects using the atomic design methodology. This plugin provides a clear and scalable structure for components, pages, utilities, constants, types, hooks, and services, promoting consistency and maintainability across projects.

Features

• Follows the atomic design principle with support for Atoms, Molecules, Organisms, and Templates.
• Organizes pages, utilities, constants, types, hooks, and services into their own directories.
• Automatic generation of index files and sub-index files for easy imports.
• Customizable directory and naming conventions, including prefixes, suffixes, and case formats.
• Seamless integration with the Architect CLI for efficient project scaffolding.

Language plugins

This plugin only defines the folders structure (folders, types, prefixes, suffixes, case formats, indexes). The generated files come from the language plugin, so it works with any of them: @amphore-dev/architect-plugin-react, or a Vue, PHP... plugin.

A language plugin provides its blueprints by folder name (components, pages, hooks, types...) or by type (atom, page...). The options of the structure can be overridden in your architect.config.json (e.g. a different prefix for the types).

Atomic Structure Breakdown

| Name | Type | Out folder name | Description | | --------- | ---------- | --------------- | ----------------------------------------------------- | | Atoms | atom | atoms | Basic building blocks like buttons or form fields. | | Molecules | molecule | molecules | Groups of atoms that form more complex elements. | | Organisms | organism | organisms | Complex structures that combine multiple molecules. | | Templates | template | templates | Layout components that define the structure of pages. | | Pages | page | pages | The highest level, representing full-page components. | | Utilities | util | utils | Helper functions and classes. | | Constants | constant | constants | Constants like enums or configuration values. | | Types | type | types | Type definitions for TypeScript. | | Hooks | hook | hooks | Custom React hooks. | | Services | service | services | API services or other external services. |

Installation

Install the plugin in your project directory using npm or Yarn:

npm install --save-dev @amphore-dev/architect-atomic-structure

or

yarn add --dev @amphore-dev/architect-atomic-structure

Usage

To include the plugin, modify the architect.config.json file in your project directory.

{
  "plugins": ["@amphore-dev/architect-atomic-structure"],
  "outputDir": "src"
}

To avoid conficlts with other plugins, don't forget to add the plugin to the plugins array AFTER all other plugins.

License

This plugin is licensed under the ISC License.