-

web-components/README.md

@@ -12,6 +12,132 @@ npm install @skybridge/web-components
 
 ## Components
 
+### StatusBadge
+
+A standardized badge component with consistent color schemes across all microfrontends.
+
+```tsx
+import { StatusBadge, UserRoleBadge, RuntimeBadge } from '@skybridge/web-components';
+
+// Generic usage
+<StatusBadge value="active" variant="status" />
+
+// Context-specific usage
+<UserRoleBadge value="admin" />
+<RuntimeBadge value="nodejs18" />
+
+// Variants: 'status', 'role', 'runtime', 'type', 'severity', 'execution'
+```
+
+### EmptyState
+
+A comprehensive empty state component for consistent empty data handling.
+
+```tsx
+import { EmptyState, NoUsersState, NoSearchResults } from '@skybridge/web-components';
+
+// Generic empty state
+<EmptyState
+  variant="no-data"
+  context="users"
+  onAdd={() => handleAddUser()}
+  onRefresh={() => handleRefresh()}
+/>
+
+// Convenience components
+<NoUsersState onAddUser={handleAddUser} />
+<NoSearchResults onClearFilters={handleClear} onRefresh={handleRefresh} />
+```
+
+### Sidebar
+
+A flexible base sidebar component for consistent slide-out panels.
+
+```tsx
+import { Sidebar, DetailsSidebar, useSidebar } from '@skybridge/web-components';
+
+const MySidebar = () => {
+  const { opened, open, close } = useSidebar();
+  
+  return (
+    <Sidebar
+      opened={opened}
+      onClose={close}
+      title="My Panel"
+      width={400}
+    >
+      <p>Content goes here</p>
+    </Sidebar>
+  );
+};
+
+// For item details
+<DetailsSidebar
+  opened={opened}
+  onClose={close}
+  itemName="John Doe"
+  itemType="User"
+  status={<StatusBadge value="active" />}
+  editButton={<Button onClick={handleEdit}>Edit</Button>}
+>
+  <UserDetails user={selectedUser} />
+</DetailsSidebar>
+```
+
+### ActionMenu
+
+A standardized action menu component for table rows and items.
+
+```tsx
+import { ActionMenu, getUserActions, createEditAction } from '@skybridge/web-components';
+
+// Using pre-built action sets
+<ActionMenu
+  item={user}
+  actions={getUserActions(handleEdit, handleDelete, handleViewDetails)}
+/>
+
+// Custom actions
+<ActionMenu
+  item={item}
+  actions={[
+    createEditAction(handleEdit),
+    createDeleteAction(handleDelete, 'user'),
+    {
+      key: 'custom',
+      label: 'Custom Action',
+      icon: IconSettings,
+      onClick: handleCustomAction,
+    }
+  ]}
+/>
+```
+
+### LoadingState
+
+Comprehensive loading states for different scenarios.
+
+```tsx
+import { 
+  LoadingState, 
+  TableLoadingState, 
+  PageLoadingState,
+  useLoadingState 
+} from '@skybridge/web-components';
+
+// Different loading variants
+<LoadingState variant="spinner" message="Loading data..." />
+<LoadingState variant="progress" progress={75} progressLabel="3/4 complete" />
+<LoadingState variant="skeleton-table" rows={5} columns={3} />
+
+// Convenience components
+<TableLoadingState rows={10} />
+<PageLoadingState message="Loading application..." />
+
+// Hook for loading state management
+const { loading, startLoading, stopLoading, updateProgress } = useLoadingState();
+```
+
 ### FormSidebar
 
 A reusable sidebar form component that handles create/edit operations with validation.
@@ -288,14 +414,18 @@ The component library is designed to:
 
 ## Common Patterns Extracted
 
-Based on analysis of the existing microfrontends, this library extracts these common patterns:
+Based on deep analysis of the existing microfrontends, this library extracts these common patterns:
 
-1. **Sidebar Forms**: All microfrontends use similar slide-out forms
-2. **Data Tables**: Consistent table layouts with actions and filtering
-3. **API Integration**: Standard CRUD operations with error handling
-4. **Validation**: Common validation rules and patterns
-5. **Notifications**: Standardized success/error messaging
-6. **Filtering**: Client-side search and filter functionality
+1. **Status Display**: Standardized color schemes and formatting for status badges across all apps
+2. **Empty States**: Consistent empty data handling with contextual actions and messaging
+3. **Sidebar Components**: All microfrontends use similar slide-out forms and detail panels
+4. **Action Menus**: Standardized table actions with confirmation dialogs and consistent UX
+5. **Loading States**: Multiple loading variants (spinners, progress, skeletons) for different scenarios
+6. **Form Handling**: Reusable form sidebars with validation and error handling
+7. **Data Tables**: Consistent table layouts with actions, filtering, and pagination
+8. **API Integration**: Standard CRUD operations with error handling and state management
+9. **Validation**: Common validation rules and patterns with consistent error messages
+10. **Notifications**: Standardized success/error messaging and CRUD operation feedback
 
 ## Compatibility