.changeset/contributors.json

@@ -7,31 +7,39 @@
   "DiesIrae",
   "DustinWoods",
   "Greenheart",
+  "Grumaks",
   "JedWatson",
   "MadeByMike",
+  "MarcelMalik",
   "Meetcpatel",
   "MohammadKurjieh",
   "MurzNN",
   "Noviny",
+  "PaulAroo",
+  "ScottAgirs",
   "SeanDoyleGit",
   "Skulek",
   "TasinIshmam",
   "Tekipeps",
+  "TweededBadger",
   "Vultraz",
   "acburdine",
   "adamjkb",
   "adrianbienias",
+  "ahmedreza1",
   "allcontributors[bot]",
   "austin047",
   "bartduisters",
   "bketelsen",
   "bladey",
   "borisno2",
   "ciruz",
+  "dagrinchi",
   "dcousens",
   "dependabot",
   "dependabot[bot]",
   "dominikwilkowski",
+  "duidae",
   "emmatown",
   "fkrauthan",
   "flexdinesh",
@@ -52,6 +60,7 @@
   "keystonejs-release-bot",
   "kporten",
   "lahirurane-rau",
+  "leopoldkristjansson",
   "lukebennett88",
   "marekryb",
   "mikehazell",
@@ -79,6 +88,7 @@
   "ticidesign",
   "timgates42",
   "timleslie",
+  "ttbarnes",
   "u-ishii",
   "u-u-z",
   "willemmulder",

.eslintignore

@@ -1,10 +1,3 @@
-node_modules
-coverage
-dist
-reports
-docs/public/assets/
-examples/extend-graphql-schema-nexus/nexus-types.ts
-examples/framework-remix/build/index.js
-tests/test-projects/live-reloading/schemas/syntax-error.js
-__generated__
-
+dist/
+node_modules/
+syntax-error.js

.github/actions/ci-setup-examples/action.yml

@@ -0,0 +1,22 @@
+name: 'CI setup (w/ examples)'
+runs:
+  using: 'composite'
+  steps:
+    - run: corepack enable
+      shell: bash
+
+    - uses: actions/setup-node@main
+      with:
+        # preferably lts/*, but we hit API limits when querying that
+        node-version: 20
+        registry-url: 'https://registry.npmjs.org'
+        cache: pnpm
+
+    # limited to 1 child process, preventing Prisma postinstall races in our examples
+    - run: pnpm install --child-concurrency 1
+      shell: bash
+      env:
+        PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'
+
+    - run: pnpm run build
+      shell: bash

.github/actions/ci-setup/action.yml

@@ -8,12 +8,14 @@ runs:
     - uses: actions/setup-node@main
       with:
         # preferably lts/*, but we hit API limits when querying that
-        node-version: 18
+        node-version: 20
         registry-url: 'https://registry.npmjs.org'
         cache: pnpm
 
-    # limited to 1 child process, preventing Prisma postinstall races
-    - run: pnpm install --child-concurrency 1
+    - run: rm --recursive --force examples/ tests/test-projects/
+      shell: bash
+
+    - run: pnpm install
       shell: bash
       env:
         PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: '1'

.github/workflows/publish.yml

@@ -5,26 +5,32 @@ on:
 
 jobs:
   publish:
-    name: Publish
     runs-on: ubuntu-latest
-    environment: release
+    environment: Release
     steps:
       - uses: actions/checkout@main
         with:
           persist-credentials: true # needed for git push
 
       - uses: ./.github/actions/ci-setup
 
-      - run: pnpm build
+      - name: version packages
+        run: pnpm changeset version
+        env:
+          GITHUB_TOKEN: ${{ secrets.KEYSTONE_RELEASE_BOT_GITHUB_TOKEN }}
 
-      - name: git config
+      - name: git commit
         run: |
           git config --global user.name 'Keystonejs Release Bot'
           git config --global user.email 'automation+keystonejs@thinkmill.com.au'
+          git commit -a -m 'bump packages'
+
+      - run: pnpm build
 
       - name: npm publish, git tag
-        run: pnpm changeset publish --tag latest
+        run: pnpm changeset publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
-      - run: git push origin --follow-tags
+      - name: git push
+        run: git push origin --tags

.github/workflows/publish_snapshot.yml

@@ -11,7 +11,7 @@ jobs:
   publish_snapshot:
     name: Publish (Snapshot)
     runs-on: ubuntu-latest
-    environment: release
+    environment: Release
     steps:
       - uses: actions/checkout@main
         with:

.github/workflows/tests_ci.yml

@@ -5,10 +5,13 @@ on:
     branches:
       - main
   pull_request:
+    paths-ignore:
+      - 'docs/**'
+      - '**/*.md'
   workflow_dispatch:
 
 concurrency:
-  group: always-tests-${{ github.ref }}
+  group: ci-tests-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
@@ -19,20 +22,14 @@ jobs:
       - uses: actions/checkout@main
       - uses: ./.github/actions/ci-setup
 
-      - name: Prettier
-        run: pnpm lint:prettier
-
       - name: TypeScript
-        run: pnpm lint:types
-
-      - name: ESLint
-        run: pnpm lint:eslint
+        run: pnpm test:types
 
       - name: Preconstruct
         run: pnpm build
 
       - name: Prisma Filters
-        run: pnpm lint:filters
+        run: pnpm test:filters
 
   unit_tests:
     name: Package Unit Tests
@@ -42,4 +39,241 @@ jobs:
       - uses: ./.github/actions/ci-setup
 
       - name: Unit tests
-        run: pnpm jest --ci --runInBand --testPathIgnorePatterns=admin-ui-tests --testPathIgnorePatterns=api-tests --testPathIgnorePatterns=examples-smoke-tests --testPathIgnorePatterns=examples/testing
+        run: DATABASE_URL=file:./test.db pnpm jest --ci --testPathIgnorePatterns=admin-ui-tests --testPathIgnorePatterns=api-tests --testPathIgnorePatterns=examples-smoke-tests --testPathIgnorePatterns=examples/testing
+
+  graphql_api_tests_postgresql:
+    name: API Tests PostgreSQL
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:16
+        env:
+          POSTGRES_USER: testuser
+          POSTGRES_PASSWORD: testpass
+          POSTGRES_DB: test_db
+        ports:
+          - 5432:5432
+    strategy:
+      fail-fast: false
+      matrix:
+        index: [1, 2, 3, 4]
+    steps:
+      - uses: actions/checkout@main
+      - uses: ./.github/actions/ci-setup
+
+      - name: Unit tests
+        run: pnpm jest --ci --shard=${{ matrix.index }}/4 api-tests --testPathIgnorePatterns=tests/api-tests/fields/crud
+        env:
+          DATABASE_URL: postgres://testuser:testpass@localhost:5432/test_db
+
+  graphql_api_tests_sqlite:
+    name: API Tests SQLite
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        index: [1, 2, 3, 4]
+    steps:
+      - uses: actions/checkout@main
+      - uses: ./.github/actions/ci-setup
+
+      - name: Unit tests
+        run: pnpm jest --ci --shard=${{ matrix.index }}/4 api-tests --testPathIgnorePatterns=tests/api-tests/fields/crud
+        env:
+          DATABASE_URL: file:./test.db
+
+  graphql_api_tests_mysql:
+    name: API Tests MySQL
+    runs-on: ubuntu-latest
+    services:
+      mysql:
+        image: mariadb:11.3
+        env:
+          MYSQL_ROOT_PASSWORD: testpass
+        ports:
+          - 3306:3306
+    strategy:
+      fail-fast: false
+      matrix:
+        index: [1, 2, 3, 4]
+    steps:
+      - uses: actions/checkout@main
+      - uses: ./.github/actions/ci-setup
+
+      - name: Unit tests
+        run: pnpm jest --ci --shard=${{ matrix.index }}/4 api-tests --testPathIgnorePatterns=tests/api-tests/fields/crud
+        env:
+          DATABASE_URL: mysql://root:testpass@localhost:3306/test_db
+
+  field_crud_tests_postgresql:
+    name: Field CRUD Tests PostgreSQL
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:16
+        env:
+          POSTGRES_USER: testuser
+          POSTGRES_PASSWORD: testpass
+          POSTGRES_DB: test_db
+        ports:
+          - 5432:5432
+    steps:
+      - uses: actions/checkout@main
+      - uses: ./.github/actions/ci-setup
+
+      - name: Setup local S3 bucket
+        run: bash ./.github/workflows/s3-bucket.sh
+
+      - name: Unit tests
+        run: pnpm jest --ci tests/api-tests/fields/crud
+        env:
+          S3_ENDPOINT: http://127.0.0.1:9000/
+          S3_FORCE_PATH_STYLE: true
+          S3_BUCKET_NAME: keystone-test
+          S3_ACCESS_KEY_ID: keystone
+          S3_SECRET_ACCESS_KEY: keystone
+          # this doesn't mean anything when we're using a custom s3 endpoint but the sdk wants something so we just give it something
+          S3_REGION: us-east-1
+          DATABASE_URL: postgres://testuser:testpass@localhost:5432/test_db
+
+  field_crud_tests_sqlite:
+    name: Field CRUD Tests SQLite
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@main
+      - uses: ./.github/actions/ci-setup
+
+      - name: Setup local S3 bucket
+        run: bash ./.github/workflows/s3-bucket.sh
+
+      - name: Unit tests
+        run: pnpm jest --ci tests/api-tests/fields/crud
+        env:
+          S3_ENDPOINT: http://127.0.0.1:9000/
+          S3_FORCE_PATH_STYLE: true
+          S3_BUCKET_NAME: keystone-test
+          S3_ACCESS_KEY_ID: keystone
+          S3_SECRET_ACCESS_KEY: keystone
+          # this doesn't mean anything when we're using a custom s3 endpoint but the sdk wants something so we just give it something
+          S3_REGION: us-east-1
+          DATABASE_URL: file:./test.db
+
+  field_crud_tests_mysql:
+    name: Field CRUD Tests MySQL
+    runs-on: ubuntu-latest
+    services:
+      mysql:
+        image: mariadb:11.3
+        env:
+          MYSQL_ROOT_PASSWORD: testpass
+        ports:
+          - 3306:3306
+    steps:
+      - uses: actions/checkout@main
+      - uses: ./.github/actions/ci-setup
+
+      - name: Setup local S3 bucket
+        run: bash ./.github/workflows/s3-bucket.sh
+
+      - name: Unit tests
+        run: pnpm jest --ci tests/api-tests/fields/crud
+        env:
+          S3_ENDPOINT: http://127.0.0.1:9000/
+          S3_FORCE_PATH_STYLE: true
+          S3_BUCKET_NAME: keystone-test
+          S3_ACCESS_KEY_ID: keystone
+          S3_SECRET_ACCESS_KEY: keystone
+          # this doesn't mean anything when we're using a custom s3 endpoint but the sdk wants something so we just give it something
+          S3_REGION: us-east-1
+          DATABASE_URL: mysql://root:testpass@localhost:3306/test_db
+
+  examples_tests:
+    name: Testing example project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@main
+      - uses: ./.github/actions/ci-setup-examples
+
+      - name: Example unit tests
+        run: cd examples/testing; pnpm test
+
+  examples_next_app_build:
+    name: Ensure Nest in App directory builds
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@main
+      - uses: ./.github/actions/ci-setup-examples
+
+      - name: Example Next in app directory build
+        run: cd examples/framework-nextjs-app-directory; pnpm build
+
+  examples_smoke_tests:
+    name: Smoke Tests For Examples
+    runs-on: ubuntu-latest
+    env:
+      DATABASE_URL: file:./test.db
+    strategy:
+      matrix:
+        test:
+          [
+            'auth.test.ts',
+            'custom-admin-ui-logo.test.ts',
+            'custom-admin-ui-navigation.test.ts',
+            'custom-admin-ui-pages.test.ts',
+            'custom-field-view.test.ts',
+            'custom-field.test.ts',
+            'default-values.test.ts',
+            'document-field.test.ts',
+            'extend-express-app.test.ts',
+            'extend-graphql-schema-graphql-tools.test.ts',
+            'extend-graphql-schema-graphql-ts.test.ts',
+            'extend-graphql-schema-nexus.test.ts',
+            'testing.test.ts',
+            'usecase-blog.test.ts',
+            'usecase-roles.test.ts',
+            'usecase-todo.test.ts',
+            'virtual-field.test.ts',
+          ]
+      fail-fast: false
+    steps:
+      - uses: actions/checkout@main
+      - uses: ./.github/actions/ci-setup-examples
+
+      - name: Install Dependencies of Browsers
+        run: cd tests/examples-smoke-tests && pnpm playwright install-deps chromium
+
+      - name: Install Browsers
+        run: cd tests/examples-smoke-tests && pnpm playwright install chromium
+
+      - name: Unit tests
+        run: pnpm jest --ci tests/examples-smoke-tests/${{ matrix.test }}
+
+  admin_ui_integration_tests:
+    name: Integration tests for Admin UI
+    runs-on: ubuntu-latest
+    env:
+      DATABASE_URL: file:./test.db
+    strategy:
+      matrix:
+        test:
+          [
+            'init.test.ts',
+            'filters.test.ts',
+            'list-view-crud.test.ts',
+            'navigation.test.ts',
+            'live-reloading.test.ts',
+            'relations.test.ts',
+          ]
+      fail-fast: false
+    steps:
+      - uses: actions/checkout@main
+      - uses: ./.github/actions/ci-setup-examples
+
+      - name: Install Dependencies of Browsers
+        run: cd tests/admin-ui-tests && pnpm playwright install-deps chromium
+
+      - name: Install Browsers
+        run: cd tests/admin-ui-tests && pnpm playwright install chromium
+
+      - name: Unit tests
+        run: pnpm jest --ci --runInBand tests/admin-ui-tests/${{ matrix.test }}

