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

package/lib/ColorInput.js

@@ -1,144 +0,0 @@
-"use strict";
-
-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 _ui = require("@sanity/ui");
-
-var _icons = require("@sanity/icons");
-
-var _components = require("@sanity/base/components");
-
-var _ColorPicker = _interopRequireDefault(require("./ColorPicker"));
-
-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,
-    setIfMissing = _formBuilder.patches.setIfMissing;
-var 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'
-};
-
-class ColorInput extends _react.PureComponent {
-  constructor() {
-    super(...arguments);
-
-    _defineProperty(this, "focusRef", /*#__PURE__*/_react.default.createRef());
-
-    _defineProperty(this, "emitSetColor", nextColor => {
-      var _this$props = this.props,
-          onChange = _this$props.onChange,
-          type = _this$props.type;
-      var fieldPatches = type.fields.filter(field => field.name in nextColor).map(field => {
-        var nextFieldValue = nextColor[field.name];
-        var isObject = field.type.jsonType === 'object';
-        return set(isObject ? Object.assign({
-          _type: field.type.name
-        }, nextFieldValue) : nextFieldValue, [field.name]);
-      });
-      onChange(_formBuilder.PatchEvent.from([setIfMissing({
-        _type: type.name
-      }), set(type.name, ['_type']), set(nextColor.rgb.a, ['alpha']), ...fieldPatches]));
-    });
-
-    _defineProperty(this, "handleColorChange", (0, _debounce2.default)(this.emitSetColor, 100));
-
-    _defineProperty(this, "handleCreateColor", () => {
-      this.emitSetColor(DEFAULT_COLOR);
-    });
-
-    _defineProperty(this, "handleUnset", () => {
-      this.props.onChange(_formBuilder.PatchEvent.from(unset()));
-    });
-  }
-
-  focus() {
-    // todo: make the ColorPicker component support .focus()
-    if (this.focusRef.current && this.focusRef.current.focus) {
-      this.focusRef.current.focus();
-    }
-  }
-
-  render() {
-    var _this$props2 = this.props,
-        type = _this$props2.type,
-        readOnly = _this$props2.readOnly,
-        value = _this$props2.value,
-        level = _this$props2.level;
-    return /*#__PURE__*/_react.default.createElement(_components.FormField, {
-      title: type.title,
-      description: type.description,
-      level: level
-    }, value ? /*#__PURE__*/_react.default.createElement(_ColorPicker.default, {
-      ref: this.focusRef,
-      color: value.hsl || value.hex,
-      readOnly: readOnly || type.readOnly,
-      onChange: this.handleColorChange,
-      disableAlpha: type.options && type.options.disableAlpha,
-      onUnset: this.handleUnset
-    }) : /*#__PURE__*/_react.default.createElement(_ui.Button, {
-      icon: _icons.AddIcon,
-      mode: "ghost",
-      text: "Create color",
-      ref: this.focusRef,
-      disabled: Boolean(readOnly),
-      onClick: this.handleCreateColor
-    }));
-  }
-
-}
-
-exports.default = ColorInput;
-
-_defineProperty(ColorInput, "propTypes", {
-  type: _propTypes.default.shape({
-    name: _propTypes.default.string,
-    title: _propTypes.default.string,
-    description: _propTypes.default.string,
-    fields: _propTypes.default.arrayOf(_propTypes.default.shape({
-      name: _propTypes.default.string.isRequired
-    }))
-  }).isRequired,
-  onChange: _propTypes.default.func.isRequired,
-  readOnly: _propTypes.default.bool,
-  value: _propTypes.default.shape({
-    hex: _propTypes.default.string,
-    alpha: _propTypes.default.number
-  })
-});

package/lib/ColorPicker.js

