@sanity/ui 1.0.0-next.3 → 1.0.0

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@sanity/ui",
-  "version": "1.0.0-next.3+dc2d5edc",
+  "version": "1.0.0",
   "sideEffects": false,
-  "types": "./dist/types/src/index.d.ts",
+  "types": "./dist/index.d.ts",
   "source": "./src/index.ts",
-  "module": "./dist/sanity-ui.esm.js",
-  "main": "./dist/sanity-ui.js",
+  "module": "./dist/index.esm.js",
+  "main": "./dist/index.js",
   "exports": {
     ".": {
-      "types": "./dist/types/src/index.d.ts",
+      "types": "./dist/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./dist/sanity-ui.esm.js",
-      "require": "./dist/sanity-ui.js",
-      "default": "./dist/sanity-ui.esm.js"
-    }
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.esm.js"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
@@ -21,30 +22,90 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "pkg build",
-    "check:package": "pkg --strict",
-    "clean": "rimraf dist",
-    "lint": "eslint . --ext .js,.jsx,.mjs,.ts,.tsx --quiet",
-    "postbuild": "run-s check:package",
-    "prebuild": "run-s clean",
+    "build": "run-s clean build:pkg check:pkg",
+    "build:pkg": "pkg build --strict",
+    "build:workshop": "node scripts/build",
+    "check:pkg": "pkg --strict",
+    "check:types": "tsc",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "dev": "node scripts/dev",
+    "dev:cypress": "run-p dev cypress:open",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx --quiet",
+    "prepare": "husky install",
+    "prepublishOnly": "pnpm build",
+    "release": "semantic-release",
+    "start:workshop": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? .workshop/dist",
     "test": "jest",
-    "type-check": "tsc --build",
-    "watch": "pkg watch"
+    "test:browser": "start-server-and-test 'run-s build:workshop start:workshop' http://localhost:1337 'run-s cypress:run'",
+    "watch": "pkg watch --strict"
   },
   "dependencies": {
     "@floating-ui/react-dom": "^1.0.0",
-    "@sanity/color": "2.1.19-next.3+dc2d5edc",
-    "@sanity/icons": "1.3.9-next.3+dc2d5edc",
+    "@sanity/color": "^2.1.20",
+    "@sanity/icons": "^2.0.0",
+    "csstype": "^3.1.1",
     "framer-motion": "^7.5.3",
     "react-refractor": "^2.1.7"
   },
   "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
     "@juggle/resize-observer": "^3.4.0",
+    "@sanity/pkg-utils": "^1.18.0",
+    "@sanity/semantic-release-preset": "^2.0.2",
+    "@sanity/ui-workshop": "1.0.0-beta.9",
+    "@testing-library/dom": "^8.19.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.2.3",
+    "@types/jest-axe": "^3.5.5",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@types/react-is": "^17.0.3",
     "@types/refractor": "^3.0.2",
+    "@types/styled-components": "^5.1.26",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
+    "commitizen": "^4.2.5",
+    "cypress": "^11.2.0",
+    "cypress-real-events": "^1.7.4",
+    "cz-conventional-changelog": "^3.3.0",
+    "esbuild": "^0.15.15",
+    "esbuild-register": "^3.4.1",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "http-server": "^14.1.1",
+    "husky": "^8.0.2",
+    "jest": "^29.3.1",
+    "jest-axe": "^7.0.0",
+    "jest-environment-jsdom": "^29.3.1",
+    "lint-staged": "^13.0.3",
+    "module-alias": "^2.2.2",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "styled-components": "^5.3.6"
+    "rimraf": "^3.0.2",
+    "semantic-release": "^19.0.5",
+    "start-server-and-test": "^1.14.0",
+    "styled-components": "^5.3.6",
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "react": "^18",
@@ -52,12 +113,15 @@
     "react-is": "^18",
     "styled-components": "^5.2"
   },
