@aiready/components 0.1.0

package/src/charts/ForceDirectedGraph.tsx

@@ -0,0 +1,356 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import * as d3 from 'd3';
+import {
+  useForceSimulation,
+  type SimulationNode,
+  type SimulationLink,
+  type ForceSimulationOptions,
+} from '../hooks/useForceSimulation';
+import { cn } from '../utils/cn';
+
+export interface GraphNode extends SimulationNode {
+  id: string;
+  label?: string;
+  color?: string;
+  size?: number;
+  group?: string;
+}
+
+export interface GraphLink extends SimulationLink {
+  color?: string;
+  width?: number;
+  label?: string;
+}
+
+export interface ForceDirectedGraphProps {
+  /**
+   * Array of nodes to display
+   */
+  nodes: GraphNode[];
+
+  /**
+   * Array of links between nodes
+   */
+  links: GraphLink[];
+
+  /**
+   * Width of the graph container
+   */
+  width: number;
+
+  /**
+   * Height of the graph container
+   */
+  height: number;
+
+  /**
+   * Force simulation options
+   */
+  simulationOptions?: Partial<ForceSimulationOptions>;
+
+  /**
+   * Whether to enable zoom and pan
+   * @default true
+   */
+  enableZoom?: boolean;
+
+  /**
+   * Whether to enable node dragging
+   * @default true
+   */
+  enableDrag?: boolean;
+
+  /**
+   * Callback when a node is clicked
+   */
+  onNodeClick?: (node: GraphNode) => void;
+
+  /**
+   * Callback when a node is hovered
+   */
+  onNodeHover?: (node: GraphNode | null) => void;
+
+  /**
+   * Callback when a link is clicked
+   */
+  onLinkClick?: (link: GraphLink) => void;
+
+  /**
+   * Selected node ID
+   */
+  selectedNodeId?: string;
+
+  /**
+   * Hovered node ID
+   */
+  hoveredNodeId?: string;
+
+  /**
+   * Default node color
+   * @default "#69b3a2"
+   */
+  defaultNodeColor?: string;
+
+  /**
+   * Default node size
+   * @default 10
+   */
+  defaultNodeSize?: number;
+
+  /**
+   * Default link color
+   * @default "#999"
+   */
+  defaultLinkColor?: string;
+
+  /**
+   * Default link width
+   * @default 1
+   */
+  defaultLinkWidth?: number;
+
+  /**
+   * Whether to show node labels
+   * @default true
+   */
+  showNodeLabels?: boolean;
+
+  /**
+   * Whether to show link labels
+   * @default false
+   */
+  showLinkLabels?: boolean;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+export const ForceDirectedGraph: React.FC<ForceDirectedGraphProps> = ({
+  nodes: initialNodes,
+  links: initialLinks,
+  width,
+  height,
+  simulationOptions,
+  enableZoom = true,
+  enableDrag = true,
+  onNodeClick,
+  onNodeHover,
+  onLinkClick,
+  selectedNodeId,
+  hoveredNodeId,
+  defaultNodeColor = '#69b3a2',
+  defaultNodeSize = 10,
+  defaultLinkColor = '#999',
+  defaultLinkWidth = 1,
+  showNodeLabels = true,
+  showLinkLabels = false,
+  className,
+}) => {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const gRef = useRef<SVGGElement>(null);
+  const [transform, setTransform] = useState({ k: 1, x: 0, y: 0 });
+
+  // Initialize simulation
+  const { nodes, links, restart } = useForceSimulation(initialNodes, initialLinks, {
+    width,
+    height,
+    ...simulationOptions,
+  });
+
+  // Set up zoom behavior
+  useEffect(() => {
+    if (!enableZoom || !svgRef.current || !gRef.current) return;
+
+    const svg = d3.select(svgRef.current);
+    const g = d3.select(gRef.current);
+
+    const zoom = d3
+      .zoom<SVGSVGElement, unknown>()
+      .scaleExtent([0.1, 10])
+      .on('zoom', (event) => {
+        g.attr('transform', event.transform);
+        setTransform(event.transform);
+      });
+
+    svg.call(zoom);
+
+    return () => {
+      svg.on('.zoom', null);
+    };
+  }, [enableZoom]);
+
+  // Set up drag behavior
+  const handleDragStart = useCallback(
+    (event: React.MouseEvent, node: GraphNode) => {
+      if (!enableDrag) return;
+      event.stopPropagation();
+      node.fx = node.x;
+      node.fy = node.y;
+      restart();
+    },
+    [enableDrag, restart]
+  );
+
+  const handleDrag = useCallback(
+    (event: React.MouseEvent, node: GraphNode) => {
+      if (!enableDrag) return;
+      const svg = svgRef.current;
+      if (!svg) return;
+
+      const rect = svg.getBoundingClientRect();
+      const x = (event.clientX - rect.left - transform.x) / transform.k;
+      const y = (event.clientY - rect.top - transform.y) / transform.k;
+
+      node.fx = x;
+      node.fy = y;
+    },
+    [enableDrag, transform]
+  );
+
+  const handleDragEnd = useCallback(
+    (event: React.MouseEvent, node: GraphNode) => {
+      if (!enableDrag) return;
+      event.stopPropagation();
+      node.fx = null;
+      node.fy = null;
+    },
+    [enableDrag]
+  );
+
+  const handleNodeClick = useCallback(
+    (node: GraphNode) => {
+      onNodeClick?.(node);
+    },
+    [onNodeClick]
+  );
+
+  const handleNodeMouseEnter = useCallback(
+    (node: GraphNode) => {
+      onNodeHover?.(node);
+    },
+    [onNodeHover]
+  );
+
+  const handleNodeMouseLeave = useCallback(() => {
+    onNodeHover?.(null);
+  }, [onNodeHover]);
+
+  const handleLinkClick = useCallback(
+    (link: GraphLink) => {
+      onLinkClick?.(link);
+    },
+    [onLinkClick]
+  );
+
+  return (
+    <svg
+      ref={svgRef}
+      width={width}
+      height={height}
+      className={cn('bg-white dark:bg-gray-900', className)}
+    >
+      <defs>
+        {/* Arrow marker for directed graphs */}
+        <marker
+          id="arrow"
+          viewBox="0 0 10 10"
+          refX="20"
+          refY="5"
+          markerWidth="6"
+          markerHeight="6"
+          orient="auto"
+        >
+          <path d="M 0 0 L 10 5 L 0 10 z" fill={defaultLinkColor} />
+        </marker>
+      </defs>
+
+      <g ref={gRef}>
+        {/* Render links */}
+        {links.map((link, i) => {
+          const source = link.source as GraphNode;
+          const target = link.target as GraphNode;
+          if (!source.x || !source.y || !target.x || !target.y) return null;
+
+          return (
+            <g key={`link-${i}`}>
+              <line
+                x1={source.x}
+                y1={source.y}
+                x2={target.x}
+                y2={target.y}
+                stroke={link.color || defaultLinkColor}
+                strokeWidth={link.width || defaultLinkWidth}
+                opacity={0.6}
+                className="cursor-pointer transition-opacity hover:opacity-100"
+                onClick={() => handleLinkClick(link)}
+              />
+              {showLinkLabels && link.label && (
+                <text
+                  x={(source.x + target.x) / 2}
+                  y={(source.y + target.y) / 2}
+                  fill="#666"
+                  fontSize="10"
+                  textAnchor="middle"
+                  dominantBaseline="middle"
+                  pointerEvents="none"
+                >
+                  {link.label}
+                </text>
+              )}
+            </g>
+          );
+        })}
+
+        {/* Render nodes */}
+        {nodes.map((node) => {
+          if (!node.x || !node.y) return null;
+
+          const isSelected = selectedNodeId === node.id;
+          const isHovered = hoveredNodeId === node.id;
+          const nodeSize = node.size || defaultNodeSize;
+          const nodeColor = node.color || defaultNodeColor;
+
+          return (
+            <g
+              key={node.id}
+              transform={`translate(${node.x},${node.y})`}
+              className="cursor-pointer"
+              onClick={() => handleNodeClick(node)}
+              onMouseEnter={() => handleNodeMouseEnter(node)}
+              onMouseLeave={handleNodeMouseLeave}
+              onMouseDown={(e) => handleDragStart(e, node)}
+              onMouseMove={(e) => handleDrag(e, node)}
+              onMouseUp={(e) => handleDragEnd(e, node)}
+            >
+              <circle
+                r={nodeSize}
+                fill={nodeColor}
+                stroke={isSelected ? '#000' : isHovered ? '#666' : 'none'}
+                strokeWidth={isSelected ? 3 : 2}
+                opacity={isHovered || isSelected ? 1 : 0.9}
+                className="transition-all"
+              />
+              {showNodeLabels && node.label && (
+                <text
+                  y={nodeSize + 15}
+                  fill="#333"
+                  fontSize="12"
+                  textAnchor="middle"
+                  dominantBaseline="middle"
+                  pointerEvents="none"
+                  className="select-none"
+                >
+                  {node.label}
+                </text>
+              )}
+            </g>
+          );
+        })}
+      </g>
+    </svg>
+  );
+};
+
+ForceDirectedGraph.displayName = 'ForceDirectedGraph';

package/src/components/badge.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/components/button.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/components/card.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+));
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+));
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/src/components/checkbox.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+export interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string;
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, label, id, ...props }, ref) => {
+    const checkboxId = id || React.useId();
+    
+    return (
+      <div className="flex items-center">
+        <input
+          type="checkbox"
+          id={checkboxId}
+          ref={ref}
+          className={cn(
+            'h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+            className
+          )}
+          {...props}
+        />
+        {label && (
+          <label
+            htmlFor={checkboxId}
+            className="ml-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          >
+            {label}
+          </label>
+        )}
+      </div>
+    );
+  }
+);
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };

