@explorer-1/vue-storybook 0.0.21 → 0.0.25

package/.storybook/main.ts

@@ -18,12 +18,12 @@ const config: StorybookConfig = {
   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'
+          './../node_modules/@explorer-1/vue/src/**/*.docs.mdx',
+          './../node_modules/@explorer-1/vue/src/**/*.stories.@(js|jsx|ts|tsx)'
         ]
       : [
-          './../../../packages/vue/src/**/*.stories.@(js|jsx|ts|tsx)',
-          './../../../packages/vue/src/**/*.docs.mdx'
+          './../../../packages/vue/src/**/*.docs.mdx',
+          './../../../packages/vue/src/**/*.stories.@(js|jsx|ts|tsx)'
         ],
 
   addons: [

package/.storybook/manager-head.html

@@ -31,4 +31,10 @@
     max-width: none !important;
     max-height: none !important;
   }
+
+  /* fix placement of "copy" button in HTML add-on */
+  #panel-tab-content > div[hidden] + div:not([class]),
+  #panel-tab-content > div[hidden] + div:not([class]) > div {
+    height: 100%;
+  }
 </style>

package/.storybook/preview.ts

@@ -14,6 +14,8 @@ import { withGlobals, globalTypes } from './withGlobals'
 import customTheme from '@explorer-1/common-storybook/src/config/customTheme'
 import '@explorer-1/common-storybook/src/config/canvas.css'
 import VueObserveVisibility from 'vue3-observe-visibility'
