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 Windows Subsystem for Linux. We're looking into ways to fix this #27.

• Node: LTS 20+, recommend NVM to manage different node versions.
• Component library: StorybookJS w/ Vite
• Templates: Drupal Twig
  • Drupal twig coding standards
• Styles: SASS & USWDS

Installation

npm install

Running locally

Opens a window on http://localhost:4040/.

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 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.

<!-- identifier.html.twig -->
<!-- Updating image paths from copied USWDS markup. -->
- 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.