From d715fca440db31c9a5aa1fbd72fb4f33870a1691 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 20 Nov 2024 16:40:19 +0000 Subject: [PATCH 01/34] feat(pie-storybook): Improve logic for conditional rendering of stories --- apps/pie-storybook/.storybook/main.ts | 8 +-- apps/pie-storybook/.storybook/story-utils.ts | 29 ++++++++ .../stories/pie-assistive-text.stories.ts | 4 +- .../stories/pie-button.stories.ts | 4 +- .../pie-storybook/stories/pie-card.stories.ts | 4 +- .../stories/pie-checkbox-group.stories.ts | 4 +- .../stories/pie-checkbox.stories.ts | 5 +- .../pie-storybook/stories/pie-chip.stories.ts | 4 +- .../stories/pie-cookie-banner.stories.ts | 4 +- .../stories/pie-divider.stories.ts | 5 +- .../stories/pie-divider.test.stories.ts | 68 ------------------- .../stories/pie-form-label.stories.ts | 4 +- .../stories/pie-icon-button.stories.ts | 4 +- .../pie-storybook/stories/pie-link.stories.ts | 4 +- .../stories/pie-lottie-player.stories.ts | 4 +- .../stories/pie-modal.stories.ts | 4 +- .../stories/pie-notification.stories.ts | 4 +- .../stories/pie-radio-group.stories.ts | 4 +- .../stories/pie-radio.stories.ts | 4 +- .../stories/pie-spinner.stories.ts | 4 +- .../stories/pie-switch.stories.ts | 4 +- apps/pie-storybook/stories/pie-tag.stories.ts | 4 +- .../stories/pie-text-input.stories.ts | 4 +- .../stories/pie-textarea.stories.ts | 4 +- .../stories/pie-toast.stories.ts | 4 +- apps/pie-storybook/types/ExtendedMeta.ts | 3 + apps/pie-storybook/types/index.ts | 1 + .../templates/pie-placeholder.__stories__.ts | 5 +- 28 files changed, 85 insertions(+), 119 deletions(-) create mode 100644 apps/pie-storybook/.storybook/story-utils.ts delete mode 100644 apps/pie-storybook/stories/pie-divider.test.stories.ts create mode 100644 apps/pie-storybook/types/ExtendedMeta.ts diff --git a/apps/pie-storybook/.storybook/main.ts b/apps/pie-storybook/.storybook/main.ts index 1d1069d151..35e79f702a 100644 --- a/apps/pie-storybook/.storybook/main.ts +++ b/apps/pie-storybook/.storybook/main.ts @@ -1,16 +1,14 @@ import type { StorybookConfig } from '@storybook/web-components-vite'; +import { getTestingStoryFiles } from './story-utils'; const isBrowserTesting = process.env.BROWSER_TESTING === 'true'; const config: StorybookConfig = { stories: isBrowserTesting - ? [ - "../stories/**/*.test.mdx", - "../stories/**/*.test.stories.@(js|ts|tsx)" - ] + ? getTestingStoryFiles() : [ "../stories/**/*.mdx", - "../stories/**/!(*.test).stories.@(js|ts|tsx)" + "../stories/**/*.stories.@(js|ts|tsx)" ], addons: [ "@storybook/addon-essentials", diff --git a/apps/pie-storybook/.storybook/story-utils.ts b/apps/pie-storybook/.storybook/story-utils.ts new file mode 100644 index 0000000000..4967c4a423 --- /dev/null +++ b/apps/pie-storybook/.storybook/story-utils.ts @@ -0,0 +1,29 @@ +import fs from 'fs'; +import path from 'path'; + +const storiesDir = path.resolve(__dirname, '../stories'); + +export function getTestingStoryFiles(): string[] { + const storyFiles: string[] = []; + + function readDirectory(directory: string) { + const files = fs.readdirSync(directory); + + files.forEach(file => { + const fullPath = path.join(directory, file); + const stat = fs.statSync(fullPath); + + if (stat.isDirectory()) { + readDirectory(fullPath); + } else if (file.endsWith('.stories.ts') || file.endsWith('.stories.tsx')) { + const content = fs.readFileSync(fullPath, 'utf-8'); + if (content.includes(`showInTestingDeployment: ${true}`)) { + storyFiles.push(fullPath); + } + } + }); + } + + readDirectory(storiesDir); + return storyFiles; +} \ No newline at end of file diff --git a/apps/pie-storybook/stories/pie-assistive-text.stories.ts b/apps/pie-storybook/stories/pie-assistive-text.stories.ts index 764447975b..3ff3ea2637 100644 --- a/apps/pie-storybook/stories/pie-assistive-text.stories.ts +++ b/apps/pie-storybook/stories/pie-assistive-text.stories.ts @@ -1,6 +1,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-assistive-text'; import { type AssistiveTextProps as AssistiveTextBaseProps, variants, defaultProps } from '@justeattakeaway/pie-assistive-text'; @@ -9,7 +9,7 @@ import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type AssistiveTextProps = SlottedComponentProps; -type AssistiveTextStoryMeta = Meta; +type AssistiveTextStoryMeta = ExtendedMeta; const defaultArgs: AssistiveTextProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-button.stories.ts b/apps/pie-storybook/stories/pie-button.stories.ts index 0a83975ef6..80aa6f5210 100644 --- a/apps/pie-storybook/stories/pie-button.stories.ts +++ b/apps/pie-storybook/stories/pie-button.stories.ts @@ -1,6 +1,6 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-button'; import { @@ -12,7 +12,7 @@ import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../ut import { type SlottedComponentProps } from '../types'; type ButtonProps = SlottedComponentProps; -type ButtonStoryMeta = Meta; +type ButtonStoryMeta = ExtendedMeta; const defaultArgs: ButtonProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-card.stories.ts b/apps/pie-storybook/stories/pie-card.stories.ts index aa5436b501..cf359390f6 100644 --- a/apps/pie-storybook/stories/pie-card.stories.ts +++ b/apps/pie-storybook/stories/pie-card.stories.ts @@ -1,7 +1,7 @@ import { nothing } from 'lit'; import { html } from 'lit/static-html.js'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { action } from '@storybook/addon-actions'; import '@justeattakeaway/pie-card'; @@ -13,7 +13,7 @@ import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type CardProps = SlottedComponentProps; -type CardStoryMeta = Meta; +type CardStoryMeta = ExtendedMeta; const defaultArgs: CardProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts index c2c6fc8d0d..dd712e3550 100644 --- a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts +++ b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts @@ -1,6 +1,6 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-checkbox-group'; import { type CheckboxGroupProps as CheckboxGroupPropsBase, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group'; @@ -15,7 +15,7 @@ type CheckboxGroupProps = CheckboxGroupPropsBase & { labelSlot: keyof typeof labelSlotOptions; }; -type CheckboxGroupStoryMeta = Meta; +type CheckboxGroupStoryMeta = ExtendedMeta; const defaultArgs: CheckboxGroupProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-checkbox.stories.ts b/apps/pie-storybook/stories/pie-checkbox.stories.ts index 32e97900ab..2d496b4eca 100644 --- a/apps/pie-storybook/stories/pie-checkbox.stories.ts +++ b/apps/pie-storybook/stories/pie-checkbox.stories.ts @@ -1,6 +1,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-checkbox'; import { type CheckboxProps as CheckboxBaseProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox'; @@ -10,7 +10,7 @@ import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type CheckboxProps = SlottedComponentProps; -type CheckboxStoryMeta = Meta; +type CheckboxStoryMeta = ExtendedMeta; const defaultArgs: CheckboxProps = { ...defaultProps, @@ -21,6 +21,7 @@ const defaultArgs: CheckboxProps = { const checkboxStoryMeta: CheckboxStoryMeta = { title: 'Checkbox', component: 'pie-checkbox', + showInTestingDeployment: true, argTypes: { value: { description: 'The value of the checkbox (used as a key/value pair in HTML forms with `name`).', diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index 1f604ba342..1b974e6f30 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -1,7 +1,7 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-chip'; import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip'; @@ -11,7 +11,7 @@ import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type ChipProps = SlottedComponentProps & { showIcon: boolean }; -type ChipStoryMeta = Meta; +type ChipStoryMeta = ExtendedMeta; const defaultArgs: ChipProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-cookie-banner.stories.ts b/apps/pie-storybook/stories/pie-cookie-banner.stories.ts index d20f23d484..af324e2c51 100644 --- a/apps/pie-storybook/stories/pie-cookie-banner.stories.ts +++ b/apps/pie-storybook/stories/pie-cookie-banner.stories.ts @@ -1,6 +1,6 @@ import { html } from 'lit'; import { action } from '@storybook/addon-actions'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-cookie-banner'; import { type CookieBannerProps, defaultProps } from '@justeattakeaway/pie-cookie-banner'; @@ -10,7 +10,7 @@ import { } from '@justeattakeaway/pie-cookie-banner/src/defs'; import { createStory } from '../utilities'; -type CookieBannerStoryMeta = Meta; +type CookieBannerStoryMeta = ExtendedMeta; const defaultArgs: CookieBannerProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-divider.stories.ts b/apps/pie-storybook/stories/pie-divider.stories.ts index 58195acad7..872fd0d664 100644 --- a/apps/pie-storybook/stories/pie-divider.stories.ts +++ b/apps/pie-storybook/stories/pie-divider.stories.ts @@ -1,6 +1,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-divider'; import { @@ -9,13 +9,14 @@ import { import { createStory, type TemplateFunction } from '../utilities'; -type DividerStoryMeta = Meta; +type DividerStoryMeta = ExtendedMeta; const defaultArgs: DividerProps = { ...defaultProps }; const dividerStoryMeta: DividerStoryMeta = { title: 'Divider', component: 'pie-divider', + showInTestingDeployment: true, argTypes: { variant: { description: 'Set the variant of the divider. To change this, view the other story.', diff --git a/apps/pie-storybook/stories/pie-divider.test.stories.ts b/apps/pie-storybook/stories/pie-divider.test.stories.ts deleted file mode 100644 index 58195acad7..0000000000 --- a/apps/pie-storybook/stories/pie-divider.test.stories.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { html } from 'lit'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { type Meta } from '@storybook/web-components'; - -import '@justeattakeaway/pie-divider'; -import { - type DividerProps, variants, orientations, defaultProps, -} from '@justeattakeaway/pie-divider'; - -import { createStory, type TemplateFunction } from '../utilities'; - -type DividerStoryMeta = Meta; - -const defaultArgs: DividerProps = { ...defaultProps }; - -const dividerStoryMeta: DividerStoryMeta = { - title: 'Divider', - component: 'pie-divider', - argTypes: { - variant: { - description: 'Set the variant of the divider. To change this, view the other story.', - control: { disable: true }, - options: variants, - defaultValue: { - summary: defaultProps.variant, - }, - }, - label: { - description: 'The label text for the divider.', - control: { - type: 'text', - defaultValue: { - summary: 'Label', - }, - }, - }, - orientation: { - description: 'Set the orientation of the divider.', - control: 'select', - options: orientations, - defaultValue: { - summary: defaultProps.orientation, - }, - }, - }, - args: defaultArgs, - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%5BCore%5D-Components-%E2%9A%AA%EF%B8%8F-%5BPIE-2.0%5D?node-id=876-1227&node-type=CANVAS&t=v6qypWzZqWE6lPxm-0', - }, - }, -}; - -export default dividerStoryMeta; - -const Template : TemplateFunction = ({ variant, label, orientation }) => html` -
- -
- `; - -const createDividerStory = createStory(Template, defaultArgs); - -export const Default = createDividerStory(); -export const Inverse = createDividerStory({ variant: 'inverse' }, { bgColor: 'dark (container-dark)' }); -export const Labelled = createDividerStory({ label: 'Label' }); -export const LargeTextContent = createDividerStory({ label: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quas inventore quasi ullam, sed ab odio dicta, tempore' }); diff --git a/apps/pie-storybook/stories/pie-form-label.stories.ts b/apps/pie-storybook/stories/pie-form-label.stories.ts index 295e68b285..63c604e449 100644 --- a/apps/pie-storybook/stories/pie-form-label.stories.ts +++ b/apps/pie-storybook/stories/pie-form-label.stories.ts @@ -1,5 +1,5 @@ import { html, nothing } from 'lit'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-form-label'; import { type FormLabelProps as FormLabelPropsBase } from '@justeattakeaway/pie-form-label'; @@ -8,7 +8,7 @@ import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type FormLabelProps = SlottedComponentProps; -type FormLabelStoryMeta = Meta; +type FormLabelStoryMeta = ExtendedMeta; const defaultArgs: FormLabelProps = { for: 'form-label', diff --git a/apps/pie-storybook/stories/pie-icon-button.stories.ts b/apps/pie-storybook/stories/pie-icon-button.stories.ts index 83807b523a..19d713d614 100644 --- a/apps/pie-storybook/stories/pie-icon-button.stories.ts +++ b/apps/pie-storybook/stories/pie-icon-button.stories.ts @@ -1,6 +1,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-icon-button'; import { @@ -10,7 +10,7 @@ import '@justeattakeaway/pie-icons-webc/dist/IconClose.js'; import { createStory, type TemplateFunction } from '../utilities'; -type IconButtonStoryMeta = Meta; +type IconButtonStoryMeta = ExtendedMeta; const defaultArgs: IconButtonProps = { ...defaultProps, aria: { label: 'Test Label ' } }; diff --git a/apps/pie-storybook/stories/pie-link.stories.ts b/apps/pie-storybook/stories/pie-link.stories.ts index 9ec8f0fc8c..64151763ac 100644 --- a/apps/pie-storybook/stories/pie-link.stories.ts +++ b/apps/pie-storybook/stories/pie-link.stories.ts @@ -1,6 +1,6 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-link'; import { @@ -12,7 +12,7 @@ import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type LinkProps = SlottedComponentProps; -type LinkStoryMeta = Meta; +type LinkStoryMeta = ExtendedMeta; const defaultArgs: LinkProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-lottie-player.stories.ts b/apps/pie-storybook/stories/pie-lottie-player.stories.ts index bbbecb3656..0106c83165 100644 --- a/apps/pie-storybook/stories/pie-lottie-player.stories.ts +++ b/apps/pie-storybook/stories/pie-lottie-player.stories.ts @@ -1,5 +1,5 @@ import { html } from 'lit'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-lottie-player'; import { @@ -9,7 +9,7 @@ import { import { createStory } from '../utilities'; type LottiePlayerProps = Omit -type LottiePlayerStoryMeta = Meta; +type LottiePlayerStoryMeta = ExtendedMeta; const defaultArgs: LottiePlayerProps = { ...defaultProps }; diff --git a/apps/pie-storybook/stories/pie-modal.stories.ts b/apps/pie-storybook/stories/pie-modal.stories.ts index 3a53bdc53d..d8c751a3d7 100644 --- a/apps/pie-storybook/stories/pie-modal.stories.ts +++ b/apps/pie-storybook/stories/pie-modal.stories.ts @@ -1,7 +1,7 @@ import { html } from 'lit/static-html.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-modal'; import { @@ -16,7 +16,7 @@ import { type SlottedComponentProps } from '../types'; import { createStory, sanitizeAndRenderHTML } from '../utilities'; type ModalProps = SlottedComponentProps; -type ModalStoryMeta = Meta; +type ModalStoryMeta = ExtendedMeta; const defaultArgs: ModalProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-notification.stories.ts b/apps/pie-storybook/stories/pie-notification.stories.ts index 28c60e0366..6904e630d6 100644 --- a/apps/pie-storybook/stories/pie-notification.stories.ts +++ b/apps/pie-storybook/stories/pie-notification.stories.ts @@ -1,7 +1,7 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-notification'; import { @@ -18,7 +18,7 @@ type NotificationProps = NotificationBaseProps & { iconSlot: keyof typeof slotOptions; }; -type NotificationStoryMeta = Meta; +type NotificationStoryMeta = ExtendedMeta; const defaultArgs: NotificationProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-radio-group.stories.ts b/apps/pie-storybook/stories/pie-radio-group.stories.ts index d79a030084..24c1ee476b 100644 --- a/apps/pie-storybook/stories/pie-radio-group.stories.ts +++ b/apps/pie-storybook/stories/pie-radio-group.stories.ts @@ -1,6 +1,6 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { action } from '@storybook/addon-actions'; import '@justeattakeaway/pie-radio-group'; @@ -20,7 +20,7 @@ type RadioGroupProps = RadioGroupPropsBase & { labelSlot: keyof typeof labelSlotOptions; }; -type RadioGroupStoryMeta = Meta; +type RadioGroupStoryMeta = ExtendedMeta; const defaultArgs: RadioGroupProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-radio.stories.ts b/apps/pie-storybook/stories/pie-radio.stories.ts index 1e6681dcb5..cbd84921fb 100644 --- a/apps/pie-storybook/stories/pie-radio.stories.ts +++ b/apps/pie-storybook/stories/pie-radio.stories.ts @@ -1,7 +1,7 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { useArgs as UseArgs } from '@storybook/preview-api'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-radio'; import { @@ -14,7 +14,7 @@ import { type SlottedComponentProps } from '../types'; import { createStory, sanitizeAndRenderHTML, type TemplateFunction } from '../utilities'; type RadioProps = SlottedComponentProps; -type RadioStoryMeta = Meta; +type RadioStoryMeta = ExtendedMeta; const defaultArgs: RadioProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-spinner.stories.ts b/apps/pie-storybook/stories/pie-spinner.stories.ts index 5280b62e1b..0fb531c24d 100644 --- a/apps/pie-storybook/stories/pie-spinner.stories.ts +++ b/apps/pie-storybook/stories/pie-spinner.stories.ts @@ -1,6 +1,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-spinner'; import { @@ -9,7 +9,7 @@ import { import { type TemplateFunction, createStory } from '../utilities'; -type SpinnerStoryMeta = Meta; +type SpinnerStoryMeta = ExtendedMeta; const defaultArgs: SpinnerProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-switch.stories.ts b/apps/pie-storybook/stories/pie-switch.stories.ts index a0b69e6839..40d1cc620a 100644 --- a/apps/pie-storybook/stories/pie-switch.stories.ts +++ b/apps/pie-storybook/stories/pie-switch.stories.ts @@ -1,6 +1,6 @@ import { html, nothing } from 'lit'; import { action } from '@storybook/addon-actions'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-switch'; import { type SwitchProps, labelPlacements, defaultProps } from '@justeattakeaway/pie-switch'; @@ -8,7 +8,7 @@ import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js'; import { createStory, type TemplateFunction } from '../utilities'; -type SwitchStoryMeta = Meta; +type SwitchStoryMeta = ExtendedMeta; const defaultArgs: SwitchProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-tag.stories.ts b/apps/pie-storybook/stories/pie-tag.stories.ts index 1f4172c187..714566f564 100644 --- a/apps/pie-storybook/stories/pie-tag.stories.ts +++ b/apps/pie-storybook/stories/pie-tag.stories.ts @@ -1,6 +1,6 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-tag'; import { @@ -16,7 +16,7 @@ import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type TagProps = SlottedComponentProps & { showIcon: boolean }; -type TagStoryMeta = Meta; +type TagStoryMeta = ExtendedMeta; const defaultArgs: TagProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-text-input.stories.ts b/apps/pie-storybook/stories/pie-text-input.stories.ts index 4b98cee423..762e219101 100644 --- a/apps/pie-storybook/stories/pie-text-input.stories.ts +++ b/apps/pie-storybook/stories/pie-text-input.stories.ts @@ -2,7 +2,7 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; import { useArgs as UseArgs } from '@storybook/preview-api'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-text-input'; import { @@ -27,7 +27,7 @@ type TextInputProps = TextInputPropsBase & { trailingSlot: keyof typeof trailingSlotOptions; }; -type TextInputStoryMeta = Meta; +type TextInputStoryMeta = ExtendedMeta; const defaultArgs: TextInputProps = { ...defaultProps, diff --git a/apps/pie-storybook/stories/pie-textarea.stories.ts b/apps/pie-storybook/stories/pie-textarea.stories.ts index 897e321370..922cbd575b 100644 --- a/apps/pie-storybook/stories/pie-textarea.stories.ts +++ b/apps/pie-storybook/stories/pie-textarea.stories.ts @@ -2,7 +2,7 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; import { useArgs as UseArgs } from '@storybook/preview-api'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-textarea'; import { @@ -14,7 +14,7 @@ import '@justeattakeaway/pie-link'; import { createStory, type TemplateFunction } from '../utilities'; -type TextareaStoryMeta = Meta; +type TextareaStoryMeta = ExtendedMeta; const defaultArgs: TextareaProps = { ...defaultProps, name: 'testName' }; diff --git a/apps/pie-storybook/stories/pie-toast.stories.ts b/apps/pie-storybook/stories/pie-toast.stories.ts index 965bb4d0ca..41fb86531e 100644 --- a/apps/pie-storybook/stories/pie-toast.stories.ts +++ b/apps/pie-storybook/stories/pie-toast.stories.ts @@ -2,12 +2,12 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { useArgs } from '@storybook/preview-api'; import { action } from '@storybook/addon-actions'; -import { type Meta } from '@storybook/web-components'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type ToastProps, defaultProps, variants } from '@justeattakeaway/pie-toast'; import { type TemplateFunction, createStory } from '../utilities'; -type ToastStoryMeta = Meta; +type ToastStoryMeta = ExtendedMeta; const defaultArgs: ToastProps = { ...defaultProps, diff --git a/apps/pie-storybook/types/ExtendedMeta.ts b/apps/pie-storybook/types/ExtendedMeta.ts new file mode 100644 index 0000000000..d77d50ee9a --- /dev/null +++ b/apps/pie-storybook/types/ExtendedMeta.ts @@ -0,0 +1,3 @@ +import { type Meta } from '@storybook/web-components'; + +export type ExtendedMeta = Meta & { showInTestingDeployment?: boolean }; \ No newline at end of file diff --git a/apps/pie-storybook/types/index.ts b/apps/pie-storybook/types/index.ts index 65bebad12f..b3809a1bef 100644 --- a/apps/pie-storybook/types/index.ts +++ b/apps/pie-storybook/types/index.ts @@ -1 +1,2 @@ export * from './SlottedComponentProps'; +export * from './ExtendedMeta'; \ No newline at end of file diff --git a/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__stories__.ts b/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__stories__.ts index 78174ff32a..2e5204619c 100644 --- a/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__stories__.ts +++ b/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__stories__.ts @@ -1,18 +1,19 @@ import { html } from 'lit'; -import { type Meta } from '@storybook/web-components'; +import { ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-<%= fileName %>'; import { type <%= componentName %>Props } from '@justeattakeaway/pie-<%= fileName %>'; import { createStory } from '../utilities'; -type <%= componentName %>StoryMeta = Meta<<%= componentName %>Props>; +type <%= componentName %>StoryMeta = ExtendedMeta<<%= componentName %>Props>; const defaultArgs: <%= componentName %>Props = {}; const <%= componentNameCamelCase %>StoryMeta: <%= componentName %>StoryMeta = { title: '<%= displayName %>', component: 'pie-<%= fileName %>', + showInTestingDeployment: true, argTypes: {}, args: defaultArgs, parameters: { From cbaab706e371636a2ae5adcc331948991c07ecff Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Thu, 21 Nov 2024 11:13:04 +0000 Subject: [PATCH 02/34] update other stories to show in testing deployment --- apps/pie-storybook/stories/pie-assistive-text.stories.ts | 1 + apps/pie-storybook/stories/pie-button.stories.ts | 1 + apps/pie-storybook/stories/pie-card.stories.ts | 1 + apps/pie-storybook/stories/pie-checkbox-group.stories.ts | 1 + apps/pie-storybook/stories/pie-chip.stories.ts | 1 + apps/pie-storybook/stories/pie-cookie-banner.stories.ts | 1 + apps/pie-storybook/stories/pie-form-label.stories.ts | 1 + apps/pie-storybook/stories/pie-icon-button.stories.ts | 1 + apps/pie-storybook/stories/pie-link.stories.ts | 1 + apps/pie-storybook/stories/pie-lottie-player.stories.ts | 1 + apps/pie-storybook/stories/pie-modal.stories.ts | 1 + apps/pie-storybook/stories/pie-notification.stories.ts | 1 + apps/pie-storybook/stories/pie-radio-group.stories.ts | 1 + apps/pie-storybook/stories/pie-radio.stories.ts | 1 + apps/pie-storybook/stories/pie-spinner.stories.ts | 1 + apps/pie-storybook/stories/pie-switch.stories.ts | 1 + apps/pie-storybook/stories/pie-tag.stories.ts | 1 + apps/pie-storybook/stories/pie-text-input.stories.ts | 1 + apps/pie-storybook/stories/pie-textarea.stories.ts | 1 + apps/pie-storybook/stories/pie-toast.stories.ts | 1 + 20 files changed, 20 insertions(+) diff --git a/apps/pie-storybook/stories/pie-assistive-text.stories.ts b/apps/pie-storybook/stories/pie-assistive-text.stories.ts index 3ff3ea2637..fc1cfda5eb 100644 --- a/apps/pie-storybook/stories/pie-assistive-text.stories.ts +++ b/apps/pie-storybook/stories/pie-assistive-text.stories.ts @@ -18,6 +18,7 @@ const defaultArgs: AssistiveTextProps = { const assistiveTextStoryMeta: AssistiveTextStoryMeta = { title: 'Assistive Text', + showInTestingDeployment: true, component: 'pie-assistive-text', argTypes: { variant: { diff --git a/apps/pie-storybook/stories/pie-button.stories.ts b/apps/pie-storybook/stories/pie-button.stories.ts index 80aa6f5210..9e04f98f2d 100644 --- a/apps/pie-storybook/stories/pie-button.stories.ts +++ b/apps/pie-storybook/stories/pie-button.stories.ts @@ -22,6 +22,7 @@ const defaultArgs: ButtonProps = { const buttonStoryMeta: ButtonStoryMeta = { title: 'Button', + showInTestingDeployment: true, component: 'pie-button', argTypes: { tag: { diff --git a/apps/pie-storybook/stories/pie-card.stories.ts b/apps/pie-storybook/stories/pie-card.stories.ts index cf359390f6..cb2f5d4412 100644 --- a/apps/pie-storybook/stories/pie-card.stories.ts +++ b/apps/pie-storybook/stories/pie-card.stories.ts @@ -40,6 +40,7 @@ const defaultArgs: CardProps = { const cardStoryMeta: CardStoryMeta = { title: 'Card', + showInTestingDeployment: true, component: 'pie-card', argTypes: { tag: { diff --git a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts index dd712e3550..de6ab4cd1d 100644 --- a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts +++ b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts @@ -29,6 +29,7 @@ const labelSlotOptions = { const checkboxGroupStoryMeta: CheckboxGroupStoryMeta = { title: 'Checkbox Group', + showInTestingDeployment: true, component: 'pie-checkbox-group', argTypes: { name: { diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index 1b974e6f30..a7ffa0c7d1 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -25,6 +25,7 @@ const defaultArgs: ChipProps = { const chipStoryMeta: ChipStoryMeta = { title: 'Chip', + showInTestingDeployment: true, component: 'pie-chip', argTypes: { aria: { diff --git a/apps/pie-storybook/stories/pie-cookie-banner.stories.ts b/apps/pie-storybook/stories/pie-cookie-banner.stories.ts index af324e2c51..13690d13c2 100644 --- a/apps/pie-storybook/stories/pie-cookie-banner.stories.ts +++ b/apps/pie-storybook/stories/pie-cookie-banner.stories.ts @@ -25,6 +25,7 @@ const defaultArgs: CookieBannerProps = { const cookieBannerStoryMeta: CookieBannerStoryMeta = { title: 'Cookie Banner', + showInTestingDeployment: true, component: 'pie-cookie-banner', argTypes: { hasPrimaryActionsOnly: { diff --git a/apps/pie-storybook/stories/pie-form-label.stories.ts b/apps/pie-storybook/stories/pie-form-label.stories.ts index 63c604e449..df183d535c 100644 --- a/apps/pie-storybook/stories/pie-form-label.stories.ts +++ b/apps/pie-storybook/stories/pie-form-label.stories.ts @@ -19,6 +19,7 @@ const defaultArgs: FormLabelProps = { const formLabelStoryMeta: FormLabelStoryMeta = { title: 'Form Label', + showInTestingDeployment: true, component: 'pie-form-label', argTypes: { for: { diff --git a/apps/pie-storybook/stories/pie-icon-button.stories.ts b/apps/pie-storybook/stories/pie-icon-button.stories.ts index 19d713d614..0090324d45 100644 --- a/apps/pie-storybook/stories/pie-icon-button.stories.ts +++ b/apps/pie-storybook/stories/pie-icon-button.stories.ts @@ -16,6 +16,7 @@ const defaultArgs: IconButtonProps = { ...defaultProps, aria: { label: 'Test Lab const iconButtonStoryMeta: IconButtonStoryMeta = { title: 'Icon Button', + showInTestingDeployment: true, component: 'pie-icon-button', argTypes: { aria: { diff --git a/apps/pie-storybook/stories/pie-link.stories.ts b/apps/pie-storybook/stories/pie-link.stories.ts index 64151763ac..12c7a0c8c3 100644 --- a/apps/pie-storybook/stories/pie-link.stories.ts +++ b/apps/pie-storybook/stories/pie-link.stories.ts @@ -24,6 +24,7 @@ const defaultArgs: LinkProps = { const linkStoryMeta: LinkStoryMeta = { title: 'Link', + showInTestingDeployment: true, component: 'pie-link', argTypes: { tag: { diff --git a/apps/pie-storybook/stories/pie-lottie-player.stories.ts b/apps/pie-storybook/stories/pie-lottie-player.stories.ts index 0106c83165..e6ddbf70fe 100644 --- a/apps/pie-storybook/stories/pie-lottie-player.stories.ts +++ b/apps/pie-storybook/stories/pie-lottie-player.stories.ts @@ -27,6 +27,7 @@ const animationSrcLabels = animationSrcOptions.reduce>((a const lottiePlayerStoryMeta: LottiePlayerStoryMeta = { title: 'Lottie Player', + showInTestingDeployment: true, component: 'pie-lottie-player', argTypes: { animationSrc: { diff --git a/apps/pie-storybook/stories/pie-modal.stories.ts b/apps/pie-storybook/stories/pie-modal.stories.ts index d8c751a3d7..454f98eaff 100644 --- a/apps/pie-storybook/stories/pie-modal.stories.ts +++ b/apps/pie-storybook/stories/pie-modal.stories.ts @@ -44,6 +44,7 @@ const defaultArgs: ModalProps = { const modalStoryMeta: ModalStoryMeta = { title: 'Modal', + showInTestingDeployment: true, component: 'pie-modal', argTypes: { isDismissible: { diff --git a/apps/pie-storybook/stories/pie-notification.stories.ts b/apps/pie-storybook/stories/pie-notification.stories.ts index 6904e630d6..16e85084e7 100644 --- a/apps/pie-storybook/stories/pie-notification.stories.ts +++ b/apps/pie-storybook/stories/pie-notification.stories.ts @@ -42,6 +42,7 @@ const slotOptions = { const notificationStoryMeta: NotificationStoryMeta = { title: 'Notification', + showInTestingDeployment: true, component: 'pie-notification', argTypes: { isOpen: { diff --git a/apps/pie-storybook/stories/pie-radio-group.stories.ts b/apps/pie-storybook/stories/pie-radio-group.stories.ts index 24c1ee476b..4f05edb8a7 100644 --- a/apps/pie-storybook/stories/pie-radio-group.stories.ts +++ b/apps/pie-storybook/stories/pie-radio-group.stories.ts @@ -34,6 +34,7 @@ const labelSlotOptions = { const radioGroupStoryMeta: RadioGroupStoryMeta = { title: 'Radio Group', + showInTestingDeployment: true, component: 'pie-radio-group', argTypes: { name: { diff --git a/apps/pie-storybook/stories/pie-radio.stories.ts b/apps/pie-storybook/stories/pie-radio.stories.ts index cbd84921fb..c05da6fbc9 100644 --- a/apps/pie-storybook/stories/pie-radio.stories.ts +++ b/apps/pie-storybook/stories/pie-radio.stories.ts @@ -24,6 +24,7 @@ const defaultArgs: RadioProps = { const radioStoryMeta: RadioStoryMeta = { title: 'Radio', + showInTestingDeployment: true, component: 'pie-radio', argTypes: { checked: { diff --git a/apps/pie-storybook/stories/pie-spinner.stories.ts b/apps/pie-storybook/stories/pie-spinner.stories.ts index 0fb531c24d..e4f806a0d3 100644 --- a/apps/pie-storybook/stories/pie-spinner.stories.ts +++ b/apps/pie-storybook/stories/pie-spinner.stories.ts @@ -20,6 +20,7 @@ const defaultArgs: SpinnerProps = { const spinnerStoryMeta: SpinnerStoryMeta = { title: 'Spinner', + showInTestingDeployment: true, component: 'pie-spinner', argTypes: { size: { diff --git a/apps/pie-storybook/stories/pie-switch.stories.ts b/apps/pie-storybook/stories/pie-switch.stories.ts index 40d1cc620a..dd9d712f12 100644 --- a/apps/pie-storybook/stories/pie-switch.stories.ts +++ b/apps/pie-storybook/stories/pie-switch.stories.ts @@ -23,6 +23,7 @@ const defaultArgs: SwitchProps = { const switchStoryMeta: SwitchStoryMeta = { title: 'Switch', + showInTestingDeployment: true, component: 'pie-switch', argTypes: { checked: { diff --git a/apps/pie-storybook/stories/pie-tag.stories.ts b/apps/pie-storybook/stories/pie-tag.stories.ts index 714566f564..1ab464d55c 100644 --- a/apps/pie-storybook/stories/pie-tag.stories.ts +++ b/apps/pie-storybook/stories/pie-tag.stories.ts @@ -26,6 +26,7 @@ const defaultArgs: TagProps = { const tagStoryMeta: TagStoryMeta = { title: 'Tag', + showInTestingDeployment: true, component: 'pie-tag', argTypes: { variant: { diff --git a/apps/pie-storybook/stories/pie-text-input.stories.ts b/apps/pie-storybook/stories/pie-text-input.stories.ts index 762e219101..88783b61a9 100644 --- a/apps/pie-storybook/stories/pie-text-input.stories.ts +++ b/apps/pie-storybook/stories/pie-text-input.stories.ts @@ -50,6 +50,7 @@ const trailingSlotOptions = { const textInputStoryMeta: TextInputStoryMeta = { title: 'Text Input', + showInTestingDeployment: true, component: 'pie-text-input', argTypes: { type: { diff --git a/apps/pie-storybook/stories/pie-textarea.stories.ts b/apps/pie-storybook/stories/pie-textarea.stories.ts index 922cbd575b..ded9de2bd0 100644 --- a/apps/pie-storybook/stories/pie-textarea.stories.ts +++ b/apps/pie-storybook/stories/pie-textarea.stories.ts @@ -20,6 +20,7 @@ const defaultArgs: TextareaProps = { ...defaultProps, name: 'testName' }; const textareaStoryMeta: TextareaStoryMeta = { title: 'Textarea', + showInTestingDeployment: true, component: 'pie-textarea', argTypes: { disabled: { diff --git a/apps/pie-storybook/stories/pie-toast.stories.ts b/apps/pie-storybook/stories/pie-toast.stories.ts index 41fb86531e..3002fd40bf 100644 --- a/apps/pie-storybook/stories/pie-toast.stories.ts +++ b/apps/pie-storybook/stories/pie-toast.stories.ts @@ -21,6 +21,7 @@ const defaultArgs: ToastProps = { const toastStoryMeta: ToastStoryMeta = { title: 'Toast', + showInTestingDeployment: true, component: 'pie-toast', argTypes: { isOpen: { From 09bb13fb49d79f8ab54a945fee57dc5940f939cf Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Fri, 29 Nov 2024 09:43:23 +0000 Subject: [PATCH 03/34] fix conflict --- apps/pie-storybook/package.json | 26 +- .../pie-storybook/stories/pie-chip.stories.ts | 22 +- apps/pie-storybook/utilities/index.ts | 67 +- yarn.lock | 814 ++++++++---------- 4 files changed, 435 insertions(+), 494 deletions(-) diff --git a/apps/pie-storybook/package.json b/apps/pie-storybook/package.json index 4e6ff8c71e..3a01215733 100644 --- a/apps/pie-storybook/package.json +++ b/apps/pie-storybook/package.json @@ -45,23 +45,23 @@ "devDependencies": { "@justeattakeaway/pie-icons-configs": "4.5.1", "@justeattakeaway/pie-monorepo-utils": "0.2.0", - "@storybook/addon-a11y": "8.3.0", - "@storybook/addon-designs": "8.0.3", - "@storybook/addon-essentials": "8.3.0", - "@storybook/addon-links": "8.3.0", - "@storybook/blocks": "8.3.0", - "@storybook/components": "8.3.0", - "@storybook/manager-api": "8.3.0", - "@storybook/preview-api": "8.3.0", - "@storybook/theming": "8.3.0", - "@storybook/types": "8.3.0", - "@storybook/web-components": "8.3.0", - "@storybook/web-components-vite": "8.3.0", + "@storybook/addon-a11y": "8.4.0", + "@storybook/addon-designs": "8.0.4", + "@storybook/addon-essentials": "8.4.0", + "@storybook/addon-links": "8.4.0", + "@storybook/blocks": "8.4.0", + "@storybook/components": "8.4.0", + "@storybook/manager-api": "8.4.0", + "@storybook/preview-api": "8.4.0", + "@storybook/theming": "8.4.0", + "@storybook/types": "8.4.0", + "@storybook/web-components": "8.4.0", + "@storybook/web-components-vite": "8.4.0", "@types/dompurify": "3.0.5", "react": "18.3.1", "react-dom": "18.3.1", "serve": "14.2.0", - "storybook": "8.3.0", + "storybook": "8.4.0", "storybook-dark-mode": "4.0.2" }, "volta": { diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index a7ffa0c7d1..f39c44ba45 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -8,7 +8,7 @@ import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justea import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js'; import { type SlottedComponentProps } from '../types'; -import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; +import { createStory, createVariantStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type ChipProps = SlottedComponentProps & { showIcon: boolean }; type ChipStoryMeta = ExtendedMeta; @@ -118,8 +118,20 @@ const Template: TemplateFunction = ({ ${sanitizeAndRenderHTML(slot)} `; -const createCardStory = createStory(Template, defaultArgs); +const createChipStory = createStory(Template, defaultArgs); -export const Default = createCardStory(); -export const Outline = createCardStory({ variant: 'outline' }); -export const Ghost = createCardStory({ variant: 'ghost' }); +export const Default = createChipStory(); +export const Outline = createChipStory({ variant: 'outline' }); +export const Ghost = createChipStory({ variant: 'ghost' }); + +// Define the prop options for the matrix +const propOptions = { + variant: variants, + disabled: [true, false], + isSelected: [true, false], + isLoading: [true, false], + isDismissible: [true, false], + showIcon: [true, false] +}; + + export const AllPropVariations = createVariantStory(Template, defaultArgs, propOptions, 'Hello world'); \ No newline at end of file diff --git a/apps/pie-storybook/utilities/index.ts b/apps/pie-storybook/utilities/index.ts index e535a868d2..648003baed 100644 --- a/apps/pie-storybook/utilities/index.ts +++ b/apps/pie-storybook/utilities/index.ts @@ -1,4 +1,4 @@ -import { type TemplateResult } from 'lit'; +import { html, type TemplateResult } from 'lit'; import DOMPurify from 'dompurify'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { type StoryOptions } from '../types/StoryOptions'; @@ -34,6 +34,7 @@ export type TemplateFunction = (props: T) => TemplateResult; export const createStory = (templateFunc: TemplateFunction, defaultArgs: T) => ( propOverrides?: Partial, storyOpts?: StoryOptions, + tags: ['foo'], ) => ({ render: (args: T) => templateFunc(args), args: { @@ -60,3 +61,67 @@ export const createStory = (templateFunc: TemplateFunction, defaultArgs: T * @returns {import('lit/directives/unsafe-html.js').UnsafeHTMLDirective} A Lit directive that can be used in a Lit template to render the sanitized content. */ export const sanitizeAndRenderHTML = (slot: string) => unsafeHTML(DOMPurify.sanitize(slot)); + +/** + * Creates a story that renders all combinations of given prop options for a Lit web component. + * + * @template T The type representing the properties of the Lit web component. + * + * @param {TemplateFunction} template - The function responsible for rendering the Lit web component. + * @param {T} defaultArgs - A set of default property values to be used for each story. + * @param {Record} propOptions - An object defining the possible values for each prop. + * @param {string} slotContent - The content to be placed within the component's slot. + * + * @returns {Function} Returns a function that renders all combinations of the given prop options. + */ +export const createVariantStory = ( + template: TemplateFunction, + defaultArgs: T, + propOptions: Record, + slotContent: string +) => { + const generateCombinations = (options: Record): T[] => { + const keys = Object.keys(options) as (keyof T)[]; + const combinations: T[] = []; + + const buildCombination = (index: number, currentCombination: Partial) => { + if (index === keys.length) { + combinations.push(currentCombination as T); + return; + } + + const key = keys[index]; + const values = options[key]; + + for (const value of values) { + buildCombination(index + 1, { ...currentCombination, [key]: value }); + } + }; + + buildCombination(0, {}); + return combinations; + }; + + const propCombinations = generateCombinations(propOptions); + + return () => html` +
+ ${propCombinations.map( + (props) => html` +
+
+ ${Object.entries(props as Record).map( + ([key, value]) => html` +
${key}: ${JSON.stringify(value)}
+ ` + )} +
+
+ ${template({ ...props, slot: slotContent })} +
+
+ ` + )} +
+ `; +}; diff --git a/yarn.lock b/yarn.lock index ece1109852..d20703edbe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3784,9 +3784,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/aix-ppc64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/aix-ppc64@npm:0.23.1" +"@esbuild/aix-ppc64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/aix-ppc64@npm:0.24.0" conditions: os=aix & cpu=ppc64 languageName: node linkType: hard @@ -3812,9 +3812,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-arm64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/android-arm64@npm:0.23.1" +"@esbuild/android-arm64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/android-arm64@npm:0.24.0" conditions: os=android & cpu=arm64 languageName: node linkType: hard @@ -3840,9 +3840,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-arm@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/android-arm@npm:0.23.1" +"@esbuild/android-arm@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/android-arm@npm:0.24.0" conditions: os=android & cpu=arm languageName: node linkType: hard @@ -3868,9 +3868,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/android-x64@npm:0.23.1" +"@esbuild/android-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/android-x64@npm:0.24.0" conditions: os=android & cpu=x64 languageName: node linkType: hard @@ -3896,9 +3896,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/darwin-arm64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/darwin-arm64@npm:0.23.1" +"@esbuild/darwin-arm64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/darwin-arm64@npm:0.24.0" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard @@ -3924,9 +3924,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/darwin-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/darwin-x64@npm:0.23.1" +"@esbuild/darwin-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/darwin-x64@npm:0.24.0" conditions: os=darwin & cpu=x64 languageName: node linkType: hard @@ -3952,9 +3952,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/freebsd-arm64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/freebsd-arm64@npm:0.23.1" +"@esbuild/freebsd-arm64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/freebsd-arm64@npm:0.24.0" conditions: os=freebsd & cpu=arm64 languageName: node linkType: hard @@ -3980,9 +3980,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/freebsd-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/freebsd-x64@npm:0.23.1" +"@esbuild/freebsd-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/freebsd-x64@npm:0.24.0" conditions: os=freebsd & cpu=x64 languageName: node linkType: hard @@ -4008,9 +4008,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-arm64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-arm64@npm:0.23.1" +"@esbuild/linux-arm64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-arm64@npm:0.24.0" conditions: os=linux & cpu=arm64 languageName: node linkType: hard @@ -4036,9 +4036,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-arm@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-arm@npm:0.23.1" +"@esbuild/linux-arm@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-arm@npm:0.24.0" conditions: os=linux & cpu=arm languageName: node linkType: hard @@ -4064,9 +4064,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-ia32@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-ia32@npm:0.23.1" +"@esbuild/linux-ia32@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-ia32@npm:0.24.0" conditions: os=linux & cpu=ia32 languageName: node linkType: hard @@ -4092,9 +4092,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-loong64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-loong64@npm:0.23.1" +"@esbuild/linux-loong64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-loong64@npm:0.24.0" conditions: os=linux & cpu=loong64 languageName: node linkType: hard @@ -4120,9 +4120,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-mips64el@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-mips64el@npm:0.23.1" +"@esbuild/linux-mips64el@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-mips64el@npm:0.24.0" conditions: os=linux & cpu=mips64el languageName: node linkType: hard @@ -4148,9 +4148,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-ppc64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-ppc64@npm:0.23.1" +"@esbuild/linux-ppc64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-ppc64@npm:0.24.0" conditions: os=linux & cpu=ppc64 languageName: node linkType: hard @@ -4176,9 +4176,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-riscv64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-riscv64@npm:0.23.1" +"@esbuild/linux-riscv64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-riscv64@npm:0.24.0" conditions: os=linux & cpu=riscv64 languageName: node linkType: hard @@ -4204,9 +4204,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-s390x@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-s390x@npm:0.23.1" +"@esbuild/linux-s390x@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-s390x@npm:0.24.0" conditions: os=linux & cpu=s390x languageName: node linkType: hard @@ -4232,9 +4232,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/linux-x64@npm:0.23.1" +"@esbuild/linux-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/linux-x64@npm:0.24.0" conditions: os=linux & cpu=x64 languageName: node linkType: hard @@ -4260,16 +4260,16 @@ __metadata: languageName: node linkType: hard -"@esbuild/netbsd-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/netbsd-x64@npm:0.23.1" +"@esbuild/netbsd-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/netbsd-x64@npm:0.24.0" conditions: os=netbsd & cpu=x64 languageName: node linkType: hard -"@esbuild/openbsd-arm64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/openbsd-arm64@npm:0.23.1" +"@esbuild/openbsd-arm64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/openbsd-arm64@npm:0.24.0" conditions: os=openbsd & cpu=arm64 languageName: node linkType: hard @@ -4295,9 +4295,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/openbsd-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/openbsd-x64@npm:0.23.1" +"@esbuild/openbsd-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/openbsd-x64@npm:0.24.0" conditions: os=openbsd & cpu=x64 languageName: node linkType: hard @@ -4323,9 +4323,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/sunos-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/sunos-x64@npm:0.23.1" +"@esbuild/sunos-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/sunos-x64@npm:0.24.0" conditions: os=sunos & cpu=x64 languageName: node linkType: hard @@ -4351,9 +4351,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-arm64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/win32-arm64@npm:0.23.1" +"@esbuild/win32-arm64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/win32-arm64@npm:0.24.0" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard @@ -4379,9 +4379,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-ia32@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/win32-ia32@npm:0.23.1" +"@esbuild/win32-ia32@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/win32-ia32@npm:0.24.0" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard @@ -4407,9 +4407,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-x64@npm:0.23.1": - version: 0.23.1 - resolution: "@esbuild/win32-x64@npm:0.23.1" +"@esbuild/win32-x64@npm:0.24.0": + version: 0.24.0 + resolution: "@esbuild/win32-x64@npm:0.24.0" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -6890,21 +6890,21 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-a11y@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/addon-a11y@npm:8.3.0" +"@storybook/addon-a11y@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/addon-a11y@npm:8.4.0" dependencies: - "@storybook/addon-highlight": 8.3.0 + "@storybook/addon-highlight": 8.4.0 axe-core: ^4.2.0 peerDependencies: - storybook: ^8.3.0 - checksum: 440e990581c4c4e590b0d810b1652dc32674464a584c59f53a9d443efd6d3bce30c61700591565a5d6b5b7251b5a3e64d8590bbb0360c08f58a939af5189b564 + storybook: ^8.4.0 + checksum: b8cf2261abd86a4ec729044d2474a7a23a2e07f9944097801c1fff6c2ee2a818433972039911b7608e43cf2fb84ef03814af374a0267ce17a92febef04ef3985 languageName: node linkType: hard -"@storybook/addon-actions@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/addon-actions@npm:8.3.0" +"@storybook/addon-actions@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/addon-actions@npm:8.4.0" dependencies: "@storybook/global": ^5.0.0 "@types/uuid": ^9.0.1 @@ -6912,47 +6912,46 @@ __metadata: polished: ^4.2.2 uuid: ^9.0.0 peerDependencies: - storybook: ^8.3.0 - checksum: 29b76d7783110ee006d01d2d33d456098b049203d9ea0c9a26927285e408c99296e763b081fb6092f5e1b15f7a6bf76ca8b49431d37a663510f64d73129b74e1 + storybook: ^8.4.0 + checksum: 92756db41463d248058e90d7a8c3eba826a95bc88fb76223d4dd2510e1441fa05a56acc0b9350a1cf2756f9884d7bd22fdf53638374d708aedc22dce2e32a41c languageName: node linkType: hard -"@storybook/addon-backgrounds@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/addon-backgrounds@npm:8.3.0" +"@storybook/addon-backgrounds@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/addon-backgrounds@npm:8.4.0" dependencies: "@storybook/global": ^5.0.0 memoizerific: ^1.11.3 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.3.0 - checksum: 061b8c7a10ec37e6e656f0aa828f7ef5e7eb7a2e4230b836e49edde783bd42378bbc4dcd66b98690807dbf31ec6ffc20b659b3aaead58c676be60bf9289fdbdd + storybook: ^8.4.0 + checksum: d0ada9c8891c1f7a38b45183ffb897de340212df372d67585a296e368d54f8fb8a0a74840f151b7cde4a55c4902ec01ecef6e036933681bee6ef901d6b3bc9e6 languageName: node linkType: hard -"@storybook/addon-controls@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/addon-controls@npm:8.3.0" +"@storybook/addon-controls@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/addon-controls@npm:8.4.0" dependencies: "@storybook/global": ^5.0.0 dequal: ^2.0.2 - lodash: ^4.17.21 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.3.0 - checksum: 63a6e398987d2055c46cab40fd551eca47ca6db32ff6496e7e97a6bf1579e18930354877211cf9da7b36c1fd2a4d270433d74adb8c834d89a0ad9f43d48ad975 + storybook: ^8.4.0 + checksum: 71546271587f00782a9a5a5386fefdf5463052a687318a4b0220dd66a80d008acb1ddc2544a8be880d84cf59f4bc1c56490c7cd90856571ececd944ea565ad7c languageName: node linkType: hard -"@storybook/addon-designs@npm:8.0.3": - version: 8.0.3 - resolution: "@storybook/addon-designs@npm:8.0.3" +"@storybook/addon-designs@npm:8.0.4": + version: 8.0.4 + resolution: "@storybook/addon-designs@npm:8.0.4" dependencies: "@figspec/react": ^1.0.0 peerDependencies: - "@storybook/blocks": ^8.0.0 - "@storybook/components": ^8.0.0 - "@storybook/theming": ^8.0.0 + "@storybook/blocks": ^8.0.0 || ^8.1.0-0 || ^8.2.0-0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + "@storybook/components": ^8.0.0 || ^8.1.0-0 || ^8.2.0-0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + "@storybook/theming": ^8.0.0 || ^8.1.0-0 || ^8.2.0-0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 peerDependenciesMeta: @@ -6966,195 +6965,163 @@ __metadata: optional: true react-dom: optional: true - checksum: e255c0e008be12c6f0928b8a6b8e364da73e0e88848ee33c5875e04b6d49868d5a7dab28f5bb0f0b2514fc47c9ff8a36d562392cf998aa16a84a1b423b35196f + checksum: 530bbc5c1004ad9426449a1999495a07a81f28aadc01c82630da2fc0c8c3c178c61e2fb3af0f196ff3b65f85aa96299e92b33a2a1c832efd16e3e0463174008b languageName: node linkType: hard -"@storybook/addon-docs@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/addon-docs@npm:8.3.0" +"@storybook/addon-docs@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/addon-docs@npm:8.4.0" dependencies: "@mdx-js/react": ^3.0.0 - "@storybook/blocks": 8.3.0 - "@storybook/csf-plugin": 8.3.0 - "@storybook/global": ^5.0.0 - "@storybook/react-dom-shim": 8.3.0 - "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 - fs-extra: ^11.1.0 + "@storybook/blocks": 8.4.0 + "@storybook/csf-plugin": 8.4.0 + "@storybook/react-dom-shim": 8.4.0 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - rehype-external-links: ^3.0.0 - rehype-slug: ^6.0.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.3.0 - checksum: 3372f4a01260519e2c4f5868f319f3a7866d513b29edd0aa0bbf60be60ae1bf12edcf84781410928448eb9a32d8af803ee613ebfc660581a206dd8d37c247956 + storybook: ^8.4.0 + checksum: 699aaf44cc074b4ea52459d0e15c0d571640145c7ec8ebf9d8990be861700fbe4470a6a37ecda9db0476bf43ac27000e448be03ba77bd8c13214fe8a8cf6f289 languageName: node linkType: hard -"@storybook/addon-essentials@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/addon-essentials@npm:8.3.0" - dependencies: - "@storybook/addon-actions": 8.3.0 - "@storybook/addon-backgrounds": 8.3.0 - "@storybook/addon-controls": 8.3.0 - "@storybook/addon-docs": 8.3.0 - "@storybook/addon-highlight": 8.3.0 - "@storybook/addon-measure": 8.3.0 - "@storybook/addon-outline": 8.3.0 - "@storybook/addon-toolbars": 8.3.0 - "@storybook/addon-viewport": 8.3.0 +"@storybook/addon-essentials@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/addon-essentials@npm:8.4.0" + dependencies: + "@storybook/addon-actions": 8.4.0 + "@storybook/addon-backgrounds": 8.4.0 + "@storybook/addon-controls": 8.4.0 + "@storybook/addon-docs": 8.4.0 + "@storybook/addon-highlight": 8.4.0 + "@storybook/addon-measure": 8.4.0 + "@storybook/addon-outline": 8.4.0 + "@storybook/addon-toolbars": 8.4.0 + "@storybook/addon-viewport": 8.4.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.3.0 - checksum: ad075f6455349c7444a311d6e36142c2ed080d4868851b523d6faf0b1bee73e77b1d500da28ab6a20df08d90a7bc9e452edcdc794446ce494e47dcb22c8d654b + storybook: ^8.4.0 + checksum: c2ac3f92a1943986892ef4cbdcd7b3b7f181f93d5463dd564bb827adc4cd7b7a3390c4a049b5873f1aa185f6a25a4a9eaa20621ceff3dcdd48330786306d6155 languageName: node linkType: hard -"@storybook/addon-highlight@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/addon-highlight@npm:8.3.0" +"@storybook/addon-highlight@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/addon-highlight@npm:8.4.0" dependencies: "@storybook/global": ^5.0.0 peerDependencies: - storybook: ^8.3.0 - checksum: d96d8d7386a5582c1eab2e0ef4ab8ecb168e1b6f7486327ecd50832d777ea53e89a2b84b5e25946b6822196abf453b619f1cff64c7373781132a66414ed9a528 + storybook: ^8.4.0 + checksum: 5b8bc476442d46b224c55df8392c8aca0f98fe0bfa589430adaab02ad16ec8ddb1132191365a805b478720f4b39ba605f6aef95e6a6b601224e63a6c122217ab languageName: node linkType: hard -"@storybook/addon-links@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/addon-links@npm:8.3.0" +"@storybook/addon-links@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/addon-links@npm:8.4.0" dependencies: "@storybook/csf": ^0.1.11 "@storybook/global": ^5.0.0 ts-dedent: ^2.0.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.3.0 + storybook: ^8.4.0 peerDependenciesMeta: react: optional: true - checksum: 3f8c54e0166c64d3e2d6b267fef043cd588ae08c8271e31da1e39a731a94990b40859b1489b8e8c225cfdca6ef9b0f61a6c8608e67af809f0db23111bd65a5a1 + checksum: 7598424f58d39c1a7daa0579160ad3c3b204267b4836237684d24da4434971d51149da8d319eb91e29d9879fd692ce462d61eebc449653fa3dc1faef0567fcd5 languageName: node linkType: hard -"@storybook/addon-measure@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/addon-measure@npm:8.3.0" +"@storybook/addon-measure@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/addon-measure@npm:8.4.0" dependencies: "@storybook/global": ^5.0.0 tiny-invariant: ^1.3.1 peerDependencies: - storybook: ^8.3.0 - checksum: 42ce4c248820169d5033e985a45d0a0887446c5e79fab0670e18729890de2d67eb8f438394ea248fe065f5dfbd9983dac80af8d534fcf0d7e6a8ccfae5eb8d49 + storybook: ^8.4.0 + checksum: 80277f423d7b1c32aa66e6d1a21eae243f0077a4bd8ba60fb70ab995c80bebe82448980adc0d80c5bc4082c50f8a60124c48ecb704540279b88f59dc9ce1057c languageName: node linkType: hard -"@storybook/addon-outline@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/addon-outline@npm:8.3.0" +"@storybook/addon-outline@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/addon-outline@npm:8.4.0" dependencies: "@storybook/global": ^5.0.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.3.0 - checksum: 8085baf32d7da28418e350c5bb0cabca5c825665651d53790af0a78de4e52370456d6fdb80959c12e8547eb5d775a508a1cdce35967d9fe5d5ac632d975b9320 + storybook: ^8.4.0 + checksum: 3342c23bfe6e1138b03961e63a3606db6d562b6651d0bc241cca14c456cc08aca42cbbbb752c489f1b1674dc9987b976666e8cdf24f3bf5ab2acfaf8e3ea81a6 languageName: node linkType: hard -"@storybook/addon-toolbars@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/addon-toolbars@npm:8.3.0" +"@storybook/addon-toolbars@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/addon-toolbars@npm:8.4.0" peerDependencies: - storybook: ^8.3.0 - checksum: 31f8dc2a55b6c420e7ec9e4cf066cec4da022bb0fc26f578eb5fb38dd6080b3d934ff9daac82fe12c6c947bb68eb9ef824159bd5e948b9682b1f5c1847dc63b4 + storybook: ^8.4.0 + checksum: 2342a93fde277237fbaeed70142a457e607069056ade625b4409ceeb97d697361a92ee5a2af0417a5249e97d288ddf4f7986e0315731faf82367149e68655766 languageName: node linkType: hard -"@storybook/addon-viewport@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/addon-viewport@npm:8.3.0" +"@storybook/addon-viewport@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/addon-viewport@npm:8.4.0" dependencies: memoizerific: ^1.11.3 peerDependencies: - storybook: ^8.3.0 - checksum: 1f560aeb0d12240f653a81de0a4e19ad3d3ff895e61339cd641924b7ca57587c6ec3472f4bdf33168127635b75ecae0a78ea62411f0225d62e6998b86db42d9f + storybook: ^8.4.0 + checksum: 9852e9e804335d4b90c83d6930eb0c6127cb516bbec5c07629850d2cf433daca64457ed91aa5e8e122315f543491851bfcfed9fc7869b05ee8842b6946c12cff languageName: node linkType: hard -"@storybook/blocks@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/blocks@npm:8.3.0" +"@storybook/blocks@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/blocks@npm:8.4.0" dependencies: "@storybook/csf": ^0.1.11 - "@storybook/global": ^5.0.0 - "@storybook/icons": ^1.2.10 - "@types/lodash": ^4.14.167 - color-convert: ^2.0.1 - dequal: ^2.0.2 - lodash: ^4.17.21 - markdown-to-jsx: ^7.4.5 - memoizerific: ^1.11.3 - polished: ^4.2.2 - react-colorful: ^5.1.2 - telejson: ^7.2.0 + "@storybook/icons": ^1.2.12 ts-dedent: ^2.0.0 - util-deprecate: ^1.0.2 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.3.0 + storybook: ^8.4.0 peerDependenciesMeta: react: optional: true react-dom: optional: true - checksum: 5beccdfaa1e39a4f6e0b33a1f3ccb7aa102507be5360678e49b336528f9e8bb4660fbacb82ae846a466a9bd282c16e838438d5ff0ceb6c10e4f9c8b11cef96ac + checksum: e3eae4f306215388ef7ec3d927b60aa1285d77771fa1c2d8a4ce75b75494a55876508538fd496e7ee7bbd77616898400aa26aefef09ab7bd4701e18e9f5584ef languageName: node linkType: hard -"@storybook/builder-vite@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/builder-vite@npm:8.3.0" +"@storybook/builder-vite@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/builder-vite@npm:8.4.0" dependencies: - "@storybook/csf-plugin": 8.3.0 - "@types/find-cache-dir": ^3.2.1 + "@storybook/csf-plugin": 8.4.0 browser-assert: ^1.2.1 - es-module-lexer: ^1.5.0 - express: ^4.19.2 - find-cache-dir: ^3.0.0 - fs-extra: ^11.1.0 - magic-string: ^0.30.0 ts-dedent: ^2.0.0 peerDependencies: - "@preact/preset-vite": "*" - storybook: ^8.3.0 - typescript: ">= 4.3.x" + storybook: ^8.4.0 vite: ^4.0.0 || ^5.0.0 - vite-plugin-glimmerx: "*" - peerDependenciesMeta: - "@preact/preset-vite": - optional: true - typescript: - optional: true - vite-plugin-glimmerx: - optional: true - checksum: 68ab51b10b29ad11f58e2dc832f45346688c8369bea6fa392d295c6276e2d13cabffcd3452ee3905c19a501a46a8a357f23d40706677c0da36f84db9d591db8f + checksum: c815656077286879c5c4fe38813a14cc35e8961607ef8c1e1b7c9abad6176e951a8c3804b2d9893748edbc701c86db923719dd76f4b298e0be8478332c5676d1 languageName: node linkType: hard -"@storybook/components@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/components@npm:8.3.0" +"@storybook/components@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/components@npm:8.4.0" peerDependencies: - storybook: ^8.3.0 - checksum: c53337007bbadb031685dcc8b4045f73b658fc4f4937812b1e25cc793209bfe8da4f10d88dd0aa28464fbbfea2e8007abca9d86f6a5b6ea03d06b653813889d2 + storybook: ^8.4.0 + checksum: 6b8c35d55b153ddce3b9021fc8050eb392776feec2f50ac67a3ed8f57a1d720e0f581190b26620282e1772df9d687c69bc5b39dc4d50402c619abd9a082a0191 languageName: node linkType: hard -"@storybook/components@npm:^8.0.0, @storybook/components@npm:^8.3.0": +"@storybook/components@npm:^8.0.0": version: 8.4.3 resolution: "@storybook/components@npm:8.4.3" peerDependencies: @@ -7163,6 +7130,15 @@ __metadata: languageName: node linkType: hard +"@storybook/components@npm:^8.4.0": + version: 8.4.5 + resolution: "@storybook/components@npm:8.4.5" + peerDependencies: + storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + checksum: dd14e0a2d40f6590fd92204f3b40d4437403b7be311fa797250bd71fe4b38ade78389d41d2617fa5e75cfa0e1538366ca1154149c0894433245c23cebc4dfc73 + languageName: node + linkType: hard + "@storybook/core-events@npm:^8.0.0": version: 8.4.3 resolution: "@storybook/core-events@npm:8.4.3" @@ -7172,33 +7148,38 @@ __metadata: languageName: node linkType: hard -"@storybook/core@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/core@npm:8.3.0" +"@storybook/core@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/core@npm:8.4.0" dependencies: "@storybook/csf": ^0.1.11 - "@types/express": ^4.17.21 + better-opn: ^3.0.2 browser-assert: ^1.2.1 - esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 + esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 esbuild-register: ^3.5.0 - express: ^4.19.2 + jsdoc-type-pratt-parser: ^4.0.0 process: ^0.11.10 recast: ^0.23.5 semver: ^7.6.2 util: ^0.12.5 ws: ^8.2.3 - checksum: 242d7d706d4d979c81ebd985bf0ea6067950a45102eca8e4fcb232dcaad6d83266d9691ec7cd5717f19138deae2adb5f56ee0783a72a1cd5797854ea856fffe7 + peerDependencies: + prettier: ^2 || ^3 + peerDependenciesMeta: + prettier: + optional: true + checksum: 03c32a595db1f7b816fc47d16991307a4ec1153f317413ab2425fd26a02ea81ce5231539dbe156f9de49056dd8a6d5a3a0d540050671d270696a52dddb92158d languageName: node linkType: hard -"@storybook/csf-plugin@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/csf-plugin@npm:8.3.0" +"@storybook/csf-plugin@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/csf-plugin@npm:8.4.0" dependencies: unplugin: ^1.3.1 peerDependencies: - storybook: ^8.3.0 - checksum: 91ebb22035b33fdd2a03cebec4553d68328357ae49f100d066da8fee0ef1471ec7aa45b3151b3ec552156229b51b5afeaa1fa7dba46e3ada49dd4c057f0425db + storybook: ^8.4.0 + checksum: 8d9b9491d8b8e7a96fa76522f0661f3af9a7ab610ab3eb1fed025ab66ca083e6433d36605c7d22ce2dac6469eb21a39f067e25d6ba9107d4d7bb979191d4b6a4 languageName: node linkType: hard @@ -7218,7 +7199,7 @@ __metadata: languageName: node linkType: hard -"@storybook/icons@npm:^1.2.10, @storybook/icons@npm:^1.2.5": +"@storybook/icons@npm:^1.2.12, @storybook/icons@npm:^1.2.5": version: 1.2.12 resolution: "@storybook/icons@npm:1.2.12" peerDependencies: @@ -7228,16 +7209,16 @@ __metadata: languageName: node linkType: hard -"@storybook/manager-api@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/manager-api@npm:8.3.0" +"@storybook/manager-api@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/manager-api@npm:8.4.0" peerDependencies: - storybook: ^8.3.0 - checksum: f44e8d428bf94a4d0e306fcc0d887cdd2564ee1b1dfd5a48392cee71be6ae3e065628d5ca44d9307b8b071f9929c4a9ac7a44d7035e52fb17cb94dd9b810a399 + storybook: ^8.4.0 + checksum: a5ae11f2997fb8d0c857e3049466f938b7f321a56c57f4794efc69023a9c7d0fe478d7ead95b91865d58041ecdf662fdc15e06358b22a113ffedd62545ec9926 languageName: node linkType: hard -"@storybook/manager-api@npm:^8.0.0, @storybook/manager-api@npm:^8.3.0": +"@storybook/manager-api@npm:^8.0.0": version: 8.4.3 resolution: "@storybook/manager-api@npm:8.4.3" peerDependencies: @@ -7246,45 +7227,54 @@ __metadata: languageName: node linkType: hard -"@storybook/preview-api@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/preview-api@npm:8.3.0" +"@storybook/manager-api@npm:^8.4.0": + version: 8.4.5 + resolution: "@storybook/manager-api@npm:8.4.5" + peerDependencies: + storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + checksum: f6bc0ef3703afceedb862b77f22e169a173525c6d0483ba4ae5d1daf5b19c8077b33ef3fd634571e3ded93b2d4bd4a9e182c23d4395d1bfe8fdb6c98bdcc119f + languageName: node + linkType: hard + +"@storybook/preview-api@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/preview-api@npm:8.4.0" peerDependencies: - storybook: ^8.3.0 - checksum: bce11261a585c4dd60ef4d0562b91d11bd1fa3b709dcd4b722df0bac0426964097eacbcaf0e5f6602886a9130b5d0732d743ba2edfd62b597b6f2020b0a427d2 + storybook: ^8.4.0 + checksum: a748992fdac8025b1ce70e516249ee5843b4c7acd1635a55ab2fcab2c5b4416d00fc501ba4f2fdbf177f3b870d32416f7cb423d79e6a8cbb42858d8537026d79 languageName: node linkType: hard -"@storybook/preview-api@npm:^8.3.0": - version: 8.4.3 - resolution: "@storybook/preview-api@npm:8.4.3" +"@storybook/preview-api@npm:^8.4.0": + version: 8.4.5 + resolution: "@storybook/preview-api@npm:8.4.5" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 4d3f1c544d088392763dc7c6df0aaf2d03d65eaf28a439f001eece22c8a514ba8cead48c44f5f839c2077166fc65618f8d3f3d8525f1b4381b34a79aafcb83da + checksum: 832bee373583fb55102459445ae7f3e8bca0ff80a4220aa656bf6baf8661e0c65184f080b1e10695f8fbb948fd8d48cc9728d19d1bc6993418251126380d4818 languageName: node linkType: hard -"@storybook/react-dom-shim@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/react-dom-shim@npm:8.3.0" +"@storybook/react-dom-shim@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/react-dom-shim@npm:8.4.0" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.3.0 - checksum: f826067e715734c6c5855a7898e19fcfa591f3b4f5390a6e5d19ecbbade42c74caf4aa0275d6694f4d253e4b981d571796937da3fbd4f1b9bf03fe8269af017a + storybook: ^8.4.0 + checksum: 07bcaecc6b38d133ddef96e5c9f045ac0c2083ef181ada66c9889c7494dcdc5807696b8526b794c01e798fb0b813664de70b401cd4421e8ac4dda09c847fbc56 languageName: node linkType: hard -"@storybook/theming@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/theming@npm:8.3.0" +"@storybook/theming@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/theming@npm:8.4.0" peerDependencies: - storybook: ^8.3.0 - checksum: a382b5cfe9c232f5bb3943cb034b7ec597f9966e908c868c6ee40f0f3f3797a09231f96a31810760c3a2efdb78c1464239650a88f068fa74ca367f666dd94420 + storybook: ^8.4.0 + checksum: 31512fae36853cbc2dd941a253db8fc4a9f8b1fbee29617d7956305652471088943a258c7c565bfa5bc26409844478fe9d11d06141c8e845b854d8580ee917a7 languageName: node linkType: hard -"@storybook/theming@npm:^8.0.0, @storybook/theming@npm:^8.3.0": +"@storybook/theming@npm:^8.0.0": version: 8.4.3 resolution: "@storybook/theming@npm:8.4.3" peerDependencies: @@ -7293,43 +7283,52 @@ __metadata: languageName: node linkType: hard -"@storybook/types@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/types@npm:8.3.0" +"@storybook/theming@npm:^8.4.0": + version: 8.4.5 + resolution: "@storybook/theming@npm:8.4.5" peerDependencies: - storybook: ^8.3.0 - checksum: 54b9aa2ca7fdca4c401d51f6d0223db8252a83fe71c9e8bd29afa097b0211ee1443719c3d548e454601ee17f2d2c434778e752d5cc6a88168cc216345276ce7e + storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + checksum: 0eefd3a3bea58e557f1e303270910046f05aa971ceba6ca6c1cd706c25b537243be6663dba5b2b3aa2edb7fc40279e93403131d76eae7da26da70f8a1c8d1c96 languageName: node linkType: hard -"@storybook/web-components-vite@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/web-components-vite@npm:8.3.0" +"@storybook/types@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/types@npm:8.4.0" + peerDependencies: + storybook: ^8.4.0 + checksum: 6334a37474f20646d12face5ff6e0f4deb04b2f33e3e18536a861088009b6513d9d28713ae07e15cdebfb8378d8643f8155ad5b2fad61e49c5d82caa7b23720b + languageName: node + linkType: hard + +"@storybook/web-components-vite@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/web-components-vite@npm:8.4.0" dependencies: - "@storybook/builder-vite": 8.3.0 - "@storybook/web-components": 8.3.0 + "@storybook/builder-vite": 8.4.0 + "@storybook/web-components": 8.4.0 magic-string: ^0.30.0 peerDependencies: - storybook: ^8.3.0 - checksum: cf502836e389865a899e24331d945b269c3813349f61c27d265e8dd7899abdfbb18c450070d6d179a2340efa24c9d73af270460d7978e19a7936d585798e3a9d + storybook: ^8.4.0 + checksum: 4b69c7ff8035b48d35b8e4d9ae5b918ed9a6bbb540695e8df684a51bca06e8471d285c513e610afcee541e16ef464462f040385cbc60a8630b9b2116564b719e languageName: node linkType: hard -"@storybook/web-components@npm:8.3.0": - version: 8.3.0 - resolution: "@storybook/web-components@npm:8.3.0" +"@storybook/web-components@npm:8.4.0": + version: 8.4.0 + resolution: "@storybook/web-components@npm:8.4.0" dependencies: - "@storybook/components": ^8.3.0 + "@storybook/components": ^8.4.0 "@storybook/global": ^5.0.0 - "@storybook/manager-api": ^8.3.0 - "@storybook/preview-api": ^8.3.0 - "@storybook/theming": ^8.3.0 + "@storybook/manager-api": ^8.4.0 + "@storybook/preview-api": ^8.4.0 + "@storybook/theming": ^8.4.0 tiny-invariant: ^1.3.1 ts-dedent: ^2.0.0 peerDependencies: lit: ^2.0.0 || ^3.0.0 - storybook: ^8.3.0 - checksum: ece9b71c8fc4601b65cb1e384d9ae8498706951c5afe63313f8949f36221db189e5fb5e51eadd2c5ed8a0336ebe3cc0989fb866437319bb33d28adbc4753651a + storybook: ^8.4.0 + checksum: 078f23d6d4fb534658db331c5ff5c3158f3871f1e023a15d2bf304fe306b255fd2bb2a635f9b58f137fe2b53dcb3d75d180eb90873557e1d128b4c3eedcd976a languageName: node linkType: hard @@ -7860,7 +7859,7 @@ __metadata: languageName: node linkType: hard -"@types/express@npm:^4.17.13, @types/express@npm:^4.17.21": +"@types/express@npm:^4.17.13": version: 4.17.21 resolution: "@types/express@npm:4.17.21" dependencies: @@ -7872,13 +7871,6 @@ __metadata: languageName: node linkType: hard -"@types/find-cache-dir@npm:^3.2.1": - version: 3.2.1 - resolution: "@types/find-cache-dir@npm:3.2.1" - checksum: bf5c4e96da40247cd9e6327f54dfccda961a0fb2d70e3c71bd05def94de4c2e6fb310fe8ecb0f04ecf5dbc52214e184b55a2337b0f87250d4ae1e2e7d58321e4 - languageName: node - linkType: hard - "@types/fs-extra@npm:^8.0.1": version: 8.1.5 resolution: "@types/fs-extra@npm:8.1.5" @@ -7898,15 +7890,6 @@ __metadata: languageName: node linkType: hard -"@types/hast@npm:^3.0.0": - version: 3.0.4 - resolution: "@types/hast@npm:3.0.4" - dependencies: - "@types/unist": "*" - checksum: 7a973e8d16fcdf3936090fa2280f408fb2b6a4f13b42edeb5fbd614efe042b82eac68e298e556d50f6b4ad585a3a93c353e9c826feccdc77af59de8dd400d044 - languageName: node - linkType: hard - "@types/html-minifier-terser@npm:^5.0.0": version: 5.1.2 resolution: "@types/html-minifier-terser@npm:5.1.2" @@ -8050,7 +8033,7 @@ __metadata: languageName: node linkType: hard -"@types/lodash@npm:*, @types/lodash@npm:^4.14.167": +"@types/lodash@npm:*": version: 4.17.13 resolution: "@types/lodash@npm:4.17.13" checksum: d0bf8fbd950be71946e0076b30fd40d492293baea75f05931b6b5b906fd62583708c6229abdb95b30205ad24ce1ed2f48bc9d419364f682320edd03405cc0c7e @@ -8255,7 +8238,7 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:*, @types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0": +"@types/react@npm:*": version: 18.3.12 resolution: "@types/react@npm:18.3.12" dependencies: @@ -8418,13 +8401,6 @@ __metadata: languageName: node linkType: hard -"@types/unist@npm:*, @types/unist@npm:^3.0.0": - version: 3.0.3 - resolution: "@types/unist@npm:3.0.3" - checksum: 96e6453da9e075aaef1dc22482463898198acdc1eeb99b465e65e34303e2ec1e3b1ed4469a9118275ec284dc98019f63c3f5d49422f0e4ac707e5ab90fb3b71a - languageName: node - linkType: hard - "@types/uuid@npm:^9.0.1": version: 9.0.8 resolution: "@types/uuid@npm:9.0.8" @@ -8726,7 +8702,7 @@ __metadata: languageName: node linkType: hard -"@ungap/structured-clone@npm:^1.0.0, @ungap/structured-clone@npm:^1.2.0": +"@ungap/structured-clone@npm:^1.2.0": version: 1.2.0 resolution: "@ungap/structured-clone@npm:1.2.0" checksum: 4f656b7b4672f2ce6e272f2427d8b0824ed11546a601d8d5412b9d7704e83db38a8d9f402ecdf2b9063fc164af842ad0ec4a55819f621ed7e7ea4d1efcc74524 @@ -11161,6 +11137,15 @@ __metadata: languageName: node linkType: hard +"better-opn@npm:^3.0.2": + version: 3.0.2 + resolution: "better-opn@npm:3.0.2" + dependencies: + open: ^8.0.4 + checksum: 1471552fa7f733561e7f49e812be074b421153006ca744de985fb6d38939807959fc5fe9cb819cf09f864782e294704fd3b31711ea14c115baf3330a2f1135de + languageName: node + linkType: hard + "better-path-resolve@npm:1.0.0": version: 1.0.0 resolution: "better-path-resolve@npm:1.0.0" @@ -14877,7 +14862,7 @@ __metadata: languageName: node linkType: hard -"es-module-lexer@npm:^1.0.0, es-module-lexer@npm:^1.2.1, es-module-lexer@npm:^1.5.0": +"es-module-lexer@npm:^1.0.0, es-module-lexer@npm:^1.2.1": version: 1.5.4 resolution: "es-module-lexer@npm:1.5.4" checksum: a0cf04fb92d052647ac7d818d1913b98d3d3d0f5b9d88f0eafb993436e4c3e2c958599db68839d57f2dfa281fdf0f60e18d448eb78fc292c33c0f25635b6854f @@ -15021,34 +15006,34 @@ __metadata: languageName: node linkType: hard -"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0": - version: 0.23.1 - resolution: "esbuild@npm:0.23.1" - dependencies: - "@esbuild/aix-ppc64": 0.23.1 - "@esbuild/android-arm": 0.23.1 - "@esbuild/android-arm64": 0.23.1 - "@esbuild/android-x64": 0.23.1 - "@esbuild/darwin-arm64": 0.23.1 - "@esbuild/darwin-x64": 0.23.1 - "@esbuild/freebsd-arm64": 0.23.1 - "@esbuild/freebsd-x64": 0.23.1 - "@esbuild/linux-arm": 0.23.1 - "@esbuild/linux-arm64": 0.23.1 - "@esbuild/linux-ia32": 0.23.1 - "@esbuild/linux-loong64": 0.23.1 - "@esbuild/linux-mips64el": 0.23.1 - "@esbuild/linux-ppc64": 0.23.1 - "@esbuild/linux-riscv64": 0.23.1 - "@esbuild/linux-s390x": 0.23.1 - "@esbuild/linux-x64": 0.23.1 - "@esbuild/netbsd-x64": 0.23.1 - "@esbuild/openbsd-arm64": 0.23.1 - "@esbuild/openbsd-x64": 0.23.1 - "@esbuild/sunos-x64": 0.23.1 - "@esbuild/win32-arm64": 0.23.1 - "@esbuild/win32-ia32": 0.23.1 - "@esbuild/win32-x64": 0.23.1 +"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0": + version: 0.24.0 + resolution: "esbuild@npm:0.24.0" + dependencies: + "@esbuild/aix-ppc64": 0.24.0 + "@esbuild/android-arm": 0.24.0 + "@esbuild/android-arm64": 0.24.0 + "@esbuild/android-x64": 0.24.0 + "@esbuild/darwin-arm64": 0.24.0 + "@esbuild/darwin-x64": 0.24.0 + "@esbuild/freebsd-arm64": 0.24.0 + "@esbuild/freebsd-x64": 0.24.0 + "@esbuild/linux-arm": 0.24.0 + "@esbuild/linux-arm64": 0.24.0 + "@esbuild/linux-ia32": 0.24.0 + "@esbuild/linux-loong64": 0.24.0 + "@esbuild/linux-mips64el": 0.24.0 + "@esbuild/linux-ppc64": 0.24.0 + "@esbuild/linux-riscv64": 0.24.0 + "@esbuild/linux-s390x": 0.24.0 + "@esbuild/linux-x64": 0.24.0 + "@esbuild/netbsd-x64": 0.24.0 + "@esbuild/openbsd-arm64": 0.24.0 + "@esbuild/openbsd-x64": 0.24.0 + "@esbuild/sunos-x64": 0.24.0 + "@esbuild/win32-arm64": 0.24.0 + "@esbuild/win32-ia32": 0.24.0 + "@esbuild/win32-x64": 0.24.0 dependenciesMeta: "@esbuild/aix-ppc64": optional: true @@ -15100,7 +15085,7 @@ __metadata: optional: true bin: esbuild: bin/esbuild - checksum: 0413c3b9257327fb598427688b7186ea335bf1693746fe5713cc93c95854d6388b8ed4ad643fddf5b5ace093f7dcd9038dd58e087bf2da1f04dfb4c5571660af + checksum: dd386d92a05c7eb03078480522cdd8b40c434777b5f08487c27971d30933ecaae3f08bd221958dd8f9c66214915cdc85f844283ca9bdbf8ee703d889ae526edd languageName: node linkType: hard @@ -15744,7 +15729,7 @@ __metadata: languageName: node linkType: hard -"express@npm:^4.17.3, express@npm:^4.19.2": +"express@npm:^4.17.3": version: 4.21.1 resolution: "express@npm:4.21.1" dependencies: @@ -16367,7 +16352,7 @@ __metadata: languageName: node linkType: hard -"fs-extra@npm:11.2.0, fs-extra@npm:^11.0.0, fs-extra@npm:^11.1.0": +"fs-extra@npm:11.2.0, fs-extra@npm:^11.0.0": version: 11.2.0 resolution: "fs-extra@npm:11.2.0" dependencies: @@ -16739,13 +16724,6 @@ __metadata: languageName: node linkType: hard -"github-slugger@npm:^2.0.0": - version: 2.0.0 - resolution: "github-slugger@npm:2.0.0" - checksum: 250375cde2058f21454872c2c79f72c4637340c30c51ff158ca4ec71cbc478f33d54477d787a662f9207aeb095a2060f155bc01f15329ba8a5fb6698e0fc81f8 - languageName: node - linkType: hard - "github-username@npm:^6.0.0": version: 6.0.0 resolution: "github-username@npm:6.0.0" @@ -17347,33 +17325,6 @@ __metadata: languageName: node linkType: hard -"hast-util-heading-rank@npm:^3.0.0": - version: 3.0.0 - resolution: "hast-util-heading-rank@npm:3.0.0" - dependencies: - "@types/hast": ^3.0.0 - checksum: e5ce4ec9e8017b24ab72702fa0dd401ec6eaf32574120d71c2aa4e8e0f43829dba2e291f49d305a47e8d65b82a9c5adad7985385dc5bc8370f8cec7c8f9313d3 - languageName: node - linkType: hard - -"hast-util-is-element@npm:^3.0.0": - version: 3.0.0 - resolution: "hast-util-is-element@npm:3.0.0" - dependencies: - "@types/hast": ^3.0.0 - checksum: 82569a420eda5877c52fdbbdbe26675f012c02d70813dfd19acffdee328e42e4bd0b7ae34454cfcbcb932b2bedbd7ddc119f943a0cfb234120f9456d6c0c4331 - languageName: node - linkType: hard - -"hast-util-to-string@npm:^3.0.0": - version: 3.0.1 - resolution: "hast-util-to-string@npm:3.0.1" - dependencies: - "@types/hast": ^3.0.0 - checksum: 556f3cb118fc09e3a6cd149ee4b4056a49028a3858a7d37617e4c6d2c9c5e2336d5fb87eb5f41211b1977a964c705aa70e419464c12debc1959ed03fdad5bed6 - languageName: node - linkType: hard - "hdr-histogram-js@npm:^2.0.1": version: 2.0.3 resolution: "hdr-histogram-js@npm:2.0.3" @@ -18175,13 +18126,6 @@ __metadata: languageName: node linkType: hard -"is-absolute-url@npm:^4.0.0": - version: 4.0.1 - resolution: "is-absolute-url@npm:4.0.1" - checksum: de172a718439982a54477fdae55f21be69ec0e6a4b205db5484975d2f4ee749851fd46c28f3790dfc51a274c2ed1d0f8457b6d1fff02ab829069fd9cc761e48c - languageName: node - linkType: hard - "is-accessor-descriptor@npm:^1.0.1": version: 1.0.1 resolution: "is-accessor-descriptor@npm:1.0.1" @@ -19084,6 +19028,13 @@ __metadata: languageName: node linkType: hard +"jsdoc-type-pratt-parser@npm:^4.0.0": + version: 4.1.0 + resolution: "jsdoc-type-pratt-parser@npm:4.1.0" + checksum: e7642a508b090b1bdf17775383000ed71013c38e1231c1e576e5374636e8baf7c3fae8bf0252f5e1d3397d95efd56e8c8a5dd1a0de76d05d1499cbcb3c325bc3 + languageName: node + linkType: hard + "jsdom@npm:24.0.0": version: 24.0.0 resolution: "jsdom@npm:24.0.0" @@ -20442,15 +20393,6 @@ __metadata: languageName: node linkType: hard -"markdown-to-jsx@npm:^7.4.5": - version: 7.6.1 - resolution: "markdown-to-jsx@npm:7.6.1" - peerDependencies: - react: ">= 0.14.0" - checksum: 9ab398fa79a8f00736fffc4caeac13ade1d33f82efd398e98dd61935fb5248d334a33390a2a4cc7c3890840686d58959792f0f5b969044e4cc9971be27bfa399 - languageName: node - linkType: hard - "marked@npm:4.0.10": version: 4.0.10 resolution: "marked@npm:4.0.10" @@ -22076,7 +22018,7 @@ __metadata: languageName: node linkType: hard -"open@npm:^8.0.2, open@npm:^8.0.9, open@npm:^8.4.0": +"open@npm:^8.0.2, open@npm:^8.0.4, open@npm:^8.0.9, open@npm:^8.4.0": version: 8.4.2 resolution: "open@npm:8.4.2" dependencies: @@ -22939,24 +22881,24 @@ __metadata: "@justeattakeaway/pie-textarea": 0.13.0 "@justeattakeaway/pie-toast": 0.5.0 "@justeattakeaway/pie-toast-provider": 0.0.0 - "@storybook/addon-a11y": 8.3.0 - "@storybook/addon-designs": 8.0.3 - "@storybook/addon-essentials": 8.3.0 - "@storybook/addon-links": 8.3.0 - "@storybook/blocks": 8.3.0 - "@storybook/components": 8.3.0 - "@storybook/manager-api": 8.3.0 - "@storybook/preview-api": 8.3.0 - "@storybook/theming": 8.3.0 - "@storybook/types": 8.3.0 - "@storybook/web-components": 8.3.0 - "@storybook/web-components-vite": 8.3.0 + "@storybook/addon-a11y": 8.4.0 + "@storybook/addon-designs": 8.0.4 + "@storybook/addon-essentials": 8.4.0 + "@storybook/addon-links": 8.4.0 + "@storybook/blocks": 8.4.0 + "@storybook/components": 8.4.0 + "@storybook/manager-api": 8.4.0 + "@storybook/preview-api": 8.4.0 + "@storybook/theming": 8.4.0 + "@storybook/types": 8.4.0 + "@storybook/web-components": 8.4.0 + "@storybook/web-components-vite": 8.4.0 "@types/dompurify": 3.0.5 dompurify: 3.1.3 react: 18.3.1 react-dom: 18.3.1 serve: 14.2.0 - storybook: 8.3.0 + storybook: 8.4.0 storybook-dark-mode: 4.0.2 languageName: unknown linkType: soft @@ -25041,16 +24983,6 @@ __metadata: languageName: node linkType: hard -"react-colorful@npm:^5.1.2": - version: 5.6.1 - resolution: "react-colorful@npm:5.6.1" - peerDependencies: - react: ">=16.8.0" - react-dom: ">=16.8.0" - checksum: e432b7cb0df57e8f0bcdc3b012d2e93fcbcb6092c9e0f85654788d5ebfc4442536d8cc35b2418061ba3c4afb8b7788cc101c606d86a1732407921de7a9244c8d - languageName: node - linkType: hard - "react-dom@npm:17.0.2": version: 17.0.2 resolution: "react-dom@npm:17.0.2" @@ -25473,33 +25405,6 @@ __metadata: languageName: node linkType: hard -"rehype-external-links@npm:^3.0.0": - version: 3.0.0 - resolution: "rehype-external-links@npm:3.0.0" - dependencies: - "@types/hast": ^3.0.0 - "@ungap/structured-clone": ^1.0.0 - hast-util-is-element: ^3.0.0 - is-absolute-url: ^4.0.0 - space-separated-tokens: ^2.0.0 - unist-util-visit: ^5.0.0 - checksum: f776f306a2698a67b03665280fcc00448a5bf59b997d83fbb70fc3d71acff2c3025c70ee1840f48ca7dff209217ebe9adad085dc7caf9e5907badf8b104898b6 - languageName: node - linkType: hard - -"rehype-slug@npm:^6.0.0": - version: 6.0.0 - resolution: "rehype-slug@npm:6.0.0" - dependencies: - "@types/hast": ^3.0.0 - github-slugger: ^2.0.0 - hast-util-heading-rank: ^3.0.0 - hast-util-to-string: ^3.0.0 - unist-util-visit: ^5.0.0 - checksum: 0e13ec558eb142d14a6daeab21bbef7c9230bfabec45987e15a24283650226eae3898ad162b8cb29ee39a8bce536bcc013eeab7dc6faa0295b0e91612a8c9f6e - languageName: node - linkType: hard - "relateurl@npm:^0.2.7": version: 0.2.7 resolution: "relateurl@npm:0.2.7" @@ -26965,13 +26870,6 @@ __metadata: languageName: node linkType: hard -"space-separated-tokens@npm:^2.0.0": - version: 2.0.2 - resolution: "space-separated-tokens@npm:2.0.2" - checksum: 202e97d7ca1ba0758a0aa4fe226ff98142073bcceeff2da3aad037968878552c3bbce3b3231970025375bbba5aee00c5b8206eda408da837ab2dc9c0f26be990 - languageName: node - linkType: hard - "spawndamnit@npm:^3.0.1": version: 3.0.1 resolution: "spawndamnit@npm:3.0.1" @@ -27193,16 +27091,21 @@ __metadata: languageName: node linkType: hard -"storybook@npm:8.3.0": - version: 8.3.0 - resolution: "storybook@npm:8.3.0" +"storybook@npm:8.4.0": + version: 8.4.0 + resolution: "storybook@npm:8.4.0" dependencies: - "@storybook/core": 8.3.0 + "@storybook/core": 8.4.0 + peerDependencies: + prettier: ^2 || ^3 + peerDependenciesMeta: + prettier: + optional: true bin: getstorybook: ./bin/index.cjs sb: ./bin/index.cjs storybook: ./bin/index.cjs - checksum: 07fcbfaeed410963d5b4e90a3b5dd6d9c360595e19ee6a8cd23a50cda1fea0c8c3b8a6627a1edfac16cdf97f2a3130d67175221a08385316c84b8770d731ffb2 + checksum: f709d4473f6c7deed6513cd798718cc71f41d04b131ec7d95119c4018e298a6427370807d9e6f89bf56279b3201d805963e5c21f7453358f32e8896f65516c77 languageName: node linkType: hard @@ -27878,15 +27781,6 @@ __metadata: languageName: node linkType: hard -"telejson@npm:^7.2.0": - version: 7.2.0 - resolution: "telejson@npm:7.2.0" - dependencies: - memoizerific: ^1.11.3 - checksum: 55a3380c9ff3c5ad84581bb6bda28fc33c6b7c4a0c466894637da687639b8db0d21b0ff4c1bc1a7a92ae6b70662549d09e7b9e8b1ec334b2ef93078762ecdfb9 - languageName: node - linkType: hard - "temp@npm:^0.9.0": version: 0.9.4 resolution: "temp@npm:0.9.4" @@ -28947,36 +28841,6 @@ __metadata: languageName: node linkType: hard -"unist-util-is@npm:^6.0.0": - version: 6.0.0 - resolution: "unist-util-is@npm:6.0.0" - dependencies: - "@types/unist": ^3.0.0 - checksum: f630a925126594af9993b091cf807b86811371e465b5049a6283e08537d3e6ba0f7e248e1e7dab52cfe33f9002606acef093441137181b327f6fe504884b20e2 - languageName: node - linkType: hard - -"unist-util-visit-parents@npm:^6.0.0": - version: 6.0.1 - resolution: "unist-util-visit-parents@npm:6.0.1" - dependencies: - "@types/unist": ^3.0.0 - unist-util-is: ^6.0.0 - checksum: 08927647c579f63b91aafcbec9966dc4a7d0af1e5e26fc69f4e3e6a01215084835a2321b06f3cbe7bf7914a852830fc1439f0fc3d7153d8804ac3ef851ddfa20 - languageName: node - linkType: hard - -"unist-util-visit@npm:^5.0.0": - version: 5.0.0 - resolution: "unist-util-visit@npm:5.0.0" - dependencies: - "@types/unist": ^3.0.0 - unist-util-is: ^6.0.0 - unist-util-visit-parents: ^6.0.0 - checksum: 9ec42e618e7e5d0202f3c191cd30791b51641285732767ee2e6bcd035931032e3c1b29093f4d7fd0c79175bbc1f26f24f26ee49770d32be76f8730a652a857e6 - languageName: node - linkType: hard - "universal-user-agent@npm:^6.0.0": version: 6.0.1 resolution: "universal-user-agent@npm:6.0.1" From e3d06b85dff5b6855d320bfe541e697365c17331 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Mon, 25 Nov 2024 12:06:43 +0000 Subject: [PATCH 04/34] fix variant story params --- apps/pie-storybook/package.json | 24 +- .../pie-storybook/stories/pie-chip.stories.ts | 2 +- apps/pie-storybook/utilities/index.ts | 2 - yarn.lock | 338 ++++++++---------- 4 files changed, 164 insertions(+), 202 deletions(-) diff --git a/apps/pie-storybook/package.json b/apps/pie-storybook/package.json index 3a01215733..ab873c55a2 100644 --- a/apps/pie-storybook/package.json +++ b/apps/pie-storybook/package.json @@ -45,23 +45,23 @@ "devDependencies": { "@justeattakeaway/pie-icons-configs": "4.5.1", "@justeattakeaway/pie-monorepo-utils": "0.2.0", - "@storybook/addon-a11y": "8.4.0", + "@storybook/addon-a11y": "8.4.5", "@storybook/addon-designs": "8.0.4", - "@storybook/addon-essentials": "8.4.0", - "@storybook/addon-links": "8.4.0", - "@storybook/blocks": "8.4.0", - "@storybook/components": "8.4.0", - "@storybook/manager-api": "8.4.0", - "@storybook/preview-api": "8.4.0", - "@storybook/theming": "8.4.0", - "@storybook/types": "8.4.0", - "@storybook/web-components": "8.4.0", - "@storybook/web-components-vite": "8.4.0", + "@storybook/addon-essentials": "8.4.5", + "@storybook/addon-links": "8.4.5", + "@storybook/blocks": "8.4.5", + "@storybook/components": "8.4.5", + "@storybook/manager-api": "8.4.5", + "@storybook/preview-api": "8.4.5", + "@storybook/theming": "8.4.5", + "@storybook/types": "8.4.5", + "@storybook/web-components": "8.4.5", + "@storybook/web-components-vite": "8.4.5", "@types/dompurify": "3.0.5", "react": "18.3.1", "react-dom": "18.3.1", "serve": "14.2.0", - "storybook": "8.4.0", + "storybook": "8.4.5", "storybook-dark-mode": "4.0.2" }, "volta": { diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index f39c44ba45..0afb8edab8 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -134,4 +134,4 @@ const propOptions = { showIcon: [true, false] }; - export const AllPropVariations = createVariantStory(Template, defaultArgs, propOptions, 'Hello world'); \ No newline at end of file +export const AllPropVariations = createVariantStory(Template, propOptions, 'Hello world'); diff --git a/apps/pie-storybook/utilities/index.ts b/apps/pie-storybook/utilities/index.ts index 648003baed..37029975ea 100644 --- a/apps/pie-storybook/utilities/index.ts +++ b/apps/pie-storybook/utilities/index.ts @@ -34,7 +34,6 @@ export type TemplateFunction = (props: T) => TemplateResult; export const createStory = (templateFunc: TemplateFunction, defaultArgs: T) => ( propOverrides?: Partial, storyOpts?: StoryOptions, - tags: ['foo'], ) => ({ render: (args: T) => templateFunc(args), args: { @@ -76,7 +75,6 @@ export const sanitizeAndRenderHTML = (slot: string) => unsafeHTML(DOMPurify.sani */ export const createVariantStory = ( template: TemplateFunction, - defaultArgs: T, propOptions: Record, slotContent: string ) => { diff --git a/yarn.lock b/yarn.lock index d20703edbe..912bfefe18 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6890,21 +6890,21 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-a11y@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/addon-a11y@npm:8.4.0" +"@storybook/addon-a11y@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/addon-a11y@npm:8.4.5" dependencies: - "@storybook/addon-highlight": 8.4.0 + "@storybook/addon-highlight": 8.4.5 axe-core: ^4.2.0 peerDependencies: - storybook: ^8.4.0 - checksum: b8cf2261abd86a4ec729044d2474a7a23a2e07f9944097801c1fff6c2ee2a818433972039911b7608e43cf2fb84ef03814af374a0267ce17a92febef04ef3985 + storybook: ^8.4.5 + checksum: 956409fc254fc126cdf46226ff622ef849b234e5a3b1dd92c918cf3933be48efae8be01e1f3f14ea4d9c2ecd92c91652a11256c278afb58c66391793b93b6e58 languageName: node linkType: hard -"@storybook/addon-actions@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/addon-actions@npm:8.4.0" +"@storybook/addon-actions@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/addon-actions@npm:8.4.5" dependencies: "@storybook/global": ^5.0.0 "@types/uuid": ^9.0.1 @@ -6912,34 +6912,34 @@ __metadata: polished: ^4.2.2 uuid: ^9.0.0 peerDependencies: - storybook: ^8.4.0 - checksum: 92756db41463d248058e90d7a8c3eba826a95bc88fb76223d4dd2510e1441fa05a56acc0b9350a1cf2756f9884d7bd22fdf53638374d708aedc22dce2e32a41c + storybook: ^8.4.5 + checksum: 7bc9b3091b62419170aa841d2006b88cffa111557f3451b96f9f61310c83138a131f3e400b05fbd5c774d5e93b15ebd629844844b6ba099ee968fed2e5085d54 languageName: node linkType: hard -"@storybook/addon-backgrounds@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/addon-backgrounds@npm:8.4.0" +"@storybook/addon-backgrounds@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/addon-backgrounds@npm:8.4.5" dependencies: "@storybook/global": ^5.0.0 memoizerific: ^1.11.3 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.0 - checksum: d0ada9c8891c1f7a38b45183ffb897de340212df372d67585a296e368d54f8fb8a0a74840f151b7cde4a55c4902ec01ecef6e036933681bee6ef901d6b3bc9e6 + storybook: ^8.4.5 + checksum: a8b68fc20463087cc66d52c933825c9ba73f81c4ab14eea607271f20ad0e108581bb75dddd06fd01a8a55637b48a14342543174bbacbc7609388c659f0257906 languageName: node linkType: hard -"@storybook/addon-controls@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/addon-controls@npm:8.4.0" +"@storybook/addon-controls@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/addon-controls@npm:8.4.5" dependencies: "@storybook/global": ^5.0.0 dequal: ^2.0.2 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.0 - checksum: 71546271587f00782a9a5a5386fefdf5463052a687318a4b0220dd66a80d008acb1ddc2544a8be880d84cf59f4bc1c56490c7cd90856571ececd944ea565ad7c + storybook: ^8.4.5 + checksum: 673cdec1c5b174a317c295bcbbcb464f0d2778e6c403b3ae591a96d59510a96b9a97121b250d13e83886168396e5ee6877104e04da957950c3d87145ec76007b languageName: node linkType: hard @@ -6969,118 +6969,118 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-docs@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/addon-docs@npm:8.4.0" +"@storybook/addon-docs@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/addon-docs@npm:8.4.5" dependencies: "@mdx-js/react": ^3.0.0 - "@storybook/blocks": 8.4.0 - "@storybook/csf-plugin": 8.4.0 - "@storybook/react-dom-shim": 8.4.0 + "@storybook/blocks": 8.4.5 + "@storybook/csf-plugin": 8.4.5 + "@storybook/react-dom-shim": 8.4.5 react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.0 - checksum: 699aaf44cc074b4ea52459d0e15c0d571640145c7ec8ebf9d8990be861700fbe4470a6a37ecda9db0476bf43ac27000e448be03ba77bd8c13214fe8a8cf6f289 + storybook: ^8.4.5 + checksum: 04b15137c082e5b6f6d55f5a251a4a34a08c44f7ad926615f5a99093bd26b044ad40cbdb314a3a76154de00dd2434c61f893ca2ce697193addd03e0650c6d4da languageName: node linkType: hard -"@storybook/addon-essentials@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/addon-essentials@npm:8.4.0" - dependencies: - "@storybook/addon-actions": 8.4.0 - "@storybook/addon-backgrounds": 8.4.0 - "@storybook/addon-controls": 8.4.0 - "@storybook/addon-docs": 8.4.0 - "@storybook/addon-highlight": 8.4.0 - "@storybook/addon-measure": 8.4.0 - "@storybook/addon-outline": 8.4.0 - "@storybook/addon-toolbars": 8.4.0 - "@storybook/addon-viewport": 8.4.0 +"@storybook/addon-essentials@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/addon-essentials@npm:8.4.5" + dependencies: + "@storybook/addon-actions": 8.4.5 + "@storybook/addon-backgrounds": 8.4.5 + "@storybook/addon-controls": 8.4.5 + "@storybook/addon-docs": 8.4.5 + "@storybook/addon-highlight": 8.4.5 + "@storybook/addon-measure": 8.4.5 + "@storybook/addon-outline": 8.4.5 + "@storybook/addon-toolbars": 8.4.5 + "@storybook/addon-viewport": 8.4.5 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.0 - checksum: c2ac3f92a1943986892ef4cbdcd7b3b7f181f93d5463dd564bb827adc4cd7b7a3390c4a049b5873f1aa185f6a25a4a9eaa20621ceff3dcdd48330786306d6155 + storybook: ^8.4.5 + checksum: a00c0e13763076b2bdf9923b75ff57b3f88c9ef64cebc405bb129f02fb9e69a4e69aa0d277a4d98cb181c11681eb8db488585a1dcf8f92f1ff8b371b4c6810fb languageName: node linkType: hard -"@storybook/addon-highlight@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/addon-highlight@npm:8.4.0" +"@storybook/addon-highlight@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/addon-highlight@npm:8.4.5" dependencies: "@storybook/global": ^5.0.0 peerDependencies: - storybook: ^8.4.0 - checksum: 5b8bc476442d46b224c55df8392c8aca0f98fe0bfa589430adaab02ad16ec8ddb1132191365a805b478720f4b39ba605f6aef95e6a6b601224e63a6c122217ab + storybook: ^8.4.5 + checksum: 8caa57aaee1a6704e757d4711899683d83778ad426015871f93cbb4e44ffb07a7a5e81a1bed7c36b335fa3687ce36f7a6f41738aa040bfbeea623100ed831090 languageName: node linkType: hard -"@storybook/addon-links@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/addon-links@npm:8.4.0" +"@storybook/addon-links@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/addon-links@npm:8.4.5" dependencies: "@storybook/csf": ^0.1.11 "@storybook/global": ^5.0.0 ts-dedent: ^2.0.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.0 + storybook: ^8.4.5 peerDependenciesMeta: react: optional: true - checksum: 7598424f58d39c1a7daa0579160ad3c3b204267b4836237684d24da4434971d51149da8d319eb91e29d9879fd692ce462d61eebc449653fa3dc1faef0567fcd5 + checksum: 47cd11c9aab7a5d3ab2f6517316973ce1a8f118d845f4dac2bc3864597252fe8d0ab3e62695a6fcd0ea8c72097260b99545392d9a6fe8be646e5b352481f48cd languageName: node linkType: hard -"@storybook/addon-measure@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/addon-measure@npm:8.4.0" +"@storybook/addon-measure@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/addon-measure@npm:8.4.5" dependencies: "@storybook/global": ^5.0.0 tiny-invariant: ^1.3.1 peerDependencies: - storybook: ^8.4.0 - checksum: 80277f423d7b1c32aa66e6d1a21eae243f0077a4bd8ba60fb70ab995c80bebe82448980adc0d80c5bc4082c50f8a60124c48ecb704540279b88f59dc9ce1057c + storybook: ^8.4.5 + checksum: c6e177f8c2ae68984cde8502cf303c4ee69798cd3b9453aea9a8df5c30d42f4ec8b58d416ee8fdd2f5110c3d837c871e96953bf62225b13476da0dc8cfe6e7e0 languageName: node linkType: hard -"@storybook/addon-outline@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/addon-outline@npm:8.4.0" +"@storybook/addon-outline@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/addon-outline@npm:8.4.5" dependencies: "@storybook/global": ^5.0.0 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.0 - checksum: 3342c23bfe6e1138b03961e63a3606db6d562b6651d0bc241cca14c456cc08aca42cbbbb752c489f1b1674dc9987b976666e8cdf24f3bf5ab2acfaf8e3ea81a6 + storybook: ^8.4.5 + checksum: 41567f91cee84920d66f657b40f262c95a9a046aed6e9db161624d6adcf77ce9acb7d433c7f9e929da4dee048e0842015d0bc51a63fb8468f69f560067e5234f languageName: node linkType: hard -"@storybook/addon-toolbars@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/addon-toolbars@npm:8.4.0" +"@storybook/addon-toolbars@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/addon-toolbars@npm:8.4.5" peerDependencies: - storybook: ^8.4.0 - checksum: 2342a93fde277237fbaeed70142a457e607069056ade625b4409ceeb97d697361a92ee5a2af0417a5249e97d288ddf4f7986e0315731faf82367149e68655766 + storybook: ^8.4.5 + checksum: fa914838d23b68199c355672674ad6f84bd3db0f2b961fd05ebba916a8c1dd1026ed9568ae97b34e9b0d657d4d4d9d64d69431d6c6a04b2e4bb39d4ddc93446c languageName: node linkType: hard -"@storybook/addon-viewport@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/addon-viewport@npm:8.4.0" +"@storybook/addon-viewport@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/addon-viewport@npm:8.4.5" dependencies: memoizerific: ^1.11.3 peerDependencies: - storybook: ^8.4.0 - checksum: 9852e9e804335d4b90c83d6930eb0c6127cb516bbec5c07629850d2cf433daca64457ed91aa5e8e122315f543491851bfcfed9fc7869b05ee8842b6946c12cff + storybook: ^8.4.5 + checksum: 72d70129e8d4c223608a66a7e6630be21ee05f403ef54afc72344489655e38256d644503f74ed9f363a18d967f22fa9da36ce4bc082b6a464c4fdb5e50d598ce languageName: node linkType: hard -"@storybook/blocks@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/blocks@npm:8.4.0" +"@storybook/blocks@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/blocks@npm:8.4.5" dependencies: "@storybook/csf": ^0.1.11 "@storybook/icons": ^1.2.12 @@ -7088,36 +7088,36 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.0 + storybook: ^8.4.5 peerDependenciesMeta: react: optional: true react-dom: optional: true - checksum: e3eae4f306215388ef7ec3d927b60aa1285d77771fa1c2d8a4ce75b75494a55876508538fd496e7ee7bbd77616898400aa26aefef09ab7bd4701e18e9f5584ef + checksum: f80d320d75fc74cd15c7b3a4d58de286f617120829bb5c319f845d2e2310ef2f2e159e69cf3fd3906c8be47e34cd95e879c565d09f0bfe360e73df694c90bd79 languageName: node linkType: hard -"@storybook/builder-vite@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/builder-vite@npm:8.4.0" +"@storybook/builder-vite@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/builder-vite@npm:8.4.5" dependencies: - "@storybook/csf-plugin": 8.4.0 + "@storybook/csf-plugin": 8.4.5 browser-assert: ^1.2.1 ts-dedent: ^2.0.0 peerDependencies: - storybook: ^8.4.0 + storybook: ^8.4.5 vite: ^4.0.0 || ^5.0.0 - checksum: c815656077286879c5c4fe38813a14cc35e8961607ef8c1e1b7c9abad6176e951a8c3804b2d9893748edbc701c86db923719dd76f4b298e0be8478332c5676d1 + checksum: 83895289b3b1390825759e57e9b2a71d23dd989f7939fe2fa005fae8618987a5294d3af5fb6402d51952da88dc2b623857dc6fd595faca9b6aeeb9a27a6ae6fe languageName: node linkType: hard -"@storybook/components@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/components@npm:8.4.0" +"@storybook/components@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/components@npm:8.4.5" peerDependencies: - storybook: ^8.4.0 - checksum: 6b8c35d55b153ddce3b9021fc8050eb392776feec2f50ac67a3ed8f57a1d720e0f581190b26620282e1772df9d687c69bc5b39dc4d50402c619abd9a082a0191 + storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + checksum: dd14e0a2d40f6590fd92204f3b40d4437403b7be311fa797250bd71fe4b38ade78389d41d2617fa5e75cfa0e1538366ca1154149c0894433245c23cebc4dfc73 languageName: node linkType: hard @@ -7130,15 +7130,6 @@ __metadata: languageName: node linkType: hard -"@storybook/components@npm:^8.4.0": - version: 8.4.5 - resolution: "@storybook/components@npm:8.4.5" - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: dd14e0a2d40f6590fd92204f3b40d4437403b7be311fa797250bd71fe4b38ade78389d41d2617fa5e75cfa0e1538366ca1154149c0894433245c23cebc4dfc73 - languageName: node - linkType: hard - "@storybook/core-events@npm:^8.0.0": version: 8.4.3 resolution: "@storybook/core-events@npm:8.4.3" @@ -7148,9 +7139,9 @@ __metadata: languageName: node linkType: hard -"@storybook/core@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/core@npm:8.4.0" +"@storybook/core@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/core@npm:8.4.5" dependencies: "@storybook/csf": ^0.1.11 better-opn: ^3.0.2 @@ -7168,18 +7159,18 @@ __metadata: peerDependenciesMeta: prettier: optional: true - checksum: 03c32a595db1f7b816fc47d16991307a4ec1153f317413ab2425fd26a02ea81ce5231539dbe156f9de49056dd8a6d5a3a0d540050671d270696a52dddb92158d + checksum: cfc7c93508befaed12314c61a64d892f543c16cff61b841ab5d74f666b88f6778aa3dd84095325074d4bc85bfde99a69ffc674e93200b457e33784b3ceccf730 languageName: node linkType: hard -"@storybook/csf-plugin@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/csf-plugin@npm:8.4.0" +"@storybook/csf-plugin@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/csf-plugin@npm:8.4.5" dependencies: unplugin: ^1.3.1 peerDependencies: - storybook: ^8.4.0 - checksum: 8d9b9491d8b8e7a96fa76522f0661f3af9a7ab610ab3eb1fed025ab66ca083e6433d36605c7d22ce2dac6469eb21a39f067e25d6ba9107d4d7bb979191d4b6a4 + storybook: ^8.4.5 + checksum: df59430f3f212ad8a11efdfa3ef01d8fa73322233338488fb97a9e2e031c4846a6b307acbf16edd72ab8edb02e86740b5a0fff0e0dec4dd15850573a92831c98 languageName: node linkType: hard @@ -7209,12 +7200,12 @@ __metadata: languageName: node linkType: hard -"@storybook/manager-api@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/manager-api@npm:8.4.0" +"@storybook/manager-api@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/manager-api@npm:8.4.5" peerDependencies: - storybook: ^8.4.0 - checksum: a5ae11f2997fb8d0c857e3049466f938b7f321a56c57f4794efc69023a9c7d0fe478d7ead95b91865d58041ecdf662fdc15e06358b22a113ffedd62545ec9926 + storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + checksum: f6bc0ef3703afceedb862b77f22e169a173525c6d0483ba4ae5d1daf5b19c8077b33ef3fd634571e3ded93b2d4bd4a9e182c23d4395d1bfe8fdb6c98bdcc119f languageName: node linkType: hard @@ -7227,25 +7218,7 @@ __metadata: languageName: node linkType: hard -"@storybook/manager-api@npm:^8.4.0": - version: 8.4.5 - resolution: "@storybook/manager-api@npm:8.4.5" - peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: f6bc0ef3703afceedb862b77f22e169a173525c6d0483ba4ae5d1daf5b19c8077b33ef3fd634571e3ded93b2d4bd4a9e182c23d4395d1bfe8fdb6c98bdcc119f - languageName: node - linkType: hard - -"@storybook/preview-api@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/preview-api@npm:8.4.0" - peerDependencies: - storybook: ^8.4.0 - checksum: a748992fdac8025b1ce70e516249ee5843b4c7acd1635a55ab2fcab2c5b4416d00fc501ba4f2fdbf177f3b870d32416f7cb423d79e6a8cbb42858d8537026d79 - languageName: node - linkType: hard - -"@storybook/preview-api@npm:^8.4.0": +"@storybook/preview-api@npm:8.4.5": version: 8.4.5 resolution: "@storybook/preview-api@npm:8.4.5" peerDependencies: @@ -7254,23 +7227,23 @@ __metadata: languageName: node linkType: hard -"@storybook/react-dom-shim@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/react-dom-shim@npm:8.4.0" +"@storybook/react-dom-shim@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/react-dom-shim@npm:8.4.5" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.0 - checksum: 07bcaecc6b38d133ddef96e5c9f045ac0c2083ef181ada66c9889c7494dcdc5807696b8526b794c01e798fb0b813664de70b401cd4421e8ac4dda09c847fbc56 + storybook: ^8.4.5 + checksum: b1f176b85783bfa9c43f49a7ef69c04ff92079e5ba8ca76b1b9f46b814c19db6e882137c35ebd91424e2e51bfa0d34eb3f0b84d4ed9e8a2b93875b7f5563b310 languageName: node linkType: hard -"@storybook/theming@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/theming@npm:8.4.0" +"@storybook/theming@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/theming@npm:8.4.5" peerDependencies: - storybook: ^8.4.0 - checksum: 31512fae36853cbc2dd941a253db8fc4a9f8b1fbee29617d7956305652471088943a258c7c565bfa5bc26409844478fe9d11d06141c8e845b854d8580ee917a7 + storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + checksum: 0eefd3a3bea58e557f1e303270910046f05aa971ceba6ca6c1cd706c25b537243be6663dba5b2b3aa2edb7fc40279e93403131d76eae7da26da70f8a1c8d1c96 languageName: node linkType: hard @@ -7283,52 +7256,43 @@ __metadata: languageName: node linkType: hard -"@storybook/theming@npm:^8.4.0": +"@storybook/types@npm:8.4.5": version: 8.4.5 - resolution: "@storybook/theming@npm:8.4.5" + resolution: "@storybook/types@npm:8.4.5" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 0eefd3a3bea58e557f1e303270910046f05aa971ceba6ca6c1cd706c25b537243be6663dba5b2b3aa2edb7fc40279e93403131d76eae7da26da70f8a1c8d1c96 + checksum: 9c6d8aef05a475ed42faa63618ee6a958803115fb124281d2724576935630c769166ea5ea3dcabe69a28658d7f190ea3acffbeddd9c0aeb0894688df2ed4fe40 languageName: node linkType: hard -"@storybook/types@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/types@npm:8.4.0" - peerDependencies: - storybook: ^8.4.0 - checksum: 6334a37474f20646d12face5ff6e0f4deb04b2f33e3e18536a861088009b6513d9d28713ae07e15cdebfb8378d8643f8155ad5b2fad61e49c5d82caa7b23720b - languageName: node - linkType: hard - -"@storybook/web-components-vite@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/web-components-vite@npm:8.4.0" +"@storybook/web-components-vite@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/web-components-vite@npm:8.4.5" dependencies: - "@storybook/builder-vite": 8.4.0 - "@storybook/web-components": 8.4.0 + "@storybook/builder-vite": 8.4.5 + "@storybook/web-components": 8.4.5 magic-string: ^0.30.0 peerDependencies: - storybook: ^8.4.0 - checksum: 4b69c7ff8035b48d35b8e4d9ae5b918ed9a6bbb540695e8df684a51bca06e8471d285c513e610afcee541e16ef464462f040385cbc60a8630b9b2116564b719e + storybook: ^8.4.5 + checksum: 2efbc108cc64bf9391454ef90fa3c3edf4d32067609c9887dbd5fdf9345cab8624bb60c43cb2c68d29af18f0441e2d81633c4509d37f8e36ee04f3f32d6e55b6 languageName: node linkType: hard -"@storybook/web-components@npm:8.4.0": - version: 8.4.0 - resolution: "@storybook/web-components@npm:8.4.0" +"@storybook/web-components@npm:8.4.5": + version: 8.4.5 + resolution: "@storybook/web-components@npm:8.4.5" dependencies: - "@storybook/components": ^8.4.0 + "@storybook/components": 8.4.5 "@storybook/global": ^5.0.0 - "@storybook/manager-api": ^8.4.0 - "@storybook/preview-api": ^8.4.0 - "@storybook/theming": ^8.4.0 + "@storybook/manager-api": 8.4.5 + "@storybook/preview-api": 8.4.5 + "@storybook/theming": 8.4.5 tiny-invariant: ^1.3.1 ts-dedent: ^2.0.0 peerDependencies: lit: ^2.0.0 || ^3.0.0 - storybook: ^8.4.0 - checksum: 078f23d6d4fb534658db331c5ff5c3158f3871f1e023a15d2bf304fe306b255fd2bb2a635f9b58f137fe2b53dcb3d75d180eb90873557e1d128b4c3eedcd976a + storybook: ^8.4.5 + checksum: 3e25751a2d1276b4d4c32c087a626637aae52d768a91bd7a6e627f2c141462673ec1504ceda7ca15d39b465b649f604ceef1f8274f4db0213d72abb957285f60 languageName: node linkType: hard @@ -22881,24 +22845,24 @@ __metadata: "@justeattakeaway/pie-textarea": 0.13.0 "@justeattakeaway/pie-toast": 0.5.0 "@justeattakeaway/pie-toast-provider": 0.0.0 - "@storybook/addon-a11y": 8.4.0 + "@storybook/addon-a11y": 8.4.5 "@storybook/addon-designs": 8.0.4 - "@storybook/addon-essentials": 8.4.0 - "@storybook/addon-links": 8.4.0 - "@storybook/blocks": 8.4.0 - "@storybook/components": 8.4.0 - "@storybook/manager-api": 8.4.0 - "@storybook/preview-api": 8.4.0 - "@storybook/theming": 8.4.0 - "@storybook/types": 8.4.0 - "@storybook/web-components": 8.4.0 - "@storybook/web-components-vite": 8.4.0 + "@storybook/addon-essentials": 8.4.5 + "@storybook/addon-links": 8.4.5 + "@storybook/blocks": 8.4.5 + "@storybook/components": 8.4.5 + "@storybook/manager-api": 8.4.5 + "@storybook/preview-api": 8.4.5 + "@storybook/theming": 8.4.5 + "@storybook/types": 8.4.5 + "@storybook/web-components": 8.4.5 + "@storybook/web-components-vite": 8.4.5 "@types/dompurify": 3.0.5 dompurify: 3.1.3 react: 18.3.1 react-dom: 18.3.1 serve: 14.2.0 - storybook: 8.4.0 + storybook: 8.4.5 storybook-dark-mode: 4.0.2 languageName: unknown linkType: soft @@ -27091,11 +27055,11 @@ __metadata: languageName: node linkType: hard -"storybook@npm:8.4.0": - version: 8.4.0 - resolution: "storybook@npm:8.4.0" +"storybook@npm:8.4.5": + version: 8.4.5 + resolution: "storybook@npm:8.4.5" dependencies: - "@storybook/core": 8.4.0 + "@storybook/core": 8.4.5 peerDependencies: prettier: ^2 || ^3 peerDependenciesMeta: @@ -27105,7 +27069,7 @@ __metadata: getstorybook: ./bin/index.cjs sb: ./bin/index.cjs storybook: ./bin/index.cjs - checksum: f709d4473f6c7deed6513cd798718cc71f41d04b131ec7d95119c4018e298a6427370807d9e6f89bf56279b3201d805963e5c21f7453358f32e8896f65516c77 + checksum: 3495183749b760da077b2ede7607884c62f6707412e91defbe20328b275b78528fcef350453ad95642a52b97eded50f2c5374e94fb422a3b39587de364d87ee8 languageName: node linkType: hard From 505fc3462b5506b2c69f0212713c3d42b18c94f3 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Mon, 25 Nov 2024 12:58:07 +0000 Subject: [PATCH 05/34] add tagging functionality --- apps/pie-storybook/utilities/index.ts | 41 ++++++++++++++------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/apps/pie-storybook/utilities/index.ts b/apps/pie-storybook/utilities/index.ts index 37029975ea..7368a66d57 100644 --- a/apps/pie-storybook/utilities/index.ts +++ b/apps/pie-storybook/utilities/index.ts @@ -102,24 +102,27 @@ export const createVariantStory = ( const propCombinations = generateCombinations(propOptions); - return () => html` -
- ${propCombinations.map( - (props) => html` -
-
- ${Object.entries(props as Record).map( - ([key, value]) => html` -
${key}: ${JSON.stringify(value)}
- ` - )} + return { + render: () => html` +
+ ${propCombinations.map( + (props) => html` +
+
+ ${Object.entries(props as Record).map( + ([key, value]) => html` +
${key}: ${JSON.stringify(value)}
+ ` + )} +
+
+ ${template({ ...props, slot: slotContent })} +
-
- ${template({ ...props, slot: slotContent })} -
-
- ` - )} -
- `; + ` + )} +
+ `, + tags: ['!dev'], // Add the default tag here + }; }; From 4e2db2aeabfa0c1862e5d787c2ef374101375787 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Mon, 25 Nov 2024 14:59:27 +0000 Subject: [PATCH 06/34] add tagging v2 --- .../pie-storybook/stories/pie-chip.stories.ts | 5 +- apps/pie-storybook/stories/pie-foo.stories.ts | 34 ++++++++ apps/pie-storybook/utilities/index.ts | 87 +++++++++---------- 3 files changed, 80 insertions(+), 46 deletions(-) create mode 100644 apps/pie-storybook/stories/pie-foo.stories.ts diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index 0afb8edab8..9eb4bc095d 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -134,4 +134,7 @@ const propOptions = { showIcon: [true, false] }; -export const AllPropVariations = createVariantStory(Template, propOptions, 'Hello world'); +export const AllPropVariations = { + render: createVariantStory(Template, propOptions, 'Hello World'), + tags: ['!dev'], +}; diff --git a/apps/pie-storybook/stories/pie-foo.stories.ts b/apps/pie-storybook/stories/pie-foo.stories.ts new file mode 100644 index 0000000000..eaf0ff497a --- /dev/null +++ b/apps/pie-storybook/stories/pie-foo.stories.ts @@ -0,0 +1,34 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; +import { html } from 'lit'; + +import '@justeattakeaway/pie-divider'; + +const meta: Meta = { + title: 'Foo', + component: 'pie-divider', +}; +export default meta; + +type Story = StoryObj; + +export const Variant1: Story = { + // 👇 This story will not appear in Storybook's sidebar or docs page + tags: ['dev', '!autodocs'], + args: { variant: 1 }, +}; + +export const Variant2: Story = { + // 👇 This story will not appear in Storybook's sidebar or docs page + tags: ['dev', '!autodocs'], + args: { variant: 2 }, +}; + +export const Combo: Story = { + // 👇 This story should not be tested, but will appear in the sidebar and docs page + tags: ['!dev'], + render: () => html` +
+ +
+ `, +}; \ No newline at end of file diff --git a/apps/pie-storybook/utilities/index.ts b/apps/pie-storybook/utilities/index.ts index 7368a66d57..831f2b4598 100644 --- a/apps/pie-storybook/utilities/index.ts +++ b/apps/pie-storybook/utilities/index.ts @@ -74,55 +74,52 @@ export const sanitizeAndRenderHTML = (slot: string) => unsafeHTML(DOMPurify.sani * @returns {Function} Returns a function that renders all combinations of the given prop options. */ export const createVariantStory = ( - template: TemplateFunction, - propOptions: Record, - slotContent: string + template: TemplateFunction, + propOptions: Record, + slotContent: string ) => { - const generateCombinations = (options: Record): T[] => { - const keys = Object.keys(options) as (keyof T)[]; - const combinations: T[] = []; + const generateCombinations = (options: Record): T[] => { + const keys = Object.keys(options) as (keyof T)[]; + const combinations: T[] = []; - const buildCombination = (index: number, currentCombination: Partial) => { - if (index === keys.length) { - combinations.push(currentCombination as T); - return; - } + const buildCombination = (index: number, currentCombination: Partial) => { + if (index === keys.length) { + combinations.push(currentCombination as T); + return; + } - const key = keys[index]; - const values = options[key]; + const key = keys[index]; + const values = options[key]; - for (const value of values) { - buildCombination(index + 1, { ...currentCombination, [key]: value }); - } - }; + for (const value of values) { + buildCombination(index + 1, { ...currentCombination, [key]: value }); + } + }; - buildCombination(0, {}); - return combinations; - }; + buildCombination(0, {}); + return combinations; + }; - const propCombinations = generateCombinations(propOptions); + const propCombinations = generateCombinations(propOptions); - return { - render: () => html` -
- ${propCombinations.map( - (props) => html` -
-
- ${Object.entries(props as Record).map( - ([key, value]) => html` -
${key}: ${JSON.stringify(value)}
- ` - )} -
-
- ${template({ ...props, slot: slotContent })} -
-
- ` - )} -
- `, - tags: ['!dev'], // Add the default tag here - }; -}; + return () => html` +
+ ${propCombinations.map( + (props) => html` +
+
+ ${Object.entries(props as Record).map( + ([key, value]) => html` +
${key}: ${JSON.stringify(value)}
+ ` + )} +
+
+ ${template({ ...props, slot: slotContent })} +
+
+ ` + )} +
+ `; +}; \ No newline at end of file From cabf076492dfc449e002f288c18356228920ca97 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Mon, 25 Nov 2024 15:39:46 +0000 Subject: [PATCH 07/34] fix linting --- .../stories/pie-assistive-text.stories.ts | 4 +- .../stories/pie-button.stories.ts | 4 +- .../pie-storybook/stories/pie-card.stories.ts | 5 +- .../stories/pie-checkbox-group.stories.ts | 8 +- .../stories/pie-checkbox.stories.ts | 4 +- .../pie-storybook/stories/pie-chip.stories.ts | 22 +++-- .../stories/pie-cookie-banner.stories.ts | 4 +- .../stories/pie-divider.stories.ts | 4 +- apps/pie-storybook/stories/pie-foo.stories.ts | 34 ++++---- .../stories/pie-form-label.stories.ts | 6 +- .../stories/pie-icon-button.stories.ts | 5 +- .../pie-storybook/stories/pie-link.stories.ts | 6 +- .../stories/pie-lottie-player.stories.ts | 2 +- .../stories/pie-modal.stories.ts | 2 +- .../stories/pie-notification.stories.ts | 2 +- .../stories/pie-radio-group.stories.ts | 2 +- .../stories/pie-radio.stories.ts | 2 +- .../stories/pie-spinner.stories.ts | 2 +- .../stories/pie-switch.stories.ts | 2 +- apps/pie-storybook/stories/pie-tag.stories.ts | 2 +- .../stories/pie-text-input.stories.ts | 2 +- .../stories/pie-textarea.stories.ts | 2 +- .../stories/pie-toast.stories.ts | 2 +- apps/pie-storybook/types/ExtendedMeta.ts | 2 +- apps/pie-storybook/types/index.ts | 2 +- apps/pie-storybook/utilities/index.ts | 83 +++++++++---------- 26 files changed, 110 insertions(+), 105 deletions(-) diff --git a/apps/pie-storybook/stories/pie-assistive-text.stories.ts b/apps/pie-storybook/stories/pie-assistive-text.stories.ts index fc1cfda5eb..ce2378c51f 100644 --- a/apps/pie-storybook/stories/pie-assistive-text.stories.ts +++ b/apps/pie-storybook/stories/pie-assistive-text.stories.ts @@ -1,9 +1,9 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; - import '@justeattakeaway/pie-assistive-text'; + import { type AssistiveTextProps as AssistiveTextBaseProps, variants, defaultProps } from '@justeattakeaway/pie-assistive-text'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; diff --git a/apps/pie-storybook/stories/pie-button.stories.ts b/apps/pie-storybook/stories/pie-button.stories.ts index 9e04f98f2d..3ca75bdf5f 100644 --- a/apps/pie-storybook/stories/pie-button.stories.ts +++ b/apps/pie-storybook/stories/pie-button.stories.ts @@ -1,11 +1,11 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; - import '@justeattakeaway/pie-button'; + import { type ButtonProps as ButtonPropsBase, defaultProps, iconPlacements, responsiveSizes, sizes, types, variants, } from '@justeattakeaway/pie-button'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-icons-webc/dist/IconPlusCircle.js'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; diff --git a/apps/pie-storybook/stories/pie-card.stories.ts b/apps/pie-storybook/stories/pie-card.stories.ts index cb2f5d4412..9023fe40ec 100644 --- a/apps/pie-storybook/stories/pie-card.stories.ts +++ b/apps/pie-storybook/stories/pie-card.stories.ts @@ -1,13 +1,14 @@ import { nothing } from 'lit'; import { html } from 'lit/static-html.js'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; +import '@justeattakeaway/pie-card'; + import { action } from '@storybook/addon-actions'; -import '@justeattakeaway/pie-card'; import { type CardProps as CardPropsBase, variants, tags, paddingValues, defaultProps, } from '@justeattakeaway/pie-card'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; diff --git a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts index de6ab4cd1d..7ecf6c4518 100644 --- a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts +++ b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts @@ -1,12 +1,12 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; - -import '@justeattakeaway/pie-checkbox-group'; -import { type CheckboxGroupProps as CheckboxGroupPropsBase, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group'; import '@justeattakeaway/pie-link'; import '@justeattakeaway/pie-checkbox'; import '@justeattakeaway/pie-form-label'; +import '@justeattakeaway/pie-checkbox-group'; + +import { type CheckboxGroupProps as CheckboxGroupPropsBase, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory } from '../utilities'; diff --git a/apps/pie-storybook/stories/pie-checkbox.stories.ts b/apps/pie-storybook/stories/pie-checkbox.stories.ts index 2d496b4eca..cd695edd59 100644 --- a/apps/pie-storybook/stories/pie-checkbox.stories.ts +++ b/apps/pie-storybook/stories/pie-checkbox.stories.ts @@ -1,11 +1,11 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; - import '@justeattakeaway/pie-checkbox'; + import { type CheckboxProps as CheckboxBaseProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox'; import { action } from '@storybook/addon-actions'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index 9eb4bc095d..2adba90709 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -1,14 +1,16 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; - import '@justeattakeaway/pie-chip'; -import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip'; import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js'; +import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; -import { createStory, createVariantStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; + +import { + createStory, createVariantStory, type TemplateFunction, sanitizeAndRenderHTML, +} from '../utilities'; type ChipProps = SlottedComponentProps & { showIcon: boolean }; type ChipStoryMeta = ExtendedMeta; @@ -122,7 +124,11 @@ const createChipStory = createStory(Template, defaultArgs); export const Default = createChipStory(); export const Outline = createChipStory({ variant: 'outline' }); -export const Ghost = createChipStory({ variant: 'ghost' }); + +export const Ghost = { + render: createChipStory({ variant: 'ghost' }), + tags: ['!dev'], +}; // Define the prop options for the matrix const propOptions = { @@ -131,10 +137,10 @@ const propOptions = { isSelected: [true, false], isLoading: [true, false], isDismissible: [true, false], - showIcon: [true, false] + showIcon: [true, false], }; export const AllPropVariations = { - render: createVariantStory(Template, propOptions, 'Hello World'), - tags: ['!dev'], + render: createVariantStory(Template, propOptions, 'Hello World'), + tags: ['!dev'], }; diff --git a/apps/pie-storybook/stories/pie-cookie-banner.stories.ts b/apps/pie-storybook/stories/pie-cookie-banner.stories.ts index 13690d13c2..5e60a546e4 100644 --- a/apps/pie-storybook/stories/pie-cookie-banner.stories.ts +++ b/apps/pie-storybook/stories/pie-cookie-banner.stories.ts @@ -1,13 +1,13 @@ import { html } from 'lit'; import { action } from '@storybook/addon-actions'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; - import '@justeattakeaway/pie-cookie-banner'; + import { type CookieBannerProps, defaultProps } from '@justeattakeaway/pie-cookie-banner'; import { Country, Language, } from '@justeattakeaway/pie-cookie-banner/src/defs'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory } from '../utilities'; type CookieBannerStoryMeta = ExtendedMeta; diff --git a/apps/pie-storybook/stories/pie-divider.stories.ts b/apps/pie-storybook/stories/pie-divider.stories.ts index 872fd0d664..7cb19f0447 100644 --- a/apps/pie-storybook/stories/pie-divider.stories.ts +++ b/apps/pie-storybook/stories/pie-divider.stories.ts @@ -1,11 +1,11 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; - import '@justeattakeaway/pie-divider'; + import { type DividerProps, variants, orientations, defaultProps, } from '@justeattakeaway/pie-divider'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory, type TemplateFunction } from '../utilities'; diff --git a/apps/pie-storybook/stories/pie-foo.stories.ts b/apps/pie-storybook/stories/pie-foo.stories.ts index eaf0ff497a..ca5df95733 100644 --- a/apps/pie-storybook/stories/pie-foo.stories.ts +++ b/apps/pie-storybook/stories/pie-foo.stories.ts @@ -1,34 +1,34 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; - + import '@justeattakeaway/pie-divider'; const meta: Meta = { - title: 'Foo', - component: 'pie-divider', + title: 'Foo', + component: 'pie-divider', }; export default meta; - + type Story = StoryObj; - + export const Variant1: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['dev', '!autodocs'], - args: { variant: 1 }, + // 👇 This story will not appear in Storybook's sidebar or docs page + tags: ['dev', '!autodocs'], + args: { variant: 1 }, }; - + export const Variant2: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['dev', '!autodocs'], - args: { variant: 2 }, + // 👇 This story will not appear in Storybook's sidebar or docs page + tags: ['dev', '!autodocs'], + args: { variant: 2 }, }; - + export const Combo: Story = { - // 👇 This story should not be tested, but will appear in the sidebar and docs page - tags: ['!dev'], - render: () => html` + // 👇 This story should not be tested, but will appear in the sidebar and docs page + tags: ['!dev'], + render: () => html`
`, -}; \ No newline at end of file +}; diff --git a/apps/pie-storybook/stories/pie-form-label.stories.ts b/apps/pie-storybook/stories/pie-form-label.stories.ts index df183d535c..03ab6e1cde 100644 --- a/apps/pie-storybook/stories/pie-form-label.stories.ts +++ b/apps/pie-storybook/stories/pie-form-label.stories.ts @@ -1,10 +1,10 @@ import { html, nothing } from 'lit'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; - import '@justeattakeaway/pie-form-label'; -import { type FormLabelProps as FormLabelPropsBase } from '@justeattakeaway/pie-form-label'; +import { type FormLabelProps as FormLabelPropsBase } from '@justeattakeaway/pie-form-label'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; + import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type FormLabelProps = SlottedComponentProps; diff --git a/apps/pie-storybook/stories/pie-icon-button.stories.ts b/apps/pie-storybook/stories/pie-icon-button.stories.ts index 0090324d45..c7f6cf3d00 100644 --- a/apps/pie-storybook/stories/pie-icon-button.stories.ts +++ b/apps/pie-storybook/stories/pie-icon-button.stories.ts @@ -1,12 +1,11 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; - import '@justeattakeaway/pie-icon-button'; +import '@justeattakeaway/pie-icons-webc/dist/IconClose.js'; import { type IconButtonProps, sizes, variants, defaultProps, } from '@justeattakeaway/pie-icon-button'; -import '@justeattakeaway/pie-icons-webc/dist/IconClose.js'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory, type TemplateFunction } from '../utilities'; diff --git a/apps/pie-storybook/stories/pie-link.stories.ts b/apps/pie-storybook/stories/pie-link.stories.ts index 12c7a0c8c3..58aab80457 100644 --- a/apps/pie-storybook/stories/pie-link.stories.ts +++ b/apps/pie-storybook/stories/pie-link.stories.ts @@ -1,12 +1,12 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; - import '@justeattakeaway/pie-link'; +import '@justeattakeaway/pie-icons-webc/dist/IconPlusCircle.js'; + import { type LinkProps as LinkBaseProps, sizes, variants, iconPlacements, tags, buttonTypes, underlineTypes, defaultProps, } from '@justeattakeaway/pie-link'; -import '@justeattakeaway/pie-icons-webc/dist/IconPlusCircle.js'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; diff --git a/apps/pie-storybook/stories/pie-lottie-player.stories.ts b/apps/pie-storybook/stories/pie-lottie-player.stories.ts index e6ddbf70fe..79bffcc705 100644 --- a/apps/pie-storybook/stories/pie-lottie-player.stories.ts +++ b/apps/pie-storybook/stories/pie-lottie-player.stories.ts @@ -1,11 +1,11 @@ import { html } from 'lit'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-lottie-player'; import { type LottiePlayerProps as LottiePlayerBaseProps, type PieLottiePlayer, defaultProps, directions, } from '@justeattakeaway/pie-lottie-player'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory } from '../utilities'; type LottiePlayerProps = Omit diff --git a/apps/pie-storybook/stories/pie-modal.stories.ts b/apps/pie-storybook/stories/pie-modal.stories.ts index 454f98eaff..2aab42c63f 100644 --- a/apps/pie-storybook/stories/pie-modal.stories.ts +++ b/apps/pie-storybook/stories/pie-modal.stories.ts @@ -1,7 +1,6 @@ import { html } from 'lit/static-html.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-modal'; import { @@ -12,6 +11,7 @@ import '@justeattakeaway/pie-button'; import '@justeattakeaway/pie-text-input'; import '@justeattakeaway/pie-form-label'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; import { createStory, sanitizeAndRenderHTML } from '../utilities'; diff --git a/apps/pie-storybook/stories/pie-notification.stories.ts b/apps/pie-storybook/stories/pie-notification.stories.ts index 16e85084e7..6f22511e9a 100644 --- a/apps/pie-storybook/stories/pie-notification.stories.ts +++ b/apps/pie-storybook/stories/pie-notification.stories.ts @@ -1,7 +1,6 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-notification'; import { @@ -10,6 +9,7 @@ import { import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory, type TemplateFunction } from '../utilities'; // Extending the props type definition to include storybook specific properties for controls diff --git a/apps/pie-storybook/stories/pie-radio-group.stories.ts b/apps/pie-storybook/stories/pie-radio-group.stories.ts index 4f05edb8a7..9f0730a1dc 100644 --- a/apps/pie-storybook/stories/pie-radio-group.stories.ts +++ b/apps/pie-storybook/stories/pie-radio-group.stories.ts @@ -1,6 +1,5 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { action } from '@storybook/addon-actions'; import '@justeattakeaway/pie-radio-group'; @@ -13,6 +12,7 @@ import '@justeattakeaway/pie-link'; import '@justeattakeaway/pie-radio'; import '@justeattakeaway/pie-form-label'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory } from '../utilities'; // Extending the props type definition to include storybook specific properties for controls diff --git a/apps/pie-storybook/stories/pie-radio.stories.ts b/apps/pie-storybook/stories/pie-radio.stories.ts index c05da6fbc9..d6747e46be 100644 --- a/apps/pie-storybook/stories/pie-radio.stories.ts +++ b/apps/pie-storybook/stories/pie-radio.stories.ts @@ -1,7 +1,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { useArgs as UseArgs } from '@storybook/preview-api'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-radio'; import { @@ -10,6 +9,7 @@ import { type RadioProps as RadioBaseProps, } from '@justeattakeaway/pie-radio'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; import { createStory, sanitizeAndRenderHTML, type TemplateFunction } from '../utilities'; diff --git a/apps/pie-storybook/stories/pie-spinner.stories.ts b/apps/pie-storybook/stories/pie-spinner.stories.ts index e4f806a0d3..e7785904a7 100644 --- a/apps/pie-storybook/stories/pie-spinner.stories.ts +++ b/apps/pie-storybook/stories/pie-spinner.stories.ts @@ -1,12 +1,12 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-spinner'; import { type SpinnerProps, sizes, variants, defaultProps, } from '@justeattakeaway/pie-spinner'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type TemplateFunction, createStory } from '../utilities'; type SpinnerStoryMeta = ExtendedMeta; diff --git a/apps/pie-storybook/stories/pie-switch.stories.ts b/apps/pie-storybook/stories/pie-switch.stories.ts index dd9d712f12..9d89bd3b33 100644 --- a/apps/pie-storybook/stories/pie-switch.stories.ts +++ b/apps/pie-storybook/stories/pie-switch.stories.ts @@ -1,11 +1,11 @@ import { html, nothing } from 'lit'; import { action } from '@storybook/addon-actions'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-switch'; import { type SwitchProps, labelPlacements, defaultProps } from '@justeattakeaway/pie-switch'; import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory, type TemplateFunction } from '../utilities'; type SwitchStoryMeta = ExtendedMeta; diff --git a/apps/pie-storybook/stories/pie-tag.stories.ts b/apps/pie-storybook/stories/pie-tag.stories.ts index 1ab464d55c..16e23ea8a7 100644 --- a/apps/pie-storybook/stories/pie-tag.stories.ts +++ b/apps/pie-storybook/stories/pie-tag.stories.ts @@ -1,6 +1,5 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-tag'; import { @@ -12,6 +11,7 @@ import { } from '@justeattakeaway/pie-tag'; import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; diff --git a/apps/pie-storybook/stories/pie-text-input.stories.ts b/apps/pie-storybook/stories/pie-text-input.stories.ts index 88783b61a9..a6919507d1 100644 --- a/apps/pie-storybook/stories/pie-text-input.stories.ts +++ b/apps/pie-storybook/stories/pie-text-input.stories.ts @@ -2,7 +2,6 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; import { useArgs as UseArgs } from '@storybook/preview-api'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-text-input'; import { @@ -19,6 +18,7 @@ import '@justeattakeaway/pie-icons-webc/dist/IconUser.js'; import '@justeattakeaway/pie-icons-webc/dist/IconNumberSymbol.js'; import '@justeattakeaway/pie-icons-webc/dist/IconKey.js'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory, type TemplateFunction } from '../utilities'; // Extending the props type definition to include storybook specific properties for controls diff --git a/apps/pie-storybook/stories/pie-textarea.stories.ts b/apps/pie-storybook/stories/pie-textarea.stories.ts index ded9de2bd0..4f23c13ad7 100644 --- a/apps/pie-storybook/stories/pie-textarea.stories.ts +++ b/apps/pie-storybook/stories/pie-textarea.stories.ts @@ -2,7 +2,6 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; import { useArgs as UseArgs } from '@storybook/preview-api'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-textarea'; import { @@ -12,6 +11,7 @@ import '@justeattakeaway/pie-button'; import '@justeattakeaway/pie-form-label'; import '@justeattakeaway/pie-link'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory, type TemplateFunction } from '../utilities'; type TextareaStoryMeta = ExtendedMeta; diff --git a/apps/pie-storybook/stories/pie-toast.stories.ts b/apps/pie-storybook/stories/pie-toast.stories.ts index 3002fd40bf..77187afc22 100644 --- a/apps/pie-storybook/stories/pie-toast.stories.ts +++ b/apps/pie-storybook/stories/pie-toast.stories.ts @@ -2,8 +2,8 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { useArgs } from '@storybook/preview-api'; import { action } from '@storybook/addon-actions'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type ToastProps, defaultProps, variants } from '@justeattakeaway/pie-toast'; +import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type TemplateFunction, createStory } from '../utilities'; diff --git a/apps/pie-storybook/types/ExtendedMeta.ts b/apps/pie-storybook/types/ExtendedMeta.ts index d77d50ee9a..a5e320371a 100644 --- a/apps/pie-storybook/types/ExtendedMeta.ts +++ b/apps/pie-storybook/types/ExtendedMeta.ts @@ -1,3 +1,3 @@ import { type Meta } from '@storybook/web-components'; -export type ExtendedMeta = Meta & { showInTestingDeployment?: boolean }; \ No newline at end of file +export type ExtendedMeta = Meta & { showInTestingDeployment?: boolean }; diff --git a/apps/pie-storybook/types/index.ts b/apps/pie-storybook/types/index.ts index b3809a1bef..94b7e7e39e 100644 --- a/apps/pie-storybook/types/index.ts +++ b/apps/pie-storybook/types/index.ts @@ -1,2 +1,2 @@ export * from './SlottedComponentProps'; -export * from './ExtendedMeta'; \ No newline at end of file +export * from './ExtendedMeta'; diff --git a/apps/pie-storybook/utilities/index.ts b/apps/pie-storybook/utilities/index.ts index 831f2b4598..cbe1032b2a 100644 --- a/apps/pie-storybook/utilities/index.ts +++ b/apps/pie-storybook/utilities/index.ts @@ -74,52 +74,51 @@ export const sanitizeAndRenderHTML = (slot: string) => unsafeHTML(DOMPurify.sani * @returns {Function} Returns a function that renders all combinations of the given prop options. */ export const createVariantStory = ( - template: TemplateFunction, - propOptions: Record, - slotContent: string + template: TemplateFunction, + propOptions: Record, + slotContent: string, ) => { - const generateCombinations = (options: Record): T[] => { - const keys = Object.keys(options) as (keyof T)[]; - const combinations: T[] = []; + const generateCombinations = (options: Record): T[] => { + const keys = Object.keys(options) as (keyof T)[]; + const combinations: T[] = []; - const buildCombination = (index: number, currentCombination: Partial) => { - if (index === keys.length) { - combinations.push(currentCombination as T); - return; - } + const buildCombination = (index: number, currentCombination: Partial) => { + if (index === keys.length) { + combinations.push(currentCombination as T); + return; + } - const key = keys[index]; - const values = options[key]; + const key = keys[index]; + const values = options[key]; - for (const value of values) { - buildCombination(index + 1, { ...currentCombination, [key]: value }); - } - }; + values.forEach((value) => { + buildCombination(index + 1, { ...currentCombination, [key]: value }); + }); + }; - buildCombination(0, {}); - return combinations; - }; + buildCombination(0, {}); + return combinations; + }; - const propCombinations = generateCombinations(propOptions); + const propCombinations = generateCombinations(propOptions); - return () => html` -
- ${propCombinations.map( - (props) => html` -
-
- ${Object.entries(props as Record).map( - ([key, value]) => html` -
${key}: ${JSON.stringify(value)}
- ` - )} -
-
- ${template({ ...props, slot: slotContent })} -
-
- ` - )} -
- `; -}; \ No newline at end of file + return { + render: () => html` +
+ ${propCombinations.map((props) => html` +
+
+ ${Object.entries(props as Record).map(([key, value]) => html` +
${key}: ${JSON.stringify(value)}
+ `)} +
+
+ ${template({ ...props, slot: slotContent })} +
+
+ `)} +
+ `, + tags: ['!dev'], + }; +}; From fae7e3620be140c82b15080f2063a4875f26a331 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Mon, 25 Nov 2024 16:09:00 +0000 Subject: [PATCH 08/34] fix linting --- apps/pie-storybook/.storybook/preview.ts | 1 + .../pie-storybook/stories/pie-chip.stories.ts | 10 +-- apps/pie-storybook/utilities/index.ts | 86 ++++++++++--------- .../changeset-snapshot/test-aperture.js | 2 +- 4 files changed, 51 insertions(+), 48 deletions(-) diff --git a/apps/pie-storybook/.storybook/preview.ts b/apps/pie-storybook/.storybook/preview.ts index 6edc018d1d..66ee7c66e6 100644 --- a/apps/pie-storybook/.storybook/preview.ts +++ b/apps/pie-storybook/.storybook/preview.ts @@ -8,6 +8,7 @@ import { type StoryBackgrounds } from '../types/StoryOptions'; import CUSTOM_VIEWPORTS from './viewports'; export default { + tags: ['prod'], decorators: [ComponentStatus, WritingDirection], globalTypes: { writingDirection: { diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index 2adba90709..83b5a3dc65 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -125,10 +125,7 @@ const createChipStory = createStory(Template, defaultArgs); export const Default = createChipStory(); export const Outline = createChipStory({ variant: 'outline' }); -export const Ghost = { - render: createChipStory({ variant: 'ghost' }), - tags: ['!dev'], -}; +export const Ghost = createChipStory({ variant: 'ghost' }); // Define the prop options for the matrix const propOptions = { @@ -140,7 +137,4 @@ const propOptions = { showIcon: [true, false], }; -export const AllPropVariations = { - render: createVariantStory(Template, propOptions, 'Hello World'), - tags: ['!dev'], -}; +export const AllPropVariations = createVariantStory(Template, propOptions, 'Hello World'); diff --git a/apps/pie-storybook/utilities/index.ts b/apps/pie-storybook/utilities/index.ts index cbe1032b2a..4ed9a3a27d 100644 --- a/apps/pie-storybook/utilities/index.ts +++ b/apps/pie-storybook/utilities/index.ts @@ -77,48 +77,56 @@ export const createVariantStory = ( template: TemplateFunction, propOptions: Record, slotContent: string, -) => { - const generateCombinations = (options: Record): T[] => { - const keys = Object.keys(options) as (keyof T)[]; - const combinations: T[] = []; + storyOpts?: StoryOptions, +) => ({ + render: () => { + const generateCombinations = (options: Record): T[] => { + const keys = Object.keys(options) as (keyof T)[]; + const combinations: T[] = []; - const buildCombination = (index: number, currentCombination: Partial) => { - if (index === keys.length) { - combinations.push(currentCombination as T); - return; - } + const buildCombination = (index: number, currentCombination: Partial) => { + if (index === keys.length) { + combinations.push(currentCombination as T); + return; + } - const key = keys[index]; - const values = options[key]; + const key = keys[index]; + const values = options[key]; - values.forEach((value) => { - buildCombination(index + 1, { ...currentCombination, [key]: value }); - }); - }; + values.forEach((value) => { + buildCombination(index + 1, { ...currentCombination, [key]: value }); + }); + }; - buildCombination(0, {}); - return combinations; - }; + buildCombination(0, {}); + return combinations; + }; - const propCombinations = generateCombinations(propOptions); + const propCombinations = generateCombinations(propOptions); - return { - render: () => html` -
- ${propCombinations.map((props) => html` -
-
- ${Object.entries(props as Record).map(([key, value]) => html` -
${key}: ${JSON.stringify(value)}
- `)} -
-
- ${template({ ...props, slot: slotContent })} -
-
- `)} -
- `, - tags: ['!dev'], - }; -}; + return html` +
+ ${propCombinations.map((props) => html` +
+
+ ${Object.entries(props as Record).map(([key, value]) => html` +
${key}: ${JSON.stringify(value)}
+ `)} +
+
+ ${template({ ...props, slot: slotContent })} +
+
+ `)} +
+ `; + }, + parameters: { + backgrounds: { + ...(storyOpts?.bgColor ? { default: storyOpts.bgColor } : {}), + }, + controls: { ...(storyOpts?.controls ? storyOpts.controls : {}) }, + ...(storyOpts?.layout ? { layout: storyOpts?.layout || 'centered' } : {}), + }, + ...(storyOpts?.argTypes ? { argTypes: storyOpts?.argTypes } : {}), + }); diff --git a/packages/tools/pie-monorepo-utils/changeset-snapshot/test-aperture.js b/packages/tools/pie-monorepo-utils/changeset-snapshot/test-aperture.js index acab1fa619..3cfcd55a62 100644 --- a/packages/tools/pie-monorepo-utils/changeset-snapshot/test-aperture.js +++ b/packages/tools/pie-monorepo-utils/changeset-snapshot/test-aperture.js @@ -14,7 +14,7 @@ module.exports = async ({ github, context }, execa) => { // Extract the snapshot version from one of the tags // eslint-disable-next-line prefer-destructuring - const snapshotVersion = newTags[0].match(/\d{14}$/)[0]; + const snapshotVersion = newTags[0].match(/\d{14}$/); // Extract package names by removing version and scope from the tags const packageNames = newTags.map((tag) => `@justeattakeaway/${tag.match(/pie-[\w-]+/)[0]}`); From ac288ae31c4a31b3a996d2c73731458205af3da3 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Mon, 25 Nov 2024 16:10:24 +0000 Subject: [PATCH 09/34] fix linting --- .../pie-monorepo-utils/changeset-snapshot/test-aperture.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/tools/pie-monorepo-utils/changeset-snapshot/test-aperture.js b/packages/tools/pie-monorepo-utils/changeset-snapshot/test-aperture.js index 3cfcd55a62..5f76b37877 100644 --- a/packages/tools/pie-monorepo-utils/changeset-snapshot/test-aperture.js +++ b/packages/tools/pie-monorepo-utils/changeset-snapshot/test-aperture.js @@ -13,8 +13,7 @@ module.exports = async ({ github, context }, execa) => { .filter((tag) => !/^wc-.+$|pie-(monorepo|docs|storybook)/.test(tag)); // Extract the snapshot version from one of the tags - // eslint-disable-next-line prefer-destructuring - const snapshotVersion = newTags[0].match(/\d{14}$/); + const [snapshotVersion] = newTags[0].match(/\d{14}$/); // Extract package names by removing version and scope from the tags const packageNames = newTags.map((tag) => `@justeattakeaway/${tag.match(/pie-[\w-]+/)[0]}`); From b6389dd7d531822edc3c4b0246f07b8bc44908e5 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Mon, 25 Nov 2024 16:11:56 +0000 Subject: [PATCH 10/34] fix linting --- apps/pie-storybook/.storybook/preview.ts | 1 - apps/pie-storybook/stories/pie-foo.stories.ts | 34 ------------------- 2 files changed, 35 deletions(-) delete mode 100644 apps/pie-storybook/stories/pie-foo.stories.ts diff --git a/apps/pie-storybook/.storybook/preview.ts b/apps/pie-storybook/.storybook/preview.ts index 66ee7c66e6..6edc018d1d 100644 --- a/apps/pie-storybook/.storybook/preview.ts +++ b/apps/pie-storybook/.storybook/preview.ts @@ -8,7 +8,6 @@ import { type StoryBackgrounds } from '../types/StoryOptions'; import CUSTOM_VIEWPORTS from './viewports'; export default { - tags: ['prod'], decorators: [ComponentStatus, WritingDirection], globalTypes: { writingDirection: { diff --git a/apps/pie-storybook/stories/pie-foo.stories.ts b/apps/pie-storybook/stories/pie-foo.stories.ts deleted file mode 100644 index ca5df95733..0000000000 --- a/apps/pie-storybook/stories/pie-foo.stories.ts +++ /dev/null @@ -1,34 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/web-components'; -import { html } from 'lit'; - -import '@justeattakeaway/pie-divider'; - -const meta: Meta = { - title: 'Foo', - component: 'pie-divider', -}; -export default meta; - -type Story = StoryObj; - -export const Variant1: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['dev', '!autodocs'], - args: { variant: 1 }, -}; - -export const Variant2: Story = { - // 👇 This story will not appear in Storybook's sidebar or docs page - tags: ['dev', '!autodocs'], - args: { variant: 2 }, -}; - -export const Combo: Story = { - // 👇 This story should not be tested, but will appear in the sidebar and docs page - tags: ['!dev'], - render: () => html` -
- -
- `, -}; From 92e9c169e2a0151985b6bd52ae6b54fea577e825 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Tue, 26 Nov 2024 11:22:08 +0000 Subject: [PATCH 11/34] fix ts warnings --- apps/pie-storybook/stories/pie-chip.stories.ts | 6 ++++-- apps/pie-storybook/utilities/index.ts | 3 +-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index 83b5a3dc65..5311b5e215 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -129,12 +129,14 @@ export const Ghost = createChipStory({ variant: 'ghost' }); // Define the prop options for the matrix const propOptions = { - variant: variants, + variant: [...variants], disabled: [true, false], isSelected: [true, false], isLoading: [true, false], isDismissible: [true, false], showIcon: [true, false], + aria: [defaultArgs.aria], + slot: ['Hello World'], }; -export const AllPropVariations = createVariantStory(Template, propOptions, 'Hello World'); +export const AllPropVariations = createVariantStory(Template, propOptions); diff --git a/apps/pie-storybook/utilities/index.ts b/apps/pie-storybook/utilities/index.ts index 4ed9a3a27d..087d5cad9e 100644 --- a/apps/pie-storybook/utilities/index.ts +++ b/apps/pie-storybook/utilities/index.ts @@ -76,7 +76,6 @@ export const sanitizeAndRenderHTML = (slot: string) => unsafeHTML(DOMPurify.sani export const createVariantStory = ( template: TemplateFunction, propOptions: Record, - slotContent: string, storyOpts?: StoryOptions, ) => ({ render: () => { @@ -114,7 +113,7 @@ export const createVariantStory = ( `)}
- ${template({ ...props, slot: slotContent })} + ${template({ ...props })}
`)} From d044d326012272eec69a551c3e6db27e266a1398 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Tue, 26 Nov 2024 11:23:28 +0000 Subject: [PATCH 12/34] fix ts warnings --- apps/pie-storybook/stories/pie-chip.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index 5311b5e215..48e8acf64b 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -139,4 +139,4 @@ const propOptions = { slot: ['Hello World'], }; -export const AllPropVariations = createVariantStory(Template, propOptions); +export const AllPropVariations = createVariantStory(Template, propOptions); From 22b3a1e346be337dbc8d04e6e5f58c3236219541 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Tue, 26 Nov 2024 11:37:19 +0000 Subject: [PATCH 13/34] update jsdoc --- apps/pie-storybook/utilities/index.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/pie-storybook/utilities/index.ts b/apps/pie-storybook/utilities/index.ts index 087d5cad9e..591908538c 100644 --- a/apps/pie-storybook/utilities/index.ts +++ b/apps/pie-storybook/utilities/index.ts @@ -67,9 +67,7 @@ export const sanitizeAndRenderHTML = (slot: string) => unsafeHTML(DOMPurify.sani * @template T The type representing the properties of the Lit web component. * * @param {TemplateFunction} template - The function responsible for rendering the Lit web component. - * @param {T} defaultArgs - A set of default property values to be used for each story. * @param {Record} propOptions - An object defining the possible values for each prop. - * @param {string} slotContent - The content to be placed within the component's slot. * * @returns {Function} Returns a function that renders all combinations of the given prop options. */ From 3377b89e97dfe9eedf23ef170d002a8ab21b2aca Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Tue, 26 Nov 2024 12:47:36 +0000 Subject: [PATCH 14/34] chip visual test to use storybook --- .../.storybook/styles/component-status.scss | 4 ++ .../decorators/component-status.ts | 2 +- .../pie-storybook/stories/pie-chip.stories.ts | 22 +++++- apps/pie-storybook/utilities/index.ts | 16 ++++- .../pie-chip/test/visual/pie-chip.spec.ts | 67 ++----------------- packages/components/pie-chip/turbo.json | 16 +++++ .../page-object/storybook-extensions.ts | 10 ++- 7 files changed, 66 insertions(+), 71 deletions(-) create mode 100644 packages/components/pie-chip/turbo.json diff --git a/apps/pie-storybook/.storybook/styles/component-status.scss b/apps/pie-storybook/.storybook/styles/component-status.scss index 7c0eaa9259..8ba32d8853 100644 --- a/apps/pie-storybook/.storybook/styles/component-status.scss +++ b/apps/pie-storybook/.storybook/styles/component-status.scss @@ -19,3 +19,7 @@ .c-componentStatus--top { inset-block-start: var(--dt-spacing-c); } + +.percyHidden { + display: none; +} diff --git a/apps/pie-storybook/decorators/component-status.ts b/apps/pie-storybook/decorators/component-status.ts index bef6d50948..57bc7a07a2 100644 --- a/apps/pie-storybook/decorators/component-status.ts +++ b/apps/pie-storybook/decorators/component-status.ts @@ -26,7 +26,7 @@ export const ComponentStatus = (story: () => TemplateResult, storybookContext: S
${story()} -
+
Status: ${componentStatus} (Template, propOptions); +const defaultPropOptions = { + ...sharedPropOptions, + variant: ['default'], +}; + +const ghostPropOptions = { + ...sharedPropOptions, + variant: ['ghost'], +}; + +const outlinePropOptions = { + ...sharedPropOptions, + variant: ['outline'], +}; + +export const DefaultPropVariations = createVariantStory(Template, defaultPropOptions); +export const GhostPropVariations = createVariantStory(Template, ghostPropOptions); +export const OutlinePropVariations = createVariantStory(Template, outlinePropOptions); diff --git a/apps/pie-storybook/utilities/index.ts b/apps/pie-storybook/utilities/index.ts index 591908538c..d481cd082f 100644 --- a/apps/pie-storybook/utilities/index.ts +++ b/apps/pie-storybook/utilities/index.ts @@ -122,8 +122,18 @@ export const createVariantStory = ( backgrounds: { ...(storyOpts?.bgColor ? { default: storyOpts.bgColor } : {}), }, - controls: { ...(storyOpts?.controls ? storyOpts.controls : {}) }, - ...(storyOpts?.layout ? { layout: storyOpts?.layout || 'centered' } : {}), + controls: { + disable: true, + }, + design: { + disable: true, + }, + actions: { + disable: true, + }, + a11y: { + disable: true, + }, }, - ...(storyOpts?.argTypes ? { argTypes: storyOpts?.argTypes } : {}), + // ...(storyOpts?.argTypes ? { argTypes: storyOpts?.argTypes } : {}), }); diff --git a/packages/components/pie-chip/test/visual/pie-chip.spec.ts b/packages/components/pie-chip/test/visual/pie-chip.spec.ts index 22c084eeb8..1ab6395b72 100644 --- a/packages/components/pie-chip/test/visual/pie-chip.spec.ts +++ b/packages/components/pie-chip/test/visual/pie-chip.spec.ts @@ -1,70 +1,13 @@ -import { test } from '@sand4rt/experimental-ct-web'; +import { test } from '@playwright/test'; import percySnapshot from '@percy/playwright'; -import type { - PropObject, WebComponentPropValues, WebComponentTestInput, -} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts'; -import { - getAllPropCombinations, splitCombinationsByPropertyValue, -} from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts'; -import { - createTestWebComponent, -} from '@justeattakeaway/pie-webc-testing/src/helpers/rendering.ts'; -import { - WebComponentTestWrapper, -} from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts'; import { percyWidths } from '@justeattakeaway/pie-webc-testing/src/percy/breakpoints.ts'; -import { IconHeartFilled } from '@justeattakeaway/pie-icons-webc'; import { variants } from '../../src/defs.ts'; -import { PieChip } from '../../src/index.ts'; +import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts'; -const props: PropObject = { - variant: variants, - disabled: [true, false], - isSelected: [true, false], - isLoading: [true, false], - isDismissible: [true, false], - iconSlot: ['', ''], -}; +variants.forEach((variant) => test(`should render all prop variations for Variant: ${variant}`, async ({ page }) => { + let basePage = new BasePage(page, `chip--${variant}-prop-variations`); -// Renders a HTML string with the given prop values -const renderTestPieChip = (propVals: WebComponentPropValues) => `${propVals.iconSlot} Hello world`; - -const componentPropsMatrix: WebComponentPropValues[] = getAllPropCombinations(props); -const componentPropsMatrixByVariant: Record = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant'); -const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant); - -test.beforeEach(async ({ mount }, testInfo) => { - testInfo.setTimeout(testInfo.timeout + 40000); - - // This ensures the chip and icon components are registered in the DOM for each test. - // It appears to add them to a Playwright cache which we understand is required for the tests to work correctly. - const chipComponent = await mount(PieChip); - await chipComponent.unmount(); - const iconComponent = await mount(IconHeartFilled); - await iconComponent.unmount(); -}); - -componentVariants.forEach((variant) => test(`should render all prop variations for Variant: ${variant}`, async ({ page, mount }) => { - for (const combo of componentPropsMatrixByVariant[variant]) { - const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieChip); - const propKeyValues = ` - variant: ${testComponent.propValues.variant}, - isSelected: ${testComponent.propValues.isSelected}, - isLoading: ${testComponent.propValues.isLoading}, - isDismissible: ${testComponent.propValues.isDismissible}, - disabled: ${testComponent.propValues.disabled}, - iconSlot: ${testComponent.propValues.iconSlot ? 'with icon' : 'no icon'}`; - - await mount( - WebComponentTestWrapper, - { - props: { propKeyValues }, - slots: { - component: testComponent.renderedString.trim(), - }, - }, - ); - } + basePage.load(); // Follow up to remove in Jan await page.waitForTimeout(5000); diff --git a/packages/components/pie-chip/turbo.json b/packages/components/pie-chip/turbo.json new file mode 100644 index 0000000000..17ee891780 --- /dev/null +++ b/packages/components/pie-chip/turbo.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://turborepo.org/schema.json", + "extends": [ + "//" + ], + "pipeline": { + "test:visual": { + "cache": false, + "dependsOn": [] + }, + "test:visual:ci": { + "cache": false, + "dependsOn": [] + } + } +} \ No newline at end of file diff --git a/packages/components/pie-webc-testing/src/helpers/page-object/storybook-extensions.ts b/packages/components/pie-webc-testing/src/helpers/page-object/storybook-extensions.ts index 72c8ae8afc..fb5138c59d 100644 --- a/packages/components/pie-webc-testing/src/helpers/page-object/storybook-extensions.ts +++ b/packages/components/pie-webc-testing/src/helpers/page-object/storybook-extensions.ts @@ -1,8 +1,14 @@ export const buildUrl = (componentName: string, path: string, args: string) => { const prNumber = process.env.PR_NUMBER; - const baseURL = process.env.CI ? `https://pr${prNumber}-storybook.pie.design` : 'http://localhost:6006'; + const branch = process.env.GITHUB_REF; + + const baseURL = process.env.CI + ? branch === 'refs/heads/main' + ? 'https://webc-testing.pie.design' + : `https://pr${prNumber}-storybook-testing.pie.design` + : 'http://localhost:6006'; - let url = `${baseURL}/iframe.html?id=${componentName}${path}`; + let url = `${baseURL}/iframe.html?id=${componentName}${path ? path : ''}`; if (args) { url += `&args=${args}`; From 3491378b72e7f4560b84c105a7620fea5b808cce Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Tue, 26 Nov 2024 12:54:01 +0000 Subject: [PATCH 15/34] chip visual test to use storybook --- .../pie-chip/test/visual/pie-chip.spec.ts | 6 +++--- .../page-object/storybook-extensions.ts | 18 +++++++++++------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/components/pie-chip/test/visual/pie-chip.spec.ts b/packages/components/pie-chip/test/visual/pie-chip.spec.ts index 1ab6395b72..daa728b0bb 100644 --- a/packages/components/pie-chip/test/visual/pie-chip.spec.ts +++ b/packages/components/pie-chip/test/visual/pie-chip.spec.ts @@ -1,13 +1,13 @@ import { test } from '@playwright/test'; import percySnapshot from '@percy/playwright'; import { percyWidths } from '@justeattakeaway/pie-webc-testing/src/percy/breakpoints.ts'; -import { variants } from '../../src/defs.ts'; import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts'; +import { variants } from '../../src/defs.ts'; variants.forEach((variant) => test(`should render all prop variations for Variant: ${variant}`, async ({ page }) => { - let basePage = new BasePage(page, `chip--${variant}-prop-variations`); + const basePage = new BasePage(page, `chip--${variant}-prop-variations`); - basePage.load(); + basePage.load(); // Follow up to remove in Jan await page.waitForTimeout(5000); diff --git a/packages/components/pie-webc-testing/src/helpers/page-object/storybook-extensions.ts b/packages/components/pie-webc-testing/src/helpers/page-object/storybook-extensions.ts index fb5138c59d..b834e9b93c 100644 --- a/packages/components/pie-webc-testing/src/helpers/page-object/storybook-extensions.ts +++ b/packages/components/pie-webc-testing/src/helpers/page-object/storybook-extensions.ts @@ -1,14 +1,18 @@ export const buildUrl = (componentName: string, path: string, args: string) => { const prNumber = process.env.PR_NUMBER; const branch = process.env.GITHUB_REF; - - const baseURL = process.env.CI - ? branch === 'refs/heads/main' - ? 'https://webc-testing.pie.design' - : `https://pr${prNumber}-storybook-testing.pie.design` - : 'http://localhost:6006'; - let url = `${baseURL}/iframe.html?id=${componentName}${path ? path : ''}`; + let baseURL = 'http://localhost:6006'; + + if (process.env.CI) { + if (branch === 'refs/heads/main') { + baseURL = 'https://webc-testing.pie.design'; + } else { + baseURL = `https://pr${prNumber}-storybook-testing.pie.design`; + } + } + + let url = `${baseURL}/iframe.html?id=${componentName}${path || ''}`; if (args) { url += `&args=${args}`; From d0aca9c21f8d3b22bf91dc24100425b62ef274b5 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Tue, 26 Nov 2024 15:25:20 +0000 Subject: [PATCH 16/34] pr suggestions --- apps/pie-storybook/.storybook/main.ts | 2 +- .../.storybook/styles/component-status.scss | 4 +- .../stories/pie-assistive-text.stories.ts | 7 +- .../stories/pie-button.stories.ts | 7 +- .../pie-storybook/stories/pie-card.stories.ts | 8 +- .../stories/pie-checkbox-group.stories.ts | 11 ++- .../stories/pie-checkbox.stories.ts | 7 +- .../pie-storybook/stories/pie-chip.stories.ts | 38 +-------- .../stories/pie-cookie-banner.stories.ts | 7 +- .../stories/pie-divider.stories.ts | 7 +- .../stories/pie-form-label.stories.ts | 9 +- .../stories/pie-icon-button.stories.ts | 8 +- .../pie-storybook/stories/pie-link.stories.ts | 9 +- .../stories/pie-lottie-player.stories.ts | 5 +- .../stories/pie-modal.stories.ts | 5 +- .../stories/pie-notification.stories.ts | 5 +- .../stories/pie-radio-group.stories.ts | 5 +- .../stories/pie-radio.stories.ts | 5 +- .../stories/pie-spinner.stories.ts | 5 +- .../stories/pie-switch.stories.ts | 5 +- apps/pie-storybook/stories/pie-tag.stories.ts | 5 +- .../stories/pie-text-input.stories.ts | 5 +- .../stories/pie-textarea.stories.ts | 5 +- .../stories/pie-toast.stories.ts | 5 +- .../stories/testing/pie-chip.test.stories.ts | 84 +++++++++++++++++++ apps/pie-storybook/types/ExtendedMeta.ts | 3 - 26 files changed, 149 insertions(+), 117 deletions(-) create mode 100644 apps/pie-storybook/stories/testing/pie-chip.test.stories.ts delete mode 100644 apps/pie-storybook/types/ExtendedMeta.ts diff --git a/apps/pie-storybook/.storybook/main.ts b/apps/pie-storybook/.storybook/main.ts index 35e79f702a..67f25fe9eb 100644 --- a/apps/pie-storybook/.storybook/main.ts +++ b/apps/pie-storybook/.storybook/main.ts @@ -8,7 +8,7 @@ const config: StorybookConfig = { ? getTestingStoryFiles() : [ "../stories/**/*.mdx", - "../stories/**/*.stories.@(js|ts|tsx)" + "../stories/*.stories.@(js|ts|tsx)", ], addons: [ "@storybook/addon-essentials", diff --git a/apps/pie-storybook/.storybook/styles/component-status.scss b/apps/pie-storybook/.storybook/styles/component-status.scss index 8ba32d8853..2219c80376 100644 --- a/apps/pie-storybook/.storybook/styles/component-status.scss +++ b/apps/pie-storybook/.storybook/styles/component-status.scss @@ -20,6 +20,8 @@ inset-block-start: var(--dt-spacing-c); } -.percyHidden { +@media only percy { + .percyHidden { display: none; + } } diff --git a/apps/pie-storybook/stories/pie-assistive-text.stories.ts b/apps/pie-storybook/stories/pie-assistive-text.stories.ts index ce2378c51f..764447975b 100644 --- a/apps/pie-storybook/stories/pie-assistive-text.stories.ts +++ b/apps/pie-storybook/stories/pie-assistive-text.stories.ts @@ -1,15 +1,15 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import '@justeattakeaway/pie-assistive-text'; +import { type Meta } from '@storybook/web-components'; +import '@justeattakeaway/pie-assistive-text'; import { type AssistiveTextProps as AssistiveTextBaseProps, variants, defaultProps } from '@justeattakeaway/pie-assistive-text'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type AssistiveTextProps = SlottedComponentProps; -type AssistiveTextStoryMeta = ExtendedMeta; +type AssistiveTextStoryMeta = Meta; const defaultArgs: AssistiveTextProps = { ...defaultProps, @@ -18,7 +18,6 @@ const defaultArgs: AssistiveTextProps = { const assistiveTextStoryMeta: AssistiveTextStoryMeta = { title: 'Assistive Text', - showInTestingDeployment: true, component: 'pie-assistive-text', argTypes: { variant: { diff --git a/apps/pie-storybook/stories/pie-button.stories.ts b/apps/pie-storybook/stories/pie-button.stories.ts index 3ca75bdf5f..0a83975ef6 100644 --- a/apps/pie-storybook/stories/pie-button.stories.ts +++ b/apps/pie-storybook/stories/pie-button.stories.ts @@ -1,18 +1,18 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import '@justeattakeaway/pie-button'; +import { type Meta } from '@storybook/web-components'; +import '@justeattakeaway/pie-button'; import { type ButtonProps as ButtonPropsBase, defaultProps, iconPlacements, responsiveSizes, sizes, types, variants, } from '@justeattakeaway/pie-button'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import '@justeattakeaway/pie-icons-webc/dist/IconPlusCircle.js'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; import { type SlottedComponentProps } from '../types'; type ButtonProps = SlottedComponentProps; -type ButtonStoryMeta = ExtendedMeta; +type ButtonStoryMeta = Meta; const defaultArgs: ButtonProps = { ...defaultProps, @@ -22,7 +22,6 @@ const defaultArgs: ButtonProps = { const buttonStoryMeta: ButtonStoryMeta = { title: 'Button', - showInTestingDeployment: true, component: 'pie-button', argTypes: { tag: { diff --git a/apps/pie-storybook/stories/pie-card.stories.ts b/apps/pie-storybook/stories/pie-card.stories.ts index 9023fe40ec..aa5436b501 100644 --- a/apps/pie-storybook/stories/pie-card.stories.ts +++ b/apps/pie-storybook/stories/pie-card.stories.ts @@ -1,20 +1,19 @@ import { nothing } from 'lit'; import { html } from 'lit/static-html.js'; import { ifDefined } from 'lit/directives/if-defined.js'; -import '@justeattakeaway/pie-card'; - +import { type Meta } from '@storybook/web-components'; import { action } from '@storybook/addon-actions'; +import '@justeattakeaway/pie-card'; import { type CardProps as CardPropsBase, variants, tags, paddingValues, defaultProps, } from '@justeattakeaway/pie-card'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type CardProps = SlottedComponentProps; -type CardStoryMeta = ExtendedMeta; +type CardStoryMeta = Meta; const defaultArgs: CardProps = { ...defaultProps, @@ -41,7 +40,6 @@ const defaultArgs: CardProps = { const cardStoryMeta: CardStoryMeta = { title: 'Card', - showInTestingDeployment: true, component: 'pie-card', argTypes: { tag: { diff --git a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts index 7ecf6c4518..c2c6fc8d0d 100644 --- a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts +++ b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts @@ -1,12 +1,12 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { type Meta } from '@storybook/web-components'; + +import '@justeattakeaway/pie-checkbox-group'; +import { type CheckboxGroupProps as CheckboxGroupPropsBase, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group'; import '@justeattakeaway/pie-link'; import '@justeattakeaway/pie-checkbox'; import '@justeattakeaway/pie-form-label'; -import '@justeattakeaway/pie-checkbox-group'; - -import { type CheckboxGroupProps as CheckboxGroupPropsBase, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory } from '../utilities'; @@ -15,7 +15,7 @@ type CheckboxGroupProps = CheckboxGroupPropsBase & { labelSlot: keyof typeof labelSlotOptions; }; -type CheckboxGroupStoryMeta = ExtendedMeta; +type CheckboxGroupStoryMeta = Meta; const defaultArgs: CheckboxGroupProps = { ...defaultProps, @@ -29,7 +29,6 @@ const labelSlotOptions = { const checkboxGroupStoryMeta: CheckboxGroupStoryMeta = { title: 'Checkbox Group', - showInTestingDeployment: true, component: 'pie-checkbox-group', argTypes: { name: { diff --git a/apps/pie-storybook/stories/pie-checkbox.stories.ts b/apps/pie-storybook/stories/pie-checkbox.stories.ts index cd695edd59..32e97900ab 100644 --- a/apps/pie-storybook/stories/pie-checkbox.stories.ts +++ b/apps/pie-storybook/stories/pie-checkbox.stories.ts @@ -1,16 +1,16 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import '@justeattakeaway/pie-checkbox'; +import { type Meta } from '@storybook/web-components'; +import '@justeattakeaway/pie-checkbox'; import { type CheckboxProps as CheckboxBaseProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox'; import { action } from '@storybook/addon-actions'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type CheckboxProps = SlottedComponentProps; -type CheckboxStoryMeta = ExtendedMeta; +type CheckboxStoryMeta = Meta; const defaultArgs: CheckboxProps = { ...defaultProps, @@ -21,7 +21,6 @@ const defaultArgs: CheckboxProps = { const checkboxStoryMeta: CheckboxStoryMeta = { title: 'Checkbox', component: 'pie-checkbox', - showInTestingDeployment: true, argTypes: { value: { description: 'The value of the checkbox (used as a key/value pair in HTML forms with `name`).', diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index de7799f29e..cc7212f69f 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -5,7 +5,7 @@ import '@justeattakeaway/pie-chip'; import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js'; import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; +import { type Meta } from '@storybook/web-components'; import { type SlottedComponentProps } from '../types'; import { @@ -13,7 +13,7 @@ import { } from '../utilities'; type ChipProps = SlottedComponentProps & { showIcon: boolean }; -type ChipStoryMeta = ExtendedMeta; +type ChipStoryMeta = Meta; const defaultArgs: ChipProps = { ...defaultProps, @@ -27,7 +27,7 @@ const defaultArgs: ChipProps = { const chipStoryMeta: ChipStoryMeta = { title: 'Chip', - showInTestingDeployment: true, + component: 'pie-chip', argTypes: { aria: { @@ -125,34 +125,4 @@ const createChipStory = createStory(Template, defaultArgs); export const Default = createChipStory(); export const Outline = createChipStory({ variant: 'outline' }); -export const Ghost = createChipStory({ variant: 'ghost' }); - -// Define the prop options for the matrix -const sharedPropOptions = { - disabled: [true, false], - isSelected: [true, false], - isLoading: [true, false], - isDismissible: [true, false], - showIcon: [true, false], - aria: [defaultArgs.aria], - slot: ['Hello World'], -}; - -const defaultPropOptions = { - ...sharedPropOptions, - variant: ['default'], -}; - -const ghostPropOptions = { - ...sharedPropOptions, - variant: ['ghost'], -}; - -const outlinePropOptions = { - ...sharedPropOptions, - variant: ['outline'], -}; - -export const DefaultPropVariations = createVariantStory(Template, defaultPropOptions); -export const GhostPropVariations = createVariantStory(Template, ghostPropOptions); -export const OutlinePropVariations = createVariantStory(Template, outlinePropOptions); +export const Ghost = createChipStory({ variant: 'ghost' }); \ No newline at end of file diff --git a/apps/pie-storybook/stories/pie-cookie-banner.stories.ts b/apps/pie-storybook/stories/pie-cookie-banner.stories.ts index 5e60a546e4..d20f23d484 100644 --- a/apps/pie-storybook/stories/pie-cookie-banner.stories.ts +++ b/apps/pie-storybook/stories/pie-cookie-banner.stories.ts @@ -1,16 +1,16 @@ import { html } from 'lit'; import { action } from '@storybook/addon-actions'; -import '@justeattakeaway/pie-cookie-banner'; +import { type Meta } from '@storybook/web-components'; +import '@justeattakeaway/pie-cookie-banner'; import { type CookieBannerProps, defaultProps } from '@justeattakeaway/pie-cookie-banner'; import { Country, Language, } from '@justeattakeaway/pie-cookie-banner/src/defs'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory } from '../utilities'; -type CookieBannerStoryMeta = ExtendedMeta; +type CookieBannerStoryMeta = Meta; const defaultArgs: CookieBannerProps = { ...defaultProps, @@ -25,7 +25,6 @@ const defaultArgs: CookieBannerProps = { const cookieBannerStoryMeta: CookieBannerStoryMeta = { title: 'Cookie Banner', - showInTestingDeployment: true, component: 'pie-cookie-banner', argTypes: { hasPrimaryActionsOnly: { diff --git a/apps/pie-storybook/stories/pie-divider.stories.ts b/apps/pie-storybook/stories/pie-divider.stories.ts index 7cb19f0447..58195acad7 100644 --- a/apps/pie-storybook/stories/pie-divider.stories.ts +++ b/apps/pie-storybook/stories/pie-divider.stories.ts @@ -1,22 +1,21 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import '@justeattakeaway/pie-divider'; +import { type Meta } from '@storybook/web-components'; +import '@justeattakeaway/pie-divider'; import { type DividerProps, variants, orientations, defaultProps, } from '@justeattakeaway/pie-divider'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory, type TemplateFunction } from '../utilities'; -type DividerStoryMeta = ExtendedMeta; +type DividerStoryMeta = Meta; const defaultArgs: DividerProps = { ...defaultProps }; const dividerStoryMeta: DividerStoryMeta = { title: 'Divider', component: 'pie-divider', - showInTestingDeployment: true, argTypes: { variant: { description: 'Set the variant of the divider. To change this, view the other story.', diff --git a/apps/pie-storybook/stories/pie-form-label.stories.ts b/apps/pie-storybook/stories/pie-form-label.stories.ts index 03ab6e1cde..295e68b285 100644 --- a/apps/pie-storybook/stories/pie-form-label.stories.ts +++ b/apps/pie-storybook/stories/pie-form-label.stories.ts @@ -1,14 +1,14 @@ import { html, nothing } from 'lit'; -import '@justeattakeaway/pie-form-label'; +import { type Meta } from '@storybook/web-components'; +import '@justeattakeaway/pie-form-label'; import { type FormLabelProps as FormLabelPropsBase } from '@justeattakeaway/pie-form-label'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; -import { type SlottedComponentProps } from '../types'; +import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type FormLabelProps = SlottedComponentProps; -type FormLabelStoryMeta = ExtendedMeta; +type FormLabelStoryMeta = Meta; const defaultArgs: FormLabelProps = { for: 'form-label', @@ -19,7 +19,6 @@ const defaultArgs: FormLabelProps = { const formLabelStoryMeta: FormLabelStoryMeta = { title: 'Form Label', - showInTestingDeployment: true, component: 'pie-form-label', argTypes: { for: { diff --git a/apps/pie-storybook/stories/pie-icon-button.stories.ts b/apps/pie-storybook/stories/pie-icon-button.stories.ts index c7f6cf3d00..83807b523a 100644 --- a/apps/pie-storybook/stories/pie-icon-button.stories.ts +++ b/apps/pie-storybook/stories/pie-icon-button.stories.ts @@ -1,21 +1,21 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { type Meta } from '@storybook/web-components'; + import '@justeattakeaway/pie-icon-button'; -import '@justeattakeaway/pie-icons-webc/dist/IconClose.js'; import { type IconButtonProps, sizes, variants, defaultProps, } from '@justeattakeaway/pie-icon-button'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; +import '@justeattakeaway/pie-icons-webc/dist/IconClose.js'; import { createStory, type TemplateFunction } from '../utilities'; -type IconButtonStoryMeta = ExtendedMeta; +type IconButtonStoryMeta = Meta; const defaultArgs: IconButtonProps = { ...defaultProps, aria: { label: 'Test Label ' } }; const iconButtonStoryMeta: IconButtonStoryMeta = { title: 'Icon Button', - showInTestingDeployment: true, component: 'pie-icon-button', argTypes: { aria: { diff --git a/apps/pie-storybook/stories/pie-link.stories.ts b/apps/pie-storybook/stories/pie-link.stories.ts index 58aab80457..9ec8f0fc8c 100644 --- a/apps/pie-storybook/stories/pie-link.stories.ts +++ b/apps/pie-storybook/stories/pie-link.stories.ts @@ -1,18 +1,18 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; -import '@justeattakeaway/pie-link'; -import '@justeattakeaway/pie-icons-webc/dist/IconPlusCircle.js'; +import { type Meta } from '@storybook/web-components'; +import '@justeattakeaway/pie-link'; import { type LinkProps as LinkBaseProps, sizes, variants, iconPlacements, tags, buttonTypes, underlineTypes, defaultProps, } from '@justeattakeaway/pie-link'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; +import '@justeattakeaway/pie-icons-webc/dist/IconPlusCircle.js'; import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type LinkProps = SlottedComponentProps; -type LinkStoryMeta = ExtendedMeta; +type LinkStoryMeta = Meta; const defaultArgs: LinkProps = { ...defaultProps, @@ -24,7 +24,6 @@ const defaultArgs: LinkProps = { const linkStoryMeta: LinkStoryMeta = { title: 'Link', - showInTestingDeployment: true, component: 'pie-link', argTypes: { tag: { diff --git a/apps/pie-storybook/stories/pie-lottie-player.stories.ts b/apps/pie-storybook/stories/pie-lottie-player.stories.ts index 79bffcc705..bbbecb3656 100644 --- a/apps/pie-storybook/stories/pie-lottie-player.stories.ts +++ b/apps/pie-storybook/stories/pie-lottie-player.stories.ts @@ -1,15 +1,15 @@ import { html } from 'lit'; +import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-lottie-player'; import { type LottiePlayerProps as LottiePlayerBaseProps, type PieLottiePlayer, defaultProps, directions, } from '@justeattakeaway/pie-lottie-player'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory } from '../utilities'; type LottiePlayerProps = Omit -type LottiePlayerStoryMeta = ExtendedMeta; +type LottiePlayerStoryMeta = Meta; const defaultArgs: LottiePlayerProps = { ...defaultProps }; @@ -27,7 +27,6 @@ const animationSrcLabels = animationSrcOptions.reduce>((a const lottiePlayerStoryMeta: LottiePlayerStoryMeta = { title: 'Lottie Player', - showInTestingDeployment: true, component: 'pie-lottie-player', argTypes: { animationSrc: { diff --git a/apps/pie-storybook/stories/pie-modal.stories.ts b/apps/pie-storybook/stories/pie-modal.stories.ts index 2aab42c63f..3a53bdc53d 100644 --- a/apps/pie-storybook/stories/pie-modal.stories.ts +++ b/apps/pie-storybook/stories/pie-modal.stories.ts @@ -1,6 +1,7 @@ import { html } from 'lit/static-html.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; +import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-modal'; import { @@ -11,12 +12,11 @@ import '@justeattakeaway/pie-button'; import '@justeattakeaway/pie-text-input'; import '@justeattakeaway/pie-form-label'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; import { createStory, sanitizeAndRenderHTML } from '../utilities'; type ModalProps = SlottedComponentProps; -type ModalStoryMeta = ExtendedMeta; +type ModalStoryMeta = Meta; const defaultArgs: ModalProps = { ...defaultProps, @@ -44,7 +44,6 @@ const defaultArgs: ModalProps = { const modalStoryMeta: ModalStoryMeta = { title: 'Modal', - showInTestingDeployment: true, component: 'pie-modal', argTypes: { isDismissible: { diff --git a/apps/pie-storybook/stories/pie-notification.stories.ts b/apps/pie-storybook/stories/pie-notification.stories.ts index 6f22511e9a..28c60e0366 100644 --- a/apps/pie-storybook/stories/pie-notification.stories.ts +++ b/apps/pie-storybook/stories/pie-notification.stories.ts @@ -1,6 +1,7 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; +import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-notification'; import { @@ -9,7 +10,6 @@ import { import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory, type TemplateFunction } from '../utilities'; // Extending the props type definition to include storybook specific properties for controls @@ -18,7 +18,7 @@ type NotificationProps = NotificationBaseProps & { iconSlot: keyof typeof slotOptions; }; -type NotificationStoryMeta = ExtendedMeta; +type NotificationStoryMeta = Meta; const defaultArgs: NotificationProps = { ...defaultProps, @@ -42,7 +42,6 @@ const slotOptions = { const notificationStoryMeta: NotificationStoryMeta = { title: 'Notification', - showInTestingDeployment: true, component: 'pie-notification', argTypes: { isOpen: { diff --git a/apps/pie-storybook/stories/pie-radio-group.stories.ts b/apps/pie-storybook/stories/pie-radio-group.stories.ts index 9f0730a1dc..d79a030084 100644 --- a/apps/pie-storybook/stories/pie-radio-group.stories.ts +++ b/apps/pie-storybook/stories/pie-radio-group.stories.ts @@ -1,5 +1,6 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { type Meta } from '@storybook/web-components'; import { action } from '@storybook/addon-actions'; import '@justeattakeaway/pie-radio-group'; @@ -12,7 +13,6 @@ import '@justeattakeaway/pie-link'; import '@justeattakeaway/pie-radio'; import '@justeattakeaway/pie-form-label'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory } from '../utilities'; // Extending the props type definition to include storybook specific properties for controls @@ -20,7 +20,7 @@ type RadioGroupProps = RadioGroupPropsBase & { labelSlot: keyof typeof labelSlotOptions; }; -type RadioGroupStoryMeta = ExtendedMeta; +type RadioGroupStoryMeta = Meta; const defaultArgs: RadioGroupProps = { ...defaultProps, @@ -34,7 +34,6 @@ const labelSlotOptions = { const radioGroupStoryMeta: RadioGroupStoryMeta = { title: 'Radio Group', - showInTestingDeployment: true, component: 'pie-radio-group', argTypes: { name: { diff --git a/apps/pie-storybook/stories/pie-radio.stories.ts b/apps/pie-storybook/stories/pie-radio.stories.ts index d6747e46be..1e6681dcb5 100644 --- a/apps/pie-storybook/stories/pie-radio.stories.ts +++ b/apps/pie-storybook/stories/pie-radio.stories.ts @@ -1,6 +1,7 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { useArgs as UseArgs } from '@storybook/preview-api'; +import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-radio'; import { @@ -9,12 +10,11 @@ import { type RadioProps as RadioBaseProps, } from '@justeattakeaway/pie-radio'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; import { createStory, sanitizeAndRenderHTML, type TemplateFunction } from '../utilities'; type RadioProps = SlottedComponentProps; -type RadioStoryMeta = ExtendedMeta; +type RadioStoryMeta = Meta; const defaultArgs: RadioProps = { ...defaultProps, @@ -24,7 +24,6 @@ const defaultArgs: RadioProps = { const radioStoryMeta: RadioStoryMeta = { title: 'Radio', - showInTestingDeployment: true, component: 'pie-radio', argTypes: { checked: { diff --git a/apps/pie-storybook/stories/pie-spinner.stories.ts b/apps/pie-storybook/stories/pie-spinner.stories.ts index e7785904a7..5280b62e1b 100644 --- a/apps/pie-storybook/stories/pie-spinner.stories.ts +++ b/apps/pie-storybook/stories/pie-spinner.stories.ts @@ -1,15 +1,15 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-spinner'; import { type SpinnerProps, sizes, variants, defaultProps, } from '@justeattakeaway/pie-spinner'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type TemplateFunction, createStory } from '../utilities'; -type SpinnerStoryMeta = ExtendedMeta; +type SpinnerStoryMeta = Meta; const defaultArgs: SpinnerProps = { ...defaultProps, @@ -20,7 +20,6 @@ const defaultArgs: SpinnerProps = { const spinnerStoryMeta: SpinnerStoryMeta = { title: 'Spinner', - showInTestingDeployment: true, component: 'pie-spinner', argTypes: { size: { diff --git a/apps/pie-storybook/stories/pie-switch.stories.ts b/apps/pie-storybook/stories/pie-switch.stories.ts index 9d89bd3b33..a0b69e6839 100644 --- a/apps/pie-storybook/stories/pie-switch.stories.ts +++ b/apps/pie-storybook/stories/pie-switch.stories.ts @@ -1,14 +1,14 @@ import { html, nothing } from 'lit'; import { action } from '@storybook/addon-actions'; +import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-switch'; import { type SwitchProps, labelPlacements, defaultProps } from '@justeattakeaway/pie-switch'; import '@justeattakeaway/pie-icons-webc/dist/IconCheck.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory, type TemplateFunction } from '../utilities'; -type SwitchStoryMeta = ExtendedMeta; +type SwitchStoryMeta = Meta; const defaultArgs: SwitchProps = { ...defaultProps, @@ -23,7 +23,6 @@ const defaultArgs: SwitchProps = { const switchStoryMeta: SwitchStoryMeta = { title: 'Switch', - showInTestingDeployment: true, component: 'pie-switch', argTypes: { checked: { diff --git a/apps/pie-storybook/stories/pie-tag.stories.ts b/apps/pie-storybook/stories/pie-tag.stories.ts index 16e23ea8a7..1f4172c187 100644 --- a/apps/pie-storybook/stories/pie-tag.stories.ts +++ b/apps/pie-storybook/stories/pie-tag.stories.ts @@ -1,5 +1,6 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; +import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-tag'; import { @@ -11,12 +12,11 @@ import { } from '@justeattakeaway/pie-tag'; import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type TagProps = SlottedComponentProps & { showIcon: boolean }; -type TagStoryMeta = ExtendedMeta; +type TagStoryMeta = Meta; const defaultArgs: TagProps = { ...defaultProps, @@ -26,7 +26,6 @@ const defaultArgs: TagProps = { const tagStoryMeta: TagStoryMeta = { title: 'Tag', - showInTestingDeployment: true, component: 'pie-tag', argTypes: { variant: { diff --git a/apps/pie-storybook/stories/pie-text-input.stories.ts b/apps/pie-storybook/stories/pie-text-input.stories.ts index a6919507d1..4b98cee423 100644 --- a/apps/pie-storybook/stories/pie-text-input.stories.ts +++ b/apps/pie-storybook/stories/pie-text-input.stories.ts @@ -2,6 +2,7 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; import { useArgs as UseArgs } from '@storybook/preview-api'; +import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-text-input'; import { @@ -18,7 +19,6 @@ import '@justeattakeaway/pie-icons-webc/dist/IconUser.js'; import '@justeattakeaway/pie-icons-webc/dist/IconNumberSymbol.js'; import '@justeattakeaway/pie-icons-webc/dist/IconKey.js'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory, type TemplateFunction } from '../utilities'; // Extending the props type definition to include storybook specific properties for controls @@ -27,7 +27,7 @@ type TextInputProps = TextInputPropsBase & { trailingSlot: keyof typeof trailingSlotOptions; }; -type TextInputStoryMeta = ExtendedMeta; +type TextInputStoryMeta = Meta; const defaultArgs: TextInputProps = { ...defaultProps, @@ -50,7 +50,6 @@ const trailingSlotOptions = { const textInputStoryMeta: TextInputStoryMeta = { title: 'Text Input', - showInTestingDeployment: true, component: 'pie-text-input', argTypes: { type: { diff --git a/apps/pie-storybook/stories/pie-textarea.stories.ts b/apps/pie-storybook/stories/pie-textarea.stories.ts index 4f23c13ad7..897e321370 100644 --- a/apps/pie-storybook/stories/pie-textarea.stories.ts +++ b/apps/pie-storybook/stories/pie-textarea.stories.ts @@ -2,6 +2,7 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; import { useArgs as UseArgs } from '@storybook/preview-api'; +import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-textarea'; import { @@ -11,16 +12,14 @@ import '@justeattakeaway/pie-button'; import '@justeattakeaway/pie-form-label'; import '@justeattakeaway/pie-link'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { createStory, type TemplateFunction } from '../utilities'; -type TextareaStoryMeta = ExtendedMeta; +type TextareaStoryMeta = Meta; const defaultArgs: TextareaProps = { ...defaultProps, name: 'testName' }; const textareaStoryMeta: TextareaStoryMeta = { title: 'Textarea', - showInTestingDeployment: true, component: 'pie-textarea', argTypes: { disabled: { diff --git a/apps/pie-storybook/stories/pie-toast.stories.ts b/apps/pie-storybook/stories/pie-toast.stories.ts index 77187afc22..965bb4d0ca 100644 --- a/apps/pie-storybook/stories/pie-toast.stories.ts +++ b/apps/pie-storybook/stories/pie-toast.stories.ts @@ -2,12 +2,12 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { useArgs } from '@storybook/preview-api'; import { action } from '@storybook/addon-actions'; +import { type Meta } from '@storybook/web-components'; import { type ToastProps, defaultProps, variants } from '@justeattakeaway/pie-toast'; -import { type ExtendedMeta } from '../types/ExtendedMeta'; import { type TemplateFunction, createStory } from '../utilities'; -type ToastStoryMeta = ExtendedMeta; +type ToastStoryMeta = Meta; const defaultArgs: ToastProps = { ...defaultProps, @@ -21,7 +21,6 @@ const defaultArgs: ToastProps = { const toastStoryMeta: ToastStoryMeta = { title: 'Toast', - showInTestingDeployment: true, component: 'pie-toast', argTypes: { isOpen: { diff --git a/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts b/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts new file mode 100644 index 0000000000..53842e2f2c --- /dev/null +++ b/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts @@ -0,0 +1,84 @@ +import { html, nothing } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import { action } from '@storybook/addon-actions'; +import '@justeattakeaway/pie-chip'; +import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js'; + +import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip'; +import { type Meta } from '@storybook/web-components'; +import { type SlottedComponentProps } from '../../types'; + +import { + createStory, createVariantStory, type TemplateFunction, sanitizeAndRenderHTML, +} from '../../utilities'; + +type ChipProps = Omit, 'aria'> & { showIcon: boolean }; +type ChipStoryMeta = Meta; + +const defaultArgs: ChipProps = { + ...defaultProps, + showIcon: false, + slot: 'String', +}; + +const chipStoryMeta: ChipStoryMeta & { showInTestingDeployment?: boolean } = { + title: 'Chip', + showInTestingDeployment: true, + component: 'pie-chip' +}; + +export default chipStoryMeta; + +const clickAction = action('clicked'); +const closeAction = action('pie-chip-close'); + +const Template: TemplateFunction = ({ + disabled, + isSelected, + isLoading, + isDismissible, + showIcon, + slot, + variant, +}) => html` + + ${showIcon ? html`` : nothing} + ${sanitizeAndRenderHTML(slot)} + `; + + +// Define the prop options for the matrix +const sharedPropOptions = { + disabled: [true, false], + isSelected: [true, false], + isLoading: [true, false], + isDismissible: [true, false], + showIcon: [true, false], + slot: ['Hello World'], +}; + +const defaultPropOptions = { + ...sharedPropOptions, + variant: ['default'], +}; + +const ghostPropOptions = { + ...sharedPropOptions, + variant: ['ghost'], +}; + +const outlinePropOptions = { + ...sharedPropOptions, + variant: ['outline'], +}; + +export const DefaultPropVariations = createVariantStory(Template, defaultPropOptions); +export const GhostPropVariations = createVariantStory(Template, ghostPropOptions); +export const OutlinePropVariations = createVariantStory(Template, outlinePropOptions); \ No newline at end of file diff --git a/apps/pie-storybook/types/ExtendedMeta.ts b/apps/pie-storybook/types/ExtendedMeta.ts deleted file mode 100644 index a5e320371a..0000000000 --- a/apps/pie-storybook/types/ExtendedMeta.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { type Meta } from '@storybook/web-components'; - -export type ExtendedMeta = Meta & { showInTestingDeployment?: boolean }; From 3fcbe8923817486440cc77e6ed4af3df3df10d4a Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Tue, 26 Nov 2024 15:32:54 +0000 Subject: [PATCH 17/34] pr suggestions --- apps/pie-storybook/stories/pie-chip.stories.ts | 6 +++--- apps/pie-storybook/types/index.ts | 1 - apps/pie-storybook/utilities/index.ts | 2 +- .../src/app/templates/pie-placeholder.__stories__.ts | 5 ++--- 4 files changed, 6 insertions(+), 8 deletions(-) diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index cc7212f69f..f4d76e4c9f 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -2,10 +2,11 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; import '@justeattakeaway/pie-chip'; -import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js'; - import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip'; import { type Meta } from '@storybook/web-components'; + +import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js'; + import { type SlottedComponentProps } from '../types'; import { @@ -27,7 +28,6 @@ const defaultArgs: ChipProps = { const chipStoryMeta: ChipStoryMeta = { title: 'Chip', - component: 'pie-chip', argTypes: { aria: { diff --git a/apps/pie-storybook/types/index.ts b/apps/pie-storybook/types/index.ts index 94b7e7e39e..65bebad12f 100644 --- a/apps/pie-storybook/types/index.ts +++ b/apps/pie-storybook/types/index.ts @@ -1,2 +1 @@ export * from './SlottedComponentProps'; -export * from './ExtendedMeta'; diff --git a/apps/pie-storybook/utilities/index.ts b/apps/pie-storybook/utilities/index.ts index d481cd082f..c973c46033 100644 --- a/apps/pie-storybook/utilities/index.ts +++ b/apps/pie-storybook/utilities/index.ts @@ -135,5 +135,5 @@ export const createVariantStory = ( disable: true, }, }, - // ...(storyOpts?.argTypes ? { argTypes: storyOpts?.argTypes } : {}), + ...(storyOpts?.argTypes ? { argTypes: storyOpts?.argTypes } : {}), }); diff --git a/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__stories__.ts b/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__stories__.ts index 2e5204619c..78174ff32a 100644 --- a/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__stories__.ts +++ b/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__stories__.ts @@ -1,19 +1,18 @@ import { html } from 'lit'; -import { ExtendedMeta } from '../types/ExtendedMeta'; +import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-<%= fileName %>'; import { type <%= componentName %>Props } from '@justeattakeaway/pie-<%= fileName %>'; import { createStory } from '../utilities'; -type <%= componentName %>StoryMeta = ExtendedMeta<<%= componentName %>Props>; +type <%= componentName %>StoryMeta = Meta<<%= componentName %>Props>; const defaultArgs: <%= componentName %>Props = {}; const <%= componentNameCamelCase %>StoryMeta: <%= componentName %>StoryMeta = { title: '<%= displayName %>', component: 'pie-<%= fileName %>', - showInTestingDeployment: true, argTypes: {}, args: defaultArgs, parameters: { From 929b6ac6496fc8d263852223fc552f24c20daf9d Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Tue, 26 Nov 2024 15:34:10 +0000 Subject: [PATCH 18/34] pr suggestions --- apps/pie-storybook/stories/pie-chip.stories.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index f4d76e4c9f..78b312749b 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -1,17 +1,16 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; +import { type Meta } from '@storybook/web-components'; + import '@justeattakeaway/pie-chip'; import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip'; -import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js'; import { type SlottedComponentProps } from '../types'; -import { - createStory, createVariantStory, type TemplateFunction, sanitizeAndRenderHTML, -} from '../utilities'; +import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type ChipProps = SlottedComponentProps & { showIcon: boolean }; type ChipStoryMeta = Meta; From b89521d3a7d2ceb8244064f884336b780361b157 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Tue, 26 Nov 2024 15:34:52 +0000 Subject: [PATCH 19/34] pr suggestions --- apps/pie-storybook/stories/pie-chip.stories.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index 78b312749b..bb49da819e 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -5,9 +5,7 @@ import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-chip'; import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip'; - import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js'; - import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; From ae48c363083de8a8f17dd0c449836405128e9f31 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Tue, 26 Nov 2024 15:35:38 +0000 Subject: [PATCH 20/34] pr suggestions --- apps/pie-storybook/stories/pie-chip.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index bb49da819e..8b0fafc1ba 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -6,8 +6,8 @@ import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-chip'; import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip'; import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js'; -import { type SlottedComponentProps } from '../types'; +import { type SlottedComponentProps } from '../types'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type ChipProps = SlottedComponentProps & { showIcon: boolean }; From 5836688ad2827523a8ef4adcd4187e23c89f9c1d Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 27 Nov 2024 14:09:54 +0000 Subject: [PATCH 21/34] update generator and remove showInTestingDeployment --- apps/pie-storybook/.storybook/main.ts | 4 ++- apps/pie-storybook/.storybook/story-utils.ts | 29 ---------------- .../stories/testing/pie-chip.test.stories.ts | 20 +++++++---- .../generator-pie-component/src/app/index.ts | 11 +++++- .../pie-placeholder.test.__stories__.ts | 34 +++++++++++++++++++ .../accessibility/pie-placeholder.__spec__.ts | 12 ++++--- .../component/pie-placeholder.__spec__.ts | 12 ++++--- .../test/visual/pie-placeholder.__spec__.ts | 10 +++--- .../generator-pie-component/src/app/types.ts | 1 + yarn.lock | 14 ++++++++ 10 files changed, 96 insertions(+), 51 deletions(-) delete mode 100644 apps/pie-storybook/.storybook/story-utils.ts create mode 100644 packages/tools/generator-pie-component/src/app/templates/pie-placeholder.test.__stories__.ts diff --git a/apps/pie-storybook/.storybook/main.ts b/apps/pie-storybook/.storybook/main.ts index 67f25fe9eb..471298c7f8 100644 --- a/apps/pie-storybook/.storybook/main.ts +++ b/apps/pie-storybook/.storybook/main.ts @@ -5,7 +5,9 @@ const isBrowserTesting = process.env.BROWSER_TESTING === 'true'; const config: StorybookConfig = { stories: isBrowserTesting - ? getTestingStoryFiles() + ? [ + "../stories/testing/**/*.test.stories.ts" + ] : [ "../stories/**/*.mdx", "../stories/*.stories.@(js|ts|tsx)", diff --git a/apps/pie-storybook/.storybook/story-utils.ts b/apps/pie-storybook/.storybook/story-utils.ts deleted file mode 100644 index 4967c4a423..0000000000 --- a/apps/pie-storybook/.storybook/story-utils.ts +++ /dev/null @@ -1,29 +0,0 @@ -import fs from 'fs'; -import path from 'path'; - -const storiesDir = path.resolve(__dirname, '../stories'); - -export function getTestingStoryFiles(): string[] { - const storyFiles: string[] = []; - - function readDirectory(directory: string) { - const files = fs.readdirSync(directory); - - files.forEach(file => { - const fullPath = path.join(directory, file); - const stat = fs.statSync(fullPath); - - if (stat.isDirectory()) { - readDirectory(fullPath); - } else if (file.endsWith('.stories.ts') || file.endsWith('.stories.tsx')) { - const content = fs.readFileSync(fullPath, 'utf-8'); - if (content.includes(`showInTestingDeployment: ${true}`)) { - storyFiles.push(fullPath); - } - } - }); - } - - readDirectory(storiesDir); - return storyFiles; -} \ No newline at end of file diff --git a/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts b/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts index 53842e2f2c..5c05749781 100644 --- a/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts +++ b/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts @@ -12,7 +12,7 @@ import { createStory, createVariantStory, type TemplateFunction, sanitizeAndRenderHTML, } from '../../utilities'; -type ChipProps = Omit, 'aria'> & { showIcon: boolean }; +type ChipProps = SlottedComponentProps & {showIcon: boolean }; type ChipStoryMeta = Meta; const defaultArgs: ChipProps = { @@ -21,9 +21,8 @@ const defaultArgs: ChipProps = { slot: 'String', }; -const chipStoryMeta: ChipStoryMeta & { showInTestingDeployment?: boolean } = { +const chipStoryMeta: ChipStoryMeta = { title: 'Chip', - showInTestingDeployment: true, component: 'pie-chip' }; @@ -33,6 +32,7 @@ const clickAction = action('clicked'); const closeAction = action('pie-chip-close'); const Template: TemplateFunction = ({ + aria, disabled, isSelected, isLoading, @@ -42,6 +42,7 @@ const Template: TemplateFunction = ({ variant, }) => html` = ({ ${sanitizeAndRenderHTML(slot)} `; - // Define the prop options for the matrix const sharedPropOptions = { disabled: [true, false], @@ -79,6 +79,12 @@ const outlinePropOptions = { variant: ['outline'], }; -export const DefaultPropVariations = createVariantStory(Template, defaultPropOptions); -export const GhostPropVariations = createVariantStory(Template, ghostPropOptions); -export const OutlinePropVariations = createVariantStory(Template, outlinePropOptions); \ No newline at end of file +const createChipStory = createStory(Template, defaultArgs); + +export const Default = createChipStory(); +export const Outline = createChipStory({ variant: 'outline' }); +export const Ghost = createChipStory({ variant: 'ghost' }); + +export const DefaultPropVariations = createVariantStory >(Template, defaultPropOptions); +export const GhostPropVariations = createVariantStory>(Template, ghostPropOptions); +export const OutlinePropVariations = createVariantStory>(Template, outlinePropOptions); \ No newline at end of file diff --git a/packages/tools/generator-pie-component/src/app/index.ts b/packages/tools/generator-pie-component/src/app/index.ts index cf87eb7170..e268d80cfe 100644 --- a/packages/tools/generator-pie-component/src/app/index.ts +++ b/packages/tools/generator-pie-component/src/app/index.ts @@ -26,11 +26,12 @@ export default class extends Generator { ...transformedName, componentPath: `packages/components/pie-${transformedName.fileName}/`, storyPath: 'apps/pie-storybook/stories/', + testStoryPath: 'apps/pie-storybook/stories/testing/', }; } async writing () { - const { fileName, componentPath, storyPath } = this.props; + const { fileName, componentPath, storyPath, testStoryPath } = this.props; const processDestinationPath = (filePath: string) => filePath.replace(/\b(placeholder)\b/g, fileName).replace(/__/g, ''); this.fs.copyTpl( @@ -52,6 +53,14 @@ export default class extends Generator { { processDestinationPath }, ); + this.fs.copyTpl( + this.templatePath('**/pie-placeholder.test.__stories__.ts'), + this.destinationPath(testStoryPath), + this.props, + undefined, + { processDestinationPath }, + ); + // Update YAML and config files this._addPercyTokenEnvVar(); this._addGithubLabel(); diff --git a/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.test.__stories__.ts b/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.test.__stories__.ts new file mode 100644 index 0000000000..78174ff32a --- /dev/null +++ b/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.test.__stories__.ts @@ -0,0 +1,34 @@ +import { html } from 'lit'; +import { type Meta } from '@storybook/web-components'; + +import '@justeattakeaway/pie-<%= fileName %>'; +import { type <%= componentName %>Props } from '@justeattakeaway/pie-<%= fileName %>'; + +import { createStory } from '../utilities'; + +type <%= componentName %>StoryMeta = Meta<<%= componentName %>Props>; + +const defaultArgs: <%= componentName %>Props = {}; + +const <%= componentNameCamelCase %>StoryMeta: <%= componentName %>StoryMeta = { + title: '<%= displayName %>', + component: 'pie-<%= fileName %>', + argTypes: {}, + args: defaultArgs, + parameters: { + design: { + type: 'figma', + url: '', + }, + }, +}; + +export default <%= componentNameCamelCase %>StoryMeta; + +// TODO: remove the eslint-disable rule when props are added +// eslint-disable-next-line no-empty-pattern +const Template = ({}: <%= componentName %>Props) => html` + >> +`; + +export const Default = createStory<<%= componentName %>Props>(Template, defaultArgs)(); diff --git a/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts b/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts index 9443b547d6..d6f27410d4 100644 --- a/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts +++ b/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts @@ -1,12 +1,16 @@ -import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts'; +import { test, expect } from '@playwright/test'; import { Pie<%= componentName %> } from '../../src/index.ts'; test.describe('Pie<%= componentName %> - Accessibility tests', () => { - test('a11y - should test the Pie<%= componentName %> component WCAG compliance', async ({ makeAxeBuilder, mount }) => { - await mount(Pie<%= componentName %>); + test('a11y - should test the Pie<%= componentName %> component WCAG compliance', async ({ makeAxeBuilder }) => { + // Arrange + const basePage = new BasePage(page, '<%= fileName %>--default'); + basePage.load(); + + // Act const results = await makeAxeBuilder().analyze(); expect(results.violations).toEqual([]); }); -}); +}); \ No newline at end of file diff --git a/packages/tools/generator-pie-component/src/app/templates/test/component/pie-placeholder.__spec__.ts b/packages/tools/generator-pie-component/src/app/templates/test/component/pie-placeholder.__spec__.ts index 0f0e2efaff..4862ef3259 100644 --- a/packages/tools/generator-pie-component/src/app/templates/test/component/pie-placeholder.__spec__.ts +++ b/packages/tools/generator-pie-component/src/app/templates/test/component/pie-placeholder.__spec__.ts @@ -1,12 +1,14 @@ -import { test, expect } from '@sand4rt/experimental-ct-web'; -import { Pie<%= componentName %> } from '../../src/index.ts'; +import { test, expect } from '@playwright/test'; +import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts'; const componentSelector = '[data-test-id="pie-<%= fileName %>"]'; test.describe('Pie<%= componentName %> - Component tests', () => { - test('should render successfully', async ({ mount, page }) => { + test('should render successfully', async ({ page }) => { // Arrange - await mount(Pie<%= componentName %>); + const basePage = new BasePage(page, '<%= fileName %>--default'); + + basePage.load(); // Act const <%= componentNameCamelCase %> = page.locator(componentSelector); @@ -14,4 +16,4 @@ test.describe('Pie<%= componentName %> - Component tests', () => { // Assert expect(<%= componentNameCamelCase %>).toBeVisible(); }); -}); +}); \ No newline at end of file diff --git a/packages/tools/generator-pie-component/src/app/templates/test/visual/pie-placeholder.__spec__.ts b/packages/tools/generator-pie-component/src/app/templates/test/visual/pie-placeholder.__spec__.ts index b593408e4e..3fa27f1947 100644 --- a/packages/tools/generator-pie-component/src/app/templates/test/visual/pie-placeholder.__spec__.ts +++ b/packages/tools/generator-pie-component/src/app/templates/test/visual/pie-placeholder.__spec__.ts @@ -1,10 +1,12 @@ -import { test } from '@sand4rt/experimental-ct-web'; +import { test } from '@playwright/test'; import percySnapshot from '@percy/playwright'; -import { Pie<%= componentName %> } from '../../src/index.ts'; +import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts'; test.describe('Pie<%= componentName %> - Visual tests`', () => { - test('should display the Pie<%= componentName %> component successfully', async ({ page, mount }) => { - await mount(Pie<%= componentName %>); + test('should display the Pie<%= componentName %> component successfully', async ({ page }) => { + const basePage = new BasePage(page, '<%= fileName %>--default'); + + basePage.load(); await percySnapshot(page, 'Pie<%= componentName %> - Visual Test'); }); diff --git a/packages/tools/generator-pie-component/src/app/types.ts b/packages/tools/generator-pie-component/src/app/types.ts index a1aed3434f..2e8cf6feb1 100644 --- a/packages/tools/generator-pie-component/src/app/types.ts +++ b/packages/tools/generator-pie-component/src/app/types.ts @@ -13,4 +13,5 @@ export type Props = { answers: Answers; componentPath: string; storyPath: string; + testStoryPath: string; } & TransformedName; diff --git a/yarn.lock b/yarn.lock index 912bfefe18..ef099cd74d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4876,6 +4876,18 @@ __metadata: languageName: unknown linkType: soft +"@justeattakeaway/pie-foo@0.0.0, @justeattakeaway/pie-foo@workspace:packages/components/pie-foo": + version: 0.0.0-use.local + resolution: "@justeattakeaway/pie-foo@workspace:packages/components/pie-foo" + dependencies: + "@custom-elements-manifest/analyzer": 0.9.0 + "@justeattakeaway/pie-components-config": 0.18.0 + "@justeattakeaway/pie-css": 0.13.1 + "@justeattakeaway/pie-webc-core": 0.24.2 + cem-plugin-module-file-extensions: 0.0.5 + languageName: unknown + linkType: soft + "@justeattakeaway/pie-form-label@0.14.4, @justeattakeaway/pie-form-label@workspace:packages/components/pie-form-label": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-form-label@workspace:packages/components/pie-form-label" @@ -5222,6 +5234,7 @@ __metadata: "@justeattakeaway/pie-components-config": 0.18.0 "@justeattakeaway/pie-cookie-banner": 1.2.0 "@justeattakeaway/pie-divider": 1.0.0 + "@justeattakeaway/pie-foo": 0.0.0 "@justeattakeaway/pie-form-label": 0.14.4 "@justeattakeaway/pie-icon-button": 1.0.0 "@justeattakeaway/pie-link": 1.0.0 @@ -22827,6 +22840,7 @@ __metadata: "@justeattakeaway/pie-cookie-banner": 1.2.0 "@justeattakeaway/pie-css": 0.13.1 "@justeattakeaway/pie-divider": 1.0.0 + "@justeattakeaway/pie-foo": 0.0.0 "@justeattakeaway/pie-form-label": 0.14.4 "@justeattakeaway/pie-icon-button": 1.0.0 "@justeattakeaway/pie-icons-configs": 4.5.1 From 546ed9203888df95ae082125f5303027b307a2ca Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 27 Nov 2024 14:18:15 +0000 Subject: [PATCH 22/34] use correct import for a11y --- .../templates/test/accessibility/pie-placeholder.__spec__.ts | 3 ++- .../src/app/templates/test/visual/pie-placeholder.__spec__.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts b/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts index d6f27410d4..94f3dc182d 100644 --- a/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts +++ b/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts @@ -1,5 +1,6 @@ -import { test, expect } from '@playwright/test'; +import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures'; import { Pie<%= componentName %> } from '../../src/index.ts'; +import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts'; test.describe('Pie<%= componentName %> - Accessibility tests', () => { test('a11y - should test the Pie<%= componentName %> component WCAG compliance', async ({ makeAxeBuilder }) => { diff --git a/packages/tools/generator-pie-component/src/app/templates/test/visual/pie-placeholder.__spec__.ts b/packages/tools/generator-pie-component/src/app/templates/test/visual/pie-placeholder.__spec__.ts index 3fa27f1947..d0cbe4189e 100644 --- a/packages/tools/generator-pie-component/src/app/templates/test/visual/pie-placeholder.__spec__.ts +++ b/packages/tools/generator-pie-component/src/app/templates/test/visual/pie-placeholder.__spec__.ts @@ -8,6 +8,6 @@ test.describe('Pie<%= componentName %> - Visual tests`', () => { basePage.load(); - await percySnapshot(page, 'Pie<%= componentName %> - Visual Test'); + await percySnapshot(page, 'Pie<%= componentName %> - Visual Test'); }); }); From ca12d17da4f2c8ac72cbea41326b2a46cbfb9777 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 27 Nov 2024 14:22:08 +0000 Subject: [PATCH 23/34] correct file name --- ...est.__stories__.ts => pie-placeholder.__test__.__stories__.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/tools/generator-pie-component/src/app/templates/{pie-placeholder.test.__stories__.ts => pie-placeholder.__test__.__stories__.ts} (100%) diff --git a/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.test.__stories__.ts b/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__test__.__stories__.ts similarity index 100% rename from packages/tools/generator-pie-component/src/app/templates/pie-placeholder.test.__stories__.ts rename to packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__test__.__stories__.ts From 3210039eb15b8aecbbeac2c40020497c1c07815b Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 27 Nov 2024 14:27:16 +0000 Subject: [PATCH 24/34] correct import path --- .../src/app/templates/pie-placeholder.__test__.__stories__.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__test__.__stories__.ts b/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__test__.__stories__.ts index 78174ff32a..40bae5c931 100644 --- a/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__test__.__stories__.ts +++ b/packages/tools/generator-pie-component/src/app/templates/pie-placeholder.__test__.__stories__.ts @@ -4,7 +4,7 @@ import { type Meta } from '@storybook/web-components'; import '@justeattakeaway/pie-<%= fileName %>'; import { type <%= componentName %>Props } from '@justeattakeaway/pie-<%= fileName %>'; -import { createStory } from '../utilities'; +import { createStory } from '../../utilities'; type <%= componentName %>StoryMeta = Meta<<%= componentName %>Props>; From 3f47f2d92157b116abac95e6563c3c2b1745dc6e Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 27 Nov 2024 14:28:32 +0000 Subject: [PATCH 25/34] correct filename --- packages/tools/generator-pie-component/src/app/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tools/generator-pie-component/src/app/index.ts b/packages/tools/generator-pie-component/src/app/index.ts index e268d80cfe..f6ebf36c14 100644 --- a/packages/tools/generator-pie-component/src/app/index.ts +++ b/packages/tools/generator-pie-component/src/app/index.ts @@ -54,7 +54,7 @@ export default class extends Generator { ); this.fs.copyTpl( - this.templatePath('**/pie-placeholder.test.__stories__.ts'), + this.templatePath('**/pie-placeholder.__test__.__stories__.ts'), this.destinationPath(testStoryPath), this.props, undefined, From 9cd1d07973de19688502aa36a39f4c64ca0cbbef Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 27 Nov 2024 14:44:46 +0000 Subject: [PATCH 26/34] correct filename --- .../src/app/templates/__package__.json | 1 - .../accessibility/pie-placeholder.__spec__.ts | 4 +++- .../component/pie-placeholder.__spec__.ts | 1 + .../test/visual/pie-placeholder.__spec__.ts | 1 + .../src/app/templates/turbo.json | 24 +++++++++++++++++++ 5 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 packages/tools/generator-pie-component/src/app/templates/turbo.json diff --git a/packages/tools/generator-pie-component/src/app/templates/__package__.json b/packages/tools/generator-pie-component/src/app/templates/__package__.json index 83628680df..14ec11dc00 100644 --- a/packages/tools/generator-pie-component/src/app/templates/__package__.json +++ b/packages/tools/generator-pie-component/src/app/templates/__package__.json @@ -30,7 +30,6 @@ "test:browsers:ci": "yarn test:browsers", "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_<%= percyComponentName %>} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts", "test:visual:ci": "yarn test:visual", - "test:browsers-setup": "npx playwright-lit-setup" }, "author": "Just Eat Takeaway.com - Design System Team", "license": "Apache-2.0", diff --git a/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts b/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts index 94f3dc182d..1ffa75a0cb 100644 --- a/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts +++ b/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts @@ -1,4 +1,4 @@ -import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures'; +import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures.ts'; import { Pie<%= componentName %> } from '../../src/index.ts'; import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts'; @@ -6,6 +6,8 @@ test.describe('Pie<%= componentName %> - Accessibility tests', () => { test('a11y - should test the Pie<%= componentName %> component WCAG compliance', async ({ makeAxeBuilder }) => { // Arrange const basePage = new BasePage(page, '<%= fileName %>--default'); + + await page.waitForTimeout(2500); basePage.load(); diff --git a/packages/tools/generator-pie-component/src/app/templates/test/component/pie-placeholder.__spec__.ts b/packages/tools/generator-pie-component/src/app/templates/test/component/pie-placeholder.__spec__.ts index 4862ef3259..a56df9deec 100644 --- a/packages/tools/generator-pie-component/src/app/templates/test/component/pie-placeholder.__spec__.ts +++ b/packages/tools/generator-pie-component/src/app/templates/test/component/pie-placeholder.__spec__.ts @@ -9,6 +9,7 @@ test.describe('Pie<%= componentName %> - Component tests', () => { const basePage = new BasePage(page, '<%= fileName %>--default'); basePage.load(); + await page.waitForTimeout(2500); // Act const <%= componentNameCamelCase %> = page.locator(componentSelector); diff --git a/packages/tools/generator-pie-component/src/app/templates/test/visual/pie-placeholder.__spec__.ts b/packages/tools/generator-pie-component/src/app/templates/test/visual/pie-placeholder.__spec__.ts index d0cbe4189e..e8128d75fa 100644 --- a/packages/tools/generator-pie-component/src/app/templates/test/visual/pie-placeholder.__spec__.ts +++ b/packages/tools/generator-pie-component/src/app/templates/test/visual/pie-placeholder.__spec__.ts @@ -7,6 +7,7 @@ test.describe('Pie<%= componentName %> - Visual tests`', () => { const basePage = new BasePage(page, '<%= fileName %>--default'); basePage.load(); + await page.waitForTimeout(2500); await percySnapshot(page, 'Pie<%= componentName %> - Visual Test'); }); diff --git a/packages/tools/generator-pie-component/src/app/templates/turbo.json b/packages/tools/generator-pie-component/src/app/templates/turbo.json new file mode 100644 index 0000000000..5bd8fa3c53 --- /dev/null +++ b/packages/tools/generator-pie-component/src/app/templates/turbo.json @@ -0,0 +1,24 @@ +{ + "$schema": "https://turborepo.org/schema.json", + "extends": [ + "//" + ], + "pipeline": { + "test:browsers": { + "cache": true, + "dependsOn": [] + }, + "test:browsers:ci": { + "cache": true, + "dependsOn": [] + }, + "test:visual": { + "cache": false, + "dependsOn": [] + }, + "test:visual:ci": { + "cache": false, + "dependsOn": [] + } + } +} \ No newline at end of file From d7afb63fcdbdda050439112438759c3ec9970f8d Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 27 Nov 2024 14:47:00 +0000 Subject: [PATCH 27/34] correct lint --- .../generator-pie-component/src/app/templates/__package__.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tools/generator-pie-component/src/app/templates/__package__.json b/packages/tools/generator-pie-component/src/app/templates/__package__.json index 14ec11dc00..e9c8209fcf 100644 --- a/packages/tools/generator-pie-component/src/app/templates/__package__.json +++ b/packages/tools/generator-pie-component/src/app/templates/__package__.json @@ -29,7 +29,7 @@ "test:browsers": "npx playwright test -c ./playwright-lit.config.ts", "test:browsers:ci": "yarn test:browsers", "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_<%= percyComponentName %>} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts", - "test:visual:ci": "yarn test:visual", + "test:visual:ci": "yarn test:visual" }, "author": "Just Eat Takeaway.com - Design System Team", "license": "Apache-2.0", From 51700a2a8549f53bcd4e19acf38fbaa9add9a34b Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 27 Nov 2024 14:49:46 +0000 Subject: [PATCH 28/34] correct lint --- .../templates/test/accessibility/pie-placeholder.__spec__.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts b/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts index 1ffa75a0cb..dd9381a694 100644 --- a/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts +++ b/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts @@ -3,7 +3,7 @@ import { Pie<%= componentName %> } from '../../src/index.ts'; import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts'; test.describe('Pie<%= componentName %> - Accessibility tests', () => { - test('a11y - should test the Pie<%= componentName %> component WCAG compliance', async ({ makeAxeBuilder }) => { + test('a11y - should test the Pie<%= componentName %> component WCAG compliance', async ({ page, makeAxeBuilder }) => { // Arrange const basePage = new BasePage(page, '<%= fileName %>--default'); From 47c43434a57d81064cc3216406f19c3af2f66cff Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 27 Nov 2024 14:52:07 +0000 Subject: [PATCH 29/34] correct test --- .../templates/test/accessibility/pie-placeholder.__spec__.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts b/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts index dd9381a694..2c28bbe378 100644 --- a/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts +++ b/packages/tools/generator-pie-component/src/app/templates/test/accessibility/pie-placeholder.__spec__.ts @@ -6,10 +6,9 @@ test.describe('Pie<%= componentName %> - Accessibility tests', () => { test('a11y - should test the Pie<%= componentName %> component WCAG compliance', async ({ page, makeAxeBuilder }) => { // Arrange const basePage = new BasePage(page, '<%= fileName %>--default'); - - await page.waitForTimeout(2500); basePage.load(); + await page.waitForTimeout(2500); // Act const results = await makeAxeBuilder().analyze(); From 9f6552913081de3c720930344ae6346568bc38c9 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 27 Nov 2024 14:59:33 +0000 Subject: [PATCH 30/34] correct linting --- .../generator-pie-component/src/app/index.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/tools/generator-pie-component/src/app/index.ts b/packages/tools/generator-pie-component/src/app/index.ts index f6ebf36c14..d6464c0d08 100644 --- a/packages/tools/generator-pie-component/src/app/index.ts +++ b/packages/tools/generator-pie-component/src/app/index.ts @@ -31,7 +31,9 @@ export default class extends Generator { } async writing () { - const { fileName, componentPath, storyPath, testStoryPath } = this.props; + const { + fileName, componentPath, storyPath, testStoryPath, + } = this.props; const processDestinationPath = (filePath: string) => filePath.replace(/\b(placeholder)\b/g, fileName).replace(/__/g, ''); this.fs.copyTpl( @@ -54,12 +56,12 @@ export default class extends Generator { ); this.fs.copyTpl( - this.templatePath('**/pie-placeholder.__test__.__stories__.ts'), - this.destinationPath(testStoryPath), - this.props, - undefined, - { processDestinationPath }, - ); + this.templatePath('**/pie-placeholder.__test__.__stories__.ts'), + this.destinationPath(testStoryPath), + this.props, + undefined, + { processDestinationPath }, + ); // Update YAML and config files this._addPercyTokenEnvVar(); From 8462cda5d6a066e8651cf6d83f006e753d490d45 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 27 Nov 2024 15:23:22 +0000 Subject: [PATCH 31/34] add tests --- apps/pie-storybook/package.json | 3 +- .../test/utilities/index.test.ts | 85 +++++++++++++++++++ apps/pie-storybook/turbo.json | 4 + 3 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 apps/pie-storybook/test/utilities/index.test.ts diff --git a/apps/pie-storybook/package.json b/apps/pie-storybook/package.json index ab873c55a2..1155098018 100644 --- a/apps/pie-storybook/package.json +++ b/apps/pie-storybook/package.json @@ -9,7 +9,8 @@ "build": "storybook build --output-dir dist && cp -R ./static ./dist", "build:testing": "BROWSER_TESTING=true storybook build --output-dir dist && cp -R ./static ./dist", "lint:scripts": "run -T eslint .", - "lint:scripts:fix": "run -T eslint . --fix" + "lint:scripts:fix": "run -T eslint . --fix", + "test": "run -T vitest run test" }, "author": "Just Eat Takeaway.com - Design System Team", "license": "Apache-2.0", diff --git a/apps/pie-storybook/test/utilities/index.test.ts b/apps/pie-storybook/test/utilities/index.test.ts new file mode 100644 index 0000000000..f926915be8 --- /dev/null +++ b/apps/pie-storybook/test/utilities/index.test.ts @@ -0,0 +1,85 @@ +import { describe, it, expect } from 'vitest'; +import { html, render } from 'lit'; +import { createStory, createVariantStory } from '../../utilities/index'; +import { type StoryOptions } from '../../types/StoryOptions'; + +type ComponentProps = { + size: string; + variant: string; +}; + +const template: (props: ComponentProps) => ReturnType = ({ size, variant }) => html` + +`; + +describe('createStory', () => { + it('should create a story with default args', () => { + const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' }; + const story = createStory(template, defaultArgs); + + const result = story(); + expect(result.args).toEqual(defaultArgs); + expect(result.render(defaultArgs)).toHaveProperty('strings'); + }); + + it('should override default args with prop overrides', () => { + const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' }; + const story = createStory(template, defaultArgs); + + const propOverrides = { variant: 'secondary' }; + const result = story(propOverrides); + expect(result.args).toEqual({ size: 'medium', variant: 'secondary' }); + }); + + it('should apply story options correctly', () => { + const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' }; + const storyOpts: StoryOptions = { + bgColor: 'background-subtle', + }; + const story = createStory(template, defaultArgs); + + const result = story({}, storyOpts); + expect(result.parameters.backgrounds.default).toBe('background-subtle'); + }); +}); + +describe('createVariantStory', () => { + it('should generate all combinations of prop options', () => { + const propOptions = { + size: ['small', 'medium', 'large'], + variant: ['primary', 'secondary'], + }; + + const story = createVariantStory(template, propOptions); + const renderResult = story.render(); + + // Render the template to a DOM element + const container = document.createElement('div'); + render(renderResult, container); + + // Count the number of pie-component elements + const renderedCombinations = container.querySelectorAll('pie-component'); + const expectedCombinationsCount = propOptions.size.length * propOptions.variant.length; + expect(renderedCombinations.length).toBe(expectedCombinationsCount); + }); + + it('should apply story options correctly', () => { + const propOptions = { + size: ['small'], + variant: ['primary'], + }; + + const storyOpts: StoryOptions = { + bgColor: 'background-subtle', + argTypes: { size: { control: 'text' } }, + }; + + const story = createVariantStory(template, propOptions, storyOpts); + + // Check if the parameters include the background color + expect(story.parameters.backgrounds.default).toBe('background-subtle'); + + // Check if argTypes are applied + expect(story.argTypes).toEqual(storyOpts.argTypes); + }); +}); \ No newline at end of file diff --git a/apps/pie-storybook/turbo.json b/apps/pie-storybook/turbo.json index 95d0a43d1f..9460488216 100644 --- a/apps/pie-storybook/turbo.json +++ b/apps/pie-storybook/turbo.json @@ -33,6 +33,10 @@ "^generate:component-statuses" ], "outputs": ["dist/**"] + }, + "test": { + "cache": true, + "dependsOn": [] } } } \ No newline at end of file From 5874b3cc0133299050c043a5eb40d4cc0f8a148b Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 27 Nov 2024 15:34:01 +0000 Subject: [PATCH 32/34] fix linting --- apps/pie-storybook/.storybook/main.ts | 1 - .../pie-storybook/stories/pie-chip.stories.ts | 2 +- .../stories/testing/pie-chip.test.stories.ts | 82 +++++++++-- .../test/utilities/index.test.ts | 134 +++++++++--------- 4 files changed, 138 insertions(+), 81 deletions(-) diff --git a/apps/pie-storybook/.storybook/main.ts b/apps/pie-storybook/.storybook/main.ts index 471298c7f8..35e448f2f1 100644 --- a/apps/pie-storybook/.storybook/main.ts +++ b/apps/pie-storybook/.storybook/main.ts @@ -1,5 +1,4 @@ import type { StorybookConfig } from '@storybook/web-components-vite'; -import { getTestingStoryFiles } from './story-utils'; const isBrowserTesting = process.env.BROWSER_TESTING === 'true'; diff --git a/apps/pie-storybook/stories/pie-chip.stories.ts b/apps/pie-storybook/stories/pie-chip.stories.ts index 8b0fafc1ba..9936b8e658 100644 --- a/apps/pie-storybook/stories/pie-chip.stories.ts +++ b/apps/pie-storybook/stories/pie-chip.stories.ts @@ -122,4 +122,4 @@ const createChipStory = createStory(Template, defaultArgs); export const Default = createChipStory(); export const Outline = createChipStory({ variant: 'outline' }); -export const Ghost = createChipStory({ variant: 'ghost' }); \ No newline at end of file +export const Ghost = createChipStory({ variant: 'ghost' }); diff --git a/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts b/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts index 5c05749781..6fd5a8efac 100644 --- a/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts +++ b/apps/pie-storybook/stories/testing/pie-chip.test.stories.ts @@ -1,29 +1,88 @@ import { html, nothing } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import { action } from '@storybook/addon-actions'; +import { type Meta } from '@storybook/web-components'; + import '@justeattakeaway/pie-chip'; +import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip'; import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js'; -import { type ChipProps as ChipPropsBase, variants, defaultProps } from '@justeattakeaway/pie-chip'; -import { type Meta } from '@storybook/web-components'; import { type SlottedComponentProps } from '../../types'; - import { createStory, createVariantStory, type TemplateFunction, sanitizeAndRenderHTML, } from '../../utilities'; -type ChipProps = SlottedComponentProps & {showIcon: boolean }; +type ChipProps = SlottedComponentProps & { showIcon: boolean }; type ChipStoryMeta = Meta; const defaultArgs: ChipProps = { ...defaultProps, + aria: { + label: 'Chip Label', + close: 'Chip Close', + }, showIcon: false, slot: 'String', }; const chipStoryMeta: ChipStoryMeta = { title: 'Chip', - component: 'pie-chip' + component: 'pie-chip', + argTypes: { + aria: { + description: 'The ARIA labels used for various parts of the chip.', + control: 'object', + }, + variant: { + description: 'Set the variant of the chip.', + control: 'select', + options: variants, + defaultValue: { + summary: defaultProps.variant, + }, + }, + disabled: { + description: 'If `true`, disables the chip.', + control: 'boolean', + defaultValue: { + summary: defaultProps.disabled, + }, + }, + isSelected: { + description: 'If `true`, the chip element will apply the selected styles.', + control: 'boolean', + defaultValue: { + summary: defaultProps.isSelected, + }, + }, + isLoading: { + description: 'If `true`, displays a loading indicator inside the chip.', + control: 'boolean', + defaultValue: { + summary: defaultProps.isLoading, + }, + }, + isDismissible: { + description: 'If `true`, displays a close icon to dismiss the chip component.

Can be only used if `isSelected` is set to true', + control: 'boolean', + defaultValue: { + summary: defaultProps.isDismissible, + }, + if: { arg: 'isSelected', eq: true }, + }, + showIcon: { + description: 'Enable to see the example of Chip with icon.', + control: 'boolean', + defaultValue: { + summary: defaultArgs.showIcon, + }, + }, + slot: { + description: 'Content to place within the chip', + control: 'text', + }, + }, + args: defaultArgs, }; export default chipStoryMeta; @@ -53,6 +112,11 @@ const Template: TemplateFunction = ({ ${showIcon ? html`` : nothing} ${sanitizeAndRenderHTML(slot)} `; +const createChipStory = createStory(Template, defaultArgs); + +export const Default = createChipStory(); +export const Outline = createChipStory({ variant: 'outline' }); +export const Ghost = createChipStory({ variant: 'ghost' }); // Define the prop options for the matrix const sharedPropOptions = { @@ -79,12 +143,6 @@ const outlinePropOptions = { variant: ['outline'], }; -const createChipStory = createStory(Template, defaultArgs); - -export const Default = createChipStory(); -export const Outline = createChipStory({ variant: 'outline' }); -export const Ghost = createChipStory({ variant: 'ghost' }); - export const DefaultPropVariations = createVariantStory >(Template, defaultPropOptions); export const GhostPropVariations = createVariantStory>(Template, ghostPropOptions); -export const OutlinePropVariations = createVariantStory>(Template, outlinePropOptions); \ No newline at end of file +export const OutlinePropVariations = createVariantStory>(Template, outlinePropOptions); diff --git a/apps/pie-storybook/test/utilities/index.test.ts b/apps/pie-storybook/test/utilities/index.test.ts index f926915be8..11d33cfc36 100644 --- a/apps/pie-storybook/test/utilities/index.test.ts +++ b/apps/pie-storybook/test/utilities/index.test.ts @@ -13,73 +13,73 @@ const template: (props: ComponentProps) => ReturnType = ({ size, va `; describe('createStory', () => { - it('should create a story with default args', () => { - const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' }; - const story = createStory(template, defaultArgs); - - const result = story(); - expect(result.args).toEqual(defaultArgs); - expect(result.render(defaultArgs)).toHaveProperty('strings'); - }); - - it('should override default args with prop overrides', () => { - const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' }; - const story = createStory(template, defaultArgs); - - const propOverrides = { variant: 'secondary' }; - const result = story(propOverrides); - expect(result.args).toEqual({ size: 'medium', variant: 'secondary' }); - }); - - it('should apply story options correctly', () => { - const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' }; - const storyOpts: StoryOptions = { - bgColor: 'background-subtle', - }; - const story = createStory(template, defaultArgs); - - const result = story({}, storyOpts); - expect(result.parameters.backgrounds.default).toBe('background-subtle'); - }); + it('should create a story with default args', () => { + const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' }; + const story = createStory(template, defaultArgs); + + const result = story(); + expect(result.args).toEqual(defaultArgs); + expect(result.render(defaultArgs)).toHaveProperty('strings'); + }); + + it('should override default args with prop overrides', () => { + const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' }; + const story = createStory(template, defaultArgs); + + const propOverrides = { variant: 'secondary' }; + const result = story(propOverrides); + expect(result.args).toEqual({ size: 'medium', variant: 'secondary' }); + }); + + it('should apply story options correctly', () => { + const defaultArgs: ComponentProps = { size: 'medium', variant: 'primary' }; + const storyOpts: StoryOptions = { + bgColor: 'background-subtle', + }; + const story = createStory(template, defaultArgs); + + const result = story({}, storyOpts); + expect(result.parameters.backgrounds.default).toBe('background-subtle'); + }); }); describe('createVariantStory', () => { - it('should generate all combinations of prop options', () => { - const propOptions = { - size: ['small', 'medium', 'large'], - variant: ['primary', 'secondary'], - }; - - const story = createVariantStory(template, propOptions); - const renderResult = story.render(); - - // Render the template to a DOM element - const container = document.createElement('div'); - render(renderResult, container); - - // Count the number of pie-component elements - const renderedCombinations = container.querySelectorAll('pie-component'); - const expectedCombinationsCount = propOptions.size.length * propOptions.variant.length; - expect(renderedCombinations.length).toBe(expectedCombinationsCount); - }); - - it('should apply story options correctly', () => { - const propOptions = { - size: ['small'], - variant: ['primary'], - }; - - const storyOpts: StoryOptions = { - bgColor: 'background-subtle', - argTypes: { size: { control: 'text' } }, - }; - - const story = createVariantStory(template, propOptions, storyOpts); - - // Check if the parameters include the background color - expect(story.parameters.backgrounds.default).toBe('background-subtle'); - - // Check if argTypes are applied - expect(story.argTypes).toEqual(storyOpts.argTypes); - }); -}); \ No newline at end of file + it('should generate all combinations of prop options', () => { + const propOptions = { + size: ['small', 'medium', 'large'], + variant: ['primary', 'secondary'], + }; + + const story = createVariantStory(template, propOptions); + const renderResult = story.render(); + + // Render the template to a DOM element + const container = document.createElement('div'); + render(renderResult, container); + + // Count the number of pie-component elements + const renderedCombinations = container.querySelectorAll('pie-component'); + const expectedCombinationsCount = propOptions.size.length * propOptions.variant.length; + expect(renderedCombinations.length).toBe(expectedCombinationsCount); + }); + + it('should apply story options correctly', () => { + const propOptions = { + size: ['small'], + variant: ['primary'], + }; + + const storyOpts: StoryOptions = { + bgColor: 'background-subtle', + argTypes: { size: { control: 'text' } }, + }; + + const story = createVariantStory(template, propOptions, storyOpts); + + // Check if the parameters include the background color + expect(story.parameters.backgrounds.default).toBe('background-subtle'); + + // Check if argTypes are applied + expect(story.argTypes).toEqual(storyOpts.argTypes); + }); +}); From 6ff9eb62dd4bcb6403150d066b92130d1c2791bb Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Wed, 27 Nov 2024 16:51:40 +0000 Subject: [PATCH 33/34] changeset --- .changeset/loud-turkeys-rest.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/loud-turkeys-rest.md diff --git a/.changeset/loud-turkeys-rest.md b/.changeset/loud-turkeys-rest.md new file mode 100644 index 0000000000..e123927818 --- /dev/null +++ b/.changeset/loud-turkeys-rest.md @@ -0,0 +1,5 @@ +--- +"@justeattakeaway/generator-pie-component": minor +--- + +[Updated] - structure to follow new testing best practices via rendering in Storybook From e955c2873cc778d599b7c671d2f990ae74fe8094 Mon Sep 17 00:00:00 2001 From: Ben Siggery Date: Fri, 29 Nov 2024 11:48:06 +0000 Subject: [PATCH 34/34] update test --- apps/pie-storybook/test/utilities/index.test.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/apps/pie-storybook/test/utilities/index.test.ts b/apps/pie-storybook/test/utilities/index.test.ts index 11d33cfc36..6c0f33c4ab 100644 --- a/apps/pie-storybook/test/utilities/index.test.ts +++ b/apps/pie-storybook/test/utilities/index.test.ts @@ -1,5 +1,5 @@ import { describe, it, expect } from 'vitest'; -import { html, render } from 'lit'; +import { html, render, type TemplateResult} from 'lit'; import { createStory, createVariantStory } from '../../utilities/index'; import { type StoryOptions } from '../../types/StoryOptions'; @@ -19,7 +19,17 @@ describe('createStory', () => { const result = story(); expect(result.args).toEqual(defaultArgs); - expect(result.render(defaultArgs)).toHaveProperty('strings'); + + const actualTemplateResult = result.render(defaultArgs); + + const expectedTemplateResult: Partial = { + strings: Object.assign(['\n \n']), + values: ['medium', 'primary'] + }; + + // Compare the key properties of the TemplateResult + expect(actualTemplateResult.strings).toEqual(expectedTemplateResult.strings); + expect(actualTemplateResult.values).toEqual(expectedTemplateResult.values); }); it('should override default args with prop overrides', () => {