@explorer-1/vue-storybook 0.0.0

package/.storybook/_mock-components.js

@@ -0,0 +1,21 @@
+// import and assign mock components
+import { action } from '@storybook/addon-actions'
+
+export default (app) => {
+  // nuxt-link mock component
+  app.component('NuxtLink', {
+    props: ['to', 'href', 'class'],
+    methods: {
+      log() {
+        if (this.to) {
+          action('router link')(this.to)
+        }
+        if (this.href) {
+          action('href link')(this.href)
+        }
+      }
+    },
+    template:
+      '<a href="#" @click.prevent="log()" :class="this.class" v-bind="$attrs"><slot></slot></a>'
+  })
+}

package/.storybook/main.ts

@@ -0,0 +1,43 @@
+/** @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'
+  ],
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        actions: false,
+        backgrounds: false,
+        outlines: false
+      }
+    },
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm]
+          }
+        }
+      }
+    },
+    '@storybook/addon-a11y',
+    '@whitespace/storybook-addon-html',
+    'storybook-addon-vue-slots'
+  ],
+  staticDirs: [
+    './../public',
+    './../node_modules/@explorer-1/common-storybook/src/public',
+    './../node_modules/@explorer-1/common/src'
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+
+  docs: {}
+}
+export default config

package/.storybook/manager-head.html

@@ -0,0 +1,40 @@
+<style type="text/css">
+  /* styles for the storybook sidebar */
+  @import 'css/font-face.css';
+
+  .sidebar-item {
+    font-family: Metropolis, sans-serif !important;
+    line-height: 1.2rem !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+  .sidebar-item svg:not([type='document']) {
+    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);
+    margin-top: 0.5rem;
+    padding-top: 1rem !important;
+  }
+
+  /* logo placement tweaks */
+  .sidebar-header > div {
+    margin-right: 0 !important;
+  }
+  .sidebar-header a {
+    margin: 6px 0 !important;
+  }
+  .sidebar-header a > img {
+    max-width: none !important;
+    max-height: none !important;
+  }
+</style>

package/.storybook/manager.ts

@@ -0,0 +1,11 @@
+// customizing Storybook's manager UI
+// see config options: https://storybook.js.org/docs/vue/configure/features-and-behavior
+
+import { addons } from '@storybook/manager-api'
+import customTheme from '@explorer-1/common-storybook/src/config/customTheme'
+
+// to collapse all sections and use custom theme
+addons.setConfig({
+  theme: customTheme,
+  sidebar: { showRoots: false }
+})

package/.storybook/preview-head.html