+  "engines": {
+    "node": ">=14.0.0"
+  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sanity-io/design.git"
+    "url": "git+https://github.com/sanity-io/ui.git"
   },
   "bugs": {
-    "url": "https://github.com/sanity-io/design/issues"
+    "url": "https://github.com/sanity-io/ui/issues"
   },
   "keywords": [
     "sanity",
@@ -66,8 +130,33 @@
   ],
   "author": "Sanity.io <hello@sanity.io>",
   "homepage": "https://www.sanity.io/",
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*": [
+      "prettier --write --cache --ignore-unknown"
+    ]
+  },
+  "packageManager": "pnpm@7.12.2",
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dc2d5edccec2ac27f362f14447b40ea5b187bd00"
+  "release": {
+    "extends": "@sanity/semantic-release-preset",
+    "branches": [
+      "+([0-9])?(.{+([0-9]),x}).x",
+      "main",
+      {
+        "name": "beta",
+        "prerelease": true
+      },
+      {
+        "name": "alpha",
+        "prerelease": true
+      }
+    ]
+  }
 }

package/src/components/autocomplete/__workshop__/example.tsx

@@ -1,6 +1,6 @@
 import {Autocomplete, Box, Card, Container, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop'
+import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
 import {useCallback, useMemo, useState} from 'react'
 import {

package/src/components/autocomplete/__workshop__/index.ts

@@ -1,35 +1,39 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/autocomplete', 'Autocomplete', [
-  {
-    name: 'example',
-    title: 'Example',
-    component: lazy(() => import('./example')),
-  },
-  {
-    name: 'custom',
-    title: 'Custom',
-    component: lazy(() => import('./custom')),
-  },
-  {
-    name: 'async',
-    title: 'Async',
-    component: lazy(() => import('./async')),
-  },
-  {
-    name: 'constrained-height',
-    title: 'Constrained height',
-    component: lazy(() => import('./constrainedHeight')),
-  },
-  {
-    name: 'focus-and-blur',
-    title: 'Focus and blur',
-    component: lazy(() => import('./focusAndBlur')),
-  },
-  {
-    name: 'fullscreen',
-    title: 'Fullscreen',
-    component: lazy(() => import('./fullscreen')),
-  },
-])
+export default defineScope({
+  name: 'components/autocomplete',
+  title: 'Autocomplete',
+  stories: [
+    {
+      name: 'example',
+      title: 'Example',
+      component: lazy(() => import('./example')),
+    },
+    {
+      name: 'custom',
+      title: 'Custom',
+      component: lazy(() => import('./custom')),
+    },
+    {
+      name: 'async',
+      title: 'Async',
+      component: lazy(() => import('./async')),
+    },
+    {
+      name: 'constrained-height',
+      title: 'Constrained height',
+      component: lazy(() => import('./constrainedHeight')),
+    },
+    {
+      name: 'focus-and-blur',
+      title: 'Focus and blur',
+      component: lazy(() => import('./focusAndBlur')),
+    },
+    {
+      name: 'fullscreen',
+      title: 'Fullscreen',
+      component: lazy(() => import('./fullscreen')),
+    },
+  ],
+})

package/src/components/autocomplete/autocomplete.styles.tsx

@@ -1,44 +1,38 @@
 import {SpinnerIcon} from '@sanity/icons'
-import {memo} from 'react'
 import styled, {keyframes} from 'styled-components'
 import {Box} from '../../primitives'
 
 /**
  * @internal
  */
-export const Root = memo(
-  styled.div({
-    lineHeight: 0,
-  })
-)
+export const Root = styled.div`
+  line-height: 0;
+`
 
 /**
  * @internal
  */
-export const ListBox = memo(
-  styled(Box)({
-    '& > ul': {
-      listStyle: 'none',
-      padding: 0,
-      margin: 0,
-    },
-  })
-)
+export const ListBox = styled(Box)`
+  & > ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+`
 
