@explorer-1/vue-storybook 0.0.1 → 0.0.3

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/manager-head.html

@@ -12,13 +12,7 @@
     color: inherit !important;
   }
 
-  /* www should be in uppercase */
-  .sidebar-item#www {
-    text-transform: uppercase;
-  }
-
   /* create illusion of hrs between sidebar sections */
-  .sidebar-item#www,
   .sidebar-item#appendix {
     border-radius: 0;
     border-top: 2px solid rgba(0, 0, 0, 0.1);

package/.storybook/preview.ts

@@ -1,15 +1,12 @@
 /** @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/common/src/scss/styles.scss'
 import { withGlobals, globalTypes } from './withGlobals'
 import customTheme from '@explorer-1/common-storybook/src/config/customTheme'
@@ -17,7 +14,7 @@ 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)
@@ -107,7 +104,7 @@ const preview: Preview = {
           'Getting Started',
           ['Developer'],
           'Guides',
-          'Foundation',
+          'Foundations',
           [
             'Colors',
             'Typography',
@@ -115,8 +112,18 @@ const preview: Preview = {
             'Logos',
             'Themes',
             'Grid and Layout',
+            ['Docs'],
             'Responsive Design'
           ],
+          'Navigation',
+          [
+            'Overview',
+            'Headers',
+            ['Overview', 'WWW'],
+            'Footers',
+            ['Overview', 'WWW'],
+            'Secondary Navigation'
+          ],
           'Global Layout',
           [
             'Overview',
@@ -142,7 +149,7 @@ const preview: Preview = {
             'Blocks',
             ['Overview', 'Heroes', ['Overview', 'Small', 'Medium', 'Large']],
             'Heroes',
-            ['*', 'HeroMedia', 'HeroListingIndex'],
+            ['Overview', 'Small', 'Medium', 'Large', 'Media Only', 'HeroListingIndex'],
             'Forms',
             ['Overview', 'TextInput', 'TextArea'],
             'Search',
@@ -152,7 +159,9 @@ const preview: Preview = {
             'Utilities',
             ['Overview', '*'],
             'EDU'
-          ]
+          ],
+          'Mixins',
+          ['Overview']
         ]
       }
     }

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,5 +1,6 @@
 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'
 
 export const getConfig = (config) => {
@@ -146,7 +147,7 @@ export const globalTypes = {
   },
   variantsConfig: {
     defaultValue: {
-      variants: ['ThemeVariantLight', 'ThemeVariantDark'],
+      variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'],
       method: 'css'
     }
   },
@@ -182,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
     }