@snack-uikit/color-picker 0.1.2 → 0.1.3-preview-71543426.0

package/dist/cjs/components/ColorPicker.js

@@ -0,0 +1,200 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorPicker = ColorPicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const react_colorful_1 = require("react-colorful");
+const button_1 = require("@snack-uikit/button");
+const icons_1 = require("@snack-uikit/icons");
+const locale_1 = require("@snack-uikit/locale");
+const segmented_control_1 = require("@snack-uikit/segmented-control");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../constants");
+const helperComponents_1 = require("../helperComponents");
+const FieldAlphaColor_1 = require("../helperComponents/FieldAlphaColor/FieldAlphaColor");
+const convert_1 = require("../utils/convert");
+const validate_1 = require("../utils/validate");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function ColorPicker(_a) {
+  var {
+      value,
+      onChange,
+      withAlpha = true,
+      autoApply,
+      className,
+      colorMode: colorModeProp = constants_1.DEFAULT_COLOR_MODE_CONFIG
+    } = _a,
+    rest = __rest(_a, ["value", "onChange", "withAlpha", "autoApply", "className", "colorMode"]);
+  const colorModeOptions = (0, react_1.useMemo)(() => {
+    const colorModeConfig = Object.assign(Object.assign({}, constants_1.DEFAULT_COLOR_MODE_CONFIG), colorModeProp);
+    return Object.keys(colorModeConfig).reduce((res, colorMode) => {
+      if (Boolean(colorModeConfig[colorMode])) {
+        res.push({
+          value: colorMode,
+          label: constants_1.COLOR_MODE_LABEL[colorMode]
+        });
+      }
+      return res;
+    }, []);
+  }, [colorModeProp]);
+  const [rawValue, setRawValue] = (0, react_1.useState)((0, convert_1.colorToRawValue)(value || '#000'));
+  const [colorMode, setColorMode] = (0, react_1.useState)(colorModeOptions[0].value);
+  const [tempHex, setTempHex] = (0, react_1.useState)(rawValue.hex);
+  (0, react_1.useEffect)(() => {
+    if (value) {
+      const raw = (0, convert_1.colorToRawValue)(value);
+      setRawValue(raw);
+      setTempHex(raw.hex);
+    }
+  }, [value]);
+  const handleChange = color => {
+    const rawValue = (0, convert_1.colorToRawValue)(color);
+    setRawValue(rawValue);
+    autoApply && (onChange === null || onChange === void 0 ? void 0 : onChange(rawValue));
+  };
+  const applyChange = () => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(rawValue);
+  };
+  const reset = () => {
+    value && setRawValue((0, convert_1.colorToRawValue)(value));
+  };
+  const {
+    t
+  } = (0, locale_1.useLocale)('ColorPicker');
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.container, 'osThemeSnack', className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    children: [colorMode === constants_1.COLOR_MODE.Hex && (withAlpha ? (0, jsx_runtime_1.jsx)(react_colorful_1.HexAlphaColorPicker, {
+      onChange: handleChange,
+      color: rawValue.hex
+    }) : (0, jsx_runtime_1.jsx)(react_colorful_1.HexColorPicker, {
+      onChange: handleChange,
+      color: rawValue.hex
+    })), colorMode === constants_1.COLOR_MODE.Rbg && (withAlpha ? (0, jsx_runtime_1.jsx)(react_colorful_1.RgbaColorPicker, {
+      onChange: handleChange,
+      color: rawValue.rgba
+    }) : (0, jsx_runtime_1.jsx)(react_colorful_1.RgbColorPicker, {
+      onChange: handleChange,
+      color: rawValue.rgb
+    })), colorMode === constants_1.COLOR_MODE.Hsv && (withAlpha ? (0, jsx_runtime_1.jsx)(react_colorful_1.HsvaColorPicker, {
+      onChange: handleChange,
+      color: rawValue.hsva
+    }) : (0, jsx_runtime_1.jsx)(react_colorful_1.HsvColorPicker, {
+      onChange: handleChange,
+      color: rawValue.hsv
+    })), (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.colorModel,
+      children: [(0, jsx_runtime_1.jsx)(segmented_control_1.SegmentedControl, {
+        outline: true,
+        value: colorMode,
+        size: 's',
+        onChange: setColorMode,
+        items: colorModeOptions
+      }), (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.colorFields,
+        "data-mode": colorMode,
+        "data-with-alpha": withAlpha || undefined,
+        children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+          children: [colorMode === constants_1.COLOR_MODE.Hex && (0, jsx_runtime_1.jsx)(helperComponents_1.FieldPrivate, {
+            value: rawValue.hex.replace('#', '').substring(0, 6),
+            error: !(0, validate_1.validHex)(tempHex, withAlpha),
+            inputType: 'text',
+            onChange: function () {
+              let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+              setTempHex(value);
+              if ((0, validate_1.validHex)(value)) {
+                handleChange(Object.assign(Object.assign({}, (0, convert_1.hexToRgba)(value)), {
+                  a: rawValue.rgba.a
+                }));
+              }
+            }
+          }), colorMode === constants_1.COLOR_MODE.Rbg && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+            children: [(0, jsx_runtime_1.jsx)(helperComponents_1.FieldPrivate, {
+              value: rawValue.rgb.r,
+              max: 255,
+              onChange: value => {
+                handleChange(Object.assign(Object.assign({}, rawValue.rgba), {
+                  r: Number(value)
+                }));
+              }
+            }), (0, jsx_runtime_1.jsx)(helperComponents_1.FieldPrivate, {
+              value: rawValue.rgb.g,
+              max: 255,
+              onChange: value => {
+                handleChange(Object.assign(Object.assign({}, rawValue.rgba), {
+                  g: Number(value)
+                }));
+              }
+            }), (0, jsx_runtime_1.jsx)(helperComponents_1.FieldPrivate, {
+              value: rawValue.rgb.b,
+              max: 255,
+              onChange: value => {
+                handleChange(Object.assign(Object.assign({}, rawValue.rgba), {
+                  b: Number(value)
+                }));
+              }
+            })]
+          }), colorMode === constants_1.COLOR_MODE.Hsv && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+            children: [(0, jsx_runtime_1.jsx)(helperComponents_1.FieldPrivate, {
+              value: rawValue.hsv.h,
+              max: 360,
+              onChange: value => {
+                handleChange(Object.assign(Object.assign({}, rawValue.hsva), {
+                  h: Number(value)
+                }));
+              }
+            }), (0, jsx_runtime_1.jsx)(helperComponents_1.FieldPrivate, {
+              value: rawValue.hsv.s,
+              max: 100,
+              onChange: value => {
+                handleChange(Object.assign(Object.assign({}, rawValue.hsva), {
+                  s: Number(value)
+                }));
+              }
+            }), (0, jsx_runtime_1.jsx)(helperComponents_1.FieldPrivate, {
+              value: rawValue.hsv.v,
+              max: 100,
+              onChange: value => {
+                handleChange(Object.assign(Object.assign({}, rawValue.hsva), {
+                  v: Number(value)
+                }));
+              }
+            })]
+          })]
+        }), withAlpha && (0, jsx_runtime_1.jsx)(FieldAlphaColor_1.FieldAlphaColor, {
+          rgba: rawValue.rgba,
+          onChange: handleChange
+        })]
+      })]
+    }), !autoApply && (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.footer,
+      children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+        label: t('cancel'),
+        size: 'xs',
+        onClick: reset
+      }), (0, jsx_runtime_1.jsx)(button_1.ButtonFilled, {
+        label: t('apply'),
+        icon: (0, jsx_runtime_1.jsx)(icons_1.CheckSVG, {}),
+        onClick: applyChange,
+        size: 'xs'
+      })]
+    })]
+  }));
+}