-const rotate = keyframes({
-  from: {
-    transform: 'rotate(0deg)',
-  },
-  to: {
-    transform: 'rotate(360deg)',
-  },
-})
+const rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`
 
 /**
  * @internal
  */
-export const AnimatedSpinnerIcon = memo(
-  styled(SpinnerIcon)`
-    animation: ${rotate} 500ms linear infinite;
-  `
-)
+export const AnimatedSpinnerIcon = styled(SpinnerIcon)`
+  animation: ${rotate} 500ms linear infinite;
+`

package/src/components/autocomplete/autocomplete.tsx

@@ -37,7 +37,6 @@ import {autocompleteReducer} from './autocompleteReducer'
 import {
   AUTOCOMPLETE_LISTBOX_IGNORE_KEYS,
   AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS,
-  AUTOCOMPLETE_POPOVER_MARGINS,
   AUTOCOMPLETE_POPOVER_PLACEMENT,
 } from './constants'
 import {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'
@@ -641,7 +640,6 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
     return (
       <Popover
-        __unstable_margins={AUTOCOMPLETE_POPOVER_MARGINS}
         arrow={false}
         constrainSize
         content={content}
@@ -650,6 +648,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         onMouseEnter={handlePopoverMouseEnter}
         onMouseLeave={handlePopoverMouseLeave}
         open={expanded}
+        overflow="auto"
         placement={AUTOCOMPLETE_POPOVER_PLACEMENT}
         portal
         radius={radius}

package/src/components/autocomplete/constants.ts

@@ -1,4 +1,4 @@
-import {Placement, PopoverMargins} from '../../types'
+import {Placement} from '../../types'
 
 /**
  * @internal
@@ -20,14 +20,9 @@ export const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
 /**
  * @internal
  */
-export const AUTOCOMPLETE_POPOVER_MARGINS: PopoverMargins = [0, 1, 0, 0]
+export const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom-start'
 
 /**
  * @internal
  */
-export const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom'
-
-/**
- * @internal
- */
-export const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['bottom', 'top']
+export const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['bottom-start', 'top-start']

package/src/components/breadcrumbs/__workshop__/index.ts

@@ -1,10 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/breadcrumbs', 'Breadcrumbs', [
-  {
-    name: 'example',
-    title: 'Example',
-    component: lazy(() => import('./example')),
-  },
-])
+export default defineScope({
+  name: 'components/breadcrumbs',
+  title: 'Breadcrumbs',
+  stories: [
+    {
+      name: 'example',
+      title: 'Example',
+      component: lazy(() => import('./example')),
+    },
+  ],
+})

package/src/components/breadcrumbs/breadcrumbs.styles.ts

@@ -1,22 +1,17 @@
-import {memo} from 'react'
 import styled from 'styled-components'
 import {Button} from '../../primitives'
 
-export const Root = memo(
-  styled.ol({
-    margin: 0,
-    padding: 0,
-    display: 'flex',
-    listStyle: 'none',
-    alignItems: 'center',
-    whiteSpace: 'nowrap',
-    lineHeight: 0,
-  })
-)
+export const Root = styled.ol`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  list-style: none;
+  align-items: center;
+  white-space: nowrap;
+  line-height: 0;
+`
 
-export const ExpandButton = memo(
-  styled(Button)({
-    appearance: 'none',
-    margin: '-4px',
-  })
-)
+export const ExpandButton = styled(Button)`
+  appearance: none;
+  margin: -4px;
+`

package/src/components/dialog/__workshop__/index.ts

@@ -1,12 +1,16 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/dialog', 'Dialog', [
-  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-  {name: 'nested', title: 'Nested', component: lazy(() => import('./nested'))},
-  {name: 'on-scroll', title: 'On scroll', component: lazy(() => import('./onScroll'))},
-  {name: 'layering', title: 'Layering', component: lazy(() => import('./layering'))},
-  {name: 'position', title: 'Position', component: lazy(() => import('./position'))},
-  {name: 'provider', title: 'Provider', component: lazy(() => import('./provider'))},
-  {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./autoFocus'))},
-])
+export default defineScope({
+  name: 'components/dialog',
+  title: 'Dialog',
+  stories: [
+    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+    {name: 'nested', title: 'Nested', component: lazy(() => import('./nested'))},
+    {name: 'on-scroll', title: 'On scroll', component: lazy(() => import('./onScroll'))},
+    {name: 'layering', title: 'Layering', component: lazy(() => import('./layering'))},
+    {name: 'position', title: 'Position', component: lazy(() => import('./position'))},
+    {name: 'provider', title: 'Provider', component: lazy(() => import('./provider'))},
+    {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./autoFocus'))},
+  ],
+})

package/src/components/dialog/dialog.tsx

@@ -1,5 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
-import {forwardRef, memo, useCallback, useEffect, useRef, useState} from 'react'
+import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {focusFirstDescendant, focusLastDescendant} from '../../helpers'
 import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '../../hooks'
@@ -63,80 +63,66 @@ interface DialogCardProps extends ResponsiveWidthProps {
   shadow: number | number[]
 }
 
-const Root = memo(
-  styled(Layer)<ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps>(
-    responsivePaddingStyle,
-    dialogStyle,
-    responsiveDialogPositionStyle
-  )
+const Root = styled(Layer)<ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps>(
+  responsivePaddingStyle,
+  dialogStyle,
+  responsiveDialogPositionStyle
 )
 
-const DialogContainer = memo(
-  styled(Container)({
-    '&:not([hidden])': {
-      display: 'flex',
-    },
-    width: '100%',
-    height: '100%',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-  })
-)
+const DialogContainer = styled(Container)`
+  &:not([hidden]) {
+    display: flex;
+  }
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
 
