https://github.com/bryanbuchs/generator-component
Drupal SDC generator for Yo
https://github.com/bryanbuchs/generator-component
drupal storybook yo
Last synced: 4 months ago
JSON representation
Drupal SDC generator for Yo
- Host: GitHub
- URL: https://github.com/bryanbuchs/generator-component
- Owner: bryanbuchs
- Created: 2022-05-04T22:47:50.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-06-11T21:50:14.000Z (4 months ago)
- Last Synced: 2025-06-15T04:06:11.052Z (4 months ago)
- Topics: drupal, storybook, yo
- Language: JavaScript
- Homepage:
- Size: 1.41 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# generator-component
Generates a component directory for use with Storybook + Twig/Drupal
## Requirements
Requires Yeoman
`npm install -g yo`
## Install
`npm i -g @bryanbuchs/generator-component`
Or, to simplify the `yo` command to `component`:
`npm i -g generator-component@npm:@bryanbuchs/generator-component`
## Run
Run the generator from the theme directory, files will be scaffolded into `components/{component-name}`:
1. `yo component` and follow the prompts.
2. `yo component name` to prefill the name prompt
3. `yo component group-name` to prefill the name and group prompts (splits on "-")
4. `yo component --js` to prefill "y" in the "Include *.behavior.js file?"
### Prompts
* `name` - The base name of the component ("Video")
* `group` - The name of the storybook group for the component ("Media")
The `group` and `name` values will be combined to create `component-name` ("MediaVideo", "media-video")
* `description` - Optional; added as a comment in the story and behavior files
* `fields` - A list of fieldnames for the component. Added to the story args with default values, output in the twig file, and placeholders in the less file. If a fieldname is plural ("cards", "people"), it will be treated as an array in story/twig
* `js` - Boolean flag to add a behavior.js file to the component + library
* `removePaddings` - Boolean flag to remove paddings from the story parameters
* `decorator` - Boolean flag to wrap the story output in additional markup
### Output
Running the generator will create a directory with a series of boilerplate files:
1. `components/{component-name}/{component-name}.stories.js`
2. `components/{component-name}/{component-name}.twig`
3. `components/{component-name}/{component-name}.library.js`
4. `components/{component-name}/{component-name}.less`
5. `components/{component-name}/{component-name}.behavior.js`
6. `components/{component-name}/{component-name}.yml`