Merge pull request #89 from cloudblue/LITE-29965-storybook-to-work-wi…

…th-vite

LITE-29965 add storybook support for vite, upgrade to storybook 8

.eslintrc.cjs

@@ -36,7 +36,7 @@ module.exports = {
   },
 
   env: {
-    'vitest-globals': true,
+    'vitest-globals/env': true,
   },
 
   parserOptions: {

.storybook/main.js

@@ -1,5 +1,3 @@
-const path = require('node:path');
-
 export default {
   stories: [
     '../components/src/**/*.stories.@(js|jsx|ts|tsx|vue)',
@@ -12,56 +10,22 @@ export default {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@storybook/addon-designs',
-    'storybook-vue-addon',
-    'storybook-addon-vue-mdx',
+    { name: '@storybook/addon-designs', options: { renderTarget: 'tab' } },
   ],
 
   framework: {
-    name: '@storybook/vue3-webpack5',
-    options: {},
+    name: '@storybook/vue3-vite',
+    options: {
+      builder: {
+        viteConfigPath: './components/vite.config.js',
+      },
+    },
   },
 
   features: {
     interactionsDebugger: true,
   },
 
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.svg/,
-      type: 'asset/source',
-      loader: 'svgo-loader',
-      options: {
-        configFile: require.resolve('../components/svgo.config.js'),
-      },
-    });
-
-    // Find Vue webpack rule and update its options to work with custom elements
-    const vueRule = config.module.rules.find((rule) => rule.test?.toString() === '/\\.vue$/');
-    vueRule.options = {
-      ...vueRule.options,
-      customElement: true,
-      compilerOptions: {
-        isCustomElement: (tag) => tag.startsWith('ui-'),
-      },
-    };
-
-    config.module.rules.push({
-      test: /\.styl(us)$/,
-      use: ['vue-style-loader', 'css-loader', 'stylus-loader'],
-    });
-
-    config.resolve.alias = {
-      vue: path.resolve(__dirname, '../node_modules/vue/dist/vue.esm-bundler.js'),
-      '~core': path.resolve(__dirname, '../components/src/core'),
-      '~widgets': path.resolve(__dirname, '../components/src/widgets'),
-      '~constants': path.resolve(__dirname, '../components/src/constants'),
-      '~composables': path.resolve(__dirname, '../components/src/composables'),
-    };
-
-    return config;
-  },
-
   docs: {
     autodocs: true,
   },

.storybook/manager.js

