Support css modules in storybook

.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,3 @@
 /packages/**/dist
 /packages/components/src/Icon/bin/Template.tsx
-storybook/public
+/docs/storybook-static

.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,17 +109,18 @@ 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
+            **/!(*.module).css
             packages/components/**/*.css
 
   update-branch-preview:

.gitignore

@@ -1,6 +1,6 @@
 node_modules
 yarn-*.log
-/storybook/public/
+docs/storybook-static
 .DS_Store
 dist
 .cache

.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,9 @@
 packages/design-tokens/**/*.scss
 packages/design-tokens/**/*.css
 packages/components/locales/*
-storybook/styles/*
+packages/components/dist/*
+packages/design-tokens/dist/*
+packages/tailwind/dist/*
+docs/storybook-static/*
+docs/utils/tailwind.css
+docs/tailwind.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,
+  },
+}