Fix/storybook monorepo issues (#438)

* fixing storybook rendering issues * upgrading Storybook to 8.1.3
nasa-jpl · May 24, 2024 · 746ba6c · 746ba6c
1 parent 175581c
commit 746ba6c
Show file tree

Hide file tree

Showing 8 changed files with 698 additions and 208 deletions.
diff --git a/apps/html-storybook/.storybook/preview-head.html b/apps/html-storybook/.storybook/preview-head.html
@@ -20,7 +20,7 @@
 
 <style type="text/css">
   /* styles for docs tab */
-  /* @import 'css/font-face.css'; */
+  /* @import 'dist/css/font-face.css'; */
 
   #storybook-docs
     .sbdocs

diff --git a/apps/html-storybook/.storybook/preview.ts b/apps/html-storybook/.storybook/preview.ts
@@ -1,6 +1,7 @@
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'
 import customTheme from '@explorer-1/common-storybook/src/config/customTheme'
 import '@explorer-1/html/src/assets/scss/styles.scss'
+import './../public/dist/css/font-face.css'
 import '@explorer-1/html/src/main.js'
 import '@explorer-1/common-storybook/src/config/canvas.css'
 import { withGlobals } from '@explorer-1/common-storybook/src/config/withGlobals'
@@ -183,7 +184,7 @@ const preview = {
     }
   },
 
-  tags: ['autodocs', 'autodocs', 'autodocs']
+  tags: ['autodocs']
 }
 
 export default preview
diff --git a/apps/html-storybook/package.json b/apps/html-storybook/package.json
@@ -35,25 +35,25 @@
     "@explorer-1/prettier-config": "workspace:*",
     "@explorer-1/tsconfig": "workspace:*",
     "@percy/cli": "^1.28.6",
-    "@percy/storybook": "^6.0.0-beta.0",
+    "@percy/storybook": "^6.0.0",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-a11y": "^8.1.2",
-    "@storybook/addon-docs": "^8.1.2",
-    "@storybook/addon-essentials": "^8.1.2",
-    "@storybook/addon-links": "^8.1.2",
-    "@storybook/addon-viewport": "^8.1.2",
-    "@storybook/html": "^8.1.2",
-    "@storybook/html-vite": "^8.1.2",
-    "@storybook/manager-api": "^8.1.2",
-    "@storybook/preview-api": "^8.1.2",
-    "@storybook/theming": "^8.1.2",
+    "@storybook/addon-a11y": "^8.1.3",
+    "@storybook/addon-docs": "^8.1.3",
+    "@storybook/addon-essentials": "^8.1.3",
+    "@storybook/addon-links": "^8.1.3",
+    "@storybook/addon-viewport": "^8.1.3",
+    "@storybook/html": "^8.1.3",
+    "@storybook/html-vite": "^8.1.3",
+    "@storybook/manager-api": "^8.1.3",
+    "@storybook/preview-api": "^8.1.3",
+    "@storybook/theming": "^8.1.3",
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.4.19",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "remark-gfm": "^4.0.0",
     "rimraf": "^5.0.5",
-    "storybook": "^8.1.2",
+    "storybook": "^8.1.3",
     "tailwindcss": "^3.4.3",
     "tslib": "^2.6.2",
     "ts-node": "^10.9.2",

