diff --git a/.github/workflows/build-health-checkup.yml b/.github/workflows/build-health-checkup.yml index 0711490e1..fc0bf0676 100644 --- a/.github/workflows/build-health-checkup.yml +++ b/.github/workflows/build-health-checkup.yml @@ -26,7 +26,9 @@ jobs: run: yarn install --immutable - name: Build + working-directory: packages/click-ui run: yarn build - name: Build output health check + working-directory: packages/click-ui run: yarn build:health_check diff --git a/.github/workflows/chromatic-deployment.yml b/.github/workflows/chromatic-deployment.yml index 624804e8b..c0f9b41a0 100644 --- a/.github/workflows/chromatic-deployment.yml +++ b/.github/workflows/chromatic-deployment.yml @@ -28,3 +28,4 @@ jobs: uses: chromaui/action@latest with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + workingDir: packages/click-ui diff --git a/.github/workflows/code-quality.yml b/.github/workflows/code-quality.yml index 6420e676a..6256c4608 100644 --- a/.github/workflows/code-quality.yml +++ b/.github/workflows/code-quality.yml @@ -23,13 +23,17 @@ jobs: run: yarn install --immutable - name: Typecheck + working-directory: packages/click-ui run: yarn typecheck - name: Linter + working-directory: packages/click-ui run: yarn lint - name: Formatter + working-directory: packages/click-ui run: yarn format - name: Circular Dependencies + working-directory: packages/click-ui run: yarn circular-dependency:check diff --git a/.github/workflows/create-release.yml b/.github/workflows/create-release.yml index 7780f0bea..a80bbaf8e 100644 --- a/.github/workflows/create-release.yml +++ b/.github/workflows/create-release.yml @@ -114,8 +114,8 @@ jobs: CURRENT_TAG="N/A" IS_PRERELEASE="false" - if [[ -f .changeset/pre.json ]]; then - CURRENT_TAG=$(node -p "require('./.changeset/pre.json').tag") + if [[ -f packages/click-ui/.changeset/pre.json ]]; then + CURRENT_TAG=$(node -p "require('./packages/click-ui/.changeset/pre.json').tag") IS_PRERELEASE="true" echo "prerelease=true" >> $GITHUB_OUTPUT echo "current_tag=$CURRENT_TAG" >> $GITHUB_OUTPUT @@ -131,7 +131,7 @@ jobs: - name: Prevent promotion without changes if: steps.check-prerelease.outputs.prerelease == 'true' && steps.check-prerelease.outputs.current_tag != inputs.release_type run: | - CHANGESET_COUNT=$(find .changeset -name "*.md" ! -name "README.md" | wc -l | tr -d ' ') + CHANGESET_COUNT=$(find packages/click-ui/.changeset -name "*.md" ! -name "README.md" | wc -l | tr -d ' ') echo "πŸ” Debug: changeset_count=$CHANGESET_COUNT" if [[ "$CHANGESET_COUNT" -eq 0 ]]; then @@ -145,7 +145,7 @@ jobs: run: | echo "Must exit pre-release mode..." - if ! yarn changeset pre exit; then + if ! yarn workspace @clickhouse/click-ui changeset pre exit; then echo "πŸ‘Ή Oops! Failed to exit pre-release mode for some reason..." exit 1 else @@ -156,7 +156,7 @@ jobs: if: steps.check-prerelease.outputs.prerelease == 'true' && steps.check-prerelease.outputs.current_tag != inputs.release_type && inputs.release_type != 'latest' && inputs.release_type != 'stable' run: | echo "πŸ”„ Switching from ${{ steps.check-prerelease.outputs.current_tag }} to ${{ inputs.release_type }} prerelease mode" - if ! yarn changeset pre exit; then + if ! yarn workspace @clickhouse/click-ui changeset pre exit; then echo "πŸ‘Ή Oops! Failed to exit current prerelease mode for some reason..." exit 1 else @@ -167,7 +167,7 @@ jobs: if: inputs.release_type != 'latest' && inputs.release_type != 'stable' && (steps.check-prerelease.outputs.prerelease != 'true' || steps.check-prerelease.outputs.current_tag != inputs.release_type) run: | echo "πŸ€– Entering ${{ inputs.release_type }} prerelease mode" - yarn changeset pre enter ${{ inputs.release_type }} + yarn workspace @clickhouse/click-ui changeset pre enter ${{ inputs.release_type }} - name: Validate latest release eligibility if: (inputs.release_type == 'latest' || inputs.release_type == 'stable') && steps.check-prerelease.outputs.prerelease != 'true' @@ -187,7 +187,7 @@ jobs: id: version-package run: | echo "πŸ“¦ Versioning packages..." - if ! yarn changeset:version; then + if ! yarn workspace @clickhouse/click-ui changeset:version; then echo "πŸ‘Ή Oops! Failed to do changeset versioning for some reason..." exit 1 else @@ -201,8 +201,8 @@ jobs: exit 1 fi - VERSION=$(node -p "require('./package.json').version") - PKG_NAME=$(node -p "require('./package.json').name") + VERSION=$(node -p "require('./packages/click-ui/package.json').version") + PKG_NAME=$(node -p "require('./packages/click-ui/package.json').name") echo "version=$VERSION" >> $GITHUB_OUTPUT echo "package_name=$PKG_NAME" >> $GITHUB_OUTPUT @@ -249,7 +249,7 @@ jobs: run: | # WARNING: This is coupled with a verify release commit # if you need to modify, apply the changes accordingly - COMMIT_TITLE=$(.scripts/bash/generate-release-commit-message "${{ steps.version-package.outputs.version }}" "${{ inputs.release_type }}") + COMMIT_TITLE=$(packages/click-ui/.scripts/bash/generate-release-commit-message "${{ steps.version-package.outputs.version }}" "${{ inputs.release_type }}") echo "title=$COMMIT_TITLE" >> $GITHUB_OUTPUT echo "branch=changeset-release/v${{ steps.version-package.outputs.version }}-${{ inputs.release_type }}" >> $GITHUB_OUTPUT diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index fa6b699a9..38011c363 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -63,10 +63,12 @@ jobs: git config user.name "GitHub Actions" - name: Bump package version (for version inputs) if: ${{ env.IS_VERSION_INPUT == 'true' }} + working-directory: packages/click-ui run: | npm pkg set version=$GITHUB_TAG - name: Generate prerelease version (for tag inputs) if: ${{ env.IS_VERSION_INPUT == 'false' }} + working-directory: packages/click-ui run: | # Get current version from package.json CURRENT_VERSION=$(node -p "require('./package.json').version") @@ -88,7 +90,9 @@ jobs: - name: Install dependencies run: yarn install --immutable - run: yarn test + working-directory: packages/click-ui - run: yarn build + working-directory: packages/click-ui - name: Determine npm tag run: | # If it's a version input (e.g., 0.0.242 or 0.0.242-beta.1), check for prerelease keywords @@ -103,11 +107,12 @@ jobs: echo "NPM_TAG=$GITHUB_TAG" >> "$GITHUB_ENV" fi - name: Publish to npm with OIDC + working-directory: packages/click-ui run: npm publish --access public --tag $NPM_TAG --provenance - name: update package version (for version inputs only) if: ${{ env.IS_VERSION_INPUT == 'true' }} run: | - git add package.json yarn.lock + git add packages/click-ui/package.json yarn.lock git commit -m 'bump version to ${{ env.GITHUB_TAG }}' git push - name: Create and push git tag (for version inputs only) diff --git a/.github/workflows/pull-request-slack-notification.yml b/.github/workflows/pull-request-slack-notification.yml index 2fcd95c70..a64dd681c 100644 --- a/.github/workflows/pull-request-slack-notification.yml +++ b/.github/workflows/pull-request-slack-notification.yml @@ -19,8 +19,8 @@ jobs: PR_BODY: ${{ github.event.pull_request.body }} PR_TITLE: ${{ github.event.pull_request.title }} run: | - DESC=$(.scripts/bash/pull-request-truncate-body "$PR_BODY") - TITLE=$(.scripts/bash/pull-request-json-escape "$PR_TITLE") + DESC=$(packages/click-ui/.scripts/bash/pull-request-truncate-body "$PR_BODY") + TITLE=$(packages/click-ui/.scripts/bash/pull-request-json-escape "$PR_TITLE") echo "description=$DESC" >> $GITHUB_OUTPUT echo "title=$TITLE" >> $GITHUB_OUTPUT diff --git a/.github/workflows/release-publisher.yml b/.github/workflows/release-publisher.yml index 203ba685a..c4b0ff3a4 100644 --- a/.github/workflows/release-publisher.yml +++ b/.github/workflows/release-publisher.yml @@ -36,7 +36,7 @@ jobs: # WARNING: This is coupled with generate release commit # if you need to modify, apply the changes accordingly # Script outputs "VERSION RELEASE_TYPE" on success (e.g., "1.2.3 latest") - if OUTPUT=$(.scripts/bash/verify-release-commit "$COMMIT_MSG"); then + if OUTPUT=$(packages/click-ui/.scripts/bash/verify-release-commit "$COMMIT_MSG"); then VERSION=$(echo "$OUTPUT" | awk '{print $1}') RELEASE_TYPE=$(echo "$OUTPUT" | awk '{print $2}') echo "βœ… Detected release PR merge for version $VERSION ($RELEASE_TYPE)" @@ -121,11 +121,13 @@ jobs: - name: Build package if: steps.verify-merge.outputs.is_release == 'true' + working-directory: packages/click-ui run: yarn build - name: Get package info if: steps.verify-merge.outputs.is_release == 'true' id: package-info + working-directory: packages/click-ui run: | VERSION="${{ steps.verify-merge.outputs.version }}" RELEASE_TYPE="${{ steps.verify-merge.outputs.release_type }}" @@ -146,6 +148,7 @@ jobs: - name: Publish to npm over OpenID Connect (OIDC) if: steps.verify-merge.outputs.is_release == 'true' + working-directory: packages/click-ui run: | #Β WARNING: It's preferred NPM for publishing npm publish \ @@ -158,23 +161,20 @@ jobs: id: changelog run: | VERSION="${{ steps.verify-merge.outputs.version }}" - CHANGELOG_PATH="CHANGELOG.md" - CHANGELOG_OUTPUT_TEMP_PATH="/tmp/changelog.txt" - FALLBACK_MSG="πŸ“ See [CHANGELOG.md](./CHANGELOG.md) for details." - CHANGELOG="" - if [[ -f "$CHANGELOG_PATH" ]]; then - CHANGELOG=$(.scripts/bash/extract-changelog "$VERSION" "$CHANGELOG_PATH") - fi + if [[ -f packages/click-ui/CHANGELOG.md ]]; then + CHANGELOG=$(awk "/## $VERSION/,/## [0-9]/" packages/click-ui/CHANGELOG.md | sed '1d;$d' | sed '/^$/d') - if [[ -n "$CHANGELOG" ]]; then - echo "$CHANGELOG" > "$CHANGELOG_OUTPUT_TEMP_PATH" + if [[ -z "$CHANGELOG" ]]; then + CHANGELOG="πŸ“ See [CHANGELOG.md](./CHANGELOG.md) for details." + fi else - echo "No changelog available for version $VERSION." > "$CHANGELOG_OUTPUT_TEMP_PATH" - echo "" >> "$CHANGELOG_OUTPUT_TEMP_PATH" - echo "$FALLBACK_MSG" >> "$CHANGELOG_OUTPUT_TEMP_PATH" + CHANGELOG="No changelog available." fi + # Try persist multiple lines + echo "$CHANGELOG" > /tmp/changelog.txt + - name: Create GitHub Release if: steps.verify-merge.outputs.is_release == 'true' uses: softprops/action-gh-release@v1 diff --git a/.github/workflows/storybook-vercel.yml b/.github/workflows/storybook-vercel.yml index a86fa1814..47a4b1ddc 100644 --- a/.github/workflows/storybook-vercel.yml +++ b/.github/workflows/storybook-vercel.yml @@ -13,7 +13,7 @@ permissions: env: HUSKY: 0 - STORYBOOK_BUILD_DIR: .storybook/out + STORYBOOK_BUILD_DIR: packages/click-ui/.storybook/out VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} @@ -50,6 +50,7 @@ jobs: run: npm install --global vercel@latest - name: Build Storybook + working-directory: packages/click-ui run: yarn storybook:build - name: Pull Vercel Environment Information @@ -99,7 +100,7 @@ jobs: run: | COMMIT_MSG=$(git log -1 --format=%s) - if OUTPUT=$(.scripts/bash/verify-release-commit "$COMMIT_MSG"); then + if OUTPUT=$(packages/click-ui/.scripts/bash/verify-release-commit "$COMMIT_MSG"); then VERSION=$(echo "$OUTPUT" | awk '{print $1}') RELEASE_TYPE=$(echo "$OUTPUT" | awk '{print $2}') echo "πŸ€– Detected release commit for version $VERSION ($RELEASE_TYPE) will deploy..." diff --git a/.github/workflows/unit-tests.yml b/.github/workflows/unit-tests.yml index 13914ca0b..4c339fa2f 100644 --- a/.github/workflows/unit-tests.yml +++ b/.github/workflows/unit-tests.yml @@ -24,4 +24,5 @@ jobs: run: yarn install --immutable - name: unit tests + working-directory: packages/click-ui run: yarn test diff --git a/.gitignore b/.gitignore index db827b233..45e155684 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,10 @@ vite.config.ts.timestamp* .storybook/out tmp/* +# Workspace patterns +packages/*/.storybook/out +packages/*/dist + .yarn/* !.yarn/releases !.yarn/plugins diff --git a/.husky/pre-commit b/.husky/pre-commit index 43c894147..c1bef199f 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -31,24 +31,20 @@ else exit 1 fi -if yarn changeset:verify; then - echo "βœ… Changeset file's included!" +if yarn workspace @clickhouse/click-ui circular-dependency:check; then + echo "βœ… Circular dependency check is good!" else - echo "⚠️ WARNING: You must include a changeset!" - echo "πŸ’‘ Use the command yarn changeset:add" + echo "⚠️ WARNING: Circular dependency checkup found issues, fix them before committing, please!" + echo "πŸ’‘ Use the following command to get further reports in your resolution yarn workspace @clickhouse/click-ui circular-dependency:check" exit 1 fi -if [[ -n "$RUN_DEPS_CHECK" ]]; then - if yarn circular-dependency:check; then - echo "βœ… Circular dependency check is good!" - else - echo "⚠️ WARNING: Circular dependency checkup found issues, fix them before committing, please!" - echo "πŸ’‘ Use the following command to get further reports in your resolution yarn circular-dependency:check" - exit 1 - fi +if yarn workspace @clickhouse/click-ui changeset:verify; then + echo "βœ… Changeset file's included!" else - echo "πŸ¦– Skipped circular dependency check! To enable set RUN_DEPS_CHECK=1" + echo "⚠️ WARNING: You must include a changeset!" + echo "πŸ’‘ Use the command yarn workspace @clickhouse/click-ui changeset:add" + exit 1 fi echo "πŸ‘ Health check completed." diff --git a/package.json b/package.json index 38d9ef72a..c242c1452 100644 --- a/package.json +++ b/package.json @@ -1,492 +1,28 @@ { - "name": "@clickhouse/click-ui", - "version": "0.1.0", - "description": "Official ClickHouse design system react library", - "type": "module", - "license": "Apache-2.0", - "files": [ - "dist" + "name": "click-ui-monorepo", + "private": true, + "workspaces": [ + "packages/*" ], - "main": "./dist/cjs/index.cjs", - "module": "./dist/esm/index.js", - "types": "./dist/types/index.d.ts", - "sideEffects": false, - "exports": { - ".": { - "types": "./dist/types/index.d.ts", - "import": "./dist/esm/index.js", - "require": "./dist/cjs/index.cjs" - }, - "./Accordion": { - "types": "./dist/types/components/Accordion/index.d.ts", - "import": "./dist/esm/components/Accordion/index.js", - "require": "./dist/cjs/components/Accordion/index.cjs" - }, - "./Alert": { - "types": "./dist/types/components/Alert/index.d.ts", - "import": "./dist/esm/components/Alert/index.js", - "require": "./dist/cjs/components/Alert/index.cjs" - }, - "./AutoComplete": { - "types": "./dist/types/components/AutoComplete/index.d.ts", - "import": "./dist/esm/components/AutoComplete/index.js", - "require": "./dist/cjs/components/AutoComplete/index.cjs" - }, - "./Avatar": { - "types": "./dist/types/components/Avatar/index.d.ts", - "import": "./dist/esm/components/Avatar/index.js", - "require": "./dist/cjs/components/Avatar/index.cjs" - }, - "./Badge": { - "types": "./dist/types/components/Badge/index.d.ts", - "import": "./dist/esm/components/Badge/index.js", - "require": "./dist/cjs/components/Badge/index.cjs" - }, - "./BigStat": { - "types": "./dist/types/components/BigStat/index.d.ts", - "import": "./dist/esm/components/BigStat/index.js", - "require": "./dist/cjs/components/BigStat/index.cjs" - }, - "./Button": { - "types": "./dist/types/components/Button/index.d.ts", - "import": "./dist/esm/components/Button/index.js", - "require": "./dist/cjs/components/Button/index.cjs" - }, - "./ButtonGroup": { - "types": "./dist/types/components/ButtonGroup/index.d.ts", - "import": "./dist/esm/components/ButtonGroup/index.js", - "require": "./dist/cjs/components/ButtonGroup/index.cjs" - }, - "./CardHorizontal": { - "types": "./dist/types/components/CardHorizontal/index.d.ts", - "import": "./dist/esm/components/CardHorizontal/index.js", - "require": "./dist/cjs/components/CardHorizontal/index.cjs" - }, - "./CardPrimary": { - "types": "./dist/types/components/CardPrimary/index.d.ts", - "import": "./dist/esm/components/CardPrimary/index.js", - "require": "./dist/cjs/components/CardPrimary/index.cjs" - }, - "./CardPromotion": { - "types": "./dist/types/components/CardPromotion/index.d.ts", - "import": "./dist/esm/components/CardPromotion/index.js", - "require": "./dist/cjs/components/CardPromotion/index.cjs" - }, - "./CardSecondary": { - "types": "./dist/types/components/CardSecondary/index.d.ts", - "import": "./dist/esm/components/CardSecondary/index.js", - "require": "./dist/cjs/components/CardSecondary/index.cjs" - }, - "./Checkbox": { - "types": "./dist/types/components/Checkbox/index.d.ts", - "import": "./dist/esm/components/Checkbox/index.js", - "require": "./dist/cjs/components/Checkbox/index.cjs" - }, - "./CheckboxMultiSelect": { - "types": "./dist/types/components/CheckboxMultiSelect/index.d.ts", - "import": "./dist/esm/components/CheckboxMultiSelect/index.js", - "require": "./dist/cjs/components/CheckboxMultiSelect/index.cjs" - }, - "./CodeBlock": { - "types": "./dist/types/components/CodeBlock/index.d.ts", - "import": "./dist/esm/components/CodeBlock/index.js", - "require": "./dist/cjs/components/CodeBlock/index.cjs" - }, - "./ConfirmationDialog": { - "types": "./dist/types/components/ConfirmationDialog/index.d.ts", - "import": "./dist/esm/components/ConfirmationDialog/index.js", - "require": "./dist/cjs/components/ConfirmationDialog/index.cjs" - }, - "./Container": { - "types": "./dist/types/components/Container/index.d.ts", - "import": "./dist/esm/components/Container/index.js", - "require": "./dist/cjs/components/Container/index.cjs" - }, - "./ContextMenu": { - "types": "./dist/types/components/ContextMenu/index.d.ts", - "import": "./dist/esm/components/ContextMenu/index.js", - "require": "./dist/cjs/components/ContextMenu/index.cjs" - }, - "./DateDetails": { - "types": "./dist/types/components/DateDetails/index.d.ts", - "import": "./dist/esm/components/DateDetails/index.js", - "require": "./dist/cjs/components/DateDetails/index.cjs" - }, - "./DatePicker": { - "types": "./dist/types/components/DatePicker/index.d.ts", - "import": "./dist/esm/components/DatePicker/index.js", - "require": "./dist/cjs/components/DatePicker/index.cjs" - }, - "./Dialog": { - "types": "./dist/types/components/Dialog/index.d.ts", - "import": "./dist/esm/components/Dialog/index.js", - "require": "./dist/cjs/components/Dialog/index.cjs" - }, - "./Dropdown": { - "types": "./dist/types/components/Dropdown/index.d.ts", - "import": "./dist/esm/components/Dropdown/index.js", - "require": "./dist/cjs/components/Dropdown/index.cjs" - }, - "./EllipsisContent": { - "types": "./dist/types/components/EllipsisContent/index.d.ts", - "import": "./dist/esm/components/EllipsisContent/index.js", - "require": "./dist/cjs/components/EllipsisContent/index.cjs" - }, - "./FileTabs": { - "types": "./dist/types/components/FileTabs/index.d.ts", - "import": "./dist/esm/components/FileTabs/index.js", - "require": "./dist/cjs/components/FileTabs/index.cjs" - }, - "./FileUpload": { - "types": "./dist/types/components/FileUpload/index.d.ts", - "import": "./dist/esm/components/FileUpload/index.js", - "require": "./dist/cjs/components/FileUpload/index.cjs" - }, - "./Flyout": { - "types": "./dist/types/components/Flyout/index.d.ts", - "import": "./dist/esm/components/Flyout/index.js", - "require": "./dist/cjs/components/Flyout/index.cjs" - }, - "./FormContainer": { - "types": "./dist/types/components/FormContainer/index.d.ts", - "import": "./dist/esm/components/FormContainer/index.js", - "require": "./dist/cjs/components/FormContainer/index.cjs" - }, - "./GenericLabel": { - "types": "./dist/types/components/GenericLabel/index.d.ts", - "import": "./dist/esm/components/GenericLabel/index.js", - "require": "./dist/cjs/components/GenericLabel/index.cjs" - }, - "./Grid": { - "types": "./dist/types/components/Grid/index.d.ts", - "import": "./dist/esm/components/Grid/index.js", - "require": "./dist/cjs/components/Grid/index.cjs" - }, - "./GridContainer": { - "types": "./dist/types/components/GridContainer/index.d.ts", - "import": "./dist/esm/components/GridContainer/index.js", - "require": "./dist/cjs/components/GridContainer/index.cjs" - }, - "./HoverCard": { - "types": "./dist/types/components/HoverCard/index.d.ts", - "import": "./dist/esm/components/HoverCard/index.js", - "require": "./dist/cjs/components/HoverCard/index.cjs" - }, - "./Icon": { - "types": "./dist/types/components/Icon/index.d.ts", - "import": "./dist/esm/components/Icon/index.js", - "require": "./dist/cjs/components/Icon/index.cjs" - }, - "./IconButton": { - "types": "./dist/types/components/IconButton/index.d.ts", - "import": "./dist/esm/components/IconButton/index.js", - "require": "./dist/cjs/components/IconButton/index.cjs" - }, - "./InputWrapper": { - "types": "./dist/types/components/InputWrapper/index.d.ts", - "import": "./dist/esm/components/InputWrapper/index.js", - "require": "./dist/cjs/components/InputWrapper/index.cjs" - }, - "./Label": { - "types": "./dist/types/components/Label/index.d.ts", - "import": "./dist/esm/components/Label/index.js", - "require": "./dist/cjs/components/Label/index.cjs" - }, - "./Link": { - "types": "./dist/types/components/Link/index.d.ts", - "import": "./dist/esm/components/Link/index.js", - "require": "./dist/cjs/components/Link/index.cjs" - }, - "./MultiAccordion": { - "types": "./dist/types/components/MultiAccordion/index.d.ts", - "import": "./dist/esm/components/MultiAccordion/index.js", - "require": "./dist/cjs/components/MultiAccordion/index.cjs" - }, - "./MultiSelect": { - "types": "./dist/types/components/MultiSelect/index.d.ts", - "import": "./dist/esm/components/MultiSelect/index.js", - "require": "./dist/cjs/components/MultiSelect/index.cjs" - }, - "./NumberField": { - "types": "./dist/types/components/NumberField/index.d.ts", - "import": "./dist/esm/components/NumberField/index.js", - "require": "./dist/cjs/components/NumberField/index.cjs" - }, - "./Pagination": { - "types": "./dist/types/components/Pagination/index.d.ts", - "import": "./dist/esm/components/Pagination/index.js", - "require": "./dist/cjs/components/Pagination/index.cjs" - }, - "./Panel": { - "types": "./dist/types/components/Panel/index.d.ts", - "import": "./dist/esm/components/Panel/index.js", - "require": "./dist/cjs/components/Panel/index.cjs" - }, - "./PasswordField": { - "types": "./dist/types/components/PasswordField/index.d.ts", - "import": "./dist/esm/components/PasswordField/index.js", - "require": "./dist/cjs/components/PasswordField/index.cjs" - }, - "./Popover": { - "types": "./dist/types/components/Popover/index.d.ts", - "import": "./dist/esm/components/Popover/index.js", - "require": "./dist/cjs/components/Popover/index.cjs" - }, - "./ProgressBar": { - "types": "./dist/types/components/ProgressBar/index.d.ts", - "import": "./dist/esm/components/ProgressBar/index.js", - "require": "./dist/cjs/components/ProgressBar/index.cjs" - }, - "./RadioGroup": { - "types": "./dist/types/components/RadioGroup/index.d.ts", - "import": "./dist/esm/components/RadioGroup/index.js", - "require": "./dist/cjs/components/RadioGroup/index.cjs" - }, - "./SearchField": { - "types": "./dist/types/components/SearchField/index.d.ts", - "import": "./dist/esm/components/SearchField/index.js", - "require": "./dist/cjs/components/SearchField/index.cjs" - }, - "./Select": { - "types": "./dist/types/components/Select/index.d.ts", - "import": "./dist/esm/components/Select/index.js", - "require": "./dist/cjs/components/Select/index.cjs" - }, - "./Separator": { - "types": "./dist/types/components/Separator/index.d.ts", - "import": "./dist/esm/components/Separator/index.js", - "require": "./dist/cjs/components/Separator/index.cjs" - }, - "./SidebarCollapsibleItem": { - "types": "./dist/types/components/SidebarCollapsibleItem/index.d.ts", - "import": "./dist/esm/components/SidebarCollapsibleItem/index.js", - "require": "./dist/cjs/components/SidebarCollapsibleItem/index.cjs" - }, - "./SidebarCollapsibleTitle": { - "types": "./dist/types/components/SidebarCollapsibleTitle/index.d.ts", - "import": "./dist/esm/components/SidebarCollapsibleTitle/index.js", - "require": "./dist/cjs/components/SidebarCollapsibleTitle/index.cjs" - }, - "./SidebarNavigationItem": { - "types": "./dist/types/components/SidebarNavigationItem/index.d.ts", - "import": "./dist/esm/components/SidebarNavigationItem/index.js", - "require": "./dist/cjs/components/SidebarNavigationItem/index.cjs" - }, - "./SidebarNavigationTitle": { - "types": "./dist/types/components/SidebarNavigationTitle/index.d.ts", - "import": "./dist/esm/components/SidebarNavigationTitle/index.js", - "require": "./dist/cjs/components/SidebarNavigationTitle/index.cjs" - }, - "./Spacer": { - "types": "./dist/types/components/Spacer/index.d.ts", - "import": "./dist/esm/components/Spacer/index.js", - "require": "./dist/cjs/components/Spacer/index.cjs" - }, - "./SplitButton": { - "types": "./dist/types/components/SplitButton/index.d.ts", - "import": "./dist/esm/components/SplitButton/index.js", - "require": "./dist/cjs/components/SplitButton/index.cjs" - }, - "./Switch": { - "types": "./dist/types/components/Switch/index.d.ts", - "import": "./dist/esm/components/Switch/index.js", - "require": "./dist/cjs/components/Switch/index.cjs" - }, - "./Table": { - "types": "./dist/types/components/Table/index.d.ts", - "import": "./dist/esm/components/Table/index.js", - "require": "./dist/cjs/components/Table/index.cjs" - }, - "./Tabs": { - "types": "./dist/types/components/Tabs/index.d.ts", - "import": "./dist/esm/components/Tabs/index.js", - "require": "./dist/cjs/components/Tabs/index.cjs" - }, - "./Text": { - "types": "./dist/types/components/Text/index.d.ts", - "import": "./dist/esm/components/Text/index.js", - "require": "./dist/cjs/components/Text/index.cjs" - }, - "./TextAreaField": { - "types": "./dist/types/components/TextAreaField/index.d.ts", - "import": "./dist/esm/components/TextAreaField/index.js", - "require": "./dist/cjs/components/TextAreaField/index.cjs" - }, - "./TextField": { - "types": "./dist/types/components/TextField/index.d.ts", - "import": "./dist/esm/components/TextField/index.js", - "require": "./dist/cjs/components/TextField/index.cjs" - }, - "./Title": { - "types": "./dist/types/components/Title/index.d.ts", - "import": "./dist/esm/components/Title/index.js", - "require": "./dist/cjs/components/Title/index.cjs" - }, - "./Toast": { - "types": "./dist/types/components/Toast/index.d.ts", - "import": "./dist/esm/components/Toast/index.js", - "require": "./dist/cjs/components/Toast/index.cjs" - }, - "./Tooltip": { - "types": "./dist/types/components/Tooltip/index.d.ts", - "import": "./dist/esm/components/Tooltip/index.js", - "require": "./dist/cjs/components/Tooltip/index.cjs" - }, - "./VerticalStepper": { - "types": "./dist/types/components/VerticalStepper/index.d.ts", - "import": "./dist/esm/components/VerticalStepper/index.js", - "require": "./dist/cjs/components/VerticalStepper/index.cjs" - }, - "./hooks": { - "types": "./dist/types/hooks/index.d.ts", - "import": "./dist/esm/hooks/index.js", - "require": "./dist/cjs/hooks/index.cjs" - }, - "./hooks/internal": null - }, - "keywords": [ - "click-ui", - "clickhouse", - "design system" - ], - "repository": { - "type": "git", - "url": "git+https://github.com/ClickHouse/click-ui.git" + "packageManager": "yarn@4.5.3", + "engines": { + "node": ">=22.12.0" }, - "homepage": "https://clickhouse.com", "scripts": { - "build": ".scripts/bash/build_pkg_dist", - "build:analyze": "ANALYZE=true vite build", - "build:health_check": ".scripts/bash/build_output_health_check", - "build-storybook": "storybook build", - "build:watch": "watch 'yarn build' ./src", - "changeset:add": ".scripts/bash/changeset-add", - "changeset:status": "yarn changeset status", - "changeset:verify": ".scripts/bash/changeset-verification", - "circular-dependency:check": ".scripts/bash/circular-dependency-check", - "changeset:version": "yarn changeset version", - "convert:logo": ".scripts/js/convert-svg-to-react-component --type=logos", - "convert:icon": ".scripts/js/convert-svg-to-react-component --type=icons", - "convert:flag": ".scripts/js/convert-svg-to-react-component --type=flags", - "convert:payment": ".scripts/js/convert-svg-to-react-component --type=payments", - "convert:regenerate": ".scripts/js/convert-svg-to-react-component --regenerate", - "dev": "yarn storybook", - "format": ".scripts/bash/format", - "format:fix": ".scripts/bash/format --write", - "generate:exports": ".scripts/js/generate-exports", - "generate:tokens": "node ./.scripts/js/generate-tokens.js && yarn format:fix src/theme/tokens/**/*.ts", - "lint": "eslint src --report-unused-disable-directives", - "lint:fix": "eslint src --report-unused-disable-directives --fix", - "prepare": "husky", - "prettify": "yarn format:fix", - "preview": "vite preview", - "storybook": "storybook dev -p 6006", - "storybook:build": "storybook build -o .storybook/out", - "storybook:serve": "yarn dlx http-server .storybook/out", - "test": "vitest", - "test:chromatic": "yarn dlx chromatic", - "test:visual": "playwright test", - "test:visual:report": "playwright show-report", - "test:visual:ui": "playwright test --ui", - "test:visual:update": "playwright test --update-snapshots", - "test:watch": "DEBUG_PRINT_LIMIT=100000 vitest --watch", - "typecheck": "tsc --noEmit" - }, - "dependencies": { - "@h6s/calendar": "2.0.1", - "@radix-ui/react-accordion": "1.2.12", - "@radix-ui/react-avatar": "1.1.1", - "@radix-ui/react-checkbox": "1.1.2", - "@radix-ui/react-context-menu": "2.2.2", - "@radix-ui/react-dialog": "1.1.2", - "@radix-ui/react-dismissable-layer": "1.1.1", - "@radix-ui/react-dropdown-menu": "2.1.2", - "@radix-ui/react-hover-card": "1.1.2", - "@radix-ui/react-popover": "1.1.2", - "@radix-ui/react-popper": "1.2.1", - "@radix-ui/react-radio-group": "1.2.1", - "@radix-ui/react-separator": "1.1.1", - "@radix-ui/react-switch": "1.1.1", - "@radix-ui/react-tabs": "1.1.1", - "@radix-ui/react-toast": "1.2.2", - "@radix-ui/react-tooltip": "1.1.2", - "dayjs": "^1.11.19", - "lodash-es": "^4.17.23", - "react-sortablejs": "^6.1.4", - "react-syntax-highlighter": "^16.1.0", - "react-virtualized-auto-sizer": "^1.0.20", - "react-window": "^1.8.9", - "sortablejs": "^1.15.0", - "styled-components": "^6.1.11" + "build": "yarn workspaces foreach -A --topological run build", + "test": "yarn workspaces foreach -A --topological run test", + "lint": "yarn workspaces foreach -A --topological run lint", + "lint:fix": "yarn workspaces foreach -A --topological run lint:fix", + "format": "yarn workspaces foreach -A --topological run format", + "format:fix": "yarn workspaces foreach -A --topological run format:fix", + "typecheck": "yarn workspaces foreach -A --topological run typecheck", + "prepare": "husky" }, "devDependencies": { - "@changesets/cli": "^2.29.8", - "@playwright/test": "^1.57.0", - "@storybook/addon-a11y": "^10.1.10", - "@storybook/addon-docs": "^10.1.10", - "@storybook/addon-links": "^10.1.10", - "@storybook/react-vite": "^10.1.10", - "@svgr/cli": "^8.1.0", - "@testing-library/dom": "^10.1.0", - "@testing-library/jest-dom": "^6.4.5", - "@testing-library/react": "^16.1.0", - "@testing-library/user-event": "^14.5.2", - "@tokens-studio/sd-transforms": "^1.2.0", - "@types/eslint-plugin-react-refresh": "^0.4.0", - "@types/lodash-es": "^4.17.12", - "@types/node": "^24.10.1", - "@types/react": "18.3.1", - "@types/react-dom": "18.3.1", - "@types/react-syntax-highlighter": "^15.5.13", - "@types/react-window": "^1.8.8", - "@types/sortablejs": "^1.15.2", - "@vitejs/plugin-react": "^5.1.2", - "babel-plugin-styled-components": "^2.1.4", - "chromatic": "^13.3.4", - "date-fns": "4.1.0", - "eslint": "^9", - "eslint-import-resolver-typescript": "^4.4.4", - "eslint-plugin-import": "^2.32.0", - "eslint-plugin-prefer-arrow-functions": "^3.3.2", - "eslint-plugin-react-hooks": "^5", - "eslint-plugin-react-refresh": "0.4.7", - "eslint-plugin-storybook": "^10.1.10", - "globals": "^16.5.0", - "husky": "^9.1.7", - "jsdom": "^24.0.0", - "prettier": "3.7.4", - "prop-types": "^15.8.1", - "react": "18.3.1", - "react-dom": "18.3.1", - "rollup-plugin-visualizer": "^6.0.5", - "skott": "^0.35.4", - "storybook": "^10.1.10", - "storybook-addon-pseudo-states": "^10.1.10", - "style-dictionary": "^5.0.0", - "stylis": "^4.3.0", - "ts-node": "^10.9.1", - "typescript": "^5.5.3", - "typescript-eslint": "^8", - "vite": "^7.3.0", - "vite-plugin-dts": "^4.3.0", - "vite-plugin-externalize-deps": "^0.10.0", - "vite-tsconfig-paths": "^6.0.5", - "vitest": "^2.1.8", - "watch": "^1.0.2" - }, - "peerDependencies": { - "dayjs": "^1.11.19", - "react": "^18.3.1 || ^19.0.0", - "react-dom": "^18.3.1 || ^19.0.0", - "styled-components": "^6.1.11" + "husky": "^9.1.7" }, "resolutions": { "@types/react": "18.3.1", - "@types/react-dom": "18.3.1", - "styled-components": "6.1.11" - }, - "packageManager": "yarn@4.5.3", - "engines": { - "node": ">=22.12.0" + "@types/react-dom": "18.3.1" } } diff --git a/packages/click-ui/.changeset/add-chart-icons.md b/packages/click-ui/.changeset/add-chart-icons.md new file mode 100644 index 000000000..34231cb58 --- /dev/null +++ b/packages/click-ui/.changeset/add-chart-icons.md @@ -0,0 +1,5 @@ +--- +"@clickhouse/click-ui": minor +--- + +Added new icon components: ChartCloud and ChartSquare. diff --git a/packages/click-ui/.changeset/add-design-tokens-package.md b/packages/click-ui/.changeset/add-design-tokens-package.md new file mode 100644 index 000000000..26d20c941 --- /dev/null +++ b/packages/click-ui/.changeset/add-design-tokens-package.md @@ -0,0 +1,36 @@ +--- +"@clickhouse/design-tokens": minor +--- + +Initial release of the design-tokens package. Provides DTCG-compliant design token definitions for colors, spacing, radius, sizing, and typography. Includes Terrazzo-based CSS output generation. + +**Package pathname:** `packages/design-tokens` + +**Token Dictionary Location:** `packages/design-tokens/dictionary/` + +- `primitives.dtcg.json` +- `semantic.dtcg.json` - Semantic color tokens (references primitives) +- `spacing.dtcg.json` - Spacing scale (8px base unit) +- `radius.dtcg.json` - Border radius scale +- `sizing.dtcg.json` - Icon and component sizes +- `typography.dtcg.json` - Font sizes, weights, and line heights + +**Creating Tokens:** Add or modify tokens in the dictionary files following DTCG format: + +```json +{ + "$type": "dimension", + "$value": { "value": 8, "unit": "px" }, + "$description": "8px, base spacing" +} +``` + +**Building:** Run `yarn tokens:build` to generate `packages/design-tokens/dist/tokens.css`. + +**Configuration:** `packages/design-tokens/config.js` contains build settings: + +- `CSS_VAR_PREFIX` - CSS variable prefix (default: `cui` β†’ `--cui-*`) +- `DICTIONARY_PATH` - Token dictionary location +- `TOKEN_FILES` - Token files and import order + +See `packages/design-tokens/SPECIFICATION.md` for naming conventions and detailed guidelines. diff --git a/packages/click-ui/.changeset/add-lakekeeper-logo.md b/packages/click-ui/.changeset/add-lakekeeper-logo.md new file mode 100644 index 000000000..237c37949 --- /dev/null +++ b/packages/click-ui/.changeset/add-lakekeeper-logo.md @@ -0,0 +1,12 @@ +--- +'@clickhouse/click-ui': minor +--- + +Add Lakekeeper logo + +**How to use?** + +```tsx +import { Logo } from '@clickhouse/click-ui'; + + diff --git a/packages/click-ui/.changeset/add-planetscale-logo.md b/packages/click-ui/.changeset/add-planetscale-logo.md new file mode 100644 index 000000000..afa728f37 --- /dev/null +++ b/packages/click-ui/.changeset/add-planetscale-logo.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': minor +--- + +Add PlanetScale logo diff --git a/packages/click-ui/.changeset/add-regenerate-command.md b/packages/click-ui/.changeset/add-regenerate-command.md new file mode 100644 index 000000000..3616665e3 --- /dev/null +++ b/packages/click-ui/.changeset/add-regenerate-command.md @@ -0,0 +1,19 @@ +--- +'@clickhouse/click-ui': minor +--- + +Add `convert:regenerate` command to regenerate asset types (logos, icons, flags, payments) without adding new components. This allows refreshing types.ts and registry files (Light/Dark) when the converter script is updated or when imports need to be standardized. + +**How to use?** + +Regenerate all asset types: +``` +yarn convert:regenerate +``` + +Regenerate a specific asset type only: +``` +yarn convert:regenerate --type=icons +``` + +Supported values for `--type`: `logos`, `icons`, `flags`, `payments` diff --git a/packages/click-ui/.changeset/all-adults-enter.md b/packages/click-ui/.changeset/all-adults-enter.md new file mode 100644 index 000000000..263c75835 --- /dev/null +++ b/packages/click-ui/.changeset/all-adults-enter.md @@ -0,0 +1,7 @@ +--- +'@clickhouse/click-ui': patch +--- + +Removes the ESLint/TSLint rule that enforced arrays to be typed using generic syntax (Array) instead of the shorthand array syntax (T[]). + +The generic array annotation style (Array) adds verbosity without meaningful benefit. Removing this lint rule allows developers to use idiomatic TypeScript, such as the more concise T[] shorthand, which reduces friction and improves readability, e.g., TypeScript docs, LSP will show T[] and not Array. diff --git a/packages/click-ui/.changeset/beige-islands-type.md b/packages/click-ui/.changeset/beige-islands-type.md new file mode 100644 index 000000000..dfe6b72ff --- /dev/null +++ b/packages/click-ui/.changeset/beige-islands-type.md @@ -0,0 +1,64 @@ +--- +'@clickhouse/click-ui': minor +--- + +Adds a new `DateTimePicker` component for selecting date and time ranges with precision control. This component combines calendar-based date selection with time input fields, supporting both predefined time ranges and custom selections. + +## What has changed? + +- New `DateTimePicker` component for selecting date-time ranges +- Support for predefined time periods (e.g., "Past 15 minutes", "Past hour") +- Custom date range selection with start/end calendars +- Time input with hours, minutes, and optional seconds +- AM/PM meridiem toggle for 12-hour format +- Calendar can open to the left or right via `openDirection` prop +- Time selection is retained when changing dates +- Support for disabling future dates +- Maximum range length constraint support +- Helper function "predefined time periods for DateTimePicker" for common time ranges + +## How to use? + +Basic usage with custom date range selection: + +```tsx +import { DateTimePicker } from '@clickhouse/click-ui'; + + { + console.log('Selected range:', startDate, endDate); + }} + placeholder="Select date range" +/> +``` + +With predefined time periods: + +```tsx +import { DateTimePicker, getPredefinedTimePeriodsForDateTimePicker } from '@clickhouse/click-ui'; + + { + console.log('Selected range:', startDate, endDate); + }} +/> +``` + +With all options: + +```tsx + handleRangeChange(startDate, endDate)} + openDirection="left" + placeholder="start date – end date" + predefinedTimesList={customPredefinedList} + shouldShowSeconds={true} +/> +``` diff --git a/packages/click-ui/.changeset/beige-signs-invent.md b/packages/click-ui/.changeset/beige-signs-invent.md new file mode 100644 index 000000000..a1f9fca15 --- /dev/null +++ b/packages/click-ui/.changeset/beige-signs-invent.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': minor +--- + +The `useLayoutEffect` watching `headers.length` wasn't triggered when headers were reordered (e.g., in sysadmin EntitiesTable with column selection), causing Column widths to be misaligned after reordering, NaN values appearing during resize operations and an incorrect null check (`-1 !== null`) that was always true. diff --git a/packages/click-ui/.changeset/breezy-nails-remain.md b/packages/click-ui/.changeset/breezy-nails-remain.md new file mode 100644 index 000000000..8d9b78805 --- /dev/null +++ b/packages/click-ui/.changeset/breezy-nails-remain.md @@ -0,0 +1,36 @@ +--- +"@clickhouse/click-ui": minor +--- + +Truncate filenames by shortening the middle revealing critical parts. + +Assume you have: + +``` +console.clickhouse.cloud_Archive.01-01-1975.lorem-ipsum-a-very-long-filename-001.csv +console.clickhouse.cloud_Archive.01-01-1975.lorem-ipsum-a-very-long-filename-005.csv +dashboard.mongodb.atlas_Export.12-15-2024.customer-data-analysis-report-final-v2.json +admin.postgresql.heroku_Backup.03-22-2023.transaction-logs-monthly-summary-march.sql +``` + +In the current faulty version you'd get something like: + +``` +console.clickhouse.cloud_Archive.01-~.csv +console.clickhouse.cloud_Archive.01-~.csv +dashboard.mongodb.atlas_Export.12-1~.csv +admin.postgresql.heroku_Backup.03-2~.csv +``` + +Notice that the first two filenames, when presented truncated, have the same shortened name, making it hard to differentiate. + +In the PR proposed version you'd find easier to identify files if these are named in a maintainable way: + +``` +console.clickh...filename-001.csv +console.clickh...filename-005.csv +dashboard.mong...ort-final-v2.json +admin.postgres...ummary-march.sql +``` + +Notice that the first and last digits help identify the file more concisely, allowing for a shorter length. diff --git a/packages/click-ui/.changeset/chatty-chairs-drop.md b/packages/click-ui/.changeset/chatty-chairs-drop.md new file mode 100644 index 000000000..36813e4ee --- /dev/null +++ b/packages/click-ui/.changeset/chatty-chairs-drop.md @@ -0,0 +1,13 @@ +--- +"@clickhouse/click-ui": minor +--- + +Makes the distributed files "unbundled", effectively moving optimisation to a consumer app concern, e.g. obfuscation, compression, bundling MUST be consumer concerns, the library SHOULD NOT make the consumer bundling process more difficult, it MUST facilitate it! It resolves cyclic imports or circular dependencies, enhances linting to prevent imports from barrel files, making the barrel files more of a public API than an internal API to help prevent circular dependencies. + +From now on, bundling preserves the file tree, externalises packages based on the package.json dependency declaration automatically, instead of managing them manually as the current version does. It allows deep imports, e.g. @clickhouse/click-ui/components/Button. + +Exports files are placed by target resolution, e.g. dist/esm|cjs. It has removed UMD until further notice (why is the original version providing UMD, what's the use-case?). As a component library, in principle, it should be ESM and CJS (due to NodeJS SSR) compatible in the worse case scenarios. + +It reduces build times from > 1 minute to < 22 seconds. + +More importantly, this initial revision provides tree-shaking support, helping reduce file size. Which can now be assessed with an optional builder feature to analyse and visualise the package dependency graph, file sizes, etc. diff --git a/packages/click-ui/.changeset/chatty-terms-remain.md b/packages/click-ui/.changeset/chatty-terms-remain.md new file mode 100644 index 000000000..8e3d8599c --- /dev/null +++ b/packages/click-ui/.changeset/chatty-terms-remain.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Explicitly sets box-sizing: content-box on predefined date picker lists. This prevents them for being pushed to too small a size when the app they're in uses a different box sizing model" diff --git a/packages/click-ui/.changeset/chore-flyout-content-focus-handlers.md b/packages/click-ui/.changeset/chore-flyout-content-focus-handlers.md new file mode 100644 index 000000000..8783e743b --- /dev/null +++ b/packages/click-ui/.changeset/chore-flyout-content-focus-handlers.md @@ -0,0 +1,26 @@ +--- +'@clickhouse/click-ui': patch +--- + +Restore `onOpenAutoFocus` and `onCloseAutoFocus` props to `FlyoutContentProps`. + +These focus management props were inadvertently removed during the decoupling from Radix UI types. They are now explicitly added back to provide parity with the `Dialog` component and support common accessibility use cases. + +Note: These props are optional and only needed when customizing default focus behavior. + +**How to use?** + +```tsx + { + // Prevent default focus behavior + e.preventDefault(); + // Implement custom focus logic + }} + onCloseAutoFocus={() => { + // Handle focus when flyout closes + }} +> + {children} + +``` diff --git a/packages/click-ui/.changeset/chore-replace-react-dom-server-render-to-static-markup.md b/packages/click-ui/.changeset/chore-replace-react-dom-server-render-to-static-markup.md new file mode 100644 index 000000000..a27ccb7ec --- /dev/null +++ b/packages/click-ui/.changeset/chore-replace-react-dom-server-render-to-static-markup.md @@ -0,0 +1,7 @@ +--- +'@clickhouse/click-ui': minor +--- + +Removes `react-dom/server` `renderToStaticMarkup` from copy grid elements of `Grid` to favour the recommended `createRoot` approach suggested by React's official documentation. + +According to React [renderToStaticMarkup](https://react.dev/reference/react-dom/server/renderToStaticMarkup#caveats) "The renderToStaticMarkup works in the browser, but using it in the client code is not recommended. If you need to render a component to HTML in the browser" and React [renderToString](https://react.dev/reference/react-dom/server/renderToString) "Importing react-dom/server on the client unnecessarily increases your bundle size and should be avoided. If you need to render some component to HTML in the browser, use createRoot and read HTML from the DOM". diff --git a/packages/click-ui/.changeset/chubby-items-arrive.md b/packages/click-ui/.changeset/chubby-items-arrive.md new file mode 100644 index 000000000..75e83ecf1 --- /dev/null +++ b/packages/click-ui/.changeset/chubby-items-arrive.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': minor +--- + +Reconcile FileUpload and FileMultiUpload to prevent and reduce concurrent implementations, e.g. behaviour, features, styles, etc. In the previous version, the multiple file upload component was recreating the file upload in its file context which is prone to mistakes and hard to maintain. diff --git a/packages/click-ui/.changeset/common-llamas-bow.md b/packages/click-ui/.changeset/common-llamas-bow.md new file mode 100644 index 000000000..b29bf34e7 --- /dev/null +++ b/packages/click-ui/.changeset/common-llamas-bow.md @@ -0,0 +1,15 @@ +--- +'@clickhouse/click-ui': minor +--- + +Cleans up the build configuration, token generation and related processes. By removing legacy styling setups and simplifying the token generation to only the required setup. This work is important before starting to migrate off styled components. Effectively, reducing technical debt. + +For example, the SCSS setup is not providing any value, e.g. there was an unused 320KB file named src/styles/tokens-light-dark.scss. + +It seems that the setup is [promoted as](https://github.com/ClickHouse/click-ui/pull/740) offering "tree-shaking" benefits, but I suspect this is not correct from what I could assess. With that being said, even if the consumer app, only use a single variable, the entire 320KB of CSS custom properties would be spit into the final CSS bundle! + +Considering that variables change with time, and if not managed correctly, might increase dramatically, the file size would increase and make the app's distributed bundle size increase for no additional value. Think that tree shaking means a sort of static analysis that has to determine which tokens (bits of code) are not used, to remove them safely. It's not the case here with the current setup, e.g. the whole ":root" stuff would go in. + +Other changes might have extended to removing legacy, unused or orphaned CSS files found in the project. + +Finally, the changes here help to clear or reduce some of the technical debt, e.g. taking a step back before jumping much further. There are other pending PR, which once merged will allow further progress to improve the code base. diff --git a/packages/click-ui/.changeset/common-meteors-hammer.md b/packages/click-ui/.changeset/common-meteors-hammer.md new file mode 100644 index 000000000..d467148d8 --- /dev/null +++ b/packages/click-ui/.changeset/common-meteors-hammer.md @@ -0,0 +1,6 @@ +--- +'@clickhouse/click-ui': minor +--- + +Prevent dayjs mismatch version blocking package dependency install. +On CI run, there's a step which installs with flag "immutable". Because there's a dayjs mismatch version, the install process errors. diff --git a/.changeset/config.json b/packages/click-ui/.changeset/config.json similarity index 90% rename from .changeset/config.json rename to packages/click-ui/.changeset/config.json index ad6f18a14..b8213321c 100644 --- a/.changeset/config.json +++ b/packages/click-ui/.changeset/config.json @@ -4,7 +4,7 @@ "commit": false, "fixed": [], "linked": [], - "access": "restricted", + "access": "public", "baseBranch": "main", "updateInternalDependencies": "patch", "ignore": [] diff --git a/packages/click-ui/.changeset/cool-onions-wink.md b/packages/click-ui/.changeset/cool-onions-wink.md new file mode 100644 index 000000000..a8c5ace03 --- /dev/null +++ b/packages/click-ui/.changeset/cool-onions-wink.md @@ -0,0 +1,43 @@ +--- +'@clickhouse/click-ui': patch +--- + +Deprecated StyledLinkProps and linkStyles in the public API. These will be removed in a future release to prevent leaking styled-components implementation details, e.g. $size and $weight transient props in the Public API + +## Migration Guide (Recommended) + +The Link component already: +- Accepts a component prop to render as any element type +- Accepts size and weight props +- Passes through all other props, e.g. onClick, etc. + +We recommend migrating away from the deprecated APIs: +- Replace StyledLinkProps and linkStyles usage +- Remove the CuiStyledLink styled component definition +- Use `` directly + +Current common consumer pattern uses the deprecated internal styling APIs: + +```tsx +import { Link } from 'react-router-dom'; +import { linkStyles, StyledLinkProps } from '@clickhouse/click-ui'; + +const CuiStyledLink = styled(Link)` + ${linkStyles} +`; + +text +``` + +Recommended Pattern: + +```tsx +import { Link as RouterLink } from 'react-router-dom'; +import { Link } from '@clickhouse/click-ui'; + +text +``` + +**Note:** These deprecated APIs will be removed in a future major release. Please migrate before then to avoid breaking changes. diff --git a/packages/click-ui/.changeset/cuddly-monkeys-kiss.md b/packages/click-ui/.changeset/cuddly-monkeys-kiss.md new file mode 100644 index 000000000..ad12c1e76 --- /dev/null +++ b/packages/click-ui/.changeset/cuddly-monkeys-kiss.md @@ -0,0 +1,13 @@ +--- +'@clickhouse/click-ui': patch +--- + +Add a new logo asset for Apache Iceberg + +**How to use?** + +```tsx +import { Logo } from '@clickhouse/click-ui'; + + +``` diff --git a/packages/click-ui/.changeset/cuddly-rocks-sleep.md b/packages/click-ui/.changeset/cuddly-rocks-sleep.md new file mode 100644 index 000000000..423fb63d8 --- /dev/null +++ b/packages/click-ui/.changeset/cuddly-rocks-sleep.md @@ -0,0 +1,19 @@ +--- +'@clickhouse/click-ui': minor +--- + +A version maintenance branch strategy enables the Click UI team to support older versions simultaneously, which is important since consumer applications, e.g. control plane or hyperdx might depend on stable versions and cannot immediately upgrade to the latest release. + +The introduction of this branching strategy conceptually and in the release workflow, practically, allows the team to support active development, incentivise experimentation, change, improvements, iteration, etc while shipping critical bug fixes or security patches to older versions (as long as compatible). This ensures that "stable" versions still receive necessary fixes without forcing potential breaking changes or showing new untested features. + +In the release workflow, implemented automation for it by handling the tedious parts to help reduce human errors and ensure a consistent release flow; But also for our own sanity, as otherwise it'd cause overwhelming version/release management. + +## How to use? + +To create a new release, locate the [create release](https://github.com/ClickHouse/click-ui/actions/workflows/create-release.yml) and use the interface to select the release type, e.g. release candidate (rc), testing, stable or latest. + +It'll create a new Pull request for review, e.g. changelog, version bump, etc. There, you have the opportunity to make any further tweaks, refinements and check if everything's correct. + +You can find the pull requests in the GitHub tab [Pull Request](https://github.com/ClickHouse/click-ui/pulls). E.g. let's say you're about to release v0.1.0-rc.1, you'd find `chore: πŸ€– release v0.1.0-rc.1 (rc)`. + +To learn more read the [release](https://github.com/ClickHouse/click-ui/tree/chore/init-version-maintenance-branch-strategy?tab=readme-ov-file#release) worfklow documentation. diff --git a/packages/click-ui/.changeset/cute-cats-behave.md b/packages/click-ui/.changeset/cute-cats-behave.md new file mode 100644 index 000000000..ba68da9b1 --- /dev/null +++ b/packages/click-ui/.changeset/cute-cats-behave.md @@ -0,0 +1,7 @@ +--- +'@clickhouse/click-ui': minor +--- + +Current select breaks in smaller viewports. Notice that the Icon is misplaced, comparatively with desktop viewport. + +This change provides a fix, to make it work seamlessly across viewport sizes. diff --git a/packages/click-ui/.changeset/dark-pigs-visit.md b/packages/click-ui/.changeset/dark-pigs-visit.md new file mode 100644 index 000000000..0dbe235d1 --- /dev/null +++ b/packages/click-ui/.changeset/dark-pigs-visit.md @@ -0,0 +1,39 @@ +--- +"@clickhouse/click-ui": minor +--- + +The previous versions of click-ui (e.g., <= 0.0.250), break on the latest of Nextjs, Vitejs, any React >= 19 or RSC enabled builds. To mitigate it, this initial change provides the minimal setup required for it to work in such environments, e.g. when installing the package, it should run in dev and build processes. +It does NOT try to modify, replace, introduce or change breaking changes; there might be a few subtle changes related to Radix. At the time of writing, the library requires a browser runtime, which means that is client-only. Separately, there'll be other PR to address other related concerns and expand on this initial PR, e.g. none interactive components shall render server-side. + +# What changed? + +The @clickhouse/click-ui package was updated, which includes an updated Radix UI dependency that removed the side, align, and sideOffset props from ContextMenu.Content. + +Radix made this change because the ContextMenuContentProps TypeScript type now explicitly omits these props: + +``` +interface ContextMenuContentProps extends Omit {} +``` + +1. Context menus are fundamentally different from dropdown menus β€” they open at the cursor position (where the user right-clicked), not relative to a trigger element + +2. The side and align props don't make sense for context menus since there's no anchor element to position against + +3. Smaller bundle size β€” removing unused positioning logic reduces the bundle for ContextMenu consumers + +# Migration Guide + +Before: +After: + +Before: sideOffset={5} +After: Use alignOffset for vertical spacing if needed + +The props were never functionally useful for context menus (which position at the cursor), so removing them is just a cleanup. + +Simply delete these props from your ContextMenu.Content components. + +Sources: +- https://www.radix-ui.com/primitives/docs/overview/releases +- https://github.com/radix-ui/primitives/issues/3208 +- https://www.radix-ui.com/primitives/docs/components/context-menu diff --git a/packages/click-ui/.changeset/deep-wolves-guess.md b/packages/click-ui/.changeset/deep-wolves-guess.md new file mode 100644 index 000000000..20cd19db9 --- /dev/null +++ b/packages/click-ui/.changeset/deep-wolves-guess.md @@ -0,0 +1,5 @@ +--- +"@clickhouse/click-ui": patch +--- + +Introduces a simple workflow to manage versioning and changelogs diff --git a/packages/click-ui/.changeset/dirty-facts-hammer.md b/packages/click-ui/.changeset/dirty-facts-hammer.md new file mode 100644 index 000000000..3599b9707 --- /dev/null +++ b/packages/click-ui/.changeset/dirty-facts-hammer.md @@ -0,0 +1,33 @@ +--- +'@clickhouse/click-ui': minor +--- + +Introduces a centralised asset configuration with unified aliases and deprecated name mappings. This provides a single source of truth for asset name resolution across all asset types (Icons, Logos, Flags, and Payments), helping to resolve circular dependencies while offering a flexible aliasing system. + +### Why aliases? + +Asset naming conventions use kebab-case (e.g., `c-sharp`, `arrow-down`) to facilitate file organisation and ensure valid JavaScript identifiers. However, users may prefer more intuitive names that don't follow these conventions. Aliases bridge this gap. + +For example, `c#` contains a `#` character which is not a valid JavaScript identifier, but users might still prefer using `c#` over `c-sharp`. + +### How to use aliases + +Aliases are defined in `src/components/Assets/config.ts` under `ASSET_NAME_MAPPINGS.aliases`: + +```tsx +export const ASSET_NAME_MAPPINGS = { + aliases: { + 'c#': 'c-sharp', + // Add more aliases as needed + } as AssetAliasMap, + // ... +}; +``` + +The alias is then automatically resolved when using any asset component: + +```tsx +// Both of these work identically: + + +``` diff --git a/packages/click-ui/.changeset/dull-pets-watch.md b/packages/click-ui/.changeset/dull-pets-watch.md new file mode 100644 index 000000000..db657d2bc --- /dev/null +++ b/packages/click-ui/.changeset/dull-pets-watch.md @@ -0,0 +1,12 @@ +--- +'@clickhouse/click-ui': minor +--- + +Adds keyboard support for resizing the table column, e.g. on the tab column separator "focus", the user can now press keyboard arrows/cursor keys (left or right) for controlling the resizing direction. + +The changes were made to let everyone use the resize feature, not just mouse users, e.g. improved accessibility. + + +## How to use? + +On a view that includes a table element, press the TAB key on your keyboard to select the column separator. Once the separator is focused, use the arrow/cursor left and right keys to control the resize direction. Press escape key (ESC) to leave focus. diff --git a/packages/click-ui/.changeset/fair-breads-joke.md b/packages/click-ui/.changeset/fair-breads-joke.md new file mode 100644 index 000000000..86e40ff65 --- /dev/null +++ b/packages/click-ui/.changeset/fair-breads-joke.md @@ -0,0 +1,39 @@ +--- +'@clickhouse/click-ui': minor +--- + +Provides control to fix the the Date picker content misalignment on smaller viewports or resizing. + +**What changed?** + +- Exposed `responsivePositioning` prop on `DatePicker` and `DateRangePicker` components (default: `true`) +- When enabled, dropdowns automatically adjust position to stay within viewport with 100px padding +- This fixes the Date picker dropdown becoming misaligned on resize and smaller viewports + +**How to use?** + +All dropdowns now automatically adjust to stay within viewport by default. + +To disable this behavior use the `responsivePositioning` prop: + +```tsx +// Disable responsive positioning on Dropdown + + Open + + Item + + + +// Disable on DatePicker + + +// Disable on DateRangePicker + +``` diff --git a/packages/click-ui/.changeset/fair-fans-listen.md b/packages/click-ui/.changeset/fair-fans-listen.md new file mode 100644 index 000000000..e5500f005 --- /dev/null +++ b/packages/click-ui/.changeset/fair-fans-listen.md @@ -0,0 +1,33 @@ +--- +'@clickhouse/click-ui': minor +--- + +Introduced a new date-range picker using a simple two-phase process for year and month selection to make the date selection user experience more elegant. + +Currently, jumping through many years requires multiple clicks and scrolls, making the whole process tiring. The issue was originally reported in reported issue [#752](https://github.com/ClickHouse/click-ui/issues/752). + +**How to use?** + +To quickly navigate to a different month and year in the Datepicker: + +1. Click the header showing the current month and year (e.g., "Feb 2026") +2. Select your desired year from the grid (current year is highlighted) +3. Select the month from the grid (current month is highlighted) +4. Select the day from the calendar + +This allows you to jump to any date without clicking through months one at a time. + +**Progressive input display** + +As you progress through the two-phase selection, the input field updates to reflect your choices: + +- After selecting a year: displays "2026" +- After selecting a month: displays "Feb 2026" +- After selecting a day: displays the full date "Feb 26, 2026" + +If the picker is dismissed before completing the selection, the input reverts to the previously selected date. + +**Visual improvements** + +- Current day, month, and year are highlighted with an active background +- When a date is selected, only the selected date shows the active highlight (not today) diff --git a/packages/click-ui/.changeset/famous-pillows-double.md b/packages/click-ui/.changeset/famous-pillows-double.md new file mode 100644 index 000000000..1fd3e2e82 --- /dev/null +++ b/packages/click-ui/.changeset/famous-pillows-double.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Show deprecation warning for TableHeaderType to favour type TableColumnConfigProps diff --git a/packages/click-ui/.changeset/fast-drinks-argue.md b/packages/click-ui/.changeset/fast-drinks-argue.md new file mode 100644 index 000000000..abb92c5d5 --- /dev/null +++ b/packages/click-ui/.changeset/fast-drinks-argue.md @@ -0,0 +1,38 @@ +--- +'@clickhouse/click-ui': minor +--- + +The Click-UI source code has several circular dependencies that must be resolved. + +During the resolution of component path redundancies and public API encapsulation in #798, several circular dependencies were exposed. There, some quick basic fixes were applied to allow to progress, but it was found that a separate PR was needed to resolve them. + +**What changed?** + +The `InitCUIThemeScript` component and `InitCUIThemeScriptProps` type were previously exported via `src/theme/index.ts` (which has been removed). They are now explicitly exported from the main entry point (`src/index.ts`). Consumers using SSR theme injection must update their imports: + +```tsx +// Before +import { InitCUIThemeScript } from '@clickhouse/click-ui/theme'; + +// After +import { InitCUIThemeScript } from '@clickhouse/click-ui'; +``` + + +**Additional cleanup:** + +Removed orphaned subpath exports for `CrossButton`, `EmptyButton`, and `GridCenter`. These components were moved to `@/components/Common` in a previous refactor but duplicate directories were left behind. They are now exclusively available via the Common module: + +```tsx +// Before +import { CrossButton } from '@clickhouse/click-ui/CrossButton'; + +// After +import { CrossButton } from '@clickhouse/click-ui'; +// or for internal use: +import { CrossButton } from '@/components/Common'; +``` + +**Bug fix:** + +Fixed a broken type export in `src/components/Common/index.ts` that was referencing a deleted file (`Common.types.ts`). The `TextSize`, `TextWeight`, and `CursorOptions` types are now correctly exported from their respective source files (`Typography` and `Panel`). diff --git a/packages/click-ui/.changeset/fiery-shirts-brush.md b/packages/click-ui/.changeset/fiery-shirts-brush.md new file mode 100644 index 000000000..006ebe796 --- /dev/null +++ b/packages/click-ui/.changeset/fiery-shirts-brush.md @@ -0,0 +1,41 @@ +--- +'@clickhouse/click-ui': minor +--- + +The team should have full control over the Public API to manage which resources are available for use in consumer applications. Previously, consumer applications had unrestricted access to internal resources, which is undesirable. + +For example, third-party APIs like the primitive components provided by Radix UI were directly exposed, meaning that if those primitives were ever swapped out, any consumer applications depending on them would break due to tight coupling. + +With these changes in place, core maintainers can now manage the Public API through a clear and friendlier interface. + +## Removed Paths + +The following subpath exports have been removed as they were intended as internal implementation details: + +- `@clickhouse/click-ui/Collapsible` +- `@clickhouse/click-ui/IconWrapper` +- `@clickhouse/click-ui/MiddleTruncator` + +If you were importing from these paths, please migrate to the public API exports from the main entry point (`@clickhouse/click-ui`). + +## How to use? + +The public API is controlled through the main barrel file at `src/index.ts`. This file serves as the single source of truth for all components, types, and utilities exported by the package. + +> **Note:** The `generate:exports` script uses the TypeScript Compiler API to parse `src/index.ts` directly and extract only the components that are explicitly exported. This ensures that only public API components get subpath exports in `package.json`, while internal components remain inaccessible via direct imports. + +Maintainers can add or remove components from the public API by updating the exports in this file. Each export should include both the component and its associated types to ensure consumers have full type support. + +Here's an example of `src/index.ts`: + +```ts +// Adding a new component to the public API +export { Button } from './components/Button'; +export type { ButtonProps } from './components/Button'; + +// Removing a component (simply delete) +``` + +After, you must run the `generate:exports` to update the component-level exports in the package.json file. + +Once complete, commit your changes. diff --git a/packages/click-ui/.changeset/fix-missing-extension-when-esm-modules-imported.md b/packages/click-ui/.changeset/fix-missing-extension-when-esm-modules-imported.md new file mode 100644 index 000000000..160c25015 --- /dev/null +++ b/packages/click-ui/.changeset/fix-missing-extension-when-esm-modules-imported.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Consolidate dayjs imports and plugin configuration into `src/utils/date.ts`. The dayjs package does not declare exports for its plugins, requiring explicit `.js` extensions in ESM environments. Centralizing these imports ensures consistent usage across components. diff --git a/.changeset/fix-missing-focus-token-found-in-ts-but-not-dictionary.md b/packages/click-ui/.changeset/fix-missing-focus-token-found-in-ts-but-not-dictionary.md similarity index 100% rename from .changeset/fix-missing-focus-token-found-in-ts-but-not-dictionary.md rename to packages/click-ui/.changeset/fix-missing-focus-token-found-in-ts-but-not-dictionary.md diff --git a/.changeset/fix-textcolor-warning.md b/packages/click-ui/.changeset/fix-textcolor-warning.md similarity index 100% rename from .changeset/fix-textcolor-warning.md rename to packages/click-ui/.changeset/fix-textcolor-warning.md diff --git a/packages/click-ui/.changeset/floppy-islands-stand.md b/packages/click-ui/.changeset/floppy-islands-stand.md new file mode 100644 index 000000000..d560f8cf6 --- /dev/null +++ b/packages/click-ui/.changeset/floppy-islands-stand.md @@ -0,0 +1,32 @@ +--- +'@clickhouse/click-ui': minor +--- + +Given the request [813](https://github.com/ClickHouse/click-ui/issues/813), the following provides support for root colour theme attributes. + +The process will provide control for the consumer's main html, e.g. data-cui-theme. It'll get preferred theme from localStorage (if available), to prevent theme flashing, e.g. due to SSR vs browser runtime. Note that there'll be further changes once the set of PRs are merged (see https://github.com/ClickHouse/click-ui/pulls/punkbit). + +It also provides documentation explaining how to use it in the consumer application. + +**How to use?** + +The `InitCUIThemeScript` applies a `data-cui-theme` attribute to the root `` element, allowing you to style custom elements with vanilla CSS. + +For example, edit your consumer app `stylesheet` and introduce custom styles as follows: + +```css +[data-cui-theme="light"] { + --my-app-bg: #ffffff; + --my-app-text: #1a1a1a; +} + +[data-cui-theme="dark"] { + --my-app-bg: #0a0a0a; + --my-app-text: #f5f5f5; +} + +.my-custom-component { + background: var(--my-app-bg); + color: var(--my-app-text); +} +``` diff --git a/packages/click-ui/.changeset/focus-visible-triggers.md b/packages/click-ui/.changeset/focus-visible-triggers.md new file mode 100644 index 000000000..fb67c9a98 --- /dev/null +++ b/packages/click-ui/.changeset/focus-visible-triggers.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Add `:focus-visible` outline ring to Button, Select trigger, Dropdown trigger, and ContextMenu trigger for WCAG SC 2.4.7 (Focus Visible) compliance. diff --git a/packages/click-ui/.changeset/free-singers-cross.md b/packages/click-ui/.changeset/free-singers-cross.md new file mode 100644 index 000000000..dfe69d0bd --- /dev/null +++ b/packages/click-ui/.changeset/free-singers-cross.md @@ -0,0 +1,13 @@ +--- +'@clickhouse/click-ui': patch +--- + +Restore changes lost in PR 841-845 merge conflict resolution. + +**What changed:** + +- Removed the `Common/` barrel-export directory that was causing circular dependency issues +- Split shared components into their own directories: `CrossButton`, `EmptyButton`, `GridCenter`, `FormContainer` +- Updated imports across components to use direct paths instead of `@/components/Common` + +This is an internal refactoring with no public API changes. diff --git a/packages/click-ui/.changeset/funky-mugs-fix.md b/packages/click-ui/.changeset/funky-mugs-fix.md new file mode 100644 index 000000000..e1a5a36aa --- /dev/null +++ b/packages/click-ui/.changeset/funky-mugs-fix.md @@ -0,0 +1,46 @@ +--- +'@clickhouse/click-ui': minor +--- + +Extend ButtonGroup with multi-selection support, offering both controlled and uncontrolled modes so consumers can manage state themselves or delegate it to the component when only the resulting selection is required. + +**What changed?** + +- Added `multiple` prop to enable multi-selection mode +- `onClick` callback returns `string` in single mode (backward compatible) and `Set` in multiple mode +- Exported `SelectionValue` type for consumers + +**How to use?** + +Single selection (default) - backward compatible: + +```tsx + console.log(selected)} +/> +``` + +Multiple selection which state is provided internally by component + +```tsx + console.log([...selected])} +/> +``` + +Multiple selection which state's controlled by consumer app + +```tsx +const [selected, setSelected] = useState>(new Set(['a'])); + setSelected(newSelection as Set)} +/> +``` diff --git a/packages/click-ui/.changeset/fuzzy-laws-know.md b/packages/click-ui/.changeset/fuzzy-laws-know.md new file mode 100644 index 000000000..0cc730724 --- /dev/null +++ b/packages/click-ui/.changeset/fuzzy-laws-know.md @@ -0,0 +1,27 @@ +--- +'@clickhouse/click-ui': minor +--- + +Adds a new `isResponsive` prop to the Table component. + +The default behavior (`isResponsive={true}`) remains unchanged, preserving the responsive mobile list view conversion. + +When set to `false`, the table maintains its standard layout with horizontal scroll on narrow screens instead of automatically converting to a mobile list view. + +**How to use?** + +To disable the mobile list view and keep the table layout with horizontal scroll: + +```tsx + + {/* Table content */} +
+``` + +If you don't define isResponsive it'll default to default behaviour: + +```tsx + + {/* Table content */} +
+``` diff --git a/packages/click-ui/.changeset/hot-tigers-fold.md b/packages/click-ui/.changeset/hot-tigers-fold.md new file mode 100644 index 000000000..dc84e8554 --- /dev/null +++ b/packages/click-ui/.changeset/hot-tigers-fold.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Updates package.json for consistency diff --git a/packages/click-ui/.changeset/kind-menus-focus.md b/packages/click-ui/.changeset/kind-menus-focus.md new file mode 100644 index 000000000..12036feb9 --- /dev/null +++ b/packages/click-ui/.changeset/kind-menus-focus.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Add visible keyboard focus ring to menu items (Dropdown, Select, ContextMenu) for WCAG SC 2.4.7 and SC 1.4.11 compliance. Introduces `useInputModality` hook and `stroke.focus` theme tokens. diff --git a/packages/click-ui/.changeset/large-cougars-turn.md b/packages/click-ui/.changeset/large-cougars-turn.md new file mode 100644 index 000000000..29fbeba6d --- /dev/null +++ b/packages/click-ui/.changeset/large-cougars-turn.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Restore useCUITheme while flagging it as deprecated. diff --git a/packages/click-ui/.changeset/large-hats-type.md b/packages/click-ui/.changeset/large-hats-type.md new file mode 100644 index 000000000..8f75aa685 --- /dev/null +++ b/packages/click-ui/.changeset/large-hats-type.md @@ -0,0 +1,9 @@ +--- +"@clickhouse/click-ui": minor +--- + +Adapts file upload filename truncation responsiveness, e.g. shows truncated file name on smaller container sizes, showing the original otherwise. It shows the complete filename on element hover. + +This is a variation of [779](https://github.com/ClickHouse/click-ui/pull/781), which shortens the middle of the text responsively but over breakpoints. Ideally, it should be fluid, but that'd require computation/listener/observables, through container size, it might be hard to justify the time. + +As an alternative, we introduce text number of characters responsive fluidity by faking it, e.g. does not introduce listeners/observables, uses native css resulting in a fluid, well-performing responsive truncation. diff --git a/packages/click-ui/.changeset/legal-hats-type.md b/packages/click-ui/.changeset/legal-hats-type.md new file mode 100644 index 000000000..fe75210c0 --- /dev/null +++ b/packages/click-ui/.changeset/legal-hats-type.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Fix SVG converter script to generate proper Props interfaces (LogoProps, IconProps, FlagProps, PaymentProps) in asset type files. Previously, the `propsTypeName` configuration was missing, causing Props interfaces to be absent from generated types. diff --git a/packages/click-ui/.changeset/loose-rocks-float.md b/packages/click-ui/.changeset/loose-rocks-float.md new file mode 100644 index 000000000..5485ce215 --- /dev/null +++ b/packages/click-ui/.changeset/loose-rocks-float.md @@ -0,0 +1,49 @@ +--- +'@clickhouse/click-ui': minor +--- + +Enable keyboard date picker selection + +Added keyboard navigation support to the DatePicker component, allowing users to select dates without using a mouse. This improves accessibility and provides a faster workflow for power users. + +**Keyboard Navigation** + +- Arrow keys (Up/Down/Left/Right) to navigate between days +- Arrow keys (Left/Right) to navigate between header controls (chevron buttons and title) +- Enter or Space to select a date +- Tab to navigate to previous/next month chevrons +- Current day, month, or year temporarily reverts to default styling when keyboard focused to make the yellow focus ring clearly visible + +**How to use?** + +To select a date using only your keyboard: + +1. Tab to the date picker input and press Enter to open the calendar +2. Use Arrow keys to navigate to your desired day: + - Left/Right arrows move between days + - Up/Down arrows move between weeks +3. Press Enter or Space to select the highlighted date +4. The calendar will close automatically upon selection + +To navigate months and years: + +1. Tab to the month/year header and press Enter to open the year/month selector +2. Use Arrow keys to navigate the year grid +3. Press Enter to select a year +4. Use Arrow keys to navigate the month grid +5. Press Enter to select a month +6. Navigate days and press Enter to select the final date + +To navigate header controls: + +1. When focused on a chevron button or the title, use Left/Right arrow keys to cycle between them +2. In days view: navigate between prev chevron β†’ title β†’ next chevron +3. In years view: navigate between the two visible chevron buttons + +**Implementation Changes** + +- Replaced Dropdown with Popover component for better focus management +- Added focus management with refs to track keyboard position +- Implemented keyboard event handlers for Arrow keys, Enter, and Space +- Added horizontal navigation for header controls (chevron buttons and title) +- Active elements (today's date, selected date) temporarily revert to default styling when keyboard focused to ensure the yellow focus ring is always visible diff --git a/packages/click-ui/.changeset/neat-toys-smoke.md b/packages/click-ui/.changeset/neat-toys-smoke.md new file mode 100644 index 000000000..fba9b41c4 --- /dev/null +++ b/packages/click-ui/.changeset/neat-toys-smoke.md @@ -0,0 +1,7 @@ +--- +'@clickhouse/click-ui': minor +--- + +Allow users ability to choose whether text within cells wraps or truncates when space is limited, e.g. text wrap, truncated at the end, or middle. + +The consumer can now control the overflow mode preference at table/column level by declaring the preferred overflow mode when defining the table header items (columns), e.g. declare "overflowMode" to "truncated-middle" along label "filename". diff --git a/packages/click-ui/.changeset/nine-queens-allow.md b/packages/click-ui/.changeset/nine-queens-allow.md new file mode 100644 index 000000000..d7e15024a --- /dev/null +++ b/packages/click-ui/.changeset/nine-queens-allow.md @@ -0,0 +1,23 @@ +--- +'@clickhouse/click-ui': patch +--- + +Add circular dependency check to prevent and detect circular import cycles that can cause build issues, runtime errors, and bundle size problems. + +## How to use? + +Run the circular dependency check: + +```sh +yarn circular-dependency:check +``` + +The command analyzes the source code starting from the `src` directory and reports any circular dependencies found. + +To check a specific entry point: + +```sh +yarn circular-dependency:check src/components +``` + +If circular dependencies are detected, the output will show the file paths involved in the cycle, helping you identify which imports need to be refactored to break the dependency chain. diff --git a/packages/click-ui/.changeset/ninety-windows-melt.md b/packages/click-ui/.changeset/ninety-windows-melt.md new file mode 100644 index 000000000..88df343c7 --- /dev/null +++ b/packages/click-ui/.changeset/ninety-windows-melt.md @@ -0,0 +1,11 @@ +--- +'@clickhouse/click-ui': patch +--- + +Removes nonsense types which are utterly complex and not readable and shows inconsistency in Figma theme provided data structures. + +The src/theme/index.ts has a few utility types that seem unnecessarily complex, e.g. they are not human-readable, cause confusion and are meaningless in the context of providing utility or any sort of added value. Here, we introduce changes that make it much more idiomatic, minimal or simpler. + +Consequently, found an issue which is being reported internally, as after simplifying it, it's found that there's an Β  inconsistency between light and dark theme data structures; Bear in mind that the data structures MUST be equal (not discussing the values but structure wise). While this has to be solved in the origin or source, e.g. Figma, the changes in the Figma theme provided data structures to expose them. + +Note that it's solely to facilitate communication and help pinpoint where the problem is located: it does NOT mean or suggest this has to be done manually or that it's ok to change these two files directly in the source code. These MUST be resolved in the source Figma file. diff --git a/packages/click-ui/.changeset/olive-lions-hope.md b/packages/click-ui/.changeset/olive-lions-hope.md new file mode 100644 index 000000000..e1726c680 --- /dev/null +++ b/packages/click-ui/.changeset/olive-lions-hope.md @@ -0,0 +1,19 @@ +--- +'@clickhouse/click-ui': minor +--- + +Enable consumers to import hooks directly via `@clickhouse/click-ui/hooks` following the same pattern as component imports. + +**How to use?** + +Import hooks from the new dedicated path: + +```tsx +import { useToast, useInitialTheme } from '@clickhouse/click-ui/hooks'; +``` + +Main entry point still works: + +```tsx +import { useToast, useInitialTheme } from '@clickhouse/click-ui'; +``` diff --git a/packages/click-ui/.changeset/olive-waves-feel.md b/packages/click-ui/.changeset/olive-waves-feel.md new file mode 100644 index 000000000..6da176f4e --- /dev/null +++ b/packages/click-ui/.changeset/olive-waves-feel.md @@ -0,0 +1,13 @@ +--- +'@clickhouse/click-ui': minor +--- + +Introducing logos in the library is a manual process which is prone to mistakes and relies on developer time. Furthermore, originally, it lacked documentation, which caused further confusion and wasted time due to context switching; Although the documentation was introduced recently, there's still space for improvement. + +To help improve collaboration with the design team, an SVG to React Component workflow is offered to enable anyone to contribute as easily and quickly as possible. Including documentation, providing information on topics, such as further customisation for theme-based computed logos, e.g. light VS dark. + +While this helps standardise the introduction of logos consistently, there's still space for improvement, e.g. there are two separate registries for light and dark logos and icons introduction, which are similar SVG data types, and are still a manual process. These and others will be addressed separately in the next iterations. + +# What has changed? + +The logos API remains the same, you can update Click UI without any further changes. Although, the logo name `c#` was renamed to `c-sharp` due to need to use valid javascript identifiers during the auto-conversation process and usage of `c#` is NOT recommended as its being dropped to favour `c-sharp`. diff --git a/packages/click-ui/.changeset/open-hounds-join.md b/packages/click-ui/.changeset/open-hounds-join.md new file mode 100644 index 000000000..c4e56ca87 --- /dev/null +++ b/packages/click-ui/.changeset/open-hounds-join.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Remove unnecessary aliases due to asset name normalisation. diff --git a/packages/click-ui/.changeset/pre.json b/packages/click-ui/.changeset/pre.json new file mode 100644 index 000000000..a44bface9 --- /dev/null +++ b/packages/click-ui/.changeset/pre.json @@ -0,0 +1,42 @@ +{ + "mode": "pre", + "tag": "rc", + "initialVersions": { + "@clickhouse/click-ui": "0.0.251-test.67" + }, + "changesets": [ + "add-chart-icons", + "add-planetscale-logo", + "breezy-nails-remain", + "chatty-chairs-drop", + "chubby-items-arrive", + "common-llamas-bow", + "common-meteors-hammer", + "cuddly-rocks-sleep", + "cute-cats-behave", + "dark-pigs-visit", + "deep-wolves-guess", + "dull-pets-watch", + "famous-pillows-double", + "hot-tigers-fold", + "large-hats-type", + "neat-toys-smoke", + "ninety-windows-melt", + "olive-waves-feel", + "quiet-years-carry", + "shy-beds-move", + "silly-sheep-press", + "silly-zoos-grow", + "six-drinks-call", + "sparkly-eagles-trade", + "strict-months-flash", + "sunny-horses-taste", + "tall-corners-go", + "tame-rooms-roll", + "thick-nights-teach", + "tiny-queens-film", + "warm-apples-shop", + "wet-rockets-laugh", + "witty-goats-kiss" + ] +} diff --git a/packages/click-ui/.changeset/pretty-tips-decide.md b/packages/click-ui/.changeset/pretty-tips-decide.md new file mode 100644 index 000000000..f2c32a997 --- /dev/null +++ b/packages/click-ui/.changeset/pretty-tips-decide.md @@ -0,0 +1,12 @@ +--- +'@clickhouse/click-ui': minor +--- + +Improve current date visibility in the date picker. Previously, the current date used a subtle font weight increase that was barely noticeable depending on OS and browser font rendering. Now it uses a background highlight for better contrast. + +**How it works?** + +- Adds `$isToday` styling with a subtle background to day, month, and year cells +- `$isActive` (yellow background) only applies when a date is actually selected +- Hover state resets to yellow border with transparent background across all states +- Year/month selection via title click is disabled for DateRangePicker diff --git a/packages/click-ui/.changeset/public-api-phase-1-types.md b/packages/click-ui/.changeset/public-api-phase-1-types.md new file mode 100644 index 000000000..fa55ea7e4 --- /dev/null +++ b/packages/click-ui/.changeset/public-api-phase-1-types.md @@ -0,0 +1,12 @@ +--- +"@clickhouse/click-ui": minor +--- + +Improved TypeScript type exports for better support and consumer app integration: + +- **CardHorizontal**: Enhanced type definitions with proper ReactNode and event handler types +- **CardSecondary**: Added explicit type exports for card states and sizes +- **Collapsible**: Updated IconWrapper component types for better accessibility +- **IconButton**: Refined type definitions for button states and sizes +- **Sidebar components**: Improved type safety for navigation items and collapsible sections +- **VerticalStepper**: Extracted VerticalStepProps to dedicated types file for reusability diff --git a/packages/click-ui/.changeset/public-api-phase-2-typography-hooks.md b/packages/click-ui/.changeset/public-api-phase-2-typography-hooks.md new file mode 100644 index 000000000..7462df120 --- /dev/null +++ b/packages/click-ui/.changeset/public-api-phase-2-typography-hooks.md @@ -0,0 +1,49 @@ +--- +"@clickhouse/click-ui": minor +--- + +### What's Changed + +Typography Split (breaking for internal imports only): +- Split monolithic `Typography/` folder into atomic `Text/` and `Title/` components +- Each component now has dedicated folder with stories, tests, and exports +- Enables granular imports: `import { Text } from '@clickhouse/click-ui/Text'` + +Hooks Organization: +- Moved `useToast` from `components/Toast/` to `hooks/` for consistent hook exports +- All hooks now centralized in `src/hooks/` directory + +Build Improvements: +- Added dist directory cleanup before builds to prevent stale artifacts + +### Migration Guide + +For consumers using main index imports: + +```typescript +// No changes needed - these continue to work: +import { Text, Title } from '@clickhouse/click-ui'; +``` + +For consumers wanting granular imports: + +```typescript +import { Text } from '@clickhouse/click-ui/Text'; +import { Title } from '@clickhouse/click-ui/Title'; +import { useToast } from '@clickhouse/click-ui'; +``` + +For internal development: + +```typescript +// Old paths (removed): +import { Text } from '@/components/Typography/Text'; + +// New paths: +import { Text } from '@/components/Text'; +import { Title } from '@/components/Title'; +``` + +### Breaking Changes + +- Internal import paths changed from `@/components/Typography/*` to `@/components/Text` and `@/components/Title` diff --git a/packages/click-ui/.changeset/public-api-phase-3-input.md b/packages/click-ui/.changeset/public-api-phase-3-input.md new file mode 100644 index 000000000..491bcf43d --- /dev/null +++ b/packages/click-ui/.changeset/public-api-phase-3-input.md @@ -0,0 +1,50 @@ +--- +"@clickhouse/click-ui": minor +--- + +### What's Changed + +Split the monolithic `Input/` component folder into 6 separate atomic components, each with dedicated exports: + +- **InputWrapper** - Shared form element primitives (Wrapper, InputElement, NumberInputElement, etc.) +- **TextField** - Standard text input with label and error support +- **NumberField** - Numeric input with increment/decrement controls +- **PasswordField** - Secure text input with visibility toggle +- **SearchField** - Search-optimized input with clear button +- **TextAreaField** - Multiline text input (renamed from TextArea for consistency) + +### Migration Guide + +For consumers using main index imports: + +```typescript +// No changes needed - these continue to work: +import { TextField, NumberField, PasswordField, SearchField, TextAreaField, InputWrapper } from '@clickhouse/click-ui'; +``` + +For consumers wanting granular imports: + +```typescript +// New atomic imports available: +import { TextField } from '@clickhouse/click-ui/TextField'; +import { NumberField } from '@clickhouse/click-ui/NumberField'; +import { PasswordField } from '@clickhouse/click-ui/PasswordField'; +import { SearchField } from '@clickhouse/click-ui/SearchField'; +import { TextAreaField } from '@clickhouse/click-ui/TextAreaField'; +import { InputWrapper } from '@clickhouse/click-ui/InputWrapper'; +``` + +Type imports: + +```typescript +import type { TextFieldProps, NumberFieldProps, PasswordFieldProps } from '@clickhouse/click-ui'; + +// Or granular: +import type { TextFieldProps } from '@clickhouse/click-ui/TextField'; +``` + +### Breaking Changes + +- Internal import paths changed from `@/components/Input/*` to `@/components/[ComponentName]` +- `TextArea` renamed to `TextAreaField` for naming consistency +- No breaking changes for public API consumers using main exports diff --git a/packages/click-ui/.changeset/public-api-phase-4-select.md b/packages/click-ui/.changeset/public-api-phase-4-select.md new file mode 100644 index 000000000..cbc7f2dd5 --- /dev/null +++ b/packages/click-ui/.changeset/public-api-phase-4-select.md @@ -0,0 +1,55 @@ +--- +"@clickhouse/click-ui": minor +--- + +### What's Changed + +Restructured Select components into atomic exports with dedicated type files: + +- **Select** - Single-select dropdown (renamed from SingleSelect for clarity) +- **MultiSelect** - Multi-select dropdown with tag-style values +- **CheckboxMultiSelect** - Multi-select with checkbox interface + +Each component now has: +- Dedicated folder with index.ts exports +- Separate `.types.ts` file for clean type exports +- Stories and tests co-located with component + +### Migration Guide + +For consumers using main index imports: + +```typescript +// No changes needed - these continue to work: +import { Select, MultiSelect, CheckboxMultiSelect } from '@clickhouse/click-ui'; +``` + +For consumers wanting granular imports: + +```typescript +// New atomic imports available: +import { Select } from '@clickhouse/click-ui/Select'; +import { MultiSelect } from '@clickhouse/click-ui/MultiSelect'; +import { CheckboxMultiSelect } from '@clickhouse/click-ui/CheckboxMultiSelect'; +``` + +Type imports: + +```typescript +import type { + SelectProps, + MultiSelectProps, + CheckboxMultiSelectProps, + SelectOptionListItem, + SelectionType +} from '@clickhouse/click-ui'; + +// Or granular: +import type { SelectProps } from '@clickhouse/click-ui/Select'; +import type { MultiSelectProps } from '@clickhouse/click-ui/MultiSelect'; +``` + +### Breaking Changes + +- Internal import paths changed from `@/components/Select/*` to `@/components/[ComponentName]` +- No breaking changes for public API consumers using main exports diff --git a/packages/click-ui/.changeset/quick-planes-march.md b/packages/click-ui/.changeset/quick-planes-march.md new file mode 100644 index 000000000..35d1d257e --- /dev/null +++ b/packages/click-ui/.changeset/quick-planes-march.md @@ -0,0 +1,9 @@ +--- +'@clickhouse/click-ui': patch +--- + +Fix incorrect type export: `ImageName` (which includes icons, logos, flags, and payments) was incorrectly exported only as `IconName`. Now exports both `IconName` and `ImageName` types. + +**What changed?** + +This fix introduces a potential subtle breaking change. Previously, consumers importing `IconName` were actually getting `ImageName` (i.e., `IconName | LogoName | FlagName | PaymentName`). After this fix, `IconName` becomes the narrower type (icons only). If you were passing logo, flag, or payment names into a variable typed as `IconName`, you may now see TypeScript errors. Update those usages to use `ImageName` instead. diff --git a/packages/click-ui/.changeset/quiet-years-carry.md b/packages/click-ui/.changeset/quiet-years-carry.md new file mode 100644 index 000000000..d4d6eec49 --- /dev/null +++ b/packages/click-ui/.changeset/quiet-years-carry.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Build error due to assets wrong type for theme name diff --git a/packages/click-ui/.changeset/real-bushes-shake.md b/packages/click-ui/.changeset/real-bushes-shake.md new file mode 100644 index 000000000..7a26d6a0c --- /dev/null +++ b/packages/click-ui/.changeset/real-bushes-shake.md @@ -0,0 +1,8 @@ +--- +'@clickhouse/click-ui': minor +--- + +Enforce generic type annotation style for arrays via ESLint + +- Added `@typescript-eslint/array-type` ESLint rule with `'generic'` option to enforce `Array` notation over `Type[]` +- Auto-fixed all 36 existing array type violations across the codebase diff --git a/packages/click-ui/.changeset/salty-cooks-beg.md b/packages/click-ui/.changeset/salty-cooks-beg.md new file mode 100644 index 000000000..f207c2f50 --- /dev/null +++ b/packages/click-ui/.changeset/salty-cooks-beg.md @@ -0,0 +1,27 @@ +--- +'@clickhouse/click-ui': minor +--- + +Replaces the `isResponsive` boolean prop with a more explicit `mobileLayout` prop on the Table component. It clearly states the behavior, while isResponsive requires knowing what "responsive" means here and both are technically "responsive". + +The mobile layout version's more extensible, e.g. a new mode can be easily introduced such as `compact` without breaking changes. + +**Migration guide:** + +```tsx +// Before + +
+ +// After +
// or use just
+
+``` + +The new `mobileLayout` prop accepts: +- `"list"` (default): Converts to mobile list view on narrow screens +- `"scroll"`: Maintains table layout with horizontal scroll on narrow screens + +**Data attribute change:** + +The `data-responsive-mode` attribute has been renamed to `data-mobile-layout`. If you have custom CSS targeting `[data-responsive-mode='list']` or `[data-responsive-mode='scroll']`, update to `[data-mobile-layout='list']` or `[data-mobile-layout='scroll']`. diff --git a/packages/click-ui/.changeset/seven-moose-brake.md b/packages/click-ui/.changeset/seven-moose-brake.md new file mode 100644 index 000000000..25f32ab60 --- /dev/null +++ b/packages/click-ui/.changeset/seven-moose-brake.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Fix Table column resize producing NaN width values when columnWidths array is not fully initialized. diff --git a/packages/click-ui/.changeset/shy-beds-move.md b/packages/click-ui/.changeset/shy-beds-move.md new file mode 100644 index 000000000..68664de3b --- /dev/null +++ b/packages/click-ui/.changeset/shy-beds-move.md @@ -0,0 +1,7 @@ +--- +"@clickhouse/click-ui": minor +--- + +Filenames can be long, which causes issues as found in the reported issue [693](https://github.com/ClickHouse/click-ui/issues/693). + +Since upload file error status messages add extra length, it's found best to move it. Here, we move the failure message after the file details container. diff --git a/packages/click-ui/.changeset/silly-cups-arrive.md b/packages/click-ui/.changeset/silly-cups-arrive.md new file mode 100644 index 000000000..606311a5a --- /dev/null +++ b/packages/click-ui/.changeset/silly-cups-arrive.md @@ -0,0 +1,33 @@ +--- +'@clickhouse/click-ui': minor +--- + +Provide an elegant file architecture pattern inspired by major component libraries. It has a main component, whose name serves as a namespace for types, styles, tests, stories (storybook) and a public export file. This is a first pass; further passes and iterations will be required, which is done to lower the risk of breaking changes. + +**What has changed?** + +It aims to provide the following: + +``` +components/ +β”œβ”€β”€ Button/ +β”‚ β”œβ”€β”€ Button.tsx # Main component (namespace) +β”‚ β”œβ”€β”€ Button.types.ts # TypeScript types +β”‚ β”œβ”€β”€ Button.styles.ts # Styles +β”‚ β”œβ”€β”€ Button.test.tsx # Tests +β”‚ β”œβ”€β”€ Button.stories.tsx # Storybook stories +β”‚ └── index.ts # Component-level exports +β”œβ”€β”€ Input/ +β”‚ β”œβ”€β”€ Input.tsx +β”‚ β”œβ”€β”€ index.ts +β”‚ └── ... +└── index.ts # Exports +``` + +**Fixes** + +- ContextMenu.types.ts: Added missing `type?: 'default' | 'danger'` prop to exported `ContextMenuItemProps` +- ContextMenu.tsx: Removed duplicate `ArrowProps` and `ContextMenuItemProps` exports, now imports from `./ContextMenu.types` +- Button.tsx: Removed duplicate `Alignment` type (already defined in Button.types.ts) +- Flyout.types.ts: Replaced stale type definitions with correct types from Flyout.tsx (`DialogContentProps`, `FlyoutHeaderProps`, `FlyoutFooterProps`) +- Flyout.types.ts: Fixed `'orientaion'` typo to `'orientation'` in `Omit` calls diff --git a/packages/click-ui/.changeset/silly-sheep-press.md b/packages/click-ui/.changeset/silly-sheep-press.md new file mode 100644 index 000000000..94f7d1fe8 --- /dev/null +++ b/packages/click-ui/.changeset/silly-sheep-press.md @@ -0,0 +1,25 @@ +--- +'@clickhouse/click-ui': minor +--- + +Response for reported issue in [#785](https://github.com/ClickHouse/click-ui/issues/785), which reports a missing prop forwarding option for component customisation on the consumer application side. For example, it doesn't expose className or other props that forward to the common InternalSelect -> StyledSelectTrigger. Thus, we provide the requested changes to allow component customisation! + +## How to use? + +Declare a triggerProps with desired elements, for example: + +```tsx +