package/src/components/container.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
+  ({ className, size = 'lg', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'mx-auto w-full px-4 sm:px-6 lg:px-8',
+          {
+            'max-w-screen-sm': size === 'sm',
+            'max-w-screen-md': size === 'md',
+            'max-w-screen-lg': size === 'lg',
+            'max-w-screen-xl': size === 'xl',
+            'max-w-full': size === 'full',
+          },
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+Container.displayName = 'Container';
+
+export { Container };

package/src/components/grid.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+  cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
+  gap?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const Grid = React.forwardRef<HTMLDivElement, GridProps>(
+  ({ className, cols = 3, gap = 'md', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'grid',
+          {
+            'grid-cols-1': cols === 1,
+            'grid-cols-1 sm:grid-cols-2': cols === 2,
+            'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3': cols === 3,
+            'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4': cols === 4,
+            'grid-cols-1 sm:grid-cols-2 lg:grid-cols-5': cols === 5,
+            'grid-cols-1 sm:grid-cols-2 lg:grid-cols-6': cols === 6,
+            'grid-cols-1 sm:grid-cols-2 lg:grid-cols-12': cols === 12,
+          },
+          {
+            'gap-2': gap === 'sm',
+            'gap-4': gap === 'md',
+            'gap-6': gap === 'lg',
+            'gap-8': gap === 'xl',
+          },
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+Grid.displayName = 'Grid';
+
+export { Grid };

package/src/components/input.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };

package/src/components/label.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+export interface LabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement>,
+    VariantProps<typeof labelVariants> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(labelVariants(), className)}
+      {...props}
+    />
+  )
+);
+Label.displayName = 'Label';
+
+export { Label };