-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(storybook): upgrade to 7 and using vite
- Loading branch information
1 parent
a8d8bfa
commit 4e2cfb9
Showing
54 changed files
with
1,108 additions
and
25 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
39 changes: 39 additions & 0 deletions
39
web-components/packages/carbon-web-components/.storybook/main.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,39 @@ | ||
| import type { StorybookConfig } from '@storybook/web-components-vite'; | ||
| import { mergeConfig } from 'vite'; | ||
| import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader'; | ||
|
|
||
| import { join, dirname } from 'path'; | ||
|
|
||
| /** | ||
| * This function is used to resolve the absolute path of a package. | ||
| * It is needed in projects that use Yarn PnP or are set up within a monorepo. | ||
| */ | ||
| function getAbsolutePath(value: string): any { | ||
| return dirname(require.resolve(join(value, 'package.json'))); | ||
| } | ||
| const config: StorybookConfig = { | ||
| stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], | ||
| addons: [ | ||
| getAbsolutePath('@storybook/addon-links'), | ||
| getAbsolutePath('@storybook/addon-essentials'), | ||
| ], | ||
| framework: { | ||
| name: getAbsolutePath('@storybook/web-components-vite'), | ||
| options: {}, | ||
| }, | ||
| async viteFinal(config) { | ||
| // Merge custom configuration into the default config | ||
| return mergeConfig(config, { | ||
| // Add dependencies to pre-optimization | ||
| plugins: [litStyleLoader(), litTemplateLoader()], | ||
| optimizeDeps: { | ||
| include: ['storybook-dark-mode', '@storybook/web-components'], | ||
| exclude: ['lit', 'lit-html'] | ||
| }, | ||
| }); | ||
| }, | ||
| docs: { | ||
| autodocs: 'tag', | ||
| }, | ||
| }; | ||
| export default config; |
25 changes: 25 additions & 0 deletions
25
web-components/packages/carbon-web-components/.storybook/preview.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,25 @@ | ||
| import { Preview, setCustomElementsManifest } from '@storybook/web-components'; | ||
| import customElements from '../custom-elements.json'; | ||
| import container from './container'; | ||
| import theme from './theme'; | ||
|
|
||
|
|
||
| setCustomElementsManifest(customElements); | ||
|
|
||
| export const preview: Preview = { | ||
| parameters: { | ||
| controls: { expanded: true }, | ||
| }, | ||
| }; | ||
|
|
||
| export const decorators = [ | ||
| function decoratorContainer(story, context) { | ||
| const result = story(); | ||
| const { hasMainTag } = result; | ||
| const { theme } = context.globals; | ||
|
|
||
| document.documentElement.setAttribute('storybook-carbon-theme', theme); | ||
|
|
||
| return container({ hasMainTag, children: result }); | ||
| }, | ||
| ]; |
72 changes: 72 additions & 0 deletions
72
web-components/packages/carbon-web-components/.storybook2/_container.scss
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,72 @@ | ||
| // | ||
| // @license | ||
| // | ||
| // Copyright IBM Corp. 2019, 2023 | ||
| // | ||
| // This source code is licensed under the Apache-2.0 license found in the | ||
| // LICENSE file in the root directory of this source tree. | ||
| // | ||
|
|
||
| @use '@carbon/styles/scss/config' as *; | ||
| @use '@carbon/themes/scss/themes'; | ||
| @use '@carbon/styles/scss/theme'; | ||
| @use '@carbon/grid'; | ||
|
|
||
| @use '@carbon/styles/scss/components/button/tokens' as button-tokens; | ||
| @use '@carbon/styles/scss/components/notification/tokens' as notification-tokens; | ||
| @use '@carbon/styles/scss/components/tag/tokens' as tag-tokens; | ||
| @include theme.add-component-tokens(button-tokens.$button-tokens); | ||
| @include theme.add-component-tokens(notification-tokens.$notification-tokens); | ||
| @include theme.add-component-tokens(tag-tokens.$tag-tokens); | ||
|
|
||
| // Emit the flex-grid styles | ||
| @include grid.flex-grid(); | ||
|
|
||
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| // The default theme is "white" (White) | ||
| :root { | ||
| @include theme.theme(themes.$white); | ||
| } | ||
| // Set the <html> theme attribute to "g10" to use the Gray 10 theme | ||
| // <html theme="g10"> | ||
| :root[storybook-carbon-theme='g10'] { | ||
| @include theme.theme(themes.$g10); | ||
| } | ||
|
|
||
| // Set the <html> theme attribute to "g90" to use the Gray 90 theme | ||
| // <html theme="g90"> | ||
| :root[storybook-carbon-theme='g90'] { | ||
| @include theme.theme(themes.$g90); | ||
| } | ||
|
|
||
| // Set the <html> theme attribute to "g100" to use the Gray 100 theme | ||
| // <html theme="g100"> | ||
| :root[storybook-carbon-theme='g100'] { | ||
| @include theme.theme(themes.$g100); | ||
| } | ||
|
|
||
| body { | ||
| background-color: theme.$background; | ||
| color: theme.$text-primary; | ||
| } | ||
|
|
||
| .sb-show-main.sb-main-padded { | ||
| padding: 0; | ||
| } | ||
|
|
||
| #main-content { | ||
| padding: 42px; | ||
| position: relative; | ||
| } | ||
|
|
||
| .#{$prefix}--content.#{$prefix}-ce-demo-devenv--ui-shell-content { | ||
| margin: 0; | ||
| height: 100vh; | ||
| width: 100%; | ||
| padding: 2rem; | ||
| } |
40 changes: 40 additions & 0 deletions
40
web-components/packages/carbon-web-components/.storybook2/addon-knobs-args/decorators.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,40 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2020, 2022 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import { StoryContext } from '@storybook/addons'; | ||
|
|
||
| /** | ||
| * The list of knobs factories set in story parameters. | ||
| */ | ||
| type KnobParameters = { | ||
| [componentName: string]: () => { [propName: string]: any }; | ||
| }; | ||
|
|
||
| export const decorators = [ | ||
| /** | ||
| * A Storybook decorator that takes list of knobs factories set in story parameters, | ||
| * generates knob values from those, and sets them to story args. | ||
| * @param story The original story factory. | ||
| * @param context The story context. | ||
| */ | ||
| function decoratorKnobs( | ||
| story, | ||
| { args, parameters: { knobs } }: StoryContext | ||
| ) { | ||
| if (Object(knobs) === knobs) { | ||
| Object.keys(knobs).forEach((name) => { | ||
| const { [name]: knobsForComponent } = knobs as KnobParameters; | ||
| if (typeof knobsForComponent === 'function') { | ||
| args[name] = knobsForComponent(); | ||
| } | ||
| }, {}); | ||
| } | ||
| return story(); | ||
| }, | ||
| ]; |
16 changes: 16 additions & 0 deletions
16
web-components/packages/carbon-web-components/.storybook2/addon-knobs-args/index.js
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,16 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2020, 2022 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| function config(entry = []) { | ||
| return [...entry, require.resolve('./decorators.ts')]; | ||
| } | ||
|
|
||
| module.exports = { | ||
| config, | ||
| }; |
File renamed without changes.
File renamed without changes.
39 changes: 39 additions & 0 deletions
39
web-components/packages/carbon-web-components/.storybook2/container.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,39 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2020, 2023 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import { html, TemplateResult } from 'lit'; | ||
| import containerStyles from './_container.scss'; // eslint-disable-line import/first | ||
|
|
||
| /** | ||
| * @param options The rendering options. | ||
| * @param [options.hasMainTag] `true` if the story itself has `<main>` tag. | ||
| * @param [options.children] The story content. | ||
| * @returns The content that wraps the story. | ||
| */ | ||
| const container = ({ | ||
| hasMainTag, | ||
| children, | ||
| }: { | ||
| hasMainTag?: boolean; | ||
| children: TemplateResult; | ||
| }) => html` | ||
| <style> | ||
| ${containerStyles} | ||
| </style> | ||
| <cds-skip-to-content href="#main-content"></cds-skip-to-content> | ||
| <div | ||
| id="main-content" | ||
| name="main-content" | ||
| data-floating-menu-container | ||
| role="${hasMainTag ? 'none' : 'main'}"> | ||
| ${children} | ||
| </div> | ||
| `; | ||
|
|
||
| export default container; |
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
21 changes: 21 additions & 0 deletions
21
web-components/packages/carbon-web-components/.storybook2/theme.js
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,21 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2019, 2023 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import { create } from '@storybook/theming'; | ||
| import { version } from '../package.json'; | ||
|
|
||
| export default create({ | ||
| // Typography | ||
| fontBase: "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif", | ||
| fontCode: | ||
| "'IBM Plex Mono', Menlo, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace", | ||
| brandTitle: `@carbon/web-components ${version}`, | ||
| brandUrl: | ||
| 'https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components', | ||
| }); |
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
Oops, something went wrong.