Bump express from 4.18.2 to 4.20.0

.babelrc.js

@@ -30,13 +30,13 @@ module.exports = {
         legacy: true,
       },
     ],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
     ['@babel/plugin-proposal-private-methods', { loose: true }],
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-proposal-export-default-from',
     '@babel/plugin-syntax-dynamic-import',
     ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
     'babel-plugin-macros',
-    ['emotion', { sourceMap: true, autoLabel: true }],
   ],
   env: {
     test: withTests,
@@ -61,7 +61,7 @@ module.exports = {
         '@babel/plugin-syntax-dynamic-import',
         ['@babel/plugin-proposal-class-properties', { loose: true }],
         'babel-plugin-macros',
-        ['emotion', { sourceMap: true, autoLabel: true }],
+        ['@emotion', { sourceMap: true, autoLabel: true }],
         '@babel/plugin-transform-react-constant-elements',
         'babel-plugin-add-react-displayname',
       ],
@@ -91,7 +91,7 @@ module.exports = {
         ],
       ],
       plugins: [
-        'emotion',
+        '@emotion',
         'babel-plugin-macros',
         '@babel/plugin-transform-arrow-functions',
         '@babel/plugin-transform-shorthand-properties',

.circleci/config.yml

@@ -5,7 +5,7 @@ aliases:
     working_directory: /tmp/storybook
     CYPRESS_CACHE_FOLDER:
     docker:
-      - image: circleci/node:14-browsers
+      - image: cimg/python:3.10.6-browsers
 
 jobs:
   install:
@@ -154,7 +154,7 @@ jobs:
   e2e:
     working_directory: /tmp/storybook
     docker:
-      - image: cypress/included:4.7.0
+      - image: cypress/included:4.12.0
         environment:
           TERM: xterm
     steps:
@@ -313,4 +313,4 @@ workflows:
             - install
       - docs:
           requires:
-            - build
+            - build

README.md

@@ -2,39 +2,6 @@
 <img src="https://github.com/wingsuit-designsystem/wingsuit/raw/master/images/wsuit-logo-stacked.svg" width="340px">
 </p>
 
-## 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](https://www.npmjs.com/package/twing).

docs/apps/pages/pages/docs.twig

@@ -9,9 +9,25 @@
 
 {% set body %}
   {{ pattern('rich_text', {text: content}, 'default') }}
+  {% if next|length > 0 %}
+    <div class="pt-6 md:pt-14">
+      <div class="p-2 my-2.5 uppercase font-bold">NEXT</div>
+      {% for item in next %}
+        {{ pattern('next', {
+          title: item.title,
+          text: item.text,
+          button: pattern('button',{
+            text: item.link_title,
+            round: true,
+            size: 'medium',
+            url: item.href,
+          }, 'default')
+        }) }}
+      {% endfor %}
+    </div>
+  {% endif %}
 {% endset %}
 
-
 {% include "@templates/site-container.twig" with {
   menu: pattern_preview('menu', {}, 'primary'),
   top_menu: pattern_preview('menu', {}, 'top'),

docs/apps/pages/pages/guides/showroom-guide/index.mdx

@@ -0,0 +1,64 @@
+# Showroom
+Storybook patterns overwhelm most customer. To provide only the patterns the customer needs Wingsuit (>=1.2)
+adds a showroom feature.
+
+To configure the structure of Wingsuit adds a alterStory and alterPattern hook. Open `apps/storybook/preview.js`:
+
+Here a sample for a Drupal Layout Builder centric project.
+```js
+configure(
+  module,
+  [
+    require.context('./patterns', true, /\.stories(\.jsx|\.js|\.mdx)$/),
+    require.context('wspatterns', true, /\.stories(\.jsx|\.js|\.mdx)$/),
+  ],
+  require.context('./config', false, /\.json|\.ya?ml$/),
+  require.context('wspatterns', true, /\.twig$/),
+  namespaces,
+  renderImpl,
+  {
+    alterStory: (story) => {
+      if (process.env.STORYBOOK_DOCS === 'true') {
+        const docsStories = {
+          Welcome: 'Welcome',
+        };
+        if (docsStories[story.title]) {
+          return { ...story, ...{ title: docsStories[story.title] } };
+        }
+        return null;
+      }
+      return story;
+    },
+    alterPattern: (pattern) => {
+      if (process.env.STORYBOOK_DOCS === 'true') {
+        const docsPages = {
+          section: 'Section',
+          section_slider: 'Section',
+          hero: 'Blocks',
+          card: 'Blocks',
+          rich_text: 'Blocks',
+          button_group: 'Blocks',
+          avatar: 'Blocks',
+        };
+        if (docsPages[pattern.getId()]) {
+          pattern.setNamespace(docsPages[pattern.getId()]);
+          return pattern;
+        }
+        return null;
+      }
+      return pattern;
+    },
+  }
+```
+
+## Start storybook in showroom mode
+
+Run either
+```
+yarn ws build --docs
+```
+or execute
+```
+yarn ws dev --docs
+```
+to start storybook in dev mode.

docs/apps/pages/pages/guides/showroom-guide/showroom-guide.pages.jsx

@@ -0,0 +1,23 @@
+import 'protons';
+import MDX from './index.mdx';
+
+const template = require('../../docs.twig');
+
+export default {
+  path: '/guides/showroom',
+  template,
+  MDX,
+  vars: {
+    meta_title: 'Showroom',
+    meta_description: 'Display storybook components for your customer.',
+
+    next: [
+      {
+        title: 'Configure your app?',
+        text: 'Check the parameters under the "App details" section and extend your wingsuit.config.js',
+        link_title: 'Details',
+        href: '/configurations/details',
+      },
+    ],
+  },
+};

docs/apps/pages/pages/guides/twing-extensions-guide/index.mdx

@@ -0,0 +1,26 @@
+# Twing extensions
+You can add your own twing extensions to wingsuit.
+
+Here a sample to add a new function `apps/storybook/preview.js`:
+
+```js
+const renderImpl = new TwingRenderer();
+const twingEnvironment = renderImpl.getEnvironment();
+let function = new TwingFunction('function_name', function () {
+    // ...
+});
+twingEnvironment.addFunction(function);
+
+configure(
+  module,
+  [
+    require.context('./patterns', true, /\.stories(\.jsx|\.js|\.mdx)$/),
+    require.context('wspatterns', true, /\.stories(\.jsx|\.js|\.mdx)$/),
+  ],
+  require.context('./config', false, /\.json|\.ya?ml$/),
+  require.context('wspatterns', true, /\.twig$/),
+  namespaces,
+  renderImpl
+);
+```
+[Click here for more infos about twing extensions](https://nightlycommit.github.io/twing/advanced.html#context-aware-filters).

docs/apps/pages/pages/guides/twing-extensions-guide/index.yml

@@ -0,0 +1,11 @@
+extends:
+  - page
+fields:
+  content:
+    preview:
+      -
+        id: rich_text
+        variant: default
+        fields:
+          text: 'test'
+

docs/apps/pages/pages/guides/twing-extensions-guide/twing-extensions-guide.pages.jsx

@@ -0,0 +1,23 @@
+import 'protons';
+import MDX from './index.mdx';
+
+const template = require('../../docs.twig');
+
+export default {
+  path: '/guides/twing-extensions-guide',
+  template,
+  MDX,
+  vars: {
+    meta_title: 'Twing extensions',
+    meta_description: 'Add twing extensions.',
+
+    next: [
+      {
+        title: 'Configure your app?',
+        text: 'Check the parameters under the "App details" section and extend your wingsuit.config.js',
+        link_title: 'Details',
+        href: '/configurations/details',
+      },
+    ],
+  },
+};

docs/apps/pages/pages/releases/onedotone/index.mdx

@@ -46,7 +46,6 @@ Thanks to [iuscare](https://github.com/iuscare) for these great presets.
 ## New App `Wingsuit Pages`
 With this new App you can build static page with Wingsuit components and feed them with MDX files.
 [Click here for more infos](/apps/pages/).
-** >> This docs page is build with Wingsuit Pages. << **
 
 ## Awesome Drupal Kickstarter
 We rebuild the Drupal Kickstarter. We removed Acquia Lightning and build a Layout Builder interface which makes fun to work with.

docs/apps/pages/pages/releases/onedottwo/index.mdx

@@ -0,0 +1,18 @@
+# What's new in Version 1.2
+We added a showroom feature and we updated the performance and starterkit templates.
+
+## Showroom
+Now you can run and build storybook in showroom mode
+The following example renders storybook in showroom.
+```sh
+yarn ws build --docs
+```
+```sh
+yarn ws dev --docs
+```
+[Click here for more infos](/guides/showroom/).
+## Performance
+Thanks to storybook 6.4 and a updated babel configuration storybook starts now in less than 15 seconds.
+
+## Updated placeholder component.
+Image styles are generated automatically.

docs/apps/pages/pages/releases/onedottwo/onedottwo.pages.jsx

@@ -0,0 +1,22 @@
+import 'protons';
+import MDX from './index.mdx';
+
+const template = require('../../docs.twig');
+
+export default {
+  path: '/releases/onedottwo',
+  template,
+  MDX,
+  vars: {
+    meta_title: 'Wingsuit Version 1.2',
+    meta_description: 'We have added a lot of new features in Version 1.2.',
+    next: [
+      {
+        title: 'Did we catch your interest?',
+        text: 'Do the 10 minute quickstart guide!',
+        href: '/guides/quick-start-guide',
+        link_title: 'Quickstart',
+      },
+    ],
+  },
+};

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wingsuit-designsystem/docs",
-  "version": "1.2.0-alpha.3",
+  "version": "1.2.9",
   "description": "Wingsuit documentation.",
   "main": "",
   "private": true,
@@ -49,18 +49,18 @@
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
     "@webpack-cli/serve": "^1.3.0",
-    "@wingsuit-designsystem/cli": "1.2.0-alpha.3",
-    "@wingsuit-designsystem/core": "1.2.0-alpha.3",
-    "@wingsuit-designsystem/pattern": "1.2.0-alpha.3",
-    "@wingsuit-designsystem/pattern-react": "1.2.0-alpha.3",
-    "@wingsuit-designsystem/preset-compression": "1.2.0-alpha.3",
-    "@wingsuit-designsystem/preset-imagemin": "1.2.0-alpha.3",
-    "@wingsuit-designsystem/preset-mdx": "1.2.0-alpha.3",
-    "@wingsuit-designsystem/preset-pages": "1.2.0-alpha.3",
-    "@wingsuit-designsystem/preset-postcss8": "1.2.0-alpha.3",
-    "@wingsuit-designsystem/preset-pwa": "1.2.0-alpha.3",
-    "@wingsuit-designsystem/preset-tailwind2": "1.2.0-alpha.3",
-    "@wingsuit-designsystem/storybook": "1.2.0-alpha.3",
+    "@wingsuit-designsystem/cli": "1.2.9",
+    "@wingsuit-designsystem/core": "1.2.9",
+    "@wingsuit-designsystem/pattern": "1.2.9",
+    "@wingsuit-designsystem/pattern-react": "1.2.9",
+    "@wingsuit-designsystem/preset-compression": "1.2.9",
+    "@wingsuit-designsystem/preset-imagemin": "1.2.9",
+    "@wingsuit-designsystem/preset-mdx": "1.2.9",
+    "@wingsuit-designsystem/preset-pages": "1.2.9",
+    "@wingsuit-designsystem/preset-postcss8": "1.2.9",
+    "@wingsuit-designsystem/preset-pwa": "1.2.9",
+    "@wingsuit-designsystem/preset-tailwind2": "1.2.9",
+    "@wingsuit-designsystem/storybook": "1.2.9",
     "autoprefixer": "^9.7.4",
     "browser-sync-webpack-plugin": "^2.3.0",
     "core-js": "^3.4.1",

docs/source/default/patterns/02-molecules/menu/menu.wingsuit.yml

@@ -25,6 +25,10 @@ menu:
                 url: "/guides/create-component-guide"
               - title: Create new app
                 url: "/guides/create-app-guide"
+              - title: Showroom
+                url: "/guides/showroom"
+              - title: Twing extensions
+                url: "/guides/twing-extensions-guide"
           - title: CONFIGURATIONS
             url: "#"
             below:
@@ -106,8 +110,8 @@ menu:
         items:
           - title: Documentation
             url: "/guides/quick-start-guide/"
-          - title: <b>What's new in Version 1.1</b>
-            url: "/releases/onedotone"
+          - title: <b>What's new in Version 1.2</b>
+            url: "/releases/onedottwo"
     footer:
       label: Footer
       description: The footer menu.

docs/source/default/patterns/03-organisms/header/header.twig

@@ -15,7 +15,7 @@
     <div class="w-4/6 md:w-2/6 max-w-xs md:max-w-7xl ml-3">
       <div class="flex items-center -ml-3 md:ml-0">
         {% include "@atoms/logo/logo.twig" only %}
-        <span class="text-xs text-gray-300">v1.1</span>
+        <span class="text-xs text-gray-300">v1.2</span>
       </div>
     </div>
     {% if show_hamburger == true %}