@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/exports/index.ts

@@ -0,0 +1 @@
+export * from '../src/core'

package/exports/theme.ts

@@ -0,0 +1 @@
+export * from '../src/theme'

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-beta.10",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
-  "source": "./src/index.ts",
+  "source": "./exports/index.ts",
   "module": "./dist/index.esm.js",
   "main": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "source": "./src/index.ts",
+      "source": "./exports/index.ts",
       "require": "./dist/index.js",
       "node": {
         "module": "./dist/index.esm.js",
@@ -18,118 +18,139 @@
       "import": "./dist/index.esm.js",
       "default": "./dist/index.esm.js"
     },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "source": "./exports/theme.ts",
+      "require": "./dist/theme.js",
+      "node": {
+        "module": "./dist/theme.esm.js",
+        "import": "./dist/theme.cjs.mjs"
+      },
+      "import": "./dist/theme.esm.js",
+      "default": "./dist/theme.esm.js"
+    },
     "./package.json": "./package.json"
   },
+  "typesVersions": {
+    "*": {
+      "theme": [
+        "./dist/theme.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
+    "exports",
     "src"
   ],
   "license": "MIT",
   "scripts": {
-    "build": "run-s clean build:pkg check:pkg",
-    "build:pkg": "pkg build --strict",
-    "check:pkg": "pkg --strict",
-    "check:types": "tsc",
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
     "clean": "rimraf .workshop dist",
     "commit": "cz",
     "cypress:dev": "run-p dev cypress:open",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "dev": "run-s workshop:dev",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx --quiet",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
     "prepare": "husky install",
     "prepublishOnly": "pnpm build",
     "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
     "test": "jest",
     "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
     "watch": "pkg watch --strict",
-    "workshop:build": "node -r esbuild-register -r tsconfig-paths/register scripts/build",
-    "workshop:dev": "node -r esbuild-register -r tsconfig-paths/register scripts/dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "2.0.0",
-    "@sanity/color": "3.0.0-beta.5",
-    "@sanity/icons": "^2.4.1",
+    "@floating-ui/react-dom": "^2.0.4",
+    "@sanity/color": "3.0.0-beta.9",
+    "@sanity/icons": "^2.7.0",
     "csstype": "^3.1.2",
-    "framer-motion": "^10.16.2",
+    "framer-motion": "^10.16.5",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.11",
-    "@babel/preset-env": "^7.22.14",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.11",
-    "@commitlint/cli": "^17.7.1",
-    "@commitlint/config-conventional": "^17.7.0",
+    "@babel/core": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^2.4.8",
-    "@sanity/semantic-release-preset": "^4.1.4",
-    "@sanity/ui-workshop": "^1.2.11",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-docs": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-storysource": "^7.4.5",
-    "@storybook/addon-themes": "^7.4.5",
-    "@storybook/blocks": "^7.4.5",
-    "@storybook/jest": "^0.2.2",
-    "@storybook/manager-api": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-vite": "^7.4.5",
-    "@storybook/testing-library": "^0.2.1",
-    "@storybook/theming": "^7.4.5",
-    "@testing-library/dom": "^9.3.1",
+    "@sanity/pkg-utils": "^3.2.5",
+    "@sanity/semantic-release-preset": "^4.1.6",
+    "@sanity/ui-workshop": "^2.0.3",
+    "@storybook/addon-a11y": "^7.6.1",
+    "@storybook/addon-docs": "^7.6.1",
+    "@storybook/addon-essentials": "^7.6.1",
+    "@storybook/addon-interactions": "^7.6.1",
+    "@storybook/addon-links": "^7.6.1",
+    "@storybook/addon-storysource": "^7.6.1",
+    "@storybook/addon-themes": "^7.6.1",
+    "@storybook/blocks": "^7.6.1",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/manager-api": "^7.6.1",
+    "@storybook/react": "^7.6.1",
+    "@storybook/react-vite": "^7.6.1",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.6.1",
+    "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.4",
-    "@types/jest-axe": "^3.5.5",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.10",
+    "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.5.9",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@types/react-is": "^18.2.1",
-    "@types/refractor": "^3.0.2",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
+    "@types/react-is": "^18.2.4",
+    "@types/refractor": "^3.4.0",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^6.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "commitizen": "^4.3.0",
-    "cypress": "^13.1.0",
-    "cypress-real-events": "^1.10.1",
+    "cypress": "^13.6.0",
+    "cypress-real-events": "^1.11.0",
     "cz-conventional-changelog": "^3.3.0",
-    "esbuild": "^0.19.2",
-    "esbuild-register": "^3.4.2",
-    "eslint": "^8.48.0",
+    "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-boundaries": "^3.4.1",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.6.15",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.6.4",
+    "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^29.6.4",
+    "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "refractor": "^4.8.1",
     "rimraf": "^5.0.1",
-    "semantic-release": "^21.1.1",
-    "start-server-and-test": "^2.0.0",
-    "storybook": "^7.4.5",
-    "styled-components": "^6.0.7",
+    "semantic-release": "^22.0.8",
+    "start-server-and-test": "^2.0.3",
+    "storybook": "^7.6.1",
+    "styled-components": "^6.1.1",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.2",
+    "vite": "^5.0.2",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "peerDependencies": {
     "react": "^18",
@@ -150,7 +171,10 @@
   "keywords": [
     "sanity",
     "ui",
-    "components"
+    "primitives",
+    "react",
+    "components",
+    "design-system"
   ],
   "author": "Sanity.io <hello@sanity.io>",
   "homepage": "https://www.sanity.io/",
@@ -164,7 +188,7 @@
       "prettier --write --cache --ignore-unknown"
     ]
   },
-  "packageManager": "pnpm@8.6.12",
+  "packageManager": "pnpm@8.11.0",
   "publishConfig": {
     "access": "public",
     "provenance": true

package/src/core/__workshop__/constants.ts

@@ -0,0 +1,296 @@
+import {icons, IconSymbol} from '@sanity/icons'
+import {
+  AvatarSize,
+  BadgeMode,
+  BadgeTone,
+  ButtonMode,
+  ButtonTextAlign,
+  ButtonTone,
+  CardTone,
+  DialogPosition,
+  FlexAlign,
+  FlexJustify,
+  Placement,
+  TextAlign,
+  TextInputType,
+} from '@sanity/ui'
+import {ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
+
+export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
+  '0': 0,
+  '1 (default)': 1,
+  '2': 2,
+  '3': 3,
+}
+
+export const WORKSHOP_BADGE_MODE_OPTIONS: {[key: string]: BadgeMode} = {
+  Default: 'default',
+  Outline: 'outline',
+}
+
+export const WORKSHOP_BADGE_TONE_OPTIONS: {[key: string]: BadgeTone} = {
+  Default: 'default',
+  Primary: 'primary',
+  Positive: 'positive',
+  Caution: 'caution',
+  Critical: 'critical',
+}
+
+export const WORKSHOP_BUTTON_MODE_OPTIONS: {[key: string]: ButtonMode} = {
+  Default: 'default',
+  Ghost: 'ghost',
+  Bleed: 'bleed',
+}
+
+export const WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS: {[key: string]: ButtonTextAlign | ''} = {
+  '(none)': '',
+  Left: 'left',
+  Right: 'right',
+  Center: 'center',
+}
+
+export const WORKSHOP_BUTTON_TONE_OPTIONS: {[key: string]: ButtonTone} = {
+  Default: 'default',
+  Primary: 'primary',
+  Positive: 'positive',
+  Caution: 'caution',
+  Critical: 'critical',
+}
+
+export const WORKSHOP_CARD_AS_OPTIONS: {
+  [key: string]: 'div' | 'button' | 'span' | 'ol' | 'pre' | 'ul'
+} = {
+  'DIV (default)': 'div',
+  BUTTON: 'button',
+  SPAN: 'span',
+  OL: 'ol',
+  PRE: 'pre',
+  UL: 'ul',
+}
+
+export const WORKSHOP_CARD_TONE_OPTIONS: {[key: string]: CardTone} = {
+  Default: 'default',
+  Inherit: 'inherit',
+  Transparent: 'transparent',
+  Primary: 'primary',
+  Positive: 'positive',
+  Caution: 'caution',
+  Critical: 'critical',
+}
+
+export const WORKSHOP_CODE_LANGUAGE_OPTIONS = {
+  JavaScript: 'javascript',
+  JSON: 'json',
+  JSX: 'jsx',
+  TypeScript: 'typescript',
+}
+
+export const WORKSHOP_CONTAINER_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  auto: 'auto',
+}
+
+export const WORKSHOP_DIALOG_POSITION_OPTIONS: {[key: string]: DialogPosition} = {
+  Fixed: 'fixed',
+  Absolute: 'absolute',
+}
+
+export const WORKSHOP_FLEX_DIRECTION_OPTIONS: {[key: string]: 'row' | 'column'} = {
+  Row: 'row',
+  Column: 'column',
+}
+
+export const WORKSHOP_FLEX_ALIGN_OPTIONS: Record<FlexAlign, FlexAlign> = {
+  baseline: 'baseline',
+  center: 'center',
+  'flex-end': 'flex-end',
+  'flex-start': 'flex-start',
+  stretch: 'stretch',
+}
+
+export const WORKSHOP_FLEX_JUSTIFY_OPTIONS: Record<FlexJustify, FlexJustify> = {
+  center: 'center',
+  'flex-end': 'flex-end',
+  'flex-start': 'flex-start',
+  'space-around': 'space-around',
+  'space-between': 'space-between',
+  'space-evenly': 'space-evenly',
+}
+
+export const WORKSHOP_FONT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey} = {
+  Regular: 'regular',
+  Medium: 'medium',
+  Semibold: 'semibold',
+  Bold: 'bold',
+}
+
+export const WORKSHOP_HEADING_FONT_SIZE_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2 (default)': 2,
+  '3': 3,
+  '4': 4,
+}
+
+export const WORKSHOP_ICON_SYMBOL_OPTIONS: {[key: string]: IconSymbol | ''} = Object.keys(
+  icons,
+).reduce(
+  (acc: {[key: string]: IconSymbol | ''}, key) => {
+    acc[key] = key as IconSymbol
+
+    return acc
+  },
+  {'(none)': ''},
+)
+
+export const WORKSHOP_LABEL_FONT_SIZE_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+}
+
+export const WORKSHOP_PLACEMENT_OPTIONS: Record<Placement, Placement> = {
+  top: 'top',
+  'top-start': 'top-start',
+  'top-end': 'top-end',
+  right: 'right',
+  'right-start': 'right-start',
+  'right-end': 'right-end',
+  left: 'left',
+  'left-start': 'left-start',
+  'left-end': 'left-end',
+  bottom: 'bottom',
+  'bottom-start': 'bottom-start',
+  'bottom-end': 'bottom-end',
+}
+
+export const WORKSHOP_RADIUS_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  '6': 6,
+}
+
+export const WORKSHOP_SHADOW_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+}
+
+export const WORKSHOP_SPACE_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  '6': 6,
+  '7': 7,
+  '8': 8,
+  '9': 9,
+}
+
+export const WORKSHOP_SPOT_COLOR_OPTIONS: {[key: string]: ThemeColorSpotKey} = {
+  Gray: 'gray',
+  Blue: 'blue',
+  Purple: 'purple',
+  Magenta: 'magenta',
+  Red: 'red',
+  Orange: 'orange',
+  Yellow: 'yellow',
+  Green: 'green',
+  Cyan: 'cyan',
+}
+
+export const WORKSHOP_TEXT_ALIGN_OPTIONS: {[key: string]: TextAlign | ''} = {
+  '(none)': '',
+  Initial: 'initial',
+  Left: 'left',
+  Right: 'right',
+  Center: 'center',
+  Justify: 'justify',
+}
+
+export const WORKSHOP_TEXT_FONT_SIZE_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+}
+
+export const WORKSHOP_TEXT_INPUT_TYPE_OPTIONS: {[key: string]: TextInputType} = {
+  date: 'date',
+  'datetime-local': 'datetime-local',
+  email: 'email',
+  month: 'month',
+  number: 'number',
+  password: 'password',
+  tel: 'tel',
+  time: 'time',
+  text: 'text',
+  week: 'week',
+  color: 'color',
+}
+
+export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | ''} = {
+  None: '',
+  Ellipsis: 'ellipsis',
+}
+
+export const WORKSHOP_TEXT_SIZE_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2 (default)': 2,
+  '3': 3,
+  '4': 4,
+}
+
+export const WORKSHOP_TEXT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey | ''} = {
+  'Regular (default)': '',
+  Medium: 'medium',
+  Semibold: 'semibold',
+  Bold: 'bold',
+}
+
+export const WORKSHOP_THEME_COLOR_TONE_OPTIONS: {[key: string]: ThemeColorToneKey} = {
+  Default: 'default',
+  Transparent: 'transparent',
+  Primary: 'primary',
+  Positive: 'positive',
+  Caution: 'caution',
+  Critical: 'critical',
+}
+
+export const WORKSHOP_TOAST_STATUS_OPTIONS: {
+  [key: string]: 'error' | 'success' | 'warning' | 'info' | ''
+} = {
+  None: '',
+  Info: 'info',
+  Success: 'success',
+  Warning: 'warning',
+  Error: 'error',
+}
+
+export const WORKSHOP_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
+  Auto: 'auto',
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+}

package/src/core/__workshop__/fontsPlugin.tsx

@@ -0,0 +1,36 @@
+import {WorkshopPlugin} from '@sanity/ui-workshop'
+import {createGlobalStyle} from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  @font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0') format('woff2');
+    font-named-instance: 'Regular';
+  }
+  @font-face {
+    font-family: 'Inter';
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('https://rsms.me/inter/font-files/InterVariable-Italic.woff2?v=4.0') format('woff2');
+    font-named-instance: 'Italic';
+  }
+`
+
+export function fontsPlugin(): WorkshopPlugin {
+  return {
+    name: 'fonts',
+    title: 'Fonts',
+    provider: function FontsProvider({children}) {
+      return (
+        <>
+          <GlobalStyle />
+          {children}
+        </>
+      )
+    },
+  }
+}