package/dist/cjs/components/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./ColorPicker"), exports);

package/dist/cjs/constants.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HSLA_REGEX = exports.HSVA_REGEX = exports.RGBA_REGEX = exports.DEFAULT_COLOR_MODE_CONFIG = exports.COLOR_MODE_LABEL = exports.COLOR_MODE_OPTIONS = exports.COLOR_MODE = void 0;
+exports.COLOR_MODE = {
+  Hex: 'hex',
+  Rbg: 'rbg',
+  Hsv: 'hsv'
+};
+exports.COLOR_MODE_OPTIONS = [{
+  value: exports.COLOR_MODE.Hex,
+  label: 'HEX'
+}, {
+  value: exports.COLOR_MODE.Hsv,
+  label: 'HSV'
+}, {
+  value: exports.COLOR_MODE.Rbg,
+  label: 'RGB'
+}];
+exports.COLOR_MODE_LABEL = {
+  [exports.COLOR_MODE.Hex]: 'HEX',
+  [exports.COLOR_MODE.Rbg]: 'RGB',
+  [exports.COLOR_MODE.Hsv]: 'HSV'
+};
+exports.DEFAULT_COLOR_MODE_CONFIG = {
+  [exports.COLOR_MODE.Hex]: true,
+  [exports.COLOR_MODE.Rbg]: true,
+  [exports.COLOR_MODE.Hsv]: true
+};
+exports.RGBA_REGEX = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+exports.HSVA_REGEX = /hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+exports.HSLA_REGEX = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;

