Add theming capability to Explorer 1

Makefile

@@ -69,6 +69,8 @@ html-storybook-build:
 html-dev:
 	pnpm --filter @explorer-1/html dev
 
+html: html-dev
+
 ## HTML: build assets
 html-build:
 	pnpm --filter @explorer-1/html build
@@ -85,6 +87,8 @@ vue-storybook-build:
 vue-dev:
 	pnpm --filter @explorer-1/vue dev
 
+vue: vue-dev
+
 ## Vue: build assets
 vue-build:
 	pnpm --filter @explorer-1/vue build
@@ -93,6 +97,8 @@ vue-build:
 nuxt-dev:
 	pnpm --filter @explorer-1/nuxt dev
 
+nuxt: nuxt-dev
+
 ## Nuxt: build module
 nuxt-build:
 	pnpm --filter @explorer-1/nuxt build

apps/html-storybook/.storybook/main.ts

@@ -18,8 +18,9 @@ export default {
     {
       name: '@storybook/addon-essentials',
       options: {
+        actions: false,
         backgrounds: false,
-        actions: false
+        outlines: false
       }
     },
     {

apps/html-storybook/.storybook/preview.ts

@@ -54,20 +54,41 @@ const customViewports = {
 const preview = {
   globalTypes: {
     themesConfig: {
-      defaultValue: ['ThemeLight', 'ThemeInternal', 'ThemeDark'],
-      method: 'css'
+      defaultValue: {
+        options: ['ThemeVariantLight', 'ThemeInternal'],
+        method: 'css'
+      }
     },
     theme: {
-      description: 'Global theme for components',
-      defaultValue: 'ThemeLight',
+      description: 'Global Theme',
+      defaultValue: 'ThemeVariantLight',
       toolbar: {
         title: 'Theme',
         // https://storybook.js.org/docs/faq#what-icons-are-available-for-my-toolbar-or-my-addon
         icon: 'eye',
         items: [
-          { value: 'ThemeLight', icon: 'circlehollow', title: 'Light' },
-          { value: 'ThemeDark', icon: 'circle', title: 'Dark' },
-          { value: 'ThemeInternal', icon: 'collapse', title: 'Internal' }
+          { value: 'ThemeVariantLight', icon: 'circlehollow', title: 'Default Theme' },
+          { value: 'ThemeInternal', icon: 'collapse', title: 'Internal Theme' }
+        ],
+        dynamicTitle: true
+      }
+    },
+    variantsConfig: {
+      defaultValue: {
+        options: ['ThemeVariantLight', 'ThemeVariantDark'],
+        method: 'css'
+      }
+    },
+    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
       }

apps/html-storybook/vite.config.ts

@@ -1,4 +1,3 @@
-import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/

apps/vue-storybook/.storybook/main.ts

@@ -1,13 +1,24 @@
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
 const config = {
   stories: ['./../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@chromatic-com/storybook'],
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        actions: false,
+        backgrounds: false,
+        outlines: false,
+      },
+    },
+    '@storybook/addon-a11y',
+    '@whitespace/storybook-addon-html',
+  ],
 
   framework: {
     name: '@storybook/vue3-vite',
-    options: {}
+    options: {},
   },
 
-  docs: {}
-}
-export default config
+  docs: {},
+};
+export default config;

apps/vue-storybook/.storybook/preview.ts

