@sanity/color-input 2.35.2 → 2.36.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016 - 2022 Sanity.io
+Copyright (c) 2022 - 2022 Sanity.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,11 +1,21 @@
 # @sanity/color-input
 
+> This is a **Sanity Studio v2** plugin.
+> For the v3 version, please refer to the [v3-branch](https://github.com/sanity-io/color-input).
+
 Color input for [Sanity](https://sanity.io/) that stores selected colors in hex, hsl, hsv and rgb format.
 
 ## Installation
 
+```sh
+yarn add @sanity/color-input@studio-v2
 ```
-sanity install @sanity/color-input
+
+Next, add `"@sanity/color-input"` to `sanity.json` plugins array:
+```json
+"plugins": [
+ "@sanity/color-input"
+]
 ```
 
 ## Usage

package/lib/ColorInput.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _formBuilder = require("part:@sanity/form-builder");
+var _lodash = require("lodash");
 var _ui = require("@sanity/ui");
 var _icons = require("@sanity/icons");
 var _components = require("@sanity/base/components");
 var _ColorPicker = _interopRequireDefault(require("./ColorPicker"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var set = _formBuilder.patches.set,
   unset = _formBuilder.patches.unset,
@@ -60,7 +60,7 @@ class ColorInput extends _react.PureComponent {
         _type: type.name
       }), set(type.name, ['_type']), set(nextColor.rgb.a, ['alpha']), ...fieldPatches]));
     });
-    _defineProperty(this, "handleColorChange", (0, _debounce2.default)(this.emitSetColor, 100));
+    _defineProperty(this, "handleColorChange", (0, _lodash.debounce)(this.emitSetColor, 100));
     _defineProperty(this, "handleCreateColor", () => {
       this.emitSetColor(DEFAULT_COLOR);
     });
@@ -117,4 +117,5 @@ _defineProperty(ColorInput, "propTypes", {
     hex: _propTypes.default.string,
     alpha: _propTypes.default.number
   })
-});
+});
+//# sourceMappingURL=ColorInput.js.map

package/lib/ColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.js","names":["set","patches","unset","setIfMissing","DEFAULT_COLOR","hex","hsl","h","s","l","a","hsv","v","rgb","r","g","b","source","ColorInput","PureComponent","React","createRef","nextColor","props","onChange","type","fieldPatches","fields","filter","field","name","map","nextFieldValue","isObject","jsonType","Object","assign","_type","PatchEvent","from","debounce","emitSetColor","focus","focusRef","current","render","readOnly","value","level","title","description","handleColorChange","options","disableAlpha","handleUnset","AddIcon","Boolean","handleCreateColor","PropTypes","shape","string","arrayOf","isRequired","func","bool","alpha","number"],"sources":["../src/ColorInput.js"],"sourcesContent":["///<reference types=\"@sanity/types/parts\" />\n\n/* eslint-disable id-length */\nimport React, {PureComponent} from 'react'\nimport PropTypes from 'prop-types'\nimport {PatchEvent, patches} from 'part:@sanity/form-builder'\nimport {debounce} from 'lodash'\nimport {Button} from '@sanity/ui'\nimport {AddIcon} from '@sanity/icons'\nimport {FormField} from '@sanity/base/components'\nimport ColorPicker from './ColorPicker'\n\nconst {set, unset, setIfMissing} = patches\n\nconst DEFAULT_COLOR = {\n  hex: '#24a3e3',\n  hsl: {h: 200, s: 0.7732, l: 0.5156, a: 1},\n  hsv: {h: 200, s: 0.8414, v: 0.8901, a: 1},\n  rgb: {r: 46, g: 163, b: 227, a: 1},\n  source: 'hex',\n}\n\nexport default class ColorInput extends PureComponent {\n  focusRef = React.createRef()\n  static propTypes = {\n    type: PropTypes.shape({\n      name: PropTypes.string,\n      title: PropTypes.string,\n      description: PropTypes.string,\n      fields: PropTypes.arrayOf(\n        PropTypes.shape({\n          name: PropTypes.string.isRequired,\n        })\n      ),\n    }).isRequired,\n    onChange: PropTypes.func.isRequired,\n    readOnly: PropTypes.bool,\n    value: PropTypes.shape({\n      hex: PropTypes.string,\n      alpha: PropTypes.number,\n    }),\n  }\n\n  focus() {\n    // todo: make the ColorPicker component support .focus()\n    if (this.focusRef.current && this.focusRef.current.focus) {\n      this.focusRef.current.focus()\n    }\n  }\n\n  emitSetColor = (nextColor) => {\n    const {onChange, type} = this.props\n\n    const fieldPatches = type.fields\n      .filter((field) => field.name in nextColor)\n      .map((field) => {\n        const nextFieldValue = nextColor[field.name]\n        const isObject = field.type.jsonType === 'object'\n        return set(\n          isObject ? Object.assign({_type: field.type.name}, nextFieldValue) : nextFieldValue,\n          [field.name]\n        )\n      })\n\n    onChange(\n      PatchEvent.from([\n        setIfMissing({_type: type.name}),\n        set(type.name, ['_type']),\n        set(nextColor.rgb.a, ['alpha']),\n        ...fieldPatches,\n      ])\n    )\n  }\n\n  // The color picker emits onChange events continuously while the user is sliding the\n  // hue/saturation/alpha selectors. This debounces the event to avoid excessive patches\n  handleColorChange = debounce(this.emitSetColor, 100)\n\n  handleCreateColor = () => {\n    this.emitSetColor(DEFAULT_COLOR)\n  }\n\n  handleUnset = () => {\n    this.props.onChange(PatchEvent.from(unset()))\n  }\n\n  render() {\n    const {type, readOnly, value, level} = this.props\n    return (\n      <FormField title={type.title} description={type.description} level={level}>\n        {value ? (\n          <ColorPicker\n            ref={this.focusRef}\n            color={value.hsl || value.hex}\n            readOnly={readOnly || type.readOnly}\n            onChange={this.handleColorChange}\n            disableAlpha={type.options && type.options.disableAlpha}\n            onUnset={this.handleUnset}\n          />\n        ) : (\n          <Button\n            icon={AddIcon}\n            mode=\"ghost\"\n            text=\"Create color\"\n            ref={this.focusRef}\n            disabled={Boolean(readOnly)}\n            onClick={this.handleCreateColor}\n          />\n        )}\n      </FormField>\n    )\n  }\n}\n"],"mappings":"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"}

