@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/dist/components/ui/navigation/navigation-demo.esm.js

@@ -13,7 +13,7 @@ import { Stepper } from './stepper';
 import { Pagination } from './pagination';
 import { NavigationItem, NavigationGroup } from './types';
 
-export const NavigationDemo= () => {
+export const NavigationDemo: React.FC = () => {
   const [currentTab, setCurrentTab] = useState('overview');
   const [currentStep, setCurrentStep] = useState(0);
   const [currentPage, setCurrentPage] = useState(1);
@@ -22,35 +22,38 @@ export const NavigationDemo= () => {
 
   // Sample data for components
   const breadcrumbItems = [
-    { id, label, href},
-    { id, label, href},
-    { id, label, href},
-    { id, label, href},
+    { id: 'home', label: 'Home', href: '/' },
+    { id: 'products', label: 'Products', href: '/products' },
+    { id: 'electronics', label: 'Electronics', href: '/products/electronics' },
+    { id: 'smartphones', label: 'Smartphones', href: '/products/electronics/smartphones' },
   ];
 
   const tabItems = [
     {
-      id,
-      label,
-      content="p-4">
+      id: 'overview',
+      label: 'Overview',
+      content: (
+        <div className="p-4">
           <h3 className="text-lg font-semibold mb-2">Overview Tab</h3>
           <p className="text-gray-600">This is the overview content with some sample text.</p>
         </div>
       ),
     },
     {
-      id,
-      label,
-      content="p-4">
+      id: 'details',
+      label: 'Details',
+      content: (
+        <div className="p-4">
           <h3 className="text-lg font-semibold mb-2">Details Tab</h3>
           <p className="text-gray-600">Detailed information goes here.</p>
         </div>
       ),
     },
     {
-      id,
-      label,
-      content="p-4">
+      id: 'settings',
+      label: 'Settings',
+      content: (
+        <div className="p-4">
           <h3 className="text-lg font-semibold mb-2">Settings Tab</h3>
           <p className="text-gray-600">Configuration options and settings.</p>
         </div>
@@ -60,97 +63,99 @@ export const NavigationDemo= () => {
 
   const stepperSteps = [
     {
-      id,
-      label,
-      description,
-      status,
+      id: 'step1',
+      label: 'Account Setup',
+      description: 'Create your account and verify email',
+      status: 'completed' as const,
     },
     {
-      id,
-      label,
-      description,
-      status,
+      id: 'step2',
+      label: 'Profile Information',
+      description: 'Fill in your personal details',
+      status: 'active' as const,
     },
     {
-      id,
-      label,
-      description,
-      status,
+      id: 'step3',
+      label: 'Preferences',
+      description: 'Configure your account preferences',
+      status: 'pending' as const,
     },
     {
-      id,
-      label,
-      description,
-      status,
+      id: 'step4',
+      label: 'Review & Confirm',
+      description: 'Review your information and confirm',
+      status: 'pending' as const,
     },
   ];
 
-  const menuItems] = [
+  const menuItems: NavigationItem[] = [
     {
-      id,
-      label,
-      description,
-      icon,
+      id: 'dashboard',
+      label: 'Dashboard',
+      description: 'Main dashboard view',
+      icon: '📊',
     },
     {
-      id,
-      label,
-      description,
-      icon,
+      id: 'analytics',
+      label: 'Analytics',
+      description: 'View detailed analytics',
+      icon: '📈',
     },
     {
-      id,
-      label,
-      description,
-      icon,
+      id: 'reports',
+      label: 'Reports',
+      description: 'Generate and view reports',
+      icon: '📋',
     },
     {
-      id,
-      label,
-      description,
-      icon,
+      id: 'settings',
+      label: 'Settings',
+      description: 'Configure your account',
+      icon: '⚙️',
     },
   ];
 
-  const sidebarItems] = [
+  const sidebarItems: NavigationItem[] = [
     {
-      id,
-      label,
-      icon,
-      active,
+      id: 'dashboard',
+      label: 'Dashboard',
+      icon: '📊',
+      active: true,
     },
     {
-      id,
-      label,
-      icon,
+      id: 'analytics',
+      label: 'Analytics',
+      icon: '📈',
     },
     {
-      id,
-      label,
-      icon,
+      id: 'reports',
+      label: 'Reports',
+      icon: '📋',
     },
     {
-      id,
-      label,
-      icon,
+      id: 'settings',
+      label: 'Settings',
+      icon: '⚙️',
     },
   ];
 
-  const sidebarGroups] = [
+  const sidebarGroups: NavigationGroup[] = [
     {
-      id,
-      title,
-      items, label, icon},
-        { id, label, icon},
-        { id, label, icon},
+      id: 'management',
+      title: 'Management',
+      items: [
+        { id: 'users', label: 'Users', icon: '👥' },
+        { id: 'roles', label: 'Roles', icon: '🔐' },
+        { id: 'permissions', label: 'Permissions', icon: '🔑' },
       ],
     },
     {
-      id,
-      title,
-      items, label, icon},
-        { id, label, icon},
-        { id, label, icon},
+      id: 'content',
+      title: 'Content',
+      items: [
+        { id: 'articles', label: 'Articles', icon: '📝' },
+        { id: 'media', label: 'Media', icon: '🖼️' },
+        { id: 'comments', label: 'Comments', icon: '💬' },
       ],
     },
   ];
@@ -172,7 +177,7 @@ export const NavigationDemo= () => {
         <div className="space-y-4">
           <Breadcrumb
             items={breadcrumbItems}
-            onItemClick={(item) => console.log('Breadcrumb clicked, item)}
+            onItemClick={(item) => console.log('Breadcrumb clicked:', item)}
           />
           <Breadcrumb
             items={breadcrumbItems}
@@ -296,7 +301,9 @@ export const NavigationDemo= () => {
 
       {/* Theme Information */}
       <div className="p-6">
-        <h2 className="text-xl font-semibold mb-4">Current Theme="grid grid-cols-1 md="text-center p-4 bg-gray-50 rounded-lg">
+        <h2 className="text-xl font-semibold mb-4">Current Theme: Stan Design</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="text-center p-4 bg-gray-50 rounded-lg">
             <h3 className="font-medium text-gray-900">Stan Design</h3>
             <p className="text-sm text-gray-600">Default theme with gray tones</p>
           </div>

package/dist/components/ui/navigation/navigation-demo.js

@@ -13,7 +13,7 @@ import { Stepper } from './stepper';
 import { Pagination } from './pagination';
 import { NavigationItem, NavigationGroup } from './types';
 
-export const NavigationDemo= () => {
+export const NavigationDemo: React.FC = () => {
   const [currentTab, setCurrentTab] = useState('overview');
   const [currentStep, setCurrentStep] = useState(0);
   const [currentPage, setCurrentPage] = useState(1);
@@ -22,35 +22,38 @@ export const NavigationDemo= () => {
 
   // Sample data for components
   const breadcrumbItems = [
-    { id, label, href},
-    { id, label, href},
-    { id, label, href},
-    { id, label, href},
+    { id: 'home', label: 'Home', href: '/' },
+    { id: 'products', label: 'Products', href: '/products' },
+    { id: 'electronics', label: 'Electronics', href: '/products/electronics' },
+    { id: 'smartphones', label: 'Smartphones', href: '/products/electronics/smartphones' },
   ];
 
   const tabItems = [
     {
-      id,
-      label,
-      content="p-4">
+      id: 'overview',
+      label: 'Overview',
+      content: (
+        <div className="p-4">
           <h3 className="text-lg font-semibold mb-2">Overview Tab</h3>
           <p className="text-gray-600">This is the overview content with some sample text.</p>
         </div>
       ),
     },
     {
-      id,
-      label,
-      content="p-4">
+      id: 'details',
+      label: 'Details',
+      content: (
+        <div className="p-4">
           <h3 className="text-lg font-semibold mb-2">Details Tab</h3>
           <p className="text-gray-600">Detailed information goes here.</p>
         </div>
       ),
     },
     {
-      id,
-      label,
-      content="p-4">
+      id: 'settings',
+      label: 'Settings',
+      content: (
+        <div className="p-4">
           <h3 className="text-lg font-semibold mb-2">Settings Tab</h3>
           <p className="text-gray-600">Configuration options and settings.</p>
         </div>
@@ -60,97 +63,99 @@ export const NavigationDemo= () => {
 
   const stepperSteps = [
     {
-      id,
-      label,
-      description,
-      status,
+      id: 'step1',
+      label: 'Account Setup',
+      description: 'Create your account and verify email',
+      status: 'completed' as const,
     },
     {
-      id,
-      label,
-      description,
-      status,
+      id: 'step2',
+      label: 'Profile Information',
+      description: 'Fill in your personal details',
+      status: 'active' as const,
     },
     {
-      id,
-      label,
-      description,
-      status,
+      id: 'step3',
+      label: 'Preferences',
+      description: 'Configure your account preferences',
+      status: 'pending' as const,
     },
     {
-      id,
-      label,
-      description,
-      status,
+      id: 'step4',
+      label: 'Review & Confirm',
+      description: 'Review your information and confirm',
+      status: 'pending' as const,
     },
   ];
 
-  const menuItems] = [
+  const menuItems: NavigationItem[] = [
     {
-      id,
-      label,
-      description,
-      icon,
+      id: 'dashboard',
+      label: 'Dashboard',
+      description: 'Main dashboard view',
+      icon: '📊',
     },
     {
-      id,
-      label,
-      description,
-      icon,
+      id: 'analytics',
+      label: 'Analytics',
+      description: 'View detailed analytics',
+      icon: '📈',
     },
     {
-      id,
-      label,
-      description,
-      icon,
+      id: 'reports',
+      label: 'Reports',
+      description: 'Generate and view reports',
+      icon: '📋',
     },
     {
-      id,
-      label,
-      description,
-      icon,
+      id: 'settings',
+      label: 'Settings',
+      description: 'Configure your account',
+      icon: '⚙️',
     },
   ];
 
-  const sidebarItems] = [
+  const sidebarItems: NavigationItem[] = [
     {
-      id,
-      label,
-      icon,
-      active,
+      id: 'dashboard',
+      label: 'Dashboard',
+      icon: '📊',
+      active: true,
     },
     {
-      id,
-      label,
-      icon,
+      id: 'analytics',
+      label: 'Analytics',
+      icon: '📈',
     },
     {
-      id,
-      label,
-      icon,
+      id: 'reports',
+      label: 'Reports',
+      icon: '📋',
     },
     {
-      id,
-      label,
-      icon,
+      id: 'settings',
+      label: 'Settings',
+      icon: '⚙️',
     },
   ];
 
-  const sidebarGroups] = [
+  const sidebarGroups: NavigationGroup[] = [
     {
-      id,
-      title,
-      items, label, icon},
-        { id, label, icon},
-        { id, label, icon},
+      id: 'management',
+      title: 'Management',
+      items: [
+        { id: 'users', label: 'Users', icon: '👥' },
+        { id: 'roles', label: 'Roles', icon: '🔐' },
+        { id: 'permissions', label: 'Permissions', icon: '🔑' },
       ],
     },
     {
-      id,
-      title,
-      items, label, icon},
-        { id, label, icon},
-        { id, label, icon},
+      id: 'content',
+      title: 'Content',
+      items: [
+        { id: 'articles', label: 'Articles', icon: '📝' },
+        { id: 'media', label: 'Media', icon: '🖼️' },
+        { id: 'comments', label: 'Comments', icon: '💬' },
       ],
     },
   ];
@@ -172,7 +177,7 @@ export const NavigationDemo= () => {
         <div className="space-y-4">
           <Breadcrumb
             items={breadcrumbItems}
-            onItemClick={(item) => console.log('Breadcrumb clicked, item)}
+            onItemClick={(item) => console.log('Breadcrumb clicked:', item)}
           />
           <Breadcrumb
             items={breadcrumbItems}
@@ -296,7 +301,9 @@ export const NavigationDemo= () => {
 
       {/* Theme Information */}
       <div className="p-6">
-        <h2 className="text-xl font-semibold mb-4">Current Theme="grid grid-cols-1 md="text-center p-4 bg-gray-50 rounded-lg">
+        <h2 className="text-xl font-semibold mb-4">Current Theme: Stan Design</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="text-center p-4 bg-gray-50 rounded-lg">
             <h3 className="font-medium text-gray-900">Stan Design</h3>
             <p className="text-sm text-gray-600">Default theme with gray tones</p>
           </div>