@@ -1,27 +1,83 @@
 /** @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 './../node_modules/@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';
 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',
+      },
+    },
+    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: 'circlehollow',
+            title: 'Default Theme',
+          },
+          { value: 'edu', icon: 'circle', title: 'EDU Theme' },
+          { value: 'internal', icon: 'collapse', 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,
+      },
+    },
+  },
+
   parameters: {
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/
-      }
-    }
+        date: /Date$/,
+      },
+    },
   },
 
-  tags: ['autodocs']
-}
+  decorators: [withGlobals],
+
+  tags: ['autodocs'],
+};
 
-export default preview
+export default preview;

apps/vue-storybook/package.json

@@ -26,12 +26,14 @@
     "@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",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^7.1.0",
+    "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.4.19",
     "msw": "^1.2.1",
     "msw-storybook-addon": "^2.0.2",

apps/vue-storybook/stories/BaseLink.stories.ts

@@ -0,0 +1,47 @@
+import BaseLink, { variants } from '@explorer-1/vue/src/components/BaseLink/BaseLink.vue'
+// import BaseLink, { variants } from '@explorer-1/vue/src/components/BaseLink/BaseLink.vue'
+export default {
+  title: 'Components/Base/BaseLink',
+  component: BaseLink,
+  // argTypes: {
+  //   variant: {
+  //     control: { type: 'select', options: Object.keys(variants) }
+  //   },
+  //   text: { control: { type: 'text' } }
+  // },
+  excludeStories: /.*Data$/
+}
+
+// data
+export const BaseLinkData = {
+  variant: 'primary',
+  to: '/',
+  href: '/',
+  caret: false,
+  caretColor: 'text-theme-red'
+}
+
+// templates
+const BaseLinkTemplate = (args) => ({
+  components: { BaseLink },
+  setup() {
+    return { args }
+  },
+  template: `<BaseLink v-bind="args">Base Link</BaseLink>`
+})
+
+// stories
+export const Primary = BaseLinkTemplate.bind({})
+Primary.args = { ...BaseLinkData }
+
+export const Secondary = BaseLinkTemplate.bind({})
+Secondary.args = { ...BaseLinkData, variant: 'secondary' }
+
+export const DefaultBody = BaseLinkTemplate.bind({})
+DefaultBody.args = { ...BaseLinkData, variant: 'default' }
+
+export const Unstyled = BaseLinkTemplate.bind({})
+Unstyled.args = {
+  ...BaseLinkData,
+  variant: 'none'
+}

apps/vue-storybook/stories/Icons/Icons.stories.ts

@@ -0,0 +1,26 @@
+import IconCaret from '@explorer-1/vue/src/components/Icons/IconCaret.vue'
+
+export default {
+  title: 'Icons',
+  component: IconCaret,
+  decorators: [
+    () => ({
+      template: `<div class="inline-block"><story/></div>`
+    })
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Use with tailwind text classes to specify size and color'
+      }
+    }
+  }
+}
+
+export const Caret = (args) => ({
+  components: { IconCaret },
+  setup() {
+    return { args }
+  },
+  template: `<IconCaret v-bind="args" />`
+})

apps/vue-storybook/stories/MixinAnimationCaret/MixinAnimationCaret.stories.ts

@@ -0,0 +1,26 @@
+import MixinAnimationCaret from '@explorer-1/vue/src/components/MixinAnimationCaret/MixinAnimationCaret.vue'
+
+export default {
+  title: 'Mixins/MixinAnimationCaret',
+  component: MixinAnimationCaret,
+  parameters: {
+    viewMode: 'docs',
+    docs: {
+      description: {
+        component: 'This component appends an animated caret to a line of text.'
+      }
+    }
+  }
+}
+
+// templates
+const MixinAnimationCaretTemplate = (args) => ({
+  components: { MixinAnimationCaret },
+  setup() {
+    return { args }
+  },
+  template: `<MixinAnimationCaret v-bind="args">Demo of animated caret</MixinAnimationCaret>`
+})
+
+// stories
+export const Default = MixinAnimationCaretTemplate.bind({})

apps/vue-storybook/tailwind.config.ts

@@ -1,5 +1,3 @@
-import type { Config } from 'tailwindcss'
-
 /*
  ** TailwindCSS Configuration File
  **
@@ -10,7 +8,7 @@ import type { Config } from 'tailwindcss'
 // import explorer 1's tailwind config
 import explorer1Config from '@explorer-1/common/tailwind.config'
 
-export default <Partial<Config>>{
+export default {
   ...explorer1Config,
   content: ['./node_modules/@explorer-1/vue/src/components/**/*.vue']
 }

apps/vue-storybook/vite.config.ts

@@ -1,4 +1,3 @@
-import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 

packages/common-storybook/src/config/canvas.css

@@ -1,14 +1,14 @@
 /* styles that are applied to story canvas */
 
-html.ThemeLight,
-body.ThemeLight,
-.ThemeLight .sbdocs-preview {
+html.ThemeVariantLight,
+body.ThemeVariantLight,
+.ThemeVariantLight .sbdocs-preview {
   background: #ffffff;
 }
 
-html.ThemeDark,
-body.ThemeDark,
-.ThemeDark .sbdocs-preview {
+html.ThemeVariantDark,
+body.ThemeVariantDark,
+.ThemeVariantDark .sbdocs-preview {
   background: #000000;
 }