@campxdev/react-blueprint 2.3.10 → 3.0.0-alpha.1

package/src/stories/Navigation/DropDownMenu.stories.tsx

@@ -1,7 +1,6 @@
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { IconButton } from '@mui/material';
 import { Meta, StoryObj } from '@storybook/react';
-import { Icons } from '../../components/Assets/Icons/Icons';
+import { MessageCircleQuestionMark, MoreVertical } from 'lucide-react';
+import { Button } from '../../components/Input/Button/Button';
 import { DropDownButton } from '../../components/Navigation/DropDownMenu/DropDownButton';
 import { DropDownIcon } from '../../components/Navigation/DropDownMenu/DropDownIcon';
 import {
@@ -21,13 +20,23 @@ const meta: Meta<typeof DropdownMenu> = {
         'A function that returns a React node used as the dropdown anchor. It provides a method to open the dropdown.',
       control: 'object',
     },
-    menuProps: {
-      description: 'Props to pass to the Menu component, except for "open".',
-      control: 'object',
+    menuContentClassName: {
+      description: 'Additional CSS classes for the dropdown menu content.',
+      control: 'text',
     },
-    menuListProps: {
-      description: 'Props to pass to the MenuList component.',
-      control: 'object',
+    menuListClassName: {
+      description: 'Additional CSS classes for the menu list container.',
+      control: 'text',
+    },
+    align: {
+      description: 'Alignment of the dropdown menu relative to the trigger.',
+      control: 'select',
+      options: ['start', 'center', 'end'],
+    },
+    side: {
+      description: 'Side of the trigger where the dropdown menu appears.',
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left'],
     },
   },
 };
@@ -40,27 +49,19 @@ export const Primary: Story = {
   render: (args: DropdownMenuProps) => <DropdownMenu {...args} />,
   args: {
     anchor: ({ open }: { open: (e: any) => void }) => (
-      <DropDownButton
-        variant="contained"
-        color="primary"
-        onClick={open}
-        loading={false}
-      >
+      <DropDownButton onClick={open} loading={false}>
         Dropdown Button
       </DropDownButton>
     ),
     menu: [
       <DropdownMenuItem
-        icon={<Icons.HelpIcon />}
+        icon={<MessageCircleQuestionMark />}
         label={'Register'}
         onClick={() => {}}
       />,
 
       <DropdownMenuItem label={'Active Devices'} onClick={() => {}} />,
     ],
-    menuListProps: {
-      sx: { width: '20px' },
-    },
   },
 };
 
@@ -69,18 +70,13 @@ export const WithButtonLoading: Story = {
   render: (args: DropdownMenuProps) => <DropdownMenu {...args} />,
   args: {
     anchor: ({ open }: { open: (e: any) => void }) => (
-      <DropDownButton
-        variant="contained"
-        color="primary"
-        onClick={open}
-        loading={false}
-      >
+      <DropDownButton onClick={open} loading={true}>
         Dropdown Button
       </DropDownButton>
     ),
     menu: [
       <DropdownMenuItem
-        icon={<Icons.HelpIcon />}
+        icon={<MessageCircleQuestionMark />}
         label={'Register'}
         onClick={() => {
           window.open('/payment', '_blank');
@@ -88,8 +84,8 @@ export const WithButtonLoading: Story = {
       />,
 
       <DropdownMenuItem
-        icon={<Icons.HelpIcon />}
-        label={'Register'}
+        icon={<MessageCircleQuestionMark />}
+        label={'Active Devices'}
         onClick={() => {}}
       />,
     ],
@@ -123,14 +119,21 @@ export const WithIcon: Story = {
         handleClick={open}
         icon={{
           icon: (
-            <IconButton>
-              <MoreVertIcon />
-            </IconButton>
+            <Button variant="ghost" size="icon">
+              <MoreVertical className="h-5 w-5" />
+            </Button>
           ),
-          iconProps: { color: 'secondary' },
           outlined: false,
         }}
       />
     ),
+    menu: [
+      <DropdownMenuItem
+        label={'Student Payments'}
+        onClick={() => {
+          window.open('/payment', '_blank');
+        }}
+      />,
+    ],
   },
 };

package/src/stories/Navigation/ImportDialog.stories.tsx

@@ -1,5 +1,5 @@
 // UploadDialog.stories.js
-import { Button } from '@mui/material';
+import { Button } from '@/components/export';
 import { action } from '@storybook/addon-actions';
 import { StoryFn } from '@storybook/react/*';
 import { UploadDialog, UploadDialogProps } from '../../components/export';

package/src/stories/Navigation/PreviewFiles.stories.tsx

@@ -1,4 +1,3 @@
-import { Box } from '@mui/material';
 import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 import { PreviewFiles, PreviewFilesProps } from '../../components/export';
@@ -36,7 +35,7 @@ const Template: StoryFn<PreviewFilesProps> = (args) => {
   const [files, setFiles] = useState<PreviewFilesProps['files']>(args.files);
 
   return (
-    <Box sx={{ width: '400px', padding: '20px' }}>
+    <div className="w-[400px] p-5">
       <PreviewFiles
         {...args}
         files={files}
@@ -44,7 +43,7 @@ const Template: StoryFn<PreviewFilesProps> = (args) => {
           setFiles(newFiles);
         }}
       />
-    </Box>
+    </div>
   );
 };
 

package/src/stories/Navigation/Stepper.stories.tsx

@@ -1,11 +1,24 @@
+import { Stepper } from '@/components/export';
+import { StepperProps } from '@/components/Navigation/Stepper/Stepper';
 import { Meta, StoryObj } from '@storybook/react/*';
 import { useState } from 'react';
-import { Stepper } from '../../components/Navigation/Stepper/Stepper';
 
 const meta: Meta<typeof Stepper> = {
   title: 'Navigation/Stepper',
   component: Stepper,
+  parameters: {
+    layout: 'padded',
+  },
   argTypes: {
+    orientation: {
+      control: 'radio',
+      options: ['horizontal', 'vertical'],
+      description: 'Orientation of the stepper',
+    },
+    activeStep: {
+      control: { type: 'number', min: 0, max: 4 },
+      description: 'Current active step index (0-based)',
+    },
     allowNavigation: {
       control: 'boolean',
       description: 'Allow clicking on steps to navigate',
@@ -58,14 +71,14 @@ export const VerticalStepper: Story = {
 
 // Interactive Stepper with navigation
 export const InteractiveVerticalStepper: Story = {
-  render: (args) => {
+  render: (args: StepperProps) => {
     const [activeStep, setActiveStep] = useState(0);
 
     return (
       <Stepper
         {...args}
         activeStep={activeStep}
-        onStepClick={(stepIndex) => {
+        onStepClick={(stepIndex: number) => {
           setActiveStep(stepIndex);
           args.onStepClick?.(stepIndex);
         }}
@@ -97,14 +110,14 @@ export const HorizontalStepper: Story = {
 
 // Interactive Horizontal Stepper with navigation
 export const InteractiveHorizontalStepper: Story = {
-  render: (args) => {
+  render: (args: StepperProps) => {
     const [activeStep, setActiveStep] = useState(1);
 
     return (
       <Stepper
         {...args}
         activeStep={activeStep}
-        onStepClick={(stepIndex) => {
+        onStepClick={(stepIndex: number) => {
           setActiveStep(stepIndex);
           args.onStepClick?.(stepIndex);
         }}
@@ -136,3 +149,141 @@ export const HorizontalStepperWithNoDescription: Story = {
     })),
   },
 };
+
+// Stepper showing completed state
+export const CompletedSteps: Story = {
+  args: {
+    orientation: 'horizontal',
+    steps,
+    activeStep: 4, // Last step (0-based index)
+    allowNavigation: true,
+  },
+};
+
+// Stepper at the beginning
+export const FirstStep: Story = {
+  args: {
+    orientation: 'horizontal',
+    steps,
+    activeStep: 0,
+    allowNavigation: true,
+  },
+};
+
+// Simple 3-step process
+const simpleSteps = [
+  {
+    label: 'Account Setup',
+    description: 'Create your account and verify email',
+  },
+  {
+    label: 'Profile Information',
+    description: 'Add your personal details',
+  },
+  {
+    label: 'Preferences',
+    description: 'Customize your experience',
+  },
+];
+
+export const SimpleHorizontalProcess: Story = {
+  render: (args: StepperProps) => {
+    const [activeStep, setActiveStep] = useState(1);
+
+    return (
+      <div className="max-w-2xl mx-auto">
+        <Stepper
+          {...args}
+          activeStep={activeStep}
+          onStepClick={(stepIndex: number) => {
+            setActiveStep(stepIndex);
+            args.onStepClick?.(stepIndex);
+          }}
+        />
+      </div>
+    );
+  },
+  args: {
+    orientation: 'horizontal',
+    steps: simpleSteps,
+    allowNavigation: true,
+  },
+};
+
+export const SimpleVerticalProcess: Story = {
+  render: (args: StepperProps) => {
+    const [activeStep, setActiveStep] = useState(1);
+
+    return (
+      <div className="max-w-md">
+        <Stepper
+          {...args}
+          activeStep={activeStep}
+          onStepClick={(stepIndex: number) => {
+            setActiveStep(stepIndex);
+            args.onStepClick?.(stepIndex);
+          }}
+        />
+      </div>
+    );
+  },
+  args: {
+    orientation: 'vertical',
+    steps: simpleSteps,
+    allowNavigation: true,
+  },
+};
+
+// Workflow with navigation buttons
+export const WithNavigationButtons: Story = {
+  render: (args: StepperProps) => {
+    const [activeStep, setActiveStep] = useState(0);
+
+    const handleNext = () => {
+      if (activeStep < steps.length - 1) {
+        setActiveStep(activeStep + 1);
+      }
+    };
+
+    const handlePrevious = () => {
+      if (activeStep > 0) {
+        setActiveStep(activeStep - 1);
+      }
+    };
+
+    return (
+      <div className="space-y-8">
+        <Stepper
+          {...args}
+          activeStep={activeStep}
+          onStepClick={(stepIndex: number) => {
+            setActiveStep(stepIndex);
+            args.onStepClick?.(stepIndex);
+          }}
+        />
+
+        <div className="flex justify-between max-w-2xl mx-auto">
+          <button
+            onClick={handlePrevious}
+            disabled={activeStep === 0}
+            className="px-4 py-2 text-sm font-medium text-foreground bg-muted rounded-md hover:bg-muted/80 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Previous
+          </button>
+          <button
+            onClick={handleNext}
+            disabled={activeStep === steps.length - 1}
+            className="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+          </button>
+        </div>
+      </div>
+    );
+  },
+  args: {
+    orientation: 'horizontal',
+    steps,
+    allowNavigation: false,
+  },
+};

package/src/stories/Navigation/TabsContainer.stories.tsx

@@ -1,5 +1,5 @@
-import { Box } from '@mui/material';
 import { Meta, StoryObj } from '@storybook/react';
+import { FileText, Home, Settings, User } from 'lucide-react';
 
 import {
   TabsContainer,
@@ -11,12 +11,6 @@ const meta: Meta<typeof TabsContainer> = {
   title: 'Navigation/TabsContainer',
   component: TabsContainer,
   tags: ['autodocs'],
-  // argTypes: {
-  //   menu: {
-  //     control: "object",
-  //     description: "Menu items to be displayed in the side navigation.",
-  //   },
-  // },
 };
 
 export default meta;
@@ -30,27 +24,132 @@ export const Primary: Story = {
       {
         key: '1',
         label: 'Personal Details',
-        component: <Box>First Year</Box>,
+        component: <div className="p-4">Personal details content</div>,
       },
       {
         key: '2',
         label: 'Overview',
-        component: <>Second Year</>,
+        component: <div className="p-4">Overview content</div>,
       },
       {
         key: '3',
         label: 'Leaves',
-        component: <>Third Year</>,
+        component: <div className="p-4">Leaves content</div>,
       },
       {
         key: '4',
         label: 'Class Reassignments',
-        component: <>Third Year</>,
+        component: <div className="p-4">Class reassignments content</div>,
       },
       {
         key: '5',
         label: 'Student Service Requests',
-        component: <>Third Year</>,
+        component: <div className="p-4">Student service requests content</div>,
+      },
+    ],
+  },
+};
+
+export const WithIcons: Story = {
+  render: (args: TabsContainerProps) => <TabsContainer {...args} />,
+  args: {
+    tabs: [
+      {
+        key: 'home',
+        label: 'Home',
+        icon: <Home className="h-4 w-4" />,
+        component: <div className="p-4">Home content</div>,
+      },
+      {
+        key: 'profile',
+        label: 'Profile',
+        icon: <User className="h-4 w-4" />,
+        component: <div className="p-4">Profile content</div>,
+      },
+      {
+        key: 'documents',
+        label: 'Documents',
+        icon: <FileText className="h-4 w-4" />,
+        component: <div className="p-4">Documents content</div>,
+      },
+      {
+        key: 'settings',
+        label: 'Settings',
+        icon: <Settings className="h-4 w-4" />,
+        component: <div className="p-4">Settings content</div>,
+      },
+    ],
+  },
+};
+
+export const WithHighlight: Story = {
+  render: (args: TabsContainerProps) => <TabsContainer {...args} />,
+  args: {
+    tabs: [
+      {
+        key: '1',
+        label: 'Overview',
+        component: <div className="p-4">Overview content</div>,
+      },
+      {
+        key: '2',
+        label: 'Notifications',
+        highlight: true,
+        component: <div className="p-4">You have new notifications!</div>,
+      },
+      {
+        key: '3',
+        label: 'Settings',
+        component: <div className="p-4">Settings content</div>,
+      },
+    ],
+  },
+};
+
+export const WithDisabled: Story = {
+  render: (args: TabsContainerProps) => <TabsContainer {...args} />,
+  args: {
+    tabs: [
+      {
+        key: '1',
+        label: 'Available',
+        component: <div className="p-4">Available content</div>,
+      },
+      {
+        key: '2',
+        label: 'Disabled Tab',
+        disabled: true,
+        component: <div className="p-4">This content is not accessible</div>,
+      },
+      {
+        key: '3',
+        label: 'Another Available',
+        component: <div className="p-4">Another available content</div>,
+      },
+    ],
+  },
+};
+
+export const DynamicVariant: Story = {
+  render: (args: TabsContainerProps) => <TabsContainer {...args} />,
+  args: {
+    variant: 'dynamic',
+    tabs: [
+      {
+        key: '1',
+        label: 'Short Content',
+        component: <div className="p-4">Short content here</div>,
+      },
+      {
+        key: '2',
+        label: 'Long Content',
+        component: (
+          <div className="p-4">
+            <p>This is a long content section.</p>
+            <p className="mt-4">It can grow dynamically based on content.</p>
+            <p className="mt-4">The height adjusts automatically.</p>
+          </div>
+        ),
       },
     ],
   },