shekel-fe-shared-lib 1.0.1 → 1.0.5

package/README.md

@@ -21,7 +21,7 @@ npm install react react-dom
 ### Import Components and Styles
 
 ```tsx
-import { Button, StatCard, SearchInput, Card } from 'shekel-fe-shared-lib';
+import { Button, StatCard, SearchInput, Card, Table, Modal } from 'shekel-fe-shared-lib';
 import 'shekel-fe-shared-lib/styles.css';
 
 function App() {
@@ -188,13 +188,6 @@ A customizable search input with icon support and built-in animations.
 <SearchInput size="sm" icon={true} placeholder="Small" />
 <SearchInput size="md" icon={true} placeholder="Medium" />
 <SearchInput size="lg" icon={true} placeholder="Large" />
-
-// With icon click handler
-<SearchInput
-  icon={true}
-  onIconClick={() => console.log('Icon clicked')}
-  placeholder="Click icon to search"
-/>
 ```
 
 ---
@@ -247,6 +240,501 @@ A versatile container component with customizable padding, shadows, and hover ef
 
 ---
 
+### Badge
+
+A versatile badge component for labels, tags, and status indicators.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | **required** | Badge content |
+| `variant` | `'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | `'default'` | Badge color variant |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Badge size |
+| `dot` | `boolean` | `false` | Show status dot |
+| `icon` | `React.ReactNode` | `undefined` | Icon to display |
+| `iconPosition` | `'left' \| 'right'` | `'left'` | Icon position |
+| `className` | `string` | `''` | Additional CSS classes |
+
+#### Examples
+
+```tsx
+// Basic badges
+<Badge>Default</Badge>
+<Badge variant="primary">Primary</Badge>
+<Badge variant="success">Success</Badge>
+<Badge variant="warning">Warning</Badge>
+<Badge variant="danger">Danger</Badge>
+
+// With status dot
+<Badge variant="success" dot>Active</Badge>
+<Badge variant="danger" dot>Offline</Badge>
+
+// With icon
+<Badge variant="primary" icon={<StarIcon />}>
+  Featured
+</Badge>
+
+// Different sizes
+<Badge size="sm">Small</Badge>
+<Badge size="md">Medium</Badge>
+<Badge size="lg">Large</Badge>
+```
+
+---
+
+### Checkbox
+
+A customizable checkbox component with filled and outline variants.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `checked` | `boolean` | `undefined` | Controlled checked state |
+| `defaultChecked` | `boolean` | `false` | Default checked state (uncontrolled) |
+| `onChange` | `(checked: boolean) => void` | `undefined` | Change handler |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `indeterminate` | `boolean` | `false` | Indeterminate state |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Checkbox size |
+| `variant` | `'filled' \| 'outline'` | `'filled'` | Visual variant |
+| `className` | `string` | `''` | Additional CSS classes |
+| `id`, `name`, `value` | `string` | `undefined` | Standard input attributes |
+
+#### Examples
+
+```tsx
+// Basic checkbox
+<Checkbox id="terms" />
+
+// Controlled checkbox
+const [checked, setChecked] = useState(false);
+<Checkbox
+  checked={checked}
+  onChange={setChecked}
+/>
+
+// With label
+<div className="flex items-center gap-2">
+  <Checkbox id="accept" />
+  <label htmlFor="accept">Accept terms</label>
+</div>
+
+// Outline variant
+<Checkbox variant="outline" />
+
+// Indeterminate state
+<Checkbox indeterminate />
+
+// Different sizes
+<Checkbox size="sm" />
+<Checkbox size="md" />
+<Checkbox size="lg" />
+```
+
+---
+
+### Modal
+
+A flexible modal dialog component with animations and keyboard support.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | **required** | Controls modal visibility |
+| `onClose` | `() => void` | **required** | Close handler |
+| `title` | `string` | `undefined` | Modal title |
+| `children` | `React.ReactNode` | **required** | Modal content |
+| `footer` | `React.ReactNode` | `undefined` | Modal footer content |
+| `width` | `string \| number` | `'520px'` | Modal width |
+| `closable` | `boolean` | `true` | Show close button |
+| `maskClosable` | `boolean` | `true` | Close on backdrop click |
+| `centered` | `boolean` | `true` | Center modal vertically |
+| `className` | `string` | `''` | Additional CSS classes |
+
+#### Examples
+
+```tsx
+// Basic modal
+const [open, setOpen] = useState(false);
+
+<Modal
+  open={open}
+  onClose={() => setOpen(false)}
+  title="Confirm Action"
+>
+  <p>Are you sure you want to proceed?</p>
+</Modal>
+
+// With footer
+<Modal
+  open={open}
+  onClose={() => setOpen(false)}
+  title="Delete Item"
+  footer={
+    <>
+      <Button variant="outlined" onClick={() => setOpen(false)}>
+        Cancel
+      </Button>
+      <Button variant="primary" onClick={handleDelete}>
+        Delete
+      </Button>
+    </>
+  }
+>
+  <p>This action cannot be undone.</p>
+</Modal>
+
+// Custom width
+<Modal
+  open={open}
+  onClose={() => setOpen(false)}
+  width="800px"
+>
+  <p>Wide modal content</p>
+</Modal>
+```
+
+---
+
+### Dropdown
+
+A dropdown menu component with click and hover triggers.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `DropdownMenuItem[]` | **required** | Menu items |
+| `trigger` | `'click' \| 'hover'` | `'click'` | Trigger type |
+| `placement` | `'bottomLeft' \| 'bottomRight' \| 'topLeft' \| 'topRight'` | `'bottomLeft'` | Menu placement |
+| `children` | `React.ReactNode` | **required** | Trigger element |
+| `className` | `string` | `''` | Additional CSS classes |
+| `overlayClassName` | `string` | `''` | Menu overlay classes |
+| `disabled` | `boolean` | `false` | Disabled state |
+
+#### Examples
+
+```tsx
+// Basic dropdown
+<Dropdown
+  items={[
+    { key: '1', label: 'Edit', onClick: () => console.log('Edit') },
+    { key: '2', label: 'Delete', danger: true, onClick: () => console.log('Delete') },
+  ]}
+>
+  <Button>Actions</Button>
+</Dropdown>
+
+// With icons
+<Dropdown
+  items={[
+    { key: '1', label: 'Profile', icon: <UserIcon /> },
+    { key: '2', label: 'Settings', icon: <SettingsIcon /> },
+    { key: '3', label: 'Logout', icon: <LogoutIcon />, danger: true },
+  ]}
+>
+  <Button variant="outlined">Menu</Button>
+</Dropdown>
+
+// Hover trigger
+<Dropdown trigger="hover" items={menuItems}>
+  <span>Hover me</span>
+</Dropdown>
+```
+
+---
+
+### Select
+
+A customizable select dropdown with search functionality.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `SelectOption[]` | **required** | Select options |
+| `value` | `string \| number` | `undefined` | Controlled value |
+| `defaultValue` | `string \| number` | `undefined` | Default value (uncontrolled) |
+| `placeholder` | `string` | `'Select an option'` | Placeholder text |
+| `onChange` | `(value: string \| number) => void` | `undefined` | Change handler |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Select size |
+| `fullWidth` | `boolean` | `false` | Full width mode |
+| `allowClear` | `boolean` | `false` | Show clear button |
+| `showSearch` | `boolean` | `false` | Enable search |
+| `searchPlaceholder` | `string` | `'Search...'` | Search placeholder |
+| `className` | `string` | `''` | Additional CSS classes |
+
+#### Examples
+
+```tsx
+// Basic select
+<Select
+  options={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+  ]}
+  placeholder="Choose an option"
+/>
+
+// With search
+<Select
+  options={countries}
+  showSearch
+  searchPlaceholder="Search countries..."
+  placeholder="Select country"
+/>
+
+// Controlled select
+const [value, setValue] = useState('');
+<Select
+  value={value}
+  onChange={setValue}
+  options={options}
+  allowClear
+/>
+```
+
+---
+
+### Table
+
+A feature-rich table component with pagination and sorting.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `columns` | `ColumnDef[]` | **required** | Column definitions |
+| `dataSource` | `T[]` | **required** | Table data |
+| `rowKey` | `string \| ((record: T) => string)` | `'id'` | Unique row key |
+| `pagination` | `PaginationConfig \| false` | Pagination config | Pagination settings |
+| `loading` | `boolean` | `false` | Loading state |
+| `onRow` | `(record: T, index: number) => HTMLAttributes` | `undefined` | Row props |
+| `bordered` | `boolean` | `false` | Show borders |
+| `striped` | `boolean` | `false` | Striped rows |
+| `className` | `string` | `''` | Additional CSS classes |
+
+#### Examples
+
+```tsx
+// Basic table
+const columns = [
+  { key: 'name', title: 'Name', dataIndex: 'name' },
+  { key: 'age', title: 'Age', dataIndex: 'age' },
+  {
+    key: 'status',
+    title: 'Status',
+    render: (_, record) => (
+      <Badge variant={record.active ? 'success' : 'default'}>
+        {record.active ? 'Active' : 'Inactive'}
+      </Badge>
+    )
+  },
+];
+
+<Table
+  columns={columns}
+  dataSource={data}
+  pagination={{ pageSize: 10 }}
+/>
+
+// With row click
+<Table
+  columns={columns}
+  dataSource={data}
+  onRow={(record) => ({
+    onClick: () => console.log('Row clicked', record),
+    className: 'cursor-pointer'
+  })}
+/>
+```
+
+---
+
+### TableTop
+
+A table header component with search, filters, and actions.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `undefined` | Table title |
+| `description` | `string` | `undefined` | Table description |
+| `searchPlaceholder` | `string` | `'Search...'` | Search placeholder |
+| `onSearch` | `(value: string) => void` | `undefined` | Search handler |
+| `actions` | `React.ReactNode` | `undefined` | Action buttons |
+| `filters` | `React.ReactNode` | `undefined` | Filter components |
+| `className` | `string` | `''` | Additional CSS classes |
+
+#### Examples
+
+```tsx
+<TableTop
+  title="Users"
+  description="Manage your users"
+  onSearch={handleSearch}
+  actions={
+    <>
+      <Button variant="outlined">Export</Button>
+      <Button variant="primary">Add User</Button>
+    </>
+  }
+  filters={
+    <>
+      <Select options={statusOptions} placeholder="Status" />
+      <Select options={roleOptions} placeholder="Role" />
+    </>
+  }
+/>
+```
+
+---
+
+### Steps
+
+A step indicator component for multi-step processes.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `StepItem[]` | **required** | Step items |
+| `current` | `number` | `0` | Current step index |
+| `direction` | `'horizontal' \| 'vertical'` | `'vertical'` | Layout direction |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Step size |
+| `variant` | `'default' \| 'outline'` | `'default'` | Visual variant |
+| `className` | `string` | `''` | Additional CSS classes |
+
+#### Examples
+
+```tsx
+// Vertical steps
+<Steps
+  current={1}
+  items={[
+    { title: 'Account', description: 'Create your account' },
+    { title: 'Profile', description: 'Fill your profile' },
+    { title: 'Complete', description: 'All done!' },
+  ]}
+/>
+
+// Horizontal steps
+<Steps
+  direction="horizontal"
+  current={2}
+  items={[
+    { title: 'Cart' },
+    { title: 'Shipping' },
+    { title: 'Payment' },
+    { title: 'Confirm' },
+  ]}
+/>
+
+// With custom status
+<Steps
+  items={[
+    { title: 'Step 1', status: 'finish' },
+    { title: 'Step 2', status: 'process' },
+    { title: 'Step 3', status: 'error' },
+  ]}
+/>
+```
+
+---
+
+### Progress
+
+A progress bar component with multiple status variants.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `percent` | `number` | `0` | Progress percentage (0-100) |
+| `status` | `'normal' \| 'success' \| 'exception' \| 'active'` | `'normal'` | Progress status |
+| `showInfo` | `boolean` | `true` | Show percentage text |
+| `strokeColor` | `string` | `undefined` | Custom bar color |
+| `strokeWidth` | `number` | `undefined` | Custom bar height |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Progress size |
+| `format` | `(percent: number) => ReactNode` | `undefined` | Custom format function |
+| `className` | `string` | `''` | Additional CSS classes |
+
+#### Examples
+
+```tsx
+// Basic progress
+<Progress percent={60} />
+
+// Success status
+<Progress percent={100} status="success" />
+
+// Error status
+<Progress percent={45} status="exception" />
+
+// Active animation
+<Progress percent={75} status="active" />
+
+// Custom format
+<Progress
+  percent={60}
+  format={(percent) => `${percent}% Complete`}
+/>
+
+// Different sizes
+<Progress percent={50} size="sm" />
+<Progress percent={50} size="md" />
+<Progress percent={50} size="lg" />
+```
+
+---
+
+### SelectedItemsList
+
+A list component for displaying and managing selected items.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `SelectedItem[]` | **required** | Selected items |
+| `onRemove` | `(id: string \| number) => void` | **required** | Remove handler |
+| `emptyMessage` | `string` | `'No items selected'` | Empty state message |
+| `className` | `string` | `''` | Additional CSS classes |
+| `itemClassName` | `string` | `''` | Item CSS classes |
+| `maxHeight` | `string` | `'300px'` | Max list height |
+
+#### Examples
+
+```tsx
+// Basic usage
+const [selectedItems, setSelectedItems] = useState([
+  { id: 1, label: 'Item 1', sublabel: 'Category A' },
+  { id: 2, label: 'Item 2', sublabel: 'Category B' },
+]);
+
+<SelectedItemsList
+  items={selectedItems}
+  onRemove={(id) => {
+    setSelectedItems(items => items.filter(item => item.id !== id));
+  }}
+/>
+
+// Custom styling
+<SelectedItemsList
+  items={selectedItems}
+  onRemove={handleRemove}
+  maxHeight="500px"
+  emptyMessage="No files selected"
+  className="my-4"
+/>
+```
+
+---
+
 ## Animations
 
 All components include built-in CSS animations:
@@ -255,10 +743,15 @@ All components include built-in CSS animations:
 - **Card**: Smooth fade-in animation
 - **Button**: Active scale and smooth transitions
 - **SearchInput**: Smooth focus transitions
+- **Modal**: Fade and scale animations
+- **Dropdown**: Slide animations
+- **Progress**: Active state animation
 
 Additional animation classes available:
 - `.shimmer` - Loading shimmer effect
 - `.slide-in-right` - Slide in from right animation
+- `.dropdown-slide-down` - Dropdown slide down animation
+- `.dropdown-slide-up` - Dropdown slide up animation
 
 ---
 
@@ -267,7 +760,28 @@ Additional animation classes available:
 This library is written in TypeScript and includes full type definitions. All component props are fully typed for the best development experience.
 
 ```tsx
