feat: add funcionality random color generate

src/components/toolbar/random-btn.tsx

@@ -1,5 +1,29 @@
+"use client";
+
+import { useTransition } from "react";
+import { useSetAtom } from "jotai";
+
 import { Button } from "@/components/primitives/button";
+import { background, foreground } from "@/store";
+import { randomColorGenerate } from "@/lib/random-color-generate";
 
 export function RandomButton() {
-  return <Button size="lg">Random</Button>;
+  const setBg = useSetAtom(background);
+  const setFg = useSetAtom(foreground);
+  const [isPending, startTransition] = useTransition();
+
+  function onClick() {
+    startTransition(() => {
+      const { baseColor, baseColorContrast } = randomColorGenerate();
+
+      setBg(baseColor);
+      setFg(baseColorContrast);
+    });
+  }
+
+  return (
+    <Button disabled={isPending} size="lg" onClick={onClick}>
+      Random
+    </Button>
+  );
 }

src/lib/random-color-generate/index.ts

@@ -0,0 +1 @@
+export * from "./random-color-generate";

src/lib/random-color-generate/random-color-generate.test.ts

@@ -0,0 +1,21 @@
+import { describe, it } from "@jest/globals";
+import chroma from "chroma-js";
+
+import { randomColorGenerate } from "./random-color-generate";
+
+describe("Lib / Random color generate", () => {
+  it("Should return object of colors", () => {
+    const result = randomColorGenerate();
+
+    expect(result).toHaveProperty("baseColor");
+    expect(result).toHaveProperty("baseColorContrast");
+  });
+
+  it("The result should pass WCAG compliance", () => {
+    const { baseColor, baseColorContrast } = randomColorGenerate();
+
+    const ratio = chroma.contrast(baseColor, baseColorContrast);
+
+    expect(ratio).toBeGreaterThanOrEqual(4.5);
+  });
+});

src/lib/random-color-generate/random-color-generate.ts

@@ -0,0 +1,29 @@
+import chroma from "chroma-js";
+
+function generateHexColor() {
+  return chroma.random().hex();
+}
+
+function getContrastColor(hexColor: string, attempts = 0, maxAttempts = 30) {
+  if (attempts >= maxAttempts) {
+    console.warn("Max attempts reached, returning last generated color.");
+
+    return generateHexColor();
+  }
+
+  const generatedHexColor = generateHexColor();
+  const contrastRatio = chroma.contrast(hexColor, generatedHexColor);
+
+  if (contrastRatio >= 4.5) {
+    return generatedHexColor;
+  } else {
+    return getContrastColor(hexColor);
+  }
+}
+
+export function randomColorGenerate() {
+  const baseColor = generateHexColor();
+  const baseColorContrast = getContrastColor(baseColor);
+
+  return { baseColor, baseColorContrast };
+}