@sanity/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/package.json

@@ -1,68 +1,55 @@
 {
   "name": "@sanity/ui",
-  "version": "1.0.0-beta.3",
-  "main": "dist/cjs/index.js",
-  "module": "dist/es/index.js",
+  "version": "1.0.0-beta.31",
+  "sideEffects": false,
+  "types": "./dist/types/src/index.d.ts",
+  "source": "./src/index.ts",
+  "module": "./dist/sanity-ui.esm.js",
+  "main": "./dist/sanity-ui.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "source": "./src/index.ts",
+      "import": "./dist/sanity-ui.esm.js",
+      "require": "./dist/sanity-ui.js",
+      "default": "./dist/sanity-ui.esm.js"
+    }
+  },
   "files": [
-    "/dist"
+    "dist",
+    "src"
   ],
   "license": "MIT",
   "scripts": {
-    "build": "run-p build-*",
-    "build-cjs": "tsc --module CommonJS --outDir dist/cjs --project tsconfig.dist.json --rootDir ./src --target ES5",
-    "build-es": "tsc --module ES6 --outDir dist/es --project tsconfig.dist.json --rootDir ./src --target ES6",
+    "build": "pkg build",
+    "check:package": "pkg --strict",
     "clean": "rimraf dist",
-    "lint": "eslint . --ext .js,.jsx,.mjs,.ts,.tsx",
-    "prebuild": "npm run clean",
-    "prepublishOnly": "npm run build",
+    "lint": "eslint . --ext .js,.jsx,.mjs,.ts,.tsx --quiet",
+    "postbuild": "run-s check:package",
+    "prebuild": "run-s clean",
     "test": "jest",
-    "type-check": "tsc --noEmit",
-    "watch": "run-p watch-cjs watch-es",
-    "watch-cjs": "tsc -w --module CommonJS --outDir dist/cjs --project tsconfig.dist.json --rootDir ./src --target ES5",
-    "watch-es": "tsc -w --module ES6 --outDir dist/es --project tsconfig.dist.json --rootDir ./src --target ES6"
+    "type-check": "tsc --build",
+    "watch": "pkg watch"
   },
   "dependencies": {
-    "@juggle/resize-observer": "^3.2.0",
-    "@reach/auto-id": "^0.11.2",
-    "@sanity/color": "^2.0.7",
-    "@sanity/icons": "^1.0.0-beta.1",
-    "polished": "^4.0.3"
+    "@floating-ui/react-dom": "^1.0.0",
+    "@sanity/color": "2.1.19-beta.2",
+    "@sanity/icons": "1.3.9-beta.2",
+    "framer-motion": "^7.5.3",
+    "react-refractor": "^2.1.7"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.4.4",
-    "@storybook/addon-actions": "^6.0.27",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-knobs": "^6.0.27",
-    "@storybook/addon-links": "^6.0.27",
-    "@storybook/react": "^6.0.27",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.0",
-    "@types/jest": "^26.0.15",
-    "@types/jest-axe": "^3.5.1",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9",
-    "@types/react-is": "^16.7.1",
-    "@types/react-test-renderer": "^16.9.3",
-    "@types/refractor": "^3.0.0",
-    "@types/resize-observer-browser": "^0.1.4",
-    "@types/styled-components": "^5.1.4",
-    "framer-motion": "^2.9.4",
-    "jest": "^26.6.1",
-    "jest-axe": "^4.0.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-popper": "^2.2.3",
-    "react-refractor": "^2.1.2",
-    "react-test-renderer": "^17.0.1",
-    "styled-components": "^5.2.0",
-    "ts-jest": "^26.4.3"
+    "@juggle/resize-observer": "^3.4.0",
+    "@types/refractor": "^3.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "styled-components": "^5.3.6"
   },
   "peerDependencies": {
-    "@popperjs/core": "^2.4",
-    "framer-motion": "^2.9",
-    "react": "^16.9 || ^17",
-    "react-popper": "^2.2",
-    "react-refractor": "^2.1",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-is": "^18",
     "styled-components": "^5.2"
   },
   "repository": {
@@ -82,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "349524bc5920cd5ff054e2b97bee25501a01217f"
+  "gitHead": "b8ebffaceeea12c568cfc1249627d4b93e6c49f6"
 }

