@beyondcorp/beyond-ui 1.2.53 → 1.2.57

package/dist/components/Blog/data/sampleData.js

@@ -0,0 +1,388 @@
+// Sample blog posts for demonstration
+const sampleBlogPosts = [
+    {
+        id: '1',
+        title: 'Building Modern React Applications with TypeScript',
+        slug: 'building-modern-react-typescript',
+        content: `# Building Modern React Applications with TypeScript
+
+## Introduction
+
+TypeScript has become an essential tool for React developers who want to build scalable, maintainable applications. In this comprehensive guide, we'll explore the best practices for combining React with TypeScript.
+
+## Why TypeScript with React?
+
+TypeScript brings several advantages to React development:
+
+- **Type Safety**: Catch errors at compile time rather than runtime
+- **Better Developer Experience**: Enhanced IntelliSense and autocomplete
+- **Refactoring Confidence**: Safe code changes with compiler verification
+- **Documentation**: Types serve as living documentation
+
+## Setting Up Your Project
+
+\`\`\`bash
+npx create-react-app my-app --template typescript
+cd my-app
+npm start
+\`\`\`
+
+## Component Patterns
+
+### Functional Components with Props
+
+\`\`\`tsx
+interface ButtonProps {
+  variant: 'primary' | 'secondary';
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+
+const Button: React.FC<ButtonProps> = ({ variant, children, onClick }) => {
+  return (
+    <button 
+      className={\`btn btn-\${variant}\`}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+\`\`\`
+
+## Advanced Patterns
+
+### Custom Hooks
+
+Custom hooks are a powerful way to share stateful logic between components:
+
+\`\`\`tsx
+function useCounter(initialValue: number = 0) {
+  const [count, setCount] = useState(initialValue);
+  
+  const increment = useCallback(() => setCount(c => c + 1), []);
+  const decrement = useCallback(() => setCount(c => c - 1), []);
+  const reset = useCallback(() => setCount(initialValue), [initialValue]);
+  
+  return { count, increment, decrement, reset };
+}
+\`\`\`
+
+## Best Practices
+
+1. **Use strict TypeScript configuration**
+2. **Define clear prop interfaces**
+3. **Leverage union types for variants**
+4. **Use generic types for reusable components**
+5. **Implement proper error boundaries**
+
+## Conclusion
+
+TypeScript and React make a powerful combination for building modern web applications. By following these patterns and best practices, you can create applications that are both robust and maintainable.`,
+        excerpt: 'Learn how to build scalable React applications using TypeScript with modern patterns and best practices.',
+        author: {
+            id: 'author1',
+            name: 'Sarah Johnson',
+            avatar: 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=64',
+            bio: 'Senior Frontend Developer with 8+ years of experience in React and TypeScript.',
+        },
+        publishedAt: '2024-01-15T10:00:00Z',
+        updatedAt: '2024-01-16T14:30:00Z',
+        tags: ['React', 'TypeScript', 'Frontend', 'JavaScript'],
+        category: 'Development',
+        readingTime: 8,
+        featured: true,
+        status: 'published',
+        seoMeta: {
+            title: 'Building Modern React Applications with TypeScript - Complete Guide',
+            description: 'Learn how to build scalable React applications using TypeScript with modern patterns and best practices.',
+            keywords: ['React', 'TypeScript', 'Frontend Development', 'JavaScript'],
+            ogImage: 'https://images.pexels.com/photos/11035380/pexels-photo-11035380.jpeg?auto=compress&cs=tinysrgb&w=1200',
+        },
+        stats: {
+            views: 1250,
+            likes: 89,
+            comments: 23,
+            shares: 45,
+        },
+    },
+    {
+        id: '2',
+        title: 'CSS Grid vs Flexbox: When to Use Each',
+        slug: 'css-grid-vs-flexbox',
+        content: `# CSS Grid vs Flexbox: When to Use Each
+
+## Understanding the Fundamentals
+
+Both CSS Grid and Flexbox are powerful layout systems, but they serve different purposes and excel in different scenarios.
+
+## CSS Grid: Two-Dimensional Layouts
+
+CSS Grid is designed for two-dimensional layouts where you need to control both rows and columns simultaneously.
+
+### Best Use Cases:
+- Page layouts with header, sidebar, main content, and footer
+- Card grids with consistent sizing
+- Complex dashboard layouts
+- Magazine-style layouts
+
+### Example:
+\`\`\`css
+.grid-container {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas: 
+    "sidebar header"
+    "sidebar main"
+    "footer footer";
+  min-height: 100vh;
+}
+\`\`\`
+
+## Flexbox: One-Dimensional Layouts
+
+Flexbox excels at one-dimensional layouts, either in a row or column direction.
+
+### Best Use Cases:
+- Navigation bars
+- Button groups
+- Centering content
+- Distributing space between items
+
+### Example:
+\`\`\`css
+.flex-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+}
+\`\`\`
+
+## Decision Framework
+
+Choose **CSS Grid** when:
+- You need to control both dimensions
+- Creating overall page layouts
+- Working with complex, overlapping designs
+
+Choose **Flexbox** when:
+- Working with one-dimensional layouts
+- Aligning items within a container
+- Creating responsive navigation
+
+## Conclusion
+
+Both CSS Grid and Flexbox are essential tools in modern web development. Understanding when to use each will help you create more efficient and maintainable layouts.`,
+        excerpt: 'A comprehensive guide to understanding when to use CSS Grid versus Flexbox for your layout needs.',
+        author: {
+            id: 'author2',
+            name: 'Mike Chen',
+            avatar: 'https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=64',
+            bio: 'CSS specialist and design systems architect with expertise in modern layout techniques.',
+        },
+        publishedAt: '2024-01-10T09:00:00Z',
+        tags: ['CSS', 'Layout', 'Grid', 'Flexbox', 'Web Design'],
+        category: 'Design',
+        readingTime: 6,
+        featured: false,
+        status: 'published',
+        seoMeta: {
+            title: 'CSS Grid vs Flexbox: Complete Comparison Guide',
+            description: 'Learn when to use CSS Grid versus Flexbox with practical examples and decision frameworks.',
+            keywords: ['CSS Grid', 'Flexbox', 'CSS Layout', 'Web Design'],
+        },
+        stats: {
+            views: 890,
+            likes: 67,
+            comments: 15,
+            shares: 32,
+        },
+    },
+    {
+        id: '3',
+        title: 'Accessibility in Modern Web Development',
+        slug: 'accessibility-modern-web-development',
+        content: `# Accessibility in Modern Web Development
+
+## Why Accessibility Matters
+
+Web accessibility ensures that websites and applications are usable by everyone, including people with disabilities. It's not just the right thing to do—it's also a legal requirement in many jurisdictions.
+
+## WCAG Guidelines
+
+The Web Content Accessibility Guidelines (WCAG) provide a framework for making web content accessible:
+
+### Four Principles:
+1. **Perceivable**: Information must be presentable in ways users can perceive
+2. **Operable**: Interface components must be operable
+3. **Understandable**: Information and UI operation must be understandable
+4. **Robust**: Content must be robust enough for various assistive technologies
+
+## Practical Implementation
+
+### Semantic HTML
+Use proper HTML elements for their intended purpose:
+
+\`\`\`html
+<header>
+  <nav>
+    <ul>
+      <li><a href="/home">Home</a></li>
+      <li><a href="/about">About</a></li>
+    </ul>
+  </nav>
+</header>
+
+<main>
+  <article>
+    <h1>Article Title</h1>
+    <p>Article content...</p>
+  </article>
+</main>
+\`\`\`
+
+### ARIA Labels
+Enhance semantic meaning with ARIA attributes:
+
+\`\`\`html
+<button aria-label="Close dialog" aria-expanded="false">
+  <span aria-hidden="true">×</span>
+</button>
+\`\`\`
+
+### Keyboard Navigation
+Ensure all interactive elements are keyboard accessible:
+
+\`\`\`css
+.button:focus {
+  outline: 2px solid #007acc;
+  outline-offset: 2px;
+}
+\`\`\`
+
+## Testing Accessibility
+
+### Tools:
+- **axe-core**: Automated accessibility testing
+- **WAVE**: Web accessibility evaluation tool
+- **Lighthouse**: Built-in Chrome accessibility audit
+- **Screen readers**: NVDA, JAWS, VoiceOver
+
+## Conclusion
+
+Building accessible websites benefits everyone and creates a more inclusive web. Start with semantic HTML, add ARIA where needed, and test with real users and assistive technologies.`,
+        excerpt: 'Learn how to build accessible web applications that work for everyone, including users with disabilities.',
+        author: {
+            id: 'author3',
+            name: 'Emily Rodriguez',
+            avatar: 'https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=64',
+            bio: 'Accessibility advocate and UX engineer focused on inclusive design practices.',
+        },
+        publishedAt: '2024-01-05T11:30:00Z',
+        tags: ['Accessibility', 'WCAG', 'UX', 'Inclusive Design'],
+        category: 'Accessibility',
+        readingTime: 7,
+        featured: true,
+        status: 'published',
+        seoMeta: {
+            title: 'Web Accessibility Guide - WCAG Compliance and Best Practices',
+            description: 'Complete guide to web accessibility, WCAG compliance, and building inclusive web applications.',
+            keywords: ['Web Accessibility', 'WCAG', 'Inclusive Design', 'Screen Readers'],
+        },
+        stats: {
+            views: 2100,
+            likes: 156,
+            comments: 34,
+            shares: 78,
+        },
+    },
+];
+const sampleBlogComments = [
+    {
+        id: 'c1',
+        postId: '1',
+        author: {
+            id: 'u1',
+            name: 'John Doe',
+            avatar: 'https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64',
+        },
+        content: 'Great article! I\'ve been using TypeScript with React for a while now and these patterns are exactly what I recommend to my team.',
+        createdAt: '2024-01-16T08:30:00Z',
+        likes: 12,
+        dislikes: 0,
+        isModerated: false,
+        isReported: false,
+        replies: [
+            {
+                id: 'c1-r1',
+                postId: '1',
+                parentId: 'c1',
+                author: {
+                    id: 'author1',
+                    name: 'Sarah Johnson',
+                    avatar: 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=64',
+                },
+                content: 'Thanks John! I\'m glad you found the patterns useful. Have you tried the new React 18 features with TypeScript?',
+                createdAt: '2024-01-16T10:15:00Z',
+                likes: 5,
+                dislikes: 0,
+                isModerated: false,
+                isReported: false,
+            },
+        ],
+    },
+    {
+        id: 'c2',
+        postId: '1',
+        author: {
+            id: 'u2',
+            name: 'Alice Smith',
+            avatar: 'https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=64',
+        },
+        content: 'The custom hooks section was particularly helpful. I\'ve been struggling with sharing state logic between components.',
+        createdAt: '2024-01-16T12:45:00Z',
+        likes: 8,
+        dislikes: 0,
+        isModerated: false,
+        isReported: false,
+    },
+];
+const sampleBlogCategories = [
+    {
+        id: 'dev',
+        name: 'Development',
+        slug: 'development',
+        description: 'Programming tutorials, frameworks, and development best practices',
+        postCount: 45,
+        color: '#3b82f6',
+    },
+    {
+        id: 'design',
+        name: 'Design',
+        slug: 'design',
+        description: 'UI/UX design, CSS techniques, and design systems',
+        postCount: 32,
+        color: '#8b5cf6',
+    },
+    {
+        id: 'accessibility',
+        name: 'Accessibility',
+        slug: 'accessibility',
+        description: 'Web accessibility, inclusive design, and WCAG compliance',
+        postCount: 18,
+        color: '#10b981',
+    },
+    {
+        id: 'performance',
+        name: 'Performance',
+        slug: 'performance',
+        description: 'Web performance optimization and best practices',
+        postCount: 24,
+        color: '#f59e0b',
+    },
+];
+
+export { sampleBlogCategories, sampleBlogComments, sampleBlogPosts };
+//# sourceMappingURL=sampleData.js.map