-const DialogCardRoot = memo(
-  styled(Card)({
-    '&:not([hidden])': {
-      display: 'flex',
-    },
-    width: '100%',
-    minHeight: 0,
-    maxHeight: '100%',
-    overflow: 'hidden',
-  })
-)
+const DialogCardRoot = styled(Card)`
+  &:not([hidden]) {
+    display: flex;
+  }
+  width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+`
 
-const DialogLayout = memo(
-  styled(Flex)({
-    flex: 1,
-    minHeight: 0,
-    width: '100%',
-  })
-)
+const DialogLayout = styled(Flex)`
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+`
 
-const DialogHeader = memo(
-  styled(Card)({
-    position: 'relative',
-    zIndex: 2,
+const DialogHeader = styled(Card)`
+  position: relative;
+  z-index: 2;
 
-    '&:after': {
-      content: '""',
-      display: 'block',
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: '-1px',
-      borderBottom: '1px solid var(--card-hairline-soft-color)',
-    },
-  })
-)
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    border-bottom: 1px solid var(--card-hairline-soft-color);
+  }
+`
 
-const DialogContent = memo(
-  styled(Box)({
-    position: 'relative',
-    zIndex: 1,
-    overflow: 'auto',
-    outline: 'none',
-  })
-)
+const DialogContent = styled(Box)`
+  position: relative;
+  z-index: 1;
+  overflow: auto;
+  outline: none;
+`
 
-const DialogFooter = memo(
-  styled(Box)({
-    position: 'relative',
-    zIndex: 3,
-    borderTop: '1px solid var(--card-hairline-soft-color)',
-  })
-)
+const DialogFooter = styled(Box)`
+  position: relative;
+  z-index: 3;
+  border-top: 1px solid var(--card-hairline-soft-color);
+`
 
 const DialogCard = forwardRef(function DialogCard(
   props: DialogCardProps,

package/src/components/hotkeys/__workshop__/index.ts

@@ -1,6 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('components/hotkeys', 'Hotkeys', [
-  {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-])
+export default defineScope({
+  name: 'components/hotkeys',
+  title: 'Hotkeys',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+  ],
+})

package/src/components/hotkeys/hotkeys.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Inline, KBD} from '../../primitives'
@@ -14,22 +14,18 @@ export interface HotkeysProps {
   keys?: string[]
 }
 
-const Root = memo(
-  styled.kbd({
-    '&:not([hidden])': {
-      display: 'block',
-    },
-    font: 'inherit',
-  })
-)
+const Root = styled.kbd`
+  &:not([hidden]) {
+    display: block;
+  }
+  font: inherit;
+`
 
-const Key = memo(
-  styled(KBD)({
-    '&:not([hidden])': {
-      display: 'block',
-    },
-  })
-)
+const Key = styled(KBD)`
+  &:not([hidden]) {
+    display: block;
+  }
+`
 
 /**
  * @public