Add storybook-7 infrastructure

Signed-off-by: Oleg Markelov <markelolegov@gmail.com>

dev/storybook/.storybook/decorators/ThemeDecorator.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Theme } from '@hcengineering/theme'
+</script>
+
+<Theme>
+  <slot/>
+</Theme>

dev/storybook/.storybook/main.js

@@ -0,0 +1,33 @@
+/** @type { import('@storybook/svelte-webpack5').StorybookConfig } */
+
+const config = {
+  webpackFinal: async (config) => {
+    config.module.rules.find(r => r.loader && r.loader.includes('svelte-loader')).options.preprocess = require('svelte-preprocess')();
+    config.resolve.alias['@hcengineering/platform-rig/profiles/ui/svelte'] = require('path').resolve('../../common/temp/node_modules', 'svelte');
+    return config;
+  },
+  stories: ['../stories/**/*.stories.@(js|ts|svelte)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-links',
+    {
+      name: "@storybook/addon-styling",
+      options: {
+        sass: {
+          implementation: require("sass"),
+        },
+      },
+    },
+    'storybook-addon-themes'
+  ],
+  framework: {
+    name: '@storybook/svelte-webpack5',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+};
+
+export default config;

dev/storybook/.storybook/preview.js

@@ -0,0 +1,45 @@
+/** @type { import('@storybook/svelte').Preview } */
+
+import '@hcengineering/theme/styles/global.scss';
+import './styles/styles.scss';
+
+import { addStringsLoader } from '@hcengineering/platform';
+import ThemeDecorator from './decorators/ThemeDecorator';
+
+addStringsLoader('ui', async (lang) => {
+  return await import(`@hcengineering/ui/lang/${lang}.json`);
+});
+
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    backgrounds: { disable: true },
+    controls: {
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    },
+    themes: {
+      target: 'html',
+      default: 'Dark',
+      list: [
+        {
+          name: 'Dark',
+          class: 'theme-dark',
+          color: '#1f2023'
+        },
+        {
+          name: 'Light',
+          class: 'theme-light',
+          color: '#fff'
+        }
+      ],
+      clearable: false
+    },
+  },
+  decorators: [() => ThemeDecorator]
+};
+
+export default preview;

dev/storybook/.storybook/styles/styles.scss

@@ -0,0 +1,7 @@
+html, body {
+  overflow: auto;
+}
+
+.docs-story {
+  background: var(--body-color);
+}

dev/storybook/babel.config.json

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-typescript"
+  ]
+}

dev/storybook/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@hcengineering/storybook",
+  "version": "0.1.0",
+  "main": ".storybook/main.js",
+  "author": "Anticrm Platform Contributors",
+  "license": "EPL-2.0",
+  "scripts": {
+    "build": "echo \"No build specified\" && exit 0",
+    "storybook": "storybook dev -p 6006",
+    "test": "echo \"No test specified\" && exit 0"
+  },
+  "devDependencies": {
+    "@hcengineering/platform": "^0.6.8",
+    "@hcengineering/theme": "^0.6.2",
+    "@hcengineering/ui": "^0.6.6",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/addon-styling": "^1.0.1",
+    "@storybook/blocks": "^7.0.6",
+    "@storybook/svelte": "^7.0.6",
+    "@storybook/svelte-webpack5": "^7.0.6",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.2.0",
+    "storybook": "^7.0.6",
+    "storybook-addon-themes": "^6.1.0",
+    "svelte-preprocess": "5.0.3"
+  },
+  "repository": "https://github.com/hcenginneing/anticrm"
+}

rush.json

@@ -926,6 +926,11 @@
       "projectFolder": "dev/generator",
       "shouldPublish": false
     },
+    {
+      "packageName": "@hcengineering/storybook",
+      "projectFolder": "dev/storybook",
+      "shouldPublish": false
+    },
     {
       "packageName": "@hcengineering/model-gmail",
       "projectFolder": "models/gmail",