-import type { ButtonProps, StatCardProps, SearchInputProps, CardProps } from 'shekel-fe-shared-lib';
+import type {
+  ButtonProps,
+  StatCardProps,
+  SearchInputProps,
+  CardProps,
+  BadgeProps,
+  CheckboxProps,
+  ModalProps,
+  DropdownProps,
+  DropdownMenuItem,
+  SelectProps,
+  SelectOption,
+  TableProps,
+  ColumnDef,
+  PaginationConfig,
+  TableTopProps,
+  StepsProps,
+  StepItem,
+  ProgressProps,
+  SelectedItemsListProps,
+  SelectedItem,
+} from 'shekel-fe-shared-lib';
 ```
 
 ---
@@ -286,10 +800,20 @@ npm run build
 shekel-fe-shared-lib/
 ├── src/
 │   ├── components/
+│   │   ├── Badge.tsx
 │   │   ├── Button.tsx
-│   │   ├── StatCard.tsx
-│   │   ├── SearchInput.tsx
 │   │   ├── Card.tsx
+│   │   ├── Checkbox.tsx
+│   │   ├── Dropdown.tsx
+│   │   ├── Modal.tsx
+│   │   ├── Progress.tsx
+│   │   ├── SearchInput.tsx
+│   │   ├── Select.tsx
+│   │   ├── SelectedItemsList.tsx
+│   │   ├── StatCard.tsx
+│   │   ├── Steps.tsx
+│   │   ├── Table.tsx
+│   │   ├── TableTop.tsx
 │   │   └── index.ts
 │   ├── styles.css
 │   └── index.ts
@@ -315,13 +839,31 @@ import {
   Button,
   StatCard,
   SearchInput,
-  Card
+  Card,
+  Table,
+  TableTop,
+  Badge,
+  Dropdown
 } from 'shekel-fe-shared-lib';
 import 'shekel-fe-shared-lib/styles.css';
 
 function TrackingDashboard() {
   const [selectedStat, setSelectedStat] = useState('all');
 
+  const columns = [
+    { key: 'id', title: 'ID', dataIndex: 'id' },
+    { key: 'name', title: 'Name', dataIndex: 'name' },
+    {
+      key: 'status',
+      title: 'Status',
+      render: (_, record) => (
+        <Badge variant={record.status === 'active' ? 'success' : 'default'}>
+          {record.status}
+        </Badge>
+      )
+    },
+  ];
+
   return (
     <div className="p-6">
       {/* Header */}
@@ -354,30 +896,27 @@ function TrackingDashboard() {
         <StatCard label="Demurrage" value={0} />
       </div>
 
-      {/* Actions and Search */}
-      <div className="flex justify-between items-center mb-6">
-        <h2 className="text-lg font-semibold">Recent Activity</h2>
-        <div className="flex gap-3">
-          <Button variant="outlined" icon={<DownloadIcon />}>
-            Download report
-          </Button>
-          <Button variant="outlined" icon={<FilterIcon />}>
-            Filter
-          </Button>
-          <SearchInput
-            icon={true}
-            placeholder="Search a shipment"
-            className="w-80"
-          />
-        </div>
-      </div>
-
-      {/* Content */}
-      <Card>
-        <p className="text-center text-gray-500 py-12">
-          Your gateway to seamless shipment tracking
-        </p>
-      </Card>
+      {/* Table with search and actions */}
+      <TableTop
+        title="Recent Activity"
+        onSearch={handleSearch}
+        actions={
+          <>
+            <Button variant="outlined" icon={<DownloadIcon />}>
+              Download report
+            </Button>
+            <Button variant="outlined" icon={<FilterIcon />}>
+              Filter
+            </Button>
+          </>
+        }
+      />
+
+      <Table
+        columns={columns}
+        dataSource={shipments}
+        pagination={{ pageSize: 10 }}
+      />
     </div>
   );
 }