package/lib/ColorPicker.js

@@ -141,4 +141,5 @@ ColorPicker.defaultProps = {
   disableAlpha: false
 };
 var _default = (0, _common.ColorWrap)(ColorPicker);
-exports.default = _default;
+exports.default = _default;
+//# sourceMappingURL=ColorPicker.js.map

package/lib/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","names":["ColorBox","styled","Box","ReadOnlyContainer","Flex","ColorPicker","width","rgb","hex","hsv","hsl","onChange","onUnset","disableAlpha","renderers","readOnly","position","height","minWidth","backgroundColor","r","g","b","a","Math","round","h","s","l","TrashIcon","propTypes","PropTypes","string","object","func","bool","defaultProps","ColorWrap"],"sources":["../src/ColorPicker.js"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport {ColorWrap, Checkboard, Saturation, Hue, Alpha} from 'react-color/lib/components/common'\nimport {Box, Card, Flex, Button, Inline, Stack, Text} from '@sanity/ui'\nimport {TrashIcon} from '@sanity/icons'\nimport styled from 'styled-components'\nimport {ColorPickerFields} from './ColorPickerFields'\n\nconst ColorBox = styled(Box)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`\n\nconst ReadOnlyContainer = styled(Flex)`\n  margin-top: 6rem;\n  background-color: var(--card-bg-color);\n  position: relative;\n  width: 100%;\n`\n\nconst ColorPicker = ({\n  width,\n  rgb,\n  hex,\n  hsv,\n  hsl,\n  onChange,\n  onUnset,\n  disableAlpha,\n  renderers,\n  readOnly,\n}) => {\n  return (\n    <div style={{width}}>\n      <Card padding={1} border radius={1}>\n        <Stack space={2}>\n          {!readOnly && (\n            <>\n              <Card overflow=\"hidden\" style={{position: 'relative', height: '5em'}}>\n                <Saturation is=\"Saturation\" onChange={onChange} hsl={hsl} hsv={hsv} />\n              </Card>\n\n              <Card\n                shadow={1}\n                radius={3}\n                overflow=\"hidden\"\n                style={{position: 'relative', height: '10px'}}\n              >\n                <Hue is=\"Hue\" hsl={hsl} onChange={!readOnly && onChange} />\n              </Card>\n\n              {!disableAlpha && (\n                <Card\n                  shadow={1}\n                  radius={3}\n                  overflow=\"hidden\"\n                  style={{position: 'relative', height: '10px'}}\n                >\n                  <Alpha is=\"Alpha\" rgb={rgb} hsl={hsl} renderers={renderers} onChange={onChange} />\n                </Card>\n              )}\n            </>\n          )}\n          <Flex>\n            <Card\n              flex={1}\n              radius={2}\n              overflow=\"hidden\"\n              style={{position: 'relative', minWidth: '4em'}}\n            >\n              <Checkboard />\n              <ColorBox style={{backgroundColor: `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`}} />\n\n              {readOnly && (\n                <ReadOnlyContainer\n                  padding={2}\n                  paddingBottom={1}\n                  sizing=\"border\"\n                  justify=\"space-between\"\n                >\n                  <Stack space={3} marginTop={1}>\n                    <Text size={3} weight=\"bold\">\n                      {hex}\n                    </Text>\n\n                    <Inline space={3}>\n                      <Text size={1}>\n                        <strong>RGB: </strong>\n                        {rgb.r} {rgb.g} {rgb.b}\n                      </Text>\n                      <Text size={1}>\n                        <strong>HSL: </strong> {Math.round(hsl.h)} {Math.round(hsl.s)}%{' '}\n                        {Math.round(hsl.l)}\n                      </Text>\n                    </Inline>\n                  </Stack>\n                </ReadOnlyContainer>\n              )}\n            </Card>\n\n            {!readOnly && (\n              <Flex align=\"flex-start\" marginLeft={2}>\n                <Box style={{width: 200}}>\n                  <ColorPickerFields\n                    rgb={rgb}\n                    hsl={hsl}\n                    hex={hex}\n                    onChange={onChange}\n                    disableAlpha={disableAlpha}\n                  />\n                </Box>\n                <Box marginLeft={2}>\n                  <Button onClick={onUnset} title=\"Delete color\" icon={TrashIcon} tone=\"critical\" />\n                </Box>\n              </Flex>\n            )}\n          </Flex>\n        </Stack>\n      </Card>\n    </div>\n  )\n}\n\nColorPicker.propTypes = {\n  width: PropTypes.string,\n  hex: PropTypes.string,\n  hsl: PropTypes.object,\n  hsv: PropTypes.object,\n  rgb: PropTypes.object,\n  onChange: PropTypes.func,\n  disableAlpha: PropTypes.bool,\n  readOnly: PropTypes.bool,\n  renderers: PropTypes.func,\n  onUnset: PropTypes.func,\n}\n\nColorPicker.defaultProps = {\n  disableAlpha: false,\n}\n\nexport default ColorWrap(ColorPicker)\n"],"mappings":"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"}

