@sanity/color-input 2.30.1 → 3.0.0-studio-v3.0

package/package.json

@@ -1,13 +1,34 @@
 {
   "name": "@sanity/color-input",
-  "version": "2.30.1",
+  "version": "3.0.0-studio-v3.0",
   "description": "Color input",
-  "main": "lib/index.js",
-  "author": "Sanity.io <hello@sanity.io>",
-  "license": "MIT",
   "scripts": {
-    "clean": "rimraf lib dest"
+    "clean": "rimraf lib",
+    "prebuild": "npm run clean && tsc --noEmit",
+    "build": "parcel build",
+    "watch": "parcel watch",
+    "prepublishOnly": "npm run build",
+    "compile": "tsc --noEmit",
+    "lint": "eslint .",
+    "format": "prettier src -w",
+    "prepare": "husky install"
+  },
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./lib/index.modern.js"
+    }
   },
+  "main": "./lib/index.js",
+  "module": "./lib/index.modern.js",
+  "types": "./lib/index.d.ts",
+  "files": [
+    "src",
+    "lib"
+  ],
+  "author": "Sanity.io <hello@sanity.io>",
+  "license": "MIT",
   "keywords": [
     "sanity",
     "cms",
@@ -18,22 +39,39 @@
     "sanity-plugin"
   ],
   "dependencies": {
-    "@sanity/icons": "^1.2.6",
+    "@sanity/icons": "^1.2.8",
     "@sanity/ui": "^0.37.9",
-    "lodash": "^4.17.15",
-    "react-color": "^2.13.8"
+    "lodash": "^4.17.21",
+    "react-color": "^2.19.3"
   },
   "devDependencies": {
-    "@sanity/base": "2.30.1",
-    "@sanity/types": "2.29.5",
-    "react": "17.0.1",
-    "rimraf": "^2.7.1"
+    "@commitlint/cli": "^16.1.0",
+    "@commitlint/config-conventional": "^15.0.0",
+    "@parcel/packager-ts": "^2.6.0",
+    "@parcel/transformer-typescript-types": "^2.6.0",
+    "@types/react-color": "^2.17.6",
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@typescript-eslint/parser": "^5.12.0",
+    "eslint": "^8.7.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-sanity": "^5.1.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "husky": "^7.0.0",
+    "lint-staged": "^12.4.1",
+    "parcel": "^2.6.0",
+    "prettier": "^2.6.2",
+    "react": "^17.0.0 || ^18.0.0",
+    "rimraf": "^3.0.2",
+    "sanity": "purple-unicorn",
+    "styled-components": "^5.2.0",
+    "typescript": "^4.6.4"
   },
   "peerDependencies": {
-    "@sanity/base": "^2.14",
-    "@sanity/types": "^2.14",
-    "prop-types": "^15.6 || ^16",
-    "react": "^16.9 || ^17",
+    "react": "^17.0.0 || ^18.0.0",
+    "sanity": "purple-unicorn",
     "styled-components": "^5.2.0"
   },
   "bugs": {
@@ -48,5 +86,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cf0a8097e331365ecea9635905d509218ce494ee"
+  "engines": {
+    "node": ">=14.0.0"
+  }
 }

package/src/ColorInput.tsx

