create-weave-frontend-app 0.1.0

package/template/+nextjs+azure-web-pubsub/components/ui/color-picker/color-picker-component.tsx

@@ -0,0 +1,69 @@
+import Color, { ColorInstance } from "color";
+import { HTMLAttributes, useEffect, useRef, useState } from "react";
+import { ColorPickerContext } from "./context/color-picker-context";
+import { cn } from "@/lib/utils";
+
+export type ColorPickerProps = HTMLAttributes<HTMLDivElement> & {
+  /** The current color value in #RRGGBBAA format */
+  value?: string;
+  /** The default color value in #RRGGBBAA format */
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+};
+
+/**
+ * ColorPicker component
+ * A comprehensive color picker that supports various color formats
+ */
+export const ColorPicker = ({
+  value,
+  onChange,
+  className,
+  ...props
+}: ColorPickerProps) => {
+  const initialColor = Color(value);
+
+  const [color, setColor] = useState<ColorInstance>(initialColor);
+  const [mode, setMode] = useState("hex");
+
+  const lastValue = useRef(Color(initialColor).hexa());
+
+  useEffect(() => {
+    if (Color(value).hexa() !== lastValue.current) {
+      const externalColor = Color(value);
+      setColor(externalColor);
+      lastValue.current = externalColor.hexa();
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (onChange) {
+      const newColor = Color(color);
+      if (lastValue.current !== newColor.hexa()) {
+        onChange(newColor.hexa());
+        lastValue.current = newColor.hexa();
+      }
+    }
+  }, [color, onChange]);
+
+  return (
+    <ColorPickerContext.Provider
+      value={{
+        color,
+        mode,
+        setColor,
+        setMode,
+        isUpdating: false,
+      }}
+    >
+      <div
+        className={cn(
+          "grid w-full gap-4 rounded-none transition-opacity duration-150",
+          className
+        )}
+        {...props}
+      />
+    </ColorPickerContext.Provider>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/ui/color-picker/context/color-picker-context.tsx

@@ -0,0 +1,28 @@
+import { ColorInstance } from "color";
+import { createContext, useContext } from "react";
+
+interface ColorPickerContextValue {
+  mode: string;
+  setColor: (color: ColorInstance) => void;
+  setMode: (mode: string) => void;
+  color: ColorInstance;
+  isUpdating: boolean;
+}
+
+export const ColorPickerContext = createContext<ColorPickerContextValue | undefined>(
+  undefined
+);
+
+/**
+ * Hook to access the ColorPicker context
+ * Must be used within a ColorPicker component
+ */
+export const useColorPicker = () => {
+  const context = useContext(ColorPickerContext);
+
+  if (!context) {
+    throw new Error("useColorPicker must be used within a ColorPickerProvider");
+  }
+
+  return context;
+};

package/template/+nextjs+azure-web-pubsub/components/ui/color-picker/editor/color-picker-format-editor.tsx

@@ -0,0 +1,34 @@
+import { HTMLAttributes, useMemo } from "react";
+import { ColorPickerHexaInput } from "../text-inputs/color-picker-hexa";
+import { useColorPicker } from "../context/color-picker-context";
+import { ColorPickerRGBAInput } from "../text-inputs/color-picker-rgba";
+
+export type ColorPickerFormatEditorProps = HTMLAttributes<HTMLDivElement>;
+
+
+/**
+ * ColorPickerFormatEditor component
+ * Displays and allows editing of the color value in the selected format
+ */
+export const ColorPickerFormatEditor = ({
+    className,
+    ...props
+  }: ColorPickerFormatEditorProps) => {
+    const { mode } = useColorPicker();
+    const component = useMemo(() => {
+      let component;
+      switch (mode) {
+        case "hex":
+          component = <ColorPickerHexaInput {...props} className={className} />;
+          break;
+        case "rgba":
+          component = <ColorPickerRGBAInput {...props} className={className} />;
+          break;
+        default:
+          component = <ColorPickerHexaInput {...props} className={className} />;
+      }
+      return component;
+    }, [className, mode, props]);
+  
+    return <>{component}</>;
+  };

package/template/+nextjs+azure-web-pubsub/components/ui/color-picker/index.ts

@@ -0,0 +1,7 @@
+export * from "./color-picker-component";
+export * from "./selector/color-picker-alpha";
+export * from "./selector/color-picker-hue";
+export * from "./selector/color-picker-saturation";
+export * from "./selector/color-picker-eyedropper";
+export * from "./editor/color-picker-format-editor";
+export * from "./selector/color-picker-format-selector";

package/template/+nextjs+azure-web-pubsub/components/ui/color-picker/selector/color-picker-alpha.tsx

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { cn } from "@/lib/utils";
+import { Range, Root, Thumb, Track } from "@radix-ui/react-slider";
+import {
+  type HTMLAttributes,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useColorPicker } from "../context/color-picker-context";
+
+export type ColorPickerAlphaProps = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * ColorPickerAlpha component
+ * A slider for selecting the alpha (transparency) value
+ */
+export const ColorPickerAlpha = ({
+  className,
+  dir,
+  defaultValue,
+  ...props
+}: ColorPickerAlphaProps) => {
+  const { color, setColor } = useColorPicker();
+  const [actualValue, setActualValue] = useState<number>(color.alpha() * 100);
+
+  useEffect(() => {
+    setActualValue(color.alpha() * 100);
+  }, [color]);
+
+  const solidColor = useMemo(() => color.alpha(1).rgb().string(), [color]);
+
+  const lastAlpha = useRef(color.alpha() * 100);
+
+  const onValueChange = useCallback(
+    ([newAlpha]: number[]) => {
+      if (newAlpha !== lastAlpha.current) {
+        const newColor = color.alpha(newAlpha / 100);
+        setColor(newColor);
+        lastAlpha.current = newAlpha;
+      }
+    },
+    [color, setColor]
+  );
+
+  return (
+    <Root
+      value={[actualValue]}
+      max={100}
+      step={1}
+      className={cn(
+        "relative flex h-5 w-full touch-none items-center transition-opacity duration-200",
+        className
+      )}
+      onValueChange={onValueChange}
+      aria-label="Opacity"
+      {...props}
+    >
+      <Track
+        className="relative my-0.5 h-3 w-full grow overflow-hidden rounded-full"
+        style={{
+          background:
+            'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center',
+        }}
+      >
+        <div
+          className="absolute inset-0 rounded-full transition-all duration-200"
+          style={{
+            background: `linear-gradient(90deg, transparent, ${solidColor})`,
+          }}
+        />
+        <Range className="absolute h-full rounded-full bg-transparent" />
+      </Track>
+      <Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:h-5 hover:w-5" />
+    </Root>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/ui/color-picker/selector/color-picker-eyedropper.tsx

@@ -0,0 +1,95 @@
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import Color from "color";
+import { PipetteIcon } from "lucide-react";
+import {
+  type ComponentProps,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { useColorPicker } from "../context/color-picker-context";
+
+export type ColorPickerEyeDropperProps = ComponentProps<typeof Button>;
+
+/**
+ * ColorPickerEyeDropper component
+ * A button that activates the browser's eyedropper tool
+ */
+export const ColorPickerEyeDropper = ({
+  className,
+  ...props
+}: ColorPickerEyeDropperProps) => {
+  const { setColor } = useColorPicker();
+  const [isActive, setIsActive] = useState(false);
+  const [isSupported, setIsSupported] = useState(true);
+
+  useEffect(() => {
+    // @ts-expect-error - EyeDropper API is experimental
+    setIsSupported(typeof EyeDropper !== "undefined");
+  }, []);
+
+  const handleEyeDropper = useCallback(async () => {
+    if (!isSupported) {
+      console.warn("EyeDropper API is not supported in this browser");
+      return;
+    }
+
+    try {
+      setIsActive(true);
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // @ts-expect-error - EyeDropper API is experimental
+      const eyeDropper = new EyeDropper();
+      const result = await eyeDropper.open();
+
+      const color = Color(result.sRGBHex);
+
+      const [h, s, l] = color.hsl().array();
+
+      const newColor = Color.hsl(h, s, l).alpha(100);
+
+      setTimeout(() => {
+        setColor(newColor);
+      }, 50);
+    } catch (error) {
+      if (error instanceof Error && !error.message.includes("aborted")) {
+        console.error("EyeDropper failed:", error);
+      }
+    } finally {
+      setTimeout(() => setIsActive(false), 100);
+    }
+  }, [isSupported, setColor]);
+
+  if (!isSupported) {
+    return null; // Don't render if not supported
+  }
+
+  return (
+    <div className="relative">
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={handleEyeDropper}
+        disabled={isActive}
+        title="Pick color from screen"
+        aria-label="Pick color from screen"
+        className={cn(
+          "rounded-none shrink-0 text-muted-foreground",
+          isActive && "opacity-50 cursor-not-allowed",
+          className
+        )}
+        {...props}
+      >
+        <PipetteIcon size={16} />
+      </Button>
+      {isActive && (
+        <div
+          className="fixed inset-0 z-50 bg-transparent cursor-crosshair"
+          aria-hidden="true"
+        />
+      )}
+    </div>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/ui/color-picker/selector/color-picker-format-selector.tsx

@@ -0,0 +1,50 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import {
+  type ComponentProps,
+} from "react";
+import { useColorPicker } from "../context/color-picker-context";
+
+export type ColorPickerFormatSelectorProps = ComponentProps<typeof SelectTrigger>;
+
+const formats = ["hex", "rgba"];
+
+/**
+ * ColorPickerFormatSelector component
+ * A dropdown for selecting the color format
+ */
+export const ColorPickerFormatSelector = ({
+  className,
+  ...props
+}: ColorPickerFormatSelectorProps) => {
+  const { mode, setMode } = useColorPicker();
+
+  return (
+    <Select value={mode} onValueChange={setMode}>
+      <SelectTrigger
+        className={cn(
+          "h-8 !text-xs rounded-none font-normal text-gray-700",
+          className
+        )}
+        data-size="sm"
+        aria-label="Color format"
+        {...props}
+      >
+        <SelectValue placeholder="Format" />
+      </SelectTrigger>
+      <SelectContent>
+        {formats.map((format) => (
+          <SelectItem key={format} value={format} className="!text-xs font-normal text-gray-700">
+            {format.toUpperCase()}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/ui/color-picker/selector/color-picker-hue.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Range, Root, Thumb, Track } from "@radix-ui/react-slider";
+import {
+  type HTMLAttributes,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
+import { useColorPicker } from "../context/color-picker-context";
+
+
+export type ColorPickerHueProps = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * ColorPickerHue component
+ * A slider for selecting the hue value
+ */
+export const ColorPickerHue = ({
+  className,
+  dir,
+  ...props
+}: ColorPickerHueProps) => {
+  const { defaultValue, ...restProps } = props;
+  const { color, setColor } = useColorPicker();
+  const [hueValue, setHueValue] = useState(color.hue());
+  const lastHue = useRef(color.hue());
+
+
+  const onValueChange = useCallback(
+    ([hue]: number[]) => {
+      setHueValue(hue);
+    },
+    [setHueValue]
+  );
+
+  const onValueCommit = useCallback(
+    ([hue]: number[]) => {
+      lastHue.current = hue;
+      setColor(color.hue(hue));
+    },
+    [color, setColor]
+  );
+
+  return (
+    <Root
+      value={[hueValue]}
+      max={360}
+      step={1}
+      className={cn(
+        "relative flex h-5 w-full touch-none items-center transition-opacity duration-200",
+        className
+      )}
+      onValueChange={onValueChange}
+      onValueCommit={onValueCommit}
+      aria-label="Hue"
+      {...restProps}
+    >
+      <Track className="relative my-0.5 h-3 w-full grow overflow-hidden rounded-full bg-[linear-gradient(90deg,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF,#FF0000)]">
+        <Range className="absolute h-full" />
+      </Track>
+      <Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:h-5 hover:w-5" />
+    </Root>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/ui/color-picker/selector/color-picker-saturation.tsx

@@ -0,0 +1,145 @@
+import {
+  HTMLAttributes,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useColorPicker } from "../context/color-picker-context";
+import { cn } from "@/lib/utils";
+import Color from "color";
+
+export type ColorPickerSaturationProps = HTMLAttributes<HTMLDivElement>;
+
+export const ColorPickerSaturation = ({
+  className,
+  ...props
+}: ColorPickerSaturationProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const { color, setColor } = useColorPicker();
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const hue = useMemo(() => color.hue(), [color]);
+
+  // Function to render the gradient on the hidden canvas
+  const renderGradient = useCallback(() => {
+    if (canvasRef.current) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext("2d");
+      if (ctx && containerRef.current) {
+        const { width, height } = containerRef.current.getBoundingClientRect();
+        canvas.width = width;
+        canvas.height = height;
+
+        const gradX = ctx.createLinearGradient(0, 0, width, 0);
+        gradX.addColorStop(0.1, "rgb(255,255,255)");
+        gradX.addColorStop(0.9, `hsl(${hue}, 100%, 50%)`);
+        ctx.fillStyle = gradX;
+        ctx.fillRect(0, 0, width, height);
+
+        const gradY = ctx.createLinearGradient(0, 0, 0, height);
+        gradY.addColorStop(0.1, "rgba(0,0,0,0)");
+        gradY.addColorStop(0.9, "rgba(0,0,0,1)");
+        ctx.fillStyle = gradY;
+        ctx.fillRect(0, 0, width, height);
+      }
+    }
+  }, [hue]);
+
+  useEffect(() => {
+    renderGradient();
+  }, [renderGradient]);
+
+  const handlePointerMove = useCallback(
+    (event: PointerEvent) => {
+      if (!isDragging || !containerRef.current || !canvasRef.current) {
+        return;
+      }
+
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = Math.max(
+        0,
+        Math.min(rect.width - 1, event.clientX - rect.left)
+      );
+      const y = Math.max(
+        0,
+        Math.min(rect.height - 1, event.clientY - rect.top)
+      );
+      setPosition({ x: x / rect.width, y: y / rect.height });
+
+      const ctx = canvasRef.current.getContext("2d");
+      if (ctx) {
+        const pixel = ctx.getImageData(x, y, 1, 1).data;
+
+        const [r, g, b] = pixel;
+
+        let newColor = Color.rgb(r, g, b);
+
+        const newHsv = newColor.hsv().object();
+        const oldHsv = color.hsv().object();
+
+        if (newHsv.s === 0) {
+          newHsv.h = oldHsv.h;
+        }
+
+        newColor = Color.hsv(newHsv.h, newHsv.s, newHsv.v).alpha(color.alpha());
+        setColor(newColor);
+      }
+    },
+    [color, isDragging, setColor]
+  );
+
+  useEffect(() => {
+    if (isDragging) {
+      const onPointerUp = () => setIsDragging(false);
+      window.addEventListener("pointermove", handlePointerMove);
+      window.addEventListener("pointerup", onPointerUp);
+      return () => {
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", onPointerUp);
+      };
+    }
+  }, [isDragging, handlePointerMove]);
+
+  useEffect(() => {
+    if (!isDragging && containerRef.current) {
+      const { s, v } = color.hsv().object();
+      const newX = s / 100;
+      const newY = (100 - v) / 100;
+      setPosition({ x: newX, y: newY });
+    }
+  }, [color, isDragging]);
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        className={cn(
+          "relative aspect-[4/3] w-full cursor-crosshair rounded-none",
+          className
+        )}
+        style={{
+          background: `linear-gradient(0deg, rgb(0,0,0), transparent),linear-gradient(90deg, rgb(255,255,255), hsl(${hue},100%,50%))`,
+        }}
+        onPointerDown={(e) => {
+          e.preventDefault();
+          setIsDragging(true);
+          handlePointerMove(e.nativeEvent);
+        }}
+        {...props}
+      >
+        <div
+          className="-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute h-4 w-4 rounded-full border-2 border-white"
+          style={{
+            left: `${position.x * 100}%`,
+            top: `${position.y * 100}%`,
+            boxShadow: "0 0 0 1px rgba(0,0,0,0.5)",
+          }}
+        />
+      </div>
+      <canvas ref={canvasRef} style={{ display: "none" }} />
+    </>
+  );
+};

package/template/+nextjs+azure-web-pubsub/components/ui/color-picker/text-inputs/color-picker-alpha-percentage.tsx

@@ -0,0 +1,60 @@
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import {
+  type ComponentProps,
+  useEffect,
+  useState,
+} from "react";
+import { useColorPicker } from "../context/color-picker-context";
+import Color, { ColorInstance } from "color";
+
+/**
+ * PercentageInput component
+ * An input field for percentage values with validation
+ */
+const PercentageInput = ({
+  className,
+  ...props
+}: ComponentProps<typeof Input>) => {
+  const { color, setColor } = useColorPicker();
+  const [actualValue, setActualValue] = useState<ColorInstance>(color);
+
+  useEffect(() => {
+    setActualValue(color);
+  }, [color]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    try {
+      const newColor = Color(color.alpha(Number(e.target.value) / 100));
+      setColor(newColor);
+    } catch (error) {
+      console.error("Invalid color value", error);
+    }
+  };
+
+  return (
+    <div className="relative">
+      <Input
+        type="number"
+        max={100}
+        min={0}
+        step={1}
+        inputMode="numeric"
+        pattern="[0-9]*"
+        value={Math.round(actualValue.alpha() * 100)}
+        onChange={handleInputChange}
+        aria-label="Opacity percentage"
+        {...props}
+        className={cn(
+          "h-8 w-[4.7rem] rounded-none !text-xs font-normal text-gray-700 text-left focus:outline-none bg-transparent uppercase",
+          className
+        )}
+      />
+      <span className="-translate-y-1/2 absolute -translate-x-5 top-1/2 right-2 text-muted-foreground text-xs pointer-events-none">
+        %
+      </span>
+    </div>
+  );
+};
+
+export default PercentageInput;