@nobak/design-system 1.0.0

package/lib/design/HSLTool.js

@@ -0,0 +1,374 @@
+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, useEffect, useMemo, useCallback } from 'react';
+
+// --- START: Local Helper Functions ---
+
+/**
+ * Converts an HSL color value to Hex. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes h, s, and l are contained in the set [0, 360], [0, 100], [0, 100] respectively.
+ *
+ * @param   {number}  h       The hue
+ * @param   {number}  s       The saturation
+ * @param   {number}  l       The lightness
+ * @return  {string}          The HEX color representation
+ */
+function hslToHex(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;
+  }
+
+  // Having calculated RGB, convert channels to hex
+  r = Math.round((r + m) * 255);
+  g = Math.round((g + m) * 255);
+  b = Math.round((b + m) * 255);
+  var toHex = function toHex(val) {
+    var hex = val.toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+  return "".concat(toHex(r)).concat(toHex(g)).concat(toHex(b));
+}
+
+/**
+ * Parses an HSL color string like 'hsl(240, 100%, 50%)'.
+ * @param hslString The HSL color string.
+ * @returns An object with h, s, l properties, or defaults if parsing fails.
+ */
+function parseHslString(hslString) {
+  var regex = /hsl\(\s*(\d+)\s*,\s*(\d+)%?\s*,\s*(\d+)%?\s*\)/i;
+  var match = hslString.match(regex);
+  if (match) {
+    return {
+      h: parseInt(match[1], 10),
+      s: parseInt(match[2], 10),
+      l: parseInt(match[3], 10)
+    };
+  } else {
+    // Return default values if parsing fails
+    console.warn("Failed to parse HSL string: \"".concat(hslString, "\". Using defaults."));
+    return {
+      h: 0,
+      s: 0,
+      l: 50
+    };
+  }
+}
+
+// --- END: Local Helper Functions ---
+
+export var HSLTool = function HSLTool(_ref) {
+  var _ref$initialColor = _ref.initialColor,
+    initialColor = _ref$initialColor === void 0 ? 'hsl(210, 100%, 50%)' : _ref$initialColor,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 500 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 250 : _ref$height,
+    _ref$totalPoints = _ref.totalPoints,
+    totalPoints = _ref$totalPoints === void 0 ? 27 : _ref$totalPoints;
+  var svgPadding = 20;
+  var svgWidth = width;
+  var svgHeight = height;
+  var graphWidth = svgWidth - 2 * svgPadding;
+  var graphHeight = svgHeight - 2 * svgPadding;
+  var initialHsl = useMemo(function () {
+    return parseHslString(initialColor);
+  }, [initialColor]);
+  var _useState = useState(initialHsl.h),
+    _useState2 = _slicedToArray(_useState, 2),
+    hue = _useState2[0],
+    setHue = _useState2[1];
+  var _useState3 = useState(initialHsl.s),
+    _useState4 = _slicedToArray(_useState3, 2),
+    saturation = _useState4[0],
+    setSaturation = _useState4[1];
+  // Point A: Bottom-left, interactive vertically (controls start lightness?)
+  var _useState5 = useState({
+      x: svgPadding,
+      y: svgHeight - svgPadding
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    pointA = _useState6[0],
+    setPointA = _useState6[1];
+  // Point C: Fixed Top-right
+  var pointC = useMemo(function () {
+    return {
+      x: svgWidth - svgPadding,
+      y: svgPadding
+    };
+  }, [svgWidth, svgPadding]);
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    draggingPoint = _useState8[0],
+    setDraggingPoint = _useState8[1];
+  var _useState9 = useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    copiedHex = _useState0[0],
+    setCopiedHex = _useState0[1];
+
+  // Function to get point on the line segment AC
+  var getPointOnLine = useCallback(function (t, p1, p2) {
+    var x = p1.x + t * (p2.x - p1.x);
+    var y = p1.y + t * (p2.y - p1.y);
+    return {
+      x: x,
+      y: y
+    };
+  }, []);
+  var handleMouseDown = function handleMouseDown(pointName) {
+    return function (event) {
+      event.preventDefault();
+      setDraggingPoint(pointName);
+    };
+  };
+  var handleMouseMove = useCallback(function (event) {
+    var _closest;
+    if (!draggingPoint) return;
+    var svgRect = (_closest = event.target.closest('svg')) === null || _closest === void 0 ? void 0 : _closest.getBoundingClientRect();
+    if (!svgRect) return;
+    var x = event.clientX - svgRect.left;
+    var y = event.clientY - svgRect.top;
+
+    // Clamp position within SVG bounds (considering padding)
+    x = Math.max(svgPadding, Math.min(x, svgWidth - svgPadding));
+    y = Math.max(svgPadding, Math.min(y, svgHeight - svgPadding));
+    if (draggingPoint === 'A') {
+      // Allow A to move freely for now, or restrict axis if needed
+      // For now, keep its x fixed to the left edge
+      setPointA({
+        x: svgPadding,
+        y: y
+      });
+    }
+  }, [draggingPoint, svgWidth, svgHeight, svgPadding]);
+  var handleMouseUp = useCallback(function () {
+    setDraggingPoint(null);
+  }, []);
+  useEffect(function () {
+    if (draggingPoint) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    } else {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    }
+    return function () {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [draggingPoint, handleMouseMove, handleMouseUp]);
+
+  // Calculate the path string for the line AC
+  var pathData = useMemo(function () {
+    // Simple straight line from A to C
+    return "M ".concat(pointA.x, " ").concat(pointA.y, " L ").concat(pointC.x, " ").concat(pointC.y);
+    // If a curve is still desired, a quadratic Bezier might be:
+    // const controlX = (pointA.x + pointC.x) / 2; // Example control point
+    // const controlY = pointA.y; // Keep control vertically aligned with A?
+    // return `M ${pointA.x} ${pointA.y} Q ${controlX} ${controlY}, ${pointC.x} ${pointC.y}`;
+  }, [pointA, pointC]);
+  var colorSwatches = useMemo(function () {
+    var swatches = [];
+    var minLightness = 5; // Darkest color on the right
+    var maxLightness = 95; // Lightest color on the left
+    // Lightness range based on vertical position of A?
+    // Or fixed range like 5-95?
+    // Let's use fixed range for now, influenced by the path's t
+    // const startL = ((svgHeight - svgPadding - pointA.y) / graphHeight) * 100;
+    // Let's map t (0 to 1) directly to lightness (maxLightness to minLightness)
+
+    for (var i = 0; i < totalPoints; i++) {
+      var t = i / (totalPoints - 1);
+      var point = getPointOnLine(t, pointA, pointC);
+
+      // Calculate lightness based on horizontal position (t)
+      var l = maxLightness - t * (maxLightness - minLightness);
+      var hslString = "hsl(".concat(hue, ", ").concat(saturation, "%, ").concat(l.toFixed(1), "%)");
+      var hex = hslToHex(hue, saturation, l);
+      swatches.push({
+        t: t,
+        hex: hex,
+        l: l,
+        point: point
+      });
+    }
+    return swatches;
+  }, [totalPoints, pointA, pointC, hue, saturation, getPointOnLine, svgHeight, svgPadding, graphHeight]);
+  var handleCopyHex = function handleCopyHex(hex) {
+    navigator.clipboard.writeText("#".concat(hex));
+    setCopiedHex(hex);
+    setTimeout(function () {
+      return setCopiedHex(null);
+    }, 1500); // Reset after 1.5 seconds
+  };
+
+  // Calculate gradient stops based on H/S and min/max Lightness
+  var gradientColorStart = "hsl(".concat(hue, ", ").concat(saturation, "%, ", 95, "%)"); // L=95% on left
+  var gradientColorEnd = "hsl(".concat(hue, ", ").concat(saturation, "%, ", 5, "%)"); // L=5% on right
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "p-4 bg-gray-100 rounded-lg shadow-md flex flex-col items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-4 mb-4 w-full max-w-md"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-1"
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "hue",
+    className: "block text-sm font-medium text-gray-700"
+  }, "Hue: ", hue.toFixed(0)), /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    id: "hue",
+    min: "0",
+    max: "360",
+    value: hue,
+    onChange: function onChange(e) {
+      return setHue(parseFloat(e.target.value));
+    },
+    className: "w-full h-2 bg-gradient-to-r from-red-500 via-lime-500 to-blue-500 rounded-lg appearance-none cursor-pointer"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex-1"
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "saturation",
+    className: "block text-sm font-medium text-gray-700"
+  }, "Saturation: ", saturation.toFixed(0), "%"), /*#__PURE__*/React.createElement("input", {
+    type: "range",
+    id: "saturation",
+    min: "0",
+    max: "100",
+    value: saturation,
+    onChange: function onChange(e) {
+      return setSaturation(parseFloat(e.target.value));
+    },
+    className: "w-full h-2 bg-gradient-to-r from-gray-300 to-blue-500 rounded-lg appearance-none cursor-pointer",
+    style: {
+      background: "linear-gradient(to right, hsl(".concat(hue, ", 0%, 50%), hsl(").concat(hue, ", 100%, 50%))")
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "relative",
+    style: {
+      width: svgWidth,
+      height: svgHeight
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: svgWidth,
+    height: svgHeight,
+    className: "border border-gray-300 bg-white rounded"
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "grad",
+    x1: ": ",
+    y1: ", ",
+    x2: "100%",
+    y2: ": "
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: ", ",
+    stopColor: gradientColorStart
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "100%",
+    stopColor: gradientColorEnd
+  }))), /*#__PURE__*/React.createElement("rect", {
+    x: svgPadding,
+    y: svgPadding,
+    width: graphWidth,
+    height: graphHeight,
+    fill: "url(#grad)"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: pathData,
+    fill: "none",
+    stroke: "none" // Removed stroke color
+    ,
+    strokeWidth: "2"
+  }), colorSwatches.map(function (_ref2, index) {
+    var point = _ref2.point,
+      hex = _ref2.hex,
+      l = _ref2.l;
+    return /*#__PURE__*/React.createElement("g", {
+      key: index
+    }, /*#__PURE__*/React.createElement("circle", {
+      cx: point.x,
+      cy: point.y,
+      r: 4 // Smaller points
+      ,
+      fill: "#".concat(hex) // Fill with the actual color at that point
+      ,
+      stroke: "rgba(0,0,0,0.5)" // Optional subtle border
+      ,
+      strokeWidth: "0.5"
+    }));
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: pointA.x,
+    cy: pointA.y,
+    r: 8,
+    fill: "rgba(0, 0, 255, 0.7)",
+    stroke: "blue",
+    strokeWidth: "2",
+    cursor: "grab",
+    onMouseDown: handleMouseDown('A')
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: pointC.x,
+    cy: pointC.y,
+    r: 8,
+    fill: "rgba(200, 200, 200, 0.7)" // Indicate non-draggable
+    ,
+    stroke: "gray",
+    strokeWidth: "2"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-center flex-wrap gap-1 mt-4 max-w-full overflow-x-auto px-2"
+  }, colorSwatches.map(function (_ref3, i) {
+    var t = _ref3.t,
+      hex = _ref3.hex,
+      l = _ref3.l;
+    // Removed border logic tied to middle points
+    var borderColorClass = 'border border-transparent';
+    return /*#__PURE__*/React.createElement("div", {
+      key: "".concat(t, "-").concat(hex),
+      className: "relative w-10 h-16 rounded overflow-hidden cursor-pointer flex-shrink-0 ".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: "#".concat(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 truncate"
+    }, "#", 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!"));
+  })));
+};

