diff --git a/.buildkite/scripts/build-storybook.sh b/.buildkite/scripts/build-storybook.sh
index e761e28e5f7..b0897d05c32 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 @docs/storybook#build:docs
+pnpm turbo build:docs --filter=@docs/storybook
tar -czf ./storybook.tar.gz ./docs/storybook-static
diff --git a/.eslintrc.js b/.eslintrc.js
index b6cb63a3371..67a6140e0ad 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -320,7 +320,7 @@ module.exports = {
},
},
{
- files: ["**/bin/**", "vitest.setup.ts"],
+ files: ["**/bin/**", "**/codemods/**", "vitest.setup.ts"],
rules: {
"no-console": "off",
},
diff --git a/.github/workflows/chromatic-main.yaml b/.github/workflows/chromatic-main.yaml
index 524e2f4d73d..8229c03315e 100644
--- a/.github/workflows/chromatic-main.yaml
+++ b/.github/workflows/chromatic-main.yaml
@@ -18,7 +18,7 @@ jobs:
fetch-depth: 0
- uses: ./.github/actions/setup
- name: Build Storybook
- run: pnpm turbo @docs/storybook#build:chromatic
+ run: pnpm turbo build:chromatic --filter=@docs/storybook
- name: Publish to Chromatic
uses: chromaui/action@v11
with:
diff --git a/.github/workflows/chromatic-pr.yaml b/.github/workflows/chromatic-pr.yaml
index 2869505980b..8211d701d0d 100644
--- a/.github/workflows/chromatic-pr.yaml
+++ b/.github/workflows/chromatic-pr.yaml
@@ -43,7 +43,7 @@ jobs:
- uses: ./.github/actions/setup
- name: Build Storybook for Chromatic
# We want both stories and docs for the branch preview
- run: pnpm turbo @docs/storybook#build:chromatic
+ run: pnpm turbo build:chromatic --filter=@docs/storybook
- id: publishChromatic
name: Publish to Chromatic
uses: chromaui/action@v11
diff --git a/.github/workflows/clear-cache.yml b/.github/workflows/clear-cache.yml
new file mode 100644
index 00000000000..9a839c9ba54
--- /dev/null
+++ b/.github/workflows/clear-cache.yml
@@ -0,0 +1,31 @@
+# From https://stackoverflow.com/a/73556714
+name: Clear cache
+
+on:
+ workflow_dispatch:
+
+permissions:
+ actions: write
+
+jobs:
+ clear-cache:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Clear cache
+ uses: actions/github-script@v7
+ with:
+ script: |
+ console.log("About to clear")
+ const caches = await github.rest.actions.getActionsCacheList({
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ })
+ for (const cache of caches.data.actions_caches) {
+ console.log(cache)
+ github.rest.actions.deleteActionsCacheById({
+ owner: context.repo.owner,
+ repo: context.repo.repo,
+ cache_id: cache.id,
+ })
+ }
+ console.log("Clear completed")
diff --git a/.github/workflows/test-stories.yaml b/.github/workflows/test-stories.yaml
index 64842b0698e..03a6fe99eb0 100644
--- a/.github/workflows/test-stories.yaml
+++ b/.github/workflows/test-stories.yaml
@@ -31,7 +31,7 @@ jobs:
- name: Checkout repository
uses: actions/checkout@v4
- uses: ./.github/actions/setup
- - run: pnpm turbo @docs/storybook#build:test
+ - run: pnpm turbo build:test --filter=@docs/storybook
- name: Upload Storybook build as artifact
uses: actions/upload-artifact@v4
with:
@@ -53,7 +53,7 @@ jobs:
with:
artifactName: ${{ env.ARTIFACT_NAME }}
- name: Storybook tests (1/3)
- run: pnpm turbo @docs/storybook#test:storybook -- --shard 1/3
+ run: pnpm turbo test:storybook --filter=@docs/storybook -- --shard 1/3
storybook-tests-2:
name: "test-storybook"
@@ -69,7 +69,7 @@ jobs:
with:
artifactName: ${{ env.ARTIFACT_NAME }}
- name: Storybook tests (2/3)
- run: pnpm turbo @docs/storybook#test:storybook -- --shard 2/3
+ run: pnpm turbo test:storybook --filter=@docs/storybook -- --shard 2/3
storybook-tests-3:
name: "test-storybook"
@@ -85,4 +85,4 @@ jobs:
with:
artifactName: ${{ env.ARTIFACT_NAME }}
- name: Storybook tests (3/3)
- run: pnpm turbo @docs/storybook#test:storybook -- --shard 3/3
+ run: pnpm turbo test:storybook --filter=@docs/storybook -- --shard 3/3
diff --git a/.stylelintrc-css.mjs b/.stylelintrc-css.mjs
index c817eb98df7..3c66df5ccb7 100644
--- a/.stylelintrc-css.mjs
+++ b/.stylelintrc-css.mjs
@@ -11,5 +11,11 @@ export default {
ignoreFontFamilies: ["Material Symbols Outlined"],
},
],
+ "selector-pseudo-class-no-unknown": [
+ true,
+ {
+ ignorePseudoClasses: ["global"],
+ },
+ ],
},
}
diff --git a/docs/.storybook/main.ts b/docs/.storybook/main.ts
index 3347383cc20..c49fcc4a792 100644
--- a/docs/.storybook/main.ts
+++ b/docs/.storybook/main.ts
@@ -15,7 +15,6 @@ const config: StorybookConfig = {
"../../packages/**/*.mdx",
"../../packages/**/*.stories.tsx",
"../pages/**/*.mdx",
- "../pages/**/*.stories.tsx",
],
addons: [
getAbsolutePath("@storybook/addon-a11y"),
diff --git a/docs/turbo.json b/docs/turbo.json
new file mode 100644
index 00000000000..3add74e48bf
--- /dev/null
+++ b/docs/turbo.json
@@ -0,0 +1,37 @@
+{
+ "extends": ["//"],
+ "tasks": {
+ "build:tailwind": {
+ "dependsOn": ["^build"],
+ "inputs": ["$TURBO_DEFAULT$", "../packages/**/*"],
+ "outputs": ["docs/.storybook/preview.css"],
+ "cache": false
+ },
+ "build:docs": {
+ "dependsOn": ["^build", "build:tailwind"],
+ "inputs": ["$TURBO_DEFAULT$", "../packages/**/*"],
+ "outputs": ["docs/storybook-static/**"],
+ "cache": false
+ },
+ "build:test": {
+ "dependsOn": ["^build", "build:tailwind"],
+ "inputs": ["$TURBO_DEFAULT$", "../packages/**/*"],
+ "outputs": ["docs/storybook-static/**"],
+ "cache": false
+ },
+ "build:chromatic": {
+ "dependsOn": ["^build", "build:tailwind"],
+ "outputs": ["docs/storybook-static/**"],
+ "cache": false
+ },
+ "dev": {
+ "dependsOn": ["^build", "build:tailwind"],
+ "cache": false
+ },
+ "test:storybook": {
+ "dependsOn": ["^build", "build:tailwind"],
+ "outputs": ["docs/storybook-static/**"],
+ "cache": false
+ }
+ }
+}
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index a8334c62848..0e6cab047e3 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,66 @@
# Change Log
+## 1.67.18
+
+### Patch Changes
+
+- [#5277](https://github.com/cultureamp/kaizen-design-system/pull/5277) [`0b641cfc39be9eaf9d77cb8aef32e845f02ecbd0`](https://github.com/cultureamp/kaizen-design-system/commit/0b641cfc39be9eaf9d77cb8aef32e845f02ecbd0) - Fix EmptyState horizontal overflow
+
+## 1.67.17
+
+### Patch Changes
+
+- [#5279](https://github.com/cultureamp/kaizen-design-system/pull/5279) [`718cbdd2dd00ddd688a9272cd0c271adf085fc42`](https://github.com/cultureamp/kaizen-design-system/commit/718cbdd2dd00ddd688a9272cd0c271adf085fc42) - Actually release @kaizen/package-bundler (2.0.0 already exists from an accidental prior release)
+
+## 1.67.16
+
+### Patch Changes
+
+- [#5270](https://github.com/cultureamp/kaizen-design-system/pull/5270) [`573097f5767533255a1f9ce207d3b1a0ee7bcdfc`](https://github.com/cultureamp/kaizen-design-system/commit/573097f5767533255a1f9ce207d3b1a0ee7bcdfc) - Update @kaizen/package-bundler
+
+## 1.67.15
+
+### Patch Changes
+
+- [#5275](https://github.com/cultureamp/kaizen-design-system/pull/5275) [`3b1ceb02c2865d42cba6b13a5f4e4aa932e6897b`](https://github.com/cultureamp/kaizen-design-system/commit/3b1ceb02c2865d42cba6b13a5f4e4aa932e6897b) - fix(FilterBar): Remove container property from FilterBar wrapper
+
+## 1.67.14
+
+### Patch Changes
+
+- [#5273](https://github.com/cultureamp/kaizen-design-system/pull/5273) [`6fcc6088f8b6107694ce6ab22c4c2a78560332e9`](https://github.com/cultureamp/kaizen-design-system/commit/6fcc6088f8b6107694ce6ab22c4c2a78560332e9) - Pagination responsive adjustments
+
+ - Margins partially restored to have 8px between buttons
+ - Boundary pages will now only show on large viewports and up
+ - Sibling pages will continue to show on medium viewports and up
+
+## 1.67.13
+
+### Patch Changes
+
+- [#5269](https://github.com/cultureamp/kaizen-design-system/pull/5269) [`e4358c8289c789b7140affb4207d3e72cdd94f86`](https://github.com/cultureamp/kaizen-design-system/commit/e4358c8289c789b7140affb4207d3e72cdd94f86) - Pagination responsiveness
+
+ - Margins and padding tightened up
+ - Sibling pages shown drops from 1 to 0 on small viewports
+
+## 1.67.12
+
+### Patch Changes
+
+- [#5266](https://github.com/cultureamp/kaizen-design-system/pull/5266) [`94ac62d79ce431adc1ad2b4dc76e39d72fb56373`](https://github.com/cultureamp/kaizen-design-system/commit/94ac62d79ce431adc1ad2b4dc76e39d72fb56373) - Re-release with @kaizen/package-bundler update.
+
+- [#5265](https://github.com/cultureamp/kaizen-design-system/pull/5265) [`034fbf2e829564999d4795c123304c17fe87c054`](https://github.com/cultureamp/kaizen-design-system/commit/034fbf2e829564999d4795c123304c17fe87c054) - Update codemods to retain empty lines.
+
+## 1.67.11
+
+### Patch Changes
+
+- [#5263](https://github.com/cultureamp/kaizen-design-system/pull/5263) [`f4a00f663c09baae9d5f5ed02d0f04e2ecf4e5d0`](https://github.com/cultureamp/kaizen-design-system/commit/f4a00f663c09baae9d5f5ed02d0f04e2ecf4e5d0) - Menu v3 fixes and documentation for typeahead functionality
+
+ - Insert `textValue` into RAC's MenuItem when typeof children === string
+ - Add documentation for how to get typeahead working when passing ReactNode
+ - Adjust MenuItem to only add flex when children is string and there's an icon
+
## 1.67.10
### Patch Changes
diff --git a/packages/components/codemods/migrateBrandMomentMoodToVariant/index.ts b/packages/components/codemods/migrateBrandMomentMoodToVariant/index.ts
index 39094c69ae0..a393a9e5944 100644
--- a/packages/components/codemods/migrateBrandMomentMoodToVariant/index.ts
+++ b/packages/components/codemods/migrateBrandMomentMoodToVariant/index.ts
@@ -2,9 +2,8 @@ import { transformComponentsInDir } from "../utils"
import { transformBrandMomentMoodToVariant } from "./transformBrandMomentMoodToVariant"
const migrateBrandMomentMoodToVariant = (): void => {
- // eslint-disable-next-line no-console
console.log(
- " ~(-_- ~) Running BrandMoment mood to variant transformer (~ -_-)~"
+ "~(-_- ~) Running BrandMoment mood to variant transformer (~ -_-)~"
)
const targetDir = process.argv[2]
if (!targetDir) {
diff --git a/packages/components/codemods/migrateBrandMomentMoodToVariant/transformBrandMomentMoodToVariant.spec.ts b/packages/components/codemods/migrateBrandMomentMoodToVariant/transformBrandMomentMoodToVariant.spec.ts
index 9875d1a3105..a220944fed4 100644
--- a/packages/components/codemods/migrateBrandMomentMoodToVariant/transformBrandMomentMoodToVariant.spec.ts
+++ b/packages/components/codemods/migrateBrandMomentMoodToVariant/transformBrandMomentMoodToVariant.spec.ts
@@ -1,11 +1,15 @@
import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst, TransformConfig } from "../utils"
+import {
+ printAst,
+ transformSourceForTagName,
+ type TransformSourceForTagNameArgs,
+} from "../utils"
import { transformBrandMomentMoodToVariant } from "./transformBrandMomentMoodToVariant"
const transformBrandMoment = (
- sourceFile: TransformConfig["sourceFile"]
+ sourceFile: TransformSourceForTagNameArgs["sourceFile"]
): string =>
- transformSource({
+ transformSourceForTagName({
sourceFile,
astTransformer: transformBrandMomentMoodToVariant,
tagName: "BrandMoment",
diff --git a/packages/components/codemods/migrateCardVariantToColor/index.ts b/packages/components/codemods/migrateCardVariantToColor/index.ts
index be93a309855..9dae7464254 100644
--- a/packages/components/codemods/migrateCardVariantToColor/index.ts
+++ b/packages/components/codemods/migrateCardVariantToColor/index.ts
@@ -2,8 +2,7 @@ import { transformComponentsInDir } from "../utils"
import { transformCardVariantToColor } from "./transformCardVariantToColor"
const migrateCardVariantToColor = (): void => {
- // eslint-disable-next-line no-console
- console.log(" ~(-_- ~) Running Card variant to color transformer (~ -_-)~")
+ console.log("~(-_- ~) Running Card variant to color transformer (~ -_-)~")
const targetDir = process.argv[2]
if (!targetDir) {
process.exit(1)
diff --git a/packages/components/codemods/migrateCardVariantToColor/transformCardVariantToColor.spec.ts b/packages/components/codemods/migrateCardVariantToColor/transformCardVariantToColor.spec.ts
index 8e2aa37d19d..7d134016a1a 100644
--- a/packages/components/codemods/migrateCardVariantToColor/transformCardVariantToColor.spec.ts
+++ b/packages/components/codemods/migrateCardVariantToColor/transformCardVariantToColor.spec.ts
@@ -1,9 +1,15 @@
import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst, TransformConfig } from "../utils"
+import {
+ printAst,
+ transformSourceForTagName,
+ type TransformSourceForTagNameArgs,
+} from "../utils"
import { transformCardVariantToColor } from "./transformCardVariantToColor"
-const transformCard = (sourceFile: TransformConfig["sourceFile"]): string =>
- transformSource({
+const transformCard = (
+ sourceFile: TransformSourceForTagNameArgs["sourceFile"]
+): string =>
+ transformSourceForTagName({
sourceFile,
astTransformer: transformCardVariantToColor,
tagName: "Card",
diff --git a/packages/components/codemods/migrateConfirmationModalMoodsToVariant/index.ts b/packages/components/codemods/migrateConfirmationModalMoodsToVariant/index.ts
index 2a4a339be5d..ef959627460 100644
--- a/packages/components/codemods/migrateConfirmationModalMoodsToVariant/index.ts
+++ b/packages/components/codemods/migrateConfirmationModalMoodsToVariant/index.ts
@@ -2,8 +2,7 @@ import { transformComponentsInDir } from "../utils"
import { transformConfirmationModalMoodsToVariant } from "./transformConfirmationModalMoodsToVariant"
const run = (): void => {
- // eslint-disable-next-line no-console
- console.log(" ~(-_- ~) Running ConfirmationModal transformer (~ -_-)~")
+ console.log("~(-_- ~) Running ConfirmationModal transformer (~ -_-)~")
const targetDir = process.argv[2]
if (!targetDir) {
process.exit(1)
diff --git a/packages/components/codemods/migrateConfirmationModalMoodsToVariant/transformConfirmationModalMoodsToVariant.spec.ts b/packages/components/codemods/migrateConfirmationModalMoodsToVariant/transformConfirmationModalMoodsToVariant.spec.ts
index 352a3c43290..211aa26a84b 100644
--- a/packages/components/codemods/migrateConfirmationModalMoodsToVariant/transformConfirmationModalMoodsToVariant.spec.ts
+++ b/packages/components/codemods/migrateConfirmationModalMoodsToVariant/transformConfirmationModalMoodsToVariant.spec.ts
@@ -1,5 +1,5 @@
import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst } from "../utils"
+import { transformSourceForTagName, printAst } from "../utils"
import { transformConfirmationModalMoodsToVariant } from "./transformConfirmationModalMoodsToVariant"
describe("transformConfirmationModalMoodsToVariant", () => {
@@ -10,7 +10,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformConfirmationModalMoodsToVariant,
tagName: "ConfirmationModal",
@@ -25,7 +25,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformConfirmationModalMoodsToVariant,
tagName: "ConfirmationModal",
@@ -40,7 +40,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformConfirmationModalMoodsToVariant,
tagName: "ConfirmationModal",
@@ -55,7 +55,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformConfirmationModalMoodsToVariant,
tagName: "ConfirmationModal",
@@ -70,7 +70,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformConfirmationModalMoodsToVariant,
tagName: "ConfirmationModal",
@@ -85,7 +85,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformConfirmationModalMoodsToVariant,
tagName: "ConfirmationModal",
@@ -100,7 +100,7 @@ describe("transformConfirmationModalMoodsToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformConfirmationModalMoodsToVariant,
tagName: "ConfirmationModal",
diff --git a/packages/components/codemods/migrateEmptyStateIllustrationTypeToVariant/index.ts b/packages/components/codemods/migrateEmptyStateIllustrationTypeToVariant/index.ts
index 8a9868fc9e2..85a97b847e0 100644
--- a/packages/components/codemods/migrateEmptyStateIllustrationTypeToVariant/index.ts
+++ b/packages/components/codemods/migrateEmptyStateIllustrationTypeToVariant/index.ts
@@ -2,9 +2,8 @@ import { transformComponentsInDir } from "../utils"
import { transformEmptyStateIllustrationTypeToVariant } from "./transformEmptyStateIllustrationTypeToVariant"
const migrateEmptyStateIllustrationTypeToVariant = (): void => {
- // eslint-disable-next-line no-console
console.log(
- " ~(-_- ~) Running EmptyState illustrationType to variant transformer (~ -_-)~"
+ "~(-_- ~) Running EmptyState illustrationType to variant transformer (~ -_-)~"
)
const targetDir = process.argv[2]
if (!targetDir) {
diff --git a/packages/components/codemods/migrateEmptyStateIllustrationTypeToVariant/transformEmptyStateIllustrationTypeToVariant.spec.ts b/packages/components/codemods/migrateEmptyStateIllustrationTypeToVariant/transformEmptyStateIllustrationTypeToVariant.spec.ts
index 845dce3454a..a569c8ef5c0 100644
--- a/packages/components/codemods/migrateEmptyStateIllustrationTypeToVariant/transformEmptyStateIllustrationTypeToVariant.spec.ts
+++ b/packages/components/codemods/migrateEmptyStateIllustrationTypeToVariant/transformEmptyStateIllustrationTypeToVariant.spec.ts
@@ -1,11 +1,15 @@
import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst, TransformConfig } from "../utils"
+import {
+ printAst,
+ transformSourceForTagName,
+ type TransformSourceForTagNameArgs,
+} from "../utils"
import { transformEmptyStateIllustrationTypeToVariant } from "./transformEmptyStateIllustrationTypeToVariant"
const transformEmptyState = (
- sourceFile: TransformConfig["sourceFile"]
+ sourceFile: TransformSourceForTagNameArgs["sourceFile"]
): string =>
- transformSource({
+ transformSourceForTagName({
sourceFile,
astTransformer: transformEmptyStateIllustrationTypeToVariant,
tagName: "EmptyState",
diff --git a/packages/components/codemods/migrateGlobalNotificationTypeToVariant/index.ts b/packages/components/codemods/migrateGlobalNotificationTypeToVariant/index.ts
index 657483a1f26..3cbd428864f 100644
--- a/packages/components/codemods/migrateGlobalNotificationTypeToVariant/index.ts
+++ b/packages/components/codemods/migrateGlobalNotificationTypeToVariant/index.ts
@@ -1,9 +1,8 @@
import { transformNotificationTypeToVariant } from "../migrateNotificationTypeToVariant"
import { transformComponentsInDir } from "../utils"
-/** This is here as a script runner that migrates GlobalNotification variant to their color equivalent */
+
const migrateGlobalNotificationTypeToVariant = (): void => {
- // eslint-disable-next-line no-console
- console.log(" ~(-_- ~) Running GlobalNotification transformer (~ -_-)~")
+ console.log("~(-_- ~) Running GlobalNotification transformer (~ -_-)~")
const targetDir = process.argv[2]
if (!targetDir) {
process.exit(1)
diff --git a/packages/components/codemods/migrateInformationTileMoodToVariant/index.ts b/packages/components/codemods/migrateInformationTileMoodToVariant/index.ts
index d9e701b6bd3..0a57641bb09 100644
--- a/packages/components/codemods/migrateInformationTileMoodToVariant/index.ts
+++ b/packages/components/codemods/migrateInformationTileMoodToVariant/index.ts
@@ -2,9 +2,8 @@ import { transformComponentsInDir } from "../utils"
import { transformInformationTileMoodToVariant } from "./transformInformationTileMoodToVariant"
const migrateInformationTileMoodToVariant = (): void => {
- // eslint-disable-next-line no-console
console.log(
- " ~(-_- ~) Running InformationTile mood to variant transformer (~ -_-)~"
+ "~(-_- ~) Running InformationTile mood to variant transformer (~ -_-)~"
)
const targetDir = process.argv[2]
if (!targetDir) {
diff --git a/packages/components/codemods/migrateInformationTileMoodToVariant/transformInformationTileMoodToVariant.spec.ts b/packages/components/codemods/migrateInformationTileMoodToVariant/transformInformationTileMoodToVariant.spec.ts
index e8eb68a122e..28291d8944c 100644
--- a/packages/components/codemods/migrateInformationTileMoodToVariant/transformInformationTileMoodToVariant.spec.ts
+++ b/packages/components/codemods/migrateInformationTileMoodToVariant/transformInformationTileMoodToVariant.spec.ts
@@ -1,11 +1,15 @@
import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst, TransformConfig } from "../utils"
+import {
+ printAst,
+ transformSourceForTagName,
+ type TransformSourceForTagNameArgs,
+} from "../utils"
import { transformInformationTileMoodToVariant } from "./transformInformationTileMoodToVariant"
const transformInformationTile = (
- sourceFile: TransformConfig["sourceFile"]
+ sourceFile: TransformSourceForTagNameArgs["sourceFile"]
): string =>
- transformSource({
+ transformSourceForTagName({
sourceFile,
astTransformer: transformInformationTileMoodToVariant,
tagName: "InformationTile",
diff --git a/packages/components/codemods/migrateInlineNotificationTypeToVariant/index.ts b/packages/components/codemods/migrateInlineNotificationTypeToVariant/index.ts
index ad9f27f0efd..7a0d54ea3b4 100644
--- a/packages/components/codemods/migrateInlineNotificationTypeToVariant/index.ts
+++ b/packages/components/codemods/migrateInlineNotificationTypeToVariant/index.ts
@@ -1,9 +1,8 @@
import { transformNotificationTypeToVariant } from "../migrateNotificationTypeToVariant"
import { transformComponentsInDir } from "../utils"
-/** This is here as a script runner that migrates InlineNotification variant to their color equivalent */
+
const migrateInlineNotificationTypeToVariant = (): void => {
- // eslint-disable-next-line no-console
- console.log(" ~(-_- ~) Running InlineNotification transformer (~ -_-)~")
+ console.log("~(-_- ~) Running InlineNotification transformer (~ -_-)~")
const targetDir = process.argv[2]
if (!targetDir) {
process.exit(1)
diff --git a/packages/components/codemods/migrateMultiActionTileMoodToVariant/index.ts b/packages/components/codemods/migrateMultiActionTileMoodToVariant/index.ts
index 3d463ad7949..9246579c027 100644
--- a/packages/components/codemods/migrateMultiActionTileMoodToVariant/index.ts
+++ b/packages/components/codemods/migrateMultiActionTileMoodToVariant/index.ts
@@ -2,7 +2,6 @@ import { transformComponentsInDir } from "../utils"
import { transformMultiActionTileMoodToVariant } from "./transformMultiActionTileMoodToVariant"
const migrateMultiActionTileMoodToVariant = (): void => {
- // eslint-disable-next-line no-console
console.log(
" ~(-_- ~) Running MultiActionTile mood to variant transformer (~ -_-)~"
)
diff --git a/packages/components/codemods/migrateMultiActionTileMoodToVariant/transformMultiActionTileMoodToVariant.spec.ts b/packages/components/codemods/migrateMultiActionTileMoodToVariant/transformMultiActionTileMoodToVariant.spec.ts
index bc01a9ea681..e9664ca0bba 100644
--- a/packages/components/codemods/migrateMultiActionTileMoodToVariant/transformMultiActionTileMoodToVariant.spec.ts
+++ b/packages/components/codemods/migrateMultiActionTileMoodToVariant/transformMultiActionTileMoodToVariant.spec.ts
@@ -1,11 +1,15 @@
import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst, TransformConfig } from "../utils"
+import {
+ printAst,
+ transformSourceForTagName,
+ type TransformSourceForTagNameArgs,
+} from "../utils"
import { transformMultiActionTileMoodToVariant } from "./transformMultiActionTileMoodToVariant"
const transformMultiActionTile = (
- sourceFile: TransformConfig["sourceFile"]
+ sourceFile: TransformSourceForTagNameArgs["sourceFile"]
): string =>
- transformSource({
+ transformSourceForTagName({
sourceFile,
astTransformer: transformMultiActionTileMoodToVariant,
tagName: "MultiActionTile",
diff --git a/packages/components/codemods/migrateNotificationTypeToVariant/migrateNotificationTypeToVariant.spec.ts b/packages/components/codemods/migrateNotificationTypeToVariant/migrateNotificationTypeToVariant.spec.ts
index f667bc04d72..1cef97b79e8 100644
--- a/packages/components/codemods/migrateNotificationTypeToVariant/migrateNotificationTypeToVariant.spec.ts
+++ b/packages/components/codemods/migrateNotificationTypeToVariant/migrateNotificationTypeToVariant.spec.ts
@@ -1,5 +1,5 @@
import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst } from "../utils"
+import { transformSourceForTagName, printAst } from "../utils"
import { transformNotificationTypeToVariant } from "./migrateNotificationTypeToVariant"
describe("transformNotificationTypeToVariant", () => {
@@ -10,7 +10,7 @@ describe("transformNotificationTypeToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformNotificationTypeToVariant,
tagName: "InlineNotification",
@@ -25,7 +25,7 @@ describe("transformNotificationTypeToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformNotificationTypeToVariant,
tagName: "GlobalNotification",
@@ -40,7 +40,7 @@ describe("transformNotificationTypeToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformNotificationTypeToVariant,
tagName: "ToastNotification",
@@ -55,7 +55,7 @@ describe("transformNotificationTypeToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformNotificationTypeToVariant,
tagName: "InlineNotification",
@@ -69,7 +69,7 @@ describe("transformNotificationTypeToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformNotificationTypeToVariant,
tagName: "InlineNotification",
@@ -83,7 +83,7 @@ describe("transformNotificationTypeToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformNotificationTypeToVariant,
tagName: "InlineNotification",
@@ -97,7 +97,7 @@ describe("transformNotificationTypeToVariant", () => {
const outputAst = parseJsx(`
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformNotificationTypeToVariant,
tagName: "InlineNotification",
diff --git a/packages/components/codemods/migrateProgressBarMoodToColor/index.ts b/packages/components/codemods/migrateProgressBarMoodToColor/index.ts
index f33356490e1..3e604030a14 100644
--- a/packages/components/codemods/migrateProgressBarMoodToColor/index.ts
+++ b/packages/components/codemods/migrateProgressBarMoodToColor/index.ts
@@ -2,7 +2,6 @@ import { transformComponentsInDir } from "../utils"
import { transformProgressBarMoodToColor } from "./transformProgressBarMoodToColor"
const migrateProgressBarMoodToColor = (): void => {
- // eslint-disable-next-line no-console
console.log(
" ~(-_- ~) Running ProgressBar mood to color transformer (~ -_-)~"
)
diff --git a/packages/components/codemods/migrateProgressBarMoodToColor/transformProgressBarMoodToColor.spec.ts b/packages/components/codemods/migrateProgressBarMoodToColor/transformProgressBarMoodToColor.spec.ts
index dc4aaec90a6..4920a2c4882 100644
--- a/packages/components/codemods/migrateProgressBarMoodToColor/transformProgressBarMoodToColor.spec.ts
+++ b/packages/components/codemods/migrateProgressBarMoodToColor/transformProgressBarMoodToColor.spec.ts
@@ -1,11 +1,15 @@
import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst, TransformConfig } from "../utils"
+import {
+ printAst,
+ transformSourceForTagName,
+ type TransformSourceForTagNameArgs,
+} from "../utils"
import { transformProgressBarMoodToColor } from "./transformProgressBarMoodToColor"
const transformProgressBar = (
- sourceFile: TransformConfig["sourceFile"]
+ sourceFile: TransformSourceForTagNameArgs["sourceFile"]
): string =>
- transformSource({
+ transformSourceForTagName({
sourceFile,
astTransformer: transformProgressBarMoodToColor,
tagName: "ProgressBar",
diff --git a/packages/components/codemods/migrateToastNotificationTypeToVariant/index.ts b/packages/components/codemods/migrateToastNotificationTypeToVariant/index.ts
index f067eab4e06..e40dc001373 100644
--- a/packages/components/codemods/migrateToastNotificationTypeToVariant/index.ts
+++ b/packages/components/codemods/migrateToastNotificationTypeToVariant/index.ts
@@ -1,8 +1,7 @@
import { transformNotificationTypeToVariant } from "../migrateNotificationTypeToVariant"
import { transformComponentsInDir } from "../utils"
-/** This is here as a script runner that migrates ToastNotification variant to their color equivalent */
+
const migrateToastNotificationTypeToVariant = (): void => {
- // eslint-disable-next-line no-console
console.log(" ~(-_- ~) Running ToastNotification transformer (~ -_-)~")
const targetDir = process.argv[2]
if (!targetDir) {
diff --git a/packages/components/codemods/migrateWellVariantToColor/index.ts b/packages/components/codemods/migrateWellVariantToColor/index.ts
index c4de7d561d8..1e558f95e43 100644
--- a/packages/components/codemods/migrateWellVariantToColor/index.ts
+++ b/packages/components/codemods/migrateWellVariantToColor/index.ts
@@ -1,8 +1,7 @@
import { transformComponentsInDir } from "../utils"
import { transformWellVariantToColor } from "./transformWellVariantToColor"
-/** This is here as a script runner that migrates Well variant to their color equivalent */
+
const migrateWellVariantToColor = (): void => {
- // eslint-disable-next-line no-console
console.log(" ~(-_- ~) Running Well transformer (~ -_-)~")
const targetDir = process.argv[2]
if (!targetDir) {
diff --git a/packages/components/codemods/migrateWellVariantToColor/transformWellVariantToColor.spec.ts b/packages/components/codemods/migrateWellVariantToColor/transformWellVariantToColor.spec.ts
index ff9b2ae59dd..a1ed7dce9f4 100644
--- a/packages/components/codemods/migrateWellVariantToColor/transformWellVariantToColor.spec.ts
+++ b/packages/components/codemods/migrateWellVariantToColor/transformWellVariantToColor.spec.ts
@@ -1,5 +1,5 @@
import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst } from "../utils"
+import { transformSourceForTagName, printAst } from "../utils"
import { transformWellVariantToColor } from "./transformWellVariantToColor"
describe("transformWellVariantToColor", () => {
@@ -12,7 +12,7 @@ describe("transformWellVariantToColor", () => {
import {Well} from "@kaizen/components"
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformWellVariantToColor,
tagName: "Well",
@@ -29,7 +29,7 @@ describe("transformWellVariantToColor", () => {
import {Well} from "@kaizen/components"
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformWellVariantToColor,
tagName: "Well",
@@ -46,7 +46,7 @@ describe("transformWellVariantToColor", () => {
import {Well} from "@kaizen/components"
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformWellVariantToColor,
tagName: "Well",
@@ -63,7 +63,7 @@ describe("transformWellVariantToColor", () => {
import {Well} from "@kaizen/components"
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformWellVariantToColor,
tagName: "Well",
@@ -80,7 +80,7 @@ describe("transformWellVariantToColor", () => {
import {Well} from "@kaizen/components"
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformWellVariantToColor,
tagName: "Well",
@@ -97,7 +97,7 @@ describe("transformWellVariantToColor", () => {
import {Well} from "@kaizen/components"
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformWellVariantToColor,
tagName: "Well",
@@ -114,7 +114,7 @@ describe("transformWellVariantToColor", () => {
import {Well} from "@kaizen/components"
export const TestComponent = () => Test Test 2
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformWellVariantToColor,
tagName: "Well",
@@ -131,7 +131,7 @@ describe("transformWellVariantToColor", () => {
import {Well} from "@kaizen/components"
export const TestComponent = () => Test Test Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformWellVariantToColor,
tagName: "Well",
@@ -148,7 +148,7 @@ describe("transformWellVariantToColor", () => {
import {Well} from "@kaizen/components"
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformWellVariantToColor,
tagName: "Well",
@@ -165,7 +165,7 @@ describe("transformWellVariantToColor", () => {
import {Well} from "@kaizen/components"
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformWellVariantToColor,
tagName: "Well",
@@ -182,7 +182,7 @@ describe("transformWellVariantToColor", () => {
import {Well as KaizenWell} from "@kaizen/components"
export const TestComponent = () => Test
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: transformWellVariantToColor,
tagName: "KaizenWell",
diff --git a/packages/components/codemods/migrateWellVariantToColor/transformWellVariantToColor.ts b/packages/components/codemods/migrateWellVariantToColor/transformWellVariantToColor.ts
index 3645e84e0b6..c471c637c06 100644
--- a/packages/components/codemods/migrateWellVariantToColor/transformWellVariantToColor.ts
+++ b/packages/components/codemods/migrateWellVariantToColor/transformWellVariantToColor.ts
@@ -2,10 +2,9 @@ import ts from "typescript"
import { updateJsxElementWithNewProps } from "../utils"
import { getPropValueText } from "../utils/getPropValueText"
-/** Recurses through AST to find and update any jsx element that matched the tagName */
export const transformWellVariantToColor =
(context: ts.TransformationContext, tagName: string) =>
- (rootNode: ts.Node): ts.Node => {
+ (rootNode: ts.SourceFile): ts.SourceFile => {
function visit(node: ts.Node): ts.Node {
if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
if (node.tagName.getText() === tagName) {
@@ -71,5 +70,5 @@ export const transformWellVariantToColor =
}
return ts.visitEachChild(node, visit, context)
}
- return ts.visitNode(rootNode, visit)
+ return ts.visitNode(rootNode, visit) as ts.SourceFile
}
diff --git a/packages/components/codemods/removeInputEditModalMood/index.ts b/packages/components/codemods/removeInputEditModalMood/index.ts
index d9501b38296..b39f1079da1 100644
--- a/packages/components/codemods/removeInputEditModalMood/index.ts
+++ b/packages/components/codemods/removeInputEditModalMood/index.ts
@@ -1,8 +1,7 @@
import { transformComponentsInDir } from "../utils"
import { removeInputEditModalMood } from "./removeInputEditModalMood"
-/** This is here as a script runner that migrates Well variant to their color equivalent */
+
const run = (): void => {
- // eslint-disable-next-line no-console
console.log(" ~(-_- ~) Running InputEditModal transformer (~ -_-)~")
const targetDir = process.argv[2]
if (!targetDir) {
diff --git a/packages/components/codemods/removeInputEditModalMood/removeInputEditModalMood.spec.ts b/packages/components/codemods/removeInputEditModalMood/removeInputEditModalMood.spec.ts
index b010d7acc26..fcbc475ea9d 100644
--- a/packages/components/codemods/removeInputEditModalMood/removeInputEditModalMood.spec.ts
+++ b/packages/components/codemods/removeInputEditModalMood/removeInputEditModalMood.spec.ts
@@ -1,5 +1,5 @@
import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst } from "../utils"
+import { transformSourceForTagName, printAst } from "../utils"
import { removeInputEditModalMood } from "./removeInputEditModalMood"
describe("removeInputEditModalMood", () => {
@@ -10,7 +10,7 @@ describe("removeInputEditModalMood", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: removeInputEditModalMood,
tagName: "InputEditModal",
@@ -25,7 +25,7 @@ describe("removeInputEditModalMood", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: removeInputEditModalMood,
tagName: "InputEditModal",
@@ -40,7 +40,7 @@ describe("removeInputEditModalMood", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: removeInputEditModalMood,
tagName: "InputEditModal",
diff --git a/packages/components/codemods/removePopoverVariant/index.ts b/packages/components/codemods/removePopoverVariant/index.ts
index 2020e08cc3e..5f172ba408c 100644
--- a/packages/components/codemods/removePopoverVariant/index.ts
+++ b/packages/components/codemods/removePopoverVariant/index.ts
@@ -2,8 +2,7 @@ import { transformComponentsInDir } from "../utils"
import { removePopoverVariant } from "./removePopoverVariant"
const run = (): void => {
- // eslint-disable-next-line no-console
- console.log(" ~(-_- ~) Running Popover transformer (~ -_-)~")
+ console.log("~(-_- ~) Running Popover transformer (~ -_-)~")
const targetDir = process.argv[2]
if (!targetDir) {
process.exit(1)
diff --git a/packages/components/codemods/removePopoverVariant/removePopoverVariant.spec.ts b/packages/components/codemods/removePopoverVariant/removePopoverVariant.spec.ts
index 8b7168be8ac..2f3ea7380a2 100644
--- a/packages/components/codemods/removePopoverVariant/removePopoverVariant.spec.ts
+++ b/packages/components/codemods/removePopoverVariant/removePopoverVariant.spec.ts
@@ -1,5 +1,5 @@
import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst } from "../utils"
+import { transformSourceForTagName, printAst } from "../utils"
import { removePopoverVariant } from "./removePopoverVariant"
describe("removePopoverVariant()", () => {
@@ -10,7 +10,7 @@ describe("removePopoverVariant()", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: removePopoverVariant,
tagName: "Popover",
@@ -25,7 +25,7 @@ describe("removePopoverVariant()", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: removePopoverVariant,
tagName: "Popover",
@@ -40,7 +40,7 @@ describe("removePopoverVariant()", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: removePopoverVariant,
tagName: "Popover",
@@ -55,7 +55,7 @@ describe("removePopoverVariant()", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: removePopoverVariant,
tagName: "Popover",
diff --git a/packages/components/codemods/upgradeIconV1/index.ts b/packages/components/codemods/upgradeIconV1/index.ts
index 6cde38899a4..5c7bf4b04a9 100644
--- a/packages/components/codemods/upgradeIconV1/index.ts
+++ b/packages/components/codemods/upgradeIconV1/index.ts
@@ -1,11 +1,11 @@
import fs from "fs"
-import ts from "typescript"
import { getKaioTagNamesByRegex, transformSource, traverseDir } from "../utils"
+import { createEncodedSourceFile } from "../utils/createEncodedSourceFile"
import { upgradeIconV1 } from "./upgradeIconV1"
const run = (): void => {
- // eslint-disable-next-line no-console
console.log("~(-_- ~) Running Icon v1 to Future upgrade (~ -_-)~")
+
const targetDir = process.argv[2]
if (!targetDir) {
process.exit(1)
@@ -13,14 +13,14 @@ const run = (): void => {
const transformFile = (
componentFilePath: string,
- sourceFile: ts.SourceFile
+ sourceCode: string
): void => {
+ const sourceFile = createEncodedSourceFile(componentFilePath, sourceCode)
const tagNames = getKaioTagNamesByRegex(sourceFile, "Icon$")
if (tagNames) {
const updatedSourceFile = transformSource({
sourceFile,
- astTransformer: upgradeIconV1,
- tagName: tagNames,
+ transformers: [upgradeIconV1(tagNames)],
})
fs.writeFileSync(componentFilePath, updatedSourceFile, "utf8")
diff --git a/packages/components/codemods/upgradeIconV1/upgradeIconV1.spec.ts b/packages/components/codemods/upgradeIconV1/upgradeIconV1.spec.ts
index 1d8f59a57fe..9241353b311 100644
--- a/packages/components/codemods/upgradeIconV1/upgradeIconV1.spec.ts
+++ b/packages/components/codemods/upgradeIconV1/upgradeIconV1.spec.ts
@@ -1,20 +1,19 @@
import { parseJsx } from "../__tests__/utils"
import {
- transformSource,
printAst,
- TransformConfig,
- ImportModuleNameTagsMap,
+ type ImportModuleNameTagsMap,
+ transformSource,
+ type TransformSourceArgs,
} from "../utils"
import { upgradeIconV1 } from "./upgradeIconV1"
const transformIcons = (
- sourceFile: TransformConfig["sourceFile"],
+ sourceFile: TransformSourceArgs["sourceFile"],
tagNames: ImportModuleNameTagsMap
): string =>
transformSource({
sourceFile,
- astTransformer: upgradeIconV1,
- tagName: tagNames,
+ transformers: [upgradeIconV1(tagNames)],
})
describe("upgradeIconV1()", () => {
diff --git a/packages/components/codemods/upgradeIconV1/upgradeIconV1.ts b/packages/components/codemods/upgradeIconV1/upgradeIconV1.ts
index 670b4e1920e..7e0ff8548ff 100644
--- a/packages/components/codemods/upgradeIconV1/upgradeIconV1.ts
+++ b/packages/components/codemods/upgradeIconV1/upgradeIconV1.ts
@@ -1,9 +1,9 @@
import ts from "typescript"
import {
setImportToRemove,
- ImportModuleNameTagsMap,
+ type ImportModuleNameTagsMap,
updateKaioImports,
- UpdateKaioImportsArgs,
+ type UpdateKaioImportsArgs,
setImportToAdd,
} from "../utils"
import { getNewIconPropsFromOldIconName } from "./getNewIconPropsFromOldIconName"
@@ -20,8 +20,9 @@ const reverseStringMap = (
}
export const upgradeIconV1 =
- (context: ts.TransformationContext, tagNames: ImportModuleNameTagsMap) =>
- (rootNode: ts.Node): ts.Node => {
+ (tagNames: ImportModuleNameTagsMap): ts.TransformerFactory =>
+ context =>
+ rootNode => {
const oldImportSource = "@kaizen/components"
const kaioTagNames = tagNames.get(oldImportSource)
@@ -85,10 +86,11 @@ export const upgradeIconV1 =
}
return ts.visitEachChild(node, visit, context)
}
+
const node = ts.visitNode(rootNode, visit)
return updateKaioImports({
importsToRemove: importsToRemove.size > 0 ? importsToRemove : undefined,
importsToAdd: importsToAdd.size > 0 ? importsToAdd : undefined,
- })(context)(node)
+ })(context)(node as ts.SourceFile)
}
diff --git a/packages/components/codemods/utils/__fixtures__/KaioComponent.tsx b/packages/components/codemods/utils/__fixtures__/KaioComponent.tsx
index 498efc0ac74..2444c75d4bb 100644
--- a/packages/components/codemods/utils/__fixtures__/KaioComponent.tsx
+++ b/packages/components/codemods/utils/__fixtures__/KaioComponent.tsx
@@ -1,6 +1,5 @@
-import * as React from "react"
+import React from "react"
// @ts-ignore
import { Pancakes } from "@kaizen/components"
-/* eslint-disable react/jsx-curly-brace-presence */
+
export const KaioComponent = (): JSX.Element =>
-/* eslint-enable react/jsx-curly-brace-presence */
diff --git a/packages/components/codemods/utils/__snapshots__/emptyLineEncoder.spec.ts.snap b/packages/components/codemods/utils/__snapshots__/emptyLineEncoder.spec.ts.snap
new file mode 100644
index 00000000000..5f581330106
--- /dev/null
+++ b/packages/components/codemods/utils/__snapshots__/emptyLineEncoder.spec.ts.snap
@@ -0,0 +1,19 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`decodeEmptyLines() > replaces default line marker with empty line 1`] = `
+"import React from "react"
+// @ts-ignore
+import { Pancakes } from "@kaizen/components"
+
+export const KaioComponent = (): JSX.Element =>
+"
+`;
+
+exports[`encodeEmptyLines() > replaces empty lines with default line marker 1`] = `
+"import React from "react"
+// @ts-ignore
+import { Pancakes } from "@kaizen/components"
+/*!--empty-line--!*/
+export const KaioComponent = (): JSX.Element =>
+/*!--empty-line--!*/"
+`;
diff --git a/packages/components/codemods/utils/__snapshots__/transformSource.spec.ts.snap b/packages/components/codemods/utils/__snapshots__/transformSource.spec.ts.snap
index 82debc5ae8d..0fbb09f93fd 100644
--- a/packages/components/codemods/utils/__snapshots__/transformSource.spec.ts.snap
+++ b/packages/components/codemods/utils/__snapshots__/transformSource.spec.ts.snap
@@ -1,11 +1,21 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`transformSource > updates the value of Pancakes topping to jam 1`] = `
-"import * as React from "react";
+exports[`transformSource() > updates the value of Pancakes topping to jam 1`] = `
+"import React from "react";
// @ts-ignore
import { Pancakes } from "@kaizen/components";
-/* eslint-disable react/jsx-curly-brace-presence */
+
+export const KaioComponent = (): JSX.Element => ;
+
+"
+`;
+
+exports[`transformSourceForTagName > updates the value of Pancakes topping to jam 1`] = `
+"import React from "react";
+// @ts-ignore
+import { Pancakes } from "@kaizen/components";
+
export const KaioComponent = (): JSX.Element => ;
-/* eslint-enable react/jsx-curly-brace-presence */
+
"
`;
diff --git a/packages/components/codemods/utils/createEncodedSourceFile.ts b/packages/components/codemods/utils/createEncodedSourceFile.ts
new file mode 100644
index 00000000000..4886a05bf61
--- /dev/null
+++ b/packages/components/codemods/utils/createEncodedSourceFile.ts
@@ -0,0 +1,15 @@
+import ts from "typescript"
+import { encodeEmptyLines } from "./emptyLineEncoder"
+
+export const createEncodedSourceFile = (
+ filePath: string,
+ sourceCode: string
+): ts.SourceFile => {
+ const encodedSource = encodeEmptyLines(sourceCode)
+ return ts.createSourceFile(
+ filePath,
+ encodedSource,
+ ts.ScriptTarget.Latest,
+ true
+ )
+}
diff --git a/packages/components/codemods/utils/createProp.spec.ts b/packages/components/codemods/utils/createProp.spec.ts
index 3ca0f29484d..3b5b8e188af 100644
--- a/packages/components/codemods/utils/createProp.spec.ts
+++ b/packages/components/codemods/utils/createProp.spec.ts
@@ -2,12 +2,11 @@ import ts from "typescript"
import { parseJsx } from "../__tests__/utils/parseJsx"
import { createStyleProp } from "./createProp"
import { printAst } from "./printAst"
-import { TransformConfig, transformSource } from "./transformSource"
+import { TransformSourceArgs, transformSource } from "./transformSource"
import { updateJsxElementWithNewProps } from "./updateJsxElementWithNewProps"
-export const mockedTransformer =
- (context: ts.TransformationContext) =>
- (rootNode: ts.Node): ts.Node => {
+export const mockedTransformer: ts.TransformerFactory =
+ context => rootNode => {
const visit = (node: ts.Node): ts.Node => {
if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
if (node.tagName.getText() === "Pancakes") {
@@ -32,16 +31,15 @@ export const mockedTransformer =
}
return ts.visitEachChild(node, visit, context)
}
- return ts.visitNode(rootNode, visit)
+ return ts.visitNode(rootNode, visit) as ts.SourceFile
}
const testCreateStyleProp = (
- sourceFile: TransformConfig["sourceFile"]
+ sourceFile: TransformSourceArgs["sourceFile"]
): string =>
transformSource({
sourceFile,
- astTransformer: mockedTransformer,
- tagName: "Pancakes",
+ transformers: [mockedTransformer],
})
describe("createStyleProp()", () => {
diff --git a/packages/components/codemods/utils/emptyLineEncoder.spec.ts b/packages/components/codemods/utils/emptyLineEncoder.spec.ts
new file mode 100644
index 00000000000..bd8cd01076c
--- /dev/null
+++ b/packages/components/codemods/utils/emptyLineEncoder.spec.ts
@@ -0,0 +1,25 @@
+import fs from "fs"
+import path from "path"
+import { decodeEmptyLines, encodeEmptyLines } from "./emptyLineEncoder"
+
+describe("encodeEmptyLines()", () => {
+ it("replaces empty lines with default line marker", () => {
+ const filePath = path.resolve(
+ path.join(__dirname, "./__fixtures__/KaioComponent.tsx")
+ )
+ const fileContent = fs.readFileSync(filePath, "utf8")
+ const output = encodeEmptyLines(fileContent)
+ expect(output).toMatchSnapshot()
+ })
+})
+
+describe("decodeEmptyLines()", () => {
+ it("replaces default line marker with empty line", () => {
+ const filePath = path.resolve(
+ path.join(__dirname, "./__fixtures__/KaioComponent.tsx")
+ )
+ const fileContent = fs.readFileSync(filePath, "utf8")
+ const output = decodeEmptyLines(fileContent)
+ expect(output).toMatchSnapshot()
+ })
+})
diff --git a/packages/components/codemods/utils/emptyLineEncoder.ts b/packages/components/codemods/utils/emptyLineEncoder.ts
new file mode 100644
index 00000000000..2b6d8cbe04a
--- /dev/null
+++ b/packages/components/codemods/utils/emptyLineEncoder.ts
@@ -0,0 +1,18 @@
+// Fork of https://github.com/Serj-Tm/ts-empty-line-encoder/blob/master/encoder.ts
+const DEFAULT_EMPTY_LINE_MARKER: string = "!--empty-line--!"
+const DEFAULT_NEW_LINE: string = "\n"
+
+const toComment = (marker: string): string => `/*${marker}*/`
+
+export const encodeEmptyLines = (text: string): string => {
+ const marker = toComment(DEFAULT_EMPTY_LINE_MARKER)
+ const lines = text.split(/\r?\n/)
+ const commentedLines = lines.map(line => (line.trim() == "" ? marker : line))
+ return commentedLines.join(DEFAULT_NEW_LINE)
+}
+
+export const decodeEmptyLines = (text: string): string => {
+ const markerRegex = toComment(DEFAULT_EMPTY_LINE_MARKER).replace(/\*/g, "\\*")
+ const decoded = text.replace(new RegExp(markerRegex, "gi"), "")
+ return decoded
+}
diff --git a/packages/components/codemods/utils/migrateStringProp.spec.ts b/packages/components/codemods/utils/migrateStringProp.spec.ts
index 34f54eef8ff..a7b61bd12eb 100644
--- a/packages/components/codemods/utils/migrateStringProp.spec.ts
+++ b/packages/components/codemods/utils/migrateStringProp.spec.ts
@@ -1,5 +1,9 @@
import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst, TransformConfig } from "../utils"
+import {
+ transformSourceForTagName,
+ printAst,
+ TransformSourceForTagNameArgs,
+} from "../utils"
import { migrateStringProp } from "./migrateStringProp"
const transformTopping = (oldValue: string): string => {
@@ -12,9 +16,9 @@ const transformTopping = (oldValue: string): string => {
}
const testMigrateStringProp = (
- sourceFile: TransformConfig["sourceFile"]
+ sourceFile: TransformSourceForTagNameArgs["sourceFile"]
): string =>
- transformSource({
+ transformSourceForTagName({
sourceFile,
astTransformer: migrateStringProp(
"toppingOld",
diff --git a/packages/components/codemods/utils/migrateStringProp.ts b/packages/components/codemods/utils/migrateStringProp.ts
index eee42050376..6a24a95d242 100644
--- a/packages/components/codemods/utils/migrateStringProp.ts
+++ b/packages/components/codemods/utils/migrateStringProp.ts
@@ -2,7 +2,6 @@ import ts from "typescript"
import { getPropValueText } from "./getPropValueText"
import { updateJsxElementWithNewProps } from "./updateJsxElementWithNewProps"
-/** Recurses through AST to find and update any jsx element that matched the tagName */
export const migrateStringProp =
(
oldPropName: string,
@@ -10,7 +9,7 @@ export const migrateStringProp =
valueTransformer: (value: OldValue) => NewValue
) =>
(context: ts.TransformationContext, tagName: string) =>
- (rootNode: ts.Node): ts.Node => {
+ (rootNode: ts.SourceFile): ts.SourceFile => {
const visit = (node: ts.Node): ts.Node => {
if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
if (node.tagName.getText() === tagName) {
@@ -39,5 +38,5 @@ export const migrateStringProp =
}
return ts.visitEachChild(node, visit, context)
}
- return ts.visitNode(rootNode, visit)
+ return ts.visitNode(rootNode, visit) as ts.SourceFile
}
diff --git a/packages/components/codemods/utils/printAst.ts b/packages/components/codemods/utils/printAst.ts
index 0244e873697..2ff4a3ec531 100644
--- a/packages/components/codemods/utils/printAst.ts
+++ b/packages/components/codemods/utils/printAst.ts
@@ -1,4 +1,5 @@
import ts from "typescript"
+
/** A util that prints that is used to print the AST as a string */
export const printAst = (ast: ts.SourceFile): string => {
const printer = ts.createPrinter()
diff --git a/packages/components/codemods/utils/removeProps.spec.ts b/packages/components/codemods/utils/removeProps.spec.ts
index 1e3866e68e7..5552e7244da 100644
--- a/packages/components/codemods/utils/removeProps.spec.ts
+++ b/packages/components/codemods/utils/removeProps.spec.ts
@@ -1,5 +1,5 @@
import { parseJsx } from "../__tests__/utils"
-import { transformSource, printAst } from "../utils"
+import { transformSourceForTagName, printAst } from "../utils"
import { removeProps } from "./removeProps"
describe("removeProps()", () => {
@@ -10,7 +10,7 @@ describe("removeProps()", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: removeProps(["topping"]),
tagName: "Pancakes",
@@ -25,7 +25,7 @@ describe("removeProps()", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: removeProps(["topping", "fruit"]),
tagName: "Pancakes",
@@ -40,7 +40,7 @@ describe("removeProps()", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: removeProps(["topping"]),
tagName: "Pancakes",
@@ -55,7 +55,7 @@ describe("removeProps()", () => {
const outputAst = parseJsx(`
export const TestComponent = () =>
`)
- const transformed = transformSource({
+ const transformed = transformSourceForTagName({
sourceFile: inputAst,
astTransformer: removeProps(["topping"]),
tagName: "Pancakes",
diff --git a/packages/components/codemods/utils/removeProps.ts b/packages/components/codemods/utils/removeProps.ts
index 7fc7abd4b5a..5f85fbb9291 100644
--- a/packages/components/codemods/utils/removeProps.ts
+++ b/packages/components/codemods/utils/removeProps.ts
@@ -4,7 +4,7 @@ import { updateJsxElementWithNewProps } from "./updateJsxElementWithNewProps"
export const removeProps =
(propsToRemove: string[]) =>
(context: ts.TransformationContext, tagName: string) =>
- (rootNode: ts.Node): ts.Node => {
+ (rootNode: ts.SourceFile): ts.SourceFile => {
function visit(node: ts.Node): ts.Node {
if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
if (node.tagName.getText() === tagName) {
@@ -26,5 +26,5 @@ export const removeProps =
}
return ts.visitEachChild(node, visit, context)
}
- return ts.visitNode(rootNode, visit)
+ return ts.visitNode(rootNode, visit) as ts.SourceFile
}
diff --git a/packages/components/codemods/utils/transformComponentsInDir.ts b/packages/components/codemods/utils/transformComponentsInDir.ts
index d2ab22e12b0..4e0db1b075d 100644
--- a/packages/components/codemods/utils/transformComponentsInDir.ts
+++ b/packages/components/codemods/utils/transformComponentsInDir.ts
@@ -1,11 +1,15 @@
import fs from "fs"
import path from "path"
-import ts from "typescript"
-import { transformSource, getKaioTagName, TransformConfig } from "."
+import { createEncodedSourceFile } from "./createEncodedSourceFile"
+import { getKaioTagName } from "./getKaioTagName"
+import {
+ transformSourceForTagName,
+ type TransformSourceForTagNameArgs,
+} from "./transformSource"
export const traverseDir = (
dir: string,
- transformFile: (componentFilePath: string, sourceFile: ts.SourceFile) => void
+ transformFile: (componentFilePath: string, sourceCode: string) => void
): void => {
if (dir.includes("node_modules")) {
return
@@ -19,15 +23,8 @@ export const traverseDir = (
if (fs.statSync(fullPath).isDirectory()) {
traverseDir(fullPath, transformFile)
} else if (fullPath.endsWith(".tsx")) {
- const source = fs.readFileSync(fullPath, "utf8")
- const sourceFile = ts.createSourceFile(
- fullPath,
- source,
- ts.ScriptTarget.Latest,
- true
- )
-
- transformFile(fullPath, sourceFile)
+ const sourceCode = fs.readFileSync(fullPath, "utf8")
+ transformFile(fullPath, sourceCode)
}
})
}
@@ -35,16 +32,18 @@ export const traverseDir = (
/** Walks the directory and runs the AST transformer on the given component name */
export const transformComponentsInDir = (
dir: string,
- transformer: TransformConfig["astTransformer"],
+ transformer: TransformSourceForTagNameArgs["astTransformer"],
componentName: string
): void => {
const transformFile = (
componentFilePath: string,
- sourceFile: ts.SourceFile
+ sourceCode: string
): void => {
+ const sourceFile = createEncodedSourceFile(componentFilePath, sourceCode)
+
const tagName = getKaioTagName(sourceFile, componentName)
if (tagName) {
- const updatedSourceFile = transformSource({
+ const updatedSourceFile = transformSourceForTagName({
sourceFile,
astTransformer: transformer,
tagName,
diff --git a/packages/components/codemods/utils/transformSource.spec.ts b/packages/components/codemods/utils/transformSource.spec.ts
index 960cc45cd56..fcaabfc4f7a 100644
--- a/packages/components/codemods/utils/transformSource.spec.ts
+++ b/packages/components/codemods/utils/transformSource.spec.ts
@@ -1,55 +1,84 @@
import fs from "fs"
import path from "path"
import ts from "typescript"
-import { parseJsx } from "../__tests__/utils"
-import { TransformConfig, transformSource } from "./transformSource"
-
-export const mockedTransformer =
- (context: ts.TransformationContext) =>
- (rootNode: ts.Node): ts.Node => {
- function visit(node: ts.Node): ts.Node {
- if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
- if (node.tagName.getText() === "Pancakes") {
- const newAttributes = node.attributes.properties.map(attr => {
- if (ts.isJsxAttribute(attr) && attr.name.getText() === "topping") {
- return ts.factory.updateJsxAttribute(
- attr,
- attr.name,
- ts.factory.createStringLiteral("jam")
- )
- }
- return attr
- })
- if (ts.isJsxSelfClosingElement(node)) {
- return ts.factory.updateJsxSelfClosingElement(
- node,
- node.tagName,
- node.typeArguments,
- ts.factory.createJsxAttributes(newAttributes)
+import { createEncodedSourceFile } from "./createEncodedSourceFile"
+import {
+ TransformSourceForTagNameArgs,
+ transformSource,
+ transformSourceForTagName,
+} from "./transformSource"
+
+const visit =
+ (context: ts.TransformationContext, tagName: string) =>
+ (node: ts.Node): ts.Node => {
+ if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+ if (node.tagName.getText() === tagName) {
+ const newAttributes = node.attributes.properties.map(attr => {
+ if (ts.isJsxAttribute(attr) && attr.name.getText() === "topping") {
+ return ts.factory.updateJsxAttribute(
+ attr,
+ attr.name,
+ ts.factory.createStringLiteral("jam")
)
}
+ return attr
+ })
+ if (ts.isJsxSelfClosingElement(node)) {
+ return ts.factory.updateJsxSelfClosingElement(
+ node,
+ node.tagName,
+ node.typeArguments,
+ ts.factory.createJsxAttributes(newAttributes)
+ )
}
}
- return ts.visitEachChild(node, visit, context)
}
- return ts.visitNode(rootNode, visit)
+ return ts.visitEachChild(node, visit(context, tagName), context)
}
-describe("transformSource", () => {
+describe("transformSource()", () => {
+ it("updates the value of Pancakes topping to jam", () => {
+ const filePath = path.resolve(
+ path.join(__dirname, "./__fixtures__/KaioComponent.tsx")
+ )
+ const fileContent = fs.readFileSync(filePath, "utf8")
+ const sourceFile = createEncodedSourceFile(filePath, fileContent)
+ const mockTransformer =
+ (tagName: string): ts.TransformerFactory =>
+ context =>
+ rootNode =>
+ ts.visitNode(rootNode, visit(context, tagName)) as ts.SourceFile
+
+ const transformed = transformSource({
+ sourceFile,
+ transformers: [mockTransformer("Pancakes")],
+ })
+
+ expect(transformed).toMatchSnapshot()
+ })
+})
+
+describe("transformSourceForTagName", () => {
it("updates the value of Pancakes topping to jam", () => {
const filePath = path.resolve(
path.join(__dirname, "./__fixtures__/KaioComponent.tsx")
)
const fileContent = fs.readFileSync(filePath, "utf8")
- const sourceFile = parseJsx(fileContent)
+ const sourceFile = createEncodedSourceFile(filePath, fileContent)
+ const mockTransformer =
+ (context: ts.TransformationContext, tagName: string) =>
+ (rootNode: ts.SourceFile): ts.SourceFile =>
+ ts.visitNode(rootNode, visit(context, tagName)) as ts.SourceFile
- const mockTransformConfig = {
+ const mockTransformSourceForTagNameArgs = {
sourceFile,
- astTransformer: mockedTransformer,
- tagName: "mockAlias",
- } satisfies TransformConfig
+ astTransformer: mockTransformer,
+ tagName: "Pancakes",
+ } satisfies TransformSourceForTagNameArgs
- const transformed = transformSource(mockTransformConfig)
+ const transformed = transformSourceForTagName(
+ mockTransformSourceForTagNameArgs
+ )
expect(transformed).toMatchSnapshot()
})
diff --git a/packages/components/codemods/utils/transformSource.ts b/packages/components/codemods/utils/transformSource.ts
index 96756fc3f53..e211bc3e402 100644
--- a/packages/components/codemods/utils/transformSource.ts
+++ b/packages/components/codemods/utils/transformSource.ts
@@ -1,30 +1,43 @@
import ts from "typescript"
-import { ImportModuleNameTagsMap } from "./getKaioTagName"
+import { decodeEmptyLines } from "./emptyLineEncoder"
import { printAst } from "./printAst"
-export type TransformConfig<
- TagName extends string | ImportModuleNameTagsMap = string,
-> = {
+export type TransformSourceArgs = {
+ sourceFile: ts.SourceFile
+ transformers: Array>
+}
+
+export const transformSource = ({
+ sourceFile,
+ transformers,
+}: TransformSourceArgs): string => {
+ const result = ts.transform(sourceFile, transformers)
+ const transformedSource = printAst(result.transformed[0])
+ return decodeEmptyLines(transformedSource)
+}
+
+/**
+ * @deprecated - use transformSource instead of transformSourceForTagName
+ */
+export type TransformSourceForTagNameArgs = {
sourceFile: ts.SourceFile
astTransformer: (
context: ts.TransformationContext,
- tagName: TagName
- ) => (rootNode: ts.Node) => ts.Node
- tagName: TagName
+ tagName: string
+ ) => (rootNode: ts.SourceFile) => ts.SourceFile
+ tagName: string
}
-/** Transforms the source file with the transformer and target import alias provided */
-export const transformSource = <
- TagName extends string | ImportModuleNameTagsMap,
->({
+/**
+ * @deprecated - use transformSource instead
+ * Transforms the source file with the transformer and target import alias provided
+ */
+export const transformSourceForTagName = ({
sourceFile,
astTransformer,
tagName,
-}: TransformConfig): string => {
- const result = ts.transform(sourceFile, [
- context => astTransformer(context, tagName),
- ])
- const transformedSource = result.transformed[0] as ts.SourceFile
-
- return printAst(transformedSource)
-}
+}: TransformSourceForTagNameArgs): string =>
+ transformSource({
+ sourceFile,
+ transformers: [context => astTransformer(context, tagName)],
+ })
diff --git a/packages/components/codemods/utils/updateKaioImports.ts b/packages/components/codemods/utils/updateKaioImports.ts
index 2d88e9a86ad..d87e5b4570b 100644
--- a/packages/components/codemods/utils/updateKaioImports.ts
+++ b/packages/components/codemods/utils/updateKaioImports.ts
@@ -118,9 +118,12 @@ export type UpdateKaioImportsArgs = {
}
export const updateKaioImports =
- ({ importsToRemove, importsToAdd }: UpdateKaioImportsArgs) =>
- (context: ts.TransformationContext) =>
- (rootNode: ts.Node): ts.Node => {
+ ({
+ importsToRemove,
+ importsToAdd,
+ }: UpdateKaioImportsArgs): ts.TransformerFactory =>
+ context =>
+ rootNode => {
if (!ts.isSourceFile(rootNode)) return rootNode
if (!importsToRemove && !importsToAdd) return rootNode
diff --git a/packages/components/package.json b/packages/components/package.json
index 1080737b4dc..606d7060bc7 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@kaizen/components",
- "version": "1.67.10",
+ "version": "1.67.18",
"description": "Kaizen component library",
"author": "Geoffrey Chong ",
"homepage": "https://cultureamp.design",
diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs
index 5321d37411b..7450432d4be 100644
--- a/packages/components/rollup.config.mjs
+++ b/packages/components/rollup.config.mjs
@@ -15,7 +15,4 @@ export default rollupConfig({
reactAriaComponentsV3: "./src/__react-aria-components__/index.ts",
},
plugins: pluginsSharedUi,
- alias: {
- entries: [{ find: "~components", replacement: "src" }],
- },
})
diff --git a/packages/components/src/EmptyState/EmptyState.module.scss b/packages/components/src/EmptyState/EmptyState.module.scss
index 9b9ed3ca4ae..117b4743856 100644
--- a/packages/components/src/EmptyState/EmptyState.module.scss
+++ b/packages/components/src/EmptyState/EmptyState.module.scss
@@ -7,19 +7,21 @@
--empty-state-border-width: var(--border-width-1);
display: flex;
- justify-content: space-around;
width: 100%;
+ box-sizing: border-box;
+ justify-content: space-around;
padding: calc(2% - var(--empty-state-border-width))
calc(var(--spacing-24) - var(--empty-state-border-width));
color: $color-purple-800;
border: var(--empty-state-border-width) solid var(--empty-state-border-color);
border-radius: var(--border-solid-border-radius);
background-color: var(--empty-state-background-color);
+ flex-wrap: wrap;
@include small {
flex-direction: column;
align-items: center;
- padding-block: calc(var(--spacing-24) - var(--empty-state-border-width));
+ padding: calc(var(--spacing-24) - var(--empty-state-border-width));
}
&.straightCorners {
@@ -82,29 +84,30 @@
.illustrationSide,
.textSide {
- display: inline-block;
+ display: flex;
+ box-sizing: border-box;
}
.illustrationSide {
- min-width: 224px;
- flex-grow: 0;
- flex-shrink: 1;
+ justify-content: center;
+ align-items: center;
+ flex: 0 1 auto;
+ min-width: 0;
+ max-width: 100%;
margin-bottom: $spacing-md;
@include small {
- width: 224px;
+ width: 100%;
+ max-width: 224px;
}
@include medium {
- display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-bottom: 0;
- min-width: 40%;
- max-width: 50%;
- flex-grow: 1;
- box-sizing: border-box;
+ width: auto;
+ max-width: 40%;
padding-inline-end: $spacing-md;
}
@@ -128,32 +131,36 @@
max-width: 100%;
max-height: 366px;
width: auto;
+ height: auto;
// Fixes for IE11 Flexbox issues
min-height: 196px;
@include small {
max-height: 196px;
+ width: 100%;
}
}
.textSide {
- display: flex;
- flex-grow: 1;
- flex-shrink: 1;
+ flex: 1 1 auto;
+ min-width: 0;
+ max-width: 100%;
align-items: center;
-webkit-font-smoothing: antialiased;
@include medium {
- flex-basis: 50%;
- flex-grow: 0;
+ flex: 0 1 50%;
}
}
.textSideInner {
- flex-grow: 0;
- height: auto;
+ width: 100%;
+ max-width: 100%;
+ box-sizing: border-box;
margin: 0 $spacing-sm;
+ word-wrap: break-word;
+ overflow-wrap: break-word;
@include small {
margin-bottom: 0;
@@ -166,6 +173,7 @@
.heading {
margin-bottom: $spacing-md;
+ max-width: 100%;
@media (max-width: (375px)) {
@include typography-heading-3-sm;
@@ -174,4 +182,5 @@
.description {
margin-bottom: $spacing-md;
+ max-width: 100%;
}
diff --git a/packages/components/src/Filter/FilterBar/FilterBar.module.css b/packages/components/src/Filter/FilterBar/FilterBar.module.css
index 4fae8d4e319..cbcfe5676ed 100644
--- a/packages/components/src/Filter/FilterBar/FilterBar.module.css
+++ b/packages/components/src/Filter/FilterBar/FilterBar.module.css
@@ -1,7 +1,3 @@
-.wrapper {
- container: filter-bar-wrapper / inline-size;
-}
-
.filterBar {
display: flex;
padding: var(--spacing-8);
diff --git a/packages/components/src/Filter/FilterBar/FilterBar.tsx b/packages/components/src/Filter/FilterBar/FilterBar.tsx
index 5ab044ab266..f038aece849 100644
--- a/packages/components/src/Filter/FilterBar/FilterBar.tsx
+++ b/packages/components/src/Filter/FilterBar/FilterBar.tsx
@@ -27,21 +27,19 @@ export const FilterBar = ({
}: FilterBarProps): JSX.Element => (
filters={filters} {...providerProps}>
{(activeFilters): JSX.Element => (
-
-
-
- {Object.values(activeFilters).map(({ id, Component }) => (
- // `id` will always be `string`, but keyof ValuesMap transformed it
-
- {React.cloneElement(Component, { id })}
-
- ))}
-
-
+
+
+ {Object.values(activeFilters).map(({ id, Component }) => (
+ // `id` will always be `string`, but keyof ValuesMap transformed it
+
+ {React.cloneElement(Component, { id })}
+
+ ))}
+
+
-
-
-
+
+
)}
diff --git a/packages/components/src/Pagination/Pagination.module.scss b/packages/components/src/Pagination/Pagination.module.scss
index c1a7ee44a79..73d34d2eeab 100644
--- a/packages/components/src/Pagination/Pagination.module.scss
+++ b/packages/components/src/Pagination/Pagination.module.scss
@@ -51,15 +51,3 @@
}
}
}
-
-// Truncate indicator
-.truncateIndicatorWrapper {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 36px;
- width: 36px;
- background-color: transparent;
- color: rgba($color-purple-800-rgb, 0.7);
- margin: 0 5px;
-}
diff --git a/packages/components/src/Pagination/Pagination.spec.tsx b/packages/components/src/Pagination/Pagination.spec.tsx
index 15f7066a7d7..e901ffad3ef 100644
--- a/packages/components/src/Pagination/Pagination.spec.tsx
+++ b/packages/components/src/Pagination/Pagination.spec.tsx
@@ -1,6 +1,7 @@
import React from "react"
import { render, screen, waitFor } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
+import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
import { Pagination } from "./Pagination"
const user = userEvent.setup()
@@ -15,6 +16,10 @@ const defaultProps = {
}
describe("
", () => {
+ beforeEach(() => {
+ mockMatchMedia()
+ })
+
it("calls onPageChange when clicking page number", async () => {
const onPageChange = vi.fn()
diff --git a/packages/components/src/Pagination/Pagination.tsx b/packages/components/src/Pagination/Pagination.tsx
index 072e2a9c46d..1cba7f2813f 100644
--- a/packages/components/src/Pagination/Pagination.tsx
+++ b/packages/components/src/Pagination/Pagination.tsx
@@ -1,6 +1,7 @@
import React, { HTMLAttributes } from "react"
import classnames from "classnames"
import { OverrideClassName } from "~components/types/OverrideClassName"
+import { useMediaQueries } from "~components/utils"
import { DirectionalLink } from "./subcomponents/DirectionalLink"
import { PaginationLink } from "./subcomponents/PaginationLink"
import { TruncateIndicator } from "./subcomponents/TruncateIndicator"
@@ -32,6 +33,8 @@ export const Pagination = ({
classNameOverride,
...restProps
}: PaginationProps): JSX.Element => {
+ const { queries } = useMediaQueries()
+
// Click event for all pagination buttons (next, prev, and the actual numbers)
const handleButtonClick = (newPage: number | PageAction): void => {
if (newPage === "prev") {
@@ -55,12 +58,12 @@ export const Pagination = ({
/>
)
- const pagination = (): JSX.Element[] => {
+ const pagination = (
+ boundaryPagesRange: number,
+ siblingPagesRange: number
+ ): JSX.Element[] => {
const items: JSX.Element[] = []
- const boundaryPagesRange = 1
- const siblingPagesRange = 1
-
// truncateSize is 1 now but could be 0 if we add the ability to hide it.
const truncateSize = 1
@@ -150,7 +153,9 @@ export const Pagination = ({
onClick={(): void => handleButtonClick("prev")}
/>
-
{pagination()}
+
+ {pagination(queries.isMediumOrSmaller ? 0 : 1, queries.isSmall ? 0 : 1)}
+
(
,
diff --git a/packages/components/src/__actions__/Menu/v3/MenuItem.module.scss b/packages/components/src/__actions__/Menu/v3/MenuItem.module.css
similarity index 96%
rename from packages/components/src/__actions__/Menu/v3/MenuItem.module.scss
rename to packages/components/src/__actions__/Menu/v3/MenuItem.module.css
index d2b2fd4374e..cbf8ced027a 100644
--- a/packages/components/src/__actions__/Menu/v3/MenuItem.module.scss
+++ b/packages/components/src/__actions__/Menu/v3/MenuItem.module.css
@@ -1,4 +1,5 @@
.item {
+ display: block;
font-family: var(--typography-paragraph-body-font-family);
font-size: var(--typography-paragraph-body-font-size);
letter-spacing: var(--typography-paragraph-body-letter-spacing);
@@ -9,14 +10,17 @@
border: var(--border-focus-ring-border-width)
var(--border-focus-ring-border-style) transparent;
border-radius: 4px;
- display: flex;
- gap: 0 var(--spacing-8);
- align-items: center;
margin-inline: var(--spacing-6);
text-decoration: none;
cursor: pointer;
}
+.flexWrapper {
+ display: flex;
+ gap: 0 var(--spacing-8);
+ align-items: center;
+}
+
.iconWrapper {
flex-shrink: 0;
display: flex;
diff --git a/packages/components/src/__actions__/Menu/v3/MenuItem.tsx b/packages/components/src/__actions__/Menu/v3/MenuItem.tsx
index 8816787d482..1d787d3cad2 100644
--- a/packages/components/src/__actions__/Menu/v3/MenuItem.tsx
+++ b/packages/components/src/__actions__/Menu/v3/MenuItem.tsx
@@ -4,7 +4,7 @@ import {
MenuItemProps as RACMenuItemProps,
} from "react-aria-components"
import { mergeClassNames } from "~components/utils/mergeClassNames"
-import styles from "./MenuItem.module.scss"
+import styles from "./MenuItem.module.css"
export type MenuItemProps = RACMenuItemProps & {
/**
@@ -17,16 +17,27 @@ export type MenuItemProps = RACMenuItemProps & {
* A MenuItem represents an individual action in a Menu.
*/
export const MenuItem = forwardRef
(
- ({ className, icon, children, ...props }, ref): JSX.Element => (
-
- <>
- {icon && {icon} }
- {children}
- >
-
- )
+ ({ className, icon, children, textValue, ...props }, ref): JSX.Element => {
+ const determinedTextValue =
+ textValue || (typeof children === "string" ? children : undefined)
+ return (
+
+ <>
+ {typeof children === "string" && icon ? (
+
+ {icon}
+ {children}
+
+ ) : (
+ <>{children}>
+ )}
+ >
+
+ )
+ }
)
diff --git a/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx b/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx
index 7a6aeffa67a..b8f3a32ff3c 100644
--- a/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx
+++ b/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx
@@ -71,12 +71,21 @@ import * as exampleStories from "./Menu.stories"
## Actions and Next.js routing
-Use the `href` prop when an action navigates to a new page. Wrapping your app in `FrontendServices` from `@cultureamp/next-services` will automatically turn these into Next.js links.
+Use the `href` prop when an action navigates to a new page.
+[Work in progress] Eventually, wrapping your app in `FrontendServices` from `@cultureamp/next-services` will automatically turn these into Next.js links.
Otherwise, use the `onAction` prop to trigger an action within the page.
+## Typeahead
+
+Typeahead (the ability to quickly skip to an item by typing a few characters after opening) will automatically work when `MenuItem` `children` is a `string`.
+
+If you're passing `ReactNode` into `MenuItem` `children`, you'll need to specify the `textValue` prop manually on `MenuItem` in order for typeahead to work.
+
+
+
## Sections
Sections can be added with the `Section` and `Header` component from `react-aria-components`.
diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx
index ec7c26d645b..f52abe6db82 100644
--- a/packages/components/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx
+++ b/packages/components/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx
@@ -110,7 +110,6 @@ export const SelectionDont: Story = {
export const LabelChevronDo: Story = {
render: ({ defaultOpen, ...args }) => (
- {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
Edit item
@@ -211,7 +210,6 @@ export const MenuItemLabelsDont: Story = {
export const SentenceCaseDo: Story = {
render: ({ defaultOpen, ...args }) => (
- {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
@@ -229,7 +227,6 @@ export const SentenceCaseDo: Story = {
export const SentenceCaseDont: Story = {
render: ({ defaultOpen, ...args }) => (
- {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
@@ -247,7 +244,6 @@ export const SentenceCaseDont: Story = {
export const ElipsesDo: Story = {
render: ({ defaultOpen, ...args }) => (
- {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
@@ -265,7 +261,6 @@ export const ElipsesDo: Story = {
export const ElipsesDont: Story = {
render: ({ defaultOpen, ...args }) => (
- {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx
index 4faf0a4c49d..aa6cf38558c 100644
--- a/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx
+++ b/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent } from "react"
import { Meta, StoryObj } from "@storybook/react"
import isChromatic from "chromatic"
import { Popover } from "react-aria-components"
+import { Text } from "~components/Text"
import { Button } from "~components/__actions__/v3"
import { Icon } from "~components/__future__/Icon"
import { Menu, MenuTrigger, MenuItem } from "../index"
@@ -24,7 +25,6 @@ type Story = StoryObj
export const Playground: Story = {
render: ({ defaultOpen: _, ...args }) => (
- {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
@@ -64,3 +64,35 @@ export const Controlled: Story = {
...testStories.Controlled,
play: undefined,
}
+
+export const RichContent: Story = {
+ render: ({ defaultOpen: _, ...args }) => (
+
+
+
+
+
+
+
+ Save
+
+ Saves all data
+
+
+
+ Edit
+
+ Adjust the name and description
+
+
+
+ Delete
+
+ Completely remove, cannot be undone
+
+
+
+
+
+ ),
+}
diff --git a/packages/components/tsconfig.dist.json b/packages/components/tsconfig.dist.json
index af4471af676..0e9d94658c2 100644
--- a/packages/components/tsconfig.dist.json
+++ b/packages/components/tsconfig.dist.json
@@ -1,5 +1,5 @@
{
- "extends": ["./tsconfig.json", "@kaizen/package-bundler/tsconfig.dist.json"],
+ "extends": "./tsconfig.json",
"include": ["src/**/*"],
"exclude": [
"node_modules",
diff --git a/packages/components/tsconfig.types.json b/packages/components/tsconfig.types.json
deleted file mode 100644
index e25cd82db59..00000000000
--- a/packages/components/tsconfig.types.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "extends": [
- "./tsconfig.dist.json",
- "@kaizen/package-bundler/tsconfig.types.json"
- ]
-}
diff --git a/packages/components/turbo.json b/packages/components/turbo.json
new file mode 100644
index 00000000000..d1077583f57
--- /dev/null
+++ b/packages/components/turbo.json
@@ -0,0 +1,19 @@
+{
+ "extends": ["//"],
+ "tasks": {
+ "build": {
+ "inputs": [
+ "$TURBO_DEFAULT$",
+ "!**/README.md",
+ "!**/*.stories.*",
+ "!**/*.spec.*",
+ "!__tests__/**/*",
+ "!CHANGELOG.md",
+ "!svgo.config.js",
+ "!svgo.spec.ts",
+ "!svgoUtils.js"
+ ],
+ "outputs": ["dist/**"]
+ }
+ }
+}
diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md
index e9ce719217f..b5b5c6d4f3b 100644
--- a/packages/design-tokens/CHANGELOG.md
+++ b/packages/design-tokens/CHANGELOG.md
@@ -1,5 +1,23 @@
# Change Log
+## 10.8.4
+
+### Patch Changes
+
+- [#5279](https://github.com/cultureamp/kaizen-design-system/pull/5279) [`718cbdd2dd00ddd688a9272cd0c271adf085fc42`](https://github.com/cultureamp/kaizen-design-system/commit/718cbdd2dd00ddd688a9272cd0c271adf085fc42) - Actually release @kaizen/package-bundler (2.0.0 already exists from an accidental prior release)
+
+## 10.8.3
+
+### Patch Changes
+
+- [#5270](https://github.com/cultureamp/kaizen-design-system/pull/5270) [`573097f5767533255a1f9ce207d3b1a0ee7bcdfc`](https://github.com/cultureamp/kaizen-design-system/commit/573097f5767533255a1f9ce207d3b1a0ee7bcdfc) - Update @kaizen/package-bundler
+
+## 10.8.2
+
+### Patch Changes
+
+- [#5266](https://github.com/cultureamp/kaizen-design-system/pull/5266) [`94ac62d79ce431adc1ad2b4dc76e39d72fb56373`](https://github.com/cultureamp/kaizen-design-system/commit/94ac62d79ce431adc1ad2b4dc76e39d72fb56373) - Re-release with @kaizen/package-bundler update.
+
## 10.8.1
### Patch Changes
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
index 052fc2023b7..24034e18cc8 100644
--- a/packages/design-tokens/package.json
+++ b/packages/design-tokens/package.json
@@ -1,7 +1,7 @@
{
"name": "@kaizen/design-tokens",
"description": "Tokens used in the Kaizen Design System",
- "version": "10.8.1",
+ "version": "10.8.4",
"homepage": "https://github.com/cultureamp/kaizen-design-system/tree/main/packages/design-tokens",
"repository": {
"type": "git",
diff --git a/packages/design-tokens/tsconfig.dist.json b/packages/design-tokens/tsconfig.dist.json
index af4471af676..0e9d94658c2 100644
--- a/packages/design-tokens/tsconfig.dist.json
+++ b/packages/design-tokens/tsconfig.dist.json
@@ -1,5 +1,5 @@
{
- "extends": ["./tsconfig.json", "@kaizen/package-bundler/tsconfig.dist.json"],
+ "extends": "./tsconfig.json",
"include": ["src/**/*"],
"exclude": [
"node_modules",
diff --git a/packages/design-tokens/tsconfig.types.json b/packages/design-tokens/tsconfig.types.json
deleted file mode 100644
index e25cd82db59..00000000000
--- a/packages/design-tokens/tsconfig.types.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "extends": [
- "./tsconfig.dist.json",
- "@kaizen/package-bundler/tsconfig.types.json"
- ]
-}
diff --git a/packages/design-tokens/turbo.json b/packages/design-tokens/turbo.json
new file mode 100644
index 00000000000..88fa6463292
--- /dev/null
+++ b/packages/design-tokens/turbo.json
@@ -0,0 +1,16 @@
+{
+ "extends": ["//"],
+ "tasks": {
+ "build": {
+ "inputs": [
+ "$TURBO_DEFAULT$",
+ "!**/README.md",
+ "!_docs/**/*",
+ "!CHANGELOG.md",
+ "!CONTRIBUTING.md",
+ "!TODO.md"
+ ],
+ "outputs": ["dist/**"]
+ }
+ }
+}
diff --git a/packages/hosted-assets/turbo.json b/packages/hosted-assets/turbo.json
new file mode 100644
index 00000000000..1c4d22798e4
--- /dev/null
+++ b/packages/hosted-assets/turbo.json
@@ -0,0 +1,9 @@
+{
+ "extends": ["//"],
+ "tasks": {
+ "build": {
+ "inputs": ["$TURBO_DEFAULT$", "!CHANGELOG.md", "!README.md"],
+ "outputs": ["dist/**"]
+ }
+ }
+}
diff --git a/packages/package-bundler/CHANGELOG.md b/packages/package-bundler/CHANGELOG.md
index 37c4ddf604f..8f3f75566a1 100644
--- a/packages/package-bundler/CHANGELOG.md
+++ b/packages/package-bundler/CHANGELOG.md
@@ -1,5 +1,38 @@
# @kaizen/package-bundler
+## 2.0.1
+
+### Patch Changes
+
+- [#5279](https://github.com/cultureamp/kaizen-design-system/pull/5279) [`718cbdd2dd00ddd688a9272cd0c271adf085fc42`](https://github.com/cultureamp/kaizen-design-system/commit/718cbdd2dd00ddd688a9272cd0c271adf085fc42) - Actually release @kaizen/package-bundler (2.0.0 already exists from an accidental prior release)
+
+## 2.0.0
+
+### Major Changes
+
+- [#5270](https://github.com/cultureamp/kaizen-design-system/pull/5270) [`573097f5767533255a1f9ce207d3b1a0ee7bcdfc`](https://github.com/cultureamp/kaizen-design-system/commit/573097f5767533255a1f9ce207d3b1a0ee7bcdfc) - Move TypeScript types generation to rollup as the separate step using `tsc` was not resolving aliases with `typescript-transform-paths@3.5.2`.
+
+ BREAKING CHANGES:
+
+ - `@kaizen/package-bundler/tsconfig.dist.json` has been removed
+ - Remove this from `extends` within your `tsconfig.dist.json`
+ - `@kaizen/package-bundler/tsconfig.types.json`
+ - Delete your `tsconfig.types.json` (no longer required)
+ - `rollupConfig` no longer accepts the `alias` arg as aliases are now automatically resolved based on your `tsconfig.json` paths
+ - Remove `alias` defined within your `rollup.config.mjs`
+
+### Patch Changes
+
+- [#5270](https://github.com/cultureamp/kaizen-design-system/pull/5270) [`573097f5767533255a1f9ce207d3b1a0ee7bcdfc`](https://github.com/cultureamp/kaizen-design-system/commit/573097f5767533255a1f9ce207d3b1a0ee7bcdfc) - Update dep `typescript-transform-paths` to `^3.5.2` and loosen `typescript` peerDep version.
+
+## 1.1.11
+
+### Patch Changes
+
+- [#5266](https://github.com/cultureamp/kaizen-design-system/pull/5266) [`94ac62d79ce431adc1ad2b4dc76e39d72fb56373`](https://github.com/cultureamp/kaizen-design-system/commit/94ac62d79ce431adc1ad2b4dc76e39d72fb56373) - Revert typescript-transform-paths back to ^3.5.1.
+
+ This is due to the aliases no longer transforming with the update to 3.5.2
+
## 1.1.10
### Patch Changes
diff --git a/packages/package-bundler/README.md b/packages/package-bundler/README.md
index db1339186f7..4ccebeb7532 100644
--- a/packages/package-bundler/README.md
+++ b/packages/package-bundler/README.md
@@ -18,14 +18,14 @@ _Note: If your package extends another shared UI package, you will need to list
Add the following to your `package.json`:
```json
-"main": "dist/cjs/index.cjs",
-"module": "dist/esm/index.mjs",
-"types": "dist/types/index.d.ts",
+"main": "dist/cjs/index.cjs", // CommonJS entrypoint
+"module": "dist/esm/index.mjs", // ES modules entrypoint
+"types": "dist/types/index.d.ts", // TypeScript types entrypoint
"files": [
- "dist"
+ "dist" // Ensure dist dir is included in package
],
"sideEffects": [
- "styles.css"
+ "styles.css" // Ensure styles do not get tree-shaken
],
"scripts": {
"build": "pnpm package-bundler build-shared-ui",
@@ -44,7 +44,7 @@ pnpm add -D postcss postcss-preset-env rollup tslib
- `rollup`
- `tslib` (peerDep of `rollup`)
- If using Tailwind:
- - `tailwind`
+ - `tailwindcss`
### Required files
@@ -52,7 +52,6 @@ pnpm add -D postcss postcss-preset-env rollup tslib
- `rollup.config.mjs`
- `tsconfig.json`
- `tsconfig.dist.json`
-- `tsconfig.types.json`
- If using Tailwind:
- `tailwind.config.js`
- `src/tailwind.css`
@@ -104,18 +103,7 @@ export default rollupConfig({
// tsconfig.dist.json
{
- "extends": [
- "./tsconfig.json",
- "@kaizen/package-bundler/tsconfig.dist.json"
- ]
-}
-
-// tsconfig.types.json
-{
- "extends": [
- "./tsconfig.dist.json",
- "@kaizen/package-bundler/tsconfig.types.json"
- ]
+ "extends": "./tsconfig.json"
}
```
@@ -155,7 +143,7 @@ module.exports = {
### Alias
-If you are using aliases, ensure you have them listed in your `tsconfig.json` (the `tsconfig.dist` and `tsconfig.types` should extend this) and in `rollup.config`.
+If you are using aliases, ensure you have them listed in your `tsconfig.json` (the `tsconfig.dist` should extend this).
Example:
```json
@@ -170,17 +158,6 @@ Example:
// tsconfig.dist.json
{
- "extends": ["./tsconfig.json", "@kaizen/package-bundler/tsconfig.dist.json"],
+ "extends": "./tsconfig.json",
}
```
-
-```ts
-// rollup.config.mjs
-export default rollupConfig({
- alias: {
- entries: [
- { find: "~components", replacement: "src" },
- ],
- },
-})
-```
diff --git a/packages/package-bundler/bin/build-commands.sh b/packages/package-bundler/bin/build-commands.sh
index 81c41d5dce2..a10f8f5166f 100755
--- a/packages/package-bundler/bin/build-commands.sh
+++ b/packages/package-bundler/bin/build-commands.sh
@@ -15,12 +15,8 @@ clean() {
bundle() {
echo -e "${GREEN}Compile and bundle source code...${NC}"
rollup -c
- echo -e "${GREEN}------${NC}"
-}
-
-compile_types() {
- echo -e "${GREEN}Compile typescript types...${NC}"
- tsc --project tsconfig.types.json --declarationDir dist/types
+ mv dist/esm/_tmp/types dist/types
+ rm -rf dist/esm/_tmp
echo -e "${GREEN}------${NC}"
}
@@ -37,7 +33,6 @@ elapsed_time() {
build() {
clean
bundle
- compile_types
}
case "$1" in
diff --git a/packages/package-bundler/package.json b/packages/package-bundler/package.json
index 9a300e1eea0..7847d0121c6 100644
--- a/packages/package-bundler/package.json
+++ b/packages/package-bundler/package.json
@@ -1,6 +1,6 @@
{
"name": "@kaizen/package-bundler",
- "version": "1.1.10",
+ "version": "2.0.1",
"description": "Bundles libraries",
"main": "dist/index.js",
"type": "module",
@@ -17,9 +17,7 @@
"files": [
"dist",
"bin",
- "tsconfig.base.json",
- "tsconfig.dist.json",
- "tsconfig.types.json"
+ "tsconfig.base.json"
],
"author": "Geoffrey Chong ",
"homepage": "https://cultureamp.design",
diff --git a/packages/package-bundler/src/rollup.ts b/packages/package-bundler/src/rollup.ts
index 9f49bc21737..4024f47a811 100644
--- a/packages/package-bundler/src/rollup.ts
+++ b/packages/package-bundler/src/rollup.ts
@@ -1,6 +1,5 @@
import fs from "fs"
import path from "path"
-import alias, { RollupAliasOptions } from "@rollup/plugin-alias"
import typescript from "@rollup/plugin-typescript"
import { InputPluginOption, RollupOptions } from "rollup"
import { pluginsDefault } from "./presets/index.js"
@@ -9,7 +8,6 @@ import { rollupTailwindConfig } from "./presets/shared-ui/rollup-tailwind.js"
type Config = {
input?: RollupOptions["input"]
plugins?: InputPluginOption[]
- alias?: RollupAliasOptions
}
export const rollupConfig = (
@@ -21,10 +19,7 @@ export const rollupConfig = (
// Shared config
const userConfig = {
input: config.input,
- plugins: [
- alias(config.alias),
- ...((config?.plugins as InputPluginOption[]) || pluginsDefault),
- ],
+ plugins: config?.plugins ?? pluginsDefault,
} satisfies RollupOptions
// CommonJS
@@ -54,7 +49,21 @@ export const rollupConfig = (
...userConfig,
plugins: [
...userConfig.plugins,
- typescript({ tsconfig: "./tsconfig.dist.json" }),
+ typescript({
+ tsconfig: "./tsconfig.dist.json",
+ compilerOptions: {
+ declaration: true,
+ declarationDir: "dist/esm/_tmp/types",
+ noEmit: false,
+ plugins: [
+ { transform: "typescript-transform-paths" },
+ {
+ transform: "typescript-transform-paths",
+ afterDeclarations: true,
+ },
+ ],
+ },
+ }),
],
output: {
dir: "dist/esm",
diff --git a/packages/package-bundler/tsconfig.dist.json b/packages/package-bundler/tsconfig.dist.json
deleted file mode 100644
index 4d21e0d270b..00000000000
--- a/packages/package-bundler/tsconfig.dist.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "compilerOptions": {
- "declaration": false,
- "noEmit": false,
- "plugins": [{ "transform": "typescript-transform-paths" }]
- }
-}
diff --git a/packages/package-bundler/tsconfig.types.json b/packages/package-bundler/tsconfig.types.json
deleted file mode 100644
index 85e8e111850..00000000000
--- a/packages/package-bundler/tsconfig.types.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "compilerOptions": {
- "declaration": true,
- "emitDeclarationOnly": true,
- "plugins": [
- { "transform": "typescript-transform-paths", "afterDeclarations": true }
- ]
- }
-}
diff --git a/packages/package-bundler/turbo.json b/packages/package-bundler/turbo.json
new file mode 100644
index 00000000000..1c4d22798e4
--- /dev/null
+++ b/packages/package-bundler/turbo.json
@@ -0,0 +1,9 @@
+{
+ "extends": ["//"],
+ "tasks": {
+ "build": {
+ "inputs": ["$TURBO_DEFAULT$", "!CHANGELOG.md", "!README.md"],
+ "outputs": ["dist/**"]
+ }
+ }
+}
diff --git a/packages/tailwind/CHANGELOG.md b/packages/tailwind/CHANGELOG.md
index 82a1ed4a526..146fcda482f 100644
--- a/packages/tailwind/CHANGELOG.md
+++ b/packages/tailwind/CHANGELOG.md
@@ -1,5 +1,32 @@
# Change Log
+## 1.3.10
+
+### Patch Changes
+
+- [#5279](https://github.com/cultureamp/kaizen-design-system/pull/5279) [`718cbdd2dd00ddd688a9272cd0c271adf085fc42`](https://github.com/cultureamp/kaizen-design-system/commit/718cbdd2dd00ddd688a9272cd0c271adf085fc42) - Actually release @kaizen/package-bundler (2.0.0 already exists from an accidental prior release)
+
+- Updated dependencies [[`718cbdd2dd00ddd688a9272cd0c271adf085fc42`](https://github.com/cultureamp/kaizen-design-system/commit/718cbdd2dd00ddd688a9272cd0c271adf085fc42)]:
+ - @kaizen/design-tokens@10.8.4
+
+## 1.3.9
+
+### Patch Changes
+
+- [#5270](https://github.com/cultureamp/kaizen-design-system/pull/5270) [`573097f5767533255a1f9ce207d3b1a0ee7bcdfc`](https://github.com/cultureamp/kaizen-design-system/commit/573097f5767533255a1f9ce207d3b1a0ee7bcdfc) - Update @kaizen/package-bundler
+
+- Updated dependencies [[`573097f5767533255a1f9ce207d3b1a0ee7bcdfc`](https://github.com/cultureamp/kaizen-design-system/commit/573097f5767533255a1f9ce207d3b1a0ee7bcdfc)]:
+ - @kaizen/design-tokens@10.8.3
+
+## 1.3.8
+
+### Patch Changes
+
+- [#5266](https://github.com/cultureamp/kaizen-design-system/pull/5266) [`94ac62d79ce431adc1ad2b4dc76e39d72fb56373`](https://github.com/cultureamp/kaizen-design-system/commit/94ac62d79ce431adc1ad2b4dc76e39d72fb56373) - Re-release with @kaizen/package-bundler update.
+
+- Updated dependencies [[`94ac62d79ce431adc1ad2b4dc76e39d72fb56373`](https://github.com/cultureamp/kaizen-design-system/commit/94ac62d79ce431adc1ad2b4dc76e39d72fb56373)]:
+ - @kaizen/design-tokens@10.8.2
+
## 1.3.7
### Patch Changes
diff --git a/packages/tailwind/package.json b/packages/tailwind/package.json
index e67ac5c0672..ca1084d934d 100644
--- a/packages/tailwind/package.json
+++ b/packages/tailwind/package.json
@@ -1,6 +1,6 @@
{
"name": "@kaizen/tailwind",
- "version": "1.3.7",
+ "version": "1.3.10",
"description": "Kaizen Tailwind presets",
"scripts": {
"build": "pnpm package-bundler build",
@@ -31,7 +31,6 @@
"@kaizen/design-tokens": "workspace:*"
},
"devDependencies": {
- "@kaizen/components": "workspace:*",
"@kaizen/package-bundler": "workspace:*",
"classnames": "^2.5.1",
"rollup": "^4.25.0",
diff --git a/packages/tailwind/tsconfig.dist.json b/packages/tailwind/tsconfig.dist.json
index 9071aaad093..577a63115f3 100644
--- a/packages/tailwind/tsconfig.dist.json
+++ b/packages/tailwind/tsconfig.dist.json
@@ -1,5 +1,5 @@
{
- "extends": ["./tsconfig.json", "@kaizen/package-bundler/tsconfig.dist.json"],
+ "extends": "./tsconfig.json",
"include": ["src/**/*"],
"exclude": [
"src/_docs",
diff --git a/packages/tailwind/tsconfig.types.json b/packages/tailwind/tsconfig.types.json
deleted file mode 100644
index e25cd82db59..00000000000
--- a/packages/tailwind/tsconfig.types.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "extends": [
- "./tsconfig.dist.json",
- "@kaizen/package-bundler/tsconfig.types.json"
- ]
-}
diff --git a/packages/tailwind/turbo.json b/packages/tailwind/turbo.json
new file mode 100644
index 00000000000..98b321f2144
--- /dev/null
+++ b/packages/tailwind/turbo.json
@@ -0,0 +1,9 @@
+{
+ "extends": ["//"],
+ "tasks": {
+ "build": {
+ "inputs": ["$TURBO_DEFAULT$", "!CHANGELOG.md"],
+ "outputs": ["dist/**"]
+ }
+ }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d68898a4dbf..2c15c21718e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -625,9 +625,6 @@ importers:
specifier: workspace:*
version: link:../design-tokens
devDependencies:
- '@kaizen/components':
- specifier: workspace:*
- version: link:../components
'@kaizen/package-bundler':
specifier: workspace:*
version: link:../package-bundler
diff --git a/turbo.json b/turbo.json
index 3f29195e5fc..3f073a68fe6 100644
--- a/turbo.json
+++ b/turbo.json
@@ -3,16 +3,11 @@
"tasks": {
"build": {
"dependsOn": ["^build"],
- "inputs": ["packages/**"],
"outputs": ["dist/**"]
},
"dev": {
"dependsOn": ["^build"]
},
- "@docs/storybook#dev": {
- "dependsOn": ["^build", "build:tailwind"],
- "cache": false
- },
"lint:ts": {
"dependsOn": ["^build"]
},
@@ -22,59 +17,6 @@
},
"clean": {
"cache": false
- },
- "@docs/storybook#build:tailwind": {
- "dependsOn": ["^build"],
- "inputs": ["packages/**", "docs/**"],
- "outputs": ["docs/.storybook/preview.css"],
- "cache": false
- },
- "@docs/storybook#build:docs": {
- "dependsOn": ["^build", "build:tailwind"],
- "inputs": ["packages/**", "docs/**"],
- "outputs": ["docs/storybook-static/**"],
- "cache": false
- },
- "@docs/storybook#build:test": {
- "dependsOn": ["^build", "build:tailwind"],
- "inputs": ["packages/**", "docs/**"],
- "outputs": ["docs/storybook-static/**"],
- "cache": false
- },
- "@docs/storybook#build:chromatic": {
- "dependsOn": ["^build", "build:tailwind"],
- "outputs": ["docs/storybook-static/**"],
- "cache": false
- },
- "@docs/storybook#test:storybook": {
- "dependsOn": ["^build", "build:tailwind"],
- "outputs": ["docs/storybook-static/**"],
- "cache": false
- },
- "@kaizen/components#build": {
- "dependsOn": [
- "@kaizen/design-tokens#build",
- "@kaizen/package-bundler#build"
- ],
- "inputs": ["src/**", "rollup.config.mjs", "tsconfig*.json"],
- "outputs": ["dist/**"]
- },
- "@kaizen/tailwind#build": {
- "dependsOn": [
- "@kaizen/design-tokens#build",
- "@kaizen/package-bundler#build"
- ],
- "inputs": ["src/**"],
- "outputs": ["dist/**"]
- },
- "@kaizen/design-tokens#build": {
- "dependsOn": ["@kaizen/package-bundler#build"],
- "inputs": ["css/**", "less/**", "sass/**", "src/**"],
- "outputs": ["dist/**"]
- },
- "@kaizen/package-bundler#build": {
- "inputs": ["bin/*", "src/**", "tsconfig*.json"],
- "outputs": ["dist/**"]
}
}
}