From 30c5ad6c9f0f1a27369ca492ab7b40e1d934d5ee Mon Sep 17 00:00:00 2001
From: Geoffrey Chong <gyfchong@users.noreply.github.com>
Date: Thu, 2 Nov 2023 17:28:03 +1100
Subject: [PATCH] Fix export of JS tokens (#4257)

* fix js directory location to be bundled + entrypoint

* add changeset

* add tokens alias

* rename alias

* remove alias from jest config:
---
 .changeset/olive-icons-sit.md                                | 5 +++++
 .../Tailwind/UtilityClassReferences/color-tokens.stories.tsx | 2 +-
 packages/design-tokens/js/package.json                       | 4 ++++
 packages/design-tokens/{ => src}/js/index.ts                 | 0
 packages/design-tokens/{ => src}/js/tokens.ts                | 0
 packages/design-tokens/{ => src}/js/types.ts                 | 0
 storybook/webpack.config.ts                                  | 1 +
 tsconfig.json                                                | 3 ++-
 8 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/olive-icons-sit.md
 create mode 100644 packages/design-tokens/js/package.json
 rename packages/design-tokens/{ => src}/js/index.ts (100%)
 rename packages/design-tokens/{ => src}/js/tokens.ts (100%)
 rename packages/design-tokens/{ => src}/js/types.ts (100%)

diff --git a/.changeset/olive-icons-sit.md b/.changeset/olive-icons-sit.md
new file mode 100644
index 00000000000..8c7a43a0558
--- /dev/null
+++ b/.changeset/olive-icons-sit.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/design-tokens": patch
+---
+
+Fix export of JS tokens
diff --git a/docs/Systems/Tailwind/UtilityClassReferences/color-tokens.stories.tsx b/docs/Systems/Tailwind/UtilityClassReferences/color-tokens.stories.tsx
index e3cb355f3fa..871b3833361 100644
--- a/docs/Systems/Tailwind/UtilityClassReferences/color-tokens.stories.tsx
+++ b/docs/Systems/Tailwind/UtilityClassReferences/color-tokens.stories.tsx
@@ -1,8 +1,8 @@
 import React, { HTMLAttributes } from "react"
 import { Meta, StoryFn } from "@storybook/react"
 import colorString from "color-string"
-import { tokens } from "@kaizen/design-tokens/js"
 import { Heading } from "@kaizen/typography"
+import { tokens } from "~design-tokens/js"
 
 export default {
   title: "Systems/Tokens/Classname References/Color Tokens",
diff --git a/packages/design-tokens/js/package.json b/packages/design-tokens/js/package.json
new file mode 100644
index 00000000000..7612faba6f0
--- /dev/null
+++ b/packages/design-tokens/js/package.json
@@ -0,0 +1,4 @@
+{
+  "main": "../dist/js/index.js",
+  "types": "../dist/js/index.d.ts"
+}
diff --git a/packages/design-tokens/js/index.ts b/packages/design-tokens/src/js/index.ts
similarity index 100%
rename from packages/design-tokens/js/index.ts
rename to packages/design-tokens/src/js/index.ts
diff --git a/packages/design-tokens/js/tokens.ts b/packages/design-tokens/src/js/tokens.ts
similarity index 100%
rename from packages/design-tokens/js/tokens.ts
rename to packages/design-tokens/src/js/tokens.ts
diff --git a/packages/design-tokens/js/types.ts b/packages/design-tokens/src/js/types.ts
similarity index 100%
rename from packages/design-tokens/js/types.ts
rename to packages/design-tokens/src/js/types.ts
diff --git a/storybook/webpack.config.ts b/storybook/webpack.config.ts
index 5b5171a2838..2f71dc71ae6 100644
--- a/storybook/webpack.config.ts
+++ b/storybook/webpack.config.ts
@@ -37,6 +37,7 @@ export default ({ config }: { config: Configuration }): Configuration => {
     "~types": path.resolve(__dirname, "../packages/components/src/types"),
     "~utils": path.resolve(__dirname, "../packages/components/src/utils"),
     "~components": path.resolve(__dirname, "../packages/components/src"),
+    "~design-tokens": path.resolve(__dirname, "../packages/design-tokens/src"),
     // i18n-react-intl package attempts to import locales from this path.
     // When rollup attempts to import from the 'find' path, it will be
     // redirected to import from the replacement path (Same as KAIO rollup config).
diff --git a/tsconfig.json b/tsconfig.json
index 010cef5b2f7..a0151bc5144 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,8 @@
       "~storybook/*": ["storybook/*"],
       "~types/*": ["packages/components/src/types/*"],
       "~utils/*": ["packages/components/src/utils/*"],
-      "~components/*": ["packages/components/src/*"]
+      "~components/*": ["packages/components/src/*"],
+      "~design-tokens/*": ["packages/design-tokens/src/*"]
     }
   },
   "files": ["./types.d.ts"],