@@ -0,0 +1,110 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {set, setIfMissing, unset} from 'sanity/form'
+import {debounce} from 'lodash'
+import {Button} from '@sanity/ui'
+import {AddIcon} from '@sanity/icons'
+import {ColorPicker} from './ColorPicker'
+import {ObjectInputProps} from 'sanity'
+import {HSLColor, HSVColor, RGBColor} from 'react-color'
+import {ObjectSchemaType} from '@sanity/types'
+
+const DEFAULT_COLOR: ColorValue & {source: string} = {
+  hex: '#24a3e3',
+  hsl: {h: 200, s: 0.7732, l: 0.5156, a: 1},
+  hsv: {h: 200, s: 0.8414, v: 0.8901, a: 1},
+  rgb: {r: 46, g: 163, b: 227, a: 1},
+  source: 'hex',
+}
+
+export interface ColorValue {
+  hex: string
+  hsl: HSLColor
+  hsv: HSVColor
+  rgb: RGBColor
+}
+
+export interface ColorOptions {
+  disableAlpha?: boolean
+}
+
+export type ColorSchemaType = ObjectSchemaType & {
+  options?: ColorOptions
+}
+export type ColorInputProps = ObjectInputProps<ColorValue, ColorSchemaType>
+
+export function ColorInput(props: ColorInputProps) {
+  const {onChange, schemaType: type, readOnly, value} = props
+  const focusRef = useRef<HTMLButtonElement>(null)
+
+  // use local state so we can have instant ui updates while debouncing patch emits
+  const [color, setColor] = useState(value)
+  useEffect(() => setColor(value), [value])
+
+  const emitSetColor = useCallback(
+    (nextColor: ColorValue) => {
+      const fieldPatches = type.fields
+        .filter((field) => field.name in nextColor)
+        .map((field) => {
+          const nextFieldValue = nextColor[field.name as keyof ColorValue]
+          const isObject = field.type.jsonType === 'object'
+          return set(
+            isObject ? Object.assign({_type: field.type.name}, nextFieldValue) : nextFieldValue,
+            [field.name]
+          )
+        })
+
+      onChange([
+        setIfMissing({_type: type.name}),
+        set(type.name, ['_type']),
+        set(nextColor.rgb?.a, ['alpha']),
+        ...fieldPatches,
+      ])
+    },
+    [onChange, type]
+  )
+
+  // The color picker emits onChange events continuously while the user is sliding the
+  // hue/saturation/alpha selectors. This debounces the event to avoid excessive patches
+  const debouncedColorChange = useMemo(() => debounce(emitSetColor, 100), [emitSetColor])
+  const handleColorChange = useCallback(
+    (nextColor: ColorValue) => {
+      setColor(nextColor)
+      debouncedColorChange(nextColor)
+    },
+    [debouncedColorChange, setColor]
+  )
+
+  const handleCreateColor = useCallback(() => {
+    setColor(DEFAULT_COLOR)
+    emitSetColor(DEFAULT_COLOR)
+  }, [emitSetColor])
+
+  const handleUnset = useCallback(() => {
+    setColor(undefined)
+    onChange(unset())
+  }, [onChange])
+
+  return (
+    <>
+      {value ? (
+        <ColorPicker
+          /*            ref={this.focusRef}*/
+          color={color}
+          onChange={handleColorChange}
+          readOnly={readOnly || (typeof type.readOnly === 'boolean' && type.readOnly)}
+          disableAlpha={type.options?.disableAlpha}
+          onUnset={handleUnset}
+        />
+      ) : (
+        <Button
+          icon={AddIcon}
+          mode="ghost"
+          text="Create color"
+          ref={focusRef}
+          disabled={Boolean(readOnly)}
+          onClick={handleCreateColor}
+        />
+      )}
+    </>
+  )
+}

package/src/ColorPicker.tsx