package/dist/components/Blog/data/sampleData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sampleData.js","sources":["../../../../src/components/Blog/data/sampleData.ts"],"sourcesContent":["import type { BlogPost, BlogComment, BlogCategory } from '../types';\n\n// Sample blog posts for demonstration\nexport const sampleBlogPosts: BlogPost[] = [\n  {\n    id: '1',\n    title: 'Building Modern React Applications with TypeScript',\n    slug: 'building-modern-react-typescript',\n    content: `# Building Modern React Applications with TypeScript\n\n## Introduction\n\nTypeScript has become an essential tool for React developers who want to build scalable, maintainable applications. In this comprehensive guide, we'll explore the best practices for combining React with TypeScript.\n\n## Why TypeScript with React?\n\nTypeScript brings several advantages to React development:\n\n- **Type Safety**: Catch errors at compile time rather than runtime\n- **Better Developer Experience**: Enhanced IntelliSense and autocomplete\n- **Refactoring Confidence**: Safe code changes with compiler verification\n- **Documentation**: Types serve as living documentation\n\n## Setting Up Your Project\n\n\\`\\`\\`bash\nnpx create-react-app my-app --template typescript\ncd my-app\nnpm start\n\\`\\`\\`\n\n## Component Patterns\n\n### Functional Components with Props\n\n\\`\\`\\`tsx\ninterface ButtonProps {\n  variant: 'primary' | 'secondary';\n  children: React.ReactNode;\n  onClick?: () => void;\n}\n\nconst Button: React.FC<ButtonProps> = ({ variant, children, onClick }) => {\n  return (\n    <button \n      className={\\`btn btn-\\${variant}\\`}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n};\n\\`\\`\\`\n\n## Advanced Patterns\n\n### Custom Hooks\n\nCustom hooks are a powerful way to share stateful logic between components:\n\n\\`\\`\\`tsx\nfunction useCounter(initialValue: number = 0) {\n  const [count, setCount] = useState(initialValue);\n  \n  const increment = useCallback(() => setCount(c => c + 1), []);\n  const decrement = useCallback(() => setCount(c => c - 1), []);\n  const reset = useCallback(() => setCount(initialValue), [initialValue]);\n  \n  return { count, increment, decrement, reset };\n}\n\\`\\`\\`\n\n## Best Practices\n\n1. **Use strict TypeScript configuration**\n2. **Define clear prop interfaces**\n3. **Leverage union types for variants**\n4. **Use generic types for reusable components**\n5. **Implement proper error boundaries**\n\n## Conclusion\n\nTypeScript and React make a powerful combination for building modern web applications. By following these patterns and best practices, you can create applications that are both robust and maintainable.`,\n    excerpt: 'Learn how to build scalable React applications using TypeScript with modern patterns and best practices.',\n    author: {\n      id: 'author1',\n      name: 'Sarah Johnson',\n      avatar: 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=64',\n      bio: 'Senior Frontend Developer with 8+ years of experience in React and TypeScript.',\n    },\n    publishedAt: '2024-01-15T10:00:00Z',\n    updatedAt: '2024-01-16T14:30:00Z',\n    tags: ['React', 'TypeScript', 'Frontend', 'JavaScript'],\n    category: 'Development',\n    readingTime: 8,\n    featured: true,\n    status: 'published',\n    seoMeta: {\n      title: 'Building Modern React Applications with TypeScript - Complete Guide',\n      description: 'Learn how to build scalable React applications using TypeScript with modern patterns and best practices.',\n      keywords: ['React', 'TypeScript', 'Frontend Development', 'JavaScript'],\n      ogImage: 'https://images.pexels.com/photos/11035380/pexels-photo-11035380.jpeg?auto=compress&cs=tinysrgb&w=1200',\n    },\n    stats: {\n      views: 1250,\n      likes: 89,\n      comments: 23,\n      shares: 45,\n    },\n  },\n  {\n    id: '2',\n    title: 'CSS Grid vs Flexbox: When to Use Each',\n    slug: 'css-grid-vs-flexbox',\n    content: `# CSS Grid vs Flexbox: When to Use Each\n\n## Understanding the Fundamentals\n\nBoth CSS Grid and Flexbox are powerful layout systems, but they serve different purposes and excel in different scenarios.\n\n## CSS Grid: Two-Dimensional Layouts\n\nCSS Grid is designed for two-dimensional layouts where you need to control both rows and columns simultaneously.\n\n### Best Use Cases:\n- Page layouts with header, sidebar, main content, and footer\n- Card grids with consistent sizing\n- Complex dashboard layouts\n- Magazine-style layouts\n\n### Example:\n\\`\\`\\`css\n.grid-container {\n  display: grid;\n  grid-template-columns: 250px 1fr;\n  grid-template-rows: auto 1fr auto;\n  grid-template-areas: \n    \"sidebar header\"\n    \"sidebar main\"\n    \"footer footer\";\n  min-height: 100vh;\n}\n\\`\\`\\`\n\n## Flexbox: One-Dimensional Layouts\n\nFlexbox excels at one-dimensional layouts, either in a row or column direction.\n\n### Best Use Cases:\n- Navigation bars\n- Button groups\n- Centering content\n- Distributing space between items\n\n### Example:\n\\`\\`\\`css\n.flex-container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n}\n\\`\\`\\`\n\n## Decision Framework\n\nChoose **CSS Grid** when:\n- You need to control both dimensions\n- Creating overall page layouts\n- Working with complex, overlapping designs\n\nChoose **Flexbox** when:\n- Working with one-dimensional layouts\n- Aligning items within a container\n- Creating responsive navigation\n\n## Conclusion\n\nBoth CSS Grid and Flexbox are essential tools in modern web development. Understanding when to use each will help you create more efficient and maintainable layouts.`,\n    excerpt: 'A comprehensive guide to understanding when to use CSS Grid versus Flexbox for your layout needs.',\n    author: {\n      id: 'author2',\n      name: 'Mike Chen',\n      avatar: 'https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=64',\n      bio: 'CSS specialist and design systems architect with expertise in modern layout techniques.',\n    },\n    publishedAt: '2024-01-10T09:00:00Z',\n    tags: ['CSS', 'Layout', 'Grid', 'Flexbox', 'Web Design'],\n    category: 'Design',\n    readingTime: 6,\n    featured: false,\n    status: 'published',\n    seoMeta: {\n      title: 'CSS Grid vs Flexbox: Complete Comparison Guide',\n      description: 'Learn when to use CSS Grid versus Flexbox with practical examples and decision frameworks.',\n      keywords: ['CSS Grid', 'Flexbox', 'CSS Layout', 'Web Design'],\n    },\n    stats: {\n      views: 890,\n      likes: 67,\n      comments: 15,\n      shares: 32,\n    },\n  },\n  {\n    id: '3',\n    title: 'Accessibility in Modern Web Development',\n    slug: 'accessibility-modern-web-development',\n    content: `# Accessibility in Modern Web Development\n\n## Why Accessibility Matters\n\nWeb accessibility ensures that websites and applications are usable by everyone, including people with disabilities. It's not just the right thing to do—it's also a legal requirement in many jurisdictions.\n\n## WCAG Guidelines\n\nThe Web Content Accessibility Guidelines (WCAG) provide a framework for making web content accessible:\n\n### Four Principles:\n1. **Perceivable**: Information must be presentable in ways users can perceive\n2. **Operable**: Interface components must be operable\n3. **Understandable**: Information and UI operation must be understandable\n4. **Robust**: Content must be robust enough for various assistive technologies\n\n## Practical Implementation\n\n### Semantic HTML\nUse proper HTML elements for their intended purpose:\n\n\\`\\`\\`html\n<header>\n  <nav>\n    <ul>\n      <li><a href=\"/home\">Home</a></li>\n      <li><a href=\"/about\">About</a></li>\n    </ul>\n  </nav>\n</header>\n\n<main>\n  <article>\n    <h1>Article Title</h1>\n    <p>Article content...</p>\n  </article>\n</main>\n\\`\\`\\`\n\n### ARIA Labels\nEnhance semantic meaning with ARIA attributes:\n\n\\`\\`\\`html\n<button aria-label=\"Close dialog\" aria-expanded=\"false\">\n  <span aria-hidden=\"true\">×</span>\n</button>\n\\`\\`\\`\n\n### Keyboard Navigation\nEnsure all interactive elements are keyboard accessible:\n\n\\`\\`\\`css\n.button:focus {\n  outline: 2px solid #007acc;\n  outline-offset: 2px;\n}\n\\`\\`\\`\n\n## Testing Accessibility\n\n### Tools:\n- **axe-core**: Automated accessibility testing\n- **WAVE**: Web accessibility evaluation tool\n- **Lighthouse**: Built-in Chrome accessibility audit\n- **Screen readers**: NVDA, JAWS, VoiceOver\n\n## Conclusion\n\nBuilding accessible websites benefits everyone and creates a more inclusive web. Start with semantic HTML, add ARIA where needed, and test with real users and assistive technologies.`,\n    excerpt: 'Learn how to build accessible web applications that work for everyone, including users with disabilities.',\n    author: {\n      id: 'author3',\n      name: 'Emily Rodriguez',\n      avatar: 'https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=64',\n      bio: 'Accessibility advocate and UX engineer focused on inclusive design practices.',\n    },\n    publishedAt: '2024-01-05T11:30:00Z',\n    tags: ['Accessibility', 'WCAG', 'UX', 'Inclusive Design'],\n    category: 'Accessibility',\n    readingTime: 7,\n    featured: true,\n    status: 'published',\n    seoMeta: {\n      title: 'Web Accessibility Guide - WCAG Compliance and Best Practices',\n      description: 'Complete guide to web accessibility, WCAG compliance, and building inclusive web applications.',\n      keywords: ['Web Accessibility', 'WCAG', 'Inclusive Design', 'Screen Readers'],\n    },\n    stats: {\n      views: 2100,\n      likes: 156,\n      comments: 34,\n      shares: 78,\n    },\n  },\n];\n\nexport const sampleBlogComments: BlogComment[] = [\n  {\n    id: 'c1',\n    postId: '1',\n    author: {\n      id: 'u1',\n      name: 'John Doe',\n      avatar: 'https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64',\n    },\n    content: 'Great article! I\\'ve been using TypeScript with React for a while now and these patterns are exactly what I recommend to my team.',\n    createdAt: '2024-01-16T08:30:00Z',\n    likes: 12,\n    dislikes: 0,\n    isModerated: false,\n    isReported: false,\n    replies: [\n      {\n        id: 'c1-r1',\n        postId: '1',\n        parentId: 'c1',\n        author: {\n          id: 'author1',\n          name: 'Sarah Johnson',\n          avatar: 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=64',\n        },\n        content: 'Thanks John! I\\'m glad you found the patterns useful. Have you tried the new React 18 features with TypeScript?',\n        createdAt: '2024-01-16T10:15:00Z',\n        likes: 5,\n        dislikes: 0,\n        isModerated: false,\n        isReported: false,\n      },\n    ],\n  },\n  {\n    id: 'c2',\n    postId: '1',\n    author: {\n      id: 'u2',\n      name: 'Alice Smith',\n      avatar: 'https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=64',\n    },\n    content: 'The custom hooks section was particularly helpful. I\\'ve been struggling with sharing state logic between components.',\n    createdAt: '2024-01-16T12:45:00Z',\n    likes: 8,\n    dislikes: 0,\n    isModerated: false,\n    isReported: false,\n  },\n];\n\nexport const sampleBlogCategories: BlogCategory[] = [\n  {\n    id: 'dev',\n    name: 'Development',\n    slug: 'development',\n    description: 'Programming tutorials, frameworks, and development best practices',\n    postCount: 45,\n    color: '#3b82f6',\n  },\n  {\n    id: 'design',\n    name: 'Design',\n    slug: 'design',\n    description: 'UI/UX design, CSS techniques, and design systems',\n    postCount: 32,\n    color: '#8b5cf6',\n  },\n  {\n    id: 'accessibility',\n    name: 'Accessibility',\n    slug: 'accessibility',\n    description: 'Web accessibility, inclusive design, and WCAG compliance',\n    postCount: 18,\n    color: '#10b981',\n  },\n  {\n    id: 'performance',\n    name: 'Performance',\n    slug: 'performance',\n    description: 'Web performance optimization and best practices',\n    postCount: 24,\n    color: '#f59e0b',\n  },\n];"],"names":[],"mappings":"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"}

