Major refactor

package.json

@@ -4,21 +4,20 @@
   "description": "",
   "keywords": [],
   "main": "src/index.tsx",
+  "license": "MIT",
   "dependencies": {
     "@ark-ui/react": "^1.2.1",
-    "@chakra-ui/icons": "^2.1.1",
-    "@chakra-ui/react": "^2.8.2",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
+    "@zag-js/color-utils": "^0.31.1",
     "d3-scale": "^3.3.0",
-    "framer-motion": "^10.16.16",
+    "jotai": "^2.6.0",
     "lucide-react": "^0.302.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "wcag-color": "^1.1.1"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.23.0",
+    "@pandacss/studio": "^0.23.0",
     "@park-ui/panda-preset": "^0.27.0",
     "@types/d3-scale": "^3.2.3",
     "@types/react": "18.2.45",

src/App.tsx

@@ -1,197 +1,42 @@
-import React, { useState } from "react";
-import {
-  Input,
-  Container,
-  Flex,
-  Text,
-  HStack,
-  Select,
-  VStack,
-} from "@chakra-ui/react";
-import { defaultColors, defaultScales } from "./consts/defaultValues";
-import { CustomScaleInput } from "./components/CustomScaleInput";
-import { OutputColorsJson } from "./components/OutputColorsJson";
-import { ClearButton } from "./components/ClearButton";
-import {
-  generateColors,
-  distributionFunctionTypes,
-  rgbaToHex,
-} from "./utils/color-utils";
-import { sortNumbers } from "./utils/math-utils";
-import { LockButton } from "./components/LockButton";
-import { Color } from "./components/Color";
-
-export const App = () => {
-  const [colors, setColors] = useState(defaultColors);
-  const [definedColors, defineColors] = useState(defaultColors);
-
-  const [selectedFunction, selectFunction] = useState<string>("linear");
-
-  const [customScaleValues, setCustomScaleValues] = useState<number[]>([]);
-  const [customScaleValue, setCustomScaleValue] = useState<number>(550);
-
-  const scales = sortNumbers(defaultScales.concat(customScaleValues));
-
-  const updateColors = (_colors?: string[], _scales?: number[]) => {
-    setColors(
-      generateColors(
-        _colors || definedColors,
-        _scales || scales,
-        selectedFunction
-      )
+import { Container } from "@/styled-system/jsx";
+import { CustomScaleInput } from "@/components/CustomScaleInput";
+import { OutputColorsJson } from "@/components/OutputColorsJson";
+import { Distribution } from "@/components/Distribution";
+import { Palette } from "@/components/Palette";
+import { createToaster } from "@ark-ui/react/toast";
+import { XIcon } from "lucide-react";
+import { IconButton } from "@/components/ui/icon-button";
+import * as Toast from "@/components/ui/toast";
+import { Navbar } from "@/components/Navbar";
+
+export const [Toaster, toast] = createToaster({
+  placement: "top-end",
+  render(toast) {
+    return (
+      <Toast.Root>
+        <Toast.Title>{toast.title}</Toast.Title>
+        <Toast.Description>{toast.description}</Toast.Description>
+        <Toast.CloseTrigger asChild>
+          <IconButton size="sm" variant="link">
+            <XIcon />
+          </IconButton>
+        </Toast.CloseTrigger>
+      </Toast.Root>
     );
-  };
-
-  const defineColor = (scale: number, color: string) => {
-    const index = scales.indexOf(scale);
-    definedColors[index] = color;
-    defineColors(definedColors);
-    updateColors(definedColors);
-  };
-
-  const addCustomScale = (scale: number) => {
-    if (scales.includes(scale)) {
-      return;
-    }
-
-    customScaleValues.push(scale);
-    const newScale = sortNumbers(defaultScales.concat(customScaleValues));
-
-    const index = newScale.indexOf(scale);
-    const newDefinedColors = [
-      ...definedColors.slice(0, index),
-      "",
-      ...definedColors.slice(index),
-    ];
-
-    setCustomScaleValues(customScaleValues);
-    defineColors(newDefinedColors);
-    updateColors(newDefinedColors, newScale);
-  };
-
-  const removeCustomScale = (scale: number) => {
-    if (!scales.includes(scale)) {
-      return;
-    }
-
-    const customScaleIndex = customScaleValues.indexOf(scale);
-    const scaleIndex = scales.indexOf(scale);
-    customScaleValues.splice(customScaleIndex, 1);
-    definedColors.splice(scaleIndex, 1);
-
-    setCustomScaleValues(customScaleValues);
-    defineColors(definedColors);
-
-    const newScale = sortNumbers(defaultScales.concat(customScaleValues));
-    updateColors(definedColors, newScale);
-  };
-
-  React.useEffect(() => {
-    updateColors();
-  }, [selectedFunction]);
+  },
+});
 
+export const App = () => {
   return (
-    <div className="App">
-      <Flex py="4">
-        <Container>
-          <VStack w="full" alignItems="flex-start">
-            <HStack w="full">
-              <Text minW="200px">Distribution function:</Text>
-              <Select
-                value={selectedFunction}
-                onChange={(e) => selectFunction(e.target.value)}
-              >
-                {distributionFunctionTypes.map((type) => (
-                  <option key={type} value={type}>
-                    {type}
-                  </option>
-                ))}
-              </Select>
-            </HStack>
-          </VStack>
-        </Container>
-      </Flex>
-
-      <Container>
-        <VStack spacing={4} p="4">
-          {scales.map((scale, i) => {
-            if (i === 0 || i === scales.length - 1) return null;
-
-            const isCustom = customScaleValues.includes(scale);
-            const isDefined = Boolean(definedColors[i]);
-
-            return (
-              <Flex
-                key={scale}
-                alignItems="center"
-                bg={isDefined ? "gray.100" : undefined}
-              >
-                <ClearButton
-                  label="Clear custom scale value"
-                  onClick={() => removeCustomScale(scale)}
-                  disabled={!isCustom}
-                />
-
-                {/* <Text
-                  w="80px"
-                  textAlign="center"
-                  textDecoration={isCustom ? "underline" : undefined}
-                  fontWeight={isDefined ? "bold" : "normal"}
-                >
-                  {scale}
-                </Text> */}
-
-                {/* <Text>{colors[i]}</Text> */}
-
-                {/* <Input
-                  type="text"
-                  w="160px"
-                  value={colors[i]}
-                  fontWeight={isDefined ? "bold" : "normal"}
-                  onChange={(e) => {
-                    const { value } = e.target;
-                    if (value.length === 7 && value.startsWith("#")) {
-                      defineColor(scale, e.target.value);
-                    }
-                  }}
-                /> */}
-                <Color
-                  name={scale.toString()}
-                  value={colors[i]}
-                  onChange={(value) => {
-                    defineColor(scale, rgbaToHex(value));
-                  }}
-                />
-
-                {/* <Input
-                  type="color"
-                  border="none"
-                  shadow="md"
-                  p="0"
-                  h="50px"
-                  value={colors[i]}
-                  onChange={(e) => {
-                    console.log(e.target.value);
-                    defineColor(scale, e.target.value);
-                  }}
-                /> */}
-
-                <LockButton
-                  label="Clear defined color"
-                  onClick={() => defineColor(scale, "")}
-                  disabled={!isDefined}
-                />
-              </Flex>
-            );
-          })}
-
-          <CustomScaleInput
-            {...{ addCustomScale, customScaleValue, setCustomScaleValue }}
-          />
-
-          <OutputColorsJson {...{ colors, scales }} />
-        </VStack>
+    <>
+      <Navbar />
+      <Container py={10} maxW="lg">
+        <Distribution />
+        <Palette />
+        <CustomScaleInput />
+        <OutputColorsJson />
       </Container>
-    </div>
+      <Toaster />
+    </>
   );
 };

src/components/ClearButton.tsx

@@ -1,21 +1,21 @@
 import { FC, MouseEventHandler } from "react";
-import { CloseIcon } from "@chakra-ui/icons";
-import { IconButton } from "@chakra-ui/button";
+import { IconButton } from "./ui/icon-button";
+import { XIcon } from "lucide-react";
 
 interface IClearButton {
   label: string;
   onClick: MouseEventHandler<HTMLButtonElement>;
   disabled: boolean;
 }
 
-export const ClearButton: FC<React.PropsWithChildren<IClearButton>> = ({ label, onClick, disabled,  }) => {
+export const ClearButton: FC<React.PropsWithChildren<IClearButton>> = ({
+  label,
+  onClick,
+  disabled,
+}) => {
   return (
-    <IconButton
-      aria-label={label}
-      icon={<CloseIcon />}
-      variant="unstyled"
-      onClick={onClick}
-      disabled={disabled}
-    />
+    <IconButton aria-label={label} onClick={onClick} disabled={disabled}>
+      <XIcon />
+    </IconButton>
   );
 };

src/components/CustomScaleInput.tsx

@@ -1,49 +1,47 @@
-import { FC } from "react";
-import { Flex, HStack, Text } from "@chakra-ui/react";
-import { Button } from "@chakra-ui/button";
-import {
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-} from "@chakra-ui/number-input";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import * as NumberInput from "@/components/ui/number-input";
+import { atom, useAtom } from "jotai";
+import { Button } from "./ui/button";
+import { scalesAtom } from "./Palette";
 
-interface ICustomScaleInput {
-  customScaleValue: number;
-  setCustomScaleValue: Function;
-  addCustomScale: Function;
-}
+export const customScaleValueAtom = atom<number>(550);
+
+export const CustomScaleInput = () => {
+  const [scales, setScales] = useAtom(scalesAtom);
+  const [customScaleValue, setCustomScaleValue] = useAtom(customScaleValueAtom);
 
-export const CustomScaleInput: FC<React.PropsWithChildren<ICustomScaleInput>> = ({
-  customScaleValue,
-  setCustomScaleValue,
-  addCustomScale,
-}) => {
   return (
-    <Flex justifyContent="center" p="4">
-      <HStack>
-        <Text>Add new scale value:</Text>
-        <NumberInput
-          w="100px"
-          min={10}
-          max={990}
-          value={customScaleValue}
-          onChange={(valueString) => setCustomScaleValue(parseInt(valueString))}
-        >
-          <NumberInputField />
-          <NumberInputStepper>
-            <NumberIncrementStepper />
-            <NumberDecrementStepper />
-          </NumberInputStepper>
-        </NumberInput>
-        <Button
-          variant="outline"
-          onClick={() => addCustomScale(customScaleValue)}
-        >
-          Add
-        </Button>
-      </HStack>
-    </Flex>
+    <NumberInput.Root
+      min={10}
+      max={990}
+      value={customScaleValue.toString()}
+      onValueChange={(e) => setCustomScaleValue(e.valueAsNumber)}
+      width="2xs"
+    >
+      <NumberInput.Label>Add new scale value</NumberInput.Label>
+      <NumberInput.Control>
+        <NumberInput.Input />
+        <NumberInput.IncrementTrigger>
+          <ChevronUpIcon />
+        </NumberInput.IncrementTrigger>
+        <NumberInput.DecrementTrigger>
+          <ChevronDownIcon />
+        </NumberInput.DecrementTrigger>
+      </NumberInput.Control>
+      <Button
+        variant="outline"
+        onClick={() => {
+          if (scales.includes(customScaleValue)) {
+            return;
+          }
+
+          const newScale = [...scales, customScaleValue].sort();
+
+          setScales(newScale);
+        }}
+      >
+        Add
+      </Button>
+    </NumberInput.Root>
   );
 };