Maintenance: Moved storybook to an own subfolder.

.eslintignore

@@ -3,3 +3,4 @@
 # Skip auto generated files.
 app/frontend/**/graphql/api.ts
 app/frontend/common/graphql/types.ts
+.storybook/storybook-static/**

.eslintrc.js

@@ -108,11 +108,17 @@ module.exports = {
         '@typescript-eslint/no-var-requires': 'off',
       },
     },
+    {
+      files: ['.storybook/config/*'],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
     {
       files: [
         'app/frontend/tests/**',
         'app/frontend/stories/**',
-        '.eslint/**',
+        '.eslint-plugin-zammad/**',
         '.eslintrc.js',
       ],
       rules: {
@@ -133,6 +139,7 @@ module.exports = {
       },
       node: {
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+        paths: [path.resolve(__dirname, '.storybook/node_modules/')],
       },
     },
     // Adding typescript file types, because airbnb doesn't allow this by default.

.gitignore

@@ -93,7 +93,8 @@ yarn-error.log
 /node_modules
 
 # Eslint
-.eslint/node_modules
+.eslint-plugin-zammad/node_modules
 
 # Storybook
-storybook-static
+.storybook/storybook-static
+.storybook/node_modules

.gitlab/ci/pre.yml

@@ -81,7 +81,10 @@
     - yarn install
     - yarn lint:css
     - echo "ESLint check..."
+    - yarn install --cwd .storybook
     - yarn lint
+    - echo "Storybook build..."
+    - yarn storybook:build
     - echo "Rubocop check..."
     - echo -e "\\e[0Ksection_start:`date +%s`:bundle_install[collapsed=true]\\r\\e[0Kbundle install"
     - bundle config set --local frozen 'true'

.gitlab/ci/vitest.yml

@@ -8,6 +8,6 @@ vitest:
   script:
     - yarn test
     - echo "Also test eslint-plugin-zammad..."
-    - cd .eslint
+    - cd .eslint-plugin-zammad
     - yarn install
     - yarn test

.storybook/main.js → .storybook/config/main.js

@@ -1,11 +1,13 @@
 // Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/
 
 const { loadConfigFromFile, mergeConfig } = require('vite')
-const path = require('path')
 const postcss = require('postcss')
 
 module.exports = {
-  stories: ['../app/**/*.stories.mdx', '../app/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: [
+    '../../app/**/*.stories.mdx',
+    '../../app/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -30,12 +32,20 @@ module.exports = {
   },
   async viteFinal(storybookViteConfig) {
     const { config } = await loadConfigFromFile(
-      path.resolve(__dirname, '../vite.config.ts'),
+      { mode: 'storybook' }, // env
+      '../vite.config.ts', // config path, relative to root
     )
-
     return mergeConfig(storybookViteConfig, {
       ...config,
 
+      server: {
+        fs: {
+          // Allow serving files from one level up to the project root
+          allow: ['..'],
+        },
+      },
+      publicDir: '../public',
+
       // Manually specify plugins to avoid conflicts.
       plugins: [
         config.plugins.find((plugin) => plugin.name === 'vite:svg-icons'),

.storybook/config/types__react/index.d.ts

@@ -0,0 +1,4 @@
+// Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/
+
+// Intentionally empty to avoid loading react types from storybook which would break with our code.
+export {}

.storybook/package.json

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "start-storybook -p 6006 -c config",
+    "build": "build-storybook -c config"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/vue3": "^6.4.19",
+    "storybook-builder-vite": "^0.1.18"
+  }
+}