From 19ea67026d6e4903ccc461b8f152eeea1a5f9aba Mon Sep 17 00:00:00 2001 From: IgnacioBecerra Date: Tue, 19 Dec 2023 01:03:10 -0800 Subject: [PATCH] docs(format): ran prettier --- .../carbon-web-components/.storybook/main.ts | 24 ++++++--- .../.storybook/preview.js | 14 +++-- .../src/components/button/button-story.mdx | 4 +- .../copy-button/copy-button.stories.ts | 47 +++++++++++----- .../src/components/test-story.ts | 26 --------- .../src/stories/Button.ts | 23 +++++--- .../src/stories/Header.ts | 22 +++++--- .../carbon-web-components/src/stories/Page.ts | 47 +++++++++++----- .../vite-svg-result-carbon-icon-loader.ts | 53 ++++++++++--------- 9 files changed, 148 insertions(+), 112 deletions(-) delete mode 100644 web-components/packages/carbon-web-components/src/components/test-story.ts diff --git a/web-components/packages/carbon-web-components/.storybook/main.ts b/web-components/packages/carbon-web-components/.storybook/main.ts index 9695cbdf850d..b98aeab250b3 100644 --- a/web-components/packages/carbon-web-components/.storybook/main.ts +++ b/web-components/packages/carbon-web-components/.storybook/main.ts @@ -5,12 +5,17 @@ import viteSVGResultCarbonIconLoader from '../tools/vite-svg-result-carbon-icon- const glob = require('fast-glob'); import remarkGfm from 'remark-gfm'; - -const stories = glob - .sync(['../src/**/*.mdx', '../docs/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], { +const stories = glob.sync( + [ + '../src/**/*.mdx', + '../docs/**/*.mdx', + '../src/**/*.stories.@(js|jsx|ts|tsx)', + ], + { ignore: ['../src/**/docs/*.mdx'], cwd: __dirname, - }) + } +); const config: StorybookConfig = { stories: stories, @@ -31,14 +36,18 @@ const config: StorybookConfig = { // alias: [{ find: "@", replacement: resolve(__dirname, "node_modules") }] // }, // resolve: { - // alias: { + // alias: { // '@carbon/web-components/es/icons': path.resolve(__dirname, '@carbon/icons/lib') }, // }, assetsInclude: ['**/*.html'], - plugins: [litStyleLoader(), litTemplateLoader(), viteSVGResultCarbonIconLoader()], + plugins: [ + litStyleLoader(), + litTemplateLoader(), + viteSVGResultCarbonIconLoader(), + ], optimizeDeps: { include: ['@storybook/web-components'], - exclude: ['lit', 'lit-html'] + exclude: ['lit', 'lit-html'], }, }); @@ -49,6 +58,5 @@ const config: StorybookConfig = { autodocs: true, defaultName: 'Overview', }, - }; export default config; diff --git a/web-components/packages/carbon-web-components/.storybook/preview.js b/web-components/packages/carbon-web-components/.storybook/preview.js index e72647737346..f7489ba63db0 100644 --- a/web-components/packages/carbon-web-components/.storybook/preview.js +++ b/web-components/packages/carbon-web-components/.storybook/preview.js @@ -1,11 +1,10 @@ -import { setCustomElementsManifest } from '@storybook/web-components'; +import { setCustomElementsManifest } from '@storybook/web-components'; import customElements from '../custom-elements.json'; import container from './container'; import { white, g10, g90, g100 } from '@carbon/themes'; import { breakpoints } from '@carbon/layout'; import theme from './theme'; - setCustomElementsManifest(customElements); export const globalTypes = { @@ -64,10 +63,11 @@ export const globalTypes = { title: 'Theme', items: ['white', 'g10', 'g90', 'g100'], }, - } + }, }; export const parameters = { + actions: { argTypesRegex: '^on.*' }, backgrounds: { // https://storybook.js.org/docs/react/essentials/backgrounds#grid grid: { @@ -96,7 +96,6 @@ export const parameters = { controls: { expanded: true, sort: 'alpha', - hideNoControlsWarning: true, }, docs: { @@ -156,7 +155,7 @@ export const parameters = { ], }, }, -} +}; export const decorators = [ function decoratorContainer(story, context) { @@ -164,7 +163,6 @@ export const decorators = [ const { hasMainTag } = result; const { locale, dir, theme } = context.globals; - document.documentElement.setAttribute('storybook-carbon-theme', theme); document.documentElement.lang = locale; @@ -177,5 +175,5 @@ export const decorators = [ export const Preview = { parameters, globalTypes, - decorators -}; \ No newline at end of file + decorators, +}; diff --git a/web-components/packages/carbon-web-components/src/components/button/button-story.mdx b/web-components/packages/carbon-web-components/src/components/button/button-story.mdx index ee690e0f93db..89e658ed82b3 100644 --- a/web-components/packages/carbon-web-components/src/components/button/button-story.mdx +++ b/web-components/packages/carbon-web-components/src/components/button/button-story.mdx @@ -1,4 +1,4 @@ -import { Props, Description } from '@storybook/addon-docs/blocks'; +import { ArgsTable, Description } from '@storybook/addon-docs/blocks'; import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; import Add16 from '@carbon/web-components/es/icons/add/16'; @@ -121,4 +121,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g. ``) and `false` means not setting the attribute (e.g. `` without `autofocus` attribute). - + diff --git a/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts index 748fcc5285be..6b5958e0097b 100644 --- a/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts +++ b/web-components/packages/carbon-web-components/src/components/copy-button/copy-button.stories.ts @@ -13,6 +13,27 @@ import type { Meta } from '@storybook/web-components'; import storyDocs from './copy-button.mdx'; import './copy-button'; +const defaultArgs = { + feedback: 'Copied!', + feedbackTimeout: 2000, + iconDescription: 'Copy to clipboard', +}; + +const controls = { + feedback: { + control: 'text', + description: `Provide a description for the icon representing the copy action that can be read by screen readers`, + }, + feedbackTimeout: { + control: { type: 'number', min: 1, step: 1 }, + description: `Specify the time it takes for the feedback message to timeout`, + }, + iconDescription: { + control: 'text', + description: `Provide a description for the icon representing the copy action that can be read by screen readers`, + }, +}; + const meta: Meta = { title: 'Components/Copy button', parameters: { @@ -20,7 +41,7 @@ const meta: Meta = { page: storyDocs, }, }, - render: ({feedbackText, feedbackTimeout, onClick, iconDescription}) => html` + render: ({ feedbackText, feedbackTimeout, onClick, iconDescription }) => html` `, - argTypes: { - feedback: { control: 'text' }, - feedbackTimeout: { control: { type: 'number', min:1, step: 1 } }, - iconDescription: { control: 'text' }, - }, - args: { - feedback: 'Copied!', - feedbackTimeout: 2000, - iconDescription: 'Copy to clipboard' - } + args: defaultArgs, }; -export default meta; - export const Default = { name: 'Default', -}; \ No newline at end of file + parameters: { + controls: { exclude: /(.*?)/ }, + }, +}; + +export const Playground = { + argTypes: controls, +}; + +export default meta; \ No newline at end of file diff --git a/web-components/packages/carbon-web-components/src/components/test-story.ts b/web-components/packages/carbon-web-components/src/components/test-story.ts deleted file mode 100644 index 5f79365b7be3..000000000000 --- a/web-components/packages/carbon-web-components/src/components/test-story.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/web-components'; - -import { html } from 'lit'; -import './copy-button/copy-button'; - -type CustomArgs = { footer?: string }; - -const meta: Meta = { - title: 'Page', - component: 'demo-page', - render: ({ footer }) => html` - - TEST -
${footer}
- - `, -}; - -export default meta; -type Story = StoryObj; - -export const CustomFooter: Story = { - args: { - footer: 'Built with Storybook', - }, -}; \ No newline at end of file diff --git a/web-components/packages/carbon-web-components/src/stories/Button.ts b/web-components/packages/carbon-web-components/src/stories/Button.ts index 737f7f980cac..d68253ef79c1 100644 --- a/web-components/packages/carbon-web-components/src/stories/Button.ts +++ b/web-components/packages/carbon-web-components/src/stories/Button.ts @@ -27,18 +27,29 @@ export interface ButtonProps { /** * Primary UI component for user interaction */ -export const Button = ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => { - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; +export const Button = ({ + primary, + backgroundColor, + size, + label, + onClick, +}: ButtonProps) => { + const mode = primary + ? 'storybook-button--primary' + : 'storybook-button--secondary'; return html` - TEST + TEST `; }; diff --git a/web-components/packages/carbon-web-components/src/stories/Header.ts b/web-components/packages/carbon-web-components/src/stories/Header.ts index d1ca01450c8a..3c22fa037feb 100644 --- a/web-components/packages/carbon-web-components/src/stories/Header.ts +++ b/web-components/packages/carbon-web-components/src/stories/Header.ts @@ -14,24 +14,30 @@ export interface HeaderProps { onCreateAccount: () => void; } -export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html` +export const Header = ({ + user, + onLogin, + onLogout, + onCreateAccount, +}: HeaderProps) => html`
- + + fill="#FFF" /> + fill="#555AB9" /> + fill="#91BAF8" />

Acme

diff --git a/web-components/packages/carbon-web-components/src/stories/Page.ts b/web-components/packages/carbon-web-components/src/stories/Page.ts index 74711e4aa7e7..4d4b9e151ef9 100644 --- a/web-components/packages/carbon-web-components/src/stories/Page.ts +++ b/web-components/packages/carbon-web-components/src/stories/Page.ts @@ -13,7 +13,12 @@ export interface PageProps { onCreateAccount: () => void; } -export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => html` +export const Page = ({ + user, + onLogin, + onLogout, + onCreateAccount, +}: PageProps) => html`
${Header({ user, @@ -26,43 +31,57 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) =>

Pages in Storybook

We recommend building UIs with a - + component-driven process starting with atomic components and ending with pages.

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page data - in Storybook: + Render pages with mock data. This makes it easy to build and review page + states without needing to navigate to them in your app. Here are some + handy patterns for managing page data in Storybook:

  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories + Use a higher-level connected component. Storybook helps you compose + such data from the "args" of child component stories
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. + Assemble data in the page component from your services. You can mock + these services out using Storybook.

Get a guided tutorial on component-driven development at - + Storybook tutorials . Read more in the - docs + + docs + .

Tip Adjust the width of the canvas with the - + + fill="#999" /> Viewports addon in the toolbar diff --git a/web-components/packages/carbon-web-components/tools/vite-svg-result-carbon-icon-loader.ts b/web-components/packages/carbon-web-components/tools/vite-svg-result-carbon-icon-loader.ts index e38a56560df0..2ad82f3ae76a 100644 --- a/web-components/packages/carbon-web-components/tools/vite-svg-result-carbon-icon-loader.ts +++ b/web-components/packages/carbon-web-components/tools/vite-svg-result-carbon-icon-loader.ts @@ -16,52 +16,53 @@ const createSVGResultFromCarbonIcon = require('./svg-result-carbon-icon'); * @returns {string} The massaged module content. */ export default function svgResultCarbonIconLoader() { - const svgRegex = /@carbon[\\/]icons[\\/]/i + const svgRegex = /@carbon[\\/]icons[\\/]/i; - const paths = new Map() + const paths = new Map(); return { - name: 'svg-result-carbon-icon-loader', - enforce: 'pre', + name: 'svg-result-carbon-icon-loader', + enforce: 'pre', - resolveId(id: string): string | null { + resolveId(id: string): string | null { if (id.match(svgRegex)) { - paths.set(id, id) - return id + paths.set(id, id); + return id; } else { - return null + return null; } - }, + }, - async load(id: string): Promise { - let outcome: string | undefined + async load(id: string): Promise { + let outcome: string | undefined; if (!id.match(svgRegex)) { - return outcome + return outcome; } - return `` - }, - - async transform(src: string, id: string) { + return ``; + }, + async transform(src: string, id: string) { if (!paths.has(id)) { - return null + return null; } - let outcome: string | undefined = src + let outcome: string | undefined = src; if (!id.match(svgRegex)) { - return outcome + return outcome; } const descriptor = require(id); return ` import { svg } from 'lit'; import spread from '${path.resolve( - __dirname, - '../src/globals/directives/spread' + __dirname, + '../src/globals/directives/spread' )}'; - const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon(descriptor)}; + const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon( + descriptor + )}; export default svgResultCarbonIcon; - ` - }, - } -} \ No newline at end of file + `; + }, + }; +}