.github/workflows/tests_ci_windows.yml

@@ -4,20 +4,10 @@ on:
   workflow_dispatch:
 
 concurrency:
-  group: always-tests-windows-${{ github.ref }}
+  group: ci-tests-windows-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
-  linting:
-    name: Linting
-    runs-on: windows-latest
-    steps:
-      - uses: actions/checkout@main
-      - uses: ./.github/actions/ci-setup
-
-      - name: TypeScript
-        run: pnpm lint:types
-
   unit_tests:
     name: Package Unit Tests
     runs-on: windows-latest

.gitignore

@@ -1,14 +1,12 @@
-.next
-.keystone
+.keystone/
+.next/
 dist/
 node_modules/
-
-# sqlite databases
 *.db
 
 # ts-gql
 __generated__
 
-# OS
+# system
 .DS_Store
 *.vscode

CODE-OF-CONDUCT.md

@@ -2,75 +2,133 @@
 
 ## Our Pledge
 
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, sex characteristics, gender identity and expression,
-level of experience, education, socio-economic status, nationality, personal
-appearance, race, religion, or sexual identity and orientation.
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
 
 ## Our Standards
 
-Examples of behavior that contributes to creating a positive environment
-include:
+Examples of behavior that contributes to a positive environment for our
+community include:
 
-- Using welcoming and inclusive language
-- Being respectful of other people
-- Gracefully accepting constructive criticism
-- Focusing on what is best for the community
-- Showing empathy towards other community members
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the overall
+  community
 
-Examples of unacceptable behavior by participants include:
+Examples of unacceptable behavior include:
 
-- The use of sexualized language or imagery and unwelcome sexual attention or
-  advances
-- Trolling, insulting/derogatory comments, and personal or political attacks
+- The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
 - Public or private harassment
-- Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
+- Publishing others' private information, such as a physical or email address,
+  without their explicit permission
 - Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
-## Our Responsibilities
+## Enforcement Responsibilities
 
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
 
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
 
 ## Scope
 
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
 
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at `codeofconduct@keystonejs.com`. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality with regard to the reporter of an incident.
-Further details of specific enforcement policies may be posted separately.
+reported to the community leaders responsible for enforcement at
+[community@keystonejs.com](mailto:community@keystonejs.com).
+
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
 
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.
 
 ## Attribution
 
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct.html>
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
 
 [homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations
 
-For answers to common questions about this code of conduct, see
-<https://www.contributor-covenant.org/faq>

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Thinkmill Labs Pty Ltd
+Copyright (c) 2023 Thinkmill Labs Pty Ltd
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -87,4 +87,4 @@ For vulnerability reporting, please refer to our [security policy](/SECURITY.md)
 
 <a href="https://thinkmill.com.au" target="_blank"><img height="48" alt="Thinkmill" src="https://thinkmill.github.io/badge/brandmark.svg"></a>
 
-Copyright (c) 2022 [Thinkmill Labs](https://www.thinkmill.com.au/labs?utm_campaign=keystone-github) Pty Ltd. Licensed under the MIT License.
+Copyright (c) 2023 [Thinkmill Labs](https://www.thinkmill.com.au/labs?utm_campaign=keystone-github) Pty Ltd. Licensed under the MIT License.

SECURITY.md

@@ -13,6 +13,5 @@ Keystone has not endured publicly-disclosable penetration testing or been profes
 When deploying, we currently recommend not placing Keystone at the hard edge of your infrastructure - instead opting for appropriate defence-in-depth measures such as web application firewalls, reverse proxies and or caching and load balancing infrastructure.
 
 The Keystone team holds security and security-related issues in high regard; and we issue GitHub security advisories (following a CVE process) for security vulnerabilities that are reported to us or discovered by our team.
-Without enduring a publicly-disclosable penetration test, we do not currently recommend using KeystoneJS in hostile environments or for securing highly sensitive data (such as financial or medical information).
 
 Keystone is an open source project, and thereby uses open source security tooling including GitHub security advisories, [dependabot](https://github.com/dependabot) and [renovate](https://github.com/renovatebot/renovate) to monitor and update our dependencies.

design-system/packages/button/package.json

@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@keystone-ui/core": "^5.0.2",
-    "@keystone-ui/icons": "^6.0.2",
-    "@keystone-ui/loading": "^6.0.2",
+    "@keystone-ui/core": "workspace:^",
+    "@keystone-ui/icons": "workspace:^",
+    "@keystone-ui/loading": "workspace:^",
     "react": "^18.2.0"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/design-system/packages/button"

design-system/packages/button/src/Button.tsx

@@ -1,51 +1,51 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { ReactNode, useContext } from 'react';
-import { forwardRefWithAs, jsx } from '@keystone-ui/core';
-import { LoadingDots } from '@keystone-ui/loading';
+import { type ReactNode, useContext } from 'react'
+import { forwardRefWithAs, jsx } from '@keystone-ui/core'
+import { LoadingDots } from '@keystone-ui/loading'
 
-import { ButtonContext } from './context';
-import type { WeightKey, ToneKey, SizeKey } from './hooks/button';
+import { ButtonContext } from './context'
+import type { WeightKey, ToneKey, SizeKey } from './hooks/button'
 
 type ButtonProps = {
   /** The Button label content. */
-  children: ReactNode;
+  children: ReactNode
   /** Whether the Button should display as a block */
-  isBlock?: boolean;
+  isBlock?: boolean
   /** Whether the Button should be disabled */
-  isDisabled?: boolean;
+  isDisabled?: boolean
   /** Whether the Button should be in a loading state */
-  isLoading?: boolean;
+  isLoading?: boolean
   /** The size of the Button. */
-  size?: SizeKey;
+  size?: SizeKey
   /** The tone of the Button. */
-  tone?: ToneKey;
+  tone?: ToneKey
   /** The weight of the Button. */
-  weight?: WeightKey;
-};
+  weight?: WeightKey
+}
 
 const loadingContainerStyles = {
   left: '50%',
   position: 'absolute',
   transform: 'translateX(-50%)',
-} as const;
+} as const
 
 export const Button = forwardRefWithAs<'button', ButtonProps>(
   (
     { as: Tag = 'button', children, isDisabled, isLoading, size, tone, weight, ...otherProps },
     ref
   ) => {
-    const { useButtonStyles, useButtonTokens, defaults } = useContext(ButtonContext);
+    const { useButtonStyles, useButtonTokens, defaults } = useContext(ButtonContext)
     const tokens = useButtonTokens({
       size: size || defaults.size,
       tone: tone || defaults.tone,
       weight: weight || defaults.weight,
-    });
+    })
     const styles = useButtonStyles({
       isDisabled,
       tokens,
-    });
+    })
 
     return (
       <Tag type={Tag === 'button' ? 'button' : undefined} css={styles} ref={ref} {...otherProps}>
@@ -56,6 +56,6 @@ export const Button = forwardRefWithAs<'button', ButtonProps>(
           </span>
         )}
       </Tag>