@@ -0,0 +1,139 @@
+import React from 'react'
+import {Alpha, Checkboard, Hue, Saturation} from 'react-color/lib/components/common'
+import {CustomPicker, HEXColor, HSLColor, HSVColor, RGBColor} from 'react-color'
+import {Box, Button, Card, Flex, Inline, Stack, Text} from '@sanity/ui'
+import {TrashIcon} from '@sanity/icons'
+import styled from 'styled-components'
+import {ColorPickerFields} from './ColorPickerFields'
+import {CustomPickerInjectedProps} from 'react-color/lib/components/common/ColorWrap'
+import {ColorValue} from './ColorInput'
+
+const ColorBox = styled(Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`
+
+const ReadOnlyContainer = styled(Flex)`
+  margin-top: 6rem;
+  background-color: var(--card-bg-color);
+  position: relative;
+  width: 100%;
+`
+
+export interface ColorPickerProps
+  extends CustomPickerInjectedProps<HSLColor | HSVColor | RGBColor | HEXColor> {
+  width?: string
+  disableAlpha: boolean
+  readOnly?: boolean
+  onUnset: () => void
+  color: ColorValue
+}
+
+const ColorPickerInner = (props: ColorPickerProps) => {
+  const {
+    width,
+    color: {rgb, hex, hsv, hsl},
+    onChange,
+    onUnset,
+    disableAlpha,
+    readOnly,
+  } = props
+  return (
+    <div style={{width}}>
+      <Card padding={1} border radius={1}>
+        <Stack space={2}>
+          {!readOnly && (
+            <>
+              <Card overflow="hidden" style={{position: 'relative', height: '5em'}}>
+                <Saturation onChange={onChange} hsl={hsl} hsv={hsv} />
+              </Card>
+
+              <Card
+                shadow={1}
+                radius={3}
+                overflow="hidden"
+                style={{position: 'relative', height: '10px'}}
+              >
+                <Hue hsl={hsl} onChange={!readOnly && onChange} />
+              </Card>
+
+              {!disableAlpha && (
+                <Card
+                  shadow={1}
+                  radius={3}
+                  overflow="hidden"
+                  style={{position: 'relative', height: '10px'}}
+                >
+                  <Alpha rgb={rgb} hsl={hsl} onChange={onChange} />
+                </Card>
+              )}
+            </>
+          )}
+          <Flex>
+            <Card
+              flex={1}
+              radius={2}
+              overflow="hidden"
+              style={{position: 'relative', minWidth: '4em'}}
+            >
+              <Checkboard />
+              <ColorBox
+                style={{
+                  backgroundColor: `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`,
+                }}
+              />
+
+              {readOnly && (
+                <ReadOnlyContainer
+                  padding={2}
+                  paddingBottom={1}
+                  sizing="border"
+                  justify="space-between"
+                >
+                  <Stack space={3} marginTop={1}>
+                    <Text size={3} weight="bold">
+                      {hex}
+                    </Text>
+
+                    <Inline space={3}>
+                      <Text size={1}>
+                        <strong>RGB: </strong>
+                        {rgb?.r} {rgb?.g} {rgb?.b}
+                      </Text>
+                      <Text size={1}>
+                        <strong>HSL: </strong> {Math.round(hsl?.h ?? 0)} {Math.round(hsl?.s ?? 0)}%{' '}
+                        {Math.round(hsl?.l ?? 0)}
+                      </Text>
+                    </Inline>
+                  </Stack>
+                </ReadOnlyContainer>
+              )}
+            </Card>
+
+            {!readOnly && (
+              <Flex align="flex-start" marginLeft={2}>
+                <Box style={{width: 200}}>
+                  <ColorPickerFields
+                    rgb={rgb}
+                    hsl={hsl}
+                    hex={hex}
+                    onChange={onChange}
+                    disableAlpha={disableAlpha}
+                  />
+                </Box>
+                <Box marginLeft={2}>
+                  <Button onClick={onUnset} title="Delete color" icon={TrashIcon} tone="critical" />
+                </Box>
+              </Flex>
+            )}
+          </Flex>
+        </Stack>
+      </Card>
+    </div>
+  )
+}
+
+export const ColorPicker = CustomPicker(ColorPickerInner)

package/src/ColorPickerFields.tsx

@@ -0,0 +1,144 @@
+import React, {useCallback, useMemo} from 'react'
+// @ts-expect-error missing export
+import {isValidHex} from 'react-color/lib/helpers/color'
+import {EditableInput} from 'react-color/lib/components/common'
+import {Box, Flex, useTheme} from '@sanity/ui'
+import {ColorChangeHandler, HEXColor, HSLColor, HSVColor, RGBColor} from 'react-color'
+import {EditableInputStyles} from 'react-color/lib/components/common/EditableInput'
+
+interface ColorPickerFieldsProps {
+  rgb?: RGBColor
+  hsl?: HSLColor
+  hex?: string
+  disableAlpha: boolean
+  onChange: ColorChangeHandler<HSLColor | HSVColor | RGBColor | HEXColor>
+}
+
+export const ColorPickerFields = ({
+  onChange,
+  rgb,
+  hsl,
+  hex,
+  disableAlpha,
+}: ColorPickerFieldsProps) => {
+  const {sanity} = useTheme()
+
+  const inputStyles: EditableInputStyles = useMemo(
+    () => ({
+      input: {
+        width: '80%',
+        padding: '4px 10% 3px',
+        border: 'none',
+        boxShadow: `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`,
+        color: sanity.color.input.default.enabled.fg,
+        backgroundColor: sanity.color.input.default.enabled.bg,
+        fontSize: sanity.fonts.text.sizes[0].fontSize,
+        textAlign: 'center',
+      },
+      label: {
+        display: 'block',
+        textAlign: 'center',
+        fontSize: sanity.fonts.label.sizes[0].fontSize,
+        color: sanity.color.base.fg,
+        paddingTop: '3px',
+        paddingBottom: '4px',
+        textTransform: 'capitalize',
+      },
+    }),
+    [sanity]
+  )
+
+  const handleChange: ColorChangeHandler<Record<string, string>> = useCallback(
+    (data) => {
+      if ('hex' in data && data.hex && isValidHex(data.hex)) {
+        onChange({
+          hex: data.hex,
+          source: 'hex',
+        })
+      } else if (
+        rgb &&
+        (('r' in data && data.r) || ('g' in data && data.g) || ('b' in data && data.b))
+      ) {
+        onChange({
+          r: Number(data.r) || rgb.r,
+          g: Number(data.g) || rgb.g,
+          b: Number(data.b) || rgb.b,
+          a: rgb.a,
+          source: 'rgb',
+        })
+      } else if (hsl && 'a' in data && data.a) {
+        let alpha = Number(data.a)
+        if (alpha < 0) {
+          alpha = 0
+        } else if (alpha > 100) {
+          alpha = 100
+        }
+        alpha /= 100
+
+        onChange({
+          h: hsl.h,
+          s: hsl.s,
+          l: hsl.l,
+          a: alpha,
+          source: 'hsl',
+        })
+      }
+    },
+    [onChange, hsl, rgb]
+  )
+
+  return (
+    <Flex>
+      <Box flex={2} marginRight={1}>
+        <EditableInput
+          style={inputStyles}
+          label="hex"
+          value={hex?.replace('#', '')}
+          onChange={handleChange}
+        />
+      </Box>
+      <Box flex={1} marginRight={1}>
+        <EditableInput
+          style={inputStyles}
+          label="r"
+          value={rgb?.r}
+          onChange={handleChange}
+          dragLabel
+          dragMax={255}
+        />
+      </Box>
+      <Box flex={1} marginRight={1}>
+        <EditableInput
+          style={inputStyles}
+          label="g"
+          value={rgb?.g}
+          onChange={handleChange}
+          dragLabel
+          dragMax={255}
+        />
+      </Box>
+      <Box flex={1} marginRight={1}>
+        <EditableInput
+          style={inputStyles}
+          label="b"
+          value={rgb?.b}
+          onChange={handleChange}
+          dragLabel
+          dragMax={255}
+        />
+      </Box>
+      {!disableAlpha && (
+        <Box flex={1}>
+          <EditableInput
+            style={inputStyles}
+            label="a"
+            value={Math.round((rgb?.a ?? 1) * 100)}
+            onChange={handleChange}
+            dragLabel
+            dragMax={100}
+          />
+        </Box>
+      )}
+    </Flex>
+  )
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+import {createPlugin} from 'sanity'
+import {hslaColor} from './schemas/hslaColor'
+import {rgbaColor} from './schemas/rgbaColor'
+import {color} from './schemas/color'
+import {hsvaColor} from './schemas/hsvaColor'
+
+export const colorInput = createPlugin({
+  name: '@sanity/color-input',
+  schema: {
+    types: [hslaColor, hsvaColor, rgbaColor, color],
+  },
+})
+
+export {hslaColor, rgbaColor, color, hsvaColor}
+export {ColorInput} from './ColorInput'
+export type {ColorValue, ColorInputProps, ColorOptions, ColorSchemaType} from './ColorInput'

package/src/schemas/color.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import {ColorInput} from '../ColorInput'
+
+const round = (val: number = 1) => Math.round(val * 100)
+
+export const color = {
+  name: 'color',
+  type: 'object',
+  title: 'Color',
+  components: {input: ColorInput},
+  fields: [
+    {
+      title: 'Hex',
+      name: 'hex',
+      type: 'string',
+    },
+    {
+      title: 'Alpha',
+      name: 'alpha',
+      type: 'number',
+    },
+    {
+      title: 'Hue Saturation Lightness',
+      name: 'hsl',
+      type: 'hslaColor',
+    },
+    {
+      title: 'Hue Saturation Value',
+      name: 'hsv',
+      type: 'hsvaColor',
+    },
+    {
+      title: 'Red Green Blue (rgb)',
+      name: 'rgb',
+      type: 'rgbaColor',
+    },
+  ],
+  preview: {
+    select: {
+      title: 'hex',
+      alpha: 'alpha',
+      hex: 'hex',
+      hsl: 'hsl',
+    },
+    prepare({
+      title,
+      hex,
+      hsl,
+      alpha,
+    }: {
+      title?: string
+      alpha?: number
+      hex?: string
+      hsl?: {h: number; s: number; l: number}
+    }) {
+      let subtitle = hex || 'No color set'
+      if (hsl) {
+        subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`
+      }
+      return {
+        title: title,
+        subtitle: subtitle,
+        media: () => (
+          <div
+            style={{
+              backgroundColor: hex ?? '#000',
+              opacity: alpha ?? 1,
+              position: 'absolute',
+              height: '100%',
+              width: '100%',
+              top: '0',
+              left: '0',
+            }}
+          />
+        ),
+      }
+    },
+  },
+}