+import beautify from 'js-beautify'
+import { beautifyHtmlOptions } from '@explorer-1/common-storybook/src/plugins/beautifyHtmlOptions.js'
 
 const pinia = createPinia()
 const router = createRouter({
@@ -106,14 +108,26 @@ const preview: Preview = {
       }
     },
     viewport: {
-      viewports: {
+      options: {
         ...MINIMAL_VIEWPORTS,
         ...customViewports
       }
     },
     // options for the html tab add-on
     html: {
-      removeEmptyComments: true
+      removeComments: true,
+      removeEmptyComments: true,
+      highlighter: {
+        // showLineNumbers: true // default: false
+        wrapLines: false // default: true
+      },
+      transform: (code: any) => {
+        // Remove attributes `data-chromatic` and `baseimageprops`:
+        code = code.replace(/(?:data-chromatic|baseimageprops|content_type).*?="[\S\s]*?"/g, '')
+        // @ts-ignore
+        code = beautify.html(code, beautifyHtmlOptions)
+        return code
+      }
     },
     a11y: {
       context: 'body',

package/.storybook/withGlobals.ts

@@ -3,7 +3,7 @@ import { useEffect, useGlobals } from 'storybook/preview-api'
 import { useThemeStore } from './../node_modules/@explorer-1/vue/src/store/theme'
 import { type Explorer1Theme } from '@explorer-1/vue/src/interfaces'
 
-export const getConfig = (config) => {
+export const getConfig = (config: any) => {
   // default values
   let defaultMethod: string = 'css'
   let options: string[] | undefined = undefined
@@ -39,13 +39,13 @@ export const getConfig = (config) => {
   return { options, method }
 }
 
-export const withGlobals = (StoryFn, context) => {
+export const withGlobals = (StoryFn: any, context: any) => {
   const useTheme = useThemeStore()
   // function useTheme((context) => useThemeStore)
   const { themesConfig, variantsConfig } = context.globals
   const { options, method } = getConfig(themesConfig)
   const { options: variantOptions, method: variantMethod } = getConfig(variantsConfig)
-  const [{ theme, variant }, updateGlobals] = useGlobals()
+  const [{ theme, themeVariant }, updateGlobals] = useGlobals()
   const isInDocs = context.viewMode === 'docs'
 
   // disable usage of updateGlobals in docs
@@ -66,11 +66,11 @@ export const withGlobals = (StoryFn, context) => {
       // handle variant
       if (savedVariant) {
         // update theme attribute and save it to local storage
-        updateGlobals({ variant: savedVariant })
+        updateGlobals({ themeVariant: savedVariant })
       } else {
         // set it to the first theme
         if (variantOptions && variantOptions.length > 0) {
-          updateGlobals({ variant: variantOptions[0] })
+          updateGlobals({ themeVariant: variantOptions[0] })
         }
       }
     }, [])
@@ -102,20 +102,21 @@ export const withGlobals = (StoryFn, context) => {
   // handle variant method
   if (variantMethod === 'css') {
     useEffect(() => {
-      if (variant) {
+      console.log(themeVariant)
+      if (themeVariant) {
         const savedVariant = window.localStorage.getItem('data-variant')
         if (savedVariant) document.body.classList.remove(savedVariant)
-        document.body.classList.add(variant)
-        window.localStorage.setItem('data-variant', variant)
+        document.body.classList.add(themeVariant)
+        window.localStorage.setItem('data-variant', themeVariant)
       }
-    }, [variant])
+    }, [themeVariant])
   } else if (variantMethod === 'data-attr') {
     useEffect(() => {
-      if (variant) {
-        document.body.setAttribute('data-variant', variant)
-        window.localStorage.setItem('data-variant', variant)
+      if (themeVariant) {
+        document.body.setAttribute('data-variant', themeVariant)
+        window.localStorage.setItem('data-variant', themeVariant)
       }
-    }, [variant])
+    }, [themeVariant])
   }
 
   return StoryFn()
@@ -145,16 +146,16 @@ export const globalTypes = {
         {
           value: 'defaultTheme',
           icon: 'home',
-          title: 'Default Theme'
+          title: 'Default Theme: defaultTheme'
         },
-        { value: 'ThemeEdu', icon: 'globe', title: 'EDU Theme' },
-        { value: 'ThemeInternal', icon: 'key', title: 'Internal Theme' }
+        { value: 'ThemeEdu', icon: 'globe', title: 'EDU Theme: ThemeEdu' },
+        { value: 'ThemeInternal', icon: 'key', title: 'Internal Theme: ThemeInternal' }
       ],
       dynamicTitle: true
     }
   },
-  variant: {
-    description: 'Theme Variant',
+  themeVariant: {
+    description: 'Variant',
     defaultValue: 'ThemeVariantLight',
     toolbar: {
       title: 'Variant',
@@ -164,10 +165,18 @@ export const globalTypes = {
         {
           value: 'ThemeVariantLight',
           icon: 'circlehollow',
-          title: 'Light Variant'
+          title: 'Light Background: ThemeVariantLight'
         },
-        { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' },
-        { value: 'ThemeVariantGray', icon: 'contrast', title: 'Gray Variant' }
+        {
+          value: 'ThemeVariantDark',
+          icon: 'circle',
+          title: 'Dark Background: ThemeVariantDark'
+        },
+        {
+          value: 'ThemeVariantGray',
+          icon: 'contrast',
+          title: 'Gray Background: ThemeVariantGray'
+        }
       ],
       dynamicTitle: true
     }

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @explorer-1/vue-storybook
 
+## 0.0.25
+
+### Patch Changes
+
+- Updated dependencies [c307f7b]
+  - @explorer-1/common@1.3.3
+  - @explorer-1/common-storybook@0.0.4
+  - @explorer-1/html@0.1.1
+  - @explorer-1/vue@0.3.6
+
+## 0.0.24
+
+### Patch Changes
+
+- 0a83db1: Documentation updates, Storybook improvements.
+- Updated dependencies [0a83db1]
+  - @explorer-1/common-storybook@0.0.4
+  - @explorer-1/vue@0.3.5
+
+## 0.0.23
+
+### Patch Changes
+
+- Updated dependencies [3c70ecc]
+- Updated dependencies [3e5b0c8]
+  - @explorer-1/vue@0.3.4
+  - @explorer-1/common@1.3.2
+  - @explorer-1/common-storybook@0.0.3
+  - @explorer-1/html@0.1.1
+
+## 0.0.22
+
+### Patch Changes
+
+- Updated dependencies [0105dfb]
+  - @explorer-1/common@1.3.1
+  - @explorer-1/html@0.1.1
+  - @explorer-1/common-storybook@0.0.3
+  - @explorer-1/vue@0.3.3
+
 ## 0.0.21
 
 ### Patch Changes