Feature: more vue components, dynamic Light and Dark theme variants

Makefile

@@ -61,6 +61,10 @@ nuke:
 html-storybook:
 	pnpm --filter @explorer-1/html-storybook dev
 
+## HTML: run Storybook with --force-build-preview
+html-storybook-force:
+	pnpm --filter @explorer-1/html-storybook dev --force-build-preview
+
 ## HTML: build Storybook
 html-storybook-build:
 	pnpm --filter @explorer-1/html-storybook build
@@ -83,6 +87,10 @@ vue-storybook:
 vue-storybook-build:
 	pnpm --filter @explorer-1/vue-storybook build
 
+## HTML: run Storybook with --force-build-preview
+vue-storybook-force:
+	pnpm --filter @explorer-1/vue-storybook dev --force-build-preview
+
 ## Vue: run Vite
 vue-dev:
 	pnpm --filter @explorer-1/vue dev
@@ -111,6 +119,8 @@ lint:
 lint-fix:
 	pnpm run lint:fix
 
+# how to use pnpm to upgrade storybook
+# storybook@latest upgrade --package-manager pnpm
 # TODO: Below helper commands not running as expected change dir first, then pnpm dlx...
 # ## HTML: update Storybook
 # html-storybook-update:

apps/html-storybook/.storybook/preview.ts

@@ -56,30 +56,35 @@ const preview = {
   globalTypes: {
     themesConfig: {
       defaultValue: {
-        options: ['ThemeVariantLight', 'ThemeInternal'],
+        themes: ['Default', 'EDU', 'Internal'],
+        method: 'css'
+      }
+    },
+    variantsConfig: {
+      defaultValue: {
+        variants: ['ThemeVariantLight', 'ThemeVariantDark'],
         method: 'css'
       }
     },
     theme: {
       description: 'Global Theme',
-      defaultValue: 'ThemeVariantLight',
+      defaultValue: 'ThemeDefault',
       toolbar: {
         title: 'Theme',
         // https://storybook.js.org/docs/faq#what-icons-are-available-for-my-toolbar-or-my-addon
         icon: 'eye',
         items: [
-          { value: 'ThemeVariantLight', icon: 'circlehollow', title: 'Default Theme' },
-          { value: 'ThemeInternal', icon: 'collapse', title: 'Internal Theme' }
+          {
+            value: 'ThemeDefault',
+            icon: 'home',
+            title: 'Default Theme'
+          },
+          { value: 'ThemeEdu', icon: 'globe', title: 'EDU Theme' },
+          { value: 'ThemeInternal', icon: 'key', title: 'Internal Theme' }
         ],
         dynamicTitle: true
       }
     },
-    variantsConfig: {
-      defaultValue: {
-        options: ['ThemeVariantLight', 'ThemeVariantDark'],
-        method: 'css'
-      }
-    },
     variant: {
       description: 'Theme Variant',
       defaultValue: 'ThemeVariantLight',
@@ -88,7 +93,11 @@ const preview = {
         // https://storybook.js.org/docs/faq#what-icons-are-available-for-my-toolbar-or-my-addon
         icon: 'eye',
         items: [
-          { value: 'ThemeVariantLight', icon: 'circlehollow', title: 'Light Variant' },
+          {
+            value: 'ThemeVariantLight',
+            icon: 'circlehollow',
+            title: 'Light Variant'
+          },
           { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' }
         ],
         dynamicTitle: true

apps/html-storybook/package.json

@@ -17,12 +17,12 @@
     "prepare": "npm run prepare:clean && npm run prepare:public",
     "prepare:clean": "rimraf ./public/dist",
     "prepare:public": "cp -R ./node_modules/@explorer-1/html/dist/assets/ ./public/dist",
-    "storybook": "pnpm run prepare && storybook dev -c .storybook -p 6006 --ci",
+    "storybook": "pnpm run prepare && storybook dev -c .storybook -p 7007 --ci",
     "lint": "eslint .storybook",
     "lint:fix": "eslint .storybook --fix",
     "build": "pnpm run prepare && storybook build -c .storybook -o storybook_compiled",
-    "percy": "percy storybook http://localhost:6006",
-    "percy:dry-run": "percy storybook http://localhost:6006 --dry-run"
+    "percy": "percy storybook http://localhost:7007",
+    "percy:dry-run": "percy storybook http://localhost:7007 --dry-run"
   },
   "dependencies": {
     "@fancyapps/ui": "^4.0.26",
@@ -51,12 +51,13 @@
     "autoprefixer": "^10.4.19",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
+    "postcss-import": "^16.1.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^5.0.5",
     "storybook": "^8.1.4",
     "tailwindcss": "^3.4.3",
-    "tslib": "^2.6.2",
     "ts-node": "^10.9.2",
+    "tslib": "^2.6.2",
     "typescript": "^5.2.2",
     "vite": "^5.2.11"
   },

apps/html-storybook/postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {}
   }

apps/vue-storybook/.storybook/main.ts

@@ -7,18 +7,19 @@ const config = {
       options: {
         actions: false,
         backgrounds: false,
-        outlines: false,
-      },
+        outlines: false
+      }
     },
     '@storybook/addon-a11y',
     '@whitespace/storybook-addon-html',
+    'storybook-addon-vue-slots'
   ],
 
   framework: {
     name: '@storybook/vue3-vite',
-    options: {},
+    options: {}
   },
 
-  docs: {},
-};
-export default config;
+  docs: {}
+}
+export default config

