@nobak/design-system 1.0.0

package/lib/design/HSLTool-V1.js

@@ -0,0 +1,345 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useState, useRef } from 'react';
+import { rgbToHex } from "../shared/components/ColorChecker/utils";
+
+// Helper: Convert HSL to RGB
+function hslToRgb(h, s, l) {
+  s /= 100;
+  l /= 100;
+  var c = (1 - Math.abs(2 * l - 1)) * s;
+  var x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  var m = l - c / 2;
+  var r = 0,
+    g = 0,
+    b = 0;
+  if (0 <= h && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (60 <= h && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (120 <= h && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (180 <= h && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (240 <= h && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (300 <= h && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255)
+  };
+}
+
+// Helper: Cubic Bezier interpolation
+function cubicBezier(t, p0, c1, c2, p3) {
+  var x = Math.pow(1 - t, 3) * p0[0] + 3 * Math.pow(1 - t, 2) * t * c1[0] + 3 * (1 - t) * Math.pow(t, 2) * c2[0] + Math.pow(t, 3) * p3[0];
+  var y = Math.pow(1 - t, 3) * p0[1] + 3 * Math.pow(1 - t, 2) * t * c1[1] + 3 * (1 - t) * Math.pow(t, 2) * c2[1] + Math.pow(t, 3) * p3[1];
+  return [x, y];
+}
+export var HSLTool = function HSLTool() {
+  // User-controlled state
+  var _useState = useState(220),
+    _useState2 = _slicedToArray(_useState, 2),
+    hue = _useState2[0],
+    setHue = _useState2[1];
+  var _useState3 = useState(80),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sat = _useState4[0],
+    setSat = _useState4[1];
+  var _useState5 = useState(27),
+    _useState6 = _slicedToArray(_useState5, 2),
+    numPoints = _useState6[0],
+    setNumPoints = _useState6[1];
+  var width = 1200; // spectrum width fixed
+  var height = 480; // taller spectrum for better UX
+
+  // Curve control points (draggable)
+  var _useState7 = useState([0, height]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    start = _useState8[0],
+    setStart = _useState8[1]; // A (P0)
+  var _useState9 = useState([width, height]),
+    _useState0 = _slicedToArray(_useState9, 2),
+    end = _useState0[0],
+    setEnd = _useState0[1]; // C (P3)
+
+  // NEW: Independent handles for cubic Bezier
+  var _useState1 = useState([width * 0.25, 0]),
+    _useState10 = _slicedToArray(_useState1, 2),
+    handle1 = _useState10[0],
+    setHandle1 = _useState10[1]; // C1 (Near A)
+  var _useState11 = useState([width * 0.75, 0]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    handle2 = _useState12[0],
+    setHandle2 = _useState12[1]; // C2 (Near C)
+
+  // Drag state
+  var dragRef = useRef({
+    point: null
+  }); // Updated points
+
+  // Clamp numPoints between 3 and 99
+  var n = Math.max(3, Math.min(99, numPoints));
+  var points = Array.from({
+    length: n
+  }, function (_, i) {
+    return i / (n - 1);
+  });
+
+  // Gradient background string for spectrum
+  var grad = "linear-gradient(to top, hsl(".concat(hue, ",").concat(sat, "%,20%), hsl(").concat(hue, ",").concat(sat, "%,95%))");
+
+  // Handlers for dragging
+  function handleDragStart(point, e) {
+    // Updated points
+    e.preventDefault();
+    dragRef.current.point = point;
+    document.body.style.cursor = 'grabbing'; // Use grabbing for any drag
+  }
+  function handleDrag(e) {
+    var _ownerSVGElement;
+    if (!dragRef.current.point) return;
+    var rect = (_ownerSVGElement = e.target.ownerSVGElement) === null || _ownerSVGElement === void 0 ? void 0 : _ownerSVGElement.getBoundingClientRect();
+    if (!rect) return;
+    var x = e.clientX - rect.left;
+    var y = e.clientY - rect.top;
+    // Clamp to bounds, but allow Y to go a bit above the spectrum for full access to lightest colors
+    x = Math.max(0, Math.min(width, x));
+    y = Math.max(-32, Math.min(height, y)); // allow up to 32px above the spectrum
+    if (dragRef.current.point === 'A') setStart([x, y]);
+    if (dragRef.current.point === 'C') setEnd([x, y]);
+    // NEW: Handle drag for cubic control points
+    if (dragRef.current.point === 'HANDLE1') setHandle1([x, y]);
+    if (dragRef.current.point === 'HANDLE2') setHandle2([x, y]);
+  }
+  function handleDragEnd() {
+    dragRef.current.point = null;
+    document.body.style.cursor = ''; // Reset cursor
+  }
+
+  // Bezier path string (Updated to Cubic)
+  var pathD = "M ".concat(start[0], " ").concat(start[1], " C ").concat(handle1[0], " ").concat(handle1[1], " ").concat(handle2[0], " ").concat(handle2[1], " ").concat(end[0], " ").concat(end[1]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "p-4",
+    onMouseMove: handleDrag,
+    onMouseUp: handleDragEnd,
+    onMouseLeave: handleDragEnd
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-center items-center gap-4 mb-4"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "flex flex-col items-center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-xs text-gray-600"
+  }, "Hue"), /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    min: "0",
+    max: "360",
+    value: hue,
+    onChange: function onChange(e) {
+      return setHue(parseInt(e.target.value));
+    },
+    className: "w-48"
+  }), /*#__PURE__*/React.createElement("span", null, hue, "\xB0")), /*#__PURE__*/React.createElement("label", {
+    className: "flex flex-col items-center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-xs text-gray-600"
+  }, "Saturation"), /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    min: "0",
+    max: "100",
+    value: sat,
+    onChange: function onChange(e) {
+      return setSat(parseInt(e.target.value));
+    },
+    className: "w-48"
+  }), /*#__PURE__*/React.createElement("span", null, sat, "%")), /*#__PURE__*/React.createElement("label", {
+    className: "flex flex-col items-center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-xs text-gray-600"
+  }, "Points"), /*#__PURE__*/React.createElement("input", {
+    type: "number",
+    min: "3",
+    max: ": ",
+    value: numPoints,
+    onChange: function onChange(e) {
+      return setNumPoints(parseInt(e.target.value));
+    },
+    className: "w-16 p-1 border rounded"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "relative mx-auto border border-gray-300 overflow-hidden mb-4",
+    style: {
+      width: width,
+      height: height,
+      background: grad
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    style: {
+      display: 'block',
+      overflow: 'visible'
+    }
+  }, /*#__PURE__*/React.createElement("line", {
+    x1: start[0],
+    y1: start[1],
+    x2: handle1[0],
+    y2: handle1[1],
+    stroke: "rgba(0,0,0,0.4)",
+    strokeWidth: 1,
+    strokeDasharray: "4 2"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: end[0],
+    y1: end[1],
+    x2: handle2[0],
+    y2: handle2[1],
+    stroke: "rgba(0,0,0,0.4)",
+    strokeWidth: 1,
+    strokeDasharray: "4 2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: pathD,
+    stroke: "rgba(0,0,0,0.6)",
+    strokeWidth: 2,
+    fill: "none"
+  }), points.map(function (t, i) {
+    // Use cubicBezier helper
+    var _cubicBezier = cubicBezier(t, start, handle1, handle2, end),
+      _cubicBezier2 = _slicedToArray(_cubicBezier, 2),
+      px = _cubicBezier2[0],
+      py = _cubicBezier2[1];
+    var l = (1 - py / height) * 75 + 20; // Lightness calculation remains the same
+    var _hslToRgb = hslToRgb(hue, sat, l),
+      r = _hslToRgb.r,
+      g = _hslToRgb.g,
+      b = _hslToRgb.b;
+    return /*#__PURE__*/React.createElement("circle", {
+      key: i,
+      cx: px,
+      cy: py,
+      r: 4,
+      fill: "rgb(".concat(r, ",").concat(g, ",").concat(b, ")"),
+      stroke: "rgba(0,0,0,0.5)",
+      strokeWidth: 1
+    });
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: start[0],
+    cy: start[1],
+    r: 12,
+    fill: "#fff",
+    stroke: "#3498db",
+    strokeWidth: 3,
+    style: {
+      cursor: 'grab'
+    },
+    onMouseDown: function onMouseDown(e) {
+      return handleDragStart('A', e);
+    }
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: end[0],
+    cy: end[1],
+    r: 12,
+    fill: "#fff",
+    stroke: "#e74c3c",
+    strokeWidth: 3,
+    style: {
+      cursor: 'grab'
+    },
+    onMouseDown: function onMouseDown(e) {
+      return handleDragStart('C', e);
+    }
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: handle1[0],
+    cy: handle1[1],
+    r: 9 // Smaller handle size
+    ,
+    fill: "#f9e7c0",
+    stroke: "#f39c12",
+    strokeWidth: 2,
+    style: {
+      cursor: 'grab'
+    } // Use grab cursor
+    ,
+    onMouseDown: function onMouseDown(e) {
+      return handleDragStart('HANDLE1', e);
+    }
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: handle2[0],
+    cy: handle2[1],
+    r: 9 // Smaller handle size
+    ,
+    fill: "#f9e7c0",
+    stroke: "#f39c12",
+    strokeWidth: 2,
+    style: {
+      cursor: 'grab'
+    } // Use grab cursor
+    ,
+    onMouseDown: function onMouseDown(e) {
+      return handleDragStart('HANDLE2', e);
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-wrap gap-2 justify-center"
+  }, points.map(function (t, i) {
+    // Use cubicBezier helper
+    var _cubicBezier3 = cubicBezier(t, start, handle1, handle2, end),
+      _cubicBezier4 = _slicedToArray(_cubicBezier3, 2),
+      px = _cubicBezier4[0],
+      py = _cubicBezier4[1];
+    var l = (1 - py / height) * 75 + 20;
+    var rgb = hslToRgb(hue, sat, l);
+    var hex = '#' + rgbToHex(rgb.r, rgb.g, rgb.b);
+    return /*#__PURE__*/React.createElement("div", {
+      key: i,
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        minWidth: 56
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: hex,
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        border: '1px solid #eee',
+        marginBottom: 4
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: 12,
+        fontFamily: 'monospace'
+      }
+    }, hex), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: 11,
+        color: '#666'
+      }
+    }, "HSL(", hue, ",", sat, "%,", Math.round(l), "%)"));
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 24,
+      fontSize: 13,
+      color: '#555'
+    }
+  }, /*#__PURE__*/React.createElement("b", null, "How it works:"), " Drag the blue (A) and red (C) handles, or the smaller yellow handles, to reshape the spectrum curve. The points show their HEX and HSL values."));
+};