package/src/schemas/hslaColor.ts

@@ -0,0 +1,11 @@
+export const hslaColor = {
+  title: 'Hue Saturation Lightness',
+  name: 'hslaColor',
+  type: 'object',
+  fields: [
+    {name: 'h', type: 'number', title: 'Hue'},
+    {name: 's', type: 'number', title: 'Saturation'},
+    {name: 'l', type: 'number', title: 'Lightness'},
+    {name: 'a', type: 'number', title: 'Alpha'},
+  ],
+}

package/src/schemas/hsvaColor.ts

@@ -0,0 +1,11 @@
+export const hsvaColor = {
+  title: 'Hue Saturation Value',
+  name: 'hsvaColor',
+  type: 'object',
+  fields: [
+    {name: 'h', type: 'number', title: 'Hue'},
+    {name: 's', type: 'number', title: 'Saturation'},
+    {name: 'v', type: 'number', title: 'Value'},
+    {name: 'a', type: 'number', title: 'Alpha'},
+  ],
+}

package/src/schemas/rgbaColor.ts

@@ -0,0 +1,11 @@
+export const rgbaColor = {
+  title: 'Red Green Blue (rgb)',
+  name: 'rgbaColor',
+  type: 'object',
+  fields: [
+    {name: 'r', type: 'number', title: 'Red'},
+    {name: 'g', type: 'number', title: 'Green'},
+    {name: 'b', type: 'number', title: 'Blue'},
+    {name: 'a', type: 'number', title: 'Alpha'},
+  ],
+}