package/lib/ColorPickerFields.js

@@ -121,4 +121,5 @@ var ColorPickerFields = _ref => {
 };
 exports.ColorPickerFields = ColorPickerFields;
 var _default = ColorPickerFields;
-exports.default = _default;
+exports.default = _default;
+//# sourceMappingURL=ColorPickerFields.js.map

package/lib/ColorPickerFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerFields.js","names":["ColorPickerFields","onChange","rgb","hsl","hex","disableAlpha","useTheme","sanity","inputStyles","input","width","padding","border","boxShadow","color","default","enabled","fg","backgroundColor","bg","fontSize","fonts","text","sizes","textAlign","label","display","base","paddingTop","paddingBottom","textTransform","handleChange","data","e","isValidHex","source","r","g","b","a","h","s","l","replace","Math","round"],"sources":["../src/ColorPickerFields.js"],"sourcesContent":["import React from 'react'\nimport * as color from 'react-color/lib/helpers/color'\nimport {EditableInput} from 'react-color/lib/components/common'\nimport {Box, Flex, useTheme} from '@sanity/ui'\n\nexport const ColorPickerFields = ({onChange, rgb, hsl, hex, disableAlpha}) => {\n  const {sanity} = useTheme()\n\n  const inputStyles = {\n    input: {\n      width: '80%',\n      padding: '4px 10% 3px',\n      border: 'none',\n      boxShadow: `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`,\n      color: sanity.color.input.default.enabled.fg,\n      backgroundColor: sanity.color.input.default.enabled.bg,\n      fontSize: sanity.fonts.text.sizes[0].fontSize,\n      textAlign: 'center',\n    },\n    label: {\n      display: 'block',\n      textAlign: 'center',\n      fontSize: sanity.fonts.label.sizes[0].fontSize,\n      color: sanity.color.base.fg,\n      paddingTop: '3px',\n      paddingBottom: '4px',\n      textTransform: 'capitalize',\n    },\n  }\n\n  const handleChange = (data, e) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: 'hex',\n        },\n        e\n      )\n    } else if (data.r || data.g || data.b) {\n      onChange(\n        {\n          r: data.r || rgb.r,\n          g: data.g || rgb.g,\n          b: data.b || rgb.b,\n          a: rgb.a,\n          source: 'rgb',\n        },\n        e\n      )\n    } else if (data.a) {\n      if (data.a < 0) {\n        data.a = 0\n      } else if (data.a > 100) {\n        data.a = 100\n      }\n\n      data.a /= 100\n      onChange(\n        {\n          h: hsl.h,\n          s: hsl.s,\n          l: hsl.l,\n          a: data.a,\n          source: 'rgb',\n        },\n        e\n      )\n    }\n  }\n\n  return (\n    <Flex>\n      <Box flex={2} marginRight={1}>\n        <EditableInput\n          style={inputStyles}\n          label=\"hex\"\n          value={hex.replace('#', '')}\n          onChange={handleChange}\n        />\n      </Box>\n      <Box flex={1} marginRight={1}>\n        <EditableInput\n          style={inputStyles}\n          label=\"r\"\n          value={rgb.r}\n          onChange={handleChange}\n          dragLabel=\"true\"\n          dragMax=\"255\"\n        />\n      </Box>\n      <Box flex={1} marginRight={1}>\n        <EditableInput\n          style={inputStyles}\n          label=\"g\"\n          value={rgb.g}\n          onChange={handleChange}\n          dragLabel=\"true\"\n          dragMax=\"255\"\n        />\n      </Box>\n      <Box flex={1} marginRight={1}>\n        <EditableInput\n          style={inputStyles}\n          label=\"b\"\n          value={rgb.b}\n          onChange={handleChange}\n          dragLabel=\"true\"\n          dragMax=\"255\"\n        />\n      </Box>\n      {!disableAlpha && (\n        <Box flex={1}>\n          <EditableInput\n            style={inputStyles}\n            label=\"a\"\n            value={Math.round(rgb.a * 100)}\n            onChange={handleChange}\n            dragLabel=\"true\"\n            dragMax=\"100\"\n          />\n        </Box>\n      )}\n    </Flex>\n  )\n}\n\nexport default ColorPickerFields\n"],"mappings":"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"}