@@ -0,0 +1,146 @@
+<style type="text/css">
+  /* styles for docs tab */
+  /* @import 'dist/css/font-face.css'; */
+
+  #storybook-docs
+    .sbdocs
+    .sbdocs-content
+    *:not(.sbdocs-preview, .sbdocs-preview *, pre, pre *, code, code *) {
+    font-family: Metropolis, sans-serif !important;
+  }
+  /* make docs have full width iframes
+  ** rescopes width to all nested divs, not the container wrapper */
+  .sbdocs.sbdocs-content {
+    max-width: 1950px;
+  }
+  .sbdocs.sbdocs-content > * {
+    width: 100%;
+    max-width: 950px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .sbdocs.sbdocs-content > div[id*='anchor--'],
+  .sbdocs.sbdocs-content .reactdocs-content {
+    max-width: none;
+  }
+  .sbdocs.sbdocs-content > div[id*='anchor--'] > *,
+  .sbdocs.sbdocs-content .reactdocs-content > div,
+  .reactdocs-container {
+    width: 100%;
+    max-width: 950px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  /* .sbdocs.sbdocs-content .sbdocs-pre {
+    margin-left: auto;
+    margin-right: auto;
+  } */
+  .sbdocs.sbdocs-content > pre {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .sbdocs .sbdocs-content ol:not(.list-none) {
+    list-style-type: decimal;
+  }
+
+  /* custom border color for h2 to match gray-light-mid */
+  .sbdocs.sbdocs-h2 {
+    border-bottom: 1px solid rgba(216, 216, 216, 1);
+  }
+
+  /* .sbdocs-preview-full-width overrides max width in doc view
+  ** use this class via the `className` prop on Canvas
+  */
+  .sbdocs.sbdocs-content .sbdocs-preview-full-width,
+  .sbdocs-preview-full-width .sbdocs.sbdocs-content .sbdocs-preview,
+  .sbdocs.sbdocs-content .sb-anchor .sbdocs-preview {
+    max-width: none !important;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  /* unset the mysterious height that storybook adds to Canvas doc blocks rendered via a React component */
+  .sbdocs.sbdocs-content .reactdocs-content .sbdocs-preview .docs-story div[height='20'] {
+    height: unset;
+  }
+
+  /* sometimes inline stories still need an explicit height set */
+  .sbdocs-inline-height .docs-story {
+    height: 500px !important;
+  }
+  .sbdocs-inline-height-2xs .docs-story {
+    height: 200px !important;
+  }
+  .sbdocs-inline-height-xs .docs-story {
+    height: 300px !important;
+  }
+  .sbdocs-inline-height-sm .docs-story {
+    height: 400px !important;
+  }
+  .sbdocs-inline-height-lg .docs-story {
+    height: 600px !important;
+  }
+  .sbdocs-inline-height-xl .docs-story {
+    height: 700px !important;
+  }
+  .sbdocs-inline-height-2xl .docs-story {
+    height: 800px !important;
+  }
+  .sbdocs-inline-height .docs-story > div:first-child {
+    height: inherit !important;
+  }
+
+  /* sbdocs link style */
+  .sbdocs.sbdocs-a {
+    font-weight: 600;
+    border-bottom: 1px solid #489fdf;
+    color: black;
+  }
+  .sbdocs.sbdocs-a:hover {
+    border-bottom-color: black;
+  }
+
+  /* sbdocs table styles */
+  .sbdocs.sbdocs-table {
+    margin-top: 24px;
+    margin-bottom: 24px;
+  }
+  .sbdocs.sbdocs-table tr:nth-of-type(2n) {
+    background: white;
+  }
+  .sbdocs.sbdocs-table tr th,
+  .sbdocs.sbdocs-table tr td {
+    border-left: none;
+    border-right: none;
+  }
+
+  /* tag or image alignment */
+  .sbdocs.sbdocs-content img[src*='#left'] {
+    float: left;
+  }
+  .sbdocs.sbdocs-content img[src*='#right'] {
+    float: right;
+  }
+  .sbdocs.sbdocs-content img[src*='#center'] {
+    display: block;
+    margin: auto;
+  }
+  .sbdocs.sbdocs-content img[src*='#inline'] {
+    display: inline;
+  }
+
+  /* background color for code blocks */
+  .sbdocs .docblock-source {
+    background-color: #f5f5f5;
+  }
+
+  /* make details > summary text appear clickable in docs */
+  .sbdocs details > summary {
+    cursor: pointer;
+  }
+  .sbdocs details > summary > .sbdocs-span {
+    font-size: unset !important;
+  }
+</style>

package/.storybook/preview.ts

@@ -0,0 +1,166 @@
+/** @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 { 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 { 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>) => {
+  app.use(pinia)
+  app.use(vClickOutside)
+  app.use(VueCompareImage)
+  app.component('Swiper', Swiper)
+  app.component('SwiperSlide', SwiperSlide)
+  app.config.globalProperties.$filters = filters
+  useMockComponents(app)
+})
+
+// viewports that match our tailwind config
+const customViewports = {
+  screenSm: {
+    name: 'screen-sm',
+    styles: {
+      width: '640px',
+      height: '100%'
+    }
+  },
+  screenMd: {
+    name: 'screen-md',
+    styles: {
+      width: '768px',
+      height: '100%'
+    }
+  },
+  screenLg: {
+    name: 'screen-lg',
+    styles: {
+      width: '1024px',
+      height: '100%'
+    }
+  },
+  screenXl: {
+    name: 'screen-xl',
+    styles: {
+      width: '1280px',
+      height: '100%'
+    }
+  },
+  screen2xl: {
+    name: 'screen-2xl',
+    styles: {
+      width: '1440px',
+      height: '100%'
+    }
+  },
+  screen3xl: {
+    name: 'screen-3xl',
+    styles: {
+      width: '1800px',
+      height: '100%'
+    }
+  }
+}
+
+const preview: Preview = {
+  globalTypes,
+
+  parameters: {
+    controls: {
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    },
+    viewport: {
+      viewports: {
+        ...MINIMAL_VIEWPORTS,
+        ...customViewports
+      }
+    },
+    // options for the html tab add-on
+    html: {
+      removeEmptyComments: true
+    },
+    // set the theme for docs (same as UI)
+    docs: {
+      theme: customTheme
+    },
+    options: {
+      storySort: {
+        method: 'alphabetical',
+        order: [
+          'Introduction',
+          'Roadmap',
+          'Getting Started',
+          ['Developer'],
+          'Guides',
+          'Foundation',
+          [
+            'Colors',
+            'Typography',
+            'Icons',
+            'Logos',
+            'Themes',
+            'Grid and Layout',
+            'Responsive Design'
+          ],
+          'Global Layout',
+          [
+            'Overview',
+            'Headers',
+            [
+              'Overview',
+              'External',
+              'For Internal Sites',
+              [
+                '*',
+                'Elements',
+                ['Overview', 'AppBar', 'Navigation', 'Panel', 'Highlight', 'Section']
+              ]
+            ],
+            'Footers',
+            ['Overview', 'External', 'Internal']
+          ],
+          'Components',
+          [
+            'Overview',
+            'Base',
+            ['Overview'],
+            'Blocks',
+            ['Overview', 'Heroes', ['Overview', 'Small', 'Medium', 'Large']],
+            'Heroes',
+            ['*', 'HeroMedia', 'HeroListingIndex'],
+            'Forms',
+            ['Overview', 'TextInput', 'TextArea'],
+            'Search',
+            ['Overview'],
+            'Mixins',
+            ['Overview', 'MixinAnimationCaret', 'MixinVideoBg', 'MixinCarousel'],
+            'Utilities',
+            ['Overview', '*'],
+            'EDU'
+          ]
+        ]
+      }
+    }
+  },
+
+  decorators: [withGlobals],
+
+  tags: ['autodocs']
+}
+
+export default preview

package/.storybook/withGlobals.ts

@@ -0,0 +1,189 @@
+import { useEffect, useGlobals } from '@storybook/preview-api'
+import { useThemeStore } from '@explorer-1/vue/src/store/theme'
+import { type Explorer1Theme } from '@explorer-1/vue/src/interfaces'
+
+const getConfig = (config) => {
+  // default values
+  let defaultMethod: string = 'css'
+  let options: string[] | undefined = undefined
+  let method: string | undefined = undefined
+
+  if (typeof config === 'object') {
+    // get options
+    if ('options' in config) {
+      options = config.options
+    }
+    // handle method
+    if ('method' in config) {
+      // case insensitive comparisons
+      if (config.method.toUpperCase() === 'css'.toUpperCase()) {
+        method = 'css'
+      } else if (config.method) {
+        method = 'data-attr'
+      } else {
+        // use "css" method if not specified
+        method = defaultMethod
+      }
+    } else {
+      method = defaultMethod
+    }
+  }
+
+  // otherwise undefined
+  else {
+    options = undefined
+    method = undefined
+  }
+
+  return { options, method }
+}
+
+export const withGlobals = (StoryFn, context) => {
+  const useTheme = useThemeStore()
+  const { themesConfig, variantsConfig } = context.globals
+  const { options, method } = getConfig(themesConfig)
+  const { options: variantOptions, method: variantMethod } = getConfig(variantsConfig)
+  const [{ theme, variant }, updateGlobals] = useGlobals()
+  const isInDocs = context.viewMode === 'docs'
+
+  // disable usage of updateGlobals in docs
+  if (!isInDocs) {
+    // check for value in local storage
+    useEffect(() => {
+      const savedTheme: Explorer1Theme = window.localStorage.getItem('data-theme') as Explorer1Theme
+      const savedVariant: Explorer1Theme = window.localStorage.getItem(
+        'data-variant'
+      ) as Explorer1Theme
+
+      const themeOverride: Explorer1Theme | undefined = window.location.search.includes('edu-')
+        ? 'ThemeEdu'
+        : window.location.search.includes('www-')
+          ? 'defaultTheme'
+          : window.location.search.includes('internal-')
+            ? 'ThemeInternal'
+            : undefined
+      // handle theme
+      if (themeOverride) {
+        updateGlobals({ theme: themeOverride })
+        useTheme.setTheme(themeOverride)
+      } else if (savedTheme) {
+        // update theme attribute and save it to local storage
+        updateGlobals({ theme: savedTheme })
+        useTheme.setTheme(savedTheme)
+      } else {
+        // set it to the first theme
+        if (options && options.length > 0) {
+          updateGlobals({ theme: options[0] })
+          useTheme.setTheme(options[0] as Explorer1Theme)
+        }
+      }
+
+      // handle variant
+      if (savedVariant) {
+        // update theme attribute and save it to local storage
+        updateGlobals({ variant: savedVariant })
+      } else {
+        // set it to the first theme
+        if (variantOptions && variantOptions.length > 0) {
+          updateGlobals({ variant: variantOptions[0] })
+        }
+      }
+    }, [])
+  }
+
+  // handle theme method
+  if (method === 'css') {
+    const savedTheme = window.localStorage.getItem('data-theme')
+    useEffect(() => {
+      if (theme) {
+        if (savedTheme) {
+          document.documentElement.classList.remove(savedTheme)
+        }
+        document.documentElement.classList.add(theme)
+        useTheme.setTheme(theme)
+        window.localStorage.setItem('data-theme', theme)
+      }
+    }, [theme])
+  } else if (method === 'data-attr') {
+    useEffect(() => {
+      if (theme) {
+        useTheme.setTheme(theme)
+        document.documentElement.setAttribute('data-theme', theme)
+        window.localStorage.setItem('data-theme', theme)
+      }
+    }, [theme])
+  }
+
+  // handle variant method
+  if (variantMethod === 'css') {
+    useEffect(() => {
+      if (variant) {
+        const savedVariant = window.localStorage.getItem('data-variant')
+        document.body.classList.remove(savedVariant)
+        document.body.classList.add(variant)
+        window.localStorage.setItem('data-variant', variant)
+      }
+    }, [variant])
+  } else if (variantMethod === 'data-attr') {
+    useEffect(() => {
+      if (variant) {
+        document.body.setAttribute('data-variant', variant)
+        window.localStorage.setItem('data-variant', variant)
+      }
+    }, [variant])
+  }
+
+  return StoryFn()
+}
+
+export const globalTypes = {
+  themesConfig: {
+    defaultValue: {
+      themes: ['Default', 'EDU', 'Internal'],
+      method: 'css'
+    }
+  },
+  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: 'home',
+          title: 'Default Theme'
+        },
+        { value: 'ThemeEdu', icon: 'globe', title: 'EDU Theme' },
+        { value: 'ThemeInternal', icon: 'key', 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
+    }
+  }
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 California Institute of Technology (Caltech). U.S. Government sponsorship acknowledged.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.