WIP: feat: disabled Canvas/Docs in panel for storybook (#6)

* feat: disabled Canvas/Docs in panel for storybook and rearranged components

Co-authored-by: Maximilian Franzke <[email protected]>

Author: nmerget

.github/actions/cancel-workflow/action.yml

@@ -0,0 +1,18 @@
+---
+name: 'Cancel Workflow'
+description: 'Cancel this workflow on failure'
+inputs:
+  token:
+    description: 'A Github PAT'
+    required: true
+runs:
+  using: 'composite'
+  steps:
+    - run: |
+        gh api \
+          --method POST \
+          -H "Accept: application/vnd.github+json" \
+          /repos/db-ui/elements/actions/runs/${{ github.run_id }}/cancel
+      shell: bash
+      env:
+        GH_TOKEN: ${{ inputs.token }}

.github/workflows/00-init.yml

@@ -24,3 +24,9 @@ jobs:
         uses: bahmutov/npm-install@v1
         with:
           install-command: npm ci --ignore-scripts
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/00-install-cypress.yml

@@ -0,0 +1,25 @@
+---
+name: Install Cypress
+
+on:
+  workflow_call:
+
+jobs:
+  install-cypress:
+    name: Install Cypress
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇ Checkout repo
+        uses: actions/checkout@v3
+
+      - name: 💻 Install dependencies
+        uses: cypress-io/github-action@v4
+        with:
+          working-directory: e2e
+          runTests: false
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/00-scan-secrets.yml

@@ -11,13 +11,21 @@ jobs:
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
+
       - name: ↔ Extract branch name
         shell: bash
         run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
         id: extract_branch
+
       - name: 🐷 TruffleHog OSS
         uses: trufflesecurity/[email protected]
         with:
           path: ./
           base: ${{ steps.extract_branch.outputs.branch }}
           head: HEAD
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/01-build-all.yml

@@ -25,3 +25,9 @@ jobs:
         with:
           name: build
           path: out
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/01-build-showcases.yml

@@ -63,3 +63,9 @@ jobs:
         with:
           name: showcase-${{ matrix.showcases }}
           path: showcase/${{ matrix.showcases }}-showcase/dist
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/01-build-stencil-targets.yml

@@ -52,3 +52,9 @@ jobs:
         with:
           name: output-target-${{ matrix.themes }}-${{ steps.path.outputs.framework }}
           path: packages/db-ui-elements-${{ steps.path.outputs.framework }}
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/01-build-storybook.yml

@@ -66,3 +66,9 @@ jobs:
         with:
           name: build
           path: out
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/01-get-publish-version.yml

@@ -68,3 +68,9 @@ jobs:
         env:
           VALID_SEMVER_VERSION: ${{ steps.getVersion.outputs.version }}
         run: echo "$VALID_SEMVER_VERSION"
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/01-test.yml

@@ -17,3 +17,9 @@ jobs:
 
       - name: 🔬 Run unit/snapshot tests
         run: npm test
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/01-validate.yml

@@ -22,3 +22,9 @@ jobs:
           npm run lint:eslint
           npm run lint:stylelint
           npm run lint:markdownlint
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/02-cypress.yml

@@ -10,30 +10,47 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        containers: [areas, components, elements, showcases]
+        containers:
+          [
+            00-0-intro,
+            01-0-layout,
+            02-0-navigation,
+            02-1-navigation,
+            03-0-action,
+            04-0-data-display,
+            04-1-data-display,
+            05-0-data-input,
+            05-1-data-input,
+            06-0-feedback,
+            07-0-utility,
+            99-0-showcases,
+            99-1-showcases
+          ]
     steps:
       - name: ⬇ Checkout repo
         uses: actions/checkout@v3
 
-      - name: 🔄 Init Cache
-        uses: ./.github/actions/npm-cache
-
       - name: ⬇ Download build
         uses: ./.github/actions/download-tar-artifact
         with:
           name: build
           path: out
 
+      - name: ➡ Move out in e2e
+        run: mv out e2e
+
       - name: 🧪 Cypress run
         # Install NPM dependencies and run all Cypress tests
         uses: cypress-io/github-action@v4
         with:
+          working-directory: e2e
           start: npx [email protected] out
           wait-on: 'http://localhost:8080'
           wait-on-timeout: 120
           config: pageLoadTimeout=100000,baseUrl=http://localhost:8080
           browser: chrome
           spec: cypress/integration/${{ matrix.containers }}/*.js
+          ci-build-id: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'
 
       - name: 🛗 Upload Artifacts
         uses: actions/upload-artifact@v2
@@ -51,3 +68,9 @@ jobs:
         with:
           name: cypress-videos
           path: e2e/cypress/videos
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/03-changelog.yml

@@ -34,3 +34,9 @@ jobs:
               body: process.env.CHANGELOG_TEXT
             })
             console.log("CHANGELOG TEXT:", process.env.CHANGELOG_TEXT)
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/03-deploy-gh-pages.yml

@@ -78,3 +78,9 @@ jobs:
           fi
           echo "URL: $URL"
           echo "### GH-Pages URL :rocket: <br> <br> $URL" >> $GITHUB_STEP_SUMMARY
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/03-publish-packages.yml

@@ -104,3 +104,9 @@ jobs:
         with:
           name: package-${{ matrix.themes }}-v-elements
           path: db-ui-v-elements${{ steps.getPkgTheme.outputs.pkgTheme }}-${{ inputs.version }}.tgz
+
+      - name: 💀 Killing me softly
+        uses: ./.github/actions/cancel-workflow
+        if: failure()
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/default.yml

@@ -15,6 +15,9 @@ jobs:
   scan-secrets:
     uses: ./.github/workflows/00-scan-secrets.yml
 
+  install-cypress:
+    uses: ./.github/workflows/00-install-cypress.yml
+
   test:
     uses: ./.github/workflows/01-test.yml
     needs: [init]
@@ -42,7 +45,7 @@ jobs:
 
   cypress:
     uses: ./.github/workflows/02-cypress.yml
-    needs: [build-storybook]
+    needs: [install-cypress, build-storybook]
 
   deploy:
     uses: ./.github/workflows/03-deploy-gh-pages.yml

.gitignore

@@ -35,11 +35,11 @@ UserInterfaceState.xcuserstate
 packages/db-ui-poc-react/.env
 
 # Cypress
-cypress/videos/*
-cypress/screenshots/*
-cypress/results/*
-cypress/snapshots/actual
-cypress/snapshots/diff
+e2e/cypress/videos/*
+e2e/cypress/screenshots/*
+e2e/cypress/results/*
+e2e/cypress/snapshots/actual
+e2e/cypress/snapshots/diff
 
 
 coverage/

.storybook/main.js

@@ -3,7 +3,14 @@ module.exports = {
     '../packages/db-ui-elements-stencil/src/**/*.stories.@(js|jsx|ts|tsx|mdx)'
   ],
   addons: [
-    '@storybook/addon-essentials',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+        measure: false,
+        outline: false
+      }
+    },
     {
       name: '@storybook/addon-docs',
       options: { transcludeMarkdown: true }

.storybook/preview.js

@@ -6,23 +6,26 @@ defineCustomElements();
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   layout: 'centered',
-  controls: {
-    expanded: true,
-    hideNoControlsWarning: true
+  controls: { expanded: true, hideNoControlsWarning: true },
+  previewTabs: {
+    'storybook/docs/panel': { hidden: true },
+    canvas: { hidden: true }
   },
+  viewMode: 'story',
   options: {
     storySort: {
       method: 'alphabetical',
       order: [
-        'Intro',
-        ['Welcome', 'Getting Started'],
-        'Base',
-        ['Colors', 'Color Preview'],
-        'Elements',
-        'Components',
-        'Areas',
-        'Development',
-        'Other'
+        '00-Intro',
+        ['Welcome', 'Getting Started', 'Frameworks', 'Showcases'],
+        '01-Layout',
+        '02-Navigation',
+        '03-Action',
+        '04-Data-Display',
+        '05-Data-Input',
+        '06-Feedback',
+        '07-Utility',
+        '99-Development'
       ]
     }
   }

cypress/integration/other/welcome-story.spec.js

@@ -3,7 +3,7 @@
   "baseUrl": "http://localhost:6006",
   "reporter": "junit",
   "reporterOptions": {
-    "mochaFile": "cypress/results/output-[hash].xml"
+    "mochaFile": "./cypress/results/output-[hash].xml"
   },
   "experimentalStudio": true,
   "viewportWidth": 1920,