package/lib/design/OKLCHColorPicker.stories.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { OKLCHTool } from "./OKLCHTool";
+export default {
+  title: 'Tools / OKLCH Color Tool',
+  component: OKLCHTool,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: "\n# OKLCH Color Palette Generator\n\nA modern color palette generator using the OKLCH color space, which provides **perceptually uniform lightness** across all hues.\n\n## Why OKLCH?\n\nUnlike HSL where the same lightness value looks different across hues (green appears brighter than blue at L=50%), OKLCH provides:\n\n- **Perceptually uniform lightness:** L=0.5 looks equally bright for red, green, blue, and all other hues\n- **No hue shifts:** Colors stay consistent at extreme lightness values\n- **Modern standard:** Based on human vision research (Oklab color space)\n- **Wide gamut:** Can represent more colors than sRGB\n\n## Features\n\n### \uD83C\uDFA8 OKLCH Color Space\nGenerate palettes with truly uniform brightness across hues.\n\n### \uD83C\uDFAD Overlay/Tint Feature\nApply a semi-transparent wash to unify your palette - like color grading in film!\n\n### \uD83D\uDD27 Gentle Chroma Compensation\nOKLCH needs much less adjustment than HSL, preserving color accuracy.\n\n### \uD83D\uDCE6 Palette Collection\nSave multiple palettes and export them all together.\n\n## How to Use\n\n1. **Configure Base Color:** Set the hue, chroma (saturation), and lightness\n2. **Enable Overlay (Optional):** Add a tint to unify your palette\n3. **Adjust Shade Count:** Choose 9, 18, or 27 colors\n4. **Add to Collection:** Save your palette\n5. **Export:** Download as JSON, CSS, SCSS, or Tailwind config\n\n## Comparison: HSL vs OKLCH\n\n### HSL Problem\n```css\n/* All have L=50%, but green looks much brighter! */\nhsl(0, 100%, 50%)   /* Red - medium bright */\nhsl(120, 100%, 50%) /* Green - very bright! */\nhsl(240, 100%, 50%) /* Blue - darker */\n```\n\n### OKLCH Solution\n```css\n/* All have L=0.5 and actually look equally bright! */\noklch(0.5 0.2 0)   /* Red */\noklch(0.5 0.2 120) /* Green */\noklch(0.5 0.2 240) /* Blue */\n```\n\n## The Overlay Trick\n\nThe overlay feature implements a professional colorist technique:\n- Add a subtle tint (5-15% opacity) over your entire palette\n- Creates tonal unity like Instagram filters or film color grading\n- Perfect for creating branded color systems\n        "
+      }
+    }
+  }
+};
+export var OKLCHColorTool = function OKLCHColorTool() {
+  return /*#__PURE__*/React.createElement(OKLCHTool, null);
+};
+OKLCHColorTool.parameters = {
+  docs: {
+    source: {
+      code: '<OKLCHTool />'
+    }
+  }
+};