@pushwoosh/dumb-components 1.1.148 → 1.1.150

package/Skeleton/ai-documentation.md

@@ -1,574 +0,0 @@
-# Skeleton Components - @pushwoosh/dumb-components
-
-## Overview
-
-- **Component Name**: Skeleton (System)
-- **Import Path**: `@pushwoosh/dumb-components`
-- **Files**:
-  - `/src/Skeleton/TextSkeleton.tsx` - Text placeholder component
-  - `/src/Skeleton/styles.ts` - Styled skeleton components (RectangularSkeleton, CircularSkeleton)
-  - `/src/Skeleton/types.ts` - TypeScript type definitions
-  - `/src/Skeleton/index.ts` - Component exports
-- **Type**: Loading/Placeholder
-- **Description**: A collection of skeleton loading components that provide placeholder UI while content is loading. Includes rectangular, circular, and text skeletons with pulsing animations and customizable styling.
-
-## TypeScript Interfaces
-
-```typescript
-export type SkeletonBorderRadiusProps = {
-  borderRadius?: number | string;
-};
-
-export type SkeletonCommonProps = {
-  color?: string;
-};
-
-export type RectangularSkeletonProps = SkeletonCommonProps & SkeletonBorderRadiusProps & {
-  width: number | string;
-  height: number | string;
-};
-
-export type CircularSkeletonProps = SkeletonCommonProps & {
-  diameter: number | string;
-};
-
-export type TextSkeletonProps = SkeletonCommonProps & SkeletonBorderRadiusProps & {
-  width?: number | string;
-};
-```
-
-## Import & Usage
-
-```typescript
-import { TextSkeleton, RectangularSkeleton, CircularSkeleton } from '@pushwoosh/dumb-components';
-
-// Basic text skeleton
-function BasicTextSkeleton() {
-  return (
-    <div>
-      <TextSkeleton width="200px" />
-      <TextSkeleton width="150px" />
-      <TextSkeleton width="180px" />
-    </div>
-  );
-}
-
-// Profile card skeleton
-function ProfileCardSkeleton() {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
-      <CircularSkeleton diameter="60px" />
-      <div>
-        <TextSkeleton width="120px" />
-        <TextSkeleton width="80px" />
-      </div>
-    </div>
-  );
-}
-
-// Image placeholder
-function ImageSkeleton() {
-  return (
-    <RectangularSkeleton 
-      width="300px" 
-      height="200px" 
-      borderRadius="8px" 
-    />
-  );
-}
-```
-
-## Advanced Examples
-
-```typescript
-// Article list skeleton
-function ArticleListSkeleton() {
-  const skeletonItems = Array.from({ length: 5 }, (_, index) => (
-    <div 
-      key={index}
-      style={{ 
-        display: 'flex', 
-        gap: '16px', 
-        padding: '16px',
-        borderBottom: '1px solid #eee'
-      }}
-    >
-      {/* Article image */}
-      <RectangularSkeleton 
-        width="120px" 
-        height="80px" 
-        borderRadius="4px" 
-      />
-      
-      {/* Article content */}
-      <div style={{ flex: 1 }}>
-        <TextSkeleton width="80%" />
-        <div style={{ margin: '8px 0' }}>
-          <TextSkeleton width="100%" />
-          <TextSkeleton width="60%" />
-        </div>
-        <div style={{ display: 'flex', gap: '12px' }}>
-          <TextSkeleton width="80px" />
-          <TextSkeleton width="60px" />
-          <TextSkeleton width="100px" />
-        </div>
-      </div>
-    </div>
-  ));
-
-  return <div>{skeletonItems}</div>;
-}
-
-// Data table skeleton
-function TableSkeleton() {
-  const rows = 8;
-  const columns = ['Name', 'Email', 'Role', 'Status', 'Actions'];
-
-  return (
-    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
-      <thead>
-        <tr>
-          {columns.map((column, index) => (
-            <th 
-              key={index}
-              style={{ 
-                padding: '12px', 
-                textAlign: 'left', 
-                borderBottom: '1px solid #eee' 
-              }}
-            >
-              {column}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {Array.from({ length: rows }, (_, rowIndex) => (
-          <tr key={rowIndex}>
-            {columns.map((_, colIndex) => (
-              <td 
-                key={colIndex}
-                style={{ 
-                  padding: '12px', 
-                  borderBottom: '1px solid #f5f5f5' 
-                }}
-              >
-                <TextSkeleton width={
-                  colIndex === 0 ? '120px' : 
-                  colIndex === 1 ? '180px' : 
-                  colIndex === 2 ? '80px' : 
-                  colIndex === 3 ? '60px' : '40px'
-                } />
-              </td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-
-// Card grid skeleton
-function CardGridSkeleton() {
-  const skeletonCards = Array.from({ length: 12 }, (_, index) => (
-    <div 
-      key={index}
-      style={{
-        border: '1px solid #eee',
-        borderRadius: '8px',
-        padding: '16px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '12px'
-      }}
-    >
-      <RectangularSkeleton 
-        width="100%" 
-        height="160px" 
-        borderRadius="4px" 
-      />
-      <TextSkeleton width="80%" />
-      <TextSkeleton width="100%" />
-      <TextSkeleton width="60%" />
-      
-      <div style={{ 
-        display: 'flex', 
-        justifyContent: 'space-between', 
-        alignItems: 'center',
-        marginTop: '8px'
-      }}>
-        <TextSkeleton width="50px" />
-        <RectangularSkeleton 
-          width="80px" 
-          height="32px" 
-          borderRadius="4px" 
-        />
-      </div>
-    </div>
-  ));
-
-  return (
-    <div style={{
-      display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
-      gap: '20px'
-    }}>
-      {skeletonCards}
-    </div>
-  );
-}
-
-// Dashboard skeleton
-function DashboardSkeleton() {
-  return (
-    <div style={{ padding: '20px' }}>
-      {/* Header */}
-      <div style={{ marginBottom: '30px' }}>
-        <TextSkeleton width="200px" />
-        <div style={{ marginTop: '8px' }}>
-          <TextSkeleton width="300px" />
-        </div>
-      </div>
-
-      {/* Stats cards */}
-      <div style={{
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
-        gap: '20px',
-        marginBottom: '30px'
-      }}>
-        {Array.from({ length: 4 }, (_, index) => (
-          <div 
-            key={index}
-            style={{
-              padding: '20px',
-              border: '1px solid #eee',
-              borderRadius: '8px'
-            }}
-          >
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-              <TextSkeleton width="80px" />
-              <CircularSkeleton diameter="40px" />
-            </div>
-            <div style={{ marginTop: '16px' }}>
-              <TextSkeleton width="60px" />
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Chart area */}
-      <div style={{
-        display: 'grid',
-        gridTemplateColumns: '2fr 1fr',
-        gap: '20px',
-        marginBottom: '30px'
-      }}>
-        <div style={{
-          padding: '20px',
-          border: '1px solid #eee',
-          borderRadius: '8px'
-        }}>
-          <TextSkeleton width="150px" />
-          <div style={{ marginTop: '16px' }}>
-            <RectangularSkeleton 
-              width="100%" 
-              height="300px" 
-              borderRadius="4px" 
-            />
-          </div>
-        </div>
-        
-        <div style={{
-          padding: '20px',
-          border: '1px solid #eee',
-          borderRadius: '8px'
-        }}>
-          <TextSkeleton width="120px" />
-          <div style={{ marginTop: '16px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
-            {Array.from({ length: 6 }, (_, index) => (
-              <div key={index} style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                <CircularSkeleton diameter="24px" />
-                <TextSkeleton width="80px" />
-                <TextSkeleton width="40px" />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Message list skeleton
-function MessageListSkeleton() {
-  return (
-    <div style={{ maxWidth: '600px' }}>
-      {Array.from({ length: 8 }, (_, index) => (
-        <div 
-          key={index}
-          style={{
-            display: 'flex',
-            gap: '12px',
-            padding: '16px',
-            borderBottom: '1px solid #f0f0f0'
-          }}
-        >
-          <CircularSkeleton diameter="48px" />
-          <div style={{ flex: 1 }}>
-            <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '4px' }}>
-              <TextSkeleton width="100px" />
-              <TextSkeleton width="60px" />
-            </div>
-            <TextSkeleton width="100%" />
-            <TextSkeleton width="80%" />
-            <div style={{ marginTop: '8px', display: 'flex', gap: '8px' }}>
-              <TextSkeleton width="40px" />
-              <TextSkeleton width="50px" />
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// Custom styled skeleton
-function CustomStyledSkeleton() {
-  return (
-    <div>
-      <h3>Custom Colors</h3>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-        <TextSkeleton width="200px" color="#e3f2fd" />
-        <TextSkeleton width="180px" color="#f3e5f5" />
-        <TextSkeleton width="220px" color="#e8f5e8" />
-      </div>
-
-      <h3>Custom Border Radius</h3>
-      <div style={{ display: 'flex', gap: '16px' }}>
-        <RectangularSkeleton 
-          width="100px" 
-          height="100px" 
-          borderRadius="0" 
-          color="#ffebee"
-        />
-        <RectangularSkeleton 
-          width="100px" 
-          height="100px" 
-          borderRadius="12px" 
-          color="#f1f8e9"
-        />
-        <RectangularSkeleton 
-          width="100px" 
-          height="100px" 
-          borderRadius="50%" 
-          color="#e8eaf6"
-        />
-      </div>
-    </div>
-  );
-}
-
-// Conditional skeleton loading
-function ConditionalSkeletonExample() {
-  const [loading, setLoading] = useState(true);
-  const [data, setData] = useState(null);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setData({
-        title: "Sample Article Title",
-        content: "This is the actual content that was loaded from the server.",
-        author: "John Doe",
-        date: "2024-01-15"
-      });
-      setLoading(false);
-    }, 3000);
-
-    return () => clearTimeout(timer);
-  }, []);
-
-  const toggleLoading = () => {
-    setLoading(true);
-    setData(null);
-    
-    setTimeout(() => {
-      setData({
-        title: "New Article Title",
-        content: "Updated content after reload.",
-        author: "Jane Smith", 
-        date: "2024-01-16"
-      });
-      setLoading(false);
-    }, 2000);
-  };
-
-  return (
-    <div style={{ maxWidth: '600px' }}>
-      <button 
-        onClick={toggleLoading}
-        disabled={loading}
-        style={{ marginBottom: '20px' }}
-      >
-        Reload Content
-      </button>
-
-      <article style={{
-        padding: '20px',
-        border: '1px solid #eee',
-        borderRadius: '8px'
-      }}>
-        {loading ? (
-          <>
-            <TextSkeleton width="70%" />
-            <div style={{ margin: '16px 0' }}>
-              <TextSkeleton width="100%" />
-              <TextSkeleton width="100%" />
-              <TextSkeleton width="80%" />
-            </div>
-            <div style={{ display: 'flex', gap: '16px' }}>
-              <TextSkeleton width="100px" />
-              <TextSkeleton width="80px" />
-            </div>
-          </>
-        ) : (
-          <>
-            <h2>{data?.title}</h2>
-            <p>{data?.content}</p>
-            <div style={{ display: 'flex', gap: '16px', color: '#666', fontSize: '14px' }}>
-              <span>By {data?.author}</span>
-              <span>{data?.date}</span>
-            </div>
-          </>
-        )}
-      </article>
-    </div>
-  );
-}
-```
-
-## Props Reference
-
-### TextSkeleton
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| `width` | `number \| string` | `undefined` | No | Width of the skeleton text |
-| `color` | `string` | `'#ddd'` | No | Background color of the skeleton |
-| `borderRadius` | `number \| string` | `'4px'` | No | Border radius of the skeleton |
-| `children` | `ReactNode` | `'-'` | No | Fallback content (usually not needed) |
-
-### RectangularSkeleton
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| `width` | `number \| string` | - | Yes | Width of the skeleton |
-| `height` | `number \| string` | - | Yes | Height of the skeleton |
-| `color` | `string` | `'#ddd'` | No | Background color of the skeleton |
-| `borderRadius` | `number \| string` | `'initial'` | No | Border radius of the skeleton |
-
-### CircularSkeleton
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| `diameter` | `number \| string` | - | Yes | Diameter of the circular skeleton |
-| `color` | `string` | `'#ddd'` | No | Background color of the skeleton |
-
-## AI Agent Guidelines
-
-### Recommended Patterns
-
-1. **Match Content Structure**: Skeleton should mirror actual content layout
-```typescript
-// Good - matches actual structure
-{loading ? (
-  <div>
-    <TextSkeleton width="200px" />  {/* Title */}
-    <TextSkeleton width="100%" />   {/* Paragraph 1 */}
-    <TextSkeleton width="80%" />    {/* Paragraph 2 */}
-  </div>
-) : (
-  <div>
-    <h2>{data.title}</h2>
-    <p>{data.paragraph1}</p>
-    <p>{data.paragraph2}</p>
-  </div>
-)}
-```
-
-2. **Use Appropriate Types**: Choose the right skeleton for content type
-```typescript
-// Avatars/profile images
-<CircularSkeleton diameter="48px" />
-
-// Images/cards
-<RectangularSkeleton width="300px" height="200px" borderRadius="8px" />
-
-// Text content
-<TextSkeleton width="80%" />
-```
-
-3. **Consistent Spacing**: Maintain consistent gaps and padding
-```typescript
-<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-  <TextSkeleton width="70%" />
-  <TextSkeleton width="100%" />
-  <TextSkeleton width="60%" />
-</div>
-```
-
-### Common Mistakes to Avoid
-
-1. **Mismatched Layout**: Don't create skeletons that don't match the actual content
-2. **Too Generic**: Avoid using the same skeleton pattern for different content types
-3. **Poor Performance**: Don't render too many skeleton elements unnecessarily
-4. **Missing Animation**: The pulse animation is built-in, don't try to override it
-5. **Wrong Dimensions**: Ensure skeleton dimensions match actual content dimensions
-
-### Integration Tips
-
-1. **Loading States**: Use with async data loading
-```typescript
-const [loading, setLoading] = useState(true);
-const [data, setData] = useState(null);
-
-useEffect(() => {
-  fetchData().then(result => {
-    setData(result);
-    setLoading(false);
-  });
-}, []);
-
-return loading ? <ArticleSkeleton /> : <Article data={data} />;
-```
-
-2. **Reusable Components**: Create skeleton components for common patterns
-```typescript
-const ProfileSkeleton = () => (
-  <div style={{ display: 'flex', gap: '16px' }}>
-    <CircularSkeleton diameter="60px" />
-    <div>
-      <TextSkeleton width="120px" />
-      <TextSkeleton width="80px" />
-    </div>
-  </div>
-);
-```
-
-3. **Responsive Design**: Use percentage widths for responsive skeletons
-```typescript
-<TextSkeleton width="100%" />  // Full width
-<TextSkeleton width="75%" />   // 3/4 width
-<TextSkeleton width="50%" />   // Half width
-```
-
-4. **Progressive Loading**: Show skeletons while data loads progressively
-5. **Error States**: Consider skeleton alternatives for error states
-
-## Related Components
-
-- **Spinner**: Alternative loading indicator
-- **ProgressBar**: For progress-based loading
-- **Card**: Often used with skeleton versions
-- **Avatar**: Often has circular skeleton equivalents
-- **Table**: Often needs table-specific skeleton patterns