diff --git a/.github/workflows/add-issues-to-project.yml b/.github/workflows/add-issues-to-project.yml deleted file mode 100644 index 2b09928df..000000000 --- a/.github/workflows/add-issues-to-project.yml +++ /dev/null @@ -1,18 +0,0 @@ -name: Add new issues to the Bento project - -on: - issues: - types: - - opened - -jobs: - add-to-project: - name: Add issue to project - runs-on: ubuntu-latest - steps: - - uses: actions/add-to-project@v0.5.0 - with: - # You can target a repository in a different organization - # to the issue - project-url: https://github.com/orgs/buildo/projects/33 - github-token: ${{ secrets.ADD_TO_PROJECT_PAT }} diff --git a/.github/workflows/cloudflare-pages.yml b/.github/workflows/ci.yml similarity index 58% rename from .github/workflows/cloudflare-pages.yml rename to .github/workflows/ci.yml index e4030a88d..5485db341 100644 --- a/.github/workflows/cloudflare-pages.yml +++ b/.github/workflows/ci.yml @@ -1,19 +1,56 @@ -on: [push] +name: CI -name: Publish Website and Playroom +on: [push] jobs: - publish: + checks: + runs-on: ubuntu-latest + name: Checks + strategy: + fail-fast: false + matrix: + tasks: [prettier-check, eslint-check, check-circular-deps, test, typecheck, build] + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 20 + - uses: pnpm/action-setup@v2 + with: + run_install: true + - run: pnpm ${{ matrix.tasks }} + + chromatic: + runs-on: ubuntu-latest + name: Chromatic + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + - uses: actions/setup-node@v3 + with: + node-version: 20 + - uses: pnpm/action-setup@v2 + with: + run_install: true + - uses: chromaui/action@v1 + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + workingDir: packages/bento-design-system + autoAcceptChanges: main + exitOnceUploaded: true + + cloudflare-pages: runs-on: ubuntu-latest + name: Cloudflare Pages permissions: contents: read deployments: write - name: Cloudflare Pages steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 20 - uses: pnpm/action-setup@v2 with: run_install: true diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml new file mode 100644 index 000000000..a246e0b69 --- /dev/null +++ b/.github/workflows/release.yml @@ -0,0 +1,85 @@ +name: Release + +on: + push: + tags: ["v*"] + +permissions: write-all + +jobs: + release: + runs-on: ubuntu-latest + name: Release + steps: + - name: Generate Github App Token + id: github_app_token + uses: actions/create-github-app-token@v1 + with: + app-id: ${{ secrets.RELEASE_BOT_APP_ID }} + private-key: ${{ secrets.RELEASE_BOT_APP_PRIVATE_KEY }} + + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + ref: main + token: ${{ steps.github_app_token.outputs.token }} + + - uses: actions/setup-node@v4 + with: + node-version: 20 + + - uses: pnpm/action-setup@v3 + with: + run_install: true + + - run: | + cd packages/bento-design-system + pnpm version --no-git-tag-version --new-version ${{ github.ref_name }} + new_version=$(cat package.json | jq -r '.version') + cd ../../templates/react-router-monorepo/libs/design-system + jq '.dependencies["@buildo/bento-design-system"] = "'${new_version}'"' package.json > package.json.tmp && mv package.json.tmp package.json + + - name: Commit & Push changes + uses: actions-js/push@master + with: + message: ${{ github.ref_name }} + author_name: buildo-release-bot[bot] + author_email: 168835274+buildo-release-bot[bot]@users.noreply.github.com + github_token: ${{ steps.github_app_token.outputs.token }} + + - name: Publish to npm + uses: JS-DevTools/npm-publish@v3 + with: + package: "packages/bento-design-system/package.json" + token: ${{ secrets.NPM_TOKEN }} + access: "public" + provenance: true + ignore-scripts: false + + - name: Publish to Github + uses: JS-DevTools/npm-publish@v3 + with: + package: "packages/bento-design-system/package.json" + registry: "https://npm.pkg.github.com" + token: ${{ secrets.GITHUB_TOKEN }} + access: "public" + provenance: true + ignore-scripts: false + + - uses: slackapi/slack-github-action@v1.24.0 + if: ${{ job.status == 'success' }} + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} + SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK + with: + channel-id: C02UMTSG2BA + payload: '{"text": ":tada: Version ${{ github.ref_name }} has been released!"}' + + - uses: slackapi/slack-github-action@v1.24.0 + if: ${{ job.status == 'failure' }} + env: + SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} + SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK + with: + channel-id: C02UMTSG2BA + payload: '{"text": ":x: Version ${{ github.ref_name }} failed to release"}' diff --git a/ci/pipeline.yml b/ci/pipeline.yml deleted file mode 100644 index 507a4f1d0..000000000 --- a/ci/pipeline.yml +++ /dev/null @@ -1,216 +0,0 @@ -resource_types: - - name: slack-notification - type: docker-image - source: - repository: cfcommunity/slack-notification-resource - - - name: pull-request - type: docker-image - source: - repository: buildo/github-pr-resource - tag: omitapprovals - -resources: - - name: bento - type: git - icon: github - webhook_token: 0gd4XZNL4Y94zYDLql3C - check_every: 30m - source: - uri: git@github.com:buildo/bento-design-system.git - branch: main - private_key: ((private-key)) - - - name: pr - type: pull-request - icon: github - webhook_token: 0gd4XZNL4Y94zYDLql3C - check_every: 30m - source: - repository: buildo/bento-design-system - access_token: ((github-token)) - omit_approvals: true - - - name: slack-buildo - type: slack-notification - source: - url: ((buildo-slack-hook)) - icon: slack - - - name: release - type: git - icon: github - webhook_token: 0gd4XZNL4Y94zYDLql3C - check_every: 24h - source: - uri: git@github.com:buildo/bento-design-system - branch: main - tag_filter: v* - private_key: ((private-key)) - -jobs: - - name: update-pipeline - plan: - - get: bento - trigger: true - - set_pipeline: self - file: bento/ci/pipeline.yml - - name: main - plan: - - get: bento - trigger: true - - do: - - task: install - file: bento/ci/tasks/install.yml - - in_parallel: - - task: typecheck - file: bento/ci/tasks/typecheck.yml - - task: prettier - file: bento/ci/tasks/prettier.yml - - task: eslint - file: bento/ci/tasks/eslint.yml - - task: test - file: bento/ci/tasks/test.yml - - task: build - file: bento/ci/tasks/build.yml - - task: circular-deps - file: bento/ci/tasks/circular-deps.yml - - task: chromatic - file: bento/ci/tasks/chromatic.yml - params: - CHROMATIC_OPTIONS: --auto-accept-changes - on_failure: - put: slack-buildo - params: - channel: "#bento" - text: | - The build of $BUILD_JOB_NAME failed :cry: - See: $ATC_EXTERNAL_URL/builds/$BUILD_ID - - - name: pr - public: true - plan: - - get: bento - resource: pr - trigger: true - version: every - - in_parallel: - - put: update-status - resource: pr - params: { path: bento, status: pending, context: typecheck } - get_params: { skip_download: true } - - put: update-status - resource: pr - params: { path: bento, status: pending, context: prettier } - get_params: { skip_download: true } - - put: update-status - resource: pr - params: { path: bento, status: pending, context: eslint } - get_params: { skip_download: true } - - put: update-status - resource: pr - params: { path: bento, status: pending, context: test } - get_params: { skip_download: true } - - put: update-status - resource: pr - params: { path: bento, status: pending, context: build } - get_params: { skip_download: true } - - do: - - task: install - file: bento/ci/tasks/install.yml - - in_parallel: - - task: typecheck - file: bento/ci/tasks/typecheck.yml - on_success: - put: update-status - resource: pr - params: { path: bento, status: success, context: typecheck } - get_params: { skip_download: true } - on_failure: - put: update-status - resource: pr - params: { path: bento, status: failure, context: typecheck } - get_params: { skip_download: true } - - - task: prettier - file: bento/ci/tasks/prettier.yml - on_success: - put: update-status - resource: pr - params: { path: bento, status: success, context: prettier } - get_params: { skip_download: true } - on_failure: - put: update-status - resource: pr - params: { path: bento, status: failure, context: prettier } - get_params: { skip_download: true } - - - task: eslint - file: bento/ci/tasks/eslint.yml - on_success: - put: update-status - resource: pr - params: { path: bento, status: success, context: eslint } - get_params: { skip_download: true } - on_failure: - put: update-status - resource: pr - params: { path: bento, status: failure, context: eslint } - get_params: { skip_download: true } - - - task: test - file: bento/ci/tasks/test.yml - on_success: - put: update-status - resource: pr - params: { path: bento, status: success, context: test } - get_params: { skip_download: true } - on_failure: - put: update-status - resource: pr - params: { path: bento, status: failure, context: test } - get_params: { skip_download: true } - - - task: build - file: bento/ci/tasks/build.yml - on_success: - put: update-status - resource: pr - params: { path: bento, status: success, context: build } - get_params: { skip_download: true } - on_failure: - put: update-status - resource: pr - params: { path: bento, status: failure, context: build } - get_params: { skip_download: true } - - - task: circular-deps - file: bento/ci/tasks/circular-deps.yml - on_success: - put: update-status - resource: pr - params: { path: bento, status: success, context: circular-deps } - get_params: { skip_download: true } - on_failure: - put: update-status - resource: pr - params: { path: bento, status: failure, context: circular-deps } - get_params: { skip_download: true } - - - task: chromatic - file: bento/ci/tasks/chromatic.yml - - - name: release - plan: - - get: bento - resource: release - trigger: true - - task: release - file: bento/ci/tasks/release.yml - on_success: - put: slack-buildo - params: - channel: "#bento" - text_file: bento/.git/ref - text: | - :tada: Version $TEXT_FILE_CONTENT has been released! diff --git a/ci/tasks/build.yml b/ci/tasks/build.yml deleted file mode 100644 index e0652b62c..000000000 --- a/ci/tasks/build.yml +++ /dev/null @@ -1,25 +0,0 @@ -platform: linux - -image_resource: - type: docker-image - source: - repository: node - tag: "lts-alpine" - -inputs: - - name: bento - -outputs: - - name: bento - -params: - NODE_OPTIONS: --max-old-space-size=4096 - -run: - dir: bento - path: ash - args: - - -ce - - | - corepack enable - pnpm build diff --git a/ci/tasks/chromatic.yml b/ci/tasks/chromatic.yml deleted file mode 100644 index dcc1ad593..000000000 --- a/ci/tasks/chromatic.yml +++ /dev/null @@ -1,35 +0,0 @@ -platform: linux - -image_resource: - type: docker-image - source: - repository: node - tag: "lts-alpine" - -inputs: - - name: bento - -params: - CHROMATIC_PROJECT_TOKEN: ((chromatic-project-token)) - CHROMATIC_OPTIONS: - -run: - dir: bento - path: ash - args: - - -ce - - | - corepack enable - - apk add --no-progress git - - # The pull request resource works by rebasing the PR branch on top of the target branch, which - # will confuse Chromatic. We fix this by manually setting the metadata stored by the resource. - # This is only needed on PRs, hence the check below. - if [ -f .git/resource/head_sha ] && [ -f .git/resource/head_name ]; then - export CHROMATIC_BRANCH=$(cat .git/resource/head_name) - export CHROMATIC_SHA=$(cat .git/resource/head_sha) - fi - - CHROMATIC_OPTIONS="--ci --exit-zero-on-changes --exit-once-uploaded ${CHROMATIC_OPTIONS}" - pnpm chromatic diff --git a/ci/tasks/circular-deps.yml b/ci/tasks/circular-deps.yml deleted file mode 100644 index 6f44451c6..000000000 --- a/ci/tasks/circular-deps.yml +++ /dev/null @@ -1,19 +0,0 @@ -platform: linux - -image_resource: - type: docker-image - source: - repository: node - tag: "lts-alpine" - -inputs: - - name: bento - -run: - dir: bento - path: ash - args: - - -ce - - | - corepack enable - pnpm check-circular-deps diff --git a/ci/tasks/eslint.yml b/ci/tasks/eslint.yml deleted file mode 100644 index 1c12f21cc..000000000 --- a/ci/tasks/eslint.yml +++ /dev/null @@ -1,19 +0,0 @@ -platform: linux - -image_resource: - type: docker-image - source: - repository: node - tag: "lts-alpine" - -inputs: - - name: bento - -run: - dir: bento - path: ash - args: - - -ce - - | - corepack enable - pnpm eslint-check diff --git a/ci/tasks/install.yml b/ci/tasks/install.yml deleted file mode 100644 index 076cdaa87..000000000 --- a/ci/tasks/install.yml +++ /dev/null @@ -1,29 +0,0 @@ -platform: linux - -image_resource: - type: docker-image - source: - repository: node - tag: "lts-alpine" - -inputs: - - name: bento - -outputs: - - name: bento - -caches: - - path: bento/.pnpm-store - -run: - dir: bento - path: ash - args: - - -ce - - | - GREEN='\033[0;32m' - CLEAR='\033[0m' - - corepack enable - pnpm install - echo -e "${GREEN}project dependencies installed${CLEAR}" diff --git a/ci/tasks/prettier.yml b/ci/tasks/prettier.yml deleted file mode 100644 index 6a3b38095..000000000 --- a/ci/tasks/prettier.yml +++ /dev/null @@ -1,19 +0,0 @@ -platform: linux - -image_resource: - type: docker-image - source: - repository: node - tag: "lts-alpine" - -inputs: - - name: bento - -run: - dir: bento - path: ash - args: - - -ce - - | - corepack enable - pnpm prettier-check diff --git a/ci/tasks/release.sh b/ci/tasks/release.sh deleted file mode 100755 index 4ae184246..000000000 --- a/ci/tasks/release.sh +++ /dev/null @@ -1,31 +0,0 @@ -#!/bin/sh - -set -e - -LATEST_TAG=$(git describe --tags) -VERSION=${LATEST_TAG#v} - - -mkdir -p $HOME/.ssh -ssh-keyscan github.com >> $HOME/.ssh/known_hosts -echo "$SSH_PRIVATE_KEY" > $HOME/.ssh/id_rsa -chmod 400 $HOME/.ssh/id_rsa - -git config --global user.email "nemobot@buildo.io" -git config --global user.name "Nemobot" - -corepack enable - -pnpm install -cd packages/bento-design-system -pnpm version --no-git-tag-version --new-version $VERSION - -git add . -git commit -m "v$VERSION" -git push origin HEAD:main - -echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> $HOME/.npmrc -pnpm publish --git-checks false - -pnpm config set '//npm.pkg.github.com/:_authToken' "$GITHUB_TOKEN" -pnpm publish --git-checks false --access public --registry=https://npm.pkg.github.com diff --git a/ci/tasks/release.yml b/ci/tasks/release.yml deleted file mode 100644 index 87c8d9d5d..000000000 --- a/ci/tasks/release.yml +++ /dev/null @@ -1,23 +0,0 @@ -platform: linux - -image_resource: - type: docker-image - source: - repository: node - tag: "18" - -inputs: - - name: bento - -caches: - - path: bento/.pnpm-store - -params: - CI: true - NPM_TOKEN: ((npm_token)) - SSH_PRIVATE_KEY: ((private-key)) - GITHUB_TOKEN: ((github-token)) - -run: - path: ci/tasks/release.sh - dir: bento diff --git a/ci/tasks/test.yml b/ci/tasks/test.yml deleted file mode 100644 index c21e084e2..000000000 --- a/ci/tasks/test.yml +++ /dev/null @@ -1,22 +0,0 @@ -platform: linux - -image_resource: - type: docker-image - source: - repository: node - tag: "lts-alpine" - -inputs: - - name: bento - -params: - CI: true - -run: - dir: bento - path: ash - args: - - -ce - - | - corepack enable - pnpm test diff --git a/ci/tasks/typecheck.yml b/ci/tasks/typecheck.yml deleted file mode 100644 index f9baaf81d..000000000 --- a/ci/tasks/typecheck.yml +++ /dev/null @@ -1,19 +0,0 @@ -platform: linux - -image_resource: - type: docker-image - source: - repository: node - tag: "lts-alpine" - -inputs: - - name: bento - -run: - dir: bento - path: ash - args: - - -ce - - | - corepack enable - pnpm typecheck diff --git a/package.json b/package.json index bc8a6ba9b..e63c391cf 100644 --- a/package.json +++ b/package.json @@ -26,10 +26,10 @@ "husky": "8.0.3", "turbo": "1.10.13" }, - "packageManager": "pnpm@7.33.6", + "packageManager": "pnpm@7.33.7", "pnpm": { "overrides": { - "@types/react": "^18" + "@types/react": "18.3.12" }, "peerDependencyRules": { "allowedVersions": { diff --git a/packages/bento-design-system/.storybook/main.ts b/packages/bento-design-system/.storybook/main.ts index e2e89f7fe..0617f1e33 100644 --- a/packages/bento-design-system/.storybook/main.ts +++ b/packages/bento-design-system/.storybook/main.ts @@ -1,19 +1,18 @@ import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin"; -// @ts-expect-error -import * as path from "path"; import type { StorybookConfig } from "@storybook/react-vite"; import { mergeConfig } from "vite"; +import react from "@vitejs/plugin-react"; const config: StorybookConfig = { stories: [{ directory: "../stories", files: "**/*.stories.*" }], - addons: ["@storybook/addon-links", "@storybook/addon-essentials", "storybook-addon-themes"], + addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-themes"], framework: "@storybook/react-vite", core: { builder: "@storybook/builder-vite", }, viteFinal: (config) => { return mergeConfig(config, { - plugins: [vanillaExtractPlugin()], + plugins: [react(), vanillaExtractPlugin()], }); }, }; diff --git a/packages/bento-design-system/.storybook/preview.tsx b/packages/bento-design-system/.storybook/preview.tsx index 795539995..3c68ed03f 100644 --- a/packages/bento-design-system/.storybook/preview.tsx +++ b/packages/bento-design-system/.storybook/preview.tsx @@ -1,6 +1,6 @@ import { defaultMessages } from "../src/defaultMessages/en"; import { BentoProvider } from "../stories"; -import { useArgs } from "@storybook/addons"; +import { useArgs } from "@storybook/preview-api"; import { Decorator } from "@storybook/react"; import "@fontsource/lexend/400.css"; import "@fontsource/lexend/500.css"; diff --git a/packages/bento-design-system/package.json b/packages/bento-design-system/package.json index 08c631839..1eee6577f 100644 --- a/packages/bento-design-system/package.json +++ b/packages/bento-design-system/package.json @@ -1,6 +1,6 @@ { "name": "@buildo/bento-design-system", - "version": "0.22.9", + "version": "0.22.26", "description": "The buildo DS", "main": "lib/index.js", "module": "lib/index.mjs", @@ -71,7 +71,7 @@ "@floating-ui/dom": "1.5.1", "@floating-ui/react-dom": "2.0.2", "@floating-ui/utils": "0.1.1", - "@fontsource/lexend": "5.0.17", + "@fontsource/lexend": "5.0.22", "@internationalized/date": "3.4.0", "@react-aria/breadcrumbs": "3.5.4", "@react-aria/button": "3.8.1", @@ -113,17 +113,17 @@ "@react-types/shared": "3.19.0", "@tanstack/react-virtual": "3.0.0-beta.65", "@tanstack/virtual-core": "3.0.0-beta.65", + "@types/react-table": "7.7.20", "@vanilla-extract/css": "1.13.0", - "@vanilla-extract/dynamic": "2.0.3", - "@vanilla-extract/recipes": "0.5.0", - "@vanilla-extract/sprinkles": "1.6.1", + "@vanilla-extract/dynamic": "2.1.2", + "@vanilla-extract/recipes": "0.5.5", + "@vanilla-extract/sprinkles": "1.6.3", "clsx": "1.2.1", "deepmerge-ts": "4.3.0", "lodash.pick": "4.4.0", - "react-cool-dimensions": "2.0.7", - "react-dropzone": "14.2.3", + "react-dropzone": "14.2.9", "react-input-mask": "2.0.4", - "react-is": "18.2.0", + "react-is": "18.3.1", "react-select": "5.7.4", "react-table": "7.8.0", "recharts": "2.8.0", @@ -134,7 +134,7 @@ "@babel/preset-env": "7.22.20", "@babel/preset-react": "7.22.15", "@babel/preset-typescript": "7.22.15", - "@phosphor-icons/react": "2.0.15", + "@phosphor-icons/react": "2.1.7", "@react-types/breadcrumbs": "3.6.1", "@react-types/button": "3.7.4", "@react-types/datepicker": "3.5.0", @@ -143,43 +143,43 @@ "@react-types/numberfield": "3.5.0", "@react-types/slider": "3.6.0", "@react-types/textfield": "3.7.3", - "@storybook/addon-actions": "7.4.0", - "@storybook/addon-essentials": "7.4.0", - "@storybook/addon-links": "7.4.0", - "@storybook/addons": "7.4.0", - "@storybook/builder-vite": "7.4.0", - "@storybook/react": "7.4.0", - "@storybook/react-vite": "7.4.0", - "@storybook/testing-library": "0.2.2", - "@storybook/types": "7.4.0", - "@testing-library/dom": "9.3.3", - "@testing-library/jest-dom": "6.1.4", - "@testing-library/react": "14.0.0", + "@storybook/addon-actions": "8.0.8", + "@storybook/addon-essentials": "8.0.8", + "@storybook/addon-links": "8.0.8", + "@storybook/addon-themes": "8.0.8", + "@storybook/builder-vite": "8.0.8", + "@storybook/preview-api": "8.0.8", + "@storybook/react": "8.0.8", + "@storybook/react-vite": "8.0.8", + "@storybook/test": "8.0.10", + "@storybook/types": "8.0.8", + "@testing-library/dom": "9.3.4", + "@testing-library/jest-dom": "6.5.0", + "@testing-library/react": "14.3.1", "@testing-library/react-hooks": "8.0.1", - "@testing-library/user-event": "14.4.3", - "@types/lodash.orderby": "4.6.7", - "@types/lodash.pick": "4.4.7", - "@types/react": "18.2.21", - "@types/react-dom": "18.2.7", - "@types/react-input-mask": "3.0.2", - "@types/react-is": "18.2.1", - "@types/react-table": "7.7.15", + "@testing-library/user-event": "14.5.2", + "@types/lodash.orderby": "4.6.9", + "@types/lodash.pick": "4.4.9", + "@types/react": "18.3.12", + "@types/react-dom": "18.3.1", + "@types/react-input-mask": "3.0.6", + "@types/react-is": "18.3.0", "@types/testing-library__jest-dom": "5.14.9", "@typescript-eslint/parser": "5.62.0", "@vanilla-extract/babel-plugin": "1.2.0", - "@vanilla-extract/esbuild-plugin": "2.3.0", - "@vanilla-extract/private": "1.0.3", - "@vanilla-extract/vite-plugin": "3.9.0", - "@vanilla-extract/webpack-plugin": "2.3.0", - "@vitejs/plugin-react": "4.0.4", + "@vanilla-extract/esbuild-plugin": "2.3.11", + "@vanilla-extract/private": "1.0.6", + "@vanilla-extract/vite-plugin": "3.9.5", + "@vanilla-extract/webpack-plugin": "2.3.15", + "@vitejs/plugin-react": "4.3.3", "chromatic": "6.24.1", - "css-loader": "6.8.1", + "css-loader": "6.11.0", "date-fns": "2.30.0", "esbuild-loader": "2.21.0", - "eslint": "8.48.0", + "eslint": "8.57.1", "eslint-config-react-app": "7.0.1", "eslint-plugin-sort-export-all": "1.4.1", - "eslint-plugin-storybook": "0.6.13", + "eslint-plugin-storybook": "0.8.0", "file-loader": "6.2.0", "jsdom": "22.1.0", "lint-staged": "13.3.0", @@ -187,19 +187,18 @@ "madge": "5.0.2", "mini-css-extract-plugin": "2.7.6", "playroom": "0.32.1", - "postcss": "8.4.31", + "postcss": "8.4.49", "prettier": "2.8.8", - "react": "18.2.0", - "react-dom": "18.2.0", - "storybook": "7.4.0", - "storybook-addon-themes": "6.1.0", - "style-loader": "3.3.3", + "react": "18.3.1", + "react-dom": "18.3.1", + "storybook": "8.0.8", + "style-loader": "3.3.4", "ts-loader": "9.4.4", "tsup": "7.2.0", "typescript": "5.1.3", - "vite": "4.5.2", - "vitest": "0.34.3", - "webpack": "5.88.2", + "vite": "5.4.11", + "vitest": "0.34.6", + "webpack": "5.94.0", "webpack-cli": "4.10.0" }, "peerDependencies": { diff --git a/packages/bento-design-system/src/Checkbox/Checkbox.css.ts b/packages/bento-design-system/src/Checkbox/Checkbox.css.ts index ab17f12a7..fe2051f03 100644 --- a/packages/bento-design-system/src/Checkbox/Checkbox.css.ts +++ b/packages/bento-design-system/src/Checkbox/Checkbox.css.ts @@ -6,7 +6,7 @@ export const fieldContainer = extendedHitAreaRecipe({ axis: "y" }); export const checkboxRecipe = strictRecipe({ base: [ - { position: "relative", zIndex: "1" }, + { position: "relative" }, bentoSprinkles({ width: 24, height: 24, diff --git a/packages/bento-design-system/src/DateField/Config.ts b/packages/bento-design-system/src/DateField/Config.ts index 22181720c..071579460 100644 --- a/packages/bento-design-system/src/DateField/Config.ts +++ b/packages/bento-design-system/src/DateField/Config.ts @@ -8,7 +8,9 @@ import { Children } from "../util/Children"; export type DateFieldConfig = { radius: BorderRadiusConfig; padding: NonNullable; + internalPadding: NonNullable; elevation: "none" | "small" | "medium" | "large"; + rangeSeparatorSize: IconProps["size"]; monthYearLabelSize: LabelProps["size"]; dayOfWeekLabelSize: LabelProps["size"]; previousMonthIcon: (props: IconProps) => Children; diff --git a/packages/bento-design-system/src/DateField/DateField.tsx b/packages/bento-design-system/src/DateField/DateField.tsx index 6f5e4ce14..1148cba9a 100644 --- a/packages/bento-design-system/src/DateField/DateField.tsx +++ b/packages/bento-design-system/src/DateField/DateField.tsx @@ -18,11 +18,11 @@ export type ShortcutProps = { }; type SingleDateFieldProps = { type?: "single"; - shortcuts?: ShortcutProps[]; + shortcuts?: ShortcutProps[]; } & FieldProps; type RangeDateFieldProps = { type: "range"; - shortcuts?: ShortcutProps<[Date, Date]>[]; + shortcuts?: ShortcutProps<[Date, Date] | null>[]; } & FieldProps<[Date, Date] | null>; type Props = (SingleDateFieldProps | RangeDateFieldProps) & { minDate?: Date; @@ -138,6 +138,7 @@ function RangeDateField({ disabled, readOnly, ...props }: Extract } + | { type: "single"; fieldProps: AriaDatePickerProps } | { type: "range"; fieldProps: { - start: AriaDateFieldOptions; - end: AriaDateFieldOptions; + start: AriaDatePickerProps; + end: AriaDatePickerProps; }; } ) & { @@ -60,7 +64,7 @@ function DateSegment({ segment, state }: { segment: DateSegmentType; state: Date ); } -function DateField({ fieldProps }: { fieldProps: AriaDateFieldOptions }) { +function DateField({ fieldProps }: { fieldProps: AriaDatePickerProps }) { const { locale } = useLocale(); const ref = useRef(null); const state = useDateFieldState({ @@ -82,11 +86,7 @@ function DateField({ fieldProps }: { fieldProps: AriaDateFieldOptions { @@ -122,6 +122,8 @@ export function Input(props: Props) { return ( - {props.type === "single" ? ( - - ) : ( - - - - - - - - )} + + {props.type === "single" ? ( + + ) : ( + + + + + + + + + + )} + {!isReadOnly && ( - + onToggle(!isOpen) : () => setInternalIsOpen(!internalIsOpen); const { pressProps } = usePress({ onPress }); @@ -46,7 +46,7 @@ export function Disclosure({ const icon = open ? config.icons.open : config.icons.closed; return ( - + ({ onChange(undefined)} diff --git a/packages/bento-design-system/src/Layout/Columns.tsx b/packages/bento-design-system/src/Layout/Columns.tsx index d58bdf929..1aea1a500 100644 --- a/packages/bento-design-system/src/Layout/Columns.tsx +++ b/packages/bento-design-system/src/Layout/Columns.tsx @@ -1,4 +1,5 @@ import { ReactChild, ReactElement } from "react"; +import { isLazy } from "react-is"; import { flattenChildren } from "../util/flattenChildren"; import { BoxProps, Box } from "../Box/Box"; import { ResponsiveSpace } from "../internal"; @@ -77,5 +78,14 @@ export function Columns({ space, children, align, alignY, collapseBelow, reverse } function isColumn(child: ReactChild): child is ReactElement { - return typeof child === "object" && "type" in child && child.type === Column; + if (typeof child !== "object" || !("type" in child)) { + return false; + } + + // Check if it is a lazy node (RSC) + if (isLazy(child)) { + return !!(child.type as any)._payload?.value?.includes("Column"); + } + + return child.type === Column; } diff --git a/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx b/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx index aa414d370..267d093fe 100644 --- a/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx +++ b/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx @@ -1,8 +1,7 @@ import { useLocale } from "@react-aria/i18n"; import { useMemo } from "react"; -import useDimensions from "react-cool-dimensions"; import { Label, LocalizedString, Box, Children, Columns } from ".."; -import { inputRecipe } from "../Field/Field.css"; +import { inputContainerRecipe, input } from "../Field/Field.css"; import { bodyRecipe } from "../Typography/Body/Body.css"; import { BaseNumberProps, FormatProps } from "./types"; import { useBentoConfig } from "../BentoConfigContext"; @@ -21,11 +20,6 @@ export function BaseNumberInput(props: Props) { const config = useBentoConfig().input; const { locale } = useLocale(); - const { observe: rightAccessoryRef, width: rightAccessoryWidth } = useDimensions({ - // This is needed to include the padding in the width - useBorderBoxSize: true, - }); - // Memoizing the currency code calculation to avoid repeating it at every render const currencyCode = useMemo((): LocalizedString | undefined => { if (props.kind === "currency") { @@ -73,7 +67,7 @@ export function BaseNumberInput(props: Props) { .with([__.nullish, not(__.nullish)], () => rightAccessoryContent) .with([not(__.nullish), __.nullish], () => props.rightAccessory) .with([not(__.nullish), not(__.nullish)], () => ( - + {props.rightAccessory} {rightAccessoryContent} @@ -81,7 +75,17 @@ export function BaseNumberInput(props: Props) { .exhaustive(); return ( - + {rightAccessory && ( - + {rightAccessory} )} diff --git a/packages/bento-design-system/src/SearchBar/SearchBar.css.ts b/packages/bento-design-system/src/SearchBar/SearchBar.css.ts deleted file mode 100644 index 6d190c0a1..000000000 --- a/packages/bento-design-system/src/SearchBar/SearchBar.css.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { style } from "@vanilla-extract/css"; - -export const input = style({ - selectors: { - [`&::-webkit-search-decoration, - &::-webkit-search-cancel-button, - &::-webkit-search-results-button, - &::-webkit-search-results-decoration`]: { - WebkitAppearance: "none", - }, - }, -}); diff --git a/packages/bento-design-system/src/SearchBar/SearchBar.tsx b/packages/bento-design-system/src/SearchBar/SearchBar.tsx index b05a9585a..1a0dc91db 100644 --- a/packages/bento-design-system/src/SearchBar/SearchBar.tsx +++ b/packages/bento-design-system/src/SearchBar/SearchBar.tsx @@ -1,15 +1,9 @@ import { useTextField } from "@react-aria/textfield"; import { HTMLAttributes, useRef } from "react"; -import useDimensions from "react-cool-dimensions"; -import { LocalizedString, Box, Field, IconButton } from ".."; -import { inputRecipe } from "../Field/Field.css"; -import { bodyRecipe } from "../Typography/Body/Body.css"; -import { input } from "./SearchBar.css"; +import { LocalizedString, Field, IconButton, BaseTextInput } from ".."; import { useDefaultMessages } from "../util/useDefaultMessages"; import { useBentoConfig } from "../BentoConfigContext"; import { AtLeast } from "../util/AtLeast"; -import { getReadOnlyBackgroundStyle } from "../Field/utils"; -import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig"; type Props = AtLeast, "aria-label" | "aria-labelledby">> & { value: string; @@ -25,16 +19,6 @@ export function SearchBar(props: Props) { const config = useBentoConfig().searchBar; const inputRef = useRef(null); - const { observe: leftAccessoryRef, width: leftAccessoryWidth } = useDimensions({ - // This is needed to include the padding in the width calculation - useBorderBoxSize: true, - }); - - const { observe: rightAccessoryRef, width: rightAccessoryWidth } = useDimensions({ - // This is needed to include the padding in the width calculation - useBorderBoxSize: true, - }); - const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField( { ...props, @@ -45,7 +29,7 @@ export function SearchBar(props: Props) { const { defaultMessages } = useDefaultMessages(); - const rightAccessoryContent = + const rightAccessory = props.value.length > 0 ? ( - - - {config.searchIcon({ size: config.searchIconSize })} - - - {rightAccessoryContent && ( - - {rightAccessoryContent} - - )} - + ); } diff --git a/packages/bento-design-system/src/SelectField/BaseSelect.tsx b/packages/bento-design-system/src/SelectField/BaseSelect.tsx index 4755fce1d..75b67328f 100644 --- a/packages/bento-design-system/src/SelectField/BaseSelect.tsx +++ b/packages/bento-design-system/src/SelectField/BaseSelect.tsx @@ -4,7 +4,7 @@ import { FieldProps } from "../Field/FieldProps"; import { BentoConfigProvider, useBentoConfig } from "../BentoConfigContext"; import { AriaLabelingProps, DOMProps } from "@react-types/shared"; import * as selectComponents from "./components"; -import { useEffect, useRef } from "react"; +import { useEffect, useId, useRef } from "react"; import { BaseMultiProps, BaseSelectProps, BaseSingleProps, SelectOption } from "./types"; type MultiProps = BaseMultiProps & @@ -58,11 +58,16 @@ export function BaseSelect(props: Props) { clearable = true, } = props; + // NOTE(gabro): we want to make sure we have a stable ID across SSR rendering, to overcome this issue with react-select https://github.com/JedWatson/react-select/issues/2629 + const generatedId = useId(); + const id = fieldProps.id ?? generatedId; + return ( // NOTE(gabro): SelectField has its own config for List, so we override it here using BentoConfigProvider