diff --git a/apps/html-storybook/vite.config.ts b/apps/html-storybook/vite.config.ts
@@ -4,9 +4,6 @@ import { defineConfig } from 'vite'
 export default defineConfig({
   publicDir: './../public/',
   resolve: {
-    alias: {
-      'css/': './public/dist/css'
-    },
     preserveSymlinks: true
   },
   css: {

diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts
@@ -1,31 +1,31 @@
 /** @type { import('@storybook/vue3').Preview } */
-import type { App } from 'vue';
-import useMockComponents from './_mock-components.js';
-import { StoryContext } from '@storybook/types';
-import { VueRenderer, setup, type Preview } from '@storybook/vue3';
-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 type { App } from 'vue'
+import useMockComponents from './_mock-components.js'
+import { StoryContext } from '@storybook/types'
+import { VueRenderer, setup, type Preview } from '@storybook/vue3'
+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 } from '@explorer-1/common-storybook/src/config/withGlobals'
 setup((app: App, context?: StoryContext<VueRenderer>) => {
-  app.component('Swiper', Swiper);
-  app.component('SwiperSlide', SwiperSlide);
-  useMockComponents(app);
-});
+  app.component('Swiper', Swiper)
+  app.component('SwiperSlide', SwiperSlide)
+  useMockComponents(app)
+})
 const preview: Preview = {
   globalTypes: {
     themesConfig: {
       defaultValue: {
         themes: ['Default', 'EDU', 'Internal'],
-        method: 'data-attr',
-      },
+        method: 'data-attr'
+      }
     },
     variantsConfig: {
       defaultValue: {
         variants: ['ThemeVariantLight', 'ThemeVariantDark'],
-        method: 'css',
-      },
+        method: 'css'
+      }
     },
     theme: {
       description: 'Global Theme',
@@ -38,13 +38,13 @@ const preview: Preview = {
           {
             value: 'defaultTheme',
             icon: 'circlehollow',
-            title: 'Default Theme',
+            title: 'Default Theme'
           },
           { value: 'edu', icon: 'circle', title: 'EDU Theme' },
-          { value: 'internal', icon: 'collapse', title: 'Internal Theme' },
+          { value: 'internal', icon: 'collapse', title: 'Internal Theme' }
         ],
-        dynamicTitle: true,
-      },
+        dynamicTitle: true
+      }
     },
     variant: {
       description: 'Theme Variant',
@@ -57,27 +57,27 @@ const preview: Preview = {
           {
             value: 'ThemeVariantLight',
             icon: 'circlehollow',
-            title: 'Light Variant',
+            title: 'Light Variant'
           },
-          { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' },
+          { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' }
         ],
-        dynamicTitle: true,
-      },
-    },
+        dynamicTitle: true
+      }
+    }
   },
 
   parameters: {
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
+        date: /Date$/
+      }
+    }
   },
 
   decorators: [withGlobals],
 
-  tags: ['autodocs'],
-};
+  tags: ['autodocs']
+}
 
-export default preview;
+export default preview
diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
@@ -26,11 +26,11 @@
     "@explorer-1/tsconfig": "workspace:*",
     "@explorer-1/vue": "workspace:*",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-a11y": "^8.1.2",
-    "@storybook/addon-essentials": "^8.1.2",
-    "@storybook/blocks": "^8.1.2",
-    "@storybook/vue3": "^8.1.2",
-    "@storybook/vue3-vite": "^8.1.2",
+    "@storybook/addon-a11y": "^8.1.3",
+    "@storybook/addon-essentials": "^8.1.3",
+    "@storybook/blocks": "^8.1.3",
+    "@storybook/vue3": "^8.1.3",
+    "@storybook/vue3-vite": "^8.1.3",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@whitespace/storybook-addon-html": "^6.1.1",
@@ -39,7 +39,7 @@
     "msw-storybook-addon": "^2.0.2",
     "postcss": "^8.4.38",
     "rimraf": "^5.0.5",
-    "storybook": "^8.1.2",
+    "storybook": "^8.1.3",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",

diff --git a/packages/html/src/components/AppBarInternal/AppBarInternal.stories.js b/packages/html/src/components/AppBarInternal/AppBarInternal.stories.js
@@ -1,10 +1,40 @@
 import { AppBarInternalTemplate } from './AppBarInternal'
-import AppBarInternalStoryMeta from '@explorer-1/common-storybook/src/story-data/AppBarInternal'
 
 export default {
-  ...AppBarInternalStoryMeta.meta
+  title: 'Global Layout/Headers/For Internal Sites/Elements/AppBar',
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'docs',
+    docs: {
+      description: {
+        component:
+          'Displays JPL branding, the org or name of the site, and optionally a sign in/out widget.'
+      }
+    }
+  }
 }
 
 export const Default = AppBarInternalTemplate.bind({})
-Default.storyName = AppBarInternalTemplate.stories.Default.storyName
+Default.storyName = 'AppBar'
 Default.args = AppBarInternalTemplate.stories.Default.args
+
+const AppBarInternalStoryMeta = {
+  stories: {
+    Default: {
+      storyName: 'AppBar',
+      args: {
+        orgNumber: '18x',
+        siteTitle: 'DesignLab',
+        includeSignIn: true,
+        signedIn: false,
+        userData: {
+          firstName: 'First',
+          lastName: 'Last',
+          photo: 'https://picsum.photos/150/200'
+        },
+        logInUrl: '#',
+        logOutUrl: '#'
+      }
+    }
+  }
+}