Storybook v5 -> v8 (#2875)

* chore: make a diff'erence

* Storybook v8 config + tooling changes (#2876)

* chore: exclude *.stories.tsx files from linting and prettier in lint-staged.config.js

* chore: exclude *.stories.tsx files from tsconfig.json

* chore: update npm dependencies to required versions

* chore: change story sortOrder

* chore: add @storybook/addon-storysource to storybook

* Storybook v8 stories batch 1 (#2877)

* chore: add Avatar component readme + stories

* chore: add FlatButton component readme + stories

* chore: add IconButton component readme + stories

* chore: add LinkButton readme

* chore: add PrimaryButton component readme + stories

* chore: add SecondaryButton component readme + stories

* chore: add SecondaryIconButton component readme + stories

* chore: add Card component readme + stories

* chore: add CollapsibleMotion component readme + stories

* chore: add CollapsiblePanel component readme + stories

* chore: add horizontal constraints component readme + stories

* chore: add DropdownMenu component readme + stories

* chore: add underline style to links in markdown-content

* Storybook v8 stories batch 2 (#2878)

* chore: add DataTableManager component readme + stories

* chore: add DataTable component readme  +stories

* chore: reference DataTable columns signature in the ts type description (sb props-table)

* fix: update DataTable header icon rendering logic

* Storybook v8 stories batch 3 (#2879)

* chore: add FieldErrors component readme + stories

* chore: add FieldLabel component readme + stories

* chore: add FieldWarnings component readme + stories

* chore: add AsyncCreatableSelectField component readme + stories

* chore: add AsyncSelectField component readme + stories

* chore: add CreatableSelectField component readme + stories

* chore: add DateField component readme + stories

* chore: add DateRangeField component readme + stories

* chore: add DateTimeField component readme + stories

* chore: add LocalizedMultilineTextField component readme + stories

* chore: add LocalizedTextField component readme + stories

* chore: add MoneyField component readme + stories

* fix: fix DateField's `onInfoButtonClick` type

* fix: fix DateField type + add a dropdown for the `hintIcon` prop to the sb prop-table

* fix: add iconArgType to LocalizedTextField story for easy `hintIcon` config

* fix: add currencies as prop to MoneyField component in sb story

* Storybook v8 stories batch 5 (#2881)

* chore: add CheckboxInput component readme + stories

* chore: add CreatableSelectInput component readme + stories

* chore: add DateInput component readme + stories

* chore: add DateRangeInput component readme + stories

* chore: add DateTimeInput component readme + stories

* chore: add LocalizedMoneyInput component readme + stories

* chore: add LocalizedMultilineTextInput component readme + stories

* chore: add LocalizedRichTextInput component readme + stories

* chore: add LocalizedTextInput component readme + stories

* chore: add MoneyInput component readme + stories

* chore: add MultilineTextInput component readme + stories

* chore: add NumberInput component readme + stories

* fix: add DateInput story decorator to enforce a minHeight

* fix: allow CheckboxInput to be toggled by mouse-lcik in basic example

* fix: update CreatableSelectInput stories to include isValidNewOption prop

* chore: update JSX code blocks in README and additional-info.md files

* fix: add argTypes for selectedLanguage in LocalizedRichTextInput story

* chore: add argTypes for selectedLanguage in LocalizedTextInput story

* chore: improve typescript description of MultilineTextInput

* fix: add DateTimeInputWrapper component for storybook

* Update packages/components/inputs/localized-multiline-text-input/src/localized-multiline-text-input.stories.tsx

Co-authored-by: Byron Wall <[email protected]>

---------

Co-authored-by: Byron Wall <[email protected]>

* Storybook v8 stories batch 7 (#2883)

* chore: add LoadingSpinner component readme + stories

* chore: add Messaging components' readmes + stories

* chore: add Notification component readme + stories

* chore: add Pagination components' readmes + stories

* chore: add PrimaryActionDropdown component readme + stories

* chore: add ProgressBar component readme + stories

* chore: add Spacing components' readmes + stories

* chore: add Stamp component readme + stories

* chore: add Tag components' readme + stories

* chore: add Text components' readmes + stories

* chore: add Tooltip component readme + stories

* chore: add ViewSwitcher component readme + stories

* chore: add missing 'philosophy' docs to sb

* chore: update notification example message and type

* fix: disable children control in PrimaryActionDropdown stories

* fix: disable intlMessage control in WarningMessage stories

* chore: disable children control in Stamp component stories

* chore: update notification example message and type

* chore: disable children control in ViewSwitcher component stories

* Update packages/components/messages/src/error-message/error-message.stories.tsx

Co-authored-by: Byron Wall <[email protected]>

* fix: fix formatting issue

---------

Co-authored-by: Byron Wall <[email protected]>

* Storybook v8 stories batch 6 (#2882)

* chore: add PasswordInput component readme + stories

* chore: add RadioInput component readme + stories

* chore: add RichTextInput component readme + stories

* chore: add SearchSelectInput component readme + stories

* chore: add SearchTextInput component readme + stories

* chore: add SelectInput component readme + stories

* chore: add SelectableSearchInput component readme + stories

* chore: add TextInput component readme + stories

* chore: add TimeInput component readme + stories

* chore: add ToggleInput component readme + stories

* chore: add Label component readme + stories

* chore: add Link component readme + stories

* chore: update radio-group.tsx with direction and directionProps descriptions

* chore: update rich-text-input.stories.tsx with initial value and defaultExpandMultilineText

* chore: bring back reset-function functionality in rich-text-input.stories.tsx

* fix: update SelectInput component stories with appropriate controls

* fix: make TimeInput component clearable in sb example

* Update packages/components/inputs/rich-text-input/src/rich-text-input.stories.tsx

Co-authored-by: Byron Wall <[email protected]>

* fix: add dynamic value handling to BasicExample in SelectInput component story

---------

Co-authored-by: Byron Wall <[email protected]>

* Storybook v8 stories batch 4 (#2880)

* chore: add MultilineTextField component readme + stories

* chore: add NumberField component readme + stories

* chore: add PasswordField component readme + stories

* chore: add RadioField component readme + stories

* chore: add SearchSelectField component readme + stories

* chore: add SelectField component readme + stories

* chore: add TextField component readme + stories

* chore: add TimeField component readme + stories

* chore: add Grid component readme + stories

* chore: add icon related components' readmes + stories

* chore: add AsyncCreatableSelectInput component readme + stories

* chore: add AsyncSelectInput component readme + stories

* fix: fix wrong control input in AsyncCreatableSelectInput

* fix: add correct inputValue control to AsyncCreatableSelectInput

* fix: add useEffect hook to make MultilineTextFields' value-control work in storybook

* chore: remove value control from AsyncCreatableSelectInput

* Storybook v8 feature branch:  remove v5 storybook (#2884)

* chore: remove v5 storybook stories

* chore: get rid of storybook v5 folder

* chore: add an alias to the v1 version of the remark-gfm package (to allow multiple version of this package)

* chore: remove storybook exceptions from postinstall script

* chore: make storybook v8 a workspace (@commercetools-local/storybook)

* chore: remove obsolete token-demo code from design-system package

* chore: remove sb v5 exceptions from eslint config

* chore: remove old sb v5 directories from .prettierignore

* chore: get rid of SKIP_INSTALL_STORYBOOK feature flag

* chore: remove docs/ folder exceptions from jest configs

* chore: renovatebot, don't ignore storybook-packages anymore

* chore: update .gitignore to include storybook-static directory

* chore: update interactive documentation link in README.md

* revert "chore: remove sb v5 exceptions from eslint config"

This reverts commit 65f8e45.

* chore: remove eslint config exceptions for storybook v5

* chore: update tsconfig.json paths

* chore: remove exclusion of ./storybook directory from tsconfig.json

* chore: remove exclusion of stories.tsx files from tsconfig.json

* chore: lint staged *.stories.tsx files again

* chore: add @emotion/react back to storybook

* fix: remove unnecessary ts-expect-error comments from story files

* fix: remove isAutofocussed prop from localized-rich-text-input.stories (the feature does not exist)

* fix: add missing type

* fix: fix static type checking error in MultilineTextField story

* fix: resolve static type checking errors in RichTextInput story

* chore: update storybook dependencies to version 8.2.9

* fix: fix issue with invisible icons (due to fill="none" in their markup)

* chore: update modulePathIgnorePatterns in jest.eslint.config.js

---------

Co-authored-by: Byron Wall <[email protected]>

.eslintrc.js

@@ -13,17 +13,10 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['*.story.js', '*.visualroute.js', '**/docs/*.js'],
+      files: ['*.visualroute.js', '**/docs/*.js'],
       rules: {
         'react/display-name': 'off',
       },
-      settings: {
-        'import/resolver': {
-          node: {
-            paths: [path.resolve('docs/node_modules')],
-          },
-        },
-      },
     },
     {
       files: ['*.visualspec.js'],

.github/renovate.json

@@ -48,17 +48,5 @@
     "enabled": true
   },
   "labels": ["🤖 Type: Dependencies"],
-  "ignoreDeps": [
-    "@storybook/addon-a11y",
-    "@storybook/addon-actions",
-    "@storybook/addon-google-analytics",
-    "@storybook/addon-knobs",
-    "@storybook/addon-links",
-    "@storybook/addon-storysource",
-    "@storybook/react",
-    "@storybook/theming",
-    "slate",
-    "slate-html-serializer",
-    "slate-react"
-  ]
+  "ignoreDeps": ["slate", "slate-html-serializer", "slate-react"]
 }

.github/workflows/release.yml

@@ -48,8 +48,6 @@ jobs:
 
       - name: Install dependencies
         run: yarn install --immutable
-        env:
-          SKIP_INSTALL_STORYBOOK: true
 
       - name: Creating .npmrc
         run: |

.gitignore

@@ -87,8 +87,7 @@ typings/
 # Storybook build output
 .public
 public
-docs/.public
-docs/public
+storybook-static
 
 # Serverless directories
 .serverless

.prettierignore

@@ -1,8 +1,6 @@
 .cache
 .public
 public
-docs/.public
-docs/public
 dist
 .percy-debug
 vendors

README.md

@@ -14,7 +14,7 @@
 
 > If you are building **Custom Applications** for the Merchant Center, be sure to check out our [documentation](https://docs.commercetools.com/custom-applications)
 
-> Interactive documentation of UI Kit components can be found in our [Storybook](https://uikit.commercetools.com/?path=/story/introduction--getting-started)
+> Interactive documentation of UI Kit components can be found in our [Storybook](https://uikit.commercetools.com/)
 
 # Getting started