package/dist/cjs/helperComponents/FieldAlphaColor/FieldAlphaColor.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldAlphaColor = FieldAlphaColor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FieldPrivate_1 = require("../FieldPrivate");
+function FieldAlphaColor(_ref) {
+  let {
+    onChange,
+    rgba
+  } = _ref;
+  const handleChange = a => {
+    onChange(Object.assign(Object.assign({}, rgba), {
+      a: Number(a) % 100 / 100
+    }));
+  };
+  return (0, jsx_runtime_1.jsx)(FieldPrivate_1.FieldPrivate, {
+    value: rgba.a * 100,
+    onChange: handleChange,
+    inputType: 'number',
+    min: 0,
+    max: 100
+  });
+}

package/dist/cjs/helperComponents/FieldAlphaColor/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./FieldAlphaColor"), exports);

package/dist/cjs/helperComponents/FieldPrivate/FieldPrivate.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldPrivate = FieldPrivate;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const input_private_1 = require("@snack-uikit/input-private");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function FieldPrivate(_ref) {
+  let {
+    className,
+    disabled,
+    focused,
+    style,
+    value = '',
+    onChange,
+    min = 0,
+    max = 255,
+    inputType = 'number',
+    error
+  } = _ref;
+  const inputRef = (0, react_1.useRef)(null);
+  const handleContainerClick = () => {
+    var _a;
+    if (disabled) {
+      return;
+    }
+    (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+  const [rawValue, setRawValue] = (0, react_1.useState)('');
+  const handleBlur = () => {
+    if (inputType === 'number') {
+      const rawNumberValue = Number(rawValue) || 0;
+      const newValue = String(Math.min(Math.max(min, rawNumberValue), Math.min(max, rawNumberValue)));
+      setRawValue(newValue);
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+      return;
+    }
+    onChange === null || onChange === void 0 ? void 0 : onChange(rawValue);
+  };
+  (0, react_1.useEffect)(() => {
+    setRawValue(String(value));
+  }, [value]);
+  return (0, jsx_runtime_1.jsx)("div", {
+    className: (0, classnames_1.default)(className, styles_module_scss_1.default.container),
+    style: style,
+    "data-focused": focused || undefined,
+    "data-validation": error ? 'error' : undefined,
+    "data-test-id": 'field-container-private',
+    onClick: handleContainerClick,
+    "data-size": 's',
+    "data-variant": 'single-line-container',
+    role: 'textbox',
+    tabIndex: -1,
+    children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, Object.assign({
+      value: String(rawValue),
+      onChange: setRawValue,
+      onBlur: handleBlur,
+      type: inputType,
+      ref: inputRef
+    }, inputType === 'number' ? {
+      min,
+      max
+    } : {}))
+  });
+}

package/dist/cjs/helperComponents/FieldPrivate/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./FieldPrivate"), exports);

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./FieldPrivate"), exports);
+__exportStar(require("./FieldAlphaColor"), exports);

package/dist/cjs/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./components"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});