Merge pull request #5570 from sulmoJ/develop

feat(web-storybook): create storybook setup & refactor for separation of concerns

Author: sulmoJ

.dockerignore

@@ -18,7 +18,8 @@ deploy
 # Output
 out
 **/dist
-apps/storybook/.out
+apps/mirinae-storybook/.out
+apps/web-storybook/.out
 packages/mirinae/css
 packages/mirinae/types
 
@@ -55,4 +56,4 @@ VERSION
 .idea
 *.swp
 *.bak
-**/.DS_Store
+**/.DS_Store

apps/storybook/.eslintignore apps/mirinae-storybook/.eslintignoreapps/storybook/.eslintignore renamed to apps/mirinae-storybook/.eslintignore

@@ -1,6 +1,4 @@
-import { create } from '@storybook/theming/create';
- 
-export default create({
+export default {
     base: 'light',
     colorPrimary: '#6638B6',
     colorSecondary: 'rgba(102, 56, 182, 0.9)',
@@ -29,4 +27,4 @@ export default create({
     brandTitle: 'Mirinae Design System',
     brandUrl: 'https://github.com/cloudforet-io/mirinae',
     brandImage: './images/SpaceONE_logoTypeA.svg',
-});
+};

apps/storybook/.eslintrc.js apps/mirinae-storybook/.eslintrc.jsapps/storybook/.eslintrc.js renamed to apps/mirinae-storybook/.eslintrc.js

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from "@storybook/vue-vite";
+import { mainConfig } from "storybook-config-custom";
+
+/** @type { import('@storybook/vue-vite').StorybookConfig } */
+const config: StorybookConfig = {
+  ...mainConfig,
+  stories: [
+    '../../../packages/mirinae/src/**/*.mdx',
+    '../../../packages/mirinae/src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+};
+
+export default config;

apps/storybook/.gitignore apps/mirinae-storybook/.gitignoreapps/storybook/.gitignore renamed to apps/mirinae-storybook/.gitignore

@@ -0,0 +1,9 @@
+
+import CloudforetThemeVar from './CloudforetTheme';
+import { setConfig } from 'storybook-config-custom';
+
+// window.STORYBOOK_GA_ID = 'UA-159327743-4';
+
+setConfig({
+  theme: CloudforetThemeVar,
+})

…/storybook/.storybook/CloudforetTheme.js …-storybook/.storybook/CloudforetTheme.jsapps/storybook/.storybook/CloudforetTheme.js renamed to apps/mirinae-storybook/.storybook/CloudforetTheme.js apps/storybook/.storybook/CloudforetTheme.js renamed to apps/mirinae-storybook/.storybook/CloudforetTheme.js

@@ -12,10 +12,12 @@ import VueRouter from 'vue-router';
 import SvgIcon from 'vue-svgicon';
 import webFontLoader from 'webfontloader';
 
-import screens from '@/styles/screens.cjs';
-import { fontUrls, webFonts } from '@/styles/web-fonts.cjs';
+import screens from 'mirinae-foundation/screens.cjs';
 
-import SpaceOneTheme from './CloudforetTheme';
+import { fontUrls, webFonts } from 'mirinae-foundation/web-fonts.cjs';
+
+import CloudforetTheme from './CloudforetTheme';
+import { createTheme } from 'storybook-config-custom';
 
 Vue.use(VueRouter);
 Vue.use(VueI18n);
@@ -63,7 +65,7 @@ const preview = {
             }
             return null;
         },
-        theme: SpaceOneTheme,
+        theme: createTheme(CloudforetTheme),
     },
     viewport: {
         viewports,

apps/mirinae-storybook/.storybook/main.ts

@@ -0,0 +1,20 @@
+{
+  "name": "mirinae-storybook",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "eslint-config-custom": "*",
+    "mirinae-foundation": "*",
+    "postcss-config-custom": "*",
+    "storybook-config-custom": "*",
+    "tsconfig": "*"
+  }
+}