package/src/__workshop__/color/overview.tsx

@@ -0,0 +1,101 @@
+import {black, ColorTints, ColorValue, COLOR_HUES, hues, white} from '@sanity/color'
+import {Box, Card, Code, Flex, Grid, Heading, Stack, useToast} from '@sanity/ui'
+import {useCallback} from 'react'
+import {hexToRgb, rgbToHsl} from '../../theme'
+
+function ucfirst(str: string) {
+  return str.slice(0, 1).toUpperCase() + str.slice(1)
+}
+
+const clipboard = {
+  write(text: string) {
+    const type = 'text/plain'
+    const blob = new Blob([text], {type})
+    const data = [new ClipboardItem({[type]: blob as any})]
+
+    return navigator.clipboard.write(data)
+  },
+}
+
+export default function ColorOverviewStory(): React.ReactElement {
+  return (
+    <Grid columns={[1, 1, 2, 3]} gapX={[4, 4, 5]} gapY={[5, 5, 6]} padding={[4, 5, 6]}>
+      {COLOR_HUES.map((hueKey) => (
+        <ColorHuePreview tints={hues[hueKey]} hueKey={hueKey} key={hueKey} />
+      ))}
+    </Grid>
+  )
+}
+
+function ColorHuePreview(props: {hueKey: string; tints: ColorTints}) {
+  const {hueKey, tints} = props
+
+  return (
+    <Box>
+      <Heading as="h2" size={1}>
+        {ucfirst(hueKey)}
+      </Heading>
+
+      <Stack marginTop={[3, 3, 4]} space={1}>
+        {Object.entries(tints).map(([tintKey, tint]) => {
+          return <ColorTintPreview key={tintKey} tint={tint} />
+        })}
+      </Stack>
+    </Box>
+  )
+}
+
+function ColorTintPreview(props: {tint: ColorValue}) {
+  const {tint} = props
+  const hsl = rgbToHsl(hexToRgb(tint.hex))
+  const {push: pushToast} = useToast()
+
+  const handleClick = useCallback(() => {
+    clipboard
+      .write(tint.hex)
+      .then(() => {
+        pushToast({
+          title: (
+            <>
+              Copied {tint.title} (<code>{tint.hex}</code>) to clipboard!
+            </>
+          ),
+        })
+      })
+      .catch((err) => {
+        // eslint-disable-next-line no-console
+        console.log(err)
+        pushToast({
+          status: 'error',
+          title: <>Copied not write to clipboard!</>,
+        })
+      })
+  }, [pushToast, tint])
+
+  return (
+    <Card
+      __unstable_focusRing
+      as="button"
+      onClick={handleClick}
+      radius={2}
+      style={{
+        ['--card-bg-color' as any]: tint.hex,
+        ['--card-fg-color' as any]: hsl.l < 50 ? white.hex : black.hex,
+        cursor: 'pointer',
+      }}
+    >
+      <Flex padding={3}>
+        <Box flex={1}>
+          <Code size={1} style={{color: 'inherit'}}>
+            {tint.title}
+          </Code>
+        </Box>
+        <Box>
+          <Code size={1} style={{color: 'inherit'}}>
+            {tint.hex}
+          </Code>
+        </Box>
+      </Flex>
+    </Card>
+  )
+}

package/src/__workshop__/constants.ts

@@ -0,0 +1,297 @@
+import {icons, IconSymbol} from '@sanity/icons'
+import {
+  AvatarSize,
+  BadgeMode,
+  BadgeTone,
+  ButtonMode,
+  ButtonTextAlign,
+  ButtonTone,
+  CardTone,
+  DialogPosition,
+  FlexAlign,
+  FlexJustify,
+  Placement,
+  TextAlign,
+  TextInputType,
+  ThemeColorSpotKey,
+  ThemeColorToneKey,
+  ThemeFontWeightKey,
+} from '@sanity/ui'
+
+export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
+  '0 (default)': 0,
+  '1': 1,
+  '2': 2,
+}
+
+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/__workshop__/index.ts

@@ -0,0 +1,10 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope('color', 'Color', [
+  {
+    name: 'overview',
+    title: 'Overview',
+    component: lazy(() => import('./color/overview')),
+  },
+])