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 = () =>
TestTest 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 = () =>
TestTestTest
`) - 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 */} @@ -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/**"] } } }