package/dist/components/Blog/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useBlog';
+export * from './useComments';
+export * from './useBlogNavigation';

package/dist/components/Blog/hooks/useBlog.d.ts

@@ -0,0 +1,22 @@
+import type { BlogPost, BlogFilters, BlogPagination } from '../types';
+export interface UseBlogProps {
+    initialFilters?: Partial<BlogFilters>;
+    pageSize?: number;
+}
+export interface UseBlogReturn {
+    posts: BlogPost[];
+    loading: boolean;
+    error: string | null;
+    filters: BlogFilters;
+    pagination: BlogPagination;
+    updateFilters: (newFilters: Partial<BlogFilters>) => void;
+    clearFilters: () => void;
+    loadMore: () => void;
+    refreshPosts: () => void;
+    searchPosts: (query: string) => void;
+}
+/**
+ * Custom hook for blog data management and filtering
+ * Handles search, filtering, pagination, and data fetching
+ */
+export declare const useBlog: ({ initialFilters, pageSize, }?: UseBlogProps) => UseBlogReturn;

package/dist/components/Blog/hooks/useBlog.js

@@ -0,0 +1,148 @@
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import { useDebounce } from '../../../hooks/useDebounce.js';
+import { sampleBlogPosts } from '../data/sampleData.js';
+
+const defaultFilters = {
+    search: '',
+    tags: [],
+    categories: [],
+    authors: [],
+    dateRange: {},
+    sortBy: 'newest',
+};
+/**
+ * Custom hook for blog data management and filtering
+ * Handles search, filtering, pagination, and data fetching
+ */
+const useBlog = ({ initialFilters = {}, pageSize = 10, } = {}) => {
+    const [posts, setPosts] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [filters, setFilters] = useState({
+        ...defaultFilters,
+        ...initialFilters,
+    });
+    const [currentPage, setCurrentPage] = useState(1);
+    const debouncedSearchQuery = useDebounce(filters.search, 300);
+    // Filter and sort posts
+    const filteredPosts = useMemo(() => {
+        let filtered = [...sampleBlogPosts];
+        // Search filter
+        if (debouncedSearchQuery) {
+            const query = debouncedSearchQuery.toLowerCase();
+            filtered = filtered.filter(post => post.title.toLowerCase().includes(query) ||
+                post.excerpt.toLowerCase().includes(query) ||
+                post.content.toLowerCase().includes(query) ||
+                post.tags.some(tag => tag.toLowerCase().includes(query)) ||
+                post.author.name.toLowerCase().includes(query));
+        }
+        // Category filter
+        if (filters.categories.length > 0) {
+            filtered = filtered.filter(post => filters.categories.includes(post.category));
+        }
+        // Tags filter
+        if (filters.tags.length > 0) {
+            filtered = filtered.filter(post => filters.tags.some(tag => post.tags.includes(tag)));
+        }
+        // Author filter
+        if (filters.authors.length > 0) {
+            filtered = filtered.filter(post => filters.authors.includes(post.author.id));
+        }
+        // Date range filter
+        if (filters.dateRange.start || filters.dateRange.end) {
+            filtered = filtered.filter(post => {
+                const postDate = new Date(post.publishedAt);
+                const startDate = filters.dateRange.start ? new Date(filters.dateRange.start) : null;
+                const endDate = filters.dateRange.end ? new Date(filters.dateRange.end) : null;
+                if (startDate && postDate < startDate)
+                    return false;
+                if (endDate && postDate > endDate)
+                    return false;
+                return true;
+            });
+        }
+        // Sort posts
+        switch (filters.sortBy) {
+            case 'oldest':
+                filtered.sort((a, b) => new Date(a.publishedAt).getTime() - new Date(b.publishedAt).getTime());
+                break;
+            case 'popular':
+                filtered.sort((a, b) => b.stats.views - a.stats.views);
+                break;
+            case 'trending':
+                filtered.sort((a, b) => (b.stats.likes + b.stats.shares) - (a.stats.likes + a.stats.shares));
+                break;
+            default: // newest
+                filtered.sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime());
+                break;
+        }
+        return filtered;
+    }, [debouncedSearchQuery, filters, sampleBlogPosts]);
+    // Pagination
+    const paginatedPosts = useMemo(() => {
+        const startIndex = (currentPage - 1) * pageSize;
+        return filteredPosts.slice(0, startIndex + pageSize);
+    }, [filteredPosts, currentPage, pageSize]);
+    const pagination = useMemo(() => ({
+        page: currentPage,
+        limit: pageSize,
+        total: filteredPosts.length,
+        hasNext: currentPage * pageSize < filteredPosts.length,
+        hasPrev: currentPage > 1,
+    }), [currentPage, pageSize, filteredPosts.length]);
+    // Simulate API call
+    useEffect(() => {
+        const fetchPosts = async () => {
+            setLoading(true);
+            setError(null);
+            try {
+                // Simulate API delay
+                await new Promise(resolve => setTimeout(resolve, 500));
+                setPosts(paginatedPosts);
+            }
+            catch (err) {
+                setError('Failed to load blog posts');
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchPosts();
+    }, [paginatedPosts]);
+    const updateFilters = useCallback((newFilters) => {
+        setFilters(prev => ({ ...prev, ...newFilters }));
+        setCurrentPage(1); // Reset to first page when filters change
+    }, []);
+    const clearFilters = useCallback(() => {
+        setFilters(defaultFilters);
+        setCurrentPage(1);
+    }, []);
+    const loadMore = useCallback(() => {
+        if (pagination.hasNext) {
+            setCurrentPage(prev => prev + 1);
+        }
+    }, [pagination.hasNext]);
+    const refreshPosts = useCallback(() => {
+        setCurrentPage(1);
+        // Trigger re-fetch
+        setPosts([]);
+    }, []);
+    const searchPosts = useCallback((query) => {
+        updateFilters({ search: query });
+    }, [updateFilters]);
+    return {
+        posts,
+        loading,
+        error,
+        filters,
+        pagination,
+        updateFilters,
+        clearFilters,
+        loadMore,
+        refreshPosts,
+        searchPosts,
+    };
+};
+
+export { useBlog };
+//# sourceMappingURL=useBlog.js.map

package/dist/components/Blog/hooks/useBlog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBlog.js","sources":["../../../../src/components/Blog/hooks/useBlog.ts"],"sourcesContent":["import { useState, useEffect, useCallback, useMemo } from 'react';\nimport { useDebounce } from '../../../hooks/useDebounce';\nimport type { BlogPost, BlogFilters, BlogPagination } from '../types';\nimport { sampleBlogPosts } from '../data/sampleData';\n\nexport interface UseBlogProps {\n  initialFilters?: Partial<BlogFilters>;\n  pageSize?: number;\n}\n\nexport interface UseBlogReturn {\n  posts: BlogPost[];\n  loading: boolean;\n  error: string | null;\n  filters: BlogFilters;\n  pagination: BlogPagination;\n  updateFilters: (newFilters: Partial<BlogFilters>) => void;\n  clearFilters: () => void;\n  loadMore: () => void;\n  refreshPosts: () => void;\n  searchPosts: (query: string) => void;\n}\n\nconst defaultFilters: BlogFilters = {\n  search: '',\n  tags: [],\n  categories: [],\n  authors: [],\n  dateRange: {},\n  sortBy: 'newest',\n};\n\n/**\n * Custom hook for blog data management and filtering\n * Handles search, filtering, pagination, and data fetching\n */\nexport const useBlog = ({\n  initialFilters = {},\n  pageSize = 10,\n}: UseBlogProps = {}): UseBlogReturn => {\n  const [posts, setPosts] = useState<BlogPost[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [filters, setFilters] = useState<BlogFilters>({\n    ...defaultFilters,\n    ...initialFilters,\n  });\n  const [currentPage, setCurrentPage] = useState(1);\n\n  const debouncedSearchQuery = useDebounce(filters.search, 300);\n\n  // Filter and sort posts\n  const filteredPosts = useMemo(() => {\n    let filtered = [...sampleBlogPosts];\n\n    // Search filter\n    if (debouncedSearchQuery) {\n      const query = debouncedSearchQuery.toLowerCase();\n      filtered = filtered.filter(post =>\n        post.title.toLowerCase().includes(query) ||\n        post.excerpt.toLowerCase().includes(query) ||\n        post.content.toLowerCase().includes(query) ||\n        post.tags.some(tag => tag.toLowerCase().includes(query)) ||\n        post.author.name.toLowerCase().includes(query)\n      );\n    }\n\n    // Category filter\n    if (filters.categories.length > 0) {\n      filtered = filtered.filter(post =>\n        filters.categories.includes(post.category)\n      );\n    }\n\n    // Tags filter\n    if (filters.tags.length > 0) {\n      filtered = filtered.filter(post =>\n        filters.tags.some(tag => post.tags.includes(tag))\n      );\n    }\n\n    // Author filter\n    if (filters.authors.length > 0) {\n      filtered = filtered.filter(post =>\n        filters.authors.includes(post.author.id)\n      );\n    }\n\n    // Date range filter\n    if (filters.dateRange.start || filters.dateRange.end) {\n      filtered = filtered.filter(post => {\n        const postDate = new Date(post.publishedAt);\n        const startDate = filters.dateRange.start ? new Date(filters.dateRange.start) : null;\n        const endDate = filters.dateRange.end ? new Date(filters.dateRange.end) : null;\n\n        if (startDate && postDate < startDate) return false;\n        if (endDate && postDate > endDate) return false;\n        return true;\n      });\n    }\n\n    // Sort posts\n    switch (filters.sortBy) {\n      case 'oldest':\n        filtered.sort((a, b) => new Date(a.publishedAt).getTime() - new Date(b.publishedAt).getTime());\n        break;\n      case 'popular':\n        filtered.sort((a, b) => b.stats.views - a.stats.views);\n        break;\n      case 'trending':\n        filtered.sort((a, b) => (b.stats.likes + b.stats.shares) - (a.stats.likes + a.stats.shares));\n        break;\n      default: // newest\n        filtered.sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime());\n        break;\n    }\n\n    return filtered;\n  }, [debouncedSearchQuery, filters, sampleBlogPosts]);\n\n  // Pagination\n  const paginatedPosts = useMemo(() => {\n    const startIndex = (currentPage - 1) * pageSize;\n    return filteredPosts.slice(0, startIndex + pageSize);\n  }, [filteredPosts, currentPage, pageSize]);\n\n  const pagination: BlogPagination = useMemo(() => ({\n    page: currentPage,\n    limit: pageSize,\n    total: filteredPosts.length,\n    hasNext: currentPage * pageSize < filteredPosts.length,\n    hasPrev: currentPage > 1,\n  }), [currentPage, pageSize, filteredPosts.length]);\n\n  // Simulate API call\n  useEffect(() => {\n    const fetchPosts = async () => {\n      setLoading(true);\n      setError(null);\n      \n      try {\n        // Simulate API delay\n        await new Promise(resolve => setTimeout(resolve, 500));\n        setPosts(paginatedPosts);\n      } catch (err) {\n        setError('Failed to load blog posts');\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchPosts();\n  }, [paginatedPosts]);\n\n  const updateFilters = useCallback((newFilters: Partial<BlogFilters>) => {\n    setFilters(prev => ({ ...prev, ...newFilters }));\n    setCurrentPage(1); // Reset to first page when filters change\n  }, []);\n\n  const clearFilters = useCallback(() => {\n    setFilters(defaultFilters);\n    setCurrentPage(1);\n  }, []);\n\n  const loadMore = useCallback(() => {\n    if (pagination.hasNext) {\n      setCurrentPage(prev => prev + 1);\n    }\n  }, [pagination.hasNext]);\n\n  const refreshPosts = useCallback(() => {\n    setCurrentPage(1);\n    // Trigger re-fetch\n    setPosts([]);\n  }, []);\n\n  const searchPosts = useCallback((query: string) => {\n    updateFilters({ search: query });\n  }, [updateFilters]);\n\n  return {\n    posts,\n    loading,\n    error,\n    filters,\n    pagination,\n    updateFilters,\n    clearFilters,\n    loadMore,\n    refreshPosts,\n    searchPosts,\n  };\n};"],"names":[],"mappings":"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"}

package/dist/components/Blog/hooks/useBlogNavigation.d.ts

@@ -0,0 +1,12 @@
+import type { TableOfContentsItem } from '../types';
+export interface UseBlogNavigationReturn {
+    tableOfContents: TableOfContentsItem[];
+    activeSection: string;
+    scrollToSection: (anchor: string) => void;
+    generateTableOfContents: (content: string) => void;
+}
+/**
+ * Custom hook for blog navigation and table of contents
+ * Handles smooth scrolling and active section tracking
+ */
+export declare const useBlogNavigation: () => UseBlogNavigationReturn;