-    );
+    )
   }
-);
+)

design-system/packages/button/src/context.tsx

@@ -1,49 +1,49 @@
-import React, { ReactNode, createContext, useContext, useMemo } from 'react';
+import React, { type ReactNode, createContext, useContext, useMemo } from 'react'
 
 import {
   buttonPropDefaults,
   useButtonStyles,
   useButtonTokens,
-  SizeKey,
-  ToneKey,
-  WeightKey,
-} from './hooks/button';
+  type SizeKey,
+  type ToneKey,
+  type WeightKey,
+} from './hooks/button'
 
 export const ButtonContext = createContext<{
   defaults: {
-    size: SizeKey;
-    tone: ToneKey;
-    weight: WeightKey;
-  };
-  useButtonStyles: typeof useButtonStyles;
-  useButtonTokens: typeof useButtonTokens;
+    size: SizeKey
+    tone: ToneKey
+    weight: WeightKey
+  }
+  useButtonStyles: typeof useButtonStyles
+  useButtonTokens: typeof useButtonTokens
 }>({
   defaults: buttonPropDefaults,
   useButtonStyles,
   useButtonTokens,
-});
+})
 
 // Note hooks are optional for the provider value, but not in the context created above; this is
 // because they will be merged with the existing context and always exist in the value
 type ProviderHooksProp = {
-  useButtonStyles?: typeof useButtonStyles;
-  useButtonTokens?: typeof useButtonTokens;
-};
+  useButtonStyles?: typeof useButtonStyles
+  useButtonTokens?: typeof useButtonTokens
+}
 type ProviderDefaultsProp = {
-  size?: SizeKey;
-  tone?: ToneKey;
-  weight?: WeightKey;
-};
+  size?: SizeKey
+  tone?: ToneKey
+  weight?: WeightKey
+}
 export const ButtonProvider = ({
   defaults,
   hooks,
   children,
 }: {
-  defaults?: ProviderDefaultsProp;
-  hooks?: ProviderHooksProp;
-  children: ReactNode;
+  defaults?: ProviderDefaultsProp
+  hooks?: ProviderHooksProp
+  children: ReactNode
 }) => {
-  const parentContext = useContext(ButtonContext);
+  const parentContext = useContext(ButtonContext)
   const newContext = useMemo(
     () => ({
       ...parentContext,
@@ -54,6 +54,6 @@ export const ButtonProvider = ({
       },
     }),
     [parentContext, hooks, defaults]
-  );
-  return <ButtonContext.Provider value={newContext}>{children}</ButtonContext.Provider>;
-};
+  )
+  return <ButtonContext.Provider value={newContext}>{children}</ButtonContext.Provider>
+}

design-system/packages/button/src/hooks/button.ts

@@ -1,70 +1,70 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { useTheme } from '@keystone-ui/core';
+import { useTheme } from '@keystone-ui/core'
 
-export const buttonSizeValues = ['large', 'medium', 'small'] as const;
+export const buttonSizeValues = ['large', 'medium', 'small'] as const
 export const buttonToneValues = [
   'active',
   'passive',
   'positive',
   'warning',
   'negative',
   'help',
-] as const;
-export const buttonWeightValues = ['bold', 'light', 'none', 'link'] as const;
+] as const
+export const buttonWeightValues = ['bold', 'light', 'none', 'link'] as const
 
