@nobak/design-system 1.0.0

package/lib/design/HSLTool-V2.js

@@ -0,0 +1,475 @@
+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, useCallback } from 'react';
+import { rgbToHex } from "../shared/components/ColorChecker/utils";
+
+// Helper: Convert HSL to RGB
+function hslToRgb(h, s, l) {
+  // Clamp lightness to 0-100 before conversion
+  l = Math.max(0, Math.min(100, 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() {
+  var width = 1200;
+  var height = 480;
+  var lightnessRange = 70; // +/- 35 from baseLightness
+  var maxTotalPoints = 99;
+
+  // 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(50),
+    _useState6 = _slicedToArray(_useState5, 2),
+    baseLightness = _useState6[0],
+    setBaseLightness = _useState6[1]; // Base Lightness
+  var _useState7 = useState(5),
+    _useState8 = _slicedToArray(_useState7, 2),
+    baseColorCount = _useState8[0],
+    setBaseColorCount = _useState8[1]; // Base colors (3, 5, or 7)
+  var _useState9 = useState(1),
+    _useState0 = _slicedToArray(_useState9, 2),
+    multiplier = _useState0[0],
+    setMultiplier = _useState0[1]; // Multiplier (1x, 2x, 3x, 4x)
+
+  // Curve control points (A, C, and Handles for Cubic Bezier) - Default to half-circle shape
+  var _useState1 = useState([0, height]),
+    _useState10 = _slicedToArray(_useState1, 2),
+    start = _useState10[0],
+    setStart = _useState10[1]; // A (P0) - Bottom Left
+  var _useState11 = useState([width, height]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    end = _useState12[0],
+    setEnd = _useState12[1]; // C (P3) - Bottom Right
+  var _useState13 = useState([width * 0.3, 0]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    handle1 = _useState14[0],
+    setHandle1 = _useState14[1]; // C1 - Pulls up near A
+  var _useState15 = useState([width * 0.7, 0]),
+    _useState16 = _slicedToArray(_useState15, 2),
+    handle2 = _useState16[0],
+    setHandle2 = _useState16[1]; // C2 - Pulls up near C
+
+  // Drag state
+  var dragRef = useRef({
+    point: null
+  });
+
+  // Clipboard feedback state
+  var _useState17 = useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    copiedHex = _useState18[0],
+    setCopiedHex = _useState18[1];
+  var copyTimeoutRef = useRef(null);
+
+  // Derived Calculations
+  var calculatedTotalPoints = baseColorCount * multiplier;
+  var totalPoints = Math.max(3, Math.min(maxTotalPoints, calculatedTotalPoints)); // Ensure at least 3 points, max 99
+  var pointsT = Array.from({
+    length: totalPoints
+  }, function (_, i) {
+    return i / (totalPoints - 1);
+  }); // Parameter t for each point
+
+  // Find middle index for the single primary ascendant color
+  var middleIndex = Math.floor(totalPoints / 2);
+  // Find the offset for secondary middle points within each base group
+  var baseMiddleOffset = Math.ceil(baseColorCount / 2);
+
+  // Generate color swatches data
+  var colorSwatches = pointsT.map(function (t, i) {
+    var _cubicBezier = cubicBezier(t, start, handle1, handle2, end),
+      _cubicBezier2 = _slicedToArray(_cubicBezier, 2),
+      px = _cubicBezier2[0],
+      py = _cubicBezier2[1];
+    var clampedPy = Math.max(0, Math.min(height, py)); // Clamp y within bounds
+    // Calculate lightness based on curve position, centered around baseLightness
+    var l = baseLightness + (0.5 - clampedPy / height) * lightnessRange;
+    var finalL = Math.max(0, Math.min(100, l)); // Clamp lightness 0-100
+
+    var rgb = hslToRgb(hue, sat, finalL); // Use current H, S, and calculated L
+    var hex = rgbToHex(rgb.r, rgb.g, rgb.b);
+
+    // Determine border status
+    var isPrimaryMiddle = i === middleIndex;
+    // Check if it's a secondary middle *and not* the primary middle
+    var isSecondaryMiddle = (i + 1) % baseColorCount === baseMiddleOffset && !isPrimaryMiddle;
+    return {
+      t: t,
+      hex: hex,
+      l: finalL,
+      isPrimaryMiddle: isPrimaryMiddle,
+      isSecondaryMiddle: isSecondaryMiddle
+    }; // Include border flags
+  });
+
+  // Event Handlers
+  var handleDragStart = useCallback(function (point, e) {
+    e.preventDefault();
+    e.stopPropagation();
+    dragRef.current.point = point;
+    document.body.style.cursor = 'grabbing';
+  }, []);
+  var handleDrag = useCallback(function (e) {
+    if (!dragRef.current.point) return;
+    var svg = e.currentTarget;
+    var CTM = svg.getScreenCTM();
+    if (!CTM) return;
+    var pt = svg.createSVGPoint();
+    pt.x = e.clientX;
+    pt.y = e.clientY;
+    pt = pt.matrixTransform(CTM.inverse());
+    var x = pt.x;
+    var y = pt.y;
+
+    // Clamp to bounds (allow Y to go slightly outside for handles)
+    x = Math.max(0, Math.min(width, x));
+    y = Math.max(-32, Math.min(height + 32, y)); // Allow handles to go slightly above/below
+
+    switch (dragRef.current.point) {
+      case 'A':
+        setStart([x, y]);
+        break;
+      case 'C':
+        setEnd([x, y]);
+        break;
+      case 'HANDLE1':
+        setHandle1([x, y]);
+        break;
+      // Update Handle 1
+      case 'HANDLE2':
+        setHandle2([x, y]);
+        break;
+      // Update Handle 2
+    }
+  }, [width, height]);
+  var handleDragEnd = useCallback(function () {
+    if (dragRef.current.point) {
+      dragRef.current.point = null;
+      document.body.style.cursor = '';
+    }
+  }, []);
+
+  // Copy to clipboard handler
+  var handleCopyHex = useCallback(function (hex) {
+    navigator.clipboard.writeText(hex).then(function () {
+      setCopiedHex(hex);
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+      copyTimeoutRef.current = setTimeout(function () {
+        setCopiedHex(null);
+        copyTimeoutRef.current = null;
+      }, 1500);
+    })["catch"](function (err) {
+      console.error('Failed to copy hex:', err);
+    });
+  }, []);
+
+  // Cleanup timeout on unmount
+  React.useEffect(function () {
+    return function () {
+      if (copyTimeoutRef.current) {
+        clearTimeout(copyTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Bezier path string (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"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-wrap justify-center items-center gap-x-6 gap-y-3 mb-4"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "flex items-center gap-1"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-sm font-medium w-10"
+  }, "Hue:"), /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    min: "0",
+    max: "360",
+    value: hue,
+    onChange: function onChange(e) {
+      return setHue(Number(e.target.value));
+    },
+    className: "w-32"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text-sm w-8 text-right"
+  }, hue, "\xB0")), /*#__PURE__*/React.createElement("label", {
+    className: "flex items-center gap-1"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-sm font-medium w-10"
+  }, "Sat:"), /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    min: "0",
+    max: "100",
+    value: sat,
+    onChange: function onChange(e) {
+      return setSat(Number(e.target.value));
+    },
+    className: "w-24"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text-sm w-8 text-right"
+  }, sat, "%")), /*#__PURE__*/React.createElement("label", {
+    className: "flex items-center gap-1"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-sm font-medium w-10"
+  }, "Light:"), /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    min: "0",
+    max: "100",
+    value: baseLightness,
+    onChange: function onChange(e) {
+      return setBaseLightness(Number(e.target.value));
+    },
+    className: "w-24"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text-sm w-8 text-right"
+  }, baseLightness, "%")), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-sm font-medium"
+  }, "Base Colors:"), [3, 5, 7].map(function (numCols) {
+    return /*#__PURE__*/React.createElement("label", {
+      key: numCols,
+      className: "flex items-center gap-1 cursor-pointer"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "radio",
+      name: "baseColorCount",
+      value: numCols,
+      checked: baseColorCount === numCols,
+      onChange: function onChange() {
+        return setBaseColorCount(numCols);
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "text-sm ".concat(baseColorCount === numCols ? 'font-semibold' : '')
+    }, numCols));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-sm font-medium"
+  }, "Multiplier:"), [1, 2, 3, 4].map(function (multi) {
+    return /*#__PURE__*/React.createElement("label", {
+      key: multi,
+      className: "flex items-center gap-1 cursor-pointer"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "radio",
+      name: "multiplier",
+      value: multi,
+      checked: multiplier === multi,
+      onChange: function onChange() {
+        return setMultiplier(multi);
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "text-sm ".concat(multiplier === multi ? 'font-semibold' : '')
+    }, multi, "x"));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "text-sm font-medium text-gray-600"
+  }, "Total Points: ", totalPoints)), /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-center mb-4"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 ".concat(width, " ").concat(height),
+    style: {
+      display: 'block',
+      overflow: 'visible',
+      border: '1px solid #ccc',
+      userSelect: 'none'
+    },
+    onMouseMove: handleDrag,
+    onMouseUp: handleDragEnd,
+    onMouseLeave: handleDragEnd
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "0",
+    y: "0",
+    width: width,
+    height: height,
+    fill: "#f8f8f8"
+  }), /*#__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"
+  }), pointsT.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];
+    // Clamp Y position *within SVG bounds* for lightness calculation
+    var clampedPy = Math.max(0, Math.min(height, py));
+    // Modulate baseLightness using curve position and range
+    // (0.5 - clampedPy / height) gives a value from +0.5 (top) to -0.5 (bottom)
+    var l = baseLightness + (0.5 - clampedPy / height) * lightnessRange;
+    // Final color uses calculated H, S, L (hslToRgb clamps L)
+    var _hslToRgb = hslToRgb(hue, sat, l),
+      r = _hslToRgb.r,
+      g = _hslToRgb.g,
+      b = _hslToRgb.b;
+    var isAscendant = i === middleIndex;
+    return /*#__PURE__*/React.createElement("circle", {
+      key: i,
+      cx: px,
+      cy: py // Render circle at actual curve position
+      ,
+      r: isAscendant ? 7 : 4,
+      fill: "rgb(".concat(r, ",").concat(g, ",").concat(b, ")"),
+      stroke: isAscendant ? "gold" : "rgba(0,0,0,0.5)",
+      strokeWidth: isAscendant ? 2 : 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,
+    fill: "#f9e7c0",
+    stroke: "#f39c12",
+    strokeWidth: 2,
+    style: {
+      cursor: 'grab'
+    },
+    onMouseDown: function onMouseDown(e) {
+      return handleDragStart('HANDLE1', e);
+    }
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: handle2[0],
+    cy: handle2[1],
+    r: 9,
+    fill: "#f9e7c0",
+    stroke: "#f39c12",
+    strokeWidth: 2,
+    style: {
+      cursor: 'grab'
+    },
+    onMouseDown: function onMouseDown(e) {
+      return handleDragStart('HANDLE2', e);
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-center flex-wrap gap-1 mt-4"
+  }, colorSwatches.map(function (_ref, i) {
+    var t = _ref.t,
+      hex = _ref.hex,
+      l = _ref.l,
+      isPrimaryMiddle = _ref.isPrimaryMiddle,
+      isSecondaryMiddle = _ref.isSecondaryMiddle;
+    var borderColorClass = isPrimaryMiddle ? 'border-2 border-black shadow-md' // Primary middle border
+    : isSecondaryMiddle ? 'border border-gray-500' // Secondary middle border
+    : 'border border-transparent'; // No special border
+    return /*#__PURE__*/React.createElement("div", {
+      key: t // Use t for key stability if totalPoints changes
+      ,
+      className: "relative w-10 h-16 rounded overflow-hidden cursor-pointer ".concat(borderColorClass),
+      title: "L: ".concat(l.toFixed(1), "%\nClick to copy ").concat(hex),
+      onClick: function onClick() {
+        return handleCopyHex(hex);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "absolute inset-0",
+      style: {
+        backgroundColor: hex
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white text-[10px] text-center py-0.5"
+    }, hex), copiedHex === hex && /*#__PURE__*/React.createElement("div", {
+      className: "absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center text-xs font-bold text-green-600"
+    }, "Copied!"));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "mt-6 text-sm text-gray-600 text-center"
+  }, /*#__PURE__*/React.createElement("b", null, "How it works:"), " Adjust H, S, L. Set Base Colors & Multiplier (1x-4x, max ", maxTotalPoints, " total). Drag handles (A, C, Yellow) to shape lightness curve. Middle point gets black border, secondary middles get gray border. Click hex to copy."));
+};