From febd282047df18ca82b745ffed5ff037a11be0f0 Mon Sep 17 00:00:00 2001 From: Geoffrey Chong Date: Thu, 22 Aug 2024 15:36:40 +1000 Subject: [PATCH] Support css modules in storybook (#4931) * wip: working fresh storybook vite * moved over old storybook config * migrate old preview and test runner * delete old storybook * migrate tailwind package to package-bundler * remove unnecessary config * remove old docs * migrated design-tokens to packaghe-bundler * shuffled * add KAIO styles * generate the tailwind css within the kaizen/tailwind package and use it in storybook to reduce crossover deps * fix tailwind docs * remove unused tailwind + update build config * Fix linting * remove unused paths in root tsconfig * fix types * fix lint * add changeset * working * fix aliases * move KAIO to dep for storybook * fixed turbo * fix pnpm lock * fix types * Update .gitignore * target current directory for config * fix build * encapsulate storybook commands into storybook workspace * fixups * fix type errors * fix type errors * introduce css linting * remove postcss from root * pt1 of root dep clean up * update pnpm lock * fix playwright * move token stories to design-tokens package * fix storybook deps * more deps shuffling * move stylinting to the root * comment on dev deps * add types for react-highlight * add chromatic to storybook * add standard styleint config * upgrade pnpm version * fix pnpm lock?? * remove need for exporting styles * Update packages/tailwind/src/_docs/pages/modifiers/media-queries.stories.tsx Co-authored-by: Cassandra * Update packages/tailwind/src/_docs/pages/working-with-tailwind.stories.tsx Co-authored-by: Cassandra * Update .storybook/components/StickerSheet/types.ts Co-authored-by: Cassandra * cleanup * fix name of dosanddons * fix name of dosanddons * update storybook components * fix * add back highlight.js * bring back black and spacing updates * restore * fix ups * fix ups * fix design-tokens distribution * fix design-tokens distribution * fix tailwind KAIO references * build before lint ts * get rid of render-hook * up the numbers * added changesets * added changesets * deprecate useResizeObserver * update changese * fix storybook test gha * moved storybook output file * fix chromatic gha build * fix shard command to chromatic test * move storybook to docs * fix chromatic workflow * introduce chromatic command * fix lint * fix tailwind for docs * fix publish shell script * fix gitignore * update ignores * fix aliases * fix docs tailwind config * fix pseudo storybook addon * update stylelint rules for CSS * move @types/react to root for all packages to use * moved types.d.ts into individual packages * fix docs * fixups * moved chromatic from KAIO to root * shuffled deps * move docs util/tailwind.css to preview.css and ignore * fix linting * fix chromatic flag --------- Co-authored-by: Geoffrey Chong Co-authored-by: Cassandra --- .buildkite/scripts/build-storybook.sh | 2 +- .buildkite/scripts/publish.sh | 2 +- .changeset/cool-oranges-tie.md | 5 + .changeset/strong-apples-clap.md | 7 + .changeset/strong-pigs-return.md | 6 + .eslintignore | 3 +- .eslintrc.js | 2 +- .github/actions/run-storybook/action.yml | 4 +- .github/workflows/chromatic-main.yaml | 4 +- .github/workflows/test-stories.yaml | 14 +- .gitignore | 3 +- .prettierignore | 3 +- .stylelintignore | 5 +- .stylelintrc-css.mjs | 8 + .stylelintrc.json => .stylelintrc-scss.json | 0 {storybook => docs}/assets/kaizen-badge.svg | 0 docs/basic-component.md | 308 -- docs/code-standards.md | 42 - .../DocsContainer/BackToTop/BackToTop.tsx | 0 .../DocsContainer/BackToTop/index.ts | 0 .../DocsContainer/DefaultDocsContainer.tsx | 1 + .../DocsContainer/Layout/Layout.module.scss | 0 .../DocsContainer/Layout/Layout.tsx | 0 .../components/DocsContainer/Layout/index.ts | 0 .../components/DocsContainer/index.ts | 0 .../components/DosAndDonts/DosAndDonts.tsx | 1 + docs/components/DosAndDonts/index.ts | 1 + .../components/Installation/Installation.tsx | 1 + .../Installation/KAIOInstallation.tsx | 0 .../components/Installation/index.ts | 0 .../KaioLegacyDocsNotification.tsx | 0 .../KaioLegacyDocsNotification/index.ts | 0 .../components/LinkTo/LinkTo.tsx | 1 + .../components/LinkTo/index.ts | 0 .../NoClipCanvas/NoClipCanvas.module.scss | 0 .../components/NoClipCanvas/NoClipCanvas.tsx | 1 + .../components/NoClipCanvas/index.ts | 0 .../ResourceLinks/ResourceLinks.module.scss | 0 .../ResourceLinks/ResourceLinks.tsx | 3 +- .../components/ResourceLinks/index.ts | 0 .../SbContent/SbContent.module.scss | 0 .../components/SbContent/SbContent.tsx | 1 + .../components/SbContent/index.ts | 0 .../SbReleaseNotification.tsx | 0 .../components/SbReleaseNotification/index.ts | 0 .../StickerSheet/StickerSheet.module.css | 11 + .../components/StickerSheet/StickerSheet.tsx | 2 +- .../StickerSheetBody/StickerSheetBody.tsx | 0 .../components/StickerSheetBody/index.ts | 0 .../StickerSheetCell.module.scss | 0 .../StickerSheetCell/StickerSheetCell.tsx | 0 .../components/StickerSheetCell/index.ts | 0 .../StickerSheetHeader/StickerSheetHeader.tsx | 0 .../components/StickerSheetHeader/index.ts | 0 .../StickerSheetRow/StickerSheetRow.tsx | 0 .../components/StickerSheetRow/index.ts | 0 .../StickerSheetTableHeading.module.scss | 0 .../StickerSheetTableHeading.tsx | 0 .../StickerSheetTableHeading/index.ts | 0 .../components/StickerSheet/index.ts | 0 .../components/StickerSheet/types.ts | 3 +- {storybook => docs}/components/index.ts | 1 - docs/main.ts | 78 + {storybook => docs}/manager-head.html | 0 {storybook => docs}/manager.tsx | 2 +- docs/package.json | 46 + docs/{ => pages}/app-starter.mdx | 9 +- docs/{ => pages}/welcome.mdx | 0 {storybook => docs}/preview-head.html | 0 {storybook => docs}/preview.tsx | 53 +- .../tailwind.config.mjs | 12 +- .../styles/tailwind.scss => docs/tailwind.css | 7 +- {storybook => docs}/test-runner.ts | 2 +- {storybook => docs}/theme.ts | 0 docs/tsconfig.json | 16 + types.d.ts => docs/types.d.ts | 5 + docs/utils/backgrounds.ts | 13 + .../utils}/global-a11y-rules.ts | 0 package.json | 103 +- packages/components/jest.config.ts | 2 - packages/components/package.json | 24 +- .../{postcss.config.js => postcss.config.mjs} | 2 +- packages/components/src/Avatar/Avatar.tsx | 2 +- .../src/AvatarGroup/AvatarGroup.tsx | 2 +- packages/components/src/Badge/Badge.tsx | 2 +- packages/components/src/Brand/Brand.tsx | 4 +- .../src/BrandMoment/BrandMoment.tsx | 6 +- ...eaders.scss => ExampleHeaders.module.scss} | 0 .../src/BrandMoment/_docs/ExampleHeaders.tsx | 4 +- .../src/ButtonGroup/ButtonGroup.tsx | 2 +- .../CalendarPopover/CalendarPopover.tsx | 2 +- .../Calendar/CalendarRange/CalendarRange.tsx | 2 +- .../CalendarSingle/CalendarSingle.tsx | 2 +- .../{Card.module.scss => Card.module.css} | 20 +- packages/components/src/Card/Card.tsx | 4 +- .../src/Checkbox/Checkbox/Checkbox.tsx | 2 +- .../Checkbox/CheckboxGroup/CheckboxGroup.tsx | 2 +- .../src/ClearButton/ClearButton.tsx | 2 +- .../Collapsible/Collapsible/Collapsible.tsx | 2 +- .../CollapsibleGroup/CollapsibleGroup.tsx | 2 +- packages/components/src/Content/Content.tsx | 2 +- .../src/DateInput/DateInput/DateInput.tsx | 2 +- .../DateInputWithIconButton.tsx | 2 +- packages/components/src/Divider/Divider.tsx | 2 +- .../components/src/EmptyState/EmptyState.tsx | 2 +- .../components/src/ErrorPage/ErrorPage.tsx | 2 +- .../components/src/FieldGroup/FieldGroup.tsx | 2 +- .../src/FieldMessage/FieldMessage.tsx | 2 +- .../components/src/Filter/Filter/Filter.tsx | 2 +- .../FilterContents/FilterContents.tsx | 2 +- .../FilterPopover/FilterPopover.tsx | 2 +- .../src/Filter/FilterBar/FilterBar.tsx | 2 +- .../FilterButton/FilterButton.tsx | 2 +- .../FilterButtonRemovable.tsx | 4 +- .../FilterButtonBase/FilterButtonBase.tsx | 2 +- .../hooks/useDateInputHandlers.spec.ts | 2 +- .../hooks/useDateValidation.spec.ts | 3 +- .../FilterDatePickerField.tsx | 4 +- .../utils/getDateValidationHandler.tsx | 2 +- .../DateRangeInputField.tsx | 4 +- .../FilterDateRangePickerField.tsx | 4 +- .../hooks/useEndDateValidation.spec.ts | 3 +- .../hooks/useStartDateValidation.spec.ts | 3 +- .../utils/validateEndDateBeforeStartDate.tsx | 2 +- ...ies.scss => FilterMultiSelect.module.scss} | 0 .../_docs/FilterMultiSelect.stories.tsx | 2 +- .../src/Filter/FilterSelect/FilterSelect.tsx | 2 +- packages/components/src/Heading/Heading.tsx | 2 +- .../src/Icon/_docs/Icon.stories.tsx | 2 +- .../{icon.stories.scss => icon.module.scss} | 0 .../src/Icon/subcomponents/SVG/SVG.tsx | 2 +- .../Illustration/subcomponents/Base/Base.tsx | 4 +- .../subcomponents/VideoPlayer/VideoPlayer.tsx | 2 +- .../Illustration/utils/usePausePlay.spec.tsx | 3 +- packages/components/src/Input/Input/Input.tsx | 2 +- .../src/Input/InputRange/InputRange.tsx | 2 +- .../src/Input/InputSearch/InputSearch.tsx | 2 +- .../KaizenProvider/_docs/KaizenProvider.mdx | 8 +- packages/components/src/Label/Label.tsx | 2 +- .../src/LabelledMessage/LabelledMessage.tsx | 2 +- .../components/src/LikertScaleLegacy/index.ts | 1 + .../Loading/LoadingGraphic/LoadingGraphic.tsx | 2 +- .../Loading/LoadingHeading/LoadingHeading.tsx | 2 +- .../src/Loading/LoadingInput/LoadingInput.tsx | 2 +- .../LoadingParagraph/LoadingParagraph.tsx | 2 +- .../Loading/LoadingSpinner/LoadingSpinner.tsx | 2 +- .../ConfirmationModal.spec.tsx | 2 +- .../Modal/ContextModal/ContextModal.spec.tsx | 2 +- .../subcomponents/ModalFooter/ModalFooter.tsx | 2 +- .../InputEditModal/InputEditModal.spec.tsx | 2 +- .../src/MultiSelect/MultiSelect.tsx | 2 +- .../subcomponents/Checkbox/Checkbox.tsx | 2 +- .../MultiSelectOptionField.tsx | 2 +- .../MultiSelectOptions/MultiSelectOptions.tsx | 2 +- .../MultiSelectToggle/MultiSelectToggle.tsx | 2 +- .../subcomponents/Popover/Popover.tsx | 2 +- .../GlobalNotification/GlobalNotification.tsx | 2 +- .../InlineNotification/InlineNotification.tsx | 2 +- .../ToastNotificationsMap.tsx | 2 +- .../Notification/ToastNotification/types.ts | 2 +- .../GenericNotification.tsx | 2 +- .../components/src/Pagination/Pagination.tsx | 2 +- packages/components/src/Popover/Popover.tsx | 2 +- .../src/ProgressBar/ProgressBar.tsx | 2 +- packages/components/src/Radio/Radio/Radio.tsx | 2 +- .../src/Radio/RadioGroup/RadioGroup.tsx | 2 +- .../EditableRichTextContent.tsx | 2 +- .../RichTextContent/RichTextContent.tsx | 2 +- .../RichTextEditor/RichTextEditor.tsx | 2 +- .../ToggleIconButton/ToggleIconButton.tsx | 2 +- .../subcomponents/Toolbar/Toolbar.tsx | 2 +- packages/components/src/Skirt/Skirt.tsx | 2 +- .../src/SplitButton/SplitButton.tsx | 4 +- .../subcomponents/BaseButton/BaseButton.tsx | 2 +- packages/components/src/Table/Table.tsx | 2 +- .../components/src/Tabs/subcomponents/Tab.tsx | 2 +- .../src/Tabs/subcomponents/TabList.tsx | 2 +- .../src/Tabs/subcomponents/TabPanel.tsx | 2 +- .../src/Tabs/subcomponents/TabPanels.tsx | 2 +- packages/components/src/Text/Text.tsx | 2 +- packages/components/src/TextArea/TextArea.tsx | 2 +- .../components/src/Tile/TileGrid/TileGrid.tsx | 2 +- .../subcomponents/GenericTile/GenericTile.tsx | 2 +- .../components/src/TimeField/TimeField.tsx | 2 +- .../src/TitleBlockZen/TitleBlockZen.spec.tsx | 2 +- .../src/TitleBlockZen/TitleBlockZen.tsx | 2 +- .../_docs/TitleBlockZen.stories.tsx | 2 +- .../ToggleSwitch/ToggleSwitch.tsx | 2 +- .../src/VisuallyHidden/VisuallyHidden.tsx | 2 +- packages/components/src/Well/Well.tsx | 2 +- packages/components/src/Workflow/Workflow.tsx | 2 +- .../Workflow/subcomponents/Footer/Footer.tsx | 2 +- .../FooterActions/FooterActions.tsx | 2 +- .../Footer/components/Root/Root.tsx | 2 +- .../Header/components/Actions/Actions.tsx | 2 +- .../Header/components/Branding/Branding.tsx | 2 +- .../Header/components/Root/Root.tsx | 2 +- .../Header/components/Titles/Titles.tsx | 2 +- .../src/Workflow/subcomponents/Main/Main.tsx | 2 +- .../subcomponents/Wrapper/Wrapper.tsx | 2 +- .../src/__actions__/Button/v3/Button.tsx | 2 +- .../v1/subcomponents/MenuList/MenuList.tsx | 2 +- .../src/__actions__/Menu/v3/Menu.tsx | 2 +- .../src/__actions__/Menu/v3/MenuItem.tsx | 2 +- .../src/__future__/Select/Select.tsx | 2 +- .../Select/subcomponents/ListBox/ListBox.tsx | 2 +- .../Select/subcomponents/Option/Option.tsx | 2 +- .../Select/subcomponents/Overlay/Overlay.tsx | 2 +- .../SelectToggle/SelectToggle.tsx | 2 +- .../subcomponents/RemoveButton.tsx | 2 +- .../components/src/__future__/Tag/Tag/Tag.tsx | 2 +- .../src/__future__/Workflow/Workflow.tsx | 2 +- .../Workflow/subcomponents/Footer/Footer.tsx | 2 +- .../FooterActions/FooterActions.tsx | 2 +- .../Footer/components/Root/Root.tsx | 2 +- .../Header/components/Actions/Actions.tsx | 2 +- .../Header/components/Branding/Branding.tsx | 2 +- .../Header/components/Root/Root.tsx | 2 +- .../Header/components/Titles/Titles.tsx | 2 +- .../Workflow/subcomponents/Main/Main.tsx | 2 +- .../subcomponents/Wrapper/Wrapper.tsx | 2 +- .../__overlays__/Tooltip/v3/OverlayArrow.tsx | 2 +- .../src/__overlays__/Tooltip/v3/Tooltip.tsx | 2 +- .../v3/_docs/Tooltip.stickersheet.stories.tsx | 2 +- packages/components/src/utils/hostedAssets.ts | 13 + packages/components/src/utils/index.ts | 1 + .../src/utils/useResizeObserver.spec.tsx | 49 - .../components/src/utils/useResizeObserver.ts | 1 + .../components/styles/foundation/_fonts.css | 12 +- .../styles/foundation/_normalize.css | 14 +- packages/components/styles/global.css | 10 +- packages/components/tsconfig.json | 8 +- packages/components/types.d.ts | 9 +- .../{docs => _docs}/DocsComponents.tsx | 16 +- .../{docs => _docs}/pages/README.mdx | 0 .../{docs => _docs}/pages/api.mdx | 0 .../_docs/pages}/color-tokens.mdx | 0 .../_docs/pages}/color-tokens.stories.tsx | 0 .../examples/cssVariableReplacement.diff | 0 .../pages/examples/example.scss | 0 .../pages/how-to-use-in-js.mdx | 0 .../pages/how-to-use-with-sass.mdx | 2 +- .../_docs/pages}/layout-and-spacing.mdx | 0 .../pages}/layout-and-spacing.stories.tsx | 0 .../styles.scss => _docs/styles.module.scss} | 6 +- packages/design-tokens/js/package.json | 5 +- packages/design-tokens/package.json | 28 +- packages/design-tokens/rollup.config.mjs | 6 + .../src/legacy/ThemeProvider.tsx | 4 +- packages/design-tokens/tsconfig.dist.json | 21 +- packages/design-tokens/tsconfig.json | 22 +- packages/design-tokens/tsconfig.types.json | 6 + packages/design-tokens/types.d.ts | 9 +- packages/hosted-assets/index.ts | 2 + packages/tailwind/index.ts | 1 - packages/tailwind/package.json | 17 +- packages/tailwind/rollup.config.mjs | 6 + .../src/_docs}/assets/copy-utility-class.gif | Bin .../src/_docs}/assets/css-generation.png | Bin .../src/_docs}/assets/inline-fold.gif | Bin .../src/_docs}/assets/tailwind-play.gif | Bin .../tailwind/src/_docs}/assets/tw-anatomy.png | Bin .../_docs}/assets/utility-search-result.png | Bin .../pages}/backgrounds/background-color.mdx | 0 .../backgrounds/background-color.stories.tsx | 8 +- .../src/_docs/pages}/borders/border-color.mdx | 0 .../pages}/borders/border-color.stories.tsx | 8 +- .../_docs/pages}/borders/border-radius.mdx | 0 .../pages}/borders/border-radius.stories.tsx | 6 +- .../_docs/pages}/borders/border-spacing.mdx | 0 .../pages}/borders/border-spacing.stories.tsx | 6 +- .../src/_docs/pages}/borders/border-width.mdx | 0 .../pages}/borders/border-width.stories.tsx | 6 +- .../src/_docs/pages}/configuration.mdx | 0 .../src/_docs/pages}/contributing.mdx | 0 .../src/_docs/pages}/effects/shadow.mdx | 0 .../_docs/pages}/effects/shadow.stories.tsx | 6 +- .../src/_docs/pages}/getting-started.mdx | 6 +- .../_docs/pages}/modifiers/media-queries.mdx | 0 .../modifiers/media-queries.stories.tsx | 0 .../_docs/pages}/modifiers/pseudo-states.mdx | 0 .../modifiers/pseudo-states.stories.tsx | 0 .../tailwind/src/_docs/pages}/overview.mdx | 2 +- .../src/_docs/pages}/spacing/margin.mdx | 0 .../_docs/pages}/spacing/margin.stories.tsx | 6 +- .../src/_docs/pages}/spacing/padding.mdx | 0 .../_docs/pages}/spacing/padding.stories.tsx | 6 +- .../_docs/pages}/typography/font-family.mdx | 0 .../pages}/typography/font-family.stories.tsx | 6 +- .../src/_docs/pages}/typography/font-size.mdx | 0 .../pages}/typography/font-size.stories.tsx | 6 +- .../_docs/pages}/typography/font-weight.mdx | 0 .../pages}/typography/font-weight.stories.tsx | 6 +- .../_docs/pages}/typography/line-height.mdx | 0 .../pages}/typography/line-height.stories.tsx | 6 +- .../pages}/typography/max-text-width.mdx | 0 .../typography/max-text-width.stories.tsx | 6 +- .../_docs/pages}/typography/text-color.mdx | 0 .../pages}/typography/text-color.stories.tsx | 8 +- .../pages/utility-class-helpers-overview.mdx | 6 +- .../_docs/pages}/working-with-tailwind.mdx | 0 .../pages}/working-with-tailwind.stories.tsx | 2 +- .../TailwindStoryTemplate.tsx | 0 .../components/CardContent/CardContent.tsx | 0 .../components/CardContent/index.ts | 0 .../components/CodeSnippet/CodeSnippet.tsx | 0 .../components/CodeSnippet/index.ts | 0 .../utils}/TailwindStoryTemplate/index.ts | 0 .../src/_docs/utils}/flattenEntries.ts | 0 .../src/_docs/utils}/utilityDescription.ts | 0 packages/tailwind/src/tailwind-presets.ts | 106 +- packages/tailwind/tailwind.config.mjs | 19 + packages/tailwind/tsconfig.dist.json | 22 +- packages/tailwind/tsconfig.json | 21 +- packages/tailwind/tsconfig.types.json | 6 + packages/tailwind/types.d.ts | 14 + pnpm-lock.yaml | 4062 ++++++++--------- pnpm-workspace.yaml | 1 + process-compose.yaml | 4 +- storybook/.eslintignore | 1 - storybook/backgrounds.ts | 29 - storybook/components/DosAndDonts/index.ts | 1 - .../StickerSheet/StickerSheet.module.scss | 13 - storybook/main.ts | 68 - storybook/webpack.config.ts | 37 - storybook/webpack/browserslist.ts | 21 - storybook/webpack/rules.ts | 79 - tsconfig.json | 13 +- turbo.json | 16 +- 329 files changed, 2632 insertions(+), 3421 deletions(-) create mode 100644 .changeset/cool-oranges-tie.md create mode 100644 .changeset/strong-apples-clap.md create mode 100644 .changeset/strong-pigs-return.md create mode 100644 .stylelintrc-css.mjs rename .stylelintrc.json => .stylelintrc-scss.json (100%) rename {storybook => docs}/assets/kaizen-badge.svg (100%) delete mode 100644 docs/basic-component.md delete mode 100644 docs/code-standards.md rename {storybook => docs}/components/DocsContainer/BackToTop/BackToTop.tsx (100%) rename {storybook => docs}/components/DocsContainer/BackToTop/index.ts (100%) rename {storybook => docs}/components/DocsContainer/DefaultDocsContainer.tsx (95%) rename {storybook => docs}/components/DocsContainer/Layout/Layout.module.scss (100%) rename {storybook => docs}/components/DocsContainer/Layout/Layout.tsx (100%) rename {storybook => docs}/components/DocsContainer/Layout/index.ts (100%) rename {storybook => docs}/components/DocsContainer/index.ts (100%) rename storybook/components/DosAndDonts/DoesAndDonts.tsx => docs/components/DosAndDonts/DosAndDonts.tsx (96%) create mode 100644 docs/components/DosAndDonts/index.ts rename {storybook => docs}/components/Installation/Installation.tsx (90%) rename {storybook => docs}/components/Installation/KAIOInstallation.tsx (100%) rename {storybook => docs}/components/Installation/index.ts (100%) rename {storybook => docs}/components/KaioLegacyDocsNotification/KaioLegacyDocsNotification.tsx (100%) rename {storybook => docs}/components/KaioLegacyDocsNotification/index.ts (100%) rename {storybook => docs}/components/LinkTo/LinkTo.tsx (91%) rename {storybook => docs}/components/LinkTo/index.ts (100%) rename {storybook => docs}/components/NoClipCanvas/NoClipCanvas.module.scss (100%) rename {storybook => docs}/components/NoClipCanvas/NoClipCanvas.tsx (95%) rename {storybook => docs}/components/NoClipCanvas/index.ts (100%) rename {storybook => docs}/components/ResourceLinks/ResourceLinks.module.scss (100%) rename {storybook => docs}/components/ResourceLinks/ResourceLinks.tsx (93%) rename {storybook => docs}/components/ResourceLinks/index.ts (100%) rename {storybook => docs}/components/SbContent/SbContent.module.scss (100%) rename {storybook => docs}/components/SbContent/SbContent.tsx (89%) rename {storybook => docs}/components/SbContent/index.ts (100%) rename {storybook => docs}/components/SbReleaseNotification/SbReleaseNotification.tsx (100%) rename {storybook => docs}/components/SbReleaseNotification/index.ts (100%) create mode 100644 docs/components/StickerSheet/StickerSheet.module.css rename {storybook => docs}/components/StickerSheet/StickerSheet.tsx (97%) rename {storybook => docs}/components/StickerSheet/components/StickerSheetBody/StickerSheetBody.tsx (100%) rename {storybook => docs}/components/StickerSheet/components/StickerSheetBody/index.ts (100%) rename {storybook => docs}/components/StickerSheet/components/StickerSheetCell/StickerSheetCell.module.scss (100%) rename {storybook => docs}/components/StickerSheet/components/StickerSheetCell/StickerSheetCell.tsx (100%) rename {storybook => docs}/components/StickerSheet/components/StickerSheetCell/index.ts (100%) rename {storybook => docs}/components/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.tsx (100%) rename {storybook => docs}/components/StickerSheet/components/StickerSheetHeader/index.ts (100%) rename {storybook => docs}/components/StickerSheet/components/StickerSheetRow/StickerSheetRow.tsx (100%) rename {storybook => docs}/components/StickerSheet/components/StickerSheetRow/index.ts (100%) rename {storybook => docs}/components/StickerSheet/components/StickerSheetTableHeading/StickerSheetTableHeading.module.scss (100%) rename {storybook => docs}/components/StickerSheet/components/StickerSheetTableHeading/StickerSheetTableHeading.tsx (100%) rename {storybook => docs}/components/StickerSheet/components/StickerSheetTableHeading/index.ts (100%) rename {storybook => docs}/components/StickerSheet/index.ts (100%) rename {storybook => docs}/components/StickerSheet/types.ts (60%) rename {storybook => docs}/components/index.ts (86%) create mode 100644 docs/main.ts rename {storybook => docs}/manager-head.html (100%) rename {storybook => docs}/manager.tsx (95%) create mode 100644 docs/package.json rename docs/{ => pages}/app-starter.mdx (88%) rename docs/{ => pages}/welcome.mdx (100%) rename {storybook => docs}/preview-head.html (100%) rename {storybook => docs}/preview.tsx (75%) rename tailwind.config.js => docs/tailwind.config.mjs (53%) rename storybook/styles/tailwind.scss => docs/tailwind.css (74%) rename {storybook => docs}/test-runner.ts (95%) rename {storybook => docs}/theme.ts (100%) create mode 100644 docs/tsconfig.json rename types.d.ts => docs/types.d.ts (71%) create mode 100644 docs/utils/backgrounds.ts rename {storybook => docs/utils}/global-a11y-rules.ts (100%) rename packages/components/{postcss.config.js => postcss.config.mjs} (76%) rename packages/components/src/BrandMoment/_docs/{ExampleHeaders.scss => ExampleHeaders.module.scss} (100%) rename packages/components/src/Card/{Card.module.scss => Card.module.css} (77%) rename packages/components/src/Filter/FilterMultiSelect/_docs/{FilterMultiSelect.stories.scss => FilterMultiSelect.module.scss} (100%) rename packages/components/src/Icon/_docs/{icon.stories.scss => icon.module.scss} (100%) create mode 100644 packages/components/src/utils/hostedAssets.ts delete mode 100644 packages/components/src/utils/useResizeObserver.spec.tsx rename packages/design-tokens/{docs => _docs}/DocsComponents.tsx (89%) rename packages/design-tokens/{docs => _docs}/pages/README.mdx (100%) rename packages/design-tokens/{docs => _docs}/pages/api.mdx (100%) rename {docs/tokens/color => packages/design-tokens/_docs/pages}/color-tokens.mdx (100%) rename {docs/tokens/color => packages/design-tokens/_docs/pages}/color-tokens.stories.tsx (100%) rename packages/design-tokens/{docs => _docs}/pages/examples/cssVariableReplacement.diff (100%) rename packages/design-tokens/{docs => _docs}/pages/examples/example.scss (100%) rename packages/design-tokens/{docs => _docs}/pages/how-to-use-in-js.mdx (100%) rename packages/design-tokens/{docs => _docs}/pages/how-to-use-with-sass.mdx (98%) rename {docs/layout-and-spacing => packages/design-tokens/_docs/pages}/layout-and-spacing.mdx (100%) rename {docs/layout-and-spacing => packages/design-tokens/_docs/pages}/layout-and-spacing.stories.tsx (100%) rename packages/design-tokens/{docs/styles.scss => _docs/styles.module.scss} (85%) create mode 100644 packages/design-tokens/rollup.config.mjs create mode 100644 packages/design-tokens/tsconfig.types.json delete mode 100644 packages/tailwind/index.ts create mode 100644 packages/tailwind/rollup.config.mjs rename {docs/Tailwind => packages/tailwind/src/_docs}/assets/copy-utility-class.gif (100%) rename {docs/Tailwind => packages/tailwind/src/_docs}/assets/css-generation.png (100%) rename {docs/Tailwind => packages/tailwind/src/_docs}/assets/inline-fold.gif (100%) rename {docs/Tailwind => packages/tailwind/src/_docs}/assets/tailwind-play.gif (100%) rename {docs/Tailwind => packages/tailwind/src/_docs}/assets/tw-anatomy.png (100%) rename {docs/Tailwind => packages/tailwind/src/_docs}/assets/utility-search-result.png (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/backgrounds/background-color.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/backgrounds/background-color.stories.tsx (79%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/borders/border-color.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/borders/border-color.stories.tsx (79%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/borders/border-radius.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/borders/border-radius.stories.tsx (85%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/borders/border-spacing.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/borders/border-spacing.stories.tsx (87%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/borders/border-width.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/borders/border-width.stories.tsx (85%) rename {docs/Tailwind => packages/tailwind/src/_docs/pages}/configuration.mdx (100%) rename {docs/Tailwind => packages/tailwind/src/_docs/pages}/contributing.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/effects/shadow.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/effects/shadow.stories.tsx (84%) rename {docs/Tailwind => packages/tailwind/src/_docs/pages}/getting-started.mdx (96%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/modifiers/media-queries.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/modifiers/media-queries.stories.tsx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/modifiers/pseudo-states.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/modifiers/pseudo-states.stories.tsx (100%) rename {docs/Tailwind => packages/tailwind/src/_docs/pages}/overview.mdx (96%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/spacing/margin.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/spacing/margin.stories.tsx (86%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/spacing/padding.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/spacing/padding.stories.tsx (85%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/typography/font-family.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/typography/font-family.stories.tsx (83%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/typography/font-size.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/typography/font-size.stories.tsx (82%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/typography/font-weight.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/typography/font-weight.stories.tsx (83%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/typography/line-height.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/typography/line-height.stories.tsx (84%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/typography/max-text-width.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/typography/max-text-width.stories.tsx (90%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/typography/text-color.mdx (100%) rename {docs/Tailwind/utility-class-helpers => packages/tailwind/src/_docs/pages}/typography/text-color.stories.tsx (83%) rename docs/Tailwind/utility-class-helpers/overview.mdx => packages/tailwind/src/_docs/pages/utility-class-helpers-overview.mdx (92%) rename {docs/Tailwind => packages/tailwind/src/_docs/pages}/working-with-tailwind.mdx (100%) rename {docs/Tailwind => packages/tailwind/src/_docs/pages}/working-with-tailwind.stories.tsx (97%) rename {storybook/components => packages/tailwind/src/_docs/utils}/TailwindStoryTemplate/TailwindStoryTemplate.tsx (100%) rename {storybook/components => packages/tailwind/src/_docs/utils}/TailwindStoryTemplate/components/CardContent/CardContent.tsx (100%) rename {storybook/components => packages/tailwind/src/_docs/utils}/TailwindStoryTemplate/components/CardContent/index.ts (100%) rename {storybook/components => packages/tailwind/src/_docs/utils}/TailwindStoryTemplate/components/CodeSnippet/CodeSnippet.tsx (100%) rename {storybook/components => packages/tailwind/src/_docs/utils}/TailwindStoryTemplate/components/CodeSnippet/index.ts (100%) rename {storybook/components => packages/tailwind/src/_docs/utils}/TailwindStoryTemplate/index.ts (100%) rename {docs/Tailwind/helpers => packages/tailwind/src/_docs/utils}/flattenEntries.ts (100%) rename {docs/Tailwind/helpers => packages/tailwind/src/_docs/utils}/utilityDescription.ts (100%) create mode 100644 packages/tailwind/tailwind.config.mjs create mode 100644 packages/tailwind/tsconfig.types.json create mode 100644 packages/tailwind/types.d.ts delete mode 100644 storybook/.eslintignore delete mode 100644 storybook/backgrounds.ts delete mode 100644 storybook/components/DosAndDonts/index.ts delete mode 100644 storybook/components/StickerSheet/StickerSheet.module.scss delete mode 100644 storybook/main.ts delete mode 100644 storybook/webpack.config.ts delete mode 100644 storybook/webpack/browserslist.ts delete mode 100644 storybook/webpack/rules.ts diff --git a/.buildkite/scripts/build-storybook.sh b/.buildkite/scripts/build-storybook.sh index 28f9227cbea..046c46fb4dc 100755 --- a/.buildkite/scripts/build-storybook.sh +++ b/.buildkite/scripts/build-storybook.sh @@ -6,5 +6,5 @@ set -e corepack enable pnpm install --frozen-lockfile -pnpm turbo:storybook:build:prod +pnpm turbo @docs/storybook#build -- --docs tar -czf ./storybook.tar.gz ./storybook/public diff --git a/.buildkite/scripts/publish.sh b/.buildkite/scripts/publish.sh index 4fa7ba473bf..07f5c8ccb38 100755 --- a/.buildkite/scripts/publish.sh +++ b/.buildkite/scripts/publish.sh @@ -5,7 +5,7 @@ echo "Publishing to ${KAIZEN_DOMAIN_NAME}" # Publish to production bucket aws s3 sync --delete \ - "storybook/public" \ + "docs/storybook-static" \ "s3://${KAIZEN_DOMAIN_NAME}/storybook" aws cloudfront create-invalidation \ diff --git a/.changeset/cool-oranges-tie.md b/.changeset/cool-oranges-tie.md new file mode 100644 index 00000000000..d30b4844f84 --- /dev/null +++ b/.changeset/cool-oranges-tie.md @@ -0,0 +1,5 @@ +--- +"@kaizen/hosted-assets": minor +--- + +Deprecated hosted-assets in favour of KAIO diff --git a/.changeset/strong-apples-clap.md b/.changeset/strong-apples-clap.md new file mode 100644 index 00000000000..d0c064feded --- /dev/null +++ b/.changeset/strong-apples-clap.md @@ -0,0 +1,7 @@ +--- +"@kaizen/design-tokens": minor +"@kaizen/tailwind": minor +--- + +- Added ESM bundle +- Fixed design-tokens js entrypoint diff --git a/.changeset/strong-pigs-return.md b/.changeset/strong-pigs-return.md new file mode 100644 index 00000000000..7afa1a44aaf --- /dev/null +++ b/.changeset/strong-pigs-return.md @@ -0,0 +1,6 @@ +--- +"@kaizen/components": minor +--- + +- Exported types from LikertScale +- Deprecated `useResizeObserver` in favour of native DOM API `ResizeObserver` diff --git a/.eslintignore b/.eslintignore index bb1de5275d4..a5a8cd71305 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,4 @@ /packages/**/dist /packages/components/src/Icon/bin/Template.tsx -storybook/public +/docs/storybook-static +/docs/preview.css diff --git a/.eslintrc.js b/.eslintrc.js index 74cb42e37c9..c081b89da1d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -271,7 +271,7 @@ module.exports = { overrides: [ { files: [ - "storybook/*", + ".storybook/*", "**/_docs/**/*", "**/__tests__/**/*", "*.stories.tsx", diff --git a/.github/actions/run-storybook/action.yml b/.github/actions/run-storybook/action.yml index 80c92a4caa1..e4579d784e1 100644 --- a/.github/actions/run-storybook/action.yml +++ b/.github/actions/run-storybook/action.yml @@ -16,9 +16,9 @@ runs: uses: actions/download-artifact@v3 with: name: ${{ inputs.artifactName }} - path: "./storybook/public" + path: "./docs/storybook-static" - name: Run storybook uses: Eun/http-server-action@v1 with: - directory: "./storybook/public" + directory: "./docs/storybook-static" port: 6006 diff --git a/.github/workflows/chromatic-main.yaml b/.github/workflows/chromatic-main.yaml index 9af43a0afc6..ddb9115ccef 100644 --- a/.github/workflows/chromatic-main.yaml +++ b/.github/workflows/chromatic-main.yaml @@ -18,11 +18,11 @@ jobs: fetch-depth: 0 - uses: ./.github/actions/setup - name: Build Storybook - run: pnpm turbo:storybook:build + run: pnpm turbo @docs/storybook#build:chromatic - name: Publish to Chromatic uses: chromaui/action@v1 with: token: ${{ github.token }} projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} - storybookBuildDir: "./storybook/public" + storybookBuildDir: "./docs/storybook-static" autoAcceptChanges: main # 👈 Auto accept main builds (why https://www.chromatic.com/docs/github-actions#github-squashrebase-merge-and-the-main-branch) diff --git a/.github/workflows/test-stories.yaml b/.github/workflows/test-stories.yaml index fe4c489fde5..0fe7abe4b96 100644 --- a/.github/workflows/test-stories.yaml +++ b/.github/workflows/test-stories.yaml @@ -40,12 +40,12 @@ jobs: - name: Checkout repository uses: actions/checkout@v4 - uses: ./.github/actions/setup - - run: pnpm turbo:storybook:build:test + - run: pnpm turbo @docs/storybook#build -- --test - name: Upload Storybook build as artifact uses: actions/upload-artifact@v3 with: name: ${{ env.ARTIFACT_NAME }} - path: "./storybook/public" + path: "./docs/storybook-static" retention-days: 1 storybook-tests-1: @@ -62,7 +62,7 @@ jobs: with: artifactName: ${{ env.ARTIFACT_NAME }} - name: Storybook tests (1/3) - run: pnpm storybook:test --shard 1/3 + run: pnpm -F @docs/storybook test -- --shard 1/3 storybook-tests-2: name: "test-storybook" @@ -78,7 +78,7 @@ jobs: with: artifactName: ${{ env.ARTIFACT_NAME }} - name: Storybook tests (2/3) - run: pnpm storybook:test --shard 2/3 + run: pnpm -F @docs/storybook test -- --shard 2/3 storybook-tests-3: name: "test-storybook" @@ -94,7 +94,7 @@ jobs: with: artifactName: ${{ env.ARTIFACT_NAME }} - name: Storybook tests (3/3) - run: pnpm storybook:test --shard 3/3 + run: pnpm -F @docs/storybook test -- --shard 3/3 chromatic: needs: run-check @@ -109,14 +109,14 @@ jobs: - uses: ./.github/actions/setup - name: Build Storybook for Chromatic # We want both stories and docs for the branch preview - run: pnpm turbo:storybook:build:chromatic-turbo-snap + run: pnpm turbo @docs/storybook#build:chromatic - id: publishChromatic name: Publish to Chromatic uses: chromaui/action@v11 with: token: ${{ github.token }} projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} - storybookBuildDir: "./storybook/public" + storybookBuildDir: "./docs/storybook-static" onlyChanged: "!(main)" externals: | **/!(*.module).scss diff --git a/.gitignore b/.gitignore index a286b748ce8..867078efcce 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,10 @@ node_modules yarn-*.log -/storybook/public/ +docs/storybook-static .DS_Store dist .cache .yalc yalc.loc .turbo +preview.css diff --git a/.prettierignore b/.prettierignore index 1771e511616..7e829838221 100644 --- a/.prettierignore +++ b/.prettierignore @@ -16,7 +16,8 @@ # Explicitly ignore... pnpm-lock.yaml **/node_modules/ -/storybook/public/ +/docs/storybook-static/ +/docs/utils/tailwind.css /packages/**/dist /packages/components/locales /packages/design-tokens/css diff --git a/.stylelintignore b/.stylelintignore index 3e9dc04ec2d..770e446ebba 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1,4 +1,7 @@ packages/design-tokens/**/*.scss packages/design-tokens/**/*.css +packages/components/dist/* packages/components/locales/* -storybook/styles/* +docs/storybook-static/* +docs/tailwind.css +docs/preview.css diff --git a/.stylelintrc-css.mjs b/.stylelintrc-css.mjs new file mode 100644 index 00000000000..5ca791a7a6b --- /dev/null +++ b/.stylelintrc-css.mjs @@ -0,0 +1,8 @@ +/** @type {import('stylelint').Config} */ +// For CSS linting only, SCSS linting is handled in the root .stylelintrc.json +export default { + extends: "stylelint-config-standard", + rules: { + "selector-class-pattern": null, + }, +} diff --git a/.stylelintrc.json b/.stylelintrc-scss.json similarity index 100% rename from .stylelintrc.json rename to .stylelintrc-scss.json diff --git a/storybook/assets/kaizen-badge.svg b/docs/assets/kaizen-badge.svg similarity index 100% rename from storybook/assets/kaizen-badge.svg rename to docs/assets/kaizen-badge.svg diff --git a/docs/basic-component.md b/docs/basic-component.md deleted file mode 100644 index e4b059edb40..00000000000 --- a/docs/basic-component.md +++ /dev/null @@ -1,308 +0,0 @@ -# Basic component recipe - -Recipe for creating a basic component. - -- [Intro](#intro) -- [Adding a new component](#adding-a-new-component) -- [Component structure](#component-structure) - - [Documentation](#documentation) - - [Subcomponents](#subcomponents) - - [Hooks and Utils](#hooks-and-utils) - - [index.ts](#indexts-1) - - [Component.tsx](#componenttsx) - - [Styles](#styles) - - [Tests](#tests) - - [Types](#types) -- [Component.tsx template](#componenttsx-template) - - [Props](#props) - - [The component](#the-component) - - [Display name](#display-name) - -## Intro - -There are 2 types of components that live in `@kaizen/components`, `src` and `future`, both are **production safe**. - -### src components - -These are components which are essentially the "main" branch of components and only receive non-breaking changes. **Any brand new components should go here.** - -### future components - -Components which have an existing `src` component equivalent, but have any breaking changes to their API. Eventually `future` components will replace their `src` equivalent in the next major release. - -## Adding a new component - -To generate a new component or a subcomponent, -run the following command and follow the prompts: -``` -pnpm plop -``` -or run the following command to answer the name prop (replace `NewComponentName` with your component name): -``` -pnpm plop NewComponentName -``` - -## Component structure - -Given the component `PancakeStack`, the component structure will follow this: - -``` -/* Component */ -src/(__future__/) - PancakeStack/ - _docs/ - - PancakeStack.mdx - - PancakeStack.stickersheet.stories.tsx - - PancakeStack.stories.tsx - hooks/ - - index.ts - - useHook.ts - - useHook.spec.ts - subcomponents/ - - Pancake/ - - index.ts - - Pancake.tsx - - Pancake.module.scss - - Pancake.spec.tsx - - Topping/ - - index.ts - - Topping.tsx - - Topping.module.scss - - Topping.spec.tsx - utils/ - - index.ts - - groupedFunctions.ts (eg. getters) - - groupedFunctions.spec.ts - - functionName.ts - - functionName.spec.ts - - _mixins.scss - - _variables.scss - - index.ts - - PancakeStack.tsx - - PancakeStack.module.scss - - PancakeStack.spec.tsx - - types.ts -``` - -### Documentation - -The `_docs/` folder houses Storybook stories and stickersheets, and the directory is excluded from the published package. - -### Subcomponents - -Subcomponents live in the `subcomponents/` directory and should not have subcomponents of their own. If you are finding that you want subcomponents for your subcomponents, then one (or both) should be a component instead. - -Aside from the above, subcomponents should follow the same structure as a normal component. - -Subcomponents living within their own directories have the benefits of keeping files small and clean, and allows for mocking for tests. - -### Hooks and Utils - -Hooks and utils go into their own respective folders, with their filename reflective of either the function name or a collective name based on the functionality of functions within the file. - -### index.ts - -This file is used only as an entrypoint. -Anything relating to the component (eg. hooks, subcomponents) that are to be exported should be included here. - -```ts -// index.ts -export * from "./PancakeStack" -export * from "./Pancake" -export * from "./hooks" -``` - -### Component.tsx - -Component files should be named to match the component name (eg. the Pancake component will be named `Pancake.tsx`). - -See [template](#componenttsx-template) for component composition. - -### Styles - -Style files should named to match the component name (eg. the Pancake component will be named `Pancake.module.scss`) and live in the same directory. - -Keep these clean by separating styles for subcomponents in their own respective files. - -If you require scss variables or mixins to be shared between the parent and its children, add them to `_variables.scss` or `_mixins.scss` in the parent directory and import the file into the required stylesheets. Note that these do not have `.module` as part of their extension as they should not contain any classes directly used by the component. - -### Tests - -Test files should be named to match the component/function name (eg. `Pancake.spec.tsx` and `functionName.ts`) and live in the same directory. - -We should only write unit and functional tests in these files, and not snapshot tests as they do not have meaningful assertions/expectations. - -For visual regression testing, create a stickersheet story in Storybook and send it to Chromatic. - -### Types - -For any shared/useful TypeScript types that do not make sense to belong in the file it is used, create a `types.ts` file and export the types from `index.ts`. - -## Component.tsx template - -A basic component will follow this template: - -```tsx -// PancakeStack.tsx -import React, { HTMLAttributes } from "react" -import classnames from "classnames" -import { OverrideClassName } from "~types/OverrideClassName" -import styles from "./PancakeStack.module.scss" - -export type PancakeStackProps = { - children: React.ReactNode - isBooleanProp: boolean - hasOptionalBooleanProp?: boolean - onCustomFunction: () => void -} & OverrideClassName> - -export const PancakeStack = ({ - children, - isBooleanProp, - hasOptionalBooleanProp = false, - onCustomFunction, - classNameOverride, - ...restProps -}: PancakeStackProps): JSX.Element => { - const [hasSyrup, setHasSyrup] = useState(false) - - const handleCustomFunction = (): boolean => { - onCustomFunction() - setHasSyrup(!hasSyrup) - return true - } - - return ( -
- {children} - {doSomething(hasOptionalBooleanProp) && } -
- ) -} - -PancakeStack.displayName = "PancakeStack" -``` - -### Props - -```tsx -import { HTMLAttributes } from "react" -import { OverrideClassName } from "~types/OverrideClassName" - -export type PancakeStackProps = { - children: React.ReactNode - isBooleanProp: boolean - hasOptionalBooleanProp?: boolean - onCustomFunction: () => void -} & OverrideClassName> -``` - -- Create and export a`type` for your props in the format of `{PascalComponentName}Props` -- Use our custom type `OverrideClassName` to replace `className` with the alias `classNameOverride` - - The alias allows us to easier track usage (as ideally teams should not need to use this) and allows us to not be a bottleneck if the component does not meet their needs in the interim - - Previously `classNameAndIHaveSpokenToDST` -- Extend the native attributes of the HTML element of your component - -```tsx -// Extending
-import { HTMLAttributes } from "react" -export type SectionProps = OverrideClassName> - -// Extending