@@ -1,5 +1,4 @@
-import { addons } from '@storybook/addons';
-import { themes } from '@storybook/theming';
+import { addons } from '@storybook/manager-api';
 import cloudBlueTheme from './CloudBlueTheme';
 
 addons.setConfig({

.storybook/preview.js

@@ -1,7 +1,7 @@
 import './global-styles.css';
+import './stories.css';
 
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,

.storybook/stories.css

@@ -0,0 +1,17 @@
+.sb-all-icons {
+  margin-top: 24px;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.sb-icon-wrapper {
+  width: calc(33% - 10px);
+  margin-bottom: 20px;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+}
+.sb-icon {
+  margin-right: 4px;
+}

components/src/composables/validation.spec.js

@@ -11,7 +11,7 @@ describe('validation composables', () => {
 
     beforeEach(() => {
       model = ref('');
-      rule = jest.fn().mockReturnValue(true);
+      rule = vi.fn().mockReturnValue(true);
       rules = [rule];
     });
 

components/src/stories/Button.stories.js

@@ -47,6 +47,10 @@ export default {
   component: Button,
   parameters: {
     layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/iWvG1cSD2xzbGS2KAB1DgV/Connect-UI-Guides-%26-Specs?type=design&node-id=1-4009&mode=design&t=5CPLKuHbPQnKMEJh-0',
+    },
   },
   argTypes: {
     mode: { control: 'radio', options: ['solid', 'flat', 'outlined'] },

components/src/stories/Card.stories.js

@@ -8,6 +8,10 @@ export default {
   component: cCard,
   parameters: {
     layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/iWvG1cSD2xzbGS2KAB1DgV/Connect-UI-Guides-%26-Specs?node-id=1%3A5688&t=a9arRvCkF2acPp5E-1',
+    },
   },
 };
 

components/src/stories/Icon.stories.js

@@ -1,7 +1,12 @@
 import Icon from '~widgets/icon/widget.vue';
 import registerWidget from '~core/registerWidget';
 
-import * as icons from '@cloudblueconnect/material-svg';
+import * as iconsAnimated from '@cloudblueconnect/material-svg/animated';
+import * as iconsBaseline from '@cloudblueconnect/material-svg/baseline';
+import * as iconsOutline from '@cloudblueconnect/material-svg/outline';
+import * as iconsRound from '@cloudblueconnect/material-svg/round';
+import * as iconsSharp from '@cloudblueconnect/material-svg/sharp';
+import * as iconsTwotone from '@cloudblueconnect/material-svg/twotone';
 
 registerWidget('ui-icon', Icon);
 
@@ -13,7 +18,7 @@ export default {
   },
   argTypes: {
     iconName: {
-      options: Object.keys(icons),
+      options: Object.keys(iconsBaseline),
       control: {
         type: 'select',
       },
@@ -34,3 +39,147 @@ export const Component = {
     color: '#757575',
   },
 };
+
+export const Animated = {
+  name: 'All animated',
+  render: () => ({
+    setup() {
+      return {};
+    },
+    template:
+      '<div className="sb-all-icons">' +
+      Object.keys(iconsAnimated)
+        .map(
+          (icon) =>
+            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
+        )
+        .join('') +
+      '</div>',
+  }),
+  args: {},
+  argTypes: {
+    iconName: { control: false },
+    size: { control: false },
+    color: { control: false },
+  },
+};
+
+export const Baseline = {
+  name: 'All baseline',
+  render: () => ({
+    setup() {
+      return {};
+    },
+    template:
+      '<div className="sb-all-icons">' +
+      Object.keys(iconsBaseline)
+        .map(
+          (icon) =>
+            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
+        )
+        .join('') +
+      '</div>',
+  }),
+  args: {},
+  argTypes: {
+    iconName: { control: false },
+    size: { control: false },
+    color: { control: false },
+  },
+};
+
+export const Outline = {
+  name: 'All outline',
+  render: () => ({
+    setup() {
+      return {};
+    },
+    template:
+      '<div className="sb-all-icons">' +
+      Object.keys(iconsOutline)
+        .map(
+          (icon) =>
+            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
+        )
+        .join('') +
+      '</div>',
+  }),
+  args: {},
+  argTypes: {
+    iconName: { control: false },
+    size: { control: false },
+    color: { control: false },
+  },
+};
+
+export const Round = {
+  name: 'All round',
+  render: () => ({
+    setup() {
+      return {};
+    },
+    template:
+      '<div className="sb-all-icons">' +
+      Object.keys(iconsRound)
+        .map(
+          (icon) =>
+            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
+        )
+        .join('') +
+      '</div>',
+  }),
+  args: {},
+  argTypes: {
+    iconName: { control: false },
+    size: { control: false },
+    color: { control: false },
+  },
+};
+
+export const Sharp = {
+  name: 'All sharp',
+  render: () => ({
+    setup() {
+      return {};
+    },
+    template:
+      '<div className="sb-all-icons">' +
+      Object.keys(iconsSharp)
+        .map(
+          (icon) =>
+            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
+        )
+        .join('') +
+      '</div>',
+  }),
+  args: {},
+  argTypes: {
+    iconName: { control: false },
+    size: { control: false },
+    color: { control: false },
+  },
+};
+
+export const Twotone = {
+  name: 'All twotone',
+  render: () => ({
+    setup() {
+      return {};
+    },
+    template:
+      '<div className="sb-all-icons">' +
+      Object.keys(iconsTwotone)
+        .map(
+          (icon) =>
+            `<div className="sb-icon-wrapper"><ui-icon className="sb-icon" iconName="${icon}" size="32"/> <span>${icon}</span></div>`,
+        )
+        .join('') +
+      '</div>',
+  }),
+  args: {},
+  argTypes: {
+    iconName: { control: false },
+    size: { control: false },
+    color: { control: false },
+  },
+};