@shipfox/react-ui 0.5.0 → 0.7.0

package/src/components/dot-grid/dot-grid.tsx

@@ -0,0 +1,325 @@
+import {gsap} from 'gsap';
+import {InertiaPlugin} from 'gsap/InertiaPlugin';
+import type React from 'react';
+import {useCallback, useEffect, useMemo, useRef} from 'react';
+import {cn} from 'utils';
+
+gsap.registerPlugin(InertiaPlugin);
+
+const HEX_COLOR_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+
+const throttle = <T extends (...args: never[]) => void>(func: T, limit: number): T => {
+  let lastCall = 0;
+  return ((...args: Parameters<T>) => {
+    const now = performance.now();
+    if (now - lastCall >= limit) {
+      lastCall = now;
+      func(...args);
+    }
+  }) as T;
+};
+
+interface Dot {
+  cx: number;
+  cy: number;
+  xOffset: number;
+  yOffset: number;
+  _inertiaApplied: boolean;
+}
+
+export interface DotGridProps {
+  dotSize?: number;
+  gap?: number;
+  baseColor?: string;
+  activeColor?: string;
+  proximity?: number;
+  speedTrigger?: number;
+  shockRadius?: number;
+  shockStrength?: number;
+  maxSpeed?: number;
+  resistance?: number;
+  returnDuration?: number;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+type RgbColor = {
+  r: number;
+  g: number;
+  b: number;
+};
+
+function hexToRgb(hex: string): RgbColor {
+  const m = hex.match(HEX_COLOR_REGEX);
+  if (!m) return {r: 0, g: 0, b: 0};
+  return {
+    r: parseInt(m[1], 16),
+    g: parseInt(m[2], 16),
+    b: parseInt(m[3], 16),
+  };
+}
+
+export function DotGrid({
+  dotSize = 16,
+  gap = 32,
+  baseColor = '#5227FF',
+  activeColor = '#5227FF',
+  proximity = 150,
+  speedTrigger = 100,
+  shockRadius = 250,
+  shockStrength = 5,
+  maxSpeed = 5000,
+  resistance = 750,
+  returnDuration = 1.5,
+  className = '',
+  style,
+}: DotGridProps): React.JSX.Element {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const dotsRef = useRef<Dot[]>([]);
+  const pointerRef = useRef({
+    x: 0,
+    y: 0,
+    vx: 0,
+    vy: 0,
+    speed: 0,
+    lastTime: 0,
+    lastX: 0,
+    lastY: 0,
+  });
+
+  const baseRgb = useMemo(() => hexToRgb(baseColor), [baseColor]);
+  const activeRgb = useMemo(() => hexToRgb(activeColor), [activeColor]);
+
+  const colorGradient = useMemo(() => {
+    const gradient: string[] = new Array(256);
+    for (let i = 0; i < 256; i++) {
+      const normalizedSqDist = i / 255;
+      const normalizedDist = Math.sqrt(normalizedSqDist);
+      const t = 1 - normalizedDist;
+      const r = Math.round(baseRgb.r + (activeRgb.r - baseRgb.r) * t);
+      const g = Math.round(baseRgb.g + (activeRgb.g - baseRgb.g) * t);
+      const b = Math.round(baseRgb.b + (activeRgb.b - baseRgb.b) * t);
+      gradient[i] = `rgb(${r},${g},${b})`;
+    }
+    return gradient;
+  }, [baseRgb, activeRgb]);
+
+  const circlePath = useMemo(() => {
+    if (typeof window === 'undefined' || !window.Path2D) return null;
+
+    const p = new Path2D();
+    p.arc(0, 0, dotSize / 2, 0, Math.PI * 2);
+    return p;
+  }, [dotSize]);
+
+  const buildGrid = useCallback(() => {
+    const wrap = wrapperRef.current;
+    const canvas = canvasRef.current;
+    if (!wrap || !canvas) return;
+
+    const {width, height} = wrap.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    const ctx = canvas.getContext('2d');
+    if (ctx) ctx.scale(dpr, dpr);
+
+    const cols = Math.floor((width + gap) / (dotSize + gap));
+    const rows = Math.floor((height + gap) / (dotSize + gap));
+    const cell = dotSize + gap;
+
+    const gridW = cell * cols - gap;
+    const gridH = cell * rows - gap;
+
+    const extraX = width - gridW;
+    const extraY = height - gridH;
+
+    const startX = extraX / 2 + dotSize / 2;
+    const startY = extraY / 2 + dotSize / 2;
+
+    const dots: Dot[] = [];
+    for (let y = 0; y < rows; y++) {
+      for (let x = 0; x < cols; x++) {
+        const cx = startX + x * cell;
+        const cy = startY + y * cell;
+        dots.push({cx, cy, xOffset: 0, yOffset: 0, _inertiaApplied: false});
+      }
+    }
+    dotsRef.current = dots;
+  }, [dotSize, gap]);
+
+  useEffect(() => {
+    if (!circlePath) return;
+
+    let rafId: number;
+    const proxSq = proximity * proximity;
+
+    const draw = () => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const {x: px, y: py} = pointerRef.current;
+
+      for (const dot of dotsRef.current) {
+        const ox = dot.cx + dot.xOffset;
+        const oy = dot.cy + dot.yOffset;
+        const dx = dot.cx - px;
+        const dy = dot.cy - py;
+        const dsq = dx * dx + dy * dy;
+
+        let fillColor = baseColor;
+        if (dsq <= proxSq) {
+          const normalizedSqDist = dsq / proxSq;
+          const index = Math.min(255, Math.max(0, Math.round(normalizedSqDist * 255)));
+          fillColor = colorGradient[index];
+        }
+
+        ctx.save();
+        ctx.translate(ox, oy);
+        ctx.fillStyle = fillColor;
+        ctx.fill(circlePath);
+        ctx.restore();
+      }
+
+      rafId = requestAnimationFrame(draw);
+    };
+
+    draw();
+    return () => cancelAnimationFrame(rafId);
+  }, [proximity, baseColor, colorGradient, circlePath]);
+
+  useEffect(() => {
+    buildGrid();
+    let ro: ResizeObserver | null = null;
+    if ('ResizeObserver' in window) {
+      ro = new ResizeObserver(buildGrid);
+      wrapperRef.current && ro.observe(wrapperRef.current);
+    } else {
+      (window as Window).addEventListener('resize', buildGrid);
+    }
+    return () => {
+      if (ro) ro.disconnect();
+      else window.removeEventListener('resize', buildGrid);
+    };
+  }, [buildGrid]);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      const now = performance.now();
+      const pr = pointerRef.current;
+      const dt = pr.lastTime ? now - pr.lastTime : 16;
+      const dx = e.clientX - pr.lastX;
+      const dy = e.clientY - pr.lastY;
+      let vx = (dx / dt) * 1000;
+      let vy = (dy / dt) * 1000;
+      let speed = Math.hypot(vx, vy);
+      if (speed > maxSpeed) {
+        const scale = maxSpeed / speed;
+        vx *= scale;
+        vy *= scale;
+        speed = maxSpeed;
+      }
+      pr.lastTime = now;
+      pr.lastX = e.clientX;
+      pr.lastY = e.clientY;
+      pr.vx = vx;
+      pr.vy = vy;
+      pr.speed = speed;
+
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      pr.x = e.clientX - rect.left;
+      pr.y = e.clientY - rect.top;
+
+      for (const dot of dotsRef.current) {
+        const dist = Math.hypot(dot.cx - pr.x, dot.cy - pr.y);
+        if (speed > speedTrigger && dist < proximity && !dot._inertiaApplied) {
+          dot._inertiaApplied = true;
+          gsap.killTweensOf(dot);
+          const pushX = dot.cx - pr.x + vx * 0.005;
+          const pushY = dot.cy - pr.y + vy * 0.005;
+          gsap.to(dot, {
+            inertia: {xOffset: pushX, yOffset: pushY, resistance},
+            onComplete: () => {
+              gsap.to(dot, {
+                xOffset: 0,
+                yOffset: 0,
+                duration: returnDuration,
+                ease: 'elastic.out(1,0.75)',
+              });
+              dot._inertiaApplied = false;
+            },
+          });
+        }
+      }
+    };
+
+    const onClick = (e: MouseEvent) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      const cx = e.clientX - rect.left;
+      const cy = e.clientY - rect.top;
+      for (const dot of dotsRef.current) {
+        const dist = Math.hypot(dot.cx - cx, dot.cy - cy);
+        if (dist < shockRadius && !dot._inertiaApplied) {
+          dot._inertiaApplied = true;
+          gsap.killTweensOf(dot);
+          const falloff = Math.max(0, 1 - dist / shockRadius);
+          const pushX = (dot.cx - cx) * shockStrength * falloff;
+          const pushY = (dot.cy - cy) * shockStrength * falloff;
+          gsap.to(dot, {
+            inertia: {xOffset: pushX, yOffset: pushY, resistance},
+            onComplete: () => {
+              gsap.to(dot, {
+                xOffset: 0,
+                yOffset: 0,
+                duration: returnDuration,
+                ease: 'elastic.out(1,0.75)',
+              });
+              dot._inertiaApplied = false;
+            },
+          });
+        }
+      }
+    };
+
+    const throttledMove = throttle(onMove, 50) as (e: MouseEvent) => void;
+    const wrapper = wrapperRef.current;
+    if (wrapper) {
+      wrapper.addEventListener('mousemove', throttledMove, {passive: true});
+      wrapper.addEventListener('click', onClick);
+    }
+    return () => {
+      if (wrapper) {
+        wrapper.removeEventListener('mousemove', throttledMove);
+        wrapper.removeEventListener('click', onClick);
+      }
+    };
+  }, [maxSpeed, speedTrigger, proximity, resistance, returnDuration, shockRadius, shockStrength]);
+
+  return (
+    <section
+      className={cn('p-4 flex items-center justify-center h-full w-full relative', className)}
+      style={style}
+      role="presentation"
+    >
+      <div ref={wrapperRef} className="w-full h-full relative">
+        {/** biome-ignore lint/a11y/noAriaHiddenOnFocusable: <canvas is not focusable> */}
+        <canvas
+          ref={canvasRef}
+          className="absolute inset-0 w-full h-full pointer-events-none"
+          aria-hidden="true"
+        />
+      </div>
+    </section>
+  );
+}