apps/vue-storybook/.storybook/preview.ts

@@ -7,67 +7,18 @@ import { Swiper, SwiperSlide } from 'swiper/vue'
 import '@explorer-1/common-storybook/src/config/canvas.css'
 import '@explorer-1/vue/src/assets/scss/styles.scss'
 
-import { withGlobals } from '@explorer-1/common-storybook/src/config/withGlobals'
+import { withGlobals, globalTypes } from '@explorer-1/common-storybook/src/config/withGlobals'
 setup((app: App, context?: StoryContext<VueRenderer>) => {
   app.component('Swiper', Swiper)
   app.component('SwiperSlide', SwiperSlide)
   useMockComponents(app)
 })
 const preview: Preview = {
-  globalTypes: {
-    themesConfig: {
-      defaultValue: {
-        themes: ['Default', 'EDU', 'Internal'],
-        method: 'data-attr'
-      }
-    },
-    variantsConfig: {
-      defaultValue: {
-        variants: ['ThemeVariantLight', 'ThemeVariantDark'],
-        method: 'css'
-      }
-    },
-    theme: {
-      description: 'Global Theme',
-      defaultValue: 'defaultTheme',
-      toolbar: {
-        title: 'Theme',
-        // https://storybook.js.org/docs/faq#what-icons-are-available-for-my-toolbar-or-my-addon
-        icon: 'eye',
-        items: [
-          {
-            value: 'defaultTheme',
-            icon: 'circlehollow',
-            title: 'Default Theme'
-          },
-          { value: 'edu', icon: 'circle', title: 'EDU Theme' },
-          { value: 'internal', icon: 'collapse', title: 'Internal Theme' }
-        ],
-        dynamicTitle: true
-      }
-    },
-    variant: {
-      description: 'Theme Variant',
-      defaultValue: 'ThemeVariantLight',
-      toolbar: {
-        title: 'Variant',
-        // https://storybook.js.org/docs/faq#what-icons-are-available-for-my-toolbar-or-my-addon
-        icon: 'eye',
-        items: [
-          {
-            value: 'ThemeVariantLight',
-            icon: 'circlehollow',
-            title: 'Light Variant'
-          },
-          { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' }
-        ],
-        dynamicTitle: true
-      }
-    }
-  },
+  globalTypes,
 
   parameters: {
     controls: {
+      expanded: true,
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/

apps/vue-storybook/package.json

@@ -38,8 +38,10 @@
     "msw": "^2.3.0",
     "msw-storybook-addon": "^2.0.2",
     "postcss": "^8.4.38",
+    "postcss-import": "^16.1.0",
     "rimraf": "^5.0.5",
     "storybook": "^8.1.4",
+    "storybook-addon-vue-slots": "^0.9.29",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",

apps/vue-storybook/postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {
       // config: './node_modules/@explorer-1/vue/tailwind.config.js'
     },

apps/vue-storybook/stories/BaseButton/BaseButton.stories.ts → apps/vue-storybook/stories/BaseButton.stories.ts

@@ -1,14 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
 import BaseButton, { variants } from '@explorer-1/vue/src/components/BaseButton/BaseButton.vue'
 
-type Story = StoryObj<typeof BaseButton>
-
-const meta: Meta<typeof BaseButton> = {
+// TODO: add the rest of the button stories (icons, disabled, etc.)
+export default {
   title: 'Components/Base/BaseButton',
   component: BaseButton,
   excludeStories: /.*(Data)$/,
   tags: ['autodocs'],
   parameters: {
+    slots: {
+      default: 'Default slot content'
+    },
     docs: {
       description: {
         component: 'Simple button with several style variations.'
@@ -25,46 +26,40 @@ const meta: Meta<typeof BaseButton> = {
       type: 'string',
       description: 'Button variant type',
       control: {
-        type: 'select',
-        options: Object.keys(variants)
+        type: 'select'
       },
+      options: Object.keys(variants),
       table: {
         defaultValue: { summary: 'default' }
       }
     }
   }
 }
 
-export default meta
-
 export const BaseButtonData = {
   label: 'Explore',
   ariaLabel: 'Explore',
   compact: false,
   disabled: false,
-  to: '/'
+  to: '/',
+  default: 'Button'
 }
 
-const Template = (args: Story) => ({
-  components: { BaseButton },
-  setup() {
-    return { args }
-  },
-  template: '<BaseButton v-bind="args">Link Slot</BaseButton>'
-})
-
-export const PrimaryButton: Story = Template.bind({})
-PrimaryButton.args = {
-  ...BaseButtonData,
-  variant: 'primary'
+export const PrimaryButton = {
+  args: {
+    ...BaseButtonData,
+    variant: 'primary'
+  }
 }
-export const SecondaryButton: Story = Template.bind({})
-SecondaryButton.args = {
-  ...BaseButtonData,
-  variant: 'secondary'
+export const SecondaryButton = {
+  args: {
+    ...BaseButtonData,
+    variant: 'secondary'
+  }
 }
-export const DarkButton: Story = Template.bind({})
-DarkButton.args = {
-  ...BaseButtonData,
-  variant: 'dark'
+export const DarkButton = {
+  args: {
+    ...BaseButtonData,
+    variant: 'dark'
+  }
 }