@@ -1,159 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _common = require("react-color/lib/components/common");
-
-var _ui = require("@sanity/ui");
-
-var _icons = require("@sanity/icons");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _ColorPickerFields = require("./ColorPickerFields");
-
-var _templateObject, _templateObject2;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var ColorBox = (0, _styledComponents.default)(_ui.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
-var ReadOnlyContainer = (0, _styledComponents.default)(_ui.Flex)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 6rem;\n  background-color: var(--card-bg-color);\n  position: relative;\n  width: 100%;\n"])));
-
-var ColorPicker = _ref => {
-  var width = _ref.width,
-      rgb = _ref.rgb,
-      hex = _ref.hex,
-      hsv = _ref.hsv,
-      hsl = _ref.hsl,
-      onChange = _ref.onChange,
-      onUnset = _ref.onUnset,
-      disableAlpha = _ref.disableAlpha,
-      renderers = _ref.renderers,
-      readOnly = _ref.readOnly;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      width
-    }
-  }, /*#__PURE__*/_react.default.createElement(_ui.Card, {
-    padding: 1,
-    border: true,
-    radius: 1
-  }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
-    space: 2
-  }, !readOnly && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.Card, {
-    overflow: "hidden",
-    style: {
-      position: 'relative',
-      height: '5em'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_common.Saturation, {
-    is: "Saturation",
-    onChange: onChange,
-    hsl: hsl,
-    hsv: hsv
-  })), /*#__PURE__*/_react.default.createElement(_ui.Card, {
-    shadow: 1,
-    radius: 3,
-    overflow: "hidden",
-    style: {
-      position: 'relative',
-      height: '10px'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_common.Hue, {
-    is: "Hue",
-    hsl: hsl,
-    onChange: !readOnly && onChange
-  })), !disableAlpha && /*#__PURE__*/_react.default.createElement(_ui.Card, {
-    shadow: 1,
-    radius: 3,
-    overflow: "hidden",
-    style: {
-      position: 'relative',
-      height: '10px'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_common.Alpha, {
-    is: "Alpha",
-    rgb: rgb,
-    hsl: hsl,
-    renderers: renderers,
-    onChange: onChange
-  }))), /*#__PURE__*/_react.default.createElement(_ui.Flex, null, /*#__PURE__*/_react.default.createElement(_ui.Card, {
-    flex: 1,
-    radius: 2,
-    overflow: "hidden",
-    style: {
-      position: 'relative',
-      minWidth: '4em'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_common.Checkboard, null), /*#__PURE__*/_react.default.createElement(ColorBox, {
-    style: {
-      backgroundColor: "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",").concat(rgb.a, ")")
-    }
-  }), readOnly && /*#__PURE__*/_react.default.createElement(ReadOnlyContainer, {
-    padding: 2,
-    paddingBottom: 1,
-    sizing: "border",
-    justify: "space-between"
-  }, /*#__PURE__*/_react.default.createElement(_ui.Stack, {
-    space: 3,
-    marginTop: 1
-  }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
-    size: 3,
-    weight: "bold"
-  }, hex), /*#__PURE__*/_react.default.createElement(_ui.Inline, {
-    space: 3
-  }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
-    size: 1
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "RGB: "), rgb.r, " ", rgb.g, " ", rgb.b), /*#__PURE__*/_react.default.createElement(_ui.Text, {
-    size: 1
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "HSL: "), " ", Math.round(hsl.h), " ", Math.round(hsl.s), "%", ' ', Math.round(hsl.l)))))), !readOnly && /*#__PURE__*/_react.default.createElement(_ui.Flex, {
-    align: "flex-start",
-    marginLeft: 2
-  }, /*#__PURE__*/_react.default.createElement(_ui.Box, {
-    style: {
-      width: 200
-    }
-  }, /*#__PURE__*/_react.default.createElement(_ColorPickerFields.ColorPickerFields, {
-    rgb: rgb,
-    hsl: hsl,
-    hex: hex,
-    onChange: onChange,
-    disableAlpha: disableAlpha
-  })), /*#__PURE__*/_react.default.createElement(_ui.Box, {
-    marginLeft: 2
-  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
-    onClick: onUnset,
-    title: "Delete color",
-    icon: _icons.TrashIcon,
-    tone: "critical"
-  })))))));
-};
-
-ColorPicker.propTypes = {
-  width: _propTypes.default.string,
-  hex: _propTypes.default.string,
-  hsl: _propTypes.default.object,
-  hsv: _propTypes.default.object,
-  rgb: _propTypes.default.object,
-  onChange: _propTypes.default.func,
-  disableAlpha: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  renderers: _propTypes.default.func,
-  onUnset: _propTypes.default.func
-};
-ColorPicker.defaultProps = {
-  disableAlpha: false
-};
-
-var _default = (0, _common.ColorWrap)(ColorPicker);
-
-exports.default = _default;

package/lib/ColorPickerFields.js

