-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add theming capability to Explorer 1 (#433)
* Adding scaffolding for theming Explorer-1 - converting a few more simple components for testing - basic theming scaffolding in place * Improvements to Storybook theme switcher - Properly support theme and variant - Adding to @explorer-1/vue-storybook - properly support theme and variant in storybook * renaming ThemeLight, ThemeDark, and implementing theme-color via TailwindCSS * adding @explorer-1/common-storybook * adding more addons to vue-storybook * adding gitkeep for public folder * removing old themes key * tailwind config cleanup * lint emits --------- Co-authored-by: James Ray <james.a.ray@jpl.nasa.gov>
- Loading branch information
1 parent
44dc6db
commit 970e171
Showing
46 changed files
with
1,134 additions
and
547 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| import { fileURLToPath, URL } from 'node:url' | ||
| import { defineConfig } from 'vite' | ||
|
|
||
| // https://vitejs.dev/config/ | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" />` | ||
| }) |
26 changes: 26 additions & 0 deletions
26
apps/vue-storybook/stories/MixinAnimationCaret/MixinAnimationCaret.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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({}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| import { resolve } from 'node:path' | ||
| import { defineConfig } from 'vite' | ||
| import vue from '@vitejs/plugin-vue' | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.