@explorer-1/vue-storybook 0.0.0 → 0.0.2

package/.storybook/main.ts

@@ -1,10 +1,16 @@
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
 import remarkGfm from 'remark-gfm'
 const config = {
-  stories: [
-    './../node_modules/@explorer-1/vue/src/**/*.stories.@(js|jsx|ts|tsx)',
-    './../node_modules/@explorer-1/vue/src/**/*.docs.mdx'
-  ],
+  stories:
+    process.env.NODE_ENV === 'production'
+      ? [
+          './../node_modules/@explorer-1/vue/src/**/*.stories.@(js|jsx|ts|tsx)',
+          './../node_modules/@explorer-1/vue/src/**/*.docs.mdx'
+        ]
+      : [
+          './../../../packages/vue/src/**/*.stories.@(js|jsx|ts|tsx)',
+          './../../../packages/vue/src/**/*.docs.mdx'
+        ],
   addons: [
     {
       name: '@storybook/addon-essentials',
@@ -26,7 +32,8 @@ const config = {
     },
     '@storybook/addon-a11y',
     '@whitespace/storybook-addon-html',
-    'storybook-addon-vue-slots'
+    'storybook-addon-vue-slots',
+    '@chromatic-com/storybook'
   ],
   staticDirs: [
     './../public',

package/.storybook/preview.ts

@@ -1,23 +1,20 @@
 /** @type { import('@storybook/vue3').Preview } */
-import type { App } from 'vue'
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
 import useMockComponents from './_mock-components.js'
-import { StoryContext } from '@storybook/types'
-import { VueRenderer, setup, type Preview } from '@storybook/vue3'
+import { setup, type Preview } from '@storybook/vue3'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import vClickOutside from 'click-outside-vue3'
 import VueCompareImage from 'vue3-compare-image'
 import { createPinia } from 'pinia'
 import filters from '@explorer-1/vue/src/utils/filters'
-import '@explorer-1/common-storybook/src/config/canvas.css'
-import '@explorer-1/vue/src/assets/scss/styles.scss'
+import '@explorer-1/common/src/scss/styles.scss'
 import { withGlobals, globalTypes } from './withGlobals'
 import customTheme from '@explorer-1/common-storybook/src/config/customTheme'
 import '@explorer-1/common-storybook/src/config/canvas.css'
 
 const pinia = createPinia()
 
-setup((app: App, context?: StoryContext<VueRenderer>) => {
+setup((app, _context) => {
   app.use(pinia)
   app.use(vClickOutside)
   app.use(VueCompareImage)

package/.storybook/test-runner.ts

@@ -0,0 +1,22 @@
+import type { TestRunnerConfig } from '@storybook/test-runner'
+import { injectAxe, checkA11y } from 'axe-playwright'
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner hooks API.
+ */
+const config: TestRunnerConfig = {
+  async preVisit(page) {
+    await injectAxe(page)
+  },
+  async postVisit(page) {
+    await checkA11y(page, '#storybook-root', {
+      detailedReport: true,
+      detailedReportOptions: {
+        html: true
+      }
+    })
+  }
+}
+
+export default config

package/.storybook/withGlobals.ts

@@ -1,8 +1,9 @@
 import { useEffect, useGlobals } from '@storybook/preview-api'
-import { useThemeStore } from '@explorer-1/vue/src/store/theme'
+// intentionally importing from node_modules path to avoid pinia initialization errors
+import { useThemeStore } from './../node_modules/@explorer-1/vue/src/store/theme'
 import { type Explorer1Theme } from '@explorer-1/vue/src/interfaces'
 
-const getConfig = (config) => {
+export const getConfig = (config) => {
   // default values
   let defaultMethod: string = 'css'
   let options: string[] | undefined = undefined
@@ -40,6 +41,7 @@ const getConfig = (config) => {
 
 export const withGlobals = (StoryFn, context) => {
   const useTheme = useThemeStore()
+  // function useTheme((context) => useThemeStore)
   const { themesConfig, variantsConfig } = context.globals
   const { options, method } = getConfig(themesConfig)
   const { options: variantOptions, method: variantMethod } = getConfig(variantsConfig)
@@ -119,7 +121,7 @@ export const withGlobals = (StoryFn, context) => {
     useEffect(() => {
       if (variant) {
         const savedVariant = window.localStorage.getItem('data-variant')
-        document.body.classList.remove(savedVariant)
+        if (savedVariant) document.body.classList.remove(savedVariant)
         document.body.classList.add(variant)
         window.localStorage.setItem('data-variant', variant)
       }
@@ -145,7 +147,7 @@ export const globalTypes = {
   },
   variantsConfig: {
     defaultValue: {
-      variants: ['ThemeVariantLight', 'ThemeVariantDark'],
+      variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'],
       method: 'css'
     }
   },
@@ -181,7 +183,8 @@ export const globalTypes = {
           icon: 'circlehollow',
           title: 'Light Variant'
         },
-        { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' }
+        { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' },
+        { value: 'ThemeVariantGray', icon: 'contrast', title: 'Gray Variant' }
       ],
       dynamicTitle: true
     }