package/src/components/dot-grid/index.ts

@@ -0,0 +1 @@
+export * from './dot-grid';

package/src/components/dynamic-item/dynamic-item.stories.tsx

@@ -1,6 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react';
 import {Button} from 'components/button/button';
 import {ItemTitle} from 'components/item';
+import {MovingBorder} from 'components/moving-border';
 import {cn} from 'utils/cn';
 import illustration1 from '../../assets/illustration-1.svg';
 import illustration2 from '../../assets/illustration-2.svg';
@@ -8,7 +9,6 @@ import illustrationBg from '../../assets/illustration-gradient.svg';
 import {Avatar} from '../avatar/avatar';
 import {AvatarGroup, AvatarGroupTooltip} from '../avatar/avatar-group';
 import {Icon} from '../icon/icon';
-import {MovingBorder} from '../moving-border/moving-border';
 import {DynamicItem} from './dynamic-item';
 
 const meta = {

package/src/components/icon/icon.tsx

@@ -2,6 +2,7 @@ import {
   type RemixiconComponentType,
   RiAddLine,
   RiArrowRightSLine,
+  RiBookOpenFill,
   RiCheckLine,
   RiCloseLine,
   RiFileCopyLine,
@@ -60,6 +61,7 @@ const iconsMap = {
   copy: RiFileCopyLine,
   addLine: RiAddLine,
   chevronRight: RiArrowRightSLine,
+  bookOpen: RiBookOpenFill,
 } as const satisfies Record<string, RemixiconComponentType>;
 
 export type IconName = keyof typeof iconsMap;

package/src/components/index.ts

@@ -4,13 +4,16 @@ export * from './badge';
 export * from './button';
 export * from './checkbox';
 export * from './code-block';
+export * from './dot-grid';
 export * from './dynamic-item';
 export * from './icon';
 export * from './inline-tips';
 export * from './input';
 export * from './item';
 export * from './label';
+export * from './modal';
 export * from './textarea';
 export * from './theme';
 export * from './toast';
+export * from './tooltip';
 export * from './typography';

package/src/components/modal/index.ts

@@ -0,0 +1,23 @@
+export type {
+  ModalContentProps,
+  ModalDescriptionProps,
+  ModalHeaderProps,
+  ModalOverlayProps,
+  ModalTitleProps,
+} from './modal';
+export {
+  Modal,
+  ModalBody,
+  ModalClose,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  ModalPortal,
+  ModalTitle,
+  ModalTrigger,
+  modalContentVariants,
+  modalDefaultTransition,
+  modalOverlayVariants,
+} from './modal';