package/lib/schemas/color.js

@@ -70,4 +70,5 @@ var _default = {
     }
   }
 };
-exports.default = _default;
+exports.default = _default;
+//# sourceMappingURL=color.js.map

package/lib/schemas/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":["round","val","Math","name","type","title","inputComponent","ColorInput","fields","preview","select","alpha","hex","hsl","prepare","subtitle","l","media","backgroundColor","opacity","position","height","width","top","left"],"sources":["../../src/schemas/color.js"],"sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react'\nimport ColorInput from '../ColorInput'\n\nconst round = (val) => Math.round(val * 100)\n\nexport default {\n  name: 'color',\n  type: 'object',\n  title: 'Color',\n  inputComponent: ColorInput,\n  fields: [\n    {\n      title: 'Hex',\n      name: 'hex',\n      type: 'string',\n    },\n    {\n      title: 'Alpha',\n      name: 'alpha',\n      type: 'number',\n    },\n    {\n      title: 'Hue Saturation Lightness',\n      name: 'hsl',\n      type: 'hslaColor',\n    },\n    {\n      title: 'Hue Saturation Value',\n      name: 'hsv',\n      type: 'hsvaColor',\n    },\n    {\n      title: 'Red Green Blue (rgb)',\n      name: 'rgb',\n      type: 'rgbaColor',\n    },\n  ],\n  preview: {\n    select: {\n      title: 'hex',\n      alpha: 'alpha',\n      hex: 'hex',\n      hsl: 'hsl',\n    },\n    prepare({title, hex, hsl, alpha}) {\n      let subtitle = hex || 'No color set'\n      if (hsl) {\n        subtitle = `H:${round(hsl.l)} S:${round(hsl.l)} L:${round(hsl.l)} A:${round(alpha)}`\n      }\n      return {\n        title: title,\n        subtitle: subtitle,\n        media: () => (\n          <div\n            style={{\n              backgroundColor: hex || '#000',\n              opacity: alpha || 1,\n              position: 'absolute',\n              height: '100%',\n              width: '100%',\n              top: '0',\n              left: '0',\n            }}\n          />\n        ),\n      }\n    },\n  },\n}\n"],"mappings":";;;;;;AACA;AACA;AAAsC;AAFtC;;AAIA,IAAMA,KAAK,GAAIC,GAAG,IAAKC,IAAI,CAACF,KAAK,CAACC,GAAG,GAAG,GAAG,CAAC;AAAA,eAE7B;EACbE,IAAI,EAAE,OAAO;EACbC,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE,OAAO;EACdC,cAAc,EAAEC,mBAAU;EAC1BC,MAAM,EAAE,CACN;IACEH,KAAK,EAAE,KAAK;IACZF,IAAI,EAAE,KAAK;IACXC,IAAI,EAAE;EACR,CAAC,EACD;IACEC,KAAK,EAAE,OAAO;IACdF,IAAI,EAAE,OAAO;IACbC,IAAI,EAAE;EACR,CAAC,EACD;IACEC,KAAK,EAAE,0BAA0B;IACjCF,IAAI,EAAE,KAAK;IACXC,IAAI,EAAE;EACR,CAAC,EACD;IACEC,KAAK,EAAE,sBAAsB;IAC7BF,IAAI,EAAE,KAAK;IACXC,IAAI,EAAE;EACR,CAAC,EACD;IACEC,KAAK,EAAE,sBAAsB;IAC7BF,IAAI,EAAE,KAAK;IACXC,IAAI,EAAE;EACR,CAAC,CACF;EACDK,OAAO,EAAE;IACPC,MAAM,EAAE;MACNL,KAAK,EAAE,KAAK;MACZM,KAAK,EAAE,OAAO;MACdC,GAAG,EAAE,KAAK;MACVC,GAAG,EAAE;IACP,CAAC;IACDC,OAAO,OAA2B;MAAA,IAAzBT,KAAK,QAALA,KAAK;QAAEO,GAAG,QAAHA,GAAG;QAAEC,GAAG,QAAHA,GAAG;QAAEF,KAAK,QAALA,KAAK;MAC7B,IAAII,QAAQ,GAAGH,GAAG,IAAI,cAAc;MACpC,IAAIC,GAAG,EAAE;QACPE,QAAQ,eAAQf,KAAK,CAACa,GAAG,CAACG,CAAC,CAAC,gBAAMhB,KAAK,CAACa,GAAG,CAACG,CAAC,CAAC,gBAAMhB,KAAK,CAACa,GAAG,CAACG,CAAC,CAAC,gBAAMhB,KAAK,CAACW,KAAK,CAAC,CAAE;MACtF;MACA,OAAO;QACLN,KAAK,EAAEA,KAAK;QACZU,QAAQ,EAAEA,QAAQ;QAClBE,KAAK,EAAE,mBACL;UACE,KAAK,EAAE;YACLC,eAAe,EAAEN,GAAG,IAAI,MAAM;YAC9BO,OAAO,EAAER,KAAK,IAAI,CAAC;YACnBS,QAAQ,EAAE,UAAU;YACpBC,MAAM,EAAE,MAAM;YACdC,KAAK,EAAE,MAAM;YACbC,GAAG,EAAE,GAAG;YACRC,IAAI,EAAE;UACR;QAAE;MAGR,CAAC;IACH;EACF;AACF,CAAC;AAAA"}