@@ -1,138 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ColorPickerFields = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var color = _interopRequireWildcard(require("react-color/lib/helpers/color"));
-
-var _common = require("react-color/lib/components/common");
-
-var _ui = require("@sanity/ui");
-
-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 }; }
-
-var ColorPickerFields = _ref => {
-  var onChange = _ref.onChange,
-      rgb = _ref.rgb,
-      hsl = _ref.hsl,
-      hex = _ref.hex,
-      disableAlpha = _ref.disableAlpha;
-
-  var _useTheme = (0, _ui.useTheme)(),
-      sanity = _useTheme.sanity;
-
-  var inputStyles = {
-    input: {
-      width: '80%',
-      padding: '4px 10% 3px',
-      border: 'none',
-      boxShadow: "inset 0 0 0 1px ".concat(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'
-    }
-  };
-
-  var 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 /*#__PURE__*/_react.default.createElement(_ui.Flex, null, /*#__PURE__*/_react.default.createElement(_ui.Box, {
-    flex: 2,
-    marginRight: 1
-  }, /*#__PURE__*/_react.default.createElement(_common.EditableInput, {
-    style: inputStyles,
-    label: "hex",
-    value: hex.replace('#', ''),
-    onChange: handleChange
-  })), /*#__PURE__*/_react.default.createElement(_ui.Box, {
-    flex: 1,
-    marginRight: 1
-  }, /*#__PURE__*/_react.default.createElement(_common.EditableInput, {
-    style: inputStyles,
-    label: "r",
-    value: rgb.r,
-    onChange: handleChange,
-    dragLabel: "true",
-    dragMax: "255"
-  })), /*#__PURE__*/_react.default.createElement(_ui.Box, {
-    flex: 1,
-    marginRight: 1
-  }, /*#__PURE__*/_react.default.createElement(_common.EditableInput, {
-    style: inputStyles,
-    label: "g",
-    value: rgb.g,
-    onChange: handleChange,
-    dragLabel: "true",
-    dragMax: "255"
-  })), /*#__PURE__*/_react.default.createElement(_ui.Box, {
-    flex: 1,
-    marginRight: 1
-  }, /*#__PURE__*/_react.default.createElement(_common.EditableInput, {
-    style: inputStyles,
-    label: "b",
-    value: rgb.b,
-    onChange: handleChange,
-    dragLabel: "true",
-    dragMax: "255"
-  })), !disableAlpha && /*#__PURE__*/_react.default.createElement(_ui.Box, {
-    flex: 1
-  }, /*#__PURE__*/_react.default.createElement(_common.EditableInput, {
-    style: inputStyles,
-    label: "a",
-    value: Math.round(rgb.a * 100),
-    onChange: handleChange,
-    dragLabel: "true",
-    dragMax: "100"
-  })));
-};
-
-exports.ColorPickerFields = ColorPickerFields;
-var _default = ColorPickerFields;
-exports.default = _default;

package/lib/schemas/color.js

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ColorInput = _interopRequireDefault(require("../ColorInput"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint-disable react/display-name */
-var round = val => Math.round(val * 100);
-
-var _default = {
-  name: 'color',
-  type: 'object',
-  title: 'Color',
-  inputComponent: _ColorInput.default,
-  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(_ref) {
-      var title = _ref.title,
-          hex = _ref.hex,
-          hsl = _ref.hsl,
-          alpha = _ref.alpha;
-      var subtitle = hex || 'No color set';
-
-      if (hsl) {
-        subtitle = "H:".concat(round(hsl.l), " S:").concat(round(hsl.l), " L:").concat(round(hsl.l), " A:").concat(round(alpha));
-      }
-
-      return {
-        title: title,
-        subtitle: subtitle,
-        media: () => /*#__PURE__*/_react.default.createElement("div", {
-          style: {
-            backgroundColor: hex || '#000',
-            opacity: alpha || 1,
-            position: 'absolute',
-            height: '100%',
-            width: '100%',
-            top: '0',
-            left: '0'
-          }
-        })
-      };
-    }
-
-  }
-};
-exports.default = _default;

package/lib/schemas/hslaColor.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _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'
-  }]
-};
-exports.default = _default;

package/lib/schemas/hsvaColor.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _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'
-  }]
-};
-exports.default = _default;

package/lib/schemas/rgbaColor.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _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'
-  }]
-};
-exports.default = _default;

package/sanity.json

@@ -1,32 +0,0 @@
-{
-  "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"
-    }
-  ]
-}