@m5kdev/web-ui 0.1.4 → 0.2.0

package/src/components/FileDropzone.tsx

@@ -1,120 +0,0 @@
-import { File, Upload, X } from "lucide-react";
-import { useCallback, useState } from "react";
-import { useDropzone } from "react-dropzone";
-import { Button } from "#components/ui/button";
-import { Progress } from "#components/ui/progress";
-import { cn } from "#utils";
-
-interface FileDropzoneProps {
-  onUploadComplete?: (filePath: string) => void;
-  className?: string;
-}
-
-export function FileDropzone({ onUploadComplete, className }: FileDropzoneProps) {
-  const [uploadProgress, setUploadProgress] = useState(0);
-  const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [isUploading, setIsUploading] = useState(false);
-
-  const onDrop = useCallback((acceptedFiles: File[]) => {
-    if (acceptedFiles.length > 0) {
-      setSelectedFile(acceptedFiles[0]);
-    }
-  }, []);
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop,
-    accept: {
-      "image/jpeg": [],
-      "image/png": [],
-      "image/webp": [],
-      "image/jpg": [],
-    },
-    maxFiles: 1,
-  });
-
-  const uploadFile = async () => {
-    if (!selectedFile) return;
-
-    setIsUploading(true);
-    setUploadProgress(0);
-
-    const formData = new FormData();
-    formData.append("file", selectedFile);
-
-    try {
-      const response = await fetch("/api/upload/image", {
-        method: "POST",
-        body: formData,
-        // Note: Content-Type is automatically set for FormData
-      });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const data = await response.json();
-      onUploadComplete?.(data.filePath);
-      setSelectedFile(null);
-      setUploadProgress(0);
-    } catch (error) {
-      console.error("Upload error:", error);
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const removeFile = () => {
-    setSelectedFile(null);
-    setUploadProgress(0);
-  };
-
-  return (
-    <div className={cn("w-full max-w-xl", className)}>
-      <div
-        {...getRootProps()}
-        className={cn(
-          "border-2 border-dashed rounded-lg p-6 cursor-pointer transition-colors",
-          isDragActive ? "border-primary bg-primary/5" : "border-gray-300 hover:border-primary",
-          selectedFile && "border-primary"
-        )}
-      >
-        <input {...getInputProps()} />
-        <div className="flex flex-col items-center justify-center space-y-2 text-center">
-          {selectedFile ? (
-            <>
-              <File className="h-8 w-8 text-primary" />
-              <div className="flex items-center gap-2">
-                <span className="text-sm text-gray-600">{selectedFile.name}</span>
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    removeFile();
-                  }}
-                  className="p-1 hover:bg-gray-100 rounded-full"
-                >
-                  <X className="h-4 w-4 text-gray-500" />
-                </button>
-              </div>
-            </>
-          ) : (
-            <>
-              <Upload className="h-8 w-8 text-gray-400" />
-              <p className="text-sm text-gray-600">Drag & drop an image here, or click to select</p>
-              <p className="text-xs text-gray-500">Supports JPG, PNG, and WebP</p>
-            </>
-          )}
-        </div>
-      </div>
-
-      {selectedFile && (
-        <div className="mt-4 space-y-4">
-          {isUploading && <Progress value={uploadProgress} className="h-2 w-full" />}
-          <Button onClick={uploadFile} disabled={isUploading} className="w-full">
-            {isUploading ? "Uploading..." : "Upload File"}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/MultiSelectDropdown.tsx

@@ -1,233 +0,0 @@
-import { ChevronDown, RotateCcw } from "lucide-react";
-import * as React from "react";
-
-import { Button } from "#components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "#components/ui/dropdown-menu";
-import { cn } from "#utils";
-
-interface MultiSelectOption {
-  label: string;
-  icon?: React.ReactNode;
-  value: string;
-  group?: string;
-}
-
-interface MultiSelectDropdownProps {
-  options: MultiSelectOption[];
-  selectedValues: string[];
-  onValueChange: (selectedValues: string[]) => void;
-  placeholder?: React.ReactNode;
-  label?: string;
-  className?: string;
-  triggerClassName?: string;
-  disabled?: boolean;
-  maxDisplayCount?: number;
-  multiSelectLabel?: string;
-  trigger?: React.ReactNode;
-  resetButton?: "bottom" | "top";
-  resetLabel?: React.ReactNode;
-  separateGroups?: boolean;
-}
-
-const MultiSelectDropdown = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuTrigger>,
-  MultiSelectDropdownProps
->(
-  (
-    {
-      options,
-      selectedValues,
-      onValueChange,
-      placeholder = "Select items...",
-      label,
-      className,
-      triggerClassName,
-      trigger,
-      multiSelectLabel,
-      disabled = false,
-      maxDisplayCount = 3,
-      resetButton = "bottom",
-      resetLabel = "Reset",
-      separateGroups = false,
-      ...props
-    },
-    ref
-  ) => {
-    const handleValueChange = (value: string, checked: boolean) => {
-      if (checked) {
-        onValueChange([...selectedValues, value]);
-      } else {
-        onValueChange(selectedValues.filter((v) => v !== value));
-      }
-    };
-
-    const handleReset = () => {
-      onValueChange([]);
-    };
-
-    const getDisplayText = () => {
-      if (selectedValues.length === 0) {
-        return placeholder;
-      }
-
-      const selectedLabels = options
-        .filter((option) => selectedValues.includes(option.value))
-        .map((option) => option.label);
-
-      if (multiSelectLabel && selectedLabels.length > 1) {
-        return multiSelectLabel;
-      }
-
-      if (selectedLabels.length <= maxDisplayCount) {
-        return selectedLabels.join(", ");
-      }
-
-      return `${selectedLabels.slice(0, maxDisplayCount).join(", ")} (+${
-        selectedLabels.length - maxDisplayCount
-      } more)`;
-    };
-
-    const groupedOptions = React.useMemo(() => {
-      const groups: Record<string, MultiSelectOption[]> = {};
-      const ungrouped: MultiSelectOption[] = [];
-
-      options.forEach((option) => {
-        if (option.group) {
-          if (!groups[option.group]) {
-            groups[option.group] = [];
-          }
-          groups[option.group].push(option);
-        } else {
-          ungrouped.push(option);
-        }
-      });
-
-      return { groups, ungrouped };
-    }, [options]);
-
-    return (
-      <div className={cn("w-full", className)}>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              ref={ref}
-              variant="outline"
-              className={cn(
-                "w-full justify-between text-left font-normal",
-                selectedValues.length === 0 && "text-muted-foreground",
-                triggerClassName
-              )}
-              disabled={disabled}
-              {...props}
-            >
-              {trigger || (
-                <>
-                  <span className="truncate">{getDisplayText()}</span>
-                  <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                </>
-              )}
-            </Button>
-          </DropdownMenuTrigger>
-
-          <DropdownMenuContent
-            className="w-full min-w-[var(--radix-dropdown-menu-trigger-width)]"
-            align="start"
-          >
-            {resetButton && resetButton === "top" && (
-              <>
-                <DropdownMenuItem
-                  onClick={handleReset}
-                  disabled={selectedValues.length === 0}
-                  onSelect={(event) => event.preventDefault()}
-                  className="cursor-pointer text-muted-foreground hover:text-foreground"
-                >
-                  {resetLabel || (
-                    <>
-                      <RotateCcw className="mr-2 h-4 w-4" />
-                      Reset
-                    </>
-                  )}
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-              </>
-            )}
-            {label && (
-              <>
-                <DropdownMenuLabel>{label}</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-              </>
-            )}
-            {Object.entries(groupedOptions.groups).map(([groupName, groupOptions], groupIndex) => (
-              <DropdownMenuGroup key={groupName}>
-                {groupIndex > 0 && separateGroups && <DropdownMenuSeparator />}
-                <DropdownMenuLabel className="text-xs font-semibold text-muted-foreground px-2 py-1.5">
-                  {groupName}
-                </DropdownMenuLabel>
-                {groupOptions.map((option) => (
-                  <DropdownMenuCheckboxItem
-                    key={option.value}
-                    checked={selectedValues.includes(option.value)}
-                    onCheckedChange={(checked) => handleValueChange(option.value, checked)}
-                    onSelect={(event) => event.preventDefault()}
-                    className="cursor-pointer"
-                  >
-                    {option.icon && <span className="mr-2">{option.icon}</span>}
-                    {option.label}
-                  </DropdownMenuCheckboxItem>
-                ))}
-              </DropdownMenuGroup>
-            ))}
-            {groupedOptions.ungrouped.length > 0 && (
-              <DropdownMenuGroup>
-                {Object.keys(groupedOptions.groups).length > 0 && <DropdownMenuSeparator />}
-                {groupedOptions.ungrouped.map((option) => (
-                  <DropdownMenuCheckboxItem
-                    key={option.value}
-                    checked={selectedValues.includes(option.value)}
-                    onCheckedChange={(checked) => handleValueChange(option.value, checked)}
-                    onSelect={(event) => event.preventDefault()}
-                    className="cursor-pointer"
-                  >
-                    {option.label}
-                  </DropdownMenuCheckboxItem>
-                ))}
-              </DropdownMenuGroup>
-            )}
-            {resetButton && resetButton === "bottom" && (
-              <>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  onClick={handleReset}
-                  disabled={selectedValues.length === 0}
-                  onSelect={(event) => event.preventDefault()}
-                  className="cursor-pointer text-muted-foreground hover:text-foreground"
-                >
-                  {resetLabel || (
-                    <>
-                      <RotateCcw className="mr-2 h-4 w-4" />
-                      Reset
-                    </>
-                  )}
-                </DropdownMenuItem>
-              </>
-            )}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    );
-  }
-);
-
-MultiSelectDropdown.displayName = "MultiSelectDropdown";
-
-export { MultiSelectDropdown };
-export type { MultiSelectOption, MultiSelectDropdownProps };

package/src/components/Orb.tsx

@@ -1,288 +0,0 @@
-import { Mesh, Program, Renderer, Triangle, Vec3 } from "ogl";
-import { useEffect, useRef } from "react";
-
-export default function Orb({
-  hue = 0,
-  hoverIntensity = 0.2,
-  rotateOnHover = true,
-  forceHoverState = false,
-}) {
-  const ctnDom = useRef(null);
-
-  const vert = /* glsl */ `
-    precision highp float;
-    attribute vec2 position;
-    attribute vec2 uv;
-    varying vec2 vUv;
-    void main() {
-      vUv = uv;
-      gl_Position = vec4(position, 0.0, 1.0);
-    }
-  `;
-
-  const frag = /* glsl */ `
-    precision highp float;
-
-    uniform float iTime;
-    uniform vec3 iResolution;
-    uniform float hue;
-    uniform float hover;
-    uniform float rot;
-    uniform float hoverIntensity;
-    varying vec2 vUv;
-
-    vec3 rgb2yiq(vec3 c) {
-      float y = dot(c, vec3(0.299, 0.587, 0.114));
-      float i = dot(c, vec3(0.596, -0.274, -0.322));
-      float q = dot(c, vec3(0.211, -0.523, 0.312));
-      return vec3(y, i, q);
-    }
-    
-    vec3 yiq2rgb(vec3 c) {
-      float r = c.x + 0.956 * c.y + 0.621 * c.z;
-      float g = c.x - 0.272 * c.y - 0.647 * c.z;
-      float b = c.x - 1.106 * c.y + 1.703 * c.z;
-      return vec3(r, g, b);
-    }
-    
-    vec3 adjustHue(vec3 color, float hueDeg) {
-      float hueRad = hueDeg * 3.14159265 / 180.0;
-      vec3 yiq = rgb2yiq(color);
-      float cosA = cos(hueRad);
-      float sinA = sin(hueRad);
-      float i = yiq.y * cosA - yiq.z * sinA;
-      float q = yiq.y * sinA + yiq.z * cosA;
-      yiq.y = i;
-      yiq.z = q;
-      return yiq2rgb(yiq);
-    }
-
-    vec3 hash33(vec3 p3) {
-      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
-      p3 += dot(p3, p3.yxz + 19.19);
-      return -1.0 + 2.0 * fract(vec3(
-        p3.x + p3.y,
-        p3.x + p3.z,
-        p3.y + p3.z
-      ) * p3.zyx);
-    }
-
-    float snoise3(vec3 p) {
-      const float K1 = 0.333333333;
-      const float K2 = 0.166666667;
-      vec3 i = floor(p + (p.x + p.y + p.z) * K1);
-      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
-      vec3 e = step(vec3(0.0), d0 - d0.yzx);
-      vec3 i1 = e * (1.0 - e.zxy);
-      vec3 i2 = 1.0 - e.zxy * (1.0 - e);
-      vec3 d1 = d0 - (i1 - K2);
-      vec3 d2 = d0 - (i2 - K1);
-      vec3 d3 = d0 - 0.5;
-      vec4 h = max(0.6 - vec4(
-        dot(d0, d0),
-        dot(d1, d1),
-        dot(d2, d2),
-        dot(d3, d3)
-      ), 0.0);
-      vec4 n = h * h * h * h * vec4(
-        dot(d0, hash33(i)),
-        dot(d1, hash33(i + i1)),
-        dot(d2, hash33(i + i2)),
-        dot(d3, hash33(i + 1.0))
-      );
-      return dot(vec4(31.316), n);
-    }
-
-    vec4 extractAlpha(vec3 colorIn) {
-      float a = max(max(colorIn.r, colorIn.g), colorIn.b);
-      return vec4(colorIn.rgb / (a + 1e-5), a);
-    }
-
-    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
-    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
-    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
-    const float innerRadius = 0.6;
-    const float noiseScale = 0.65;
-
-    float light1(float intensity, float attenuation, float dist) {
-      return intensity / (1.0 + dist * attenuation);
-    }
-    float light2(float intensity, float attenuation, float dist) {
-      return intensity / (1.0 + dist * dist * attenuation);
-    }
-
-    vec4 draw(vec2 uv) {
-      vec3 color1 = adjustHue(baseColor1, hue);
-      vec3 color2 = adjustHue(baseColor2, hue);
-      vec3 color3 = adjustHue(baseColor3, hue);
-      
-      float ang = atan(uv.y, uv.x);
-      float len = length(uv);
-      float invLen = len > 0.0 ? 1.0 / len : 0.0;
-      
-      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
-      float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
-      float d0 = distance(uv, (r0 * invLen) * uv);
-      float v0 = light1(1.0, 10.0, d0);
-      v0 *= smoothstep(r0 * 1.05, r0, len);
-      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
-      
-      float a = iTime * -1.0;
-      vec2 pos = vec2(cos(a), sin(a)) * r0;
-      float d = distance(uv, pos);
-      float v1 = light2(1.5, 5.0, d);
-      v1 *= light1(1.0, 50.0, d0);
-      
-      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
-      float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
-      
-      vec3 col = mix(color1, color2, cl);
-      col = mix(color3, col, v0);
-      col = (col + v1) * v2 * v3;
-      col = clamp(col, 0.0, 1.0);
-      
-      return extractAlpha(col);
-    }
-
-    vec4 mainImage(vec2 fragCoord) {
-      vec2 center = iResolution.xy * 0.5;
-      float size = min(iResolution.x, iResolution.y);
-      vec2 uv = (fragCoord - center) / size * 2.0;
-      
-      float angle = rot;
-      float s = sin(angle);
-      float c = cos(angle);
-      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
-      
-      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
-      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
-      
-      return draw(uv);
-    }
-
-    void main() {
-      vec2 fragCoord = vUv * iResolution.xy;
-      vec4 col = mainImage(fragCoord);
-      gl_FragColor = vec4(col.rgb * col.a, col.a);
-    }
-  `;
-
-  useEffect(() => {
-    const container = ctnDom.current as HTMLElement | null;
-    if (!container) return;
-
-    const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });
-    const gl = renderer.gl;
-    gl.clearColor(0, 0, 0, 0);
-    container.appendChild(gl.canvas);
-
-    const geometry = new Triangle(gl);
-    const program = new Program(gl, {
-      vertex: vert,
-      fragment: frag,
-      uniforms: {
-        iTime: { value: 0 },
-        iResolution: {
-          value: new Vec3(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height),
-        },
-        hue: { value: hue },
-        hover: { value: 0 },
-        rot: { value: 0 },
-        hoverIntensity: { value: hoverIntensity },
-      },
-    });
-
-    const mesh = new Mesh(gl, { geometry, program });
-
-    function resize() {
-      if (!container) return;
-      const dpr = window.devicePixelRatio || 1;
-      const width = container.clientWidth;
-      const height = container.clientHeight;
-      renderer.setSize(width * dpr, height * dpr);
-      gl.canvas.style.width = width + "px";
-      gl.canvas.style.height = height + "px";
-      program.uniforms.iResolution.value.set(
-        gl.canvas.width,
-        gl.canvas.height,
-        gl.canvas.width / gl.canvas.height
-      );
-    }
-    window.addEventListener("resize", resize);
-    resize();
-
-    let targetHover = 0;
-    let lastTime = 0;
-    let currentRot = 0;
-    const rotationSpeed = 0.3;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const rect = container.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      const y = e.clientY - rect.top;
-      const width = rect.width;
-      const height = rect.height;
-      const size = Math.min(width, height);
-      const centerX = width / 2;
-      const centerY = height / 2;
-      const uvX = ((x - centerX) / size) * 2.0;
-      const uvY = ((y - centerY) / size) * 2.0;
-
-      if (Math.sqrt(uvX * uvX + uvY * uvY) < 0.8) {
-        targetHover = 1;
-      } else {
-        targetHover = 0;
-      }
-    };
-
-    const handleMouseLeave = () => {
-      targetHover = 0;
-    };
-
-    container.addEventListener("mousemove", handleMouseMove);
-    container.addEventListener("mouseleave", handleMouseLeave);
-
-    let rafId: number;
-    const update = (t: number) => {
-      rafId = requestAnimationFrame(update);
-      const dt = (t - lastTime) * 0.001;
-      lastTime = t;
-      program.uniforms.iTime.value = t * 0.001;
-      program.uniforms.hue.value = hue;
-      program.uniforms.hoverIntensity.value = hoverIntensity;
-
-      const effectiveHover = forceHoverState ? 1 : targetHover;
-      program.uniforms.hover.value += (effectiveHover - program.uniforms.hover.value) * 0.1;
-
-      if (rotateOnHover && effectiveHover > 0.5) {
-        currentRot += dt * rotationSpeed;
-      }
-      program.uniforms.rot.value = currentRot;
-
-      renderer.render({ scene: mesh });
-    };
-    rafId = requestAnimationFrame(update);
-
-    return () => {
-      cancelAnimationFrame(rafId);
-      window.removeEventListener("resize", resize);
-      container.removeEventListener("mousemove", handleMouseMove);
-      container.removeEventListener("mouseleave", handleMouseLeave);
-      container.removeChild(gl.canvas);
-      gl.getExtension("WEBGL_lose_context")?.loseContext();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hue, hoverIntensity, rotateOnHover, forceHoverState]);
-
-  return (
-    <div
-      ref={ctnDom}
-      style={{
-        position: "relative",
-        zIndex: 0,
-        width: "100%",
-        height: "100%",
-      }}
-    />
-  );
-}