-export type SizeKey = typeof buttonSizeValues[number];
-export type ToneKey = typeof buttonToneValues[number];
-export type WeightKey = typeof buttonWeightValues[number];
+export type SizeKey = (typeof buttonSizeValues)[number]
+export type ToneKey = (typeof buttonToneValues)[number]
+export type WeightKey = (typeof buttonWeightValues)[number]
 
 export type ButtonPropDefaults = {
-  size: SizeKey;
-  tone: ToneKey;
-  weight: WeightKey;
-};
+  size: SizeKey
+  tone: ToneKey
+  weight: WeightKey
+}
 export const buttonPropDefaults = {
   size: 'medium',
   tone: 'passive',
   weight: 'light',
-} as const;
+} as const
 
 type ButtonTokensProps = {
-  size: SizeKey;
-  tone: ToneKey;
-  weight: WeightKey;
-};
+  size: SizeKey
+  tone: ToneKey
+  weight: WeightKey
+}
 type ButtonStateTokens = {
-  background?: string;
-  borderColor?: string;
-  foreground?: string;
-  shadow?: string;
-  textDecoration?: string;
-};
+  background?: string
+  borderColor?: string
+  foreground?: string
+  shadow?: string
+  textDecoration?: string
+}
 export type ButtonTokens = {
-  borderRadius?: number;
-  borderWidth?: number;
-  disabledOpacity: number;
-  fontSize?: number | string;
-  fontWeight?: number;
-  height?: number;
-  paddingX?: number;
-  transition?: string;
-  focus: ButtonStateTokens;
-  hover: ButtonStateTokens;
-  pressed: ButtonStateTokens;
-} & ButtonStateTokens;
-
-type Weight = ButtonStateTokens & Pick<ButtonTokens, 'focus' | 'hover' | 'pressed'>;
-
-export function useButtonTokens({
+  borderRadius?: number
+  borderWidth?: number
+  disabledOpacity: number
+  fontSize?: number | string
+  fontWeight?: number
+  height?: number
+  paddingX?: number
+  transition?: string
+  focus: ButtonStateTokens
+  hover: ButtonStateTokens
+  pressed: ButtonStateTokens
+} & ButtonStateTokens
+
+type Weight = ButtonStateTokens & Pick<ButtonTokens, 'focus' | 'hover' | 'pressed'>
+
+export function useButtonTokens ({
   tone: toneKey,
   size: sizeKey,
   weight: weightKey,
 }: ButtonTokensProps): ButtonTokens {
-  const { animation, colors, tones, typography, controlSizes, opacity } = useTheme();
-  const tone = tones[toneKey];
-  const size = controlSizes[sizeKey];
+  const { animation, colors, tones, typography, controlSizes, opacity } = useTheme()
+  const tone = tones[toneKey]
+  const size = controlSizes[sizeKey]
 
   const weights: { [key in WeightKey]: Weight } = {
     bold: {
@@ -125,9 +125,9 @@ export function useButtonTokens({
         textDecoration: 'underline',
       },
     },
-  };
+  }
 
-  const weight = weights[weightKey];
+  const weight = weights[weightKey]
 
   const tokens: ButtonTokens = {
     borderRadius: size.borderRadius,
@@ -144,18 +144,18 @@ export function useButtonTokens({
       opacity ${animation.duration100},
     `,
     ...weight,
-  };
+  }
 
-  return tokens;
+  return tokens
 }
 
 type ButtonStylesProps = {
-  isDisabled?: boolean;
-  isBlock?: boolean;
-  tokens: ButtonTokens;
-};
+  isDisabled?: boolean
+  isBlock?: boolean
+  tokens: ButtonTokens
+}
 
-export function useButtonStyles({ isDisabled, isBlock, tokens }: ButtonStylesProps) {
+export function useButtonStyles ({ isDisabled, isBlock, tokens }: ButtonStylesProps) {
   const baseStyles = {
     alignItems: 'center',
     borderStyle: 'solid',
@@ -172,7 +172,7 @@ export function useButtonStyles({ isDisabled, isBlock, tokens }: ButtonStylesPro
     userSelect: 'none',
     whiteSpace: 'nowrap',
     width: isBlock ? '100%' : undefined,
-  } as const;
+  } as const
 
   const tokenStyles = {
     backgroundColor: tokens.background || 'transparent',
@@ -209,7 +209,7 @@ export function useButtonStyles({ isDisabled, isBlock, tokens }: ButtonStylesPro
       color: tokens.pressed.foreground,
       textDecoration: tokens.pressed.textDecoration,
     },
-  };
+  }
 
-  return { ...baseStyles, ...tokenStyles };
+  return { ...baseStyles, ...tokenStyles }
 }

design-system/packages/button/src/index.ts

@@ -1,3 +1,3 @@
-export * from './Button';
-export * from './context';
-export * from './hooks/button';
+export * from './Button'
+export * from './context'
+export * from './hooks/button'

design-system/packages/core/src/a11y/VisuallyHidden.tsx

@@ -1,19 +1,19 @@
-import React, { ReactNode } from 'react';
-import { forwardRefWithAs } from '../utils';
+import React, { type ReactNode } from 'react'
+import { forwardRefWithAs } from '../utils'
 
 // Only display content to screen readers
 // ------------------------------
 // See: https://a11yproject.com/posts/how-to-hide-content/
 
 type Props = {
-  children?: ReactNode;
-};
+  children?: ReactNode
+}
 
 export const VisuallyHidden = forwardRefWithAs<'span', Props>(
   ({ as: Tag = 'span', ...props }, ref) => {
-    return <Tag ref={ref} style={visuallyHiddenStyles} {...props} />;
+    return <Tag ref={ref} style={visuallyHiddenStyles} {...props} />
   }
-);
+)
 
 export const visuallyHiddenStyles = {
   border: 0,
@@ -24,4 +24,4 @@ export const visuallyHiddenStyles = {
   position: 'absolute',
   whiteSpace: 'nowrap',
   width: 1,
-} as const;
+} as const

design-system/packages/core/src/components/Box.tsx

@@ -1,88 +1,88 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { jsx } from '../emotion';
+import { jsx } from '../emotion'
 
-import { useTheme } from '../theme';
-import { useMediaQuery } from '../hooks/useMediaQuery';
-import { forwardRefWithAs, mapResponsiveProp } from '../utils';
-import { ResponsiveProp, Theme } from '../types';
+import { useTheme } from '../theme'
+import { useMediaQuery } from '../hooks/useMediaQuery'
+import { forwardRefWithAs, mapResponsiveProp } from '../utils'
+import { type ResponsiveProp, type Theme } from '../types'
 
 // Types
 // -----
 
-type DimensionType = number | string;
+type DimensionType = number | string
 
-type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
-type TextAlignment = ResponsiveProp<TextAlign>;
+type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'start' | 'end'
+type TextAlignment = ResponsiveProp<TextAlign>
 
-type ColorType = ResponsiveProp<keyof Theme['palette']>;
+type ColorType = ResponsiveProp<keyof Theme['palette']>
 export type ColorProps = {
   /** background-color */
-  background?: ColorType;
+  background?: ColorType
   /** color */
-  foreground?: ColorType;
-};
+  foreground?: ColorType
+}
 
-type RadiiType = ResponsiveProp<keyof Theme['radii']>;
+type RadiiType = ResponsiveProp<keyof Theme['radii']>
 export type RadiiProps = {
   /** border-radius */
-  rounding?: RadiiType;
+  rounding?: RadiiType
   /** border-bottom-left-radius and border-bottom-right-radius */
-  roundingBottom?: RadiiType;
+  roundingBottom?: RadiiType
   /** border-bottom-left-radius and border-top-left-radius */
-  roundingLeft?: RadiiType;
+  roundingLeft?: RadiiType
   /** border-bottom-right-radius and border-top-right-radius */
-  roundingRight?: RadiiType;
+  roundingRight?: RadiiType
   /** border-bottom-left-radius and border-bottom-right-radius */
-  roundingTop?: RadiiType;
-};
+  roundingTop?: RadiiType
+}
 
-type SpacingType = ResponsiveProp<keyof Theme['spacing']>;
+type SpacingType = ResponsiveProp<keyof Theme['spacing']>
 export type MarginProps = {
   /** margin */
-  margin?: SpacingType;
+  margin?: SpacingType
   /** margin-top */
-  marginTop?: SpacingType;
+  marginTop?: SpacingType
   /** margin-right */
-  marginRight?: SpacingType;
+  marginRight?: SpacingType
   /** margin-bottom */
-  marginBottom?: SpacingType;
+  marginBottom?: SpacingType
   /** margin-left */
-  marginLeft?: SpacingType;
+  marginLeft?: SpacingType
   /** margin-top and margin-bottom */
-  marginY?: SpacingType;
+  marginY?: SpacingType
   /** margin-left and margin-right */
-  marginX?: SpacingType;
-};
+  marginX?: SpacingType
+}
 
 export type PaddingProps = {
   /** padding */
-  padding?: SpacingType;
+  padding?: SpacingType
   /** padding-top */
-  paddingTop?: SpacingType;
+  paddingTop?: SpacingType
   /** padding-right */
-  paddingRight?: SpacingType;
+  paddingRight?: SpacingType
   /** padding-bottom */
-  paddingBottom?: SpacingType;
+  paddingBottom?: SpacingType
   /** padding-left */
-  paddingLeft?: SpacingType;
+  paddingLeft?: SpacingType
   /** padding-top and padding-bottom */
-  paddingY?: SpacingType;
+  paddingY?: SpacingType
   /** padding-left and padding-right */
-  paddingX?: SpacingType;
-};
+  paddingX?: SpacingType
+}
 
 type BaseBoxProps = {
   /** text-align */
-  textAlign?: TextAlignment;
+  textAlign?: TextAlignment
   /** height */
-  height?: ResponsiveProp<DimensionType>;
+  height?: ResponsiveProp<DimensionType>
   /** width */
-  width?: ResponsiveProp<DimensionType>;
-};
+  width?: ResponsiveProp<DimensionType>
+}
 
-export type BoxProps = ColorProps & RadiiProps & MarginProps & PaddingProps & BaseBoxProps;
+export type BoxProps = ColorProps & RadiiProps & MarginProps & PaddingProps & BaseBoxProps
 
 // Style Functions
 // ---------------
@@ -113,16 +113,16 @@ export const useBoxStyles = ({
   textAlign,
   width,
 }: BoxProps) => {
-  const theme = useTheme();
-  const { mq } = useMediaQuery();
+  const theme = useTheme()
+  const { mq } = useMediaQuery()
 
   const resolvedColors = useColors(
     {
       background,
       foreground,
     },
     theme
-  );
+  )
 
   const resolvedMargin = useMargin(
     {
@@ -135,7 +135,7 @@ export const useBoxStyles = ({
       marginX,
     },
     theme
-  );
+  )
 
   const resolvedPadding = usePadding(
     {
@@ -148,12 +148,12 @@ export const useBoxStyles = ({
       paddingX,
     },
     theme
-  );
+  )
 
   const resolvedRounding = useRadii(
     { rounding, roundingTop, roundingRight, roundingBottom, roundingLeft },
     theme
-  );
+  )
 
   return mq({
     ...resolvedColors,
@@ -164,27 +164,27 @@ export const useBoxStyles = ({
     height: height,
     textAlign: textAlign,
     width: width,
-  });
-};
+  })
+}
 
 // Utils
 // ------------------------------
 
-function useColors({ background, foreground }: ColorProps, { palette }: Theme) {
+function useColors ({ background, foreground }: ColorProps, { palette }: Theme) {
   return {
     backgroundColor: background && mapResponsiveProp(background, palette),
     color: foreground && mapResponsiveProp(foreground, palette),
-  };
+  }
 }
 
-function useRadii(
+function useRadii (
   { rounding, roundingTop, roundingRight, roundingBottom, roundingLeft }: RadiiProps,
   { radii }: Theme
 ) {
-  let borderBottomLeftRadius = roundingBottom || roundingLeft || rounding;
-  let borderBottomRightRadius = roundingBottom || roundingRight || rounding;
-  let borderTopLeftRadius = roundingTop || roundingLeft || rounding;
-  let borderTopRightRadius = roundingTop || roundingRight || rounding;
+  let borderBottomLeftRadius = roundingBottom || roundingLeft || rounding
+  let borderBottomRightRadius = roundingBottom || roundingRight || rounding
+  let borderTopLeftRadius = roundingTop || roundingLeft || rounding
+  let borderTopRightRadius = roundingTop || roundingRight || rounding
 
   return {
     borderBottomLeftRadius:
@@ -193,10 +193,10 @@ function useRadii(
       borderBottomRightRadius && mapResponsiveProp(borderBottomRightRadius, radii),
     borderTopLeftRadius: borderTopLeftRadius && mapResponsiveProp(borderTopLeftRadius, radii),
     borderTopRightRadius: borderTopRightRadius && mapResponsiveProp(borderTopRightRadius, radii),
-  };
+  }
 }
 
-function usePadding(
+function usePadding (
   {
     padding,
     paddingTop,
@@ -208,34 +208,34 @@ function usePadding(
   }: PaddingProps,
   { spacing }: Theme
 ) {
-  let pb = paddingBottom || paddingY || padding;
-  let pt = paddingTop || paddingY || padding;
-  let pl = paddingLeft || paddingX || padding;
-  let pr = paddingRight || paddingX || padding;
+  let pb = paddingBottom || paddingY || padding
+  let pt = paddingTop || paddingY || padding
+  let pl = paddingLeft || paddingX || padding
+  let pr = paddingRight || paddingX || padding
 
   return {
     paddingBottom: pb && mapResponsiveProp(pb, spacing),
     paddingTop: pt && mapResponsiveProp(pt, spacing),
     paddingLeft: pl && mapResponsiveProp(pl, spacing),
     paddingRight: pr && mapResponsiveProp(pr, spacing),
-  };
+  }
 }
 
-function useMargin(
+function useMargin (
   { margin, marginTop, marginRight, marginBottom, marginLeft, marginY, marginX }: MarginProps,
   { spacing }: Theme
 ) {
-  let mb = marginBottom || marginY || margin;
-  let mt = marginTop || marginY || margin;
-  let ml = marginLeft || marginX || margin;
-  let mr = marginRight || marginX || margin;
+  let mb = marginBottom || marginY || margin
+  let mt = marginTop || marginY || margin
+  let ml = marginLeft || marginX || margin
+  let mr = marginRight || marginX || margin
 
   return {
     marginBottom: mb && mapResponsiveProp(mb, spacing),
     marginTop: mt && mapResponsiveProp(mt, spacing),
     marginLeft: ml && mapResponsiveProp(ml, spacing),
     marginRight: mr && mapResponsiveProp(mr, spacing),
-  };
+  }
 }
 
 // Box Component
@@ -268,7 +268,7 @@ export const Box = forwardRefWithAs<'div', BoxProps>(({ as: Tag = 'div', ...prop
     textAlign,
     width,
     ...attrs
-  } = props;
+  } = props
 
   const boxStyles = useBoxStyles({
     background,
@@ -295,7 +295,7 @@ export const Box = forwardRefWithAs<'div', BoxProps>(({ as: Tag = 'div', ...prop
     roundingTop,
     textAlign,
     width,
-  });
+  })
 
-  return <Tag css={boxStyles} ref={ref} {...attrs} />;
-});
+  return <Tag css={boxStyles} ref={ref} {...attrs} />
+})

design-system/packages/core/src/components/Center.tsx

@@ -1,14 +1,14 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { jsx } from '../emotion';
+import { jsx } from '../emotion'
 
-import { forwardRefWithAs } from '../utils';
-import { Box, BoxProps } from './Box';
+import { forwardRefWithAs } from '../utils'
+import { Box, type BoxProps } from './Box'
 
 type CenterProps = {
-  fillView?: boolean;
-} & BoxProps;
+  fillView?: boolean
+} & BoxProps
 
 export const Center = forwardRefWithAs<'div', CenterProps>(
   ({ fillView = false, ...props }, ref) => {
@@ -24,6 +24,6 @@ export const Center = forwardRefWithAs<'div', CenterProps>(
         }}
         {...props}
       />
-    );
+    )
   }
-);
+)

design-system/packages/core/src/components/Core.tsx

@@ -1,20 +1,20 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { Fragment, ReactNode } from 'react';
-import { jsx, Global } from '../emotion';
+import { Fragment, type ReactNode } from 'react'
+import { jsx, Global } from '../emotion'
 
-import { normalize } from '../normalize';
-import { useTheme } from '../theme';
+import { normalize } from '../normalize'
+import { useTheme } from '../theme'
 
 type CoreProps = {
   /** The app content. */
-  children: ReactNode;
+  children: ReactNode
   /** Include styles to normalize element styles among browsers. */
-  includeNormalize?: boolean;
+  includeNormalize?: boolean
   /** Optimize text rendering with CSS. */
-  optimizeLegibility?: boolean;
-};
+  optimizeLegibility?: boolean
+}
 
 export const Core = ({
   children,
@@ -26,16 +26,16 @@ export const Core = ({
       <BaseCSS includeNormalize={includeNormalize} optimizeLegibility={optimizeLegibility} />
       {children}
     </Fragment>
-  );
-};
+  )
+}
 
 // Base CSS
 // ------------------------------
 
-type BaseCSSProps = Omit<CoreProps, 'children'>;
+type BaseCSSProps = Omit<CoreProps, 'children'>
 
 const BaseCSS = ({ includeNormalize, optimizeLegibility }: BaseCSSProps) => {
-  const { typography, colors } = useTheme();
+  const { typography, colors } = useTheme()
 
   return (
     <Fragment>
@@ -81,5 +81,5 @@ const BaseCSS = ({ includeNormalize, optimizeLegibility }: BaseCSSProps) => {
         }}
       />
     </Fragment>
-  );
-};
+  )
+}

design-system/packages/core/src/components/Divider.tsx

@@ -1,37 +1,37 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { jsx } from '../emotion';
+import { jsx } from '../emotion'
 
-import { useTheme } from '../theme';
-import { ResponsiveProp, Theme } from '../types';
-import { Box, MarginProps } from './Box';
+import { useTheme } from '../theme'
+import { type ResponsiveProp, type Theme } from '../types'
+import { Box, type MarginProps } from './Box'
 
-type ColorType = ResponsiveProp<keyof Theme['palette']>;
+type ColorType = ResponsiveProp<keyof Theme['palette']>
 
 const orientationMap = {
   horizontal: 'width',
   vertical: 'height',
-};
+}
 
 type DividerProps = {
-  children?: never;
-  color?: ColorType;
-  orientation?: keyof typeof orientationMap;
-  className?: string;
-} & MarginProps;
+  children?: never
+  color?: ColorType
+  orientation?: keyof typeof orientationMap
+  className?: string
+} & MarginProps
 
 export const Divider = ({ orientation = 'vertical', color, ...props }: DividerProps) => {
-  const { colors } = useTheme();
+  const { colors } = useTheme()
 
-  const dimension = orientationMap[orientation];
+  const dimension = orientationMap[orientation]
   const styles = {
     // default the background color to the theme border color
     backgroundColor: color ? undefined : colors.border,
     flexShrink: 0,
     [dimension]: 1,
-  };
+  }
 
   // if the color prop is defined, pass it as the background to the box
-  return <Box css={styles} background={color} {...props} />;
-};
+  return <Box css={styles} background={color} {...props} />
+}

design-system/packages/core/src/components/Heading.tsx

@@ -1,56 +1,56 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { jsx } from '../emotion';
+import { jsx } from '../emotion'
 
-import { forwardRefWithAs } from '../utils';
-import { useTheme } from '../theme';
-import { Box, BoxProps } from './Box';
+import { forwardRefWithAs } from '../utils'
+import { useTheme } from '../theme'
+import { Box, type BoxProps } from './Box'
 
-export const HeadingTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
-type HeadingType = typeof HeadingTypes[number];
+export const HeadingTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const
+type HeadingType = (typeof HeadingTypes)[number]
 
 type HeadingProps = {
   /** The type of heading. */
-  type?: HeadingType;
-} & BoxProps;
+  type?: HeadingType
+} & BoxProps
 
 export const Heading = forwardRefWithAs<'h1', HeadingProps>(
   ({ as = 'h1', type = 'h1', ...props }, ref) => {
-    const { headingStyles } = useTheme();
-    const headingStyle = headingStyles[type];
+    const { headingStyles } = useTheme()
+    const headingStyle = headingStyles[type]
     const styles = {
       color: headingStyle.color,
       fontFamily: headingStyle.family,
       fontSize: headingStyle.size,
       fontWeight: headingStyle.weight,
       textTransform: headingStyle.transform,
       margin: 0,
-    } as const;
-    return <Box as={as} css={styles} ref={ref} {...props} />;
+    } as const
+    return <Box as={as} css={styles} ref={ref} {...props} />
   }
-);
+)
 
 export const H1 = forwardRefWithAs<'h1', BoxProps>(({ as = 'h1', ...props }, ref) => {
-  return <Heading ref={ref} as={as} type="h1" {...props} />;
-});
+  return <Heading ref={ref} as={as} type="h1" {...props} />
+})
 
 export const H2 = forwardRefWithAs<'h2', BoxProps>(({ as = 'h2', ...props }, ref) => {
-  return <Heading ref={ref} as={as} type="h2" {...props} />;
-});
+  return <Heading ref={ref} as={as} type="h2" {...props} />
+})
 
 export const H3 = forwardRefWithAs<'h3', BoxProps>(({ as = 'h3', ...props }, ref) => {
-  return <Heading ref={ref} as={as} type="h3" {...props} />;
-});
+  return <Heading ref={ref} as={as} type="h3" {...props} />
+})
 
 export const H4 = forwardRefWithAs<'h4', BoxProps>(({ as = 'h4', ...props }, ref) => {
-  return <Heading ref={ref} as={as} type="h4" {...props} />;
-});
+  return <Heading ref={ref} as={as} type="h4" {...props} />
+})
 
 export const H5 = forwardRefWithAs<'h5', BoxProps>(({ as = 'h5', ...props }, ref) => {
-  return <Heading ref={ref} as={as} type="h5" {...props} />;
-});
+  return <Heading ref={ref} as={as} type="h5" {...props} />
+})
 
 export const H6 = forwardRefWithAs<'h6', BoxProps>(({ as = 'h6', ...props }, ref) => {
-  return <Heading ref={ref} as={as} type="h6" {...props} />;
-});
+  return <Heading ref={ref} as={as} type="h6" {...props} />
+})

design-system/packages/core/src/components/Inline.tsx

@@ -1,36 +1,36 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { Children, ReactNode } from 'react';
-import { jsx } from '../emotion';
+import { Children, type ReactNode } from 'react'
+import { jsx } from '../emotion'
 
-import { forwardRefWithAs, getChildTag } from '../utils';
-import { Theme } from '../types';
-import { useTheme } from '../theme';
-import { Box, BoxProps } from './Box';
+import { forwardRefWithAs, getChildTag } from '../utils'
+import { type Theme } from '../types'
+import { useTheme } from '../theme'
+import { Box, type BoxProps } from './Box'
 
 const alignment = {
   center: 'center',
   end: 'flex-end',
   start: 'flex-start',
   stretch: 'stretch',
-};
+}
 
 type InlineProps = {
   /** The value of the "align-items" property. */
-  align?: keyof typeof alignment;
+  align?: keyof typeof alignment
   /** Each item in the container. */
-  children: ReactNode;
+  children: ReactNode
   /** The size of the gap between each item. */
-  gap?: keyof Theme['spacing'];
-} & BoxProps;
+  gap?: keyof Theme['spacing']
+} & BoxProps
 
 export const Inline = forwardRefWithAs<'div', InlineProps>(
   ({ align = 'start', children, gap = 'none', ...props }, ref) => {
-    const { spacing } = useTheme();
-    const resolvedAlign = alignment[align];
-    const resolvedGap = spacing[gap];
-    const ChildWrapper = getChildTag(props.as);
+    const { spacing } = useTheme()
+    const resolvedAlign = alignment[align]
+    const resolvedGap = spacing[gap]
+    const ChildWrapper = getChildTag(props.as)
 
     return (
       <Box
@@ -59,6 +59,6 @@ export const Inline = forwardRefWithAs<'div', InlineProps>(
           ) : null
         )}
       </Box>
-    );
+    )
   }
-);
+)

design-system/packages/core/src/components/Link.tsx

@@ -1,12 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { jsx } from '../emotion';
-import { useTheme } from '../theme';
-import { forwardRefWithAs } from '../utils';
+import { jsx } from '../emotion'
+import { useTheme } from '../theme'
+import { forwardRefWithAs } from '../utils'
 
 export const Link = forwardRefWithAs<'a', {}>(({ as: Tag = 'a', ...props }, ref) => {
-  const { typography, colors } = useTheme();
+  const { typography, colors } = useTheme()
 
   const styles = {
     color: colors.linkColor,
@@ -18,7 +18,7 @@ export const Link = forwardRefWithAs<'a', {}>(({ as: Tag = 'a', ...props }, ref)
       color: colors.linkHoverColor,
       textDecoration: 'underline',
     },
-  };
+  }
 
-  return <Tag css={styles} ref={ref} {...props} />;
-});
+  return <Tag css={styles} ref={ref} {...props} />
+})

design-system/packages/core/src/components/Stack.tsx

@@ -1,23 +1,23 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { Children, Fragment, ReactNode, isValidElement } from 'react';
+import { Children, Fragment, type ReactNode, isValidElement } from 'react'
 
-import { jsx } from '../emotion';
-import { useMediaQuery } from '../hooks/useMediaQuery';
-import { useTheme } from '../theme';
-import { Theme } from '../types';
-import { forwardRefWithAs, mapResponsiveProp, getChildTag } from '../utils';
+import { jsx } from '../emotion'
+import { useMediaQuery } from '../hooks/useMediaQuery'
+import { useTheme } from '../theme'
+import { type Theme } from '../types'
+import { forwardRefWithAs, mapResponsiveProp, getChildTag } from '../utils'
 
-import { Box, BoxProps } from './Box';
-import { Divider } from './Divider';
+import { Box, type BoxProps } from './Box'
+import { Divider } from './Divider'
 
 const alignment = {
   center: 'center',
   end: 'flex-end',
   start: 'flex-start',
   stretch: 'stretch',
-};
+}
 
 const orientationMap = {
   horizontal: {
@@ -30,29 +30,29 @@ const orientationMap = {
     marginProperty: 'marginTop',
     dimension: 'height',
   },
-} as const;
+} as const
 
 export type StackProps = {
   /** The value of the "align-items" property. */
-  align?: keyof typeof alignment;
+  align?: keyof typeof alignment
   /** Each element in the stack. */
-  children: ReactNode;
+  children: ReactNode
   /** Causes items in the stack to be oriented horizontally, instead of vertically */
-  across?: boolean;
+  across?: boolean
   /** The placement, if any, of the dividing elements. */
-  dividers?: 'none' | 'around' | 'between' | 'start' | 'end';
+  dividers?: 'none' | 'around' | 'between' | 'start' | 'end'
   /** The size of the gap between each element in the stack. */
-  gap?: keyof Theme['spacing'];
-} & BoxProps;
+  gap?: keyof Theme['spacing']
+} & BoxProps
 
 export const Stack = forwardRefWithAs<'div', StackProps>(
   ({ across, align = 'stretch', children, dividers = 'none', gap = 'none', ...props }, ref) => {
-    const { spacing } = useTheme();
-    const { mq } = useMediaQuery();
+    const { spacing } = useTheme()
+    const { mq } = useMediaQuery()
 
-    const orientation = across ? 'horizontal' : 'vertical';
-    const { dimension, flexDirection, marginProperty } = orientationMap[orientation];
-    const ChildWrapper = getChildTag(props.as);
+    const orientation = across ? 'horizontal' : 'vertical'
+    const { dimension, flexDirection, marginProperty } = orientationMap[orientation]
+    const ChildWrapper = getChildTag(props.as)
 
     return (
       <Box
@@ -80,10 +80,10 @@ export const Stack = forwardRefWithAs<'div', StackProps>(
                 {/* wrap the child to avoid unwanted or unexpected "stretch" on things like buttons */}
                 <ChildWrapper css={{ ':empty': { display: 'none' } }}>{child}</ChildWrapper>
               </Fragment>
-            );
+            )
           })}
         {['around', 'end'].includes(dividers) && <Divider orientation={orientation} />}
       </Box>
-    );
+    )
   }
-);
+)

design-system/packages/core/src/components/Text.tsx

@@ -1,44 +1,44 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { jsx } from '../emotion';
+import { jsx } from '../emotion'
 
-import { Theme } from '../types';
-import { forwardRefWithAs } from '../utils';
-import { useMediaQuery } from '../hooks/useMediaQuery';
-import { useTheme } from '../theme';
-import { Box, BoxProps } from './Box';
+import { type Theme } from '../types'
+import { forwardRefWithAs } from '../utils'
+import { useMediaQuery } from '../hooks/useMediaQuery'
+import { useTheme } from '../theme'
+import { Box, type BoxProps } from './Box'
 
 type TextProps = {
   /** The leading of the text. */
-  leading?: keyof Theme['typography']['leading'];
+  leading?: keyof Theme['typography']['leading']
   /** The size of the text. */
-  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
   /** The tracking of the text. */
-  tracking?: keyof Theme['typography']['tracking'];
+  tracking?: keyof Theme['typography']['tracking']
   /** The color of the text. */
-  color?: keyof Theme['palette'];
+  color?: keyof Theme['palette']
   /** The font-weight of the text. */
-  weight?: keyof Theme['typography']['fontWeight'];
-} & BoxProps;
+  weight?: keyof Theme['typography']['fontWeight']
+} & BoxProps
 
 export const Text = forwardRefWithAs<'div', TextProps>(
   (
     { color, leading = 'base', size = 'medium', tracking = 'base', weight = 'regular', ...props },
     ref
   ) => {
-    const { palette, typography } = useTheme();
+    const { palette, typography } = useTheme()
 
-    const { mq } = useMediaQuery();
+    const { mq } = useMediaQuery()
 
     const styles = mq({
       color: color ? palette[color] : undefined,
       fontSize: typography.fontSize[size],
       fontWeight: typography.fontWeight[weight],
       letterSpacing: typography.tracking[tracking],
       lineHeight: typography.leading[leading],
-    });
+    })
 
-    return <Box css={styles} ref={ref} {...props} />;
+    return <Box css={styles} ref={ref} {...props} />
   }
-);
+)

design-system/packages/core/src/emotion.ts

@@ -1 +1 @@
-export { css, jsx, keyframes, Global, ClassNames } from '@emotion/react'; // ensure the same version of emotion
+export { css, jsx, keyframes, Global, ClassNames } from '@emotion/react' // ensure the same version of emotion

design-system/packages/core/src/hooks/useManagedState.ts

@@ -1,38 +1,38 @@
-import { ChangeEvent, useRef, useState } from 'react';
+import { type ChangeEvent, useRef, useState } from 'react'
 
-import { devWarning } from '../utils';
+import { devWarning } from '../utils'
 
-export type ManagedChangeHandler<V = string, E = ChangeEvent> = (value: V, event: E) => void;
+export type ManagedChangeHandler<V = string, E = ChangeEvent> = (value: V, event: E) => void
 
-export function useManagedState<V, E = ChangeEvent>(
+export function useManagedState<V, E = ChangeEvent> (
   controlledValue: V | undefined,
   defaultValue: V,
   onChange: ManagedChangeHandler<V, E> | undefined
 ): [V, ManagedChangeHandler<V, E>] {
-  const { current: isControlled } = useRef(controlledValue !== undefined);
-  const [internalValue, setInternalValue] = useState<V>(defaultValue);
+  const { current: isControlled } = useRef(controlledValue !== undefined)
+  const [internalValue, setInternalValue] = useState<V>(defaultValue)
 
   // warn consumers when their component is switching from controlled to uncontrolled and vice versa
   devWarning(
     isControlled && controlledValue === undefined,
     'A component is changing from controlled to uncontrolled. Check the `value` prop being passed in.'
-  );
+  )
   devWarning(
     !isControlled && controlledValue !== undefined,
     'A component is changing from uncontrolled to controlled. Check the `value` prop being passed in.'
-  );
+  )
 
   // handle value changes (both internal, and controlled)
   const setValue = (v: V, e: E) => {
     if (typeof onChange === 'function') {
-      onChange(v, e);
+      onChange(v, e)
     }
 
-    setInternalValue(v);
-  };
+    setInternalValue(v)
+  }
 
   // determine which value to pass on
-  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const value = controlledValue !== undefined ? controlledValue : internalValue
 
-  return [value, setValue];
+  return [value, setValue]
 }

design-system/packages/core/src/hooks/useMediaQuery.ts

@@ -1,10 +1,10 @@
-import facepaint from 'facepaint';
+import facepaint from 'facepaint'
 
-import { Theme } from '../types';
-import { useTheme } from '../theme';
+import { type Theme } from '../types'
+import { useTheme } from '../theme'
 
-type BreakPoints = Theme['breakpoints'];
-type BreakPoint = keyof BreakPoints;
+type BreakPoints = Theme['breakpoints']
+type BreakPoint = keyof BreakPoints
 
 /*
   Facepaint lets you write properties as arrays e.g.
@@ -14,28 +14,28 @@ type BreakPoint = keyof BreakPoints;
   More here: https://github.com/emotion-js/facepaint
 */
 const makeMq = (breakpoints: BreakPoints) =>
-  facepaint(Object.values(breakpoints).map(w => `@media (min-width: ${w}px)`));
+  facepaint(Object.values(breakpoints).map(w => `@media (min-width: ${w}px)`))
 
 // helper if array property declaration isn't appropriate
 const makeMinBreak = (breakpoints: BreakPoints) => (key: BreakPoint) => {
-  const width = breakpoints[key];
-  return `@media (min-width: ${width}px)`;
-};
+  const width = breakpoints[key]
+  return `@media (min-width: ${width}px)`
+}
 
 // the breakpoints are designed to go up i.e. min-width
 // if a max-width is necessary (hopefully rare) it's nice to provide a helper
 const makeMaxBreak = (breakpoints: BreakPoints) => (key: BreakPoint) => {
-  const width = breakpoints[key];
-  return `@media (max-width: ${width - 1}px)`;
-};
+  const width = breakpoints[key]
+  return `@media (max-width: ${width - 1}px)`
+}
 
 // FIXME:
 // Should this even be a hook? I think we can just export these utilities...
 export const useMediaQuery = () => {
-  const { breakpoints } = useTheme();
+  const { breakpoints } = useTheme()
   return {
     mq: makeMq(breakpoints),
     maxBreak: makeMaxBreak(breakpoints),
     minBreak: makeMinBreak(breakpoints),
-  };
-};
+  }
+}

design-system/packages/core/src/index.ts

@@ -1,17 +1,17 @@
-export * from './emotion';
-export { VisuallyHidden } from './a11y/VisuallyHidden';
-export { Box } from './components/Box';
-export type { BoxProps, ColorProps, RadiiProps, MarginProps, PaddingProps } from './components/Box';
-export { Core } from './components/Core';
-export { Center } from './components/Center';
-export { Divider } from './components/Divider';
-export { Heading, H1, H2, H3, H4, H5, H6 } from './components/Heading';
-export { Inline } from './components/Inline';
-export { Link } from './components/Link';
-export { Stack } from './components/Stack';
-export { Text } from './components/Text';
-export * from './hooks/useMediaQuery';
-export * from './hooks/useManagedState';
-export * from './theme';
-export * from './utils';
-export * from './types';
+export * from './emotion'
+export { VisuallyHidden } from './a11y/VisuallyHidden'
+export { Box } from './components/Box'
+export type { BoxProps, ColorProps, RadiiProps, MarginProps, PaddingProps } from './components/Box'
+export { Core } from './components/Core'
+export { Center } from './components/Center'
+export { Divider } from './components/Divider'
+export { Heading, H1, H2, H3, H4, H5, H6 } from './components/Heading'
+export { Inline } from './components/Inline'
+export { Link } from './components/Link'
+export { Stack } from './components/Stack'
+export { Text } from './components/Text'
+export * from './hooks/useMediaQuery'
+export * from './hooks/useManagedState'
+export * from './theme'
+export * from './utils'
+export * from './types'

design-system/packages/core/src/normalize.ts

@@ -1,4 +1,4 @@
-import { css } from './emotion';
+import { css } from './emotion'
 
 export const normalize = css`
   /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@@ -156,4 +156,4 @@ export const normalize = css`
   [hidden] {
     display: none;
   }
-`;
+`

design-system/packages/core/src/theme.tsx

@@ -1,20 +1,20 @@
-import React, { ReactNode, createContext, useContext } from 'react';
+import React, { type ReactNode, createContext, useContext } from 'react'
 
-import type { Theme } from './types';
-import { theme } from './themes/default';
+import type { Theme } from './types'
+import { theme } from './themes/default'
 
 export const ThemeContext = createContext<{
-  theme: Theme;
+  theme: Theme
 }>({
   theme,
-});
+})
 
-export const ThemeProvider = ({ theme, children }: { theme: Theme; children: ReactNode }) => {
-  return <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>;
-};
+export const ThemeProvider = ({ theme, children }: { theme: Theme, children: ReactNode }) => {
+  return <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>
+}
 
 // TODO: return type required by pnpm :(
 export const useTheme = (): Theme => {
-  const { theme } = useContext(ThemeContext);
-  return theme;
-};
+  const { theme } = useContext(ThemeContext)
+  return theme
+}

design-system/packages/core/src/themes/colors.ts

@@ -224,4 +224,4 @@ export const palette = {
   // blueGray700: '#334155',
   // blueGray800: '#1e293b',
   // blueGray900: '#0f172a',
-} as const;
+} as const

design-system/packages/core/src/themes/colors_old.ts

@@ -347,4 +347,4 @@ export const palette = {
   orange700: '#aa4709',
   orange800: '#7a3305',
   orange900: '#4b1d00',
-};
+}

design-system/packages/core/src/themes/default.ts

@@ -1,6 +1,6 @@
-import { CSSObject } from '@emotion/react';
-import { identityType } from '../utils';
-import { palette as basePalette } from './colors';
+import { type CSSObject } from '@emotion/react'
+import { identityType } from '../utils'
+import { palette as basePalette } from './colors'
 
 /**
  * Global Tokens
@@ -49,7 +49,7 @@ const typography = {
     loose: '0.01em',
     looser: '0.02em',
   },
-};
+}
 
 const palette = {
   black: '#000000',
@@ -68,22 +68,22 @@ const palette = {
   neutral900: '#111827',
 
   ...basePalette,
-};
+}
 
 const breakpoints = {
   small: 576,
   medium: 768,
   large: 992,
   xlarge: 1200,
-};
+}
 
 const elevation = {
   e100: 100, // Cards
   e200: 200, // Inline dialogs (popover)
   e300: 300, // Tooltip
   e400: 400, // Modals
   e500: 500, // Toasts (notifications)
-};
+}
 
 const radii = {
   none: 0,
@@ -92,7 +92,7 @@ const radii = {
   medium: 8,
   large: 12,
   full: 9999,
-};
+}
 
 const sizing = {
   xxsmall: 16,
@@ -102,7 +102,7 @@ const sizing = {
   large: 38,
   xlarge: 42,
   xxlarge: 48,
-};
+}
 
 const spacing = {
   none: 0,
@@ -113,15 +113,15 @@ const spacing = {
   large: 16,
   xlarge: 24,
   xxlarge: 32,
-};
+}
 
 const shadow = {
   s100: `0px 1px 2px rgba(0, 0, 0, 0.2)`, // Cards
   s200: `0px 2px 4px rgba(0, 0, 0, 0.2)`, // Inline dialogs (popover)
   s300: `0px 2px 8px rgba(0, 0, 0, 0.2)`, // Tooltip
   s400: `0px 4px 16px rgba(0, 0, 0, 0.2)`, // Modals
   s500: `-8px 8px 32px rgba(0, 0, 0, 0.2)`, // Toasts (notifications)
-};
+}
 
 const animation = {
   duration0: '0ms',
@@ -141,25 +141,25 @@ const animation = {
   easeIn: `cubic-bezier(0.2, 0, 0, 1)`,
   easeOut: `cubic-bezier(0.165, 0.840, 0.440, 1)`,
   linear: 'cubic-bezier(0, 0, 1, 1)',
-};
+}
 
 const opacity = {
   full: 1,
   none: 0,
   disabled: 0.65,
-};
+}
 
 /**
  * Alias Tokens
  */
 
 type HeadingStyle = {
-  color: string;
-  family: string;
-  size: string;
-  transform: Extract<CSSObject['textTransform'], string>;
-  weight: number;
-};
+  color: string
+  family: string
+  size: string
+  transform: Extract<CSSObject['textTransform'], string>
+  weight: number
+}
 
 const headingStyles: { [key: string]: HeadingStyle } = {
   h1: {
@@ -204,20 +204,20 @@ const headingStyles: { [key: string]: HeadingStyle } = {
     transform: 'uppercase',
     weight: typography.fontWeight.bold,
   },
-};
+}
 
 type ControlSize = {
-  borderRadius: number;
-  borderWidth: number;
-  gutter: number;
-  paddingX: number;
-  paddingY: number;
-  height: number;
-  gap: number;
-  fontSize: number | string;
-  indicatorBoxSize: number | string;
-  indicatorFontSize: number | string;
-};
+  borderRadius: number
+  borderWidth: number
+  gutter: number
+  paddingX: number
+  paddingY: number
+  height: number
+  gap: number
+  fontSize: number | string
+  indicatorBoxSize: number | string
+  indicatorFontSize: number | string
+}
 
 const controlSizes: { [key: string]: ControlSize } = {
   small: {
@@ -256,7 +256,7 @@ const controlSizes: { [key: string]: ControlSize } = {
     indicatorBoxSize: sizing.medium,
     indicatorFontSize: typography.fontSize.small,
   },
-};
+}
 
 const colors = {
   background: 'white',
@@ -276,7 +276,7 @@ const colors = {
   overlayBackground: 'rgba(18,18,18, 0.3)', // blanket behind modal dialogs
   loaderDark: palette.neutral500,
   loaderLight: palette.neutral200,
-};
+}
 
 /**
 
@@ -291,15 +291,15 @@ Tones have 2 foregrounds that should work on these backgrounds:
 
 */
 
-type ToneColor = [string, string, string];
+type ToneColor = [string, string, string]
 type Tone = {
-  focusRing: string;
-  border: ToneColor;
-  fill: ToneColor;
-  tint: ToneColor;
-  foreground: ToneColor;
-  fillForeground: ToneColor;
-};
+  focusRing: string
+  border: ToneColor
+  fill: ToneColor
+  tint: ToneColor
+  foreground: ToneColor
+  fillForeground: ToneColor
+}
 
 const tones = identityType<{ [key: string]: Tone }>()({
   active: {
@@ -350,15 +350,15 @@ const tones = identityType<{ [key: string]: Tone }>()({
     foreground: [palette.purple600, palette.purple700, palette.purple800],
     fillForeground: [palette.white, palette.white, palette.white],
   },
-});
+})
 
 type SelectableColor = {
-  border: string;
-  fill: string;
-  fillForeground: string;
-  foreground: string;
-  tint: string;
-};
+  border: string
+  fill: string
+  fillForeground: string
+  foreground: string
+  tint: string
+}
 
 const selectableColors = identityType<{ [key: string]: SelectableColor }>()({
   silver: {
@@ -403,42 +403,42 @@ const selectableColors = identityType<{ [key: string]: SelectableColor }>()({
     foreground: palette.purple600,
     tint: palette.purple200,
   },
-});
+})
 
 type SharedFieldStateTokens = {
-  labelColor?: string;
-  legendColor?: string;
-  shadow?: string;
-};
+  labelColor?: string
+  legendColor?: string
+  shadow?: string
+}
 
 type ControlFieldStateTokens = {
-  controlBackground?: string;
-  controlBorderColor?: string;
-  controlBorderRadius?: number | string;
-  controlForeground?: string;
-};
+  controlBackground?: string
+  controlBorderColor?: string
+  controlBorderRadius?: number | string
+  controlForeground?: string
+}
 
 type InputFieldStateTokens = {
-  inputBackground?: string;
-  inputBorderColor?: string;
-  inputBorderRadius?: number | string;
-  inputForeground?: string;
-  iconColor?: string;
-};
+  inputBackground?: string
+  inputBorderColor?: string
+  inputBorderRadius?: number | string
+  inputForeground?: string
+  iconColor?: string
+}
 
-type FieldStateTokens = SharedFieldStateTokens & ControlFieldStateTokens & InputFieldStateTokens;
+type FieldStateTokens = SharedFieldStateTokens & ControlFieldStateTokens & InputFieldStateTokens
 
 type FieldTokens = FieldStateTokens & {
-  controlBorderWidth?: number | string;
-  inputBorderWidth?: number | string;
-  inputPlaceholder?: string;
-  switchForeground?: string;
-  disabled: FieldStateTokens;
-  focus: FieldStateTokens;
-  hover: FieldStateTokens;
-  invalid: FieldStateTokens;
-  selected: SharedFieldStateTokens & ControlFieldStateTokens;
-};
+  controlBorderWidth?: number | string
+  inputBorderWidth?: number | string
+  inputPlaceholder?: string
+  switchForeground?: string
+  disabled: FieldStateTokens
+  focus: FieldStateTokens
+  hover: FieldStateTokens
+  invalid: FieldStateTokens
+  selected: SharedFieldStateTokens & ControlFieldStateTokens
+}
 
 const fields: FieldTokens = {
   controlBackground: 'white',
@@ -486,7 +486,7 @@ const fields: FieldTokens = {
     controlBorderColor: palette.blue500,
     controlForeground: 'white',
   },
-};
+}
 
 /**
  * Export
@@ -512,4 +512,4 @@ export const theme = {
   tones,
   selectableColors,
   fields,
-};
+}

design-system/packages/core/src/types.ts

@@ -1,7 +1,7 @@
-import { theme } from './themes/default';
+import { type theme } from './themes/default'
 
 // Theme Types
 
-export type Theme = typeof theme;
+export type Theme = typeof theme
 
-export type ResponsiveProp<T> = T | readonly (T | null)[];
+export type ResponsiveProp<T> = T | readonly (T | null)[]

design-system/packages/core/src/utils.ts

@@ -1,15 +1,15 @@
 import {
-  ComponentPropsWithoutRef,
-  ElementType,
+  type ComponentPropsWithoutRef,
+  type ElementType,
   forwardRef,
-  ReactElement,
-  ReactNode,
-  Ref,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
   useEffect,
   useLayoutEffect,
   useState,
-} from 'react';
-import { createPortal } from 'react-dom';
+} from 'react'
+import { createPortal } from 'react-dom'
 
 /*
   Simple switch to return a child tag from a parent tag argument.
@@ -19,20 +19,20 @@ export const getChildTag = (parentTag?: ElementType<any>) => {
   switch (parentTag) {
     case 'ul':
     case 'ol':
-      return 'li';
+      return 'li'
     default:
-      return 'div';
+      return 'div'
   }
-};
+}
 
 /*
   @johannes' one weird trick for fixing TypeScript autocomplete
 */
-export function identityType<T>() {
-  function inner<U extends T>(u: U): U {
-    return u;
+export function identityType<T> () {
+  function inner<U extends T> (u: U): U {
+    return u
   }
-  return inner;
+  return inner
 }
 
 /*
@@ -41,51 +41,51 @@ export function identityType<T>() {
 export const devWarning = (condition: boolean, message: string) => {
   if (process.env.NODE_ENV !== 'production') {
     if (condition) {
-      console.error(message);
+      console.error(message)
     }
   }
-};
+}
 
 /*
   forwardRefWithAs lets us forward refs while keeping the correct component type,
   which can be specified by the `as` prop.
 */
 
 type ElementTagNameMap = HTMLElementTagNameMap &
-  Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>;
+  Pick<SVGElementTagNameMap, Exclude<keyof SVGElementTagNameMap, keyof HTMLElementTagNameMap>>
 
 type AsProp<Comp extends ElementType, Props> = {
-  as?: Comp;
+  as?: Comp
   ref?: Ref<
     Comp extends keyof ElementTagNameMap
       ? ElementTagNameMap[Comp]
       : Comp extends new (...args: any) => any
       ? InstanceType<Comp>
       : undefined
-  >;
-} & Omit<ComponentPropsWithoutRef<Comp>, 'as' | keyof Props>;
+  >
+} & Omit<ComponentPropsWithoutRef<Comp>, 'as' | keyof Props>
 
 type CompWithAsProp<Props, DefaultElementType extends ElementType> = <
   Comp extends ElementType = DefaultElementType
 >(
   props: AsProp<Comp, Props> & Props
-) => ReactElement;
+) => ReactElement
 
 export const forwardRefWithAs = <DefaultElementType extends ElementType, BaseProps>(
   render: (
     props: BaseProps & { as?: ElementType },
     ref: React.Ref<any>
   ) => Exclude<ReactNode, undefined>
 ): CompWithAsProp<BaseProps, DefaultElementType> => {
-  // @ts-ignore
-  return forwardRef(render);
-};
+  // @ts-expect-error
+  return forwardRef(render)
+}
 
 /*
   A helper for making valid IDs from a set of inputs
 */
-export function makeId(...args: (string | number | null | undefined)[]) {
-  return args.filter(val => val != null).join('--');
+export function makeId (...args: (string | number | null | undefined)[]) {
+  return args.filter(val => val != null).join('--')
 }
 
 /*
@@ -103,11 +103,11 @@ export const mapResponsiveProp = <
   valueMap: Map
 ) => {
   if (Array.isArray(value)) {
-    return value.map(k => (k == null ? null : valueMap[k]));
+    return value.map(k => (k == null ? null : valueMap[k]))
   }
-  // @ts-ignore
-  return valueMap[value];
-};
+  // @ts-expect-error
+  return valueMap[value]
+}
 
 /**
  * Utils below are ported with thanks from @reach-ui
@@ -116,41 +116,41 @@ export const mapResponsiveProp = <
 
 // Autogenerate IDs to facilitate WAI-ARIA and server rendering. For reasoning, see
 // https://github.com/reach/reach-ui/blob/develop/packages/auto-id/src/index.tsx
-let serverHandoffComplete = false;
-let id = 0;
-const genId = () => ++id;
+let serverHandoffComplete = false
+let id = 0
+const genId = () => ++id
 
 export const useId = (idFromProps?: string | null) => {
-  const initialId = idFromProps || (serverHandoffComplete ? genId() : null);
+  const initialId = idFromProps || (serverHandoffComplete ? genId() : null)
 
-  const [id, setId] = useState(initialId);
+  const [id, setId] = useState(initialId)
 
   useSafeLayoutEffect(() => {
     if (id === null) {
-      setId(genId());
+      setId(genId())
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [])
 
   useEffect(() => {
     if (serverHandoffComplete === false) {
-      serverHandoffComplete = true;
+      serverHandoffComplete = true
     }
-  }, []);
-  return id != null ? String(id) : undefined;
-};
+  }, [])
+  return id != null ? String(id) : undefined
+}
 
 // Works around useLayoutEffect throwing a warning when used in SSR
-export const useSafeLayoutEffect = typeof window === 'undefined' ? () => {} : useLayoutEffect;
+export const useSafeLayoutEffect = typeof window === 'undefined' ? () => {} : useLayoutEffect
 
 type Props = {
-  children: ReactElement;
-};
+  children: ReactElement
+}
 
 export const Portal = ({ children }: Props): React.ReactPortal | null => {
   if (typeof document === 'undefined') {
-    return null;
+    return null
   }
 
-  return createPortal(children, document.body);
-};
+  return createPortal(children, document.body)
+}

design-system/packages/fields/package.json

@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@keystone-ui/core": "^5.0.2",
-    "@keystone-ui/icons": "^6.0.2",
-    "@keystone-ui/popover": "^6.0.2",
+    "@keystone-ui/core": "workspace:^",
+    "@keystone-ui/icons": "workspace:^",
+    "@keystone-ui/popover": "workspace:^",
     "date-fns": "^2.26.0",
     "react": "^18.2.0",
     "react-day-picker": "^8.0.4",

design-system/packages/fields/src/Checkbox.tsx

@@ -1,18 +1,18 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { Fragment, InputHTMLAttributes, ReactNode, forwardRef } from 'react';
-import { jsx, VisuallyHidden } from '@keystone-ui/core';
+import { Fragment, type InputHTMLAttributes, type ReactNode, forwardRef } from 'react'
+import { jsx, VisuallyHidden } from '@keystone-ui/core'
 
-import { ControlLabel } from './components/ControlLabel';
-import { CheckIcon } from './components/Icons';
-import { useIndicatorStyles, useIndicatorTokens } from './hooks/indicators';
-import type { SizeType } from './types';
+import { ControlLabel } from './components/ControlLabel'
+import { CheckIcon } from './components/Icons'
+import { useIndicatorStyles, useIndicatorTokens } from './hooks/indicators'
+import type { SizeType } from './types'
 
 type CheckboxProps = {
   /** The checkbox label content. */
-  children: ReactNode;
-} & CheckboxControlProps;
+  children: ReactNode
+} & CheckboxControlProps
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   ({ children, className, size, ...props }, ref) => {
@@ -24,20 +24,20 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       >
         {children}
       </ControlLabel>
-    );
+    )
   }
-);
+)
 
 type CheckboxControlProps = {
   /** When true, the checkbox will be checked. */
-  checked?: boolean;
+  checked?: boolean
   /** When true, the checkbox will be disabled. */
-  disabled?: boolean;
+  disabled?: boolean
   /** The size of the Checkbox */
-  size?: SizeType;
+  size?: SizeType
   /** The value of the Checkbox. */
-  value?: string;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
+  value?: string
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>
 
 export const CheckboxControl = forwardRef<HTMLInputElement, CheckboxControlProps>(
   ({ className, size, ...props }, ref) => (
@@ -48,18 +48,18 @@ export const CheckboxControl = forwardRef<HTMLInputElement, CheckboxControlProps
       </Indicator>
     </Fragment>
   )
-);
+)
 
 const Indicator = ({
   className,
   size,
   ...props
 }: {
-  size?: SizeType;
-  children?: ReactNode;
-  className?: string;
+  size?: SizeType
+  children?: ReactNode
+  className?: string
 }) => {
-  const tokens = useIndicatorTokens({ type: 'checkbox', size: size || 'medium' });
-  const styles = useIndicatorStyles({ tokens });
-  return <div className={className} css={styles} {...props} />;
-};
+  const tokens = useIndicatorTokens({ type: 'checkbox', size: size || 'medium' })
+  const styles = useIndicatorStyles({ tokens })
+  return <div className={className} css={styles} {...props} />
+}

design-system/packages/fields/src/DatePicker/Calendar.tsx

@@ -1,31 +1,31 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 
-import { DayPicker, DayPickerProps } from 'react-day-picker';
-import { jsx, useTheme } from '@keystone-ui/core';
-import { getContrastText } from './utils/getContrastText';
-import { hexToRgb } from './utils/hexToRgb';
+import { DayPicker, type DayPickerProps } from 'react-day-picker'
+import { jsx, useTheme } from '@keystone-ui/core'
+import { getContrastText } from './utils/getContrastText'
+import { hexToRgb } from './utils/hexToRgb'
 
 export const Calendar = ({ modifiers, ...props }: DayPickerProps) => {
-  const styles = useCalendarStyles();
-  const indexOfMonday = 1;
+  const styles = useCalendarStyles()
+  const indexOfMonday = 1
 
   return (
     <div css={styles}>
       <DayPicker weekStartsOn={indexOfMonday} {...props} />
     </div>
-  );
-};
+  )
+}
 
 // Styles
 // ------------------------------
 
 const useCalendarStyles = () => {
-  const { colors, palette } = useTheme();
-  const cellSize = 40; // theme.sizing.base;
-  const navButtonSize = 24; // theme.sizing.xsmall;
-  const interactionColor = '#007AFF'; //theme.palette.actions.active;
-  const rangeBetweenColor = hexToRgb('#007AFF', 0.2); //hexToRgb(interactionColor, 0.2);
+  const { colors, palette } = useTheme()
+  const cellSize = 40 // theme.sizing.base;
+  const navButtonSize = 24 // theme.sizing.xsmall;
+  const interactionColor = '#007AFF' //theme.palette.actions.active;
+  const rangeBetweenColor = hexToRgb('#007AFF', 0.2) //hexToRgb(interactionColor, 0.2);
 
   return {
     padding: 8, //theme.spacing.small,
@@ -254,5 +254,5 @@ const useCalendarStyles = () => {
         background: `linear-gradient(to right, ${rangeBetweenColor}, ${colors.overlayBackground})`,
       },
     },
-  } as const;
-};
+  } as const
+}