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

package/dist/esm/components/DataDisplayComponents.js

@@ -0,0 +1,275 @@
+import React from 'react';
+
+export interface DataDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export interface TableColumn {
+  key: string;
+  header: string;
+  width?: string;
+  sortable?: boolean;
+  filterable?: boolean;
+}
+
+export interface TableData {
+  [key: string]: any;
+}
+
+export const TableBasic: React.FC<
+  DataDisplayProps & {
+    columns: TableColumn[];
+    data: TableData[];
+    striped?: boolean;
+    bordered?: boolean;
+  }
+> = ({ columns, data, striped = true, bordered = true, className = '', ...props }) => {
+  return (
+    <div className={`overflow-x-auto ${className}`} {...props}>
+      <table className={`w-full text-sm ${bordered ? 'border border-gray-300' : ''}`}>
+        <thead className="bg-gray-100 border-b border-gray-300">
+          <tr>
+            {columns.map((col) => (
+              <th key={col.key} className={`px-4 py-2 text-left font-semibold`} style={{ width: col.width }}>
+                {col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, idx) => (
+            <tr
+              key={idx}
+              className={`border-b border-gray-200 ${striped && idx % 2 === 0 ? 'bg-gray-50' : ''} hover:bg-gray-100`}
+            >
+              {columns.map((col) => (
+                <td key={col.key} className="px-4 py-2">
+                  {row[col.key]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export const TableSortable: React.FC<
+  DataDisplayProps & {
+    columns: TableColumn[];
+    data: TableData[];
+    onSort?: (key: string, direction: 'asc' | 'desc') => void;
+  }
+> = ({ columns, data, onSort, className = '', ...props }) => {
+  const [sortColumn, setSortColumn] = React.useState<string | null>(null);
+  const [sortDirection, setSortDirection] = React.useState<'asc' | 'desc'>('asc');
+
+  const handleSort = (key: string) => {
+    const newDirection = sortColumn === key && sortDirection === 'asc' ? 'desc' : 'asc';
+    setSortColumn(key);
+    setSortDirection(newDirection);
+    onSort?.(key, newDirection);
+  };
+
+  return (
+    <div className={`overflow-x-auto ${className}`} {...props}>
+      <table className="w-full text-sm border border-gray-300">
+        <thead className="bg-gray-100 border-b border-gray-300">
+          <tr>
+            {columns.map((col) => (
+              <th
+                key={col.key}
+                className={`px-4 py-2 text-left font-semibold ${col.sortable ? 'cursor-pointer hover:bg-gray-200' : ''}`}
+                onClick={() => col.sortable && handleSort(col.key)}
+                style={{ width: col.width }}
+              >
+                <div className="flex items-center gap-2">
+                  {col.header}
+                  {col.sortable && sortColumn === col.key && (
+                    <span>{sortDirection === 'asc' ? '↑' : '↓'}</span>
+                  )}
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, idx) => (
+            <tr key={idx} className="border-b border-gray-200 hover:bg-gray-100">
+              {columns.map((col) => (
+                <td key={col.key} className="px-4 py-2">
+                  {row[col.key]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export const TableFilterable: React.FC<
+  DataDisplayProps & {
+    columns: TableColumn[];
+    data: TableData[];
+    onFilter?: (filters: Record<string, string>) => void;
+  }
+> = ({ columns, data, onFilter, className = '', ...props }) => {
+  const [filters, setFilters] = React.useState<Record<string, string>>({});
+
+  const handleFilterChange = (key: string, value: string) => {
+    const newFilters = { ...filters, [key]: value };
+    setFilters(newFilters);
+    onFilter?.(newFilters);
+  };
+
+  const filteredData = data.filter((row) =>
+    Object.entries(filters).every(([key, value]) =>
+      !value || String(row[key]).toLowerCase().includes(value.toLowerCase()),
+    ),
+  );
+
+  return (
+    <div className={`${className}`} {...props}>
+      <div className="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {columns
+            .filter((col) => col.filterable)
+            .map((col) => (
+              <input
+                key={col.key}
+                type="text"
+                placeholder={`Filter ${col.header}...`}
+                value={filters[col.key] || ''}
+                onChange={(e) => handleFilterChange(col.key, e.target.value)}
+                className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+              />
+            ))}
+        </div>
+      </div>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm border border-gray-300">
+          <thead className="bg-gray-100 border-b border-gray-300">
+            <tr>
+              {columns.map((col) => (
+                <th key={col.key} className="px-4 py-2 text-left font-semibold" style={{ width: col.width }}>
+                  {col.header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {filteredData.map((row, idx) => (
+              <tr key={idx} className="border-b border-gray-200 hover:bg-gray-100">
+                {columns.map((col) => (
+                  <td key={col.key} className="px-4 py-2">
+                    {row[col.key]}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {filteredData.length === 0 && <p className="text-center py-4 text-gray-500">No results found</p>}
+    </div>
+  );
+};
+
+export const TableExpandable: React.FC<
+  DataDisplayProps & {
+    columns: TableColumn[];
+    data: TableData[];
+    renderDetails?: (row: TableData) => React.ReactNode;
+  }
+> = ({ columns, data, renderDetails, className = '', ...props }) => {
+  const [expandedRows, setExpandedRows] = React.useState<Set<number>>(new Set());
+
+  const toggleExpanded = (idx: number) => {
+    const newExpanded = new Set(expandedRows);
+    if (newExpanded.has(idx)) {
+      newExpanded.delete(idx);
+    } else {
+      newExpanded.add(idx);
+    }
+    setExpandedRows(newExpanded);
+  };
+
+  return (
+    <div className={`overflow-x-auto ${className}`} {...props}>
+      <table className="w-full text-sm border border-gray-300">
+        <thead className="bg-gray-100 border-b border-gray-300">
+          <tr>
+            <th className="px-4 py-2 w-10"></th>
+            {columns.map((col) => (
+              <th key={col.key} className="px-4 py-2 text-left font-semibold" style={{ width: col.width }}>
+                {col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, idx) => (
+            <React.Fragment key={idx}>
+              <tr className="border-b border-gray-200 hover:bg-gray-100">
+                <td className="px-4 py-2">
+                  <button onClick={() => toggleExpanded(idx)} className="text-lg">
+                    {expandedRows.has(idx) ? '▼' : '▶'}
+                  </button>
+                </td>
+                {columns.map((col) => (
+                  <td key={col.key} className="px-4 py-2">
+                    {row[col.key]}
+                  </td>
+                ))}
+              </tr>
+              {expandedRows.has(idx) && (
+                <tr className="bg-blue-50 border-b border-gray-200">
+                  <td colSpan={columns.length + 1} className="px-4 py-4">
+                    {renderDetails?.(row)}
+                  </td>
+                </tr>
+              )}
+            </React.Fragment>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export const TableCompact: React.FC<
+  DataDisplayProps & {
+    columns: TableColumn[];
+    data: TableData[];
+  }
+> = ({ columns, data, className = '', ...props }) => {
+  return (
+    <div className={`overflow-x-auto ${className}`} {...props}>
+      <table className="w-full text-xs border border-gray-300">
+        <thead className="bg-gray-100 border-b border-gray-300">
+          <tr>
+            {columns.map((col) => (
+              <th key={col.key} className="px-2 py-1 text-left font-semibold" style={{ width: col.width }}>
+                {col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, idx) => (
+            <tr key={idx} className="border-b border-gray-200 hover:bg-gray-100">
+              {columns.map((col) => (
+                <td key={col.key} className="px-2 py-1">
+                  {row[col.key]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+  orientation?: 'horizontal' | 'vertical';
+  variant?: 'solid' | 'dashed' | 'dotted';
+  label?: string;
+}
+
+const variantStyles = {
+  solid: 'border-solid',
+  dashed: 'border-dashed',
+  dotted: 'border-dotted',
+};
+
+export const Divider = React.forwardRef<HTMLHRElement, DividerProps>(
+  (
+    {
+      orientation = 'horizontal',
+      variant = 'solid',
+      label,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    if (orientation === 'vertical') {
+      return (
+        <hr
+          ref={ref}
+          className={cn(
+            'h-full w-0 border-l border-gray-300',
+            variantStyles[variant],
+            className,
+          )}
+          {...props}
+        />
+      );
+    }
+
+    if (label) {
+      return (
+        <div className={cn('relative flex items-center my-4', className)}>
+          <hr
+            ref={ref}
+            className={cn(
+              'flex-grow border-t border-gray-300',
+              variantStyles[variant],
+            )}
+            {...props}
+          />
+          <span className="px-2 text-sm text-gray-600 bg-white">{label}</span>
+          <hr
+            className={cn(
+              'flex-grow border-t border-gray-300',
+              variantStyles[variant],
+            )}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <hr
+        ref={ref}
+        className={cn(
+          'border-t border-gray-300 my-4',
+          variantStyles[variant],
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Divider.displayName = 'Divider';

package/dist/esm/components/Divider.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+  orientation?: 'horizontal' | 'vertical';
+  variant?: 'solid' | 'dashed' | 'dotted';
+  label?: string;
+}
+
+const variantStyles = {
+  solid: 'border-solid',
+  dashed: 'border-dashed',
+  dotted: 'border-dotted',
+};
+
+export const Divider = React.forwardRef<HTMLHRElement, DividerProps>(
+  (
+    {
+      orientation = 'horizontal',
+      variant = 'solid',
+      label,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    if (orientation === 'vertical') {
+      return (
+        <hr
+          ref={ref}
+          className={cn(
+            'h-full w-0 border-l border-gray-300',
+            variantStyles[variant],
+            className,
+          )}
+          {...props}
+        />
+      );
+    }
+
+    if (label) {
+      return (
+        <div className={cn('relative flex items-center my-4', className)}>
+          <hr
+            ref={ref}
+            className={cn(
+              'flex-grow border-t border-gray-300',
+              variantStyles[variant],
+            )}
+            {...props}
+          />
+          <span className="px-2 text-sm text-gray-600 bg-white">{label}</span>
+          <hr
+            className={cn(
+              'flex-grow border-t border-gray-300',
+              variantStyles[variant],
+            )}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <hr
+        ref={ref}
+        className={cn(
+          'border-t border-gray-300 my-4',
+          variantStyles[variant],
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Divider.displayName = 'Divider';

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

@@ -0,0 +1,142 @@
+import React, { useEffect } from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  position?: 'left' | 'right' | 'top' | 'bottom';
+  width?: string;
+  height?: string;
+  closeButton?: boolean;
+  overlay?: boolean;
+  className?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+  footerSlot?: React.ReactNode;
+}
+
+export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
+  (
+    {
+      isOpen,
+      onClose,
+      title,
+      children,
+      position = 'left',
+      width = 'w-96',
+      height = 'h-96',
+      closeButton = true,
+      overlay = true,
+      className,
+      headerClassName,
+      bodyClassName,
+      footerSlot,
+    },
+    ref
+  ) => {
+    useEffect(() => {
+      if (isOpen) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.overflow = 'unset';
+      }
+
+      return () => {
+        document.body.style.overflow = 'unset';
+      };
+    }, [isOpen]);
+
+    const positionClasses = {
+      left: 'left-0 top-0 h-full',
+      right: 'right-0 top-0 h-full',
+      top: 'top-0 left-0 w-full',
+      bottom: 'bottom-0 left-0 w-full',
+    };
+
+    const widthClasses = {
+      left: width,
+      right: width,
+      top: width !== 'w-96' ? width : 'w-full',
+      bottom: width !== 'w-96' ? width : 'w-full',
+    };
+
+    const heightClasses = {
+      left: 'h-full',
+      right: 'h-full',
+      top: height,
+      bottom: height,
+    };
+
+    const slideInClasses = {
+      left: 'translate-x-0 -translate-x-full',
+      right: '-translate-x-0 translate-x-full',
+      top: 'translate-y-0 -translate-y-full',
+      bottom: 'translate-y-0 translate-y-full',
+    };
+
+    if (!isOpen) return null;
+
+    return (
+      <>
+        {/* Overlay */}
+        {overlay && (
+          <div
+            className="fixed inset-0 bg-black bg-opacity-50 z-40 animate-in fade-in duration-300"
+            onClick={onClose}
+          />
+        )}
+
+        {/* Drawer */}
+        <div
+          ref={ref}
+          className={cn(
+            'fixed bg-white shadow-lg transition-transform duration-300 z-50',
+            'animate-in',
+            positionClasses[position],
+            widthClasses,
+            heightClasses,
+            isOpen ? slideInClasses[position].split(' ')[0] : slideInClasses[position].split(' ')[1],
+            className
+          )}
+        >
+          {/* Header */}
+          {(title || closeButton) && (
+            <div
+              className={cn(
+                'flex items-center justify-between p-4 border-b border-gray-200',
+                headerClassName
+              )}
+            >
+              {title && <h2 className="text-lg font-semibold text-gray-900">{title}</h2>}
+              {closeButton && (
+                <button
+                  onClick={onClose}
+                  className="text-gray-500 hover:text-gray-700 text-2xl font-bold leading-none"
+                  aria-label="Close drawer"
+                >
+                  ×
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Body */}
+          <div className={cn('flex-1 overflow-y-auto p-4', bodyClassName)}>
+            {children}
+          </div>
+
+          {/* Footer */}
+          {footerSlot && (
+            <div className="border-t border-gray-200 p-4">
+              {footerSlot}
+            </div>
+          )}
+        </div>
+      </>
+    );
+  }
+);
+
+Drawer.displayName = 'Drawer';

package/dist/esm/components/Drawer.js

@@ -0,0 +1,142 @@
+import React, { useEffect } from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  position?: 'left' | 'right' | 'top' | 'bottom';
+  width?: string;
+  height?: string;
+  closeButton?: boolean;
+  overlay?: boolean;
+  className?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+  footerSlot?: React.ReactNode;
+}
+
+export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
+  (
+    {
+      isOpen,
+      onClose,
+      title,
+      children,
+      position = 'left',
+      width = 'w-96',
+      height = 'h-96',
+      closeButton = true,
+      overlay = true,
+      className,
+      headerClassName,
+      bodyClassName,
+      footerSlot,
+    },
+    ref
+  ) => {
+    useEffect(() => {
+      if (isOpen) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.overflow = 'unset';
+      }
+
+      return () => {
+        document.body.style.overflow = 'unset';
+      };
+    }, [isOpen]);
+
+    const positionClasses = {
+      left: 'left-0 top-0 h-full',
+      right: 'right-0 top-0 h-full',
+      top: 'top-0 left-0 w-full',
+      bottom: 'bottom-0 left-0 w-full',
+    };
+
+    const widthClasses = {
+      left: width,
+      right: width,
+      top: width !== 'w-96' ? width : 'w-full',
+      bottom: width !== 'w-96' ? width : 'w-full',
+    };
+
+    const heightClasses = {
+      left: 'h-full',
+      right: 'h-full',
+      top: height,
+      bottom: height,
+    };
+
+    const slideInClasses = {
+      left: 'translate-x-0 -translate-x-full',
+      right: '-translate-x-0 translate-x-full',
+      top: 'translate-y-0 -translate-y-full',
+      bottom: 'translate-y-0 translate-y-full',
+    };
+
+    if (!isOpen) return null;
+
+    return (
+      <>
+        {/* Overlay */}
+        {overlay && (
+          <div
+            className="fixed inset-0 bg-black bg-opacity-50 z-40 animate-in fade-in duration-300"
+            onClick={onClose}
+          />
+        )}
+
+        {/* Drawer */}
+        <div
+          ref={ref}
+          className={cn(
+            'fixed bg-white shadow-lg transition-transform duration-300 z-50',
+            'animate-in',
+            positionClasses[position],
+            widthClasses,
+            heightClasses,
+            isOpen ? slideInClasses[position].split(' ')[0] : slideInClasses[position].split(' ')[1],
+            className
+          )}
+        >
+          {/* Header */}
+          {(title || closeButton) && (
+            <div
+              className={cn(
+                'flex items-center justify-between p-4 border-b border-gray-200',
+                headerClassName
+              )}
+            >
+              {title && <h2 className="text-lg font-semibold text-gray-900">{title}</h2>}
+              {closeButton && (
+                <button
+                  onClick={onClose}
+                  className="text-gray-500 hover:text-gray-700 text-2xl font-bold leading-none"
+                  aria-label="Close drawer"
+                >
+                  ×
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Body */}
+          <div className={cn('flex-1 overflow-y-auto p-4', bodyClassName)}>
+            {children}
+          </div>
+
+          {/* Footer */}
+          {footerSlot && (
+            <div className="border-t border-gray-200 p-4">
+              {footerSlot}
+            </div>
+          )}
+        </div>
+      </>
+    );
+  }
+);
+
+Drawer.displayName = 'Drawer';