@delightui/components 0.1.110 → 0.1.112

package/docs/components/utils/RenderStateView.md

@@ -2,7 +2,7 @@
 
 ## Description
 
-A utility component that manages different rendering states for data-driven components. RenderStateView provides a clean way to handle loading, empty, and filled states with customizable components for each state, making it perfect for data fetching scenarios where you need to display different content based on the presence and loading state of data.
+A utility component that manages different rendering states for data-driven components. RenderStateView provides a clean way to handle error, loading, empty, and filled states with customizable components for each state, making it perfect for data fetching scenarios where you need to display different content based on the presence, loading state, and error state of data.
 
 ## Aliases
 
@@ -18,11 +18,13 @@ A utility component that manages different rendering states for data-driven comp
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
 | `className` | `string` | - | No | Additional CSS class names |
-| `data` | `T \| null` | - | No | The data to render or check for presence |
+| `data` | `T \| null` | - | No | The data to render. If the data is null, the empty component will be rendered. If the data is not null, the filled component will be rendered. |
 | `isLoading` | `boolean` | - | No | Whether data is currently loading |
+| `errorData` | `Error \| string \| null` | - | No | Error data to trigger error state rendering |
 | `filled` | `React.ComponentType<{ data: T } & P>` | - | No | Component to render when data is present |
 | `empty` | `React.ComponentType<P>` | - | No | Component to render when no data |
 | `loading` | `React.ComponentType<P>` | - | No | Component to render during loading state |
+| `error` | `React.ComponentType<{ error: Error \| string } & P>` | - | No | Component to render when error occurs |
 
 This component does not add standard HTML attributes as it renders different components based on state.
 
