Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michaseel/atomic-scripts
React Component Generator in Atomic-Design Manner
https://github.com/michaseel/atomic-scripts
atomic design generator react snapshot-testing styled-components
Last synced: 3 months ago
JSON representation
React Component Generator in Atomic-Design Manner
- Host: GitHub
- URL: https://github.com/michaseel/atomic-scripts
- Owner: michaseel
- Created: 2017-11-03T11:17:03.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-24T22:41:39.000Z (over 4 years ago)
- Last Synced: 2024-10-12T22:33:23.934Z (3 months ago)
- Topics: atomic, design, generator, react, snapshot-testing, styled-components
- Language: JavaScript
- Homepage:
- Size: 161 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# atomic-scripts
[](https://greenkeeper.io/)
a small cli helper-tool for fast component scaffolding.
[]()
[](https://travis-ci.org/michaseel/atomic-scripts)
[](https://coveralls.io/github/michaseel/atomic-scripts?branch=master)
## Installation
1. `npm install --save-dev atomic-scripts` or `yarn add --dev atomic-scripts`
2. Update your `package.json` like this:
```diff json
{
"scripts": {
+ "atomic": "atomic-scripts"
},
+ "atomic-scripts": {
+ "componentsDir": "src/components/"
+ }
}
```
## Usage:
In your terminal start the cli-script via: `npm run atomic` or `yarn atomic`
The answer all the questions and the component will be scaffolded into the correct directory.
## Configuration
For custom componentTypes to choose in your cli: add them in your `package.json` config:
```diff json
"atomic-scripts": {
+ "componentTypes": [
+ "atom",
+ "molecule",
+ "organism",
+ "template"
+ ]
}
}
```
If you want to specify your own templates: configure the path of your own templates.js in the `package.json` config:
```diff json
"atomic-scripts": {
"componentsDir": "src/components/",
+ "templates": "thePathToYour/templates.js"
}
}
```
The specified templates.js MUST export an `array` of `objects` which contains two keys:
`fileName` and `fileContent`.
These two can be strings or functions.
If a function is supplied it will called with one parameter:
an object with all user answers and must return a string.
Here is an example how this answers object could look like:
```
{
type: 'atom',
name: 'TestComponent',
}
```
For an quickstart look at the original [templates.js](/templates/templates.js) file.
## Created by
- [Michael Seel](https://github.com/michaseel)
## License
MIT © [Michael Seel](https://github.com/michaseel)