Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bixal/storybook-rapid-prototyping
Rapid prototyping using StorybookJS and Drupal twig.
https://github.com/bixal/storybook-rapid-prototyping
Last synced: 1 day ago
JSON representation
Rapid prototyping using StorybookJS and Drupal twig.
- Host: GitHub
- URL: https://github.com/bixal/storybook-rapid-prototyping
- Owner: Bixal
- License: mpl-2.0
- Created: 2024-07-23T23:31:16.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-23T20:17:20.000Z (4 months ago)
- Last Synced: 2024-08-23T21:36:17.961Z (4 months ago)
- Language: MDX
- Homepage:
- Size: 1.06 MB
- Stars: 0
- Watchers: 4
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Rapid prototyping starter kit
Rapid prototyping using StorybookJS, US Web Design System (USWDS), and Drupal Twig. No prior knowledge necessary.
## Tech stack
> [!CAUTION]
> There are some compatibility issues with StorybookJS Vite on Windows. Please use **W**indows **S**ubsystem for **L**inux. We're looking into ways to fix this [#27](https://github.com/Bixal/storybook-rapid-prototyping/issues/27).
- **Node:** LTS 20+, recommend [NVM](https://github.com/nvm-sh/nvm#installing-and-updating) to manage different node versions.
- **Component library:** StorybookJS w/ Vite
- **Templates:** [Drupal Twig](https://github.com/larowlan/vite-plugin-twig-drupal)
- [Drupal twig coding standards](https://www.drupal.org/docs/develop/coding-standards/twig-coding-standards)
- **Styles:** [SASS](https://sass-lang.com/documentation) & [USWDS](https://designsystem.digital.gov)
## Installation
```sh
npm install
```
## Running locally
Opens a window on http://localhost:4040/.
```sh
npm start
```
### Using USWDS Static assets (images & fonts)
> [!NOTE]
> When using in Drupal theme, you'll need to copy over USWDS fonts/images. This setup works specifically for StorybookJS.
Copying markup from [USWDS components](https://designsystem.digital.gov/components/) can result in broken images. To fix this, simply remove the `assets` in the path.
You can reference static assets in USWDS node package. This is set in `.storybook/main.js:8`. Example below.
```diff
- src="/assets/img/circle-gray-20.svg"
+ src="/img/circle-gray-20.svg"
```
## Contributing
Pull requests are welcome.
For major changes, please open an issue first to discuss what you would like to change.