package/lib/schemas/hslaColor.js

@@ -26,4 +26,5 @@ var _default = {
     title: 'Alpha'
   }]
 };
-exports.default = _default;
+exports.default = _default;
+//# sourceMappingURL=hslaColor.js.map

package/lib/schemas/hslaColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hslaColor.js","names":["title","name","type","fields"],"sources":["../../src/schemas/hslaColor.js"],"sourcesContent":["export default {\n  title: 'Hue Saturation Lightness',\n  name: 'hslaColor',\n  type: 'object',\n  fields: [\n    {name: 'h', type: 'number', title: 'Hue'},\n    {name: 's', type: 'number', title: 'Saturation'},\n    {name: 'l', type: 'number', title: 'Lightness'},\n    {name: 'a', type: 'number', title: 'Alpha'},\n  ],\n}\n"],"mappings":";;;;;;eAAe;EACbA,KAAK,EAAE,0BAA0B;EACjCC,IAAI,EAAE,WAAW;EACjBC,IAAI,EAAE,QAAQ;EACdC,MAAM,EAAE,CACN;IAACF,IAAI,EAAE,GAAG;IAAEC,IAAI,EAAE,QAAQ;IAAEF,KAAK,EAAE;EAAK,CAAC,EACzC;IAACC,IAAI,EAAE,GAAG;IAAEC,IAAI,EAAE,QAAQ;IAAEF,KAAK,EAAE;EAAY,CAAC,EAChD;IAACC,IAAI,EAAE,GAAG;IAAEC,IAAI,EAAE,QAAQ;IAAEF,KAAK,EAAE;EAAW,CAAC,EAC/C;IAACC,IAAI,EAAE,GAAG;IAAEC,IAAI,EAAE,QAAQ;IAAEF,KAAK,EAAE;EAAO,CAAC;AAE/C,CAAC;AAAA"}

package/lib/schemas/hsvaColor.js

@@ -26,4 +26,5 @@ var _default = {
     title: 'Alpha'
   }]
 };
-exports.default = _default;
+exports.default = _default;
+//# sourceMappingURL=hsvaColor.js.map

