grienauer/wingsuit

Twig for Storybook

Tailwind Jit and Postcss 8

In Version`Wingsuit V1 PostCss8 and Jit compiler becomes default.

To upgrade your existing project:

Step 1:

yarn add -D @storybook/addon-postcss
yarn add -D @wingsuit-designsystem/preset-postcss8
yarn add @tailwindcss/jit

# Replace
"tailwindcss": "npm:@tailwindcss/postcss7-compat"
with:
"tailwindcss": "^2.0.4"

Step 2:

• Add @wingsuit-designsystem/preset-postcss8 to your wingsuit.config.js
• Follow PostCss instructions from https://storybook.js.org/addons/@storybook/addon-postcss

Step 3:

Adjust your postcss config. See https://github.com/wingsuit-designsystem/wingsuit/blob/master/starter-kits/tailwind/postcss.config.js

Upgrade from BETA.41 to rc.1

Breaking changes:

• From knobs to controls: Replace @storybook/addon-knobs to @storybook/addon-controls in your apps/storybook/main.js
• Twig functions pattern_preview and pattern are now compatible with UI Patterns functions The arguments order changed from pattern, variant, variables to pattern, variable, variant. So search for all pattern_preview and pattern methods and reorder the variables.

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

• Node ^12
• YARN ^1.19
• PHP ^7.3.0

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 [email protected]: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