@@ -88,7 +90,7 @@ function BasicRenderStateExample() {
       </Button>
       
       <RenderStateView
-        data={users.length > 0 ? users : null}
+        data={users}
         isLoading={isLoading}
         loading={LoadingComponent}
         empty={EmptyComponent}
@@ -191,7 +193,7 @@ function ProductCatalogExample() {
       />
 
       <RenderStateView
-        data={products.length > 0 ? products : null}
+        data={products}
         isLoading={isLoading}
         loading={LoadingSpinner}
         empty={EmptyState}
@@ -539,7 +541,7 @@ function ShoppingCartExample() {
   return (
     <div style={{ padding: '20px', maxWidth: '600px' }}>
       <RenderStateView
-        data={cartItems.length > 0 ? cartItems : null}
+        data={cartItems}
         isLoading={isLoading}
         loading={CartLoading}
         empty={EmptyCart}
@@ -626,7 +628,7 @@ function FileUploadManagerExample() {
       </Text>
 
       <RenderStateView
-        data={files.length > 0 ? files : null}
+        data={files}
         isLoading={isLoading}
         loading={UploadingState}
         empty={NoFilesState}
@@ -637,28 +639,29 @@ function FileUploadManagerExample() {
 }
 ```
 
-### Custom Error States
+### Error State Handling
 
 ```tsx
 import { RenderStateView, Text, Button, Card } from '@delightui/components';
 
-function CustomErrorStatesExample() {
+function ErrorStateExample() {
   const [data, setData] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string>('');
+  const [errorData, setErrorData] = useState<Error | string | null>(null);
 
   const fetchData = async (shouldFail = false) => {
     setIsLoading(true);
-    setError('');
+    setErrorData(null);
+    setData(null);
+    
     try {
       await new Promise(resolve => setTimeout(resolve, 1000));
       if (shouldFail) {
-        throw new Error('Network error occurred');
+        throw new Error('Network connection failed');
       }
-      setData({ message: 'Data loaded successfully!' });
+      setData({ message: 'Data loaded successfully!', timestamp: new Date().toISOString() });
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unknown error');
-      setData(null);
+      setErrorData(err instanceof Error ? err : 'Unknown error occurred');
     } finally {
       setIsLoading(false);
     }
@@ -670,56 +673,152 @@ function CustomErrorStatesExample() {
     </Card>
   );
 
-  const ErrorComponent = () => (
+  const ErrorComponent = ({ error }: { error: Error | string }) => (
     <Card style={{ padding: '40px', textAlign: 'center', backgroundColor: '#ffebee' }}>
       <Text size="large">❌ Error Occurred</Text>
-      <Text>{error}</Text>
+      <Text>{typeof error === 'string' ? error : error.message}</Text>
       <div style={{ marginTop: '20px', display: 'flex', gap: '12px', justifyContent: 'center' }}>
         <Button onClick={() => fetchData(false)}>Retry</Button>
-        <Button type="Outlined" onClick={() => setError('')}>Dismiss</Button>
+        <Button type="Outlined" onClick={() => setErrorData(null)}>Dismiss</Button>
       </div>
     </Card>
   );
 
+  const EmptyComponent = () => (
+    <Card style={{ padding: '40px', textAlign: 'center' }}>
+      <Text>📭 No data available</Text>
+      <Button onClick={() => fetchData(false)} style={{ marginTop: '16px' }}>
+        Load Data
+      </Button>
+    </Card>
+  );
+
   const SuccessComponent = ({ data }: { data: any }) => (
     <Card style={{ padding: '40px', textAlign: 'center', backgroundColor: '#e8f5e8' }}>
       <Text size="large">✅ Success!</Text>
       <Text>{data.message}</Text>
+      <Text size="small">Loaded at: {data.timestamp}</Text>
     </Card>
   );
 
-  // Use error state to determine what to show
-  const currentData = error ? null : data;
-
   return (
     <div style={{ padding: '20px', maxWidth: '400px' }}>
       <Text size="xl" weight="Bold" style={{ marginBottom: '20px' }}>
-        Error Handling Demo
+        Error State Demo
       </Text>
 
       <div style={{ marginBottom: '20px', display: 'flex', gap: '12px' }}>
         <Button onClick={() => fetchData(false)}>Load Success</Button>
         <Button onClick={() => fetchData(true)}>Trigger Error</Button>
+        <Button type="Outlined" onClick={() => { setData(null); setErrorData(null); }}>
+          Reset
+        </Button>
       </div>
 
-      {error ? (
-        <ErrorComponent />
-      ) : (
-        <RenderStateView
-          data={currentData}
-          isLoading={isLoading}
-          loading={LoadingComponent}
-          empty={() => (
-            <Card style={{ padding: '40px', textAlign: 'center' }}>
-              <Text>📭 No data available</Text>
-              <Button onClick={() => fetchData(false)} style={{ marginTop: '16px' }}>
-                Load Data
-              </Button>
-            </Card>
-          )}
-          filled={SuccessComponent}
-        />
-      )}
+      <RenderStateView
+        data={data}
+        isLoading={isLoading}
+        errorData={errorData}
+        loading={LoadingComponent}
+        error={ErrorComponent}
+        empty={EmptyComponent}
+        filled={SuccessComponent}
+      />
+    </div>
+  );
+}
+```
+
+### API Error Handling
+
+```tsx
+import { RenderStateView, Text, Button, Card } from '@delightui/components';
+
+function ApiErrorExample() {
+  const [users, setUsers] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [apiError, setApiError] = useState<Error | null>(null);
+
+  const fetchUsers = async () => {
+    setIsLoading(true);
+    setApiError(null);
+    
+    try {
+      const response = await fetch('/api/users');
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      const userData = await response.json();
+      setUsers(userData);
+    } catch (err) {
+      setApiError(err instanceof Error ? err : new Error('Network request failed'));
+      setUsers([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const LoadingUsers = () => (
+    <Card style={{ padding: '30px', textAlign: 'center' }}>
+      <Text>👥 Loading users...</Text>
+    </Card>
+  );
+
+  const ApiErrorDisplay = ({ error }: { error: Error }) => (
+    <Card style={{ padding: '30px', textAlign: 'center', backgroundColor: '#fff3e0' }}>
+      <Text size="large">⚠️ API Error</Text>
+      <Text>{error.message}</Text>
+      <Text size="small" style={{ marginTop: '8px' }}>
+        Please check your network connection and try again
+      </Text>
+      <Button onClick={fetchUsers} style={{ marginTop: '16px' }}>
+        Retry Request
+      </Button>
+    </Card>
+  );
+
+  const NoUsers = () => (
+    <Card style={{ padding: '30px', textAlign: 'center' }}>
+      <Text>👤 No users found</Text>
+      <Button onClick={fetchUsers} style={{ marginTop: '16px' }}>
+        Load Users
+      </Button>
+    </Card>
+  );
+
+  const UsersList = ({ data }: { data: any[] }) => (
+    <div>
+      <Text weight="Bold" style={{ marginBottom: '16px' }}>
+        Users ({data.length})
+      </Text>
+      {data.map(user => (
+        <Card key={user.id} style={{ padding: '16px', marginBottom: '8px' }}>
+          <Text weight="Bold">{user.name}</Text>
+          <Text size="small">{user.email}</Text>
+        </Card>
+      ))}
+    </div>
+  );
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '500px' }}>
+      <Text size="xl" weight="Bold" style={{ marginBottom: '20px' }}>
+        API Error Handling
+      </Text>
+
+      <Button onClick={fetchUsers} disabled={isLoading} style={{ marginBottom: '20px' }}>
+        Fetch Users
+      </Button>
+
+      <RenderStateView
+        data={users}
+        isLoading={isLoading}
+        errorData={apiError}
+        loading={LoadingUsers}
+        error={ApiErrorDisplay}
+        empty={NoUsers}
+        filled={UsersList}
+      />
     </div>
   );
 }