diff --git a/.github/workflows/01-build-patternhub.yml b/.github/workflows/01-build-patternhub.yml new file mode 100644 index 00000000000..710f7983a66 --- /dev/null +++ b/.github/workflows/01-build-patternhub.yml @@ -0,0 +1,97 @@ +--- +name: Build Patternhub + +on: + workflow_call: + inputs: + release: + required: false + default: "false" + type: string + preRelease: + required: false + default: "false" + type: string + +jobs: + build-patternhub: + name: Build Patternhub + runs-on: ubuntu-latest + steps: + - name: โฌ Checkout repo + uses: actions/checkout@v4 + + - name: ๐Ÿ”„ Init Cache + uses: ./.github/actions/npm-cache + + - name: โฌ Download foundations build + uses: actions/download-artifact@v4 + with: + name: db-ui-foundations-build + path: packages/foundations/build + + - name: โฌ Download output + uses: actions/download-artifact@v4 + with: + name: db-ui-output + path: output + + - name: โฌ Download components build + uses: actions/download-artifact@v4 + with: + name: db-ui-components-build + path: packages/components/build + + - name: โ†” Extract branch name + uses: ./.github/actions/extract-branch + id: extract_branch + + - name: โ†” Extract branch/tag name + shell: bash + env: + RELEASE: ${{ inputs.release }} + PRE_RELEASE: ${{ inputs.preRelease }} + BRANCH_NAME: ${{ steps.extract_branch.outputs.branch-name }} + run: | + if [[ $RELEASE == "true" || $PRE_RELEASE == "true" ]] + then + echo "name=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT + else + echo "name=${BRANCH_NAME}" >> $GITHUB_OUTPUT + fi + id: extract + + - name: ๐Ÿ›ค Get base path + uses: actions/github-script@v7 + env: + NAME: ${{ steps.extract.outputs.name }} + RELEASE: ${{ inputs.release }} + PRE_RELEASE: ${{ inputs.preRelease }} + id: base-path + with: + result-encoding: string + script: | + var path = 'review'; + if(process.env.RELEASE === "true" || process.env.PRE_RELEASE === "true") { + path = 'version' + } + return `/${context?.payload?.repository?.name}/${path}/${process.env.NAME}` + + - name: ๐Ÿ”จ Build Patternhub + env: + NEXT_PUBLIC_BASE_PATH: ${{ steps.base-path.outputs.result }} + run: | + npx --no tsx scripts/md-resolve-svg.ts + npm run build --workspace=patternhub + + - name: โซ Upload Patternhub + uses: actions/upload-artifact@v4 + with: + name: db-ui-patternhub + path: build-showcases/patternhub + + - name: ๐Ÿ’€ Killing me softly + uses: ./.github/actions/cancel-workflow + if: failure() + with: + token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/01-build-showcases.yml b/.github/workflows/01-build-showcases.yml index 9ceab4c8c76..9d430f916bf 100644 --- a/.github/workflows/01-build-showcases.yml +++ b/.github/workflows/01-build-showcases.yml @@ -4,18 +4,13 @@ name: Build Showcases on: workflow_call: inputs: - release: - required: false - default: "false" - type: string - preRelease: - required: false - default: "false" + showcase: + required: true type: string jobs: build-showcases: - name: Build Showcases + name: Build Showcase ${{ inputs.showcase }} runs-on: ubuntu-latest steps: - name: โฌ Checkout repo @@ -42,53 +37,14 @@ jobs: name: db-ui-components-build path: packages/components/build - - name: โ†” Extract branch name - uses: ./.github/actions/extract-branch - id: extract_branch - - - name: โ†” Extract branch/tag name - shell: bash - env: - RELEASE: ${{ inputs.release }} - PRE_RELEASE: ${{ inputs.preRelease }} - BRANCH_NAME: ${{ steps.extract_branch.outputs.branch-name }} - run: | - if [[ $RELEASE == "true" || $PRE_RELEASE == "true" ]] - then - echo "name=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT - else - echo "name=${BRANCH_NAME}" >> $GITHUB_OUTPUT - fi - id: extract - - - name: ๐Ÿ›ค Get base path - uses: actions/github-script@v7 - env: - NAME: ${{ steps.extract.outputs.name }} - RELEASE: ${{ inputs.release }} - PRE_RELEASE: ${{ inputs.preRelease }} - id: base-path - with: - result-encoding: string - script: | - var path = 'review'; - if(process.env.RELEASE === "true" || process.env.PRE_RELEASE === "true") { - path = 'version' - } - return `/${context?.payload?.repository?.name}/${path}/${process.env.NAME}` - - - name: ๐Ÿ”จ Build Showcases - env: - NEXT_PUBLIC_BASE_PATH: ${{ steps.base-path.outputs.result }} - run: | - node scripts/md-resolve-svg.js - npm run build-showcases + - name: ๐Ÿ”จ Build ${{ inputs.showcase }} + run: npm run build --workspace=${{ inputs.showcase }} - - name: โซ Upload Showcases + - name: โซ Upload ${{ inputs.showcase }} uses: actions/upload-artifact@v4 with: - name: db-ui-showcases - path: build-showcases + name: db-ui-${{ inputs.showcase }} + path: build-showcases/${{ inputs.showcase }} - name: ๐Ÿ’€ Killing me softly uses: ./.github/actions/cancel-workflow diff --git a/.github/workflows/02-e2e-regenerate.yml b/.github/workflows/02-e2e-regenerate.yml index 2e16024a392..948fef989f7 100644 --- a/.github/workflows/02-e2e-regenerate.yml +++ b/.github/workflows/02-e2e-regenerate.yml @@ -6,6 +6,9 @@ on: version: required: true type: string + type: + required: true + type: string permissions: actions: write @@ -13,7 +16,7 @@ permissions: jobs: regenerate-snapshots: - name: ๐Ÿงช๐ŸŽญ - Regenerate snapshots + name: ๐Ÿงช๐ŸŽญ - Regenerate snapshots ${{ inputs.type }} runs-on: ubuntu-latest container: image: mcr.microsoft.com/playwright:v${{ inputs.version }} @@ -46,22 +49,63 @@ jobs: path: packages/components/build - name: โฌ Download showcases + if: inputs.type == 'showcases' + uses: actions/download-artifact@v4 + with: + name: db-ui-react-showcase + path: build-showcases/react-showcase + + - name: โฌ Download patternhub + if: inputs.type == 'patternhub' uses: actions/download-artifact@v4 with: - name: db-ui-showcases - path: build-showcases + name: db-ui-patternhub + path: build-showcases/patternhub - name: ๐Ÿ‘ฉโ€๐Ÿ”ฌ Generate snapshots ๐ŸŽญ + shell: bash env: HOME: /root + TYPE: ${{ inputs.type }} run: | - npm run regenerate:screenshots --workspace=@db-ui/react-components - npm run regenerate:screenshots --workspace=@db-ui/foundations - npm run regenerate:screenshots --workspace=react-showcase + if [[ $TYPE == "components" ]]; then + npm run regenerate:screenshots --workspace=@db-ui/react-components + elif [[ $TYPE == "foundations" ]]; then + npm run regenerate:screenshots --workspace=@db-ui/foundations + elif [[ $TYPE == "patternhub" ]]; then + npm run regenerate:screenshots --workspace=patternhub + else + npm run regenerate:screenshots --workspace=react-showcase + fi + + - name: ๐Ÿ†™ Upload components + if: inputs.type == 'components' + uses: actions/upload-artifact@v4 + with: + name: snapshots-${{ inputs.type }} + path: ./__snapshots__/*/component + retention-days: 30 + + - name: ๐Ÿ†™ Upload foundations + if: inputs.type == 'foundations' + uses: actions/upload-artifact@v4 + with: + name: snapshots-${{ inputs.type }} + path: ./__snapshots__/foundations + retention-days: 30 + + - name: ๐Ÿ†™ Upload patternhub + if: inputs.type == 'patternhub' + uses: actions/upload-artifact@v4 + with: + name: snapshots-${{ inputs.type }} + path: ./__snapshots__/*/patternhub + retention-days: 30 - - name: ๐Ÿ†™ Upload snapshots + - name: ๐Ÿ†™ Upload showcase + if: inputs.type == 'showcases' uses: actions/upload-artifact@v4 with: - name: __snapshots__ - path: ./__snapshots__ + name: snapshots-${{ inputs.type }} + path: ./__snapshots__/*/showcase retention-days: 30 diff --git a/.github/workflows/02-e2e-showcases.yml b/.github/workflows/02-e2e-showcases.yml index 9344c358a69..cd19710880b 100644 --- a/.github/workflows/02-e2e-showcases.yml +++ b/.github/workflows/02-e2e-showcases.yml @@ -6,6 +6,9 @@ on: version: required: true type: string + showcase: + required: true + type: string permissions: actions: write @@ -13,14 +16,13 @@ permissions: jobs: playwright-showcases: - name: ๐Ÿงช๐ŸŽญ - ${{ matrix.framework }}:${{ matrix.shardIndex }}/${{ matrix.shardTotal }} + name: ๐Ÿงช๐ŸŽญ - ${{ inputs.showcase }}:${{ matrix.shardIndex }}/${{ matrix.shardTotal }} runs-on: ubuntu-latest container: image: mcr.microsoft.com/playwright:v${{ inputs.version }} strategy: fail-fast: false matrix: - framework: [angular, react, vue] shardIndex: [1, 2, 3, 4, 5] shardTotal: [5] steps: @@ -51,17 +53,17 @@ jobs: name: db-ui-components-build path: packages/components/build - - name: โฌ Download showcases + - name: โฌ Download ${{ inputs.showcase }} uses: actions/download-artifact@v4 with: - name: db-ui-showcases - path: build-showcases + name: db-ui-${{ inputs.showcase }} + path: build-showcases/${{ inputs.showcase }} - name: ๐Ÿ‘ฉโ€๐Ÿ”ฌ Test showcase with Playwright ๐ŸŽญ env: HOME: /root run: | - npm run test:e2e --workspace=${{ matrix.framework }}-showcase -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} + npm run test:e2e --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} - name: ๐Ÿ”ฃ Print GitHub Report if: failure() @@ -73,6 +75,6 @@ jobs: if: failure() uses: actions/upload-artifact@v4 with: - name: ${{ matrix.framework }}-showcase-playwright-results-${{ matrix.shardIndex }} - path: ./showcases/${{ matrix.framework }}-showcase/test-results + name: ${{ inputs.showcase }}-playwright-results-${{ matrix.shardIndex }} + path: ./showcases/${{ inputs.showcase }}/test-results retention-days: 30 diff --git a/.github/workflows/03-deploy-gh-pages.yml b/.github/workflows/03-deploy-gh-pages.yml index f2af3d79a0b..70be335eaf8 100644 --- a/.github/workflows/03-deploy-gh-pages.yml +++ b/.github/workflows/03-deploy-gh-pages.yml @@ -24,11 +24,11 @@ jobs: - name: ๐Ÿ”„ Init Cache uses: ./.github/actions/npm-cache - - name: โฌ Download showcases + - name: โฌ Download patternhub uses: actions/download-artifact@v4 with: - name: db-ui-showcases - path: build-showcases + name: db-ui-patternhub + path: build-showcases/patternhub - name: ๐Ÿฆต๐Ÿฆฟ I like to move it move it shell: bash diff --git a/.github/workflows/default.yml b/.github/workflows/default.yml index b3154ce45ff..232fabe413d 100644 --- a/.github/workflows/default.yml +++ b/.github/workflows/default.yml @@ -43,26 +43,109 @@ jobs: with: version: ${{ needs.get-playwright-version.outputs.version }} - build-showcases: + build-showcase-angular: uses: ./.github/workflows/01-build-showcases.yml needs: [build-packages] + with: + showcase: angular-showcase + + build-showcase-angular-ssr: + uses: ./.github/workflows/01-build-showcases.yml + needs: [build-packages] + with: + showcase: angular-ssr-showcase + + build-showcase-react: + uses: ./.github/workflows/01-build-showcases.yml + needs: [build-packages] + with: + showcase: react-showcase + + build-showcase-next: + uses: ./.github/workflows/01-build-showcases.yml + needs: [build-packages] + with: + showcase: next-showcase + + build-showcase-vue: + uses: ./.github/workflows/01-build-showcases.yml + needs: [build-packages] + with: + showcase: vue-showcase + + build-showcase-nuxt: + uses: ./.github/workflows/01-build-showcases.yml + needs: [build-packages] + with: + showcase: nuxt-showcase + + build-showcase-patternhub: + uses: ./.github/workflows/01-build-patternhub.yml + needs: [build-packages] + + test-showcase-angular: + uses: ./.github/workflows/02-e2e-showcases.yml + needs: [build-showcase-angular, get-playwright-version] + with: + version: ${{ needs.get-playwright-version.outputs.version }} + showcase: angular-showcase + + test-showcase-react: + uses: ./.github/workflows/02-e2e-showcases.yml + needs: [build-showcase-react, get-playwright-version] + with: + version: ${{ needs.get-playwright-version.outputs.version }} + showcase: react-showcase + + test-showcase-vue: + uses: ./.github/workflows/02-e2e-showcases.yml + needs: [build-showcase-vue, get-playwright-version] + with: + version: ${{ needs.get-playwright-version.outputs.version }} + showcase: vue-showcase - test-showcases: + test-showcase-patternhub: uses: ./.github/workflows/02-e2e-showcases.yml - needs: [build-showcases, get-playwright-version] + needs: [build-showcase-patternhub, get-playwright-version] + with: + version: ${{ needs.get-playwright-version.outputs.version }} + showcase: patternhub + + regenerate-snapshots-components: + if: always() && needs.test-components.result == 'failure' + uses: ./.github/workflows/02-e2e-regenerate.yml + with: + version: ${{ needs.get-playwright-version.outputs.version }} + type: components + needs: [test-components, get-playwright-version] + + regenerate-snapshots-foundations: + if: always() && needs.test-foundations.result == 'failure' + uses: ./.github/workflows/02-e2e-regenerate.yml + with: + version: ${{ needs.get-playwright-version.outputs.version }} + type: foundations + needs: [test-foundations, get-playwright-version] + + regenerate-snapshots-patternhub: + if: always() && needs.test-showcase-patternhub.result == 'failure' + uses: ./.github/workflows/02-e2e-regenerate.yml with: version: ${{ needs.get-playwright-version.outputs.version }} + type: patternhub + needs: [test-showcase-patternhub, get-playwright-version] regenerate-snapshots: - if: always() && (needs.test-components.result == 'failure' || needs.test-foundations.result == 'failure' || needs.test-showcases.result == 'failure') + if: always() && (needs.test-showcase-angular.result == 'failure' || needs.test-showcase-react.result == 'failure' || needs.test-showcase-vue.result == 'failure') uses: ./.github/workflows/02-e2e-regenerate.yml with: version: ${{ needs.get-playwright-version.outputs.version }} + type: showcases needs: [ - test-components, - test-showcases, - test-foundations, + test-showcase-angular, + test-showcase-react, + test-showcase-vue, get-playwright-version ] @@ -72,12 +155,34 @@ jobs: steps: - name: ๐ŸŽ‰ Checks done run: | - resultBuildShowcases="${{ needs.build-showcases.result }}" + resultBuildShowcaseAngular="${{ needs.build-showcase-angular.result }}" + resultBuildShowcaseAngularSSR="${{ needs.build-showcase-angular-ssr.result }}" + resultBuildShowcaseReact="${{ needs.build-showcase-react.result }}" + resultBuildShowcaseNext="${{ needs.build-showcase-next.result }}" + resultBuildShowcaseVue="${{ needs.build-showcase-vue.result }}" + resultBuildShowcaseNuxt="${{ needs.build-showcase-nuxt.result }}" + resultBuildShowcasePatternhub="${{ needs.build-showcase-patternhub.result }}" resultBuildOutputs="${{ needs.build-outputs.result }}" resultTestPackages="${{ needs.test-components.result }}" - resultTestShowcases="${{ needs.test-showcases.result }}" resultTestFoundations="${{ needs.test-foundations.result }}" - if [[ $resultTestFoundations == "success" && $resultTestShowcases == "success" && $resultBuildShowcases == "success" && $resultBuildOutputs == "success" && $resultTestPackages == "success" ]]; then + resultTestShowcaseAngular="${{ needs.test-showcase-angular.result }}" + resultTestShowcaseReact="${{ needs.test-showcase-react.result }}" + resultTestShowcaseVue="${{ needs.test-showcase-vue.result }}" + resultTestShowcasePatternhub="${{ needs.test-showcase-patternhub.result }}" + if [[ $resultTestFoundations == "success" ]] && \ + [[ $resultTestShowcaseAngular == "success" ]] && \ + [[ $resultTestShowcaseReact == "success" ]] && \ + [[ $resultTestShowcaseVue == "success" ]] && \ + [[ $resultTestShowcasePatternhub == "success" ]] && \ + [[ $resultTestPackages == "success" ]] && \ + [[ $resultBuildOutputs == "success" ]] && \ + [[ $resultBuildShowcaseAngular == "success" ]] && \ + [[ $resultBuildShowcaseAngularSSR == "success" ]] && \ + [[ $resultBuildShowcaseReact == "success" ]] && \ + [[ $resultBuildShowcaseNext == "success" ]] && \ + [[ $resultBuildShowcaseVue == "success" ]] && \ + [[ $resultBuildShowcaseNuxt == "success" ]] && \ + [[ $resultBuildShowcasePatternhub == "success" ]]; then echo "๐ŸŽ‰ All tests were successful." exit 0 else @@ -86,10 +191,19 @@ jobs: fi needs: [ - build-showcases, + build-showcase-angular, + build-showcase-angular-ssr, + build-showcase-react, + build-showcase-next, + build-showcase-vue, + build-showcase-nuxt, + build-showcase-patternhub, build-outputs, test-components, - test-showcases, + test-showcase-angular, + test-showcase-react, + test-showcase-vue, + test-showcase-patternhub, test-foundations ] diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index c300c380806..1ca6a59f386 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -29,42 +29,129 @@ jobs: uses: ./.github/workflows/01-build-outputs.yml needs: [build-packages] - build-showcases: + build-showcase-angular: uses: ./.github/workflows/01-build-showcases.yml - needs: [build-packages, get-publish-version] + needs: [build-packages] with: - release: ${{ needs.get-publish-version.outputs.release }} - preRelease: ${{ needs.get-publish-version.outputs.preRelease }} + showcase: angular-showcase - test-components: - uses: ./.github/workflows/02-e2e.yml - needs: [build-packages, get-playwright-version] + build-showcase-angular-ssr: + uses: ./.github/workflows/01-build-showcases.yml + needs: [build-packages] + with: + showcase: angular-ssr-showcase + + build-showcase-react: + uses: ./.github/workflows/01-build-showcases.yml + needs: [build-packages] + with: + showcase: react-showcase + + build-showcase-next: + uses: ./.github/workflows/01-build-showcases.yml + needs: [build-packages] + with: + showcase: next-showcase + + build-showcase-vue: + uses: ./.github/workflows/01-build-showcases.yml + needs: [build-packages] + with: + showcase: vue-showcase + + build-showcase-nuxt: + uses: ./.github/workflows/01-build-showcases.yml + needs: [build-packages] + with: + showcase: nuxt-showcase + + build-showcase-patternhub: + uses: ./.github/workflows/01-build-patternhub.yml + needs: [build-packages] + + test-showcase-angular: + uses: ./.github/workflows/02-e2e-showcases.yml + needs: [build-showcase-angular, get-playwright-version] + with: + version: ${{ needs.get-playwright-version.outputs.version }} + showcase: angular-showcase + + test-showcase-react: + uses: ./.github/workflows/02-e2e-showcases.yml + needs: [build-showcase-react, get-playwright-version] with: version: ${{ needs.get-playwright-version.outputs.version }} + showcase: react-showcase - test-foundations: - uses: ./.github/workflows/02-e2e-foundations.yml - needs: [build-packages, get-playwright-version] + test-showcase-vue: + uses: ./.github/workflows/02-e2e-showcases.yml + needs: [build-showcase-vue, get-playwright-version] with: version: ${{ needs.get-playwright-version.outputs.version }} + showcase: vue-showcase - test-showcases: + test-showcase-patternhub: uses: ./.github/workflows/02-e2e-showcases.yml - needs: [build-showcases, get-playwright-version] + needs: [build-showcase-patternhub, get-playwright-version] with: version: ${{ needs.get-playwright-version.outputs.version }} + showcase: patternhub checks-done: + if: ${{ always() }} runs-on: ubuntu-latest steps: - name: ๐ŸŽ‰ Checks done - run: echo "๐ŸŽ‰ All builds were successful." + run: | + resultBuildShowcaseAngular="${{ needs.build-showcase-angular.result }}" + resultBuildShowcaseAngularSSR="${{ needs.build-showcase-angular-ssr.result }}" + resultBuildShowcaseReact="${{ needs.build-showcase-react.result }}" + resultBuildShowcaseNext="${{ needs.build-showcase-next.result }}" + resultBuildShowcaseVue="${{ needs.build-showcase-vue.result }}" + resultBuildShowcaseNuxt="${{ needs.build-showcase-nuxt.result }}" + resultBuildShowcasePatternhub="${{ needs.build-showcase-patternhub.result }}" + resultBuildOutputs="${{ needs.build-outputs.result }}" + resultTestPackages="${{ needs.test-components.result }}" + resultTestFoundations="${{ needs.test-foundations.result }}" + resultTestShowcaseAngular="${{ needs.test-showcase-angular.result }}" + resultTestShowcaseReact="${{ needs.test-showcase-react.result }}" + resultTestShowcaseVue="${{ needs.test-showcase-vue.result }}" + resultTestShowcasePatternhub="${{ needs.test-showcase-patternhub.result }}" + if [[ $resultTestFoundations == "success" ]] && \ + [[ $resultTestShowcaseAngular == "success" ]] && \ + [[ $resultTestShowcaseReact == "success" ]] && \ + [[ $resultTestShowcaseVue == "success" ]] && \ + [[ $resultTestShowcasePatternhub == "success" ]] && \ + [[ $resultTestPackages == "success" ]] && \ + [[ $resultBuildOutputs == "success" ]] && \ + [[ $resultBuildShowcaseAngular == "success" ]] && \ + [[ $resultBuildShowcaseAngularSSR == "success" ]] && \ + [[ $resultBuildShowcaseReact == "success" ]] && \ + [[ $resultBuildShowcaseNext == "success" ]] && \ + [[ $resultBuildShowcaseVue == "success" ]] && \ + [[ $resultBuildShowcaseNuxt == "success" ]] && \ + [[ $resultBuildShowcasePatternhub == "success" ]]; then + echo "๐ŸŽ‰ All tests were successful." + exit 0 + else + echo "Some tests were failing." + exit 1 + fi needs: [ - test-components, + build-showcase-angular, + build-showcase-angular-ssr, + build-showcase-react, + build-showcase-next, + build-showcase-vue, + build-showcase-nuxt, + build-showcase-patternhub, build-outputs, - build-showcases, - test-showcases, + test-components, + test-showcase-angular, + test-showcase-react, + test-showcase-vue, + test-showcase-patternhub, test-foundations ] diff --git a/__snapshots__/accordion-item/patternhub/accordion-item-docs-should-match-screenshot.png b/__snapshots__/accordion-item/patternhub/accordion-item-docs-should-match-screenshot.png new file mode 100644 index 00000000000..0afb43a6930 Binary files /dev/null and b/__snapshots__/accordion-item/patternhub/accordion-item-docs-should-match-screenshot.png differ diff --git a/__snapshots__/accordion-item/patternhub/accordion-item-overview-should-match-screenshot.png b/__snapshots__/accordion-item/patternhub/accordion-item-overview-should-match-screenshot.png new file mode 100644 index 00000000000..eb56df57a39 Binary files /dev/null and b/__snapshots__/accordion-item/patternhub/accordion-item-overview-should-match-screenshot.png differ diff --git a/__snapshots__/accordion-item/patternhub/accordion-item-properties-should-match-screenshot.png b/__snapshots__/accordion-item/patternhub/accordion-item-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/accordion-item/patternhub/accordion-item-properties-should-match-screenshot.png differ diff --git a/__snapshots__/accordion/patternhub/accordion-docs-should-match-screenshot.png b/__snapshots__/accordion/patternhub/accordion-docs-should-match-screenshot.png new file mode 100644 index 00000000000..107f3f9c767 Binary files /dev/null and b/__snapshots__/accordion/patternhub/accordion-docs-should-match-screenshot.png differ diff --git a/__snapshots__/accordion/patternhub/accordion-overview-should-match-screenshot.png b/__snapshots__/accordion/patternhub/accordion-overview-should-match-screenshot.png new file mode 100644 index 00000000000..25666e0dfb7 Binary files /dev/null and b/__snapshots__/accordion/patternhub/accordion-overview-should-match-screenshot.png differ diff --git a/__snapshots__/accordion/patternhub/accordion-properties-should-match-screenshot.png b/__snapshots__/accordion/patternhub/accordion-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/accordion/patternhub/accordion-properties-should-match-screenshot.png differ diff --git a/__snapshots__/badge/patternhub/badge-docs-should-match-screenshot.png b/__snapshots__/badge/patternhub/badge-docs-should-match-screenshot.png new file mode 100644 index 00000000000..27aad4689d9 Binary files /dev/null and b/__snapshots__/badge/patternhub/badge-docs-should-match-screenshot.png differ diff --git a/__snapshots__/badge/patternhub/badge-overview-should-match-screenshot.png b/__snapshots__/badge/patternhub/badge-overview-should-match-screenshot.png new file mode 100644 index 00000000000..598b1d27323 Binary files /dev/null and b/__snapshots__/badge/patternhub/badge-overview-should-match-screenshot.png differ diff --git a/__snapshots__/badge/patternhub/badge-properties-should-match-screenshot.png b/__snapshots__/badge/patternhub/badge-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/badge/patternhub/badge-properties-should-match-screenshot.png differ diff --git a/__snapshots__/brand/patternhub/brand-docs-should-match-screenshot.png b/__snapshots__/brand/patternhub/brand-docs-should-match-screenshot.png new file mode 100644 index 00000000000..53da0326c6f Binary files /dev/null and b/__snapshots__/brand/patternhub/brand-docs-should-match-screenshot.png differ diff --git a/__snapshots__/brand/patternhub/brand-overview-should-match-screenshot.png b/__snapshots__/brand/patternhub/brand-overview-should-match-screenshot.png new file mode 100644 index 00000000000..c85abe359f4 Binary files /dev/null and b/__snapshots__/brand/patternhub/brand-overview-should-match-screenshot.png differ diff --git a/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png b/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png new file mode 100644 index 00000000000..2d645193228 Binary files /dev/null and b/__snapshots__/brand/patternhub/brand-properties-should-match-screenshot.png differ diff --git a/__snapshots__/button/patternhub/button-docs-should-match-screenshot.png b/__snapshots__/button/patternhub/button-docs-should-match-screenshot.png new file mode 100644 index 00000000000..79c3fa264c8 Binary files /dev/null and b/__snapshots__/button/patternhub/button-docs-should-match-screenshot.png differ diff --git a/__snapshots__/button/patternhub/button-overview-should-match-screenshot.png b/__snapshots__/button/patternhub/button-overview-should-match-screenshot.png new file mode 100644 index 00000000000..068bf959a2d Binary files /dev/null and b/__snapshots__/button/patternhub/button-overview-should-match-screenshot.png differ diff --git a/__snapshots__/button/patternhub/button-properties-should-match-screenshot.png b/__snapshots__/button/patternhub/button-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/button/patternhub/button-properties-should-match-screenshot.png differ diff --git a/__snapshots__/card/patternhub/card-docs-should-match-screenshot.png b/__snapshots__/card/patternhub/card-docs-should-match-screenshot.png new file mode 100644 index 00000000000..cdae7e8cd30 Binary files /dev/null and b/__snapshots__/card/patternhub/card-docs-should-match-screenshot.png differ diff --git a/__snapshots__/card/patternhub/card-overview-should-match-screenshot.png b/__snapshots__/card/patternhub/card-overview-should-match-screenshot.png new file mode 100644 index 00000000000..a25af5ac4b7 Binary files /dev/null and b/__snapshots__/card/patternhub/card-overview-should-match-screenshot.png differ diff --git a/__snapshots__/card/patternhub/card-properties-should-match-screenshot.png b/__snapshots__/card/patternhub/card-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/card/patternhub/card-properties-should-match-screenshot.png differ diff --git a/__snapshots__/checkbox/patternhub/checkbox-docs-should-match-screenshot.png b/__snapshots__/checkbox/patternhub/checkbox-docs-should-match-screenshot.png new file mode 100644 index 00000000000..b8948f4db78 Binary files /dev/null and b/__snapshots__/checkbox/patternhub/checkbox-docs-should-match-screenshot.png differ diff --git a/__snapshots__/checkbox/patternhub/checkbox-overview-should-match-screenshot.png b/__snapshots__/checkbox/patternhub/checkbox-overview-should-match-screenshot.png new file mode 100644 index 00000000000..83593e1a36a Binary files /dev/null and b/__snapshots__/checkbox/patternhub/checkbox-overview-should-match-screenshot.png differ diff --git a/__snapshots__/checkbox/patternhub/checkbox-properties-should-match-screenshot.png b/__snapshots__/checkbox/patternhub/checkbox-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/checkbox/patternhub/checkbox-properties-should-match-screenshot.png differ diff --git a/__snapshots__/divider/patternhub/divider-docs-should-match-screenshot.png b/__snapshots__/divider/patternhub/divider-docs-should-match-screenshot.png new file mode 100644 index 00000000000..2ac4056b93c Binary files /dev/null and b/__snapshots__/divider/patternhub/divider-docs-should-match-screenshot.png differ diff --git a/__snapshots__/divider/patternhub/divider-overview-should-match-screenshot.png b/__snapshots__/divider/patternhub/divider-overview-should-match-screenshot.png new file mode 100644 index 00000000000..afd840bcfc4 Binary files /dev/null and b/__snapshots__/divider/patternhub/divider-overview-should-match-screenshot.png differ diff --git a/__snapshots__/divider/patternhub/divider-properties-should-match-screenshot.png b/__snapshots__/divider/patternhub/divider-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/divider/patternhub/divider-properties-should-match-screenshot.png differ diff --git a/__snapshots__/drawer/patternhub/drawer-docs-should-match-screenshot.png b/__snapshots__/drawer/patternhub/drawer-docs-should-match-screenshot.png new file mode 100644 index 00000000000..faec5a1a779 Binary files /dev/null and b/__snapshots__/drawer/patternhub/drawer-docs-should-match-screenshot.png differ diff --git a/__snapshots__/drawer/patternhub/drawer-overview-should-match-screenshot.png b/__snapshots__/drawer/patternhub/drawer-overview-should-match-screenshot.png new file mode 100644 index 00000000000..0d3e68bf3c8 Binary files /dev/null and b/__snapshots__/drawer/patternhub/drawer-overview-should-match-screenshot.png differ diff --git a/__snapshots__/drawer/patternhub/drawer-properties-should-match-screenshot.png b/__snapshots__/drawer/patternhub/drawer-properties-should-match-screenshot.png new file mode 100644 index 00000000000..21e88fe6fea Binary files /dev/null and b/__snapshots__/drawer/patternhub/drawer-properties-should-match-screenshot.png differ diff --git a/__snapshots__/header/patternhub/header-docs-should-match-screenshot.png b/__snapshots__/header/patternhub/header-docs-should-match-screenshot.png new file mode 100644 index 00000000000..cfae77494ad Binary files /dev/null and b/__snapshots__/header/patternhub/header-docs-should-match-screenshot.png differ diff --git a/__snapshots__/header/patternhub/header-overview-should-match-screenshot.png b/__snapshots__/header/patternhub/header-overview-should-match-screenshot.png new file mode 100644 index 00000000000..d28b2497541 Binary files /dev/null and b/__snapshots__/header/patternhub/header-overview-should-match-screenshot.png differ diff --git a/__snapshots__/header/patternhub/header-properties-should-match-screenshot.png b/__snapshots__/header/patternhub/header-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/header/patternhub/header-properties-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/patternhub/infotext-docs-should-match-screenshot.png b/__snapshots__/infotext/patternhub/infotext-docs-should-match-screenshot.png new file mode 100644 index 00000000000..3d60f50fab6 Binary files /dev/null and b/__snapshots__/infotext/patternhub/infotext-docs-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/patternhub/infotext-overview-should-match-screenshot.png b/__snapshots__/infotext/patternhub/infotext-overview-should-match-screenshot.png new file mode 100644 index 00000000000..88de5ecb9bb Binary files /dev/null and b/__snapshots__/infotext/patternhub/infotext-overview-should-match-screenshot.png differ diff --git a/__snapshots__/infotext/patternhub/infotext-properties-should-match-screenshot.png b/__snapshots__/infotext/patternhub/infotext-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/infotext/patternhub/infotext-properties-should-match-screenshot.png differ diff --git a/__snapshots__/input/patternhub/input-docs-should-match-screenshot.png b/__snapshots__/input/patternhub/input-docs-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/input/patternhub/input-docs-should-match-screenshot.png differ diff --git a/__snapshots__/input/patternhub/input-overview-should-match-screenshot.png b/__snapshots__/input/patternhub/input-overview-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/input/patternhub/input-overview-should-match-screenshot.png differ diff --git a/__snapshots__/input/patternhub/input-properties-should-match-screenshot.png b/__snapshots__/input/patternhub/input-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/input/patternhub/input-properties-should-match-screenshot.png differ diff --git a/__snapshots__/link/patternhub/link-docs-should-match-screenshot.png b/__snapshots__/link/patternhub/link-docs-should-match-screenshot.png new file mode 100644 index 00000000000..89e7daaae6d Binary files /dev/null and b/__snapshots__/link/patternhub/link-docs-should-match-screenshot.png differ diff --git a/__snapshots__/link/patternhub/link-overview-should-match-screenshot.png b/__snapshots__/link/patternhub/link-overview-should-match-screenshot.png new file mode 100644 index 00000000000..7f13b02fda1 Binary files /dev/null and b/__snapshots__/link/patternhub/link-overview-should-match-screenshot.png differ diff --git a/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png b/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png new file mode 100644 index 00000000000..5e34ec7e1d1 Binary files /dev/null and b/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/patternhub/navigation-item-docs-should-match-screenshot.png b/__snapshots__/navigation-item/patternhub/navigation-item-docs-should-match-screenshot.png new file mode 100644 index 00000000000..6014229007d Binary files /dev/null and b/__snapshots__/navigation-item/patternhub/navigation-item-docs-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/patternhub/navigation-item-overview-should-match-screenshot.png b/__snapshots__/navigation-item/patternhub/navigation-item-overview-should-match-screenshot.png new file mode 100644 index 00000000000..9dc3bc82cf6 Binary files /dev/null and b/__snapshots__/navigation-item/patternhub/navigation-item-overview-should-match-screenshot.png differ diff --git a/__snapshots__/navigation-item/patternhub/navigation-item-properties-should-match-screenshot.png b/__snapshots__/navigation-item/patternhub/navigation-item-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/navigation-item/patternhub/navigation-item-properties-should-match-screenshot.png differ diff --git a/__snapshots__/navigation/patternhub/navigation-docs-should-match-screenshot.png b/__snapshots__/navigation/patternhub/navigation-docs-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/navigation/patternhub/navigation-docs-should-match-screenshot.png differ diff --git a/__snapshots__/navigation/patternhub/navigation-overview-should-match-screenshot.png b/__snapshots__/navigation/patternhub/navigation-overview-should-match-screenshot.png new file mode 100644 index 00000000000..4b7e29c47ea Binary files /dev/null and b/__snapshots__/navigation/patternhub/navigation-overview-should-match-screenshot.png differ diff --git a/__snapshots__/navigation/patternhub/navigation-properties-should-match-screenshot.png b/__snapshots__/navigation/patternhub/navigation-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/navigation/patternhub/navigation-properties-should-match-screenshot.png differ diff --git a/__snapshots__/notification/patternhub/notification-docs-should-match-screenshot.png b/__snapshots__/notification/patternhub/notification-docs-should-match-screenshot.png new file mode 100644 index 00000000000..e613da2a7b8 Binary files /dev/null and b/__snapshots__/notification/patternhub/notification-docs-should-match-screenshot.png differ diff --git a/__snapshots__/notification/patternhub/notification-overview-should-match-screenshot.png b/__snapshots__/notification/patternhub/notification-overview-should-match-screenshot.png new file mode 100644 index 00000000000..41bb4279adb Binary files /dev/null and b/__snapshots__/notification/patternhub/notification-overview-should-match-screenshot.png differ diff --git a/__snapshots__/notification/patternhub/notification-properties-should-match-screenshot.png b/__snapshots__/notification/patternhub/notification-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/notification/patternhub/notification-properties-should-match-screenshot.png differ diff --git a/__snapshots__/popover/patternhub/popover-docs-should-match-screenshot.png b/__snapshots__/popover/patternhub/popover-docs-should-match-screenshot.png new file mode 100644 index 00000000000..c59457cffc6 Binary files /dev/null and b/__snapshots__/popover/patternhub/popover-docs-should-match-screenshot.png differ diff --git a/__snapshots__/popover/patternhub/popover-overview-should-match-screenshot.png b/__snapshots__/popover/patternhub/popover-overview-should-match-screenshot.png new file mode 100644 index 00000000000..068bf959a2d Binary files /dev/null and b/__snapshots__/popover/patternhub/popover-overview-should-match-screenshot.png differ diff --git a/__snapshots__/popover/patternhub/popover-properties-should-match-screenshot.png b/__snapshots__/popover/patternhub/popover-properties-should-match-screenshot.png new file mode 100644 index 00000000000..79c3fa264c8 Binary files /dev/null and b/__snapshots__/popover/patternhub/popover-properties-should-match-screenshot.png differ diff --git a/__snapshots__/radio/patternhub/radio-docs-should-match-screenshot.png b/__snapshots__/radio/patternhub/radio-docs-should-match-screenshot.png new file mode 100644 index 00000000000..41f2f50ee8c Binary files /dev/null and b/__snapshots__/radio/patternhub/radio-docs-should-match-screenshot.png differ diff --git a/__snapshots__/radio/patternhub/radio-overview-should-match-screenshot.png b/__snapshots__/radio/patternhub/radio-overview-should-match-screenshot.png new file mode 100644 index 00000000000..de6ae993868 Binary files /dev/null and b/__snapshots__/radio/patternhub/radio-overview-should-match-screenshot.png differ diff --git a/__snapshots__/radio/patternhub/radio-properties-should-match-screenshot.png b/__snapshots__/radio/patternhub/radio-properties-should-match-screenshot.png new file mode 100644 index 00000000000..79c3fa264c8 Binary files /dev/null and b/__snapshots__/radio/patternhub/radio-properties-should-match-screenshot.png differ diff --git a/__snapshots__/section/patternhub/section-docs-should-match-screenshot.png b/__snapshots__/section/patternhub/section-docs-should-match-screenshot.png new file mode 100644 index 00000000000..629a976b4ca Binary files /dev/null and b/__snapshots__/section/patternhub/section-docs-should-match-screenshot.png differ diff --git a/__snapshots__/section/patternhub/section-overview-should-match-screenshot.png b/__snapshots__/section/patternhub/section-overview-should-match-screenshot.png new file mode 100644 index 00000000000..bfb3a92c48b Binary files /dev/null and b/__snapshots__/section/patternhub/section-overview-should-match-screenshot.png differ diff --git a/__snapshots__/section/patternhub/section-properties-should-match-screenshot.png b/__snapshots__/section/patternhub/section-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/section/patternhub/section-properties-should-match-screenshot.png differ diff --git a/__snapshots__/select/patternhub/select-docs-should-match-screenshot.png b/__snapshots__/select/patternhub/select-docs-should-match-screenshot.png new file mode 100644 index 00000000000..8c484817a26 Binary files /dev/null and b/__snapshots__/select/patternhub/select-docs-should-match-screenshot.png differ diff --git a/__snapshots__/select/patternhub/select-overview-should-match-screenshot.png b/__snapshots__/select/patternhub/select-overview-should-match-screenshot.png new file mode 100644 index 00000000000..d11af8e6ad9 Binary files /dev/null and b/__snapshots__/select/patternhub/select-overview-should-match-screenshot.png differ diff --git a/__snapshots__/select/patternhub/select-properties-should-match-screenshot.png b/__snapshots__/select/patternhub/select-properties-should-match-screenshot.png new file mode 100644 index 00000000000..79c3fa264c8 Binary files /dev/null and b/__snapshots__/select/patternhub/select-properties-should-match-screenshot.png differ diff --git a/__snapshots__/switch/patternhub/switch-docs-should-match-screenshot.png b/__snapshots__/switch/patternhub/switch-docs-should-match-screenshot.png new file mode 100644 index 00000000000..eac2ebb04ac Binary files /dev/null and b/__snapshots__/switch/patternhub/switch-docs-should-match-screenshot.png differ diff --git a/__snapshots__/switch/patternhub/switch-overview-should-match-screenshot.png b/__snapshots__/switch/patternhub/switch-overview-should-match-screenshot.png new file mode 100644 index 00000000000..84d462e07c5 Binary files /dev/null and b/__snapshots__/switch/patternhub/switch-overview-should-match-screenshot.png differ diff --git a/__snapshots__/switch/patternhub/switch-properties-should-match-screenshot.png b/__snapshots__/switch/patternhub/switch-properties-should-match-screenshot.png new file mode 100644 index 00000000000..83ec5ce3ee2 Binary files /dev/null and b/__snapshots__/switch/patternhub/switch-properties-should-match-screenshot.png differ diff --git a/__snapshots__/tab-item/patternhub/tab-item-docs-should-match-screenshot.png b/__snapshots__/tab-item/patternhub/tab-item-docs-should-match-screenshot.png new file mode 100644 index 00000000000..85a6e7ab89f Binary files /dev/null and b/__snapshots__/tab-item/patternhub/tab-item-docs-should-match-screenshot.png differ diff --git a/__snapshots__/tab-item/patternhub/tab-item-overview-should-match-screenshot.png b/__snapshots__/tab-item/patternhub/tab-item-overview-should-match-screenshot.png new file mode 100644 index 00000000000..b8bd57fc7b9 Binary files /dev/null and b/__snapshots__/tab-item/patternhub/tab-item-overview-should-match-screenshot.png differ diff --git a/__snapshots__/tab-item/patternhub/tab-item-properties-should-match-screenshot.png b/__snapshots__/tab-item/patternhub/tab-item-properties-should-match-screenshot.png new file mode 100644 index 00000000000..79c3fa264c8 Binary files /dev/null and b/__snapshots__/tab-item/patternhub/tab-item-properties-should-match-screenshot.png differ diff --git a/__snapshots__/tabs/patternhub/tabs-docs-should-match-screenshot.png b/__snapshots__/tabs/patternhub/tabs-docs-should-match-screenshot.png new file mode 100644 index 00000000000..85a6e7ab89f Binary files /dev/null and b/__snapshots__/tabs/patternhub/tabs-docs-should-match-screenshot.png differ diff --git a/__snapshots__/tabs/patternhub/tabs-overview-should-match-screenshot.png b/__snapshots__/tabs/patternhub/tabs-overview-should-match-screenshot.png new file mode 100644 index 00000000000..a380ddc829d Binary files /dev/null and b/__snapshots__/tabs/patternhub/tabs-overview-should-match-screenshot.png differ diff --git a/__snapshots__/tabs/patternhub/tabs-properties-should-match-screenshot.png b/__snapshots__/tabs/patternhub/tabs-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/tabs/patternhub/tabs-properties-should-match-screenshot.png differ diff --git a/__snapshots__/tag/patternhub/tag-docs-should-match-screenshot.png b/__snapshots__/tag/patternhub/tag-docs-should-match-screenshot.png new file mode 100644 index 00000000000..e80a12f7684 Binary files /dev/null and b/__snapshots__/tag/patternhub/tag-docs-should-match-screenshot.png differ diff --git a/__snapshots__/tag/patternhub/tag-overview-should-match-screenshot.png b/__snapshots__/tag/patternhub/tag-overview-should-match-screenshot.png new file mode 100644 index 00000000000..761cbd1629b Binary files /dev/null and b/__snapshots__/tag/patternhub/tag-overview-should-match-screenshot.png differ diff --git a/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png b/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/patternhub/textarea-docs-should-match-screenshot.png b/__snapshots__/textarea/patternhub/textarea-docs-should-match-screenshot.png new file mode 100644 index 00000000000..2fee0812a69 Binary files /dev/null and b/__snapshots__/textarea/patternhub/textarea-docs-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/patternhub/textarea-overview-should-match-screenshot.png b/__snapshots__/textarea/patternhub/textarea-overview-should-match-screenshot.png new file mode 100644 index 00000000000..26a987429a9 Binary files /dev/null and b/__snapshots__/textarea/patternhub/textarea-overview-should-match-screenshot.png differ diff --git a/__snapshots__/textarea/patternhub/textarea-properties-should-match-screenshot.png b/__snapshots__/textarea/patternhub/textarea-properties-should-match-screenshot.png new file mode 100644 index 00000000000..79c3fa264c8 Binary files /dev/null and b/__snapshots__/textarea/patternhub/textarea-properties-should-match-screenshot.png differ diff --git a/__snapshots__/tooltip/patternhub/tooltip-docs-should-match-screenshot.png b/__snapshots__/tooltip/patternhub/tooltip-docs-should-match-screenshot.png new file mode 100644 index 00000000000..47e3678a055 Binary files /dev/null and b/__snapshots__/tooltip/patternhub/tooltip-docs-should-match-screenshot.png differ diff --git a/__snapshots__/tooltip/patternhub/tooltip-overview-should-match-screenshot.png b/__snapshots__/tooltip/patternhub/tooltip-overview-should-match-screenshot.png new file mode 100644 index 00000000000..068bf959a2d Binary files /dev/null and b/__snapshots__/tooltip/patternhub/tooltip-overview-should-match-screenshot.png differ diff --git a/__snapshots__/tooltip/patternhub/tooltip-properties-should-match-screenshot.png b/__snapshots__/tooltip/patternhub/tooltip-properties-should-match-screenshot.png new file mode 100644 index 00000000000..82c78d0c7df Binary files /dev/null and b/__snapshots__/tooltip/patternhub/tooltip-properties-should-match-screenshot.png differ diff --git a/e2e/package.json b/e2e/package.json index f7cf135ea84..2a76d2bcea5 100644 --- a/e2e/package.json +++ b/e2e/package.json @@ -23,7 +23,7 @@ "test:vue-showcase": "npm run test:e2e --workspace=vue-showcase" }, "devDependencies": { - "@playwright/test": "1.44.1", + "@playwright/test": "1.45.0", "cpr": "3.0.1", "cross-env": "^7.0.3", "dotenv": "^16.0.3", diff --git a/output/react/package.json b/output/react/package.json index 2b89c378c12..0c44e348bcf 100644 --- a/output/react/package.json +++ b/output/react/package.json @@ -25,7 +25,7 @@ "tsc": "tsc -p . --sourceMap false" }, "devDependencies": { - "@playwright/experimental-ct-react": "1.44.1", + "@playwright/experimental-ct-react": "1.45.0", "@types/react": "^18.3.3", "react": "^18.3.1", "react-dom": "^18.3.1" diff --git a/output/vue/package.json b/output/vue/package.json index 0546de013e9..ffb5065a076 100644 --- a/output/vue/package.json +++ b/output/vue/package.json @@ -30,7 +30,7 @@ "build": "npm-run-all build:*", "build:01_vite": "vite build", "build:02_types": "vue-tsc --declaration --emitDeclarationOnly", - "build:03_ts_workaround": "node scripts/fix-any-types.js", + "build:03_ts_workaround": "tsx scripts/fix-any-types.ts", "mv:dist": "cpr dist ../../build-outputs/vue/dist -o", "mv:package.json": "cpr package.json ../../build-outputs/vue/package.json -o", "mv:readme": "cpr README.md ../../build-outputs/vue/README.md -o", @@ -38,14 +38,16 @@ "test:components": "playwright test -c playwright.config.ts" }, "dependencies": { - "vue": "^3.4.30" + "vue": "^3.4.31" }, "devDependencies": { - "@playwright/experimental-ct-vue": "1.44.1", + "@playwright/experimental-ct-vue": "1.45.0", "@vitejs/plugin-vue": "^5.0.5", + "replace-in-file": "^8.0.1", + "tsx": "^4.16.0", "typescript": "^5.4.5", - "vite": "^5.3.1", - "vue-tsc": "^2.0.22" + "vite": "^5.3.2", + "vue-tsc": "^2.0.24" }, "publishConfig": { "registry": "https://registry.npmjs.org/", diff --git a/output/vue/scripts/fix-any-types.js b/output/vue/scripts/fix-any-types.ts similarity index 69% rename from output/vue/scripts/fix-any-types.js rename to output/vue/scripts/fix-any-types.ts index 2fe922c7af6..c2081edf44c 100644 --- a/output/vue/scripts/fix-any-types.js +++ b/output/vue/scripts/fix-any-types.ts @@ -1,16 +1,19 @@ import { readdirSync } from 'node:fs'; -import Replace from 'replace-in-file'; -import { transformToUpperComponentName } from '@db-ui/components/scripts/utils/index.js'; +import { replaceInFileSync } from 'replace-in-file'; const distDir = './dist/components'; +const transformToUpperComponentName = (componentName: string) => + componentName + .split('-') + .map((part) => `${part[0].toUpperCase()}${part.slice(1)}`) + .join(''); + /** * Props are generated like this: `readonly id?: any;` * We replace it with the correct type like DBMyComponent["id"] - * @param input {string} - * @param component {string} */ -const replaceAnyTypes = (input, component) => { +const replaceAnyTypes = (input: string, component: string) => { const propModel = `DB${transformToUpperComponentName(component)}Props`; let fileContent = input; @@ -30,12 +33,12 @@ const replaceAnyTypes = (input, component) => { }; const fixAnyTypes = () => { - const components = readdirSync(distDir); + const components: string[] = readdirSync(distDir); for (const component of components) { - Replace.sync({ + replaceInFileSync({ files: `${distDir}/${component}/${component}.vue.d.ts`, - processor(input) { + processor(input: string) { return replaceAnyTypes(input, component); } }); diff --git a/package-lock.json b/package-lock.json index 33d2924419f..d2b693d180e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,8 @@ "@axe-core/playwright": "^4.9.1", "@commitlint/cli": "19.3.0", "@commitlint/config-conventional": "19.2.2", - "@playwright/test": "1.44.1", + "@playwright/test": "1.45.0", + "@types/fs-extra": "^11.0.4", "adm-zip": "0.5.14", "commander": "^12.1.0", "cpr": "3.0.1", @@ -31,23 +32,24 @@ "glob": "^10.4.2", "http-server": "14.1.1", "husky": "9.0.11", - "inquirer": "^9.2.23", + "inquirer": "^9.3.2", "jscpd": "^4.0.4", "lint-staged": "^15.2.7", "markdownlint-cli": "^0.41.0", "npm-run-all": "4.1.5", - "postcss": "^8.4.38", + "postcss": "^8.4.39", "postcss-cli": "^11.0.0", "prettier": "^3.3.2", "prettier-plugin-pkg": "0.18.1", "prettier-plugin-sh": "^0.14.0", - "replace-in-file": "^7.2.0", + "replace-in-file": "^8.0.1", "rimraf": "5.0.7", "stylelint": "^14.16.1", "stylelint-config-prettier": "9.0.5", "stylelint-config-sass-guidelines": "9.0.1", "stylelint-use-logical": "^2.1.2", "tslib": "^2.6.3", + "tsx": "^4.16.0", "typescript": "^5.4.5", "validate-branch-name": "^1.3.0", "xo": "^0.58.0" @@ -67,7 +69,7 @@ "output/*" ], "devDependencies": { - "@playwright/test": "1.44.1", + "@playwright/test": "1.45.0", "cpr": "3.0.1", "cross-env": "^7.0.3", "dotenv": "^16.0.3", @@ -4022,9 +4024,9 @@ } }, "node_modules/@builder.io/mitosis": { - "version": "0.3.7", - "resolved": "https://registry.npmjs.org/@builder.io/mitosis/-/mitosis-0.3.7.tgz", - "integrity": "sha512-VwHfopODGPSoe1GW3yCqpxUMNzZPl1Qk4AorXPmBpbtI49/UJ7tRxxMOUy8RbjxWUF8NDTEA0kAUzZwuNzxTig==", + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/@builder.io/mitosis/-/mitosis-0.3.8.tgz", + "integrity": "sha512-QRmA7qoqhIgwTy0LaVvA9FigzHKWivek/z7Tah0sQjdrLVA/u6W1m/Cyxe5JXVCBfdGz8lYgnJ7FVBA42cyUpg==", "dev": true, "dependencies": { "@angular/compiler": "^11.2.11", @@ -4054,12 +4056,12 @@ } }, "node_modules/@builder.io/mitosis-cli": { - "version": "0.3.7", - "resolved": "https://registry.npmjs.org/@builder.io/mitosis-cli/-/mitosis-cli-0.3.7.tgz", - "integrity": "sha512-X/qgE+96ooz3n0OiwbzqtIl0Gqtss9O9U2i6e3cqnc3kHRFYVDzEyQ22xSYRM2E2Yjrml0lZI2vNRReDdGA+Qg==", + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/@builder.io/mitosis-cli/-/mitosis-cli-0.3.8.tgz", + "integrity": "sha512-kAuEP7EyJ6vL9+jKSLxTqkDqWogMNjNJ/fzWO7h0yY8b9I/2XzONznh72JVecSBtF+f/LPkamzSlG7Qn1aFscw==", "dev": true, "dependencies": { - "@builder.io/mitosis": "0.3.7", + "@builder.io/mitosis": "0.3.8", "debug": "^4.3.4", "dedent": "^0.7.0", "esbuild": "^0.12.16", @@ -9499,49 +9501,49 @@ } }, "node_modules/@playwright/experimental-ct-core": { - "version": "1.44.1", - "resolved": "https://registry.npmjs.org/@playwright/experimental-ct-core/-/experimental-ct-core-1.44.1.tgz", - "integrity": "sha512-IqeXzfmpHH8yHA0fGQ//l/tDJHzUmg2dQj3t28E1tCshvnYc9fVr53Na9+/B8ME//vw0UFpv+CSKcOTHwWrhQg==", + "version": "1.45.0", + "resolved": "https://registry.npmjs.org/@playwright/experimental-ct-core/-/experimental-ct-core-1.45.0.tgz", + "integrity": "sha512-XxAZW3TnkkRlqRRiAnN/q8wzuspqDA2o8912TQkhbH2BKD3Ko4RLMVy0J7QJ+quG1fCp1/rlbg96/fB15wOemg==", "dev": true, "dependencies": { - "playwright": "1.44.1", - "playwright-core": "1.44.1", + "playwright": "1.45.0", + "playwright-core": "1.45.0", "vite": "^5.2.8" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/@playwright/experimental-ct-react": { - "version": "1.44.1", - "resolved": "https://registry.npmjs.org/@playwright/experimental-ct-react/-/experimental-ct-react-1.44.1.tgz", - "integrity": "sha512-qRhv2zmZVwtzAYWwQO4j+It0S5zLUuZg/7Ke61ymCC5jGqlwf2kYqogFxBiDdhAO1sz/dN0UtdU+6df0HK5yzw==", + "version": "1.45.0", + "resolved": "https://registry.npmjs.org/@playwright/experimental-ct-react/-/experimental-ct-react-1.45.0.tgz", + "integrity": "sha512-GoT7eZMR5wLPFjGwQbGywiy2Z+9jwx5F+GJAZE1xbqMJPzSB5bv8zd5g09mWN4aKOHpc/kzkCBv0bxzW/es51A==", "dev": true, "dependencies": { - "@playwright/experimental-ct-core": "1.44.1", + "@playwright/experimental-ct-core": "1.45.0", "@vitejs/plugin-react": "^4.2.1" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/@playwright/experimental-ct-vue": { - "version": "1.44.1", - "resolved": "https://registry.npmjs.org/@playwright/experimental-ct-vue/-/experimental-ct-vue-1.44.1.tgz", - "integrity": "sha512-R4WrgLcY27L+G3241WPmZlOrbNSiJ+MigUyqvaJva6a/0kLe1VL6c3a5log7mMD7AX158EeZXD28bfkjLdu/1g==", + "version": "1.45.0", + "resolved": "https://registry.npmjs.org/@playwright/experimental-ct-vue/-/experimental-ct-vue-1.45.0.tgz", + "integrity": "sha512-hZI/T2+wf5gPD+htm1Y9/Hv/ZLCw5gzggcLDL7vzjStzD7NooCthSakReFLIP15EYkwP9Y7GmR2G6MoE6y/v4g==", "dev": true, "dependencies": { - "@playwright/experimental-ct-core": "1.44.1", + "@playwright/experimental-ct-core": "1.45.0", "@vitejs/plugin-vue": "^4.2.1" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/@playwright/experimental-ct-vue/node_modules/@vitejs/plugin-vue": { @@ -9558,18 +9560,18 @@ } }, "node_modules/@playwright/test": { - "version": "1.44.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz", - "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==", + "version": "1.45.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.0.tgz", + "integrity": "sha512-TVYsfMlGAaxeUllNkywbwek67Ncf8FRGn8ZlRdO291OL3NjG9oMbfVhyP82HQF0CZLMrYsvesqoUekxdWuF9Qw==", "devOptional": true, "dependencies": { - "playwright": "1.44.1" + "playwright": "1.45.0" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/@polka/url": { @@ -10744,6 +10746,16 @@ "@types/send": "*" } }, + "node_modules/@types/fs-extra": { + "version": "11.0.4", + "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-11.0.4.tgz", + "integrity": "sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==", + "dev": true, + "dependencies": { + "@types/jsonfile": "*", + "@types/node": "*" + } + }, "node_modules/@types/hast": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", @@ -10778,6 +10790,15 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "node_modules/@types/jsonfile": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/@types/jsonfile/-/jsonfile-6.1.4.tgz", + "integrity": "sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==", + "dev": true, + "dependencies": { + "@types/node": "*" + } + }, "node_modules/@types/mdast": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz", @@ -10810,9 +10831,9 @@ "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==" }, "node_modules/@types/node": { - "version": "20.14.8", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.8.tgz", - "integrity": "sha512-DO+2/jZinXfROG7j7WKFn/3C6nFwxy2lLpgLjEXJz+0XKphZlTLJ14mo8Vfg8X5BWN6XjyESXq+LcYdT7tR3bA==", + "version": "20.14.9", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.9.tgz", + "integrity": "sha512-06OCtnTXtWOZBJlRApleWndH4JsRVs1pDCc8dLSQp+7PpUpX3ePdHyeNSFTeSe7FtKyQkrlPvHwJOW3SLd8Oyg==", "dependencies": { "undici-types": "~5.26.4" } @@ -11491,27 +11512,27 @@ } }, "node_modules/@volar/language-core": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.3.tgz", - "integrity": "sha512-Blu4NQaRszEsgK/QvWFRSQPRAhPDbYef+peFV9Gb86swxRCs01q7h673/HYstaPsTbjh/F5mXjozoOFxQ8tLYw==", + "version": "2.4.0-alpha.5", + "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.5.tgz", + "integrity": "sha512-CX+0vrNoCcO3tGZYIn7kNHug/u6+EImfbZe0tI6x/lCZc0MBJ7t9f6AKJT+mHJZ3ePhva6NVNv8mY1tNEURd5A==", "devOptional": true, "dependencies": { - "@volar/source-map": "2.3.3" + "@volar/source-map": "2.4.0-alpha.5" } }, "node_modules/@volar/source-map": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.3.tgz", - "integrity": "sha512-eFRHA13hxiGPt+Xa0EX3yNd50ozctnW5KzQj/IllKmSK/KuBEkSAsIhBdOxCpv1YhV4GmI3iKG9peOs6k9LtnA==", + "version": "2.4.0-alpha.5", + "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.5.tgz", + "integrity": "sha512-5OxMPGqbxaMuFXfj10k3xWwmJ2nb0b20kNaONAKxwUQxGY6nh6skX5AAFhIAbC8woplsVJpR0tAhgQR4S96VYQ==", "devOptional": true }, "node_modules/@volar/typescript": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.3.tgz", - "integrity": "sha512-cwGMSwqIR54Hngu5dYmUJPHFpo6KGj7BlpwT2G9WTKwEjFlH4g/0IPeq064428DAi/VMP42vqAQSBiEHi5Gc4A==", + "version": "2.4.0-alpha.5", + "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.5.tgz", + "integrity": "sha512-D9nzGP09afyLlsXC5rzVeLzEaMLOmW1GGPyOiuXRRGTLshX+/cp+MNsUbwUd3pih0OhRmpUFl4VHpUGA2M4iBw==", "devOptional": true, "dependencies": { - "@volar/language-core": "2.3.3", + "@volar/language-core": "2.4.0-alpha.5", "path-browserify": "^1.0.1", "vscode-uri": "^3.0.8" } @@ -11620,12 +11641,12 @@ } }, "node_modules/@vue/compiler-core": { - "version": "3.4.30", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.30.tgz", - "integrity": "sha512-ZL8y4Xxdh8O6PSwfdZ1IpQ24PjTAieOz3jXb/MDTfDtANcKBMxg1KLm6OX2jofsaQGYfIVzd3BAG22i56/cF1w==", + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.31.tgz", + "integrity": "sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==", "dependencies": { "@babel/parser": "^7.24.7", - "@vue/shared": "3.4.30", + "@vue/shared": "3.4.31", "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.0" @@ -11637,24 +11658,24 @@ "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" }, "node_modules/@vue/compiler-dom": { - "version": "3.4.30", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.30.tgz", - "integrity": "sha512-+16Sd8lYr5j/owCbr9dowcNfrHd+pz+w2/b5Lt26Oz/kB90C9yNbxQ3bYOvt7rI2bxk0nqda39hVcwDFw85c2Q==", + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.31.tgz", + "integrity": "sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==", "dependencies": { - "@vue/compiler-core": "3.4.30", - "@vue/shared": "3.4.30" + "@vue/compiler-core": "3.4.31", + "@vue/shared": "3.4.31" } }, "node_modules/@vue/compiler-sfc": { - "version": "3.4.30", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.30.tgz", - "integrity": "sha512-8vElKklHn/UY8+FgUFlQrYAPbtiSB2zcgeRKW7HkpSRn/JjMRmZvuOtwDx036D1aqKNSTtXkWRfqx53Qb+HmMg==", + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.31.tgz", + "integrity": "sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==", "dependencies": { "@babel/parser": "^7.24.7", - "@vue/compiler-core": "3.4.30", - "@vue/compiler-dom": "3.4.30", - "@vue/compiler-ssr": "3.4.30", - "@vue/shared": "3.4.30", + "@vue/compiler-core": "3.4.31", + "@vue/compiler-dom": "3.4.31", + "@vue/compiler-ssr": "3.4.31", + "@vue/shared": "3.4.31", "estree-walker": "^2.0.2", "magic-string": "^0.30.10", "postcss": "^8.4.38", @@ -11675,12 +11696,12 @@ } }, "node_modules/@vue/compiler-ssr": { - "version": "3.4.30", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.30.tgz", - "integrity": "sha512-ZJ56YZGXJDd6jky4mmM0rNaNP6kIbQu9LTKZDhcpddGe/3QIalB1WHHmZ6iZfFNyj5mSypTa4+qDJa5VIuxMSg==", + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.31.tgz", + "integrity": "sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==", "dependencies": { - "@vue/compiler-dom": "3.4.30", - "@vue/shared": "3.4.30" + "@vue/compiler-dom": "3.4.31", + "@vue/shared": "3.4.31" } }, "node_modules/@vue/devtools-api": { @@ -11724,12 +11745,12 @@ } }, "node_modules/@vue/language-core": { - "version": "2.0.22", - "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.22.tgz", - "integrity": "sha512-dNTAAtEOuMiz7N1s5tKpypnVVCtawxVSF5BukD0ELcYSw+DSbrSlYYSw8GuwvurodCeYFSHsmslE+c2sYDNoiA==", + "version": "2.0.24", + "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.24.tgz", + "integrity": "sha512-997YD6Lq/66LXr3ZOLNxDCmyn13z9NP8LU1UZn9hGCDWhzlbXAIP0hOgL3w3x4RKEaWTaaRtsHP9DzHvmduruQ==", "devOptional": true, "dependencies": { - "@volar/language-core": "~2.3.1", + "@volar/language-core": "~2.4.0-alpha.2", "@vue/compiler-dom": "^3.4.0", "@vue/shared": "^3.4.0", "computeds": "^0.0.1", @@ -11757,9 +11778,9 @@ } }, "node_modules/@vue/language-core/node_modules/minimatch": { - "version": "9.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz", - "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==", + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", + "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", "devOptional": true, "dependencies": { "brace-expansion": "^2.0.1" @@ -11772,49 +11793,49 @@ } }, "node_modules/@vue/reactivity": { - "version": "3.4.30", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.30.tgz", - "integrity": "sha512-bVJurnCe3LS0JII8PPoAA63Zd2MBzcKrEzwdQl92eHCcxtIbxD2fhNwJpa+KkM3Y/A4T5FUnmdhgKwOf6BfbcA==", + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.31.tgz", + "integrity": "sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==", "dependencies": { - "@vue/shared": "3.4.30" + "@vue/shared": "3.4.31" } }, "node_modules/@vue/runtime-core": { - "version": "3.4.30", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.30.tgz", - "integrity": "sha512-qaFEbnNpGz+tlnkaualomogzN8vBLkgzK55uuWjYXbYn039eOBZrWxyXWq/7qh9Bz2FPifZqGjVDl/FXiq9L2g==", + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.31.tgz", + "integrity": "sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==", "dependencies": { - "@vue/reactivity": "3.4.30", - "@vue/shared": "3.4.30" + "@vue/reactivity": "3.4.31", + "@vue/shared": "3.4.31" } }, "node_modules/@vue/runtime-dom": { - "version": "3.4.30", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.30.tgz", - "integrity": "sha512-tV6B4YiZRj5QsaJgw2THCy5C1H+2UeywO9tqgWEc21tn85qHEERndHN/CxlyXvSBFrpmlexCIdnqPuR9RM9thw==", + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.31.tgz", + "integrity": "sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==", "dependencies": { - "@vue/reactivity": "3.4.30", - "@vue/runtime-core": "3.4.30", - "@vue/shared": "3.4.30", + "@vue/reactivity": "3.4.31", + "@vue/runtime-core": "3.4.31", + "@vue/shared": "3.4.31", "csstype": "^3.1.3" } }, "node_modules/@vue/server-renderer": { - "version": "3.4.30", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.30.tgz", - "integrity": "sha512-TBD3eqR1DeDc0cMrXS/vEs/PWzq1uXxnvjoqQuDGFIEHFIwuDTX/KWAQKIBjyMWLFHEeTDGYVsYci85z2UbTDg==", + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.31.tgz", + "integrity": "sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==", "dependencies": { - "@vue/compiler-ssr": "3.4.30", - "@vue/shared": "3.4.30" + "@vue/compiler-ssr": "3.4.31", + "@vue/shared": "3.4.31" }, "peerDependencies": { - "vue": "3.4.30" + "vue": "3.4.31" } }, "node_modules/@vue/shared": { - "version": "3.4.30", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.30.tgz", - "integrity": "sha512-CLg+f8RQCHQnKvuHY9adMsMaQOcqclh6Z5V9TaoMgy0ut0tz848joZ7/CYFFyF/yZ5i2yaw7Fn498C+CNZVHIg==" + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz", + "integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==" }, "node_modules/@webassemblyjs/ast": { "version": "1.12.1", @@ -20190,26 +20211,23 @@ "dev": true }, "node_modules/inquirer": { - "version": "9.2.23", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.2.23.tgz", - "integrity": "sha512-kod5s+FBPIDM2xiy9fu+6wdU/SkK5le5GS9lh4FEBjBHqiMgD9lLFbCbuqFNAjNL2ZOy9Wd9F694IOzN9pZHBA==", + "version": "9.3.2", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.3.2.tgz", + "integrity": "sha512-+ynEbhWKhyomnaX0n2aLIMSkgSlGB5RrWbNXnEqj6mdaIydu6y40MdBjL38SAB0JcdmOaIaMua1azdjLEr3sdw==", "dev": true, "dependencies": { "@inquirer/figures": "^1.0.3", - "@ljharb/through": "^2.3.13", "ansi-escapes": "^4.3.2", - "chalk": "^5.3.0", - "cli-cursor": "^3.1.0", "cli-width": "^4.1.0", "external-editor": "^3.1.0", - "lodash": "^4.17.21", "mute-stream": "1.0.0", "ora": "^5.4.1", "run-async": "^3.0.0", "rxjs": "^7.8.1", "string-width": "^4.2.3", "strip-ansi": "^6.0.1", - "wrap-ansi": "^6.2.0" + "wrap-ansi": "^6.2.0", + "yoctocolors-cjs": "^2.1.1" }, "engines": { "node": ">=18" @@ -27892,33 +27910,33 @@ } }, "node_modules/playwright": { - "version": "1.44.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz", - "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==", + "version": "1.45.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.0.tgz", + "integrity": "sha512-4z3ac3plDfYzGB6r0Q3LF8POPR20Z8D0aXcxbJvmfMgSSq1hkcgvFRXJk9rUq5H/MJ0Ktal869hhOdI/zUTeLA==", "devOptional": true, "dependencies": { - "playwright-core": "1.44.1" + "playwright-core": "1.45.0" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" }, "optionalDependencies": { "fsevents": "2.3.2" } }, "node_modules/playwright-core": { - "version": "1.44.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz", - "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==", + "version": "1.45.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.0.tgz", + "integrity": "sha512-lZmHlFQ0VYSpAs43dRq1/nJ9G/6SiTI7VPqidld9TDefL9tX87bTKExWZZUF5PeRyqtXqd8fQi2qmfIedkwsNQ==", "devOptional": true, "bin": { "playwright-core": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/plur": { @@ -27978,9 +27996,9 @@ } }, "node_modules/postcss": { - "version": "8.4.38", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", - "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "version": "8.4.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", + "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", "funding": [ { "type": "opencollective", @@ -27997,7 +28015,7 @@ ], "dependencies": { "nanoid": "^3.3.7", - "picocolors": "^1.0.0", + "picocolors": "^1.0.1", "source-map-js": "^1.2.0" }, "engines": { @@ -30083,109 +30101,20 @@ } }, "node_modules/replace-in-file": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-7.2.0.tgz", - "integrity": "sha512-CiLXVop3o8/h2Kd1PwKPPimmS9wUV0Ki6Fl8+1ITD35nB3Gl/PrW5IONpTE0AXk0z4v8WYcpEpdeZqMXvSnWpg==", + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-8.0.1.tgz", + "integrity": "sha512-aZb9IOwq6dXhqLmPXZVQrvGIZ9vTdJ5ZtkaMwUM94CsUHDe58Rin7OVmvS2SVxzqXBmvVowr5uoTzX6oRT31wA==", "dev": true, "dependencies": { - "chalk": "^4.1.2", - "glob": "^8.1.0", + "chalk": "^5.3.0", + "glob": "^10.4.2", "yargs": "^17.7.2" }, "bin": { "replace-in-file": "bin/cli.js" }, "engines": { - "node": ">=10" - } - }, - "node_modules/replace-in-file/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/replace-in-file/node_modules/brace-expansion": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", - "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", - "dev": true, - "dependencies": { - "balanced-match": "^1.0.0" - } - }, - "node_modules/replace-in-file/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/replace-in-file/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/replace-in-file/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "node_modules/replace-in-file/node_modules/glob": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz", - "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==", - "dev": true, - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^5.0.1", - "once": "^1.3.0" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/replace-in-file/node_modules/minimatch": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz", - "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==", - "dev": true, - "dependencies": { - "brace-expansion": "^2.0.1" - }, - "engines": { - "node": ">=10" + "node": ">=18" } }, "node_modules/reprism": { @@ -33004,6 +32933,39 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==" }, + "node_modules/tsx": { + "version": "4.16.0", + "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.16.0.tgz", + "integrity": "sha512-MPgN+CuY+4iKxGoJNPv+1pyo5YWZAQ5XfsyobUG+zoKG7IkvCPLZDEyoIb8yLS2FcWci1nlxAqmvPlFWD5AFiQ==", + "dev": true, + "dependencies": { + "esbuild": "~0.21.5", + "get-tsconfig": "^4.7.5" + }, + "bin": { + "tsx": "dist/cli.mjs" + }, + "engines": { + "node": ">=18.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + } + }, + "node_modules/tsx/node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/tuf-js": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-2.2.1.tgz", @@ -33950,9 +33912,9 @@ } }, "node_modules/vite": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz", - "integrity": "sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==", + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.2.tgz", + "integrity": "sha512-6lA7OBHBlXUxiJxbO5aAY2fsHHzDr1q7DvXYnyZycRs2Dz+dXBWuhpWHvmljTRTpQC2uvGmUFFkSHF2vGo90MA==", "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.38", @@ -34163,15 +34125,15 @@ "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==" }, "node_modules/vue": { - "version": "3.4.30", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.30.tgz", - "integrity": "sha512-NcxtKCwkdf1zPsr7Y8+QlDBCGqxvjLXF2EX+yi76rV5rrz90Y6gK1cq0olIhdWGgrlhs9ElHuhi9t3+W5sG5Xw==", + "version": "3.4.31", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.31.tgz", + "integrity": "sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==", "dependencies": { - "@vue/compiler-dom": "3.4.30", - "@vue/compiler-sfc": "3.4.30", - "@vue/runtime-dom": "3.4.30", - "@vue/server-renderer": "3.4.30", - "@vue/shared": "3.4.30" + "@vue/compiler-dom": "3.4.31", + "@vue/compiler-sfc": "3.4.31", + "@vue/runtime-dom": "3.4.31", + "@vue/server-renderer": "3.4.31", + "@vue/shared": "3.4.31" }, "peerDependencies": { "typescript": "*" @@ -34224,20 +34186,20 @@ } }, "node_modules/vue-tsc": { - "version": "2.0.22", - "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.22.tgz", - "integrity": "sha512-lMBIwPBO0sxCcmvu45yt1b035AaQ8/XSXQDk8m75y4j0jSXY/y/XzfEtssQ9JMS47lDaR10O3/926oCs8OeGUw==", + "version": "2.0.24", + "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.24.tgz", + "integrity": "sha512-1qi4P8L7yS78A7OJ7CDDxUIZPD6nVxoQEgX3DkRZNi1HI1qOfzOJwQlNpmwkogSVD6S/XcanbW9sktzpSxz6rA==", "devOptional": true, "dependencies": { - "@volar/typescript": "~2.3.1", - "@vue/language-core": "2.0.22", + "@volar/typescript": "~2.4.0-alpha.2", + "@vue/language-core": "2.0.24", "semver": "^7.5.4" }, "bin": { "vue-tsc": "bin/vue-tsc.js" }, "peerDependencies": { - "typescript": "*" + "typescript": ">=5.0.0" } }, "node_modules/watchpack": { @@ -35491,6 +35453,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/yoctocolors-cjs": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.1.tgz", + "integrity": "sha512-c6T13b6qYcJZvck7QbEFXrFX/Mu2KOjvAGiKHmYMUg96jxNpfP6i+psGW72BOPxOIDUJrORG+Kyu7quMX9CQBQ==", + "dev": true, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/zhead": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz", @@ -35580,7 +35554,7 @@ "version": "0.0.0", "license": "Apache-2.0", "devDependencies": { - "@playwright/experimental-ct-react": "1.44.1", + "@playwright/experimental-ct-react": "1.45.0", "@types/react": "^18.3.3", "react": "^18.3.1", "react-dom": "^18.3.1" @@ -35591,14 +35565,16 @@ "version": "0.0.0", "license": "Apache-2.0", "dependencies": { - "vue": "^3.4.30" + "vue": "^3.4.31" }, "devDependencies": { - "@playwright/experimental-ct-vue": "1.44.1", + "@playwright/experimental-ct-vue": "1.45.0", "@vitejs/plugin-vue": "^5.0.5", + "replace-in-file": "^8.0.1", + "tsx": "^4.16.0", "typescript": "^5.4.5", - "vite": "^5.3.1", - "vue-tsc": "^2.0.22" + "vite": "^5.3.2", + "vue-tsc": "^2.0.24" } }, "output/webcomponent": { @@ -35618,8 +35594,8 @@ }, "devDependencies": { "@builder.io/eslint-plugin-mitosis": "^0.0.16", - "@builder.io/mitosis": "^0.3.7", - "@builder.io/mitosis-cli": "^0.3.7", + "@builder.io/mitosis": "^0.3.8", + "@builder.io/mitosis-cli": "^0.3.8", "@react-docgen/cli": "^2.0.3", "cpr": "3.0.1", "cssnano": "^7.0.3", @@ -35627,7 +35603,8 @@ "hygen": "^6.2.11", "lit": "^3.1.4", "nodemon": "3.1.4", - "sass": "1.77.4" + "sass": "1.77.4", + "tsx": "^4.16.0" } }, "packages/components/node_modules/@eslint/js": { @@ -35935,7 +35912,11 @@ } }, "scripts": { - "version": "0.0.0" + "version": "0.0.0", + "devDependencies": { + "glob": "^10.4.2", + "replace-in-file": "^8.0.1" + } }, "showcases/angular-showcase": { "version": "0.0.0", @@ -35984,7 +35965,7 @@ "@angular/cli": "17.3.8", "@angular/compiler-cli": "17.3.11", "@types/express": "^4.17.21", - "@types/node": "^20.14.8", + "@types/node": "^20.14.9", "cpr": "3.0.1", "ng-packagr": "17.3.0", "typescript": "^5.4.5" @@ -35997,7 +35978,7 @@ "react-dom": "18.3.1" }, "devDependencies": { - "@types/node": "^20.14.8", + "@types/node": "^20.14.9", "@types/react": "^18.3.1", "npm-run-all": "^4.1.5", "open-cli": "^8.0.0", @@ -36012,7 +35993,7 @@ "hasInstallScript": true, "dependencies": { "nuxt": "^3.11.2", - "vue": "^3.4.30", + "vue": "^3.4.31", "vue-router": "^4.4.0" } }, @@ -36032,7 +36013,7 @@ "@mdx-js/react": "^3.0.1", "@next/mdx": "^14.2.4", "@types/dompurify": "3.0.5", - "@types/node": "20.14.8", + "@types/node": "20.14.9", "@types/react": "18.3.3", "@types/react-dom": "18.3.0", "esbuild": "0.21.5", @@ -36075,7 +36056,7 @@ "@vitejs/plugin-react": "^4.3.1", "cross-env": "^7.0.3", "typescript": "^5.4.5", - "vite": "^5.3.1" + "vite": "^5.3.2" } }, "showcases/vanilla-showcase": { @@ -36083,22 +36064,22 @@ "devDependencies": { "cpr": "3.0.1", "npm-run-all": "4.1.5", - "vite": "^5.3.1" + "vite": "^5.3.2" } }, "showcases/vue-showcase": { "version": "0.0.0", "dependencies": { "sa11y": "3.2.1", - "vue": "^3.4.30", + "vue": "^3.4.31", "vue-router": "4.4.0" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.5", "cross-env": "^7.0.3", "typescript": "^5.4.5", - "vite": "^5.3.1", - "vue-tsc": "^2.0.22" + "vite": "^5.3.2", + "vue-tsc": "^2.0.24" } } } diff --git a/package.json b/package.json index 5bfbae9bc9d..2e6989d8843 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,8 @@ "@axe-core/playwright": "^4.9.1", "@commitlint/cli": "19.3.0", "@commitlint/config-conventional": "19.2.2", - "@playwright/test": "1.44.1", + "@playwright/test": "1.45.0", + "@types/fs-extra": "^11.0.4", "adm-zip": "0.5.14", "commander": "^12.1.0", "cpr": "3.0.1", @@ -59,23 +60,24 @@ "glob": "^10.4.2", "http-server": "14.1.1", "husky": "9.0.11", - "inquirer": "^9.2.23", + "inquirer": "^9.3.2", "jscpd": "^4.0.4", "lint-staged": "^15.2.7", "markdownlint-cli": "^0.41.0", "npm-run-all": "4.1.5", - "postcss": "^8.4.38", + "postcss": "^8.4.39", "postcss-cli": "^11.0.0", "prettier": "^3.3.2", "prettier-plugin-pkg": "0.18.1", "prettier-plugin-sh": "^0.14.0", - "replace-in-file": "^7.2.0", + "replace-in-file": "^8.0.1", "rimraf": "5.0.7", "stylelint": "^14.16.1", "stylelint-config-prettier": "9.0.5", "stylelint-config-sass-guidelines": "9.0.1", "stylelint-use-logical": "^2.1.2", "tslib": "^2.6.3", + "tsx": "^4.16.0", "typescript": "^5.4.5", "validate-branch-name": "^1.3.0", "xo": "^0.58.0" diff --git a/packages/components/package.json b/packages/components/package.json index d87b3be5815..e707f5a38cd 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -19,13 +19,13 @@ "build-assets": "cpr src build -o -f \"(.ts|.tsx|.md|.html)$\"", "build-components": "npm-run-all build:mitosis -p build-components:*", "build-components:docs": "react-docgen ../../output/react/src/components/**/*.tsx -o ../../output/docs.json -i *.spec.tsx", - "build-components:post": "node scripts/post-build/index.js", + "build-components:post": "tsx scripts/post-build/index.ts", "build-style:01_sass": "sass src:build --no-source-map --load-path=node_modules/ --load-path=../../node_modules/ --future-deprecation=import", "build-style:02_postcss": "postcss build/**/*.css --replace", "build:mitosis": "mitosis build", - "compile:angular": "mitosis build -c mitosis-angular.config.js && node -e \"require('./scripts/post-build/angular.js')(true)\" && cpr ../../output/tmp/angular/src ../../output/angular/src -o", - "compile:react": "mitosis build -c mitosis-react.config.js && node -e \"require('./scripts/post-build/react.js')(true)\" && cpr ../../output/tmp/react/src ../../output/react/src -o", - "compile:vue": "mitosis build -c mitosis-vue.config.js && node -e \"require('./scripts/post-build/vue.js')(true)\" && cpr ../../output/tmp/vue/src ../../output/vue/src -o", + "compile:angular": "mitosis build -c mitosis-angular.config.js && tsx scripts/exec/angular.ts && cpr ../../output/tmp/angular/src ../../output/angular/src -o", + "compile:react": "mitosis build -c mitosis-react.config.js && tsx scripts/exec/react.ts && cpr ../../output/tmp/react/src ../../output/react/src -o", + "compile:vue": "mitosis build -c mitosis-vue.config.js && tsx scripts/exec/vue.ts && cpr ../../output/tmp/vue/src ../../output/vue/src -o", "copy-assets": "cpr ../foundations/assets build/assets -o", "copy-output": "npm-run-all copy:*", "copy:outputs": "cpr build ../../build-outputs/components/build -o", @@ -38,7 +38,7 @@ "dev:vue": "nodemon --watch src --watch overrides -e tsx,ts -x \"npm run compile:vue\"", "generate:component": "hygen mitosis new", "generate:docs": "hygen update-docs new", - "generate:icon-types": "node scripts/generate-icon-types.js", + "generate:icon-types": "tsx ./scripts/generate-icon-types.ts", "prepack": "npm run copy-assets", "start": "nodemon --watch src --watch scripts --watch overrides -e js,tsx,ts,scss,json -x \"npm run build\"" }, @@ -47,8 +47,8 @@ }, "devDependencies": { "@builder.io/eslint-plugin-mitosis": "^0.0.16", - "@builder.io/mitosis": "^0.3.7", - "@builder.io/mitosis-cli": "^0.3.7", + "@builder.io/mitosis": "^0.3.8", + "@builder.io/mitosis-cli": "^0.3.8", "@react-docgen/cli": "^2.0.3", "cpr": "3.0.1", "cssnano": "^7.0.3", @@ -56,7 +56,8 @@ "hygen": "^6.2.11", "lit": "^3.1.4", "nodemon": "3.1.4", - "sass": "1.77.4" + "sass": "1.77.4", + "tsx": "^4.16.0" }, "publishConfig": { "registry": "https://registry.npmjs.org/", diff --git a/packages/components/scripts/exec/angular.ts b/packages/components/scripts/exec/angular.ts new file mode 100644 index 00000000000..1debfd059a8 --- /dev/null +++ b/packages/components/scripts/exec/angular.ts @@ -0,0 +1,3 @@ +import angular from '../post-build/angular'; + +angular(true); diff --git a/packages/components/scripts/exec/react.ts b/packages/components/scripts/exec/react.ts new file mode 100644 index 00000000000..e29974f0fc2 --- /dev/null +++ b/packages/components/scripts/exec/react.ts @@ -0,0 +1,3 @@ +import react from '../post-build/react'; + +react(true); diff --git a/packages/components/scripts/exec/vue.ts b/packages/components/scripts/exec/vue.ts new file mode 100644 index 00000000000..9172c2f62f3 --- /dev/null +++ b/packages/components/scripts/exec/vue.ts @@ -0,0 +1,3 @@ +import vue from '../post-build/vue'; + +vue(true); diff --git a/packages/components/scripts/generate-icon-types.js b/packages/components/scripts/generate-icon-types.ts similarity index 80% rename from packages/components/scripts/generate-icon-types.js rename to packages/components/scripts/generate-icon-types.ts index 7a2c5676018..61298a80790 100644 --- a/packages/components/scripts/generate-icon-types.js +++ b/packages/components/scripts/generate-icon-types.ts @@ -2,25 +2,25 @@ * This script can be used to update the icon type for all components using icons. */ -const FS = require('node:fs'); +import { readdirSync, lstatSync, writeFileSync } from 'node:fs'; const foundationAssetsPath = '../foundations/assets/icons/functional/images'; const generateIconTypes = () => { try { const allIcons = []; - const icons = FS.readdirSync(foundationAssetsPath) + const icons = readdirSync(foundationAssetsPath) .reduce((previousValue, currentValue) => { const path_string = `${foundationAssetsPath}/${currentValue}`; if ( currentValue.includes('.svg') || - !FS.lstatSync(path_string).isDirectory() + !lstatSync(path_string).isDirectory() ) { return previousValue; } - let iconPaths = FS.readdirSync(path_string); + let iconPaths = readdirSync(path_string); return [ ...previousValue, @@ -59,8 +59,8 @@ const generateIconTypes = () => { const allIconsFile = `${generatedDisclaimer}export const ALL_ICONS: string[] = ${JSON.stringify( allIcons )};`; - FS.writeFileSync('./src/shared/icon-types.ts', iconTypes); - FS.writeFileSync('./src/shared/all-icons.ts', allIconsFile); + writeFileSync('./src/shared/icon-types.ts', iconTypes); + writeFileSync('./src/shared/all-icons.ts', allIconsFile); } catch (e) { console.log(e); } diff --git a/packages/components/scripts/post-build/angular.js b/packages/components/scripts/post-build/angular.ts similarity index 85% rename from packages/components/scripts/post-build/angular.js rename to packages/components/scripts/post-build/angular.ts index 3245b2c3d87..df4f11af32f 100644 --- a/packages/components/scripts/post-build/angular.js +++ b/packages/components/scripts/post-build/angular.ts @@ -1,9 +1,12 @@ -const Replace = require('replace-in-file'); -const FS = require('node:fs'); -const { components } = require('./components'); -const { runReplacements, transformToUpperComponentName } = require('../utils'); +import { replaceInFileSync } from 'replace-in-file'; -const changeFile = (component, input) => { +import { writeFileSync } from 'node:fs'; + +import components, { Overwrite } from './components.js'; + +import { runReplacements, transformToUpperComponentName } from '../utils'; + +const changeFile = (input: string) => { return input .split('\n') .filter( @@ -28,17 +31,11 @@ const changeFile = (component, input) => { /** * This replacement inserts everything used for form elements to work with reactive forms and ngModel in angular - * - * @param {*} replacements - * @param {*} componentName - * @param {*} upperComponentName - * @param {*} valueAccessor 'checked' | 'value' [adopt if needed] */ const setControlValueAccessorReplacements = ( - replacements, - componentName, - upperComponentName, - valueAccessor + replacements: Overwrite[], + upperComponentName: string, + valueAccessor: 'checked' | 'value' | string ) => { // for native angular support (e.g. reactive forms) we have to implement // the ControlValueAccessor interface with all impacts :/ @@ -103,18 +100,13 @@ const setControlValueAccessorReplacements = ( * It's not possible to use multiple times in a component. * In Angular, you have to use a directive for this... * This is a workaround to replace it in the file. - * @param replacements - * @param outputFolder {string} - * @param componentName {string} - * @param upperComponentName {string} - * @param directives {{name:string, ngContentName?:string}[]} */ const setDirectiveReplacements = ( - replacements, - outputFolder, - componentName, - upperComponentName, - directives + replacements: Overwrite[], + outputFolder: string, + componentName: string, + upperComponentName: string, + directives: { name: string; ngContentName?: string }[] ) => { for (const directive of directives) { // Add ng-content multiple times to overwrite all @@ -143,7 +135,7 @@ const setDirectiveReplacements = ( '@Component({' }); - FS.writeFileSync( + writeFileSync( `../../output/angular/src/components/${componentName}/${directive.name}.directive.ts`, '/* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */\n' + "import { Directive } from '@angular/core';" + @@ -168,17 +160,17 @@ export class ${directive.name}Directive {} `export * from './components/${componentName}/${directive.name}.directive';` ) .join('\n'); - Replace.sync({ + replaceInFileSync({ files: `../../${outputFolder}/angular/src/index.ts`, from: `export * from './components/${componentName}';`, to: `export * from './components/${componentName}';\n${directiveExports}` }); }; -const getAttributePassing = (componentName) => ` +const getAttributePassing = (componentName: string) => ` ngAfterViewInit(): void { \t\tconst element: HTMLElement | null = this.ref?.nativeElement; -\t\tconst parent = element?.closest('db-${componentName}') ?? element?.closest('db${componentName.replaceAll('-', '')}'); +\t\tconst parent = element?.closest('db-${componentName}') ?? element?.closest('db${componentName.replace(/-/g, '')}'); \t\tif (element && parent) { \t\t\tconst attributes = parent.attributes; \t\t\tfor (let i = 0; i < attributes.length; i++) { @@ -195,10 +187,10 @@ ngAfterViewInit(): void { \t\t} \t}`; -module.exports = (tmp) => { +export default (tmp?: boolean) => { const outputFolder = `${tmp ? 'output/tmp' : 'output'}`; // Activate vue specific event handling - Replace.sync({ + replaceInFileSync({ files: `../../${outputFolder}/angular/src/utils/form-components.ts`, from: /\/\/ ANGULAR:/g, to: '' @@ -209,10 +201,10 @@ module.exports = (tmp) => { const file = `../../${outputFolder}/angular/src/components/${componentName}/${componentName}.ts`; const options = { files: file, - processor: (input) => changeFile(component, input) + processor: (input: string) => changeFile(input) }; - const replacements = [ + const replacements: Overwrite[] = [ { from: 'attr.disabled', to: 'disabled' @@ -257,7 +249,6 @@ module.exports = (tmp) => { if (component.config?.angular?.controlValueAccessor) { setControlValueAccessorReplacements( replacements, - componentName, upperComponentName, component.config.angular.controlValueAccessor // value / checked / ... ); @@ -274,7 +265,7 @@ module.exports = (tmp) => { } try { - Replace.sync(options); + replaceInFileSync(options); runReplacements(replacements, component, 'angular', file); } catch (error) { console.error('Error occurred:', error); diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.ts similarity index 85% rename from packages/components/scripts/post-build/components.js rename to packages/components/scripts/post-build/components.ts index 59e20cb1eda..df373e85966 100644 --- a/packages/components/scripts/post-build/components.js +++ b/packages/components/scripts/post-build/components.ts @@ -1,30 +1,34 @@ -/** - * @returns {[{ - * name:string, - * overwrites?:{ - * global?:{from:string,to:string}[], - * angular?:{from:string,to:string}[], - * react?:{from:string,to:string}[], - * vue?:{from:string,to:string}[], - * webComponents?:{from:string,to:string}[] - * }, - * config?:{ - * vue?:{ - * vModel?: {modelValue:string, binding:string}[] - * }, - * angular?: { - * controlValueAccessor?: string, - * directives?: {name:string, ngContentName?:string}[], - * initValues?: {key:string, value:any}[] - * }, - * react?: { - * propsPassingFilter?: string[]; - * containsFragmentMap?: boolean; - * } - * } - * }]} - */ -const getComponents = () => [ +export type Overwrite = { + from: string | RegExp; + to: string; +}; + +export type Component = { + name: string; + overwrites?: { + global?: Overwrite[]; + angular?: Overwrite[]; + react?: Overwrite[]; + vue?: Overwrite[]; + webComponents?: Overwrite[]; + }; + config?: { + vue?: { + vModel?: { modelValue: string; binding: string }[]; + }; + angular?: { + controlValueAccessor?: string; + directives?: { name: string; ngContentName?: string }[]; + initValues?: { key: string; value: any }[]; + }; + react?: { + propsPassingFilter?: string[]; + containsFragmentMap?: boolean; + }; + }; +}; + +export const getComponents = (): Component[] => [ { name: 'switch', config: { @@ -304,6 +308,4 @@ const getComponents = () => [ } ]; -module.exports = { - components: getComponents() -}; +export default getComponents(); diff --git a/packages/components/scripts/post-build/copy-files.js b/packages/components/scripts/post-build/copy-files.ts similarity index 71% rename from packages/components/scripts/post-build/copy-files.js rename to packages/components/scripts/post-build/copy-files.ts index 39d31f0a534..95c9f7ee396 100644 --- a/packages/components/scripts/post-build/copy-files.js +++ b/packages/components/scripts/post-build/copy-files.ts @@ -1,41 +1,40 @@ -const Fse = require('fs-extra'); -const Frameworks = require('./framworks'); -const { components } = require('./components'); -const Replace = require('replace-in-file'); +import Frameworks from './frameworks'; -module.exports = () => { +import { replaceInFileSync } from 'replace-in-file'; +import components from './components.js'; +import { copySync, pathExistsSync } from 'fs-extra'; + +export default () => { for (const { name } of components) { for (const framework of Frameworks) { // TODO: Add other frameworks after Playwright supports them in component tests if (framework === 'react' || framework === 'vue') { if ( - Fse.pathExistsSync( - `./src/components/${name}/${name}.spec.tsx` - ) + pathExistsSync(`./src/components/${name}/${name}.spec.tsx`) ) { - Fse.copySync( + copySync( `./src/components/${name}/${name}.spec.tsx`, `../../output/${framework}/src/components/${name}/${name}.spec.tsx` ); if (framework === 'vue') { - Replace({ + replaceInFileSync({ files: `../../output/${framework}/src/components/${name}/${name}.spec.tsx`, from: ['{/*', '*/}'], to: '' }); - Replace({ + replaceInFileSync({ files: `../../output/${framework}/src/components/${name}/${name}.spec.tsx`, from: /\/\/ VUE:/g, to: '' }); } } - Fse.copySync( + copySync( `./test/playwright/boilerplate`, `../../output/${framework}/playwright`, { overwrite: true } ); - Fse.copySync( + copySync( `./test/playwright/config.ts`, `../../output/${framework}/playwright.config.ts`, { overwrite: true } diff --git a/packages/components/scripts/post-build/frameworks.ts b/packages/components/scripts/post-build/frameworks.ts new file mode 100644 index 00000000000..604af42a4da --- /dev/null +++ b/packages/components/scripts/post-build/frameworks.ts @@ -0,0 +1 @@ +export default ['angular', 'react', 'vue', 'webcomponent']; diff --git a/packages/components/scripts/post-build/framworks.js b/packages/components/scripts/post-build/framworks.js deleted file mode 100644 index bcc92a99f37..00000000000 --- a/packages/components/scripts/post-build/framworks.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = ['angular', 'react', 'vue', 'webcomponent']; diff --git a/packages/components/scripts/post-build/index.js b/packages/components/scripts/post-build/index.js deleted file mode 100644 index ed891b35e3a..00000000000 --- a/packages/components/scripts/post-build/index.js +++ /dev/null @@ -1,11 +0,0 @@ -const Vue = require('./vue'); -const WebComponents = require('./web-components'); -const Angular = require('./angular'); -const React = require('./react'); -const CopyFiles = require('./copy-files'); - -CopyFiles(); -Vue(); -Angular(); -React(); -WebComponents(); diff --git a/packages/components/scripts/post-build/index.ts b/packages/components/scripts/post-build/index.ts new file mode 100644 index 00000000000..7642e6e7bab --- /dev/null +++ b/packages/components/scripts/post-build/index.ts @@ -0,0 +1,11 @@ +import Vue from './vue'; +import WebComponents from './web-components'; +import Angular from './angular'; +import React from './react'; +import CopyFiles from './copy-files'; + +CopyFiles(); +Vue(); +Angular(); +React(); +WebComponents(); diff --git a/packages/components/scripts/post-build/react.js b/packages/components/scripts/post-build/react.ts similarity index 88% rename from packages/components/scripts/post-build/react.js rename to packages/components/scripts/post-build/react.ts index 7928fa7bdd8..272a9fc891b 100644 --- a/packages/components/scripts/post-build/react.js +++ b/packages/components/scripts/post-build/react.ts @@ -1,12 +1,14 @@ -const { components } = require('./components'); -const FS = require('node:fs'); -const { transformToUpperComponentName, runReplacements } = require('../utils'); +import components from './components'; -const overwriteEvents = (tmp) => { +import { readFileSync, writeFileSync } from 'node:fs'; + +import { runReplacements, transformToUpperComponentName } from '../utils'; + +const overwriteEvents = (tmp: boolean) => { const modelFilePath = `../../${ tmp ? 'output/tmp' : 'output' }/react/src/shared/model.ts`; - let modelFileContent = FS.readFileSync(modelFilePath).toString('utf-8'); + let modelFileContent = readFileSync(modelFilePath).toString('utf-8'); modelFileContent = 'import * as React from "react";\n' + modelFileContent; modelFileContent = modelFileContent.replace( 'export type ClickEvent = MouseEvent;', @@ -24,10 +26,10 @@ const overwriteEvents = (tmp) => { 'export type InteractionEvent = FocusEvent;', 'export type InteractionEvent = React.FocusEvent;' ); - FS.writeFileSync(modelFilePath, modelFileContent); + writeFileSync(modelFilePath, modelFileContent); }; -module.exports = (tmp) => { +export default (tmp?: boolean) => { try { overwriteEvents(tmp); @@ -40,7 +42,7 @@ module.exports = (tmp) => { tmp ? 'output/tmp' : 'output' }/react/src/components/${component.name}/${component.name}.tsx`; - const tsxFileContent = FS.readFileSync(tsxFile).toString('utf-8'); + const tsxFileContent = readFileSync(tsxFile).toString('utf-8'); const htmlElements = tsxFileContent.match('(?<=useRef<)(.*?)(?=>)'); let htmlElement = 'HTMLDivElement'; if (htmlElements.length > 0) { diff --git a/packages/components/scripts/post-build/vue.js b/packages/components/scripts/post-build/vue.ts similarity index 81% rename from packages/components/scripts/post-build/vue.js rename to packages/components/scripts/post-build/vue.ts index 61ceedf7d07..61ea32b85b8 100644 --- a/packages/components/scripts/post-build/vue.js +++ b/packages/components/scripts/post-build/vue.ts @@ -1,8 +1,10 @@ -const Replace = require('replace-in-file'); -const { components } = require('./components'); -const { transformToUpperComponentName, runReplacements } = require('../utils'); +import { replaceInFileSync } from 'replace-in-file'; -const updateNestedComponents = (input, rootComponentName) => { +import components, { Overwrite } from './components.js'; + +import { runReplacements, transformToUpperComponentName } from '../utils'; + +const updateNestedComponents = (input: string, rootComponentName: string) => { let fileContent = input; for (const nestedComponent of components.filter( @@ -25,16 +27,16 @@ const updateNestedComponents = (input, rootComponentName) => { .join('\n'); }; -module.exports = (tmp) => { +export default (tmp?: boolean) => { const outputFolder = `${tmp ? 'output/tmp' : 'output'}`; // Rewire imports in Playwright config - Replace.sync({ + replaceInFileSync({ files: `../../${outputFolder}/vue/playwright.config.ts`, from: /react/g, to: `vue` }); // Activate vue specific event handling - Replace.sync({ + replaceInFileSync({ files: `../../${outputFolder}/vue/src/utils/form-components.ts`, from: `// VUE:`, to: `` @@ -45,26 +47,26 @@ module.exports = (tmp) => { try { // Rewire imports in Playwright component tests - Replace.sync({ + replaceInFileSync({ files: `../../${outputFolder}/vue/src/components/${componentName}/${componentName}.spec.tsx`, from: `react`, to: `vue` }); - Replace.sync({ + replaceInFileSync({ files: `../../${outputFolder}/vue/src/components/${componentName}/index.ts`, from: `./${componentName}`, to: `./${componentName}.vue` }); - const replacements = [ + const replacements: Overwrite[] = [ { from: /immediate: true,/g, to: 'immediate: true,\nflush: "post"' } ]; - Replace.sync({ + replaceInFileSync({ files: vueFile, processor(input) { return updateNestedComponents(input, componentName); diff --git a/packages/components/scripts/post-build/web-components.js b/packages/components/scripts/post-build/web-components.ts similarity index 83% rename from packages/components/scripts/post-build/web-components.js rename to packages/components/scripts/post-build/web-components.ts index 2f4e50ed1ed..20f97ac181e 100644 --- a/packages/components/scripts/post-build/web-components.js +++ b/packages/components/scripts/post-build/web-components.ts @@ -1,13 +1,17 @@ -const Replace = require('replace-in-file'); -const Fse = require('fs-extra'); -const { components } = require('./components'); -const toUpperCase = (component) => { +import { replaceInFileSync } from 'replace-in-file'; + +import { pathExistsSync, moveSync } from 'fs-extra'; + +import components from './components'; + +const toUpperCase = (component: string) => { return component .split('-') .map((part) => part.charAt(0).toUpperCase() + part.slice(1)) .join(''); }; -const updateNestedComponents = (input, rootComponentName) => { + +const updateNestedComponents = (input: string, rootComponentName: string) => { let fileContent = input; for (const nestedComponent of components.filter( @@ -44,7 +48,7 @@ const updateNestedComponents = (input, rootComponentName) => { return fileContent; }; -const workaroundAttributes = (lines) => { +const workaroundAttributes = (lines: string[]) => { return lines.map((line) => { if (line.includes('el.setAttribute') && line.includes(', this.props')) { const property = line.substring( @@ -62,12 +66,12 @@ const workaroundAttributes = (lines) => { }); }; -module.exports = () => { +export default () => { for (const component of components) { const filePath = `../../output/webcomponent/src/components/${component.name}/${component.name}.ts`; const fixImports = { files: filePath, - processor(input) { + processor(input: string) { let lines = input .split('\n') .filter( @@ -95,12 +99,12 @@ module.exports = () => { }; try { - Replace.sync(fixImports); - Replace.sync(defaultStyleUrl); + replaceInFileSync(fixImports); + replaceInFileSync(defaultStyleUrl); if (component?.overwrites?.webComponents) { for (const over of component.overwrites.webComponents) { - Replace.sync({ + replaceInFileSync({ files: filePath, from: over.from, to: over.to @@ -108,8 +112,8 @@ module.exports = () => { } } - if (Fse.pathExistsSync(filePath)) { - Fse.moveSync( + if (pathExistsSync(filePath)) { + moveSync( `../../output/webcomponent/src/components/${component.name}/${component.name}.ts`, `../../output/webcomponent/src/components/${component.name}/${component.name}.js` ); diff --git a/packages/components/scripts/utils/index.js b/packages/components/scripts/utils/index.ts similarity index 53% rename from packages/components/scripts/utils/index.js rename to packages/components/scripts/utils/index.ts index 7d4c18b120a..2e01b14a794 100644 --- a/packages/components/scripts/utils/index.js +++ b/packages/components/scripts/utils/index.ts @@ -1,11 +1,18 @@ -const Replace = require('replace-in-file'); -const transformToUpperComponentName = (componentName) => +import { replaceInFileSync } from 'replace-in-file'; +import { Component, Overwrite } from '../post-build/components'; + +export const transformToUpperComponentName = (componentName: string) => componentName .split('-') .map((part) => `${part[0].toUpperCase()}${part.slice(1)}`) .join(''); -const runReplacements = (replacements, component, framework, file) => { +export const runReplacements = ( + replacements: Overwrite[], + component: Component, + framework: string, + file: string +) => { if (component?.overwrites?.[framework]) { replacements = [...replacements, ...component.overwrites[framework]]; } @@ -20,8 +27,8 @@ const runReplacements = (replacements, component, framework, file) => { from: replacement.from, to: replacement.to }; - Replace.replaceInFileSync(option); + replaceInFileSync(option); } }; -module.exports = { transformToUpperComponentName, runReplacements }; +export default { transformToUpperComponentName, runReplacements }; diff --git a/packages/components/src/components/tag/tag.scss b/packages/components/src/components/tag/tag.scss index a2287003169..f40be53a374 100644 --- a/packages/components/src/components/tag/tag.scss +++ b/packages/components/src/components/tag/tag.scss @@ -190,7 +190,8 @@ // overwrite to transparent background-color: colors.$db-current-color-bg-transparent-full-enabled; margin-inline-start: variables.$db-spacing-fixed-2xs; - block-size: 100%; + border: none; + aspect-ratio: 1 / 1; } } } diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index dbca593426f..8319438ad2c 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -1,6 +1,7 @@ { "compilerOptions": { "jsx": "preserve", - "jsxImportSource": "@builder.io/mitosis" + "jsxImportSource": "@builder.io/mitosis", + "esModuleInterop": true } } diff --git a/scripts/md-resolve-svg.js b/scripts/md-resolve-svg.ts similarity index 63% rename from scripts/md-resolve-svg.js rename to scripts/md-resolve-svg.ts index d475930617e..050721ab1a9 100644 --- a/scripts/md-resolve-svg.js +++ b/scripts/md-resolve-svg.ts @@ -1,18 +1,26 @@ -/* eslint-disable unicorn/prefer-top-level-await */ -import FS from 'node:fs'; -import https from 'node:https'; +/* eslint-disable @typescript-eslint/prefer-regexp-exec */ + +import * as https from 'node:https'; +import fs from 'node:fs'; +import { replaceInFileSync } from 'replace-in-file'; import { glob } from 'glob'; -import Replace from 'replace-in-file'; // eslint-disable-next-line prefer-regex-literals const shieldRegex = new RegExp('https://img\\.shields\\.io/[^)|\\s]*'); const docsPath = 'docs/images/download'; -const findReplacements = (file, filesToReplace) => { - let readFile = FS.readFileSync(file).toString(); +type Replacement = { + files: string[]; + svgUrl: string; + pathname: string; + pathNameSvg: string; +}; + +const findReplacements = (file: string, filesToReplace: Replacement[]) => { + let readFile = fs.readFileSync(file).toString(); let match = readFile.match(shieldRegex); - while (match?.length > 0) { + while (match && match.length > 0) { const svgUrl = match[0]; let svgName = svgUrl; if (svgUrl.includes('badge/dynamic/')) { @@ -47,19 +55,19 @@ const findReplacements = (file, filesToReplace) => { }); } - readFile = readFile.slice(match.index + svgUrl.length); + readFile = readFile.slice((match.index ?? 0) + svgUrl.length); match = readFile.match(shieldRegex); } }; -const startReplacement = (filesToReplace) => { +const startReplacement = (filesToReplace: Replacement[]) => { for (const downloadFile of filesToReplace) { const { svgUrl, pathNameSvg, pathname, files } = downloadFile; - Replace.sync({ + replaceInFileSync({ files, - processor(input) { - let replacedInput = input; + processor(input: string) { + let replacedInput: string = input; while (replacedInput.includes(svgUrl)) { replacedInput = replacedInput.replace( svgUrl, @@ -71,14 +79,14 @@ const startReplacement = (filesToReplace) => { } }); - if (!FS.existsSync(pathNameSvg)) { - const fileStream = FS.createWriteStream(pathNameSvg); + if (!fs.existsSync(pathNameSvg)) { + const fileStream = fs.createWriteStream(pathNameSvg); https.get(svgUrl, (incomingMessage) => { incomingMessage.pipe(fileStream); fileStream.on('finish', () => { fileStream.close(); - FS.writeFileSync( + fs.writeFileSync( `${pathname}.licence`, `retrieved from URL: ${svgUrl}` ); @@ -89,12 +97,14 @@ const startReplacement = (filesToReplace) => { }; const convertImages = async () => { - if (!FS.existsSync(docsPath)) { - FS.mkdirSync(docsPath); + if (!fs.existsSync(docsPath)) { + fs.mkdirSync(docsPath); } - const mdfiles = await glob('**/*.md', { ignore: '**/node_modules/**' }); - let filesToReplace = []; + const mdfiles: string[] = await glob('**/*.md', { + ignore: '**/node_modules/**' + }); + let filesToReplace: Replacement[] = []; for (const file of mdfiles) { findReplacements(file, filesToReplace); @@ -103,10 +113,12 @@ const convertImages = async () => { // Windows has double backslash for paths filesToReplace = filesToReplace.map((file) => ({ ...file, - files: file.files.map((fileName) => fileName.replaceAll('\\', '/')) + files: file.files.map((fileName: string) => + fileName.replaceAll('\\', '/') + ) })); startReplacement(filesToReplace); }; -convertImages(); +await convertImages(); diff --git a/scripts/package.json b/scripts/package.json index 9aff70e693e..56735d94347 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -61,5 +61,9 @@ "start-showcase:vue": "npm run dev --workspace=vue-showcase", "start:foundations": "npm run start --workspace=@db-ui/foundations", "update:icon-fonts": "npm-run-all generate:icon-fonts generate:icon-types" + }, + "devDependencies": { + "glob": "^10.4.2", + "replace-in-file": "^8.0.1" } } diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json new file mode 100644 index 00000000000..04688f1bd20 --- /dev/null +++ b/scripts/tsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "target": "es2021", + "module": "nodenext", + "strictNullChecks": true, + "lib": ["ESNext"] + } +} diff --git a/showcases/angular-ssr-showcase/package.json b/showcases/angular-ssr-showcase/package.json index 5fbc4280cc1..4cf5cd97025 100644 --- a/showcases/angular-ssr-showcase/package.json +++ b/showcases/angular-ssr-showcase/package.json @@ -32,7 +32,7 @@ "@angular/cli": "17.3.8", "@angular/compiler-cli": "17.3.11", "@types/express": "^4.17.21", - "@types/node": "^20.14.8", + "@types/node": "^20.14.9", "cpr": "3.0.1", "ng-packagr": "17.3.0", "typescript": "^5.4.5" diff --git a/showcases/next-showcase/package.json b/showcases/next-showcase/package.json index 344baa7018f..54d0b534de0 100644 --- a/showcases/next-showcase/package.json +++ b/showcases/next-showcase/package.json @@ -17,7 +17,7 @@ "react-dom": "18.3.1" }, "devDependencies": { - "@types/node": "^20.14.8", + "@types/node": "^20.14.9", "@types/react": "^18.3.1", "npm-run-all": "^4.1.5", "open-cli": "^8.0.0", diff --git a/showcases/nuxt-showcase/package.json b/showcases/nuxt-showcase/package.json index 995d68a70f9..ca7dd39bfff 100644 --- a/showcases/nuxt-showcase/package.json +++ b/showcases/nuxt-showcase/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "nuxt": "^3.11.2", - "vue": "^3.4.30", + "vue": "^3.4.31", "vue-router": "^4.4.0" } } diff --git a/showcases/patternhub/components/old-routing-fallback/index.tsx b/showcases/patternhub/components/old-routing-fallback/index.tsx index 73d3bf5f2df..0de0dcdb77b 100644 --- a/showcases/patternhub/components/old-routing-fallback/index.tsx +++ b/showcases/patternhub/components/old-routing-fallback/index.tsx @@ -9,7 +9,8 @@ const OldRoutingFallback = () => { useEffect(() => { if (router) { - const splitPath = router.asPath.replace('/', '').split('/'); + const asPath = router.asPath.split('?'); + const splitPath = asPath[0].replace('/', '').split('/'); const isComponent = splitPath.length > 0 && splitPath[0] === 'components'; @@ -18,7 +19,6 @@ const OldRoutingFallback = () => { splitPath.length > 2 ? splitPath[2] : undefined; const type = splitPath.length > 3 ? splitPath[3] : undefined; - const asPath = router.asPath.split('?'); const pathParams = asPath.length === 2 ? `?${asPath[1]}` : ''; if (isComponent && component) { diff --git a/showcases/patternhub/package.json b/showcases/patternhub/package.json index 709352cd6e7..cf1eeef76f1 100644 --- a/showcases/patternhub/package.json +++ b/showcases/patternhub/package.json @@ -17,7 +17,9 @@ "next:dev": "next dev", "open": "open-cli http://localhost:3000/mono/sub", "prebuild:app": "cpr ../../node_modules/iframe-resizer/js/ public/iframe-resizer -o", - "start": "cross-env NEXT_PUBLIC_BASE_PATH=/mono/sub npm-run-all compile next:dev" + "regenerate:screenshots": "npx playwright test --config=../playwright.patternhub-config.ts --update-snapshots", + "start": "cross-env NEXT_PUBLIC_BASE_PATH=/mono/sub npm-run-all compile next:dev", + "test:e2e": "npx playwright test --config=../playwright.patternhub-config.ts" }, "dependencies": { "dompurify": "3.1.5", @@ -33,7 +35,7 @@ "@mdx-js/react": "^3.0.1", "@next/mdx": "^14.2.4", "@types/dompurify": "3.0.5", - "@types/node": "20.14.8", + "@types/node": "20.14.9", "@types/react": "18.3.3", "@types/react-dom": "18.3.0", "esbuild": "0.21.5", diff --git a/showcases/patternhub/tests/default.spec.ts b/showcases/patternhub/tests/default.spec.ts new file mode 100644 index 00000000000..4b56fa29303 --- /dev/null +++ b/showcases/patternhub/tests/default.spec.ts @@ -0,0 +1,56 @@ +import { expect, type Page, test } from '@playwright/test'; +import Components from '../data/components.json' with { type: 'json' }; + +const getDefaultScreenshotTest = async ( + name: string, + type: string, + path: string, + fn: (page: Page) => Promise +) => { + test(`${type} should match screenshot`, async ({ page }) => { + await page.goto(`${path}`, { + waitUntil: 'domcontentloaded' + }); + await fn(page); + await expect(page).toHaveScreenshot([name, 'patternhub.png']); + }); +}; + +for (const group of Components) { + for (const component of group.subNavigation) { + test.describe(component.name, async () => { + await getDefaultScreenshotTest( + component.name, + `docs`, + `./components/${component.name}/docs/Angular`, + async (page) => { + expect(await page.locator('h2').isVisible()); + } + ); + }); + test.describe(component.name, async () => { + await getDefaultScreenshotTest( + component.name, + `overview`, + `./components/${component.name}/overview?page=density`, + async (page) => { + const functionalCount = await page + .getByText('Functional') + .first() + .isVisible(); + expect(functionalCount); + } + ); + }); + test.describe(component.name, async () => { + await getDefaultScreenshotTest( + component.name, + `properties`, + `./components/${component.name}/properties?fullscreen=true&noh1=true`, + async (page) => { + expect(await page.locator('h2').isVisible()); + } + ); + }); + } +} diff --git a/showcases/playwright.patternhub-config.ts b/showcases/playwright.patternhub-config.ts new file mode 100644 index 00000000000..e5caf04c0a3 --- /dev/null +++ b/showcases/playwright.patternhub-config.ts @@ -0,0 +1,34 @@ +import { devices, type PlaywrightTestConfig } from '@playwright/test'; +import config from './playwright.config'; + +const patternHubConfig: PlaywrightTestConfig = { + ...config, + testDir: './patternhub/tests', + // Example: __snapshots__/notification/patternhub/chromium/DBNotification-should-match-screenshot.png + snapshotPathTemplate: '{snapshotDir}/{arg}/{testName}{ext}', + // We reduce amount of tests, just testing if site is reachable and content is available + projects: [ + { + name: 'chromium', + use: { + ...devices['Desktop Chrome'] + } + } + ], + webServer: { + command: `cd patternhub && npm run start`, + port: 3000, + reuseExistingServer: !process.env.CI + }, + use: { + /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ + actionTimeout: 0, + /* Base URL to use in actions like `await page.goto('/')`. */ + baseURL: `http://localhost:3000/mono/sub/`, + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: process.env.CI ? 'on-first-retry' : 'on' + } +}; + +export default patternHubConfig; diff --git a/showcases/react-showcase/package.json b/showcases/react-showcase/package.json index 2ee7e645401..ed7bbcbe524 100644 --- a/showcases/react-showcase/package.json +++ b/showcases/react-showcase/package.json @@ -25,6 +25,6 @@ "@vitejs/plugin-react": "^4.3.1", "cross-env": "^7.0.3", "typescript": "^5.4.5", - "vite": "^5.3.1" + "vite": "^5.3.2" } } diff --git a/showcases/vanilla-showcase/package.json b/showcases/vanilla-showcase/package.json index c7c2a5595e4..556c6f3f079 100644 --- a/showcases/vanilla-showcase/package.json +++ b/showcases/vanilla-showcase/package.json @@ -20,6 +20,6 @@ "devDependencies": { "cpr": "3.0.1", "npm-run-all": "4.1.5", - "vite": "^5.3.1" + "vite": "^5.3.2" } } diff --git a/showcases/vue-showcase/package.json b/showcases/vue-showcase/package.json index 170248feac9..c53ad7b7f78 100644 --- a/showcases/vue-showcase/package.json +++ b/showcases/vue-showcase/package.json @@ -13,14 +13,14 @@ }, "dependencies": { "sa11y": "3.2.1", - "vue": "^3.4.30", + "vue": "^3.4.31", "vue-router": "4.4.0" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.5", "cross-env": "^7.0.3", "typescript": "^5.4.5", - "vite": "^5.3.1", - "vue-tsc": "^2.0.22" + "vite": "^5.3.2", + "vue-tsc": "^2.0.24" } }