@sanity/color-input 2.30.2-shopify.2 → 3.0.0-v3-studio.2

package/lib/types/index.d.ts

@@ -0,0 +1,84 @@
+import { ObjectInputProps, ObjectSchemaType } from "sanity";
+import { HSLColor, HSVColor, RGBColor } from "react-color";
+export const hslaColor: {
+    title: string;
+    name: string;
+    type: string;
+    fields: {
+        name: string;
+        type: string;
+        title: string;
+    }[];
+};
+export const rgbaColor: {
+    title: string;
+    name: string;
+    type: string;
+    fields: {
+        name: string;
+        type: string;
+        title: string;
+    }[];
+};
+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): JSX.Element;
+export const color: {
+    name: string;
+    type: string;
+    title: string;
+    components: {
+        input: typeof ColorInput;
+    };
+    fields: {
+        title: string;
+        name: string;
+        type: string;
+    }[];
+    preview: {
+        select: {
+            title: string;
+            alpha: string;
+            hex: string;
+            hsl: string;
+        };
+        prepare({ title, hex, hsl, alpha, }: {
+            title?: string | undefined;
+            alpha?: number | undefined;
+            hex?: string | undefined;
+            hsl?: {
+                h: number;
+                s: number;
+                l: number;
+            } | undefined;
+        }): {
+            title: string | undefined;
+            subtitle: string;
+            media: () => JSX.Element;
+        };
+    };
+};
+export const hsvaColor: {
+    title: string;
+    name: string;
+    type: string;
+    fields: {
+        name: string;
+        type: string;
+        title: string;
+    }[];
+};
+export const colorInput: import("sanity").Plugin<void>;
+
+//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;AAAA,OAAO,MAAM;;;;;;;;;CAUZ,CAAA;ACVD,OAAO,MAAM;;;;;;;;;CAUZ,CAAA;AGQD;IACE,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,QAAQ,CAAA;IACb,GAAG,EAAE,QAAQ,CAAA;IACb,GAAG,EAAE,QAAQ,CAAA;CACd;AAED;IACE,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,8BAA8B,gBAAgB,GAAG;IAC/C,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,CAAA;AACD,8BAA8B,iBAAiB,UAAU,EAAE,eAAe,CAAC,CAAA;AAE3E,2BAA2B,KAAK,EAAE,eAAe,eA2EhD;ACxGD,OAAO,MAAM;;;;;;;;;;;;;;;;;;;;;;;;mBAgDG,MAAM;mBAAK,MAAM;mBAAK,MAAM;;;;;;;;CAyB3C,CAAA;AC9ED,OAAO,MAAM;;;;;;;;;CAUZ,CAAA;ACJD,OAAO,MAAM,yCAKX,CAAA","sources":["src/src/schemas/hslaColor.ts","src/src/schemas/rgbaColor.ts","src/src/ColorPickerFields.tsx","src/src/ColorPicker.tsx","src/src/ColorInput.tsx","src/src/schemas/color.tsx","src/src/schemas/hsvaColor.ts","src/src/index.ts","src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,"import {createPlugin} from 'sanity'\nimport {hslaColor} from './schemas/hslaColor'\nimport {rgbaColor} from './schemas/rgbaColor'\nimport {color} from './schemas/color'\nimport {hsvaColor} from './schemas/hsvaColor'\n\nexport const colorInput = createPlugin({\n  name: '@sanity/color-input',\n  schema: {\n    types: [hslaColor, hsvaColor, rgbaColor, color],\n  },\n})\n\nexport {hslaColor, rgbaColor, color, hsvaColor}\nexport {ColorInput} from './ColorInput'\nexport type {ColorValue, ColorInputProps, ColorOptions, ColorSchemaType} from './ColorInput'\n"],"names":[],"version":3,"file":"index.d.ts.map","sourceRoot":"../../"}

package/package.json

@@ -1,13 +1,37 @@
 {
   "name": "@sanity/color-input",
-  "version": "2.30.2-shopify.2+c78e70728",
+  "version": "3.0.0-v3-studio.2",
   "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 && plugin-kit verify-package --silent",
+    "build": "parcel build --no-cache",
+    "watch": "parcel watch",
+    "link-watch": "plugin-kit link-watch",
+    "prepublishOnly": "npm run build",
+    "compile": "tsc --noEmit",
+    "lint": "eslint .",
+    "format": "prettier src -w",
+    "prepare": "husky install"
+  },
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "require": "./lib/cjs/index.js",
+      "default": "./lib/esm/index.js"
+    }
   },
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/types/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "v2-incompatible.js",
+    "sanity.json"
+  ],
+  "author": "Sanity.io <hello@sanity.io>",
+  "license": "MIT",
   "keywords": [
     "sanity",
     "cms",
@@ -18,35 +42,56 @@
     "sanity-plugin"
   ],
   "dependencies": {
-    "@sanity/icons": "^1.2.6",
+    "@sanity/icons": "^1.2.8",
+    "@sanity/incompatible-plugin": "^0.0.1-studio-v3.3",
     "@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.2-shopify.2+c78e70728",
-    "@sanity/types": "2.30.2-shopify.2+c78e70728",
-    "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",
+    "@sanity/plugin-kit": "^0.0.1-studio-v3.3",
+    "@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": "^3.0.0-dev-preview.7",
+    "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": "dev-preview",
     "styled-components": "^5.2.0"
   },
   "bugs": {
-    "url": "https://github.com/sanity-io/sanity/issues"
+    "url": "https://github.com/sanity-io/color-input/issues"
   },
   "homepage": "https://www.sanity.io/",
+  "sanityExchangeUrl": "https://www.sanity.io/plugins/color-input",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sanity-io/sanity.git",
-    "directory": "packages/@sanity/color-input"
+    "url": "git+https://github.com/sanity-io/color-input.git"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c78e7072844ba209ec77b3c01e5ee3b1494cb276"
+  "engines": {
+    "node": ">=14.0.0"
+  }
 }

package/sanity.json

@@ -1,32 +1,8 @@
 {
-  "paths": {
-    "source": "./src",
-    "compiled": "./lib"
-  },
   "parts": [
     {
-      "name": "part:@sanity/form-builder/input/color",
-      "description": "Color input"
-    },
-    {
-      "implements": "part:@sanity/form-builder/input/color",
-      "path": "ColorInput"
-    },
-    {
-      "implements": "part:@sanity/base/schema-type",
-      "path": "schemas/hslaColor"
-    },
-    {
-      "implements": "part:@sanity/base/schema-type",
-      "path": "schemas/hsvaColor"
-    },
-    {
-      "implements": "part:@sanity/base/schema-type",
-      "path": "schemas/rgbaColor"
-    },
-    {
-      "implements": "part:@sanity/base/schema-type",
-      "path": "schemas/color"
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
     }
   ]
 }

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'
+
+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'