wingsuit-designsystem / wingsuit

Twig for Storybook
GNU General Public License v2.0
93 stars 16 forks source link
storybook tailwindcss

Build bulletproof TWIG Components in Storybook

  1. Describe, develop and test your Pattern in storybook with twing.
  2. Use the same pattern in Drupal with UI Patterns without any presenter pattern
  3. Starterkits for:
    • Tailwind + Alpinejs
    • Boostrap + jQuery
  4. Bundled Webpack base configuration to keep everything up to date.

Documentation

Check out the Wingsuit documentation for more information.

Prerequisites

Quickstart

  1. To install run inside themes/custom:
npx @wingsuit-designsystem/cli init
  1. Then cd wingsuit/ and run:

NPM

To start storybook

npm run dev:storybook

To start drupal

npm run dev:drupal

YARN

To start storybook

yarn dev:storybook

To start drupal

yarn dev:drupal

Generate new pattern

yarn ws generate-component

Develop Wingsuit

Help?

I am looking for help. You can ping me at drupaltwig@Slack

To develop Wingsuit you need yarn.

  1. Clone repository:
git clone git@github.com:wingsuit-designsystem/wingsuit.git
cd wingsuit
yarn bootstrap
yarn dev
  1. To start storybook cd starter-kits/tailwind and run:
yarn dev:storybook
  1. To start drupal cd starter-kits/tailwind and run:
yarn dev:drupal
  1. To build docs
    yarn dev:drupal

Wingsuit is inspired by Particle from Phase2