@lp-labs/ui-components 0.0.0-stage → 1.0.0

package/dist/esm/components/AdvancedComponents.js

@@ -0,0 +1,353 @@
+import React from 'react';
+
+export interface AdvancedComponentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export const FormBuilder: React.FC<
+  AdvancedComponentProps & {
+    fields: Array<{
+      id: string;
+      type: 'text' | 'email' | 'password' | 'number' | 'date' | 'select' | 'checkbox' | 'radio';
+      label: string;
+      required?: boolean;
+      options?: Array<{ label: string; value: string }>;
+    }>;
+    onSubmit?: (data: Record<string, any>) => void;
+  }
+> = ({
+  fields,
+  onSubmit,
+  className = '',
+  ...props
+}) => {
+  const [formData, setFormData] = React.useState<Record<string, any>>({});
+
+  const handleChange = (id: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [id]: value }));
+  };
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit?.(formData);
+      }}
+      className={`space-y-4 ${className}`}
+      {...props}
+    >
+      {fields.map((field) => (
+        <div key={field.id}>
+          <label className="block text-sm font-medium mb-1">
+            {field.label}
+            {field.required && <span className="text-red-600">*</span>}
+          </label>
+          {field.type === 'select' && (
+            <select
+              value={formData[field.id] || ''}
+              onChange={(e) => handleChange(field.id, e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
+            >
+              <option value="">Select...</option>
+              {field.options?.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          )}
+          {field.type === 'checkbox' && (
+            <input
+              type="checkbox"
+              checked={formData[field.id] || false}
+              onChange={(e) => handleChange(field.id, e.target.checked)}
+              className="w-4 h-4"
+            />
+          )}
+          {field.type !== 'select' && field.type !== 'checkbox' && (
+            <input
+              type={field.type}
+              value={formData[field.id] || ''}
+              onChange={(e) => handleChange(field.id, e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg"
+            />
+          )}
+        </div>
+      ))}
+      <button
+        type="submit"
+        className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+      >
+        Submit
+      </button>
+    </form>
+  );
+};
+
+export const TableBuilder: React.FC<
+  AdvancedComponentProps & {
+    data: Array<Record<string, any>>;
+    columns: Array<{ key: string; label: string }>;
+    editable?: boolean;
+  }
+> = ({
+  data,
+  columns,
+  editable = false,
+  className = '',
+  ...props
+}) => {
+  const [editingRow, setEditingRow] = React.useState<number | null>(null);
+  const [editValues, setEditValues] = React.useState<Record<string, any>>({});
+
+  return (
+    <div className={`overflow-x-auto ${className}`} {...props}>
+      <table className="w-full border border-gray-300">
+        <thead className="bg-gray-100">
+          <tr>
+            {columns.map((col) => (
+              <th key={col.key} className="px-4 py-2 text-left font-semibold border-b">
+                {col.label}
+              </th>
+            ))}
+            {editable && <th className="px-4 py-2 text-left font-semibold border-b">Actions</th>}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, idx) => (
+            <tr key={idx} className="hover:bg-gray-50 border-b">
+              {columns.map((col) => (
+                <td key={col.key} className="px-4 py-2">
+                  {editingRow === idx ? (
+                    <input
+                      type="text"
+                      value={editValues[col.key] || ''}
+                      onChange={(e) =>
+                        setEditValues((prev) => ({
+                          ...prev,
+                          [col.key]: e.target.value,
+                        }))
+                      }
+                      className="w-full px-2 py-1 border border-gray-300 rounded"
+                    />
+                  ) : (
+                    row[col.key]
+                  )}
+                </td>
+              ))}
+              {editable && (
+                <td className="px-4 py-2 flex gap-2">
+                  {editingRow === idx ? (
+                    <>
+                      <button className="px-2 py-1 bg-green-600 text-white rounded">Save</button>
+                      <button
+                        onClick={() => setEditingRow(null)}
+                        className="px-2 py-1 bg-gray-600 text-white rounded"
+                      >
+                        Cancel
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <button
+                        onClick={() => {
+                          setEditingRow(idx);
+                          setEditValues(row);
+                        }}
+                        className="px-2 py-1 bg-blue-600 text-white rounded"
+                      >
+                        Edit
+                      </button>
+                      <button className="px-2 py-1 bg-red-600 text-white rounded">Delete</button>
+                    </>
+                  )}
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export const Dashboard: React.FC<
+  AdvancedComponentProps & {
+    title?: string;
+    widgets: Array<{ id: string; title: string; content: React.ReactNode }>;
+    columns?: number;
+  }
+> = ({
+  title,
+  widgets,
+  columns = 3,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={className} {...props}>
+      {title && <h1 className="text-3xl font-bold mb-8">{title}</h1>}
+      <div className={`grid grid-cols-1 md:grid-cols-${columns} gap-6`}>
+        {widgets.map((widget) => (
+          <div key={widget.id} className="bg-white rounded-lg shadow-md p-6 border border-gray-200">
+            <h2 className="text-lg font-semibold mb-4">{widget.title}</h2>
+            {widget.content}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const Wizard: React.FC<
+  AdvancedComponentProps & {
+    steps: Array<{ title: string; content: React.ReactNode }>;
+    onComplete?: () => void;
+  }
+> = ({
+  steps,
+  onComplete,
+  className = '',
+  ...props
+}) => {
+  const [currentStep, setCurrentStep] = React.useState(0);
+
+  return (
+    <div className={`max-w-2xl mx-auto ${className}`} {...props}>
+      <div className="mb-8">
+        <div className="flex justify-between mb-4">
+          {steps.map((step, idx) => (
+            <button
+              key={idx}
+              onClick={() => setCurrentStep(idx)}
+              className={`flex-1 text-center py-2 border-b-4 ${
+                idx === currentStep ? 'border-blue-600 text-blue-600' : 'border-gray-300 text-gray-600'
+              }`}
+            >
+              {step.title}
+            </button>
+          ))}
+        </div>
+        <div className="bg-white p-6 border border-gray-200 rounded-lg">{steps[currentStep].content}</div>
+      </div>
+      <div className="flex gap-4 justify-between">
+        <button
+          onClick={() => setCurrentStep(Math.max(0, currentStep - 1))}
+          disabled={currentStep === 0}
+          className="px-4 py-2 bg-gray-600 text-white rounded-lg disabled:opacity-50"
+        >
+          Previous
+        </button>
+        {currentStep === steps.length - 1 ? (
+          <button
+            onClick={onComplete}
+            className="px-4 py-2 bg-green-600 text-white rounded-lg"
+          >
+            Complete
+          </button>
+        ) : (
+          <button
+            onClick={() => setCurrentStep(Math.min(steps.length - 1, currentStep + 1))}
+            className="px-4 py-2 bg-blue-600 text-white rounded-lg"
+          >
+            Next
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const KanbanBoard: React.FC<
+  AdvancedComponentProps & {
+    columns: Array<{
+      id: string;
+      title: string;
+      cards: Array<{ id: string; title: string; description?: string }>;
+    }>;
+  }
+> = ({
+  columns,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 overflow-x-auto ${className}`} {...props}>
+      {columns.map((col) => (
+        <div key={col.id} className="bg-gray-100 rounded-lg p-4 min-w-sm">
+          <h3 className="font-semibold mb-4">{col.title}</h3>
+          <div className="space-y-2">
+            {col.cards.map((card) => (
+              <div key={card.id} className="bg-white p-4 rounded-lg shadow-sm border-l-4 border-blue-600">
+                <p className="font-medium">{card.title}</p>
+                {card.description && <p className="text-sm text-gray-600 mt-1">{card.description}</p>}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const Timeline: React.FC<
+  AdvancedComponentProps & {
+    items: Array<{
+      id: string;
+      title: string;
+      description?: string;
+      timestamp?: string;
+      icon?: React.ReactNode;
+    }>;
+  }
+> = ({
+  items,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`space-y-6 ${className}`} {...props}>
+      {items.map((item, idx) => (
+        <div key={item.id} className="flex gap-4">
+          <div className="flex flex-col items-center">
+            <div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center">
+              {item.icon || '●'}
+            </div>
+            {idx < items.length - 1 && <div className="w-0.5 h-20 bg-gray-300 mt-2"></div>}
+          </div>
+          <div className="pb-6">
+            <h4 className="font-semibold">{item.title}</h4>
+            {item.description && <p className="text-gray-600 text-sm mt-1">{item.description}</p>}
+            {item.timestamp && <p className="text-gray-500 text-xs mt-2">{item.timestamp}</p>}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const OrgChart: React.FC<
+  AdvancedComponentProps & {
+    root: { name: string; children?: any[] };
+  }
+> = ({
+  root,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div className={`flex flex-col items-center gap-4 ${className}`} {...props}>
+      <div className="px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold">{root.name}</div>
+      {root.children && root.children.length > 0 && (
+        <>
+          <div className="w-0.5 h-6 bg-gray-300"></div>
+          <div className="flex gap-8">
+            {root.children.map((child, idx) => (
+              <OrgChart key={idx} root={child} />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};

package/dist/esm/components/Alert.d.ts

@@ -0,0 +1,102 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'success' | 'warning' | 'danger' | 'info';
+  title?: string;
+  onClose?: () => void;
+  closeable?: boolean;
+}
+
+const variantStyles = {
+  success: {
+    container: 'bg-green-50 border-green-200 text-green-800',
+    icon: 'text-green-600',
+  },
+  warning: {
+    container: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+    icon: 'text-yellow-600',
+  },
+  danger: {
+    container: 'bg-red-50 border-red-200 text-red-800',
+    icon: 'text-red-600',
+  },
+  info: {
+    container: 'bg-blue-50 border-blue-200 text-blue-800',
+    icon: 'text-blue-600',
+  },
+};
+
+const icons = {
+  success: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+    </svg>
+  ),
+  warning: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+    </svg>
+  ),
+  danger: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+    </svg>
+  ),
+  info: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+    </svg>
+  ),
+};
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      variant = 'info',
+      title,
+      onClose,
+      closeable = false,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const styles = variantStyles[variant];
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'border rounded-lg p-4 flex gap-3',
+          styles.container,
+          className,
+        )}
+        role="alert"
+        {...props}
+      >
+        <div className={cn('flex-shrink-0 mt-0.5', styles.icon)}>
+          {icons[variant]}
+        </div>
+        <div className="flex-1">
+          {title && <h3 className="font-semibold mb-1">{title}</h3>}
+          <div>{children}</div>
+        </div>
+        {closeable && (
+          <button
+            onClick={onClose}
+            className="ml-auto text-current opacity-70 hover:opacity-100 transition-opacity flex-shrink-0"
+            aria-label="Close alert"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+
+Alert.displayName = 'Alert';

package/dist/esm/components/Alert.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'success' | 'warning' | 'danger' | 'info';
+  title?: string;
+  onClose?: () => void;
+  closeable?: boolean;
+}
+
+const variantStyles = {
+  success: {
+    container: 'bg-green-50 border-green-200 text-green-800',
+    icon: 'text-green-600',
+  },
+  warning: {
+    container: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+    icon: 'text-yellow-600',
+  },
+  danger: {
+    container: 'bg-red-50 border-red-200 text-red-800',
+    icon: 'text-red-600',
+  },
+  info: {
+    container: 'bg-blue-50 border-blue-200 text-blue-800',
+    icon: 'text-blue-600',
+  },
+};
+
+const icons = {
+  success: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+    </svg>
+  ),
+  warning: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+    </svg>
+  ),
+  danger: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+    </svg>
+  ),
+  info: (
+    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+      <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+    </svg>
+  ),
+};
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      variant = 'info',
+      title,
+      onClose,
+      closeable = false,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const styles = variantStyles[variant];
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'border rounded-lg p-4 flex gap-3',
+          styles.container,
+          className,
+        )}
+        role="alert"
+        {...props}
+      >
+        <div className={cn('flex-shrink-0 mt-0.5', styles.icon)}>
+          {icons[variant]}
+        </div>
+        <div className="flex-1">
+          {title && <h3 className="font-semibold mb-1">{title}</h3>}
+          <div>{children}</div>
+        </div>
+        {closeable && (
+          <button
+            onClick={onClose}
+            className="ml-auto text-current opacity-70 hover:opacity-100 transition-opacity flex-shrink-0"
+            aria-label="Close alert"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+
+Alert.displayName = 'Alert';

package/dist/esm/components/Avatar.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'circle' | 'square' | 'rounded';
+  initials?: string;
+  status?: 'online' | 'offline' | 'away' | 'busy';
+}
+
+const sizeStyles = {
+  sm: 'w-8 h-8',
+  md: 'w-10 h-10',
+  lg: 'w-12 h-12',
+  xl: 'w-16 h-16',
+};
+
+const variantStyles = {
+  circle: 'rounded-full',
+  square: 'rounded-none',
+  rounded: 'rounded-md',
+};
+
+const statusColors = {
+  online: 'bg-green-500',
+  offline: 'bg-gray-400',
+  away: 'bg-yellow-500',
+  busy: 'bg-red-500',
+};
+
+export const Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(
+  (
+    {
+      size = 'md',
+      variant = 'circle',
+      initials,
+      status,
+      className,
+      src,
+      alt = 'Avatar',
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div className="relative inline-block">
+        {src ? (
+          <img
+            ref={ref}
+            src={src}
+            alt={alt}
+            className={cn(
+              'bg-gray-200 object-cover',
+              sizeStyles[size],
+              variantStyles[variant],
+              className,
+            )}
+            {...props}
+          />
+        ) : (
+          <div
+            className={cn(
+              'bg-blue-600 text-white font-semibold flex items-center justify-center',
+              sizeStyles[size],
+              variantStyles[variant],
+              className,
+            )}
+          >
+            {initials || alt.charAt(0).toUpperCase()}
+          </div>
+        )}
+        {status && (
+          <div
+            className={cn(
+              'absolute bottom-0 right-0 rounded-full border-2 border-white',
+              statusColors[status],
+              size === 'sm' && 'w-2 h-2',
+              size === 'md' && 'w-3 h-3',
+              size === 'lg' && 'w-3 h-3',
+              size === 'xl' && 'w-4 h-4',
+            )}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+Avatar.displayName = 'Avatar';