Squashed commit of the following: (#3102)

commit fa57e53c9e
Author: Oleg Markelov <markelolegov@gmail.com>
Date:   Tue Apr 25 13:56:16 2023 +0700

    Add format script placeholder

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

commit fb185be4b1
Author: Oleg Markelov <markelolegov@gmail.com>
Date:   Tue Apr 25 13:17:22 2023 +0700

    Update pnpm-lock.yaml

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

commit babd91c87a
Merge: 5e0b1929a 5c30b8897
Author: Oleg Markelov <markelolegov@gmail.com>
Date:   Tue Apr 25 13:01:18 2023 +0700

    Merge branch 'main' into storybook-7-infrastructure
    Signed-off-by: Oleg Markelov <markelolegov@gmail.com>

commit 5e0b1929a9
Author: Oleg Markelov <markelolegov@gmail.com>
Date:   Tue Apr 25 12:59:07 2023 +0700

    Create initial Button stories

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

commit 04099e8c22
Author: Oleg Markelov <markelolegov@gmail.com>
Date:   Tue Apr 25 12:58:26 2023 +0700

    Add storybook-7 infrastructure

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

Signed-off-by: Andrey Sobolev <haiodo@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,35 @@
+{
+  "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\"",
+    "format": "echo \"No format specified\"",
+    "storybook": "storybook dev -p 6006",
+    "test": "echo \"No test specified\""
+  },
+  "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"
+}

dev/storybook/stories/Button.stories.ts

@@ -0,0 +1,139 @@
+import type { StoryObj } from '@storybook/svelte';
+import { Button } from '@hcengineering/ui';
+import uiPlugin from '@hcengineering/ui';
+
+const meta = {
+  title: 'UI/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'label description',
+      table: {
+        type: { summary: 'IntlString | undefined' },
+        defaultValue: { summary: 'undefined' },
+      }
+    },
+    kind: {
+      control: 'select',
+      options: ['primary', 'secondary', 'no-border', 'transparent', 'link', 'link-bordered', 'dangerous', 'list', 'list-header'],
+      description: 'kind description',
+      table: {
+        type: { summary: 'ButtonKind' },
+        defaultValue: { summary: '"secondary"' },
+      }
+    },
+    size: {
+      control: 'select',
+      options: ['inline', 'small', 'medium', 'large', 'x-large'],
+      description: 'size description',
+      table: {
+        type: { summary: 'ButtonSize' },
+        defaultValue: { summary: '"medium"' },
+      }
+    },
+    shape: {
+      control: 'select',
+      options: ['rectangle', 'rectangle-left', 'rectangle-right', 'circle', 'round', undefined],
+      description: 'shape description',
+      table: {
+        type: { summary: 'ButtonShape | undefined' },
+        defaultValue: { summary: 'undefined' },
+      }
+    },
+    justify: {
+      control: 'inline-radio',
+      options: ['left', 'center'],
+      description: 'justify description',
+      table: {
+        type: { summary: '"left" | "center"' },
+        defaultValue: { summary: '"center"' },
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'disabled description',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      }
+    },
+    loading: {
+      control: 'boolean',
+      description: 'loading description',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      }
+    },
+    width: {
+      control: 'text',
+      description: 'width description',
+      table: {
+        type: { summary: 'string | undefined' },
+        defaultValue: { summary: 'undefined' },
+      }
+    },
+    height: {
+      control: 'text',
+      description: 'height description',
+      table: {
+        type: { summary: 'string | undefined' },
+        defaultValue: { summary: 'undefined' },
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'title description',
+      table: {
+        type: { summary: 'string | undefined' },
+        defaultValue: { summary: 'undefined' },
+      }
+    },
+    borderStyle: {
+      control: 'inline-radio',
+      options: ['solid', 'dashed'],
+      description: 'borderStyle description',
+      table: {
+        type: { summary: '"solid" | "dashed"' },
+        defaultValue: { summary: '"solid"' },
+      }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Ok: Story = {
+  args: {
+    label: uiPlugin.string.Ok,
+    kind: 'primary',
+    size: 'medium',
+    shape: undefined,
+    justify: 'left',
+    disabled: false,
+    loading: false,
+    width: undefined,
+    height: undefined,
+    title: 'This is a button',
+    borderStyle: 'dashed'
+  },
+};
+
+export const Cancel: Story = {
+  args: {
+    label: uiPlugin.string.Cancel,
+    kind: 'primary',
+    size: 'medium',
+    shape: undefined,
+    justify: 'left',
+    disabled: false,
+    loading: false,
+    width: undefined,
+    height: undefined,
+    title: 'This is a button',
+    borderStyle: 'dashed'
+  },
+};

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",