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 <cassandra.tam@cultureamp.com>

* Update packages/tailwind/src/_docs/pages/working-with-tailwind.stories.tsx

Co-authored-by: Cassandra <cassandra.tam@cultureamp.com>

* Update .storybook/components/StickerSheet/types.ts

Co-authored-by: Cassandra <cassandra.tam@cultureamp.com>

* 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 <gyf.chong@gmail.com>
Co-authored-by: Cassandra <cassandra.tam@cultureamp.com>

.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

.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 \

.changeset/cool-oranges-tie.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/hosted-assets": minor
+---
+
+Deprecated hosted-assets in favour of KAIO

.changeset/strong-apples-clap.md

@@ -0,0 +1,7 @@
+---
+"@kaizen/design-tokens": minor
+"@kaizen/tailwind": minor
+---
+
+- Added ESM bundle
+- Fixed design-tokens js entrypoint

.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`

.eslintignore

@@ -1,3 +1,4 @@
 /packages/**/dist
 /packages/components/src/Icon/bin/Template.tsx
-storybook/public
+/docs/storybook-static
+/docs/preview.css

.eslintrc.js

@@ -271,7 +271,7 @@ module.exports = {
   overrides: [
     {
       files: [
-        "storybook/*",
+        ".storybook/*",
         "**/_docs/**/*",
         "**/__tests__/**/*",
         "*.stories.tsx",

.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

.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)

.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

.gitignore

@@ -1,9 +1,10 @@
 node_modules
 yarn-*.log
-/storybook/public/
+docs/storybook-static
 .DS_Store
 dist
 .cache
 .yalc
 yalc.loc
 .turbo
+preview.css

.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

.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

.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,
+  },
+}