1.0.0 • Published 10 months ago
@amphore-dev/architect-atomic-structure v1.0.0
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.
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-structureor
yarn add --dev @amphore-dev/architect-atomic-structureUsage
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.
1.0.0
10 months ago