package/lib/schemas/hsvaColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hsvaColor.js","names":["title","name","type","fields"],"sources":["../../src/schemas/hsvaColor.js"],"sourcesContent":["export default {\n  title: 'Hue Saturation Value',\n  name: 'hsvaColor',\n  type: 'object',\n  fields: [\n    {name: 'h', type: 'number', title: 'Hue'},\n    {name: 's', type: 'number', title: 'Saturation'},\n    {name: 'v', type: 'number', title: 'Value'},\n    {name: 'a', type: 'number', title: 'Alpha'},\n  ],\n}\n"],"mappings":";;;;;;eAAe;EACbA,KAAK,EAAE,sBAAsB;EAC7BC,IAAI,EAAE,WAAW;EACjBC,IAAI,EAAE,QAAQ;EACdC,MAAM,EAAE,CACN;IAACF,IAAI,EAAE,GAAG;IAAEC,IAAI,EAAE,QAAQ;IAAEF,KAAK,EAAE;EAAK,CAAC,EACzC;IAACC,IAAI,EAAE,GAAG;IAAEC,IAAI,EAAE,QAAQ;IAAEF,KAAK,EAAE;EAAY,CAAC,EAChD;IAACC,IAAI,EAAE,GAAG;IAAEC,IAAI,EAAE,QAAQ;IAAEF,KAAK,EAAE;EAAO,CAAC,EAC3C;IAACC,IAAI,EAAE,GAAG;IAAEC,IAAI,EAAE,QAAQ;IAAEF,KAAK,EAAE;EAAO,CAAC;AAE/C,CAAC;AAAA"}

package/lib/schemas/rgbaColor.js

@@ -26,4 +26,5 @@ var _default = {
     title: 'Alpha'
   }]
 };
-exports.default = _default;
+exports.default = _default;
+//# sourceMappingURL=rgbaColor.js.map

package/lib/schemas/rgbaColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rgbaColor.js","names":["title","name","type","fields"],"sources":["../../src/schemas/rgbaColor.js"],"sourcesContent":["export default {\n  title: 'Red Green Blue (rgb)',\n  name: 'rgbaColor',\n  type: 'object',\n  fields: [\n    {name: 'r', type: 'number', title: 'Red'},\n    {name: 'g', type: 'number', title: 'Green'},\n    {name: 'b', type: 'number', title: 'Blue'},\n    {name: 'a', type: 'number', title: 'Alpha'},\n  ],\n}\n"],"mappings":";;;;;;eAAe;EACbA,KAAK,EAAE,sBAAsB;EAC7BC,IAAI,EAAE,WAAW;EACjBC,IAAI,EAAE,QAAQ;EACdC,MAAM,EAAE,CACN;IAACF,IAAI,EAAE,GAAG;IAAEC,IAAI,EAAE,QAAQ;IAAEF,KAAK,EAAE;EAAK,CAAC,EACzC;IAACC,IAAI,EAAE,GAAG;IAAEC,IAAI,EAAE,QAAQ;IAAEF,KAAK,EAAE;EAAO,CAAC,EAC3C;IAACC,IAAI,EAAE,GAAG;IAAEC,IAAI,EAAE,QAAQ;IAAEF,KAAK,EAAE;EAAM,CAAC,EAC1C;IAACC,IAAI,EAAE,GAAG;IAAEC,IAAI,EAAE,QAAQ;IAAEF,KAAK,EAAE;EAAO,CAAC;AAE/C,CAAC;AAAA"}

package/package.json

@@ -1,13 +1,7 @@
 {
   "name": "@sanity/color-input",
-  "version": "2.35.2",
-  "description": "Color input",
-  "main": "lib/index.js",
-  "author": "Sanity.io <hello@sanity.io>",
-  "license": "MIT",
-  "scripts": {
-    "clean": "rimraf lib dest"
-  },
+  "version": "2.36.0",
+  "description": "Color input for Sanity Studio",
   "keywords": [
     "sanity",
     "cms",
@@ -17,6 +11,31 @@
     "color-input",
     "sanity-plugin"
   ],
+  "homepage": "https://www.sanity.io/",
+  "bugs": {
+    "url": "https://github.com/sanity-io/color-input/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:sanity-io/color-input.git"
+  },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
+  "main": "lib/schemas/color.js",
+  "files": [
+    "lib",
+    "src",
+    "sanity.json"
+  ],
+  "scripts": {
+    "prebuild": "npm run clean",
+    "build": "sanipack build",
+    "clean": "rimraf lib",
+    "lint": "eslint .",
+    "prepare": "husky install",
+    "prepublishOnly": "sanipack build",
+    "watch": "sanipack build --watch"
+  },
   "dependencies": {
     "@sanity/icons": "^1.3.4",
     "@sanity/ui": "^0.37.22",
@@ -24,10 +43,24 @@
     "react-color": "^2.13.8"
   },
   "devDependencies": {
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
     "@sanity/base": "2.35.2",
+    "@sanity/semantic-release-preset": "^2.0.1",
     "@sanity/types": "2.35.0",
+    "eslint": "^8.27.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "prettier-plugin-packagejson": "^2.3.0",
     "react": "17.0.1",
-    "rimraf": "^2.7.1"
+    "rimraf": "^2.7.1",
+    "sanipack": "^2.1.0"
   },
   "peerDependencies": {
     "@sanity/base": "^2.14",
@@ -36,17 +69,7 @@
     "react": "^16.9 || ^17",
     "styled-components": "^5.2.0"
   },
-  "bugs": {
-    "url": "https://github.com/sanity-io/sanity/issues"
-  },
-  "homepage": "https://www.sanity.io/",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sanity-io/sanity.git",
-    "directory": "packages/@sanity/color-input"
-  },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "9bf408d4cc8b3e14bac0bf94d3305d6960181d3c"
+  }
 }

package/sanity.json

@@ -5,11 +5,11 @@
   },
   "parts": [
     {
-      "name": "part:@sanity/form-builder/input/color",
+      "name": "part:@sanity/color-input/input/color",
       "description": "Color input"
     },
     {
-      "implements": "part:@sanity/form-builder/input/color",
+      "implements": "part:@sanity/color-input/input/color",
       "path": "ColorInput"
     },
     {

package/src/ColorInput.js

@@ -0,0 +1,113 @@
+///<reference types="@sanity/types/parts" />
+
+/* eslint-disable id-length */
+import React, {PureComponent} from 'react'
+import PropTypes from 'prop-types'
+import {PatchEvent, patches} from 'part:@sanity/form-builder'
+import {debounce} from 'lodash'
+import {Button} from '@sanity/ui'
+import {AddIcon} from '@sanity/icons'
+import {FormField} from '@sanity/base/components'
+import ColorPicker from './ColorPicker'
+
+const {set, unset, setIfMissing} = patches
+
+const DEFAULT_COLOR = {
+  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 default class ColorInput extends PureComponent {
+  focusRef = React.createRef()
+  static propTypes = {
+    type: PropTypes.shape({
+      name: PropTypes.string,
+      title: PropTypes.string,
+      description: PropTypes.string,
+      fields: PropTypes.arrayOf(
+        PropTypes.shape({
+          name: PropTypes.string.isRequired,
+        })
+      ),
+    }).isRequired,
+    onChange: PropTypes.func.isRequired,
+    readOnly: PropTypes.bool,
+    value: PropTypes.shape({
+      hex: PropTypes.string,
+      alpha: PropTypes.number,
+    }),
+  }
+
+  focus() {
+    // todo: make the ColorPicker component support .focus()
+    if (this.focusRef.current && this.focusRef.current.focus) {
+      this.focusRef.current.focus()
+    }
+  }
+
+  emitSetColor = (nextColor) => {
+    const {onChange, type} = this.props
+
+    const fieldPatches = type.fields
+      .filter((field) => field.name in nextColor)
+      .map((field) => {
+        const nextFieldValue = nextColor[field.name]
+        const isObject = field.type.jsonType === 'object'
+        return set(
+          isObject ? Object.assign({_type: field.type.name}, nextFieldValue) : nextFieldValue,
+          [field.name]
+        )
+      })
+
+    onChange(
+      PatchEvent.from([
+        setIfMissing({_type: type.name}),
+        set(type.name, ['_type']),
+        set(nextColor.rgb.a, ['alpha']),
+        ...fieldPatches,
+      ])
+    )
+  }
+
+  // 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
+  handleColorChange = debounce(this.emitSetColor, 100)
+
+  handleCreateColor = () => {
+    this.emitSetColor(DEFAULT_COLOR)
+  }
+
+  handleUnset = () => {
+    this.props.onChange(PatchEvent.from(unset()))
+  }
+
+  render() {
+    const {type, readOnly, value, level} = this.props
+    return (
+      <FormField title={type.title} description={type.description} level={level}>
+        {value ? (
+          <ColorPicker
+            ref={this.focusRef}
+            color={value.hsl || value.hex}
+            readOnly={readOnly || type.readOnly}
+            onChange={this.handleColorChange}
+            disableAlpha={type.options && type.options.disableAlpha}
+            onUnset={this.handleUnset}
+          />
+        ) : (
+          <Button
+            icon={AddIcon}
+            mode="ghost"
+            text="Create color"
+            ref={this.focusRef}
+            disabled={Boolean(readOnly)}
+            onClick={this.handleCreateColor}
+          />
+        )}
+      </FormField>
+    )
+  }
+}

package/src/ColorPicker.js

@@ -0,0 +1,144 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {ColorWrap, Checkboard, Saturation, Hue, Alpha} from 'react-color/lib/components/common'
+import {Box, Card, Flex, Button, Inline, Stack, Text} from '@sanity/ui'
+import {TrashIcon} from '@sanity/icons'
+import styled from 'styled-components'
+import {ColorPickerFields} from './ColorPickerFields'
+
+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%;
+`
+
+const ColorPicker = ({
+  width,
+  rgb,
+  hex,
+  hsv,
+  hsl,
+  onChange,
+  onUnset,
+  disableAlpha,
+  renderers,
+  readOnly,
+}) => {
+  return (
+    <div style={{width}}>
+      <Card padding={1} border radius={1}>
+        <Stack space={2}>
+          {!readOnly && (
+            <>
+              <Card overflow="hidden" style={{position: 'relative', height: '5em'}}>
+                <Saturation is="Saturation" onChange={onChange} hsl={hsl} hsv={hsv} />
+              </Card>
+
+              <Card
+                shadow={1}
+                radius={3}
+                overflow="hidden"
+                style={{position: 'relative', height: '10px'}}
+              >
+                <Hue is="Hue" hsl={hsl} onChange={!readOnly && onChange} />
+              </Card>
+
+              {!disableAlpha && (
+                <Card
+                  shadow={1}
+                  radius={3}
+                  overflow="hidden"
+                  style={{position: 'relative', height: '10px'}}
+                >
+                  <Alpha is="Alpha" rgb={rgb} hsl={hsl} renderers={renderers} 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)} {Math.round(hsl.s)}%{' '}
+                        {Math.round(hsl.l)}
+                      </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>
+  )
+}
+
+ColorPicker.propTypes = {
+  width: PropTypes.string,
+  hex: PropTypes.string,
+  hsl: PropTypes.object,
+  hsv: PropTypes.object,
+  rgb: PropTypes.object,
+  onChange: PropTypes.func,
+  disableAlpha: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  renderers: PropTypes.func,
+  onUnset: PropTypes.func,
+}
+
+ColorPicker.defaultProps = {
+  disableAlpha: false,
+}
+
+export default ColorWrap(ColorPicker)

package/src/ColorPickerFields.js

@@ -0,0 +1,128 @@
+import React from 'react'
+import * as color from 'react-color/lib/helpers/color'
+import {EditableInput} from 'react-color/lib/components/common'
+import {Box, Flex, useTheme} from '@sanity/ui'
+
+export const ColorPickerFields = ({onChange, rgb, hsl, hex, disableAlpha}) => {
+  const {sanity} = useTheme()
+
+  const inputStyles = {
+    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',
+    },
+  }
+
+  const handleChange = (data, e) => {
+    if (data.hex && color.isValidHex(data.hex)) {
+      onChange(
+        {
+          hex: data.hex,
+          source: 'hex',
+        },
+        e
+      )
+    } else if (data.r || data.g || data.b) {
+      onChange(
+        {
+          r: data.r || rgb.r,
+          g: data.g || rgb.g,
+          b: data.b || rgb.b,
+          a: rgb.a,
+          source: 'rgb',
+        },
+        e
+      )
+    } else if (data.a) {
+      if (data.a < 0) {
+        data.a = 0
+      } else if (data.a > 100) {
+        data.a = 100
+      }
+
+      data.a /= 100
+      onChange(
+        {
+          h: hsl.h,
+          s: hsl.s,
+          l: hsl.l,
+          a: data.a,
+          source: 'rgb',
+        },
+        e
+      )
+    }
+  }
+
+  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="true"
+          dragMax="255"
+        />
+      </Box>
+      <Box flex={1} marginRight={1}>
+        <EditableInput
+          style={inputStyles}
+          label="g"
+          value={rgb.g}
+          onChange={handleChange}
+          dragLabel="true"
+          dragMax="255"
+        />
+      </Box>
+      <Box flex={1} marginRight={1}>
+        <EditableInput
+          style={inputStyles}
+          label="b"
+          value={rgb.b}
+          onChange={handleChange}
+          dragLabel="true"
+          dragMax="255"
+        />
+      </Box>
+      {!disableAlpha && (
+        <Box flex={1}>
+          <EditableInput
+            style={inputStyles}
+            label="a"
+            value={Math.round(rgb.a * 100)}
+            onChange={handleChange}
+            dragLabel="true"
+            dragMax="100"
+          />
+        </Box>
+      )}
+    </Flex>
+  )
+}
+
+export default ColorPickerFields

package/src/schemas/color.js

@@ -0,0 +1,70 @@
+/* eslint-disable react/display-name */
+import React from 'react'
+import ColorInput from '../ColorInput'
+
+const round = (val) => Math.round(val * 100)
+
+export default {
+  name: 'color',
+  type: 'object',
+  title: 'Color',
+  inputComponent: 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}) {
+      let subtitle = hex || 'No color set'
+      if (hsl) {
+        subtitle = `H:${round(hsl.l)} S:${round(hsl.l)} 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.js

@@ -0,0 +1,11 @@
+export default {
+  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.js

@@ -0,0 +1,11 @@
+export default {
+  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.js

@@ -0,0 +1,11 @@
+export default {
+  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'},
+  ],
+}