@campxdev/react-blueprint 1.9.6 → 2.0.1

package/src/stories/DataDisplay/AccordionGroup.stories.tsx

@@ -1,130 +0,0 @@
-import { ImageList, ImageListItem } from '@mui/material';
-import { Meta, StoryObj } from '@storybook/react/*';
-import { AccordionGroup } from '../../components/export';
-
-const StandardImageList = () => {
-  return (
-    <ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
-      {itemData.map((item) => (
-        <ImageListItem key={item.img}>
-          <img
-            srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
-            src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
-            alt={item.title}
-            loading="lazy"
-          />
-        </ImageListItem>
-      ))}
-    </ImageList>
-  );
-};
-
-const itemData = [
-  {
-    img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
-    title: 'Breakfast',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
-    title: 'Burger',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
-    title: 'Camera',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
-    title: 'Coffee',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
-    title: 'Hats',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
-    title: 'Honey',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
-    title: 'Basketball',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
-    title: 'Fern',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
-    title: 'Mushrooms',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
-    title: 'Tomato basil',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
-    title: 'Sea star',
-  },
-  {
-    img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
-    title: 'Bike',
-  },
-];
-
-const primaryData = [
-  {
-    title: 'Accordion 1',
-    content:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
-  },
-  {
-    title: 'Accordion 2',
-    content:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
-  },
-  {
-    title: 'Accordion 3',
-    content:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
-  },
-  {
-    title: 'Accordion 4',
-    content:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.',
-  },
-];
-
-const SecondaryData = [
-  {
-    title: 'Accordion 1',
-    content: <StandardImageList />,
-  },
-  {
-    title: 'Accordion 2',
-    content: <StandardImageList />,
-  },
-  {
-    title: 'Accordion 3',
-    content: <StandardImageList />,
-  },
-  {
-    title: 'Accordion 4',
-    content: <StandardImageList />,
-  },
-];
-
-const meta: Meta<typeof AccordionGroup> = {
-  title: 'DataDisplay/AccordionGroup',
-  component: AccordionGroup,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof AccordionGroup>;
-
-export const Primary: Story = {
-  args: { data: primaryData },
-};
-
-export const Secondary: Story = {
-  args: { data: SecondaryData },
-};

package/src/stories/DataDisplay/ActivityLogView.stories.tsx

@@ -1,96 +0,0 @@
-import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react/*';
-import { Activity, ActivityLogView } from '../../components/export';
-
-// Mock data for the story with diverse timestamps and actions
-const activitiesData: Activity[] = [
-  {
-    userName: 'John Doe',
-    action: 'create',
-    message: "created 'Student Registration'",
-    timestamp: new Date().toISOString(), // Today
-  },
-  {
-    userName: 'Jane Smith',
-    action: 'update',
-    message: `updated 'Employee Record'
-• 'Position' has been changed from 'Junior Developer' to 'Senior Developer'
-• 'Salary' has been changed from '$50,000' to '$70,000'
-• 'Department' has been changed from 'IT Support' to 'Software Development'
-• 'Supervisor' has been changed from 'Mr. Adams' to 'Ms. Johnson'
-• 'Work Hours' have been changed from '40' to '45'`,
-    timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), // 2 days ago (Past Week)
-  },
-  {
-    userName: 'Admin',
-    action: 'delete',
-    message: "deleted 'Annual Report'",
-    timestamp: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(), // 10 days ago (Older)
-  },
-  {
-    userName: 'Alice Johnson',
-    action: 'create',
-    message: "created 'Course Outline'",
-    timestamp: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), // 5 days ago (Past Week)
-  },
-  {
-    userName: 'Bob Brown',
-    action: 'update',
-    message: `updated 'Project Details'
-• 'Project Name' has been changed from 'Website Revamp' to 'Mobile App Launch'
-• 'Deadline' has been changed from 'June 2023' to 'August 2023'
-• 'Team Members' have been changed from '5' to '8'
-• 'Budget' has been changed from '$20,000' to '$35,000'
-• 'Client Contact' has been changed from 'Mr. Lee' to 'Mrs. Gomez'`,
-    timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), // Yesterday (Past Week)
-  },
-  {
-    userName: 'Charlie Green',
-    action: 'delete',
-    message: "deleted 'Temporary Files'",
-    timestamp: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString(), // 15 days ago (Older)
-  },
-  {
-    userName: 'Emily White',
-    action: 'update',
-    message: `updated 'Client Information'
-• 'Client Name' has been changed from 'Acme Corp' to 'Globex Inc.'
-• 'Contact Number' has been changed from '123-456-7890' to '987-654-3210'
-• 'Address' has been changed from '123 Main St' to '456 Elm St'
-• 'Email' has been changed from 'info@acme.com' to 'contact@globex.com'
-• 'Account Manager' has been changed from 'John Smith' to 'Laura Adams'`,
-    timestamp: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), // 3 days ago (Past Week)
-  },
-];
-
-const meta: Meta<typeof ActivityLogView> = {
-  title: 'DataDisplay/ActivityLog',
-  component: ActivityLogView,
-  decorators: [
-    (Story) => (
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <Story />
-      </LocalizationProvider>
-    ),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ActivityLogView>;
-
-export const Default: Story = {
-  args: {
-    activitiesData,
-    isFetchingNextPage: false,
-    fetchNextPage: action('fetchNextPage'),
-    hasNextPage: true,
-    fromDate: null,
-    toDate: null,
-    setFromDate: action('setFromDate'),
-    setToDate: action('setToDate'),
-    isLoading: false,
-  },
-};

package/src/stories/DataDisplay/Card.stories.tsx

@@ -1,87 +0,0 @@
-import { Stack } from '@mui/material';
-import { Meta } from '@storybook/react';
-import { Card, CardProps } from '../../components/DataDisplay/Card/Card';
-
-export default {
-  title: 'DataDisplay/Card',
-  component: Card,
-  tags: ['autodocs'],
-  argTypes: {},
-} as Meta<typeof Card>;
-
-export const Standard = {
-  render: (args: CardProps) => <Card {...args} />,
-  args: {
-    title: 'Academic Administrator WS',
-    caption:
-      'A centralized hub designed to streamline and manage administrative tasks efficiently.',
-    fields: [
-      {
-        title: 'Start year / End Year',
-        value: '2024 / 2028',
-      },
-      {
-        title: 'Current Sem',
-        value: '1',
-      },
-      {
-        title: 'Total Students',
-        value: '1324',
-      },
-    ],
-    footer: {
-      buttonText: 'View Details',
-      onClick: () => alert(`Details Viewed`),
-    },
-  },
-};
-export const StandardWithImage = {
-  render: (args: CardProps) => (
-    <Stack flexDirection={'row'} gap={'20px'}>
-      <Card {...args} /> <Card {...args} /> <Card {...args} />{' '}
-    </Stack>
-  ),
-
-  args: {
-    title: 'ECE 2024 - 25',
-    caption: 'Started on July 24, 2024',
-    status: 'Active',
-    fields: [
-      {
-        title: 'Start year / End Year',
-        value: '2024 / 2028',
-      },
-      {
-        title: 'Current Sem',
-        value: '1',
-      },
-      {
-        title: 'Total Students',
-        value: '1324',
-      },
-      {
-        title: 'Total Students',
-        value: '1324',
-      },
-      {
-        title: 'Total Students',
-        value: '1324',
-      },
-    ],
-    footer: {
-      buttonText: 'View Details',
-      onClick: () => alert(`Details Viewed`),
-    },
-    imageSrc:
-      'https://i.pinimg.com/564x/aa/a5/90/aaa5903de24897afa5b07fd9f4092866.jpg',
-    moreOptions: true,
-  },
-};
-
-export const Statistic = {
-  render: (args: CardProps) => <Card {...args} />,
-  args: {
-    title: 'ECE 2024 - 25',
-    caption: 'Started on July 24, 2024',
-  },
-};

package/src/stories/DataDisplay/Chips.stories.tsx

@@ -1,77 +0,0 @@
-import { Meta } from '@storybook/react';
-import { useState } from 'react';
-import Chips from '../../components/DataDisplay/Chips/Chips';
-
-const sampleChips = [
-  {
-    label: 'Chip1',
-    value: 1,
-  },
-  {
-    label: 'Chip2',
-    value: 2,
-  },
-  {
-    label: 'Chip3',
-    value: 3,
-  },
-];
-
-export default {
-  title: 'DataDisplay/Chips',
-  component: Chips,
-  tags: ['autodocs'],
-  argTypes: {},
-} as Meta<typeof Chips>;
-
-export const Default = {
-  render: () => {
-    const [selected, setSelected] = useState<string | number | string[]>('');
-
-    return (
-      <Chips
-        list={sampleChips}
-        selected={selected}
-        onSelected={(selectedValue) => {
-          setSelected(selectedValue);
-        }}
-      />
-    );
-  },
-  args: {},
-};
-
-export const ClickableChip = {
-  render: () => {
-    const [selected, setSelected] = useState<string | number | string[]>('');
-
-    return (
-      <Chips
-        list={sampleChips}
-        selected={selected}
-        onSelected={(selectedValue) => {
-          setSelected(selectedValue);
-          console.log(selectedValue);
-        }}
-      />
-    );
-  },
-};
-
-export const MultipleSelectionChip = {
-  render: () => {
-    const [selected, setSelected] = useState<string | number | string[]>([]);
-
-    return (
-      <Chips
-        list={sampleChips}
-        selected={selected}
-        singleSelection={false}
-        onSelected={(selectedValue) => {
-          setSelected(selectedValue);
-          console.log(selectedValue);
-        }}
-      />
-    );
-  },
-};

package/src/stories/DataDisplay/CircularAvatar.stories.tsx

@@ -1,30 +0,0 @@
-// Import React and other necessary elements
-
-import { Meta } from '@storybook/react';
-import {
-  CircularAvatar,
-  CircularAvatarProps,
-} from '../../components/DataDisplay/Avatar/Avatar';
-
-// Define the default export with Meta type including the component type
-export default {
-  title: 'DataDisplay/CircularAvatar',
-  component: CircularAvatar,
-  tags: ['autodocs'],
-  argTypes: {},
-} as Meta<typeof CircularAvatar>;
-
-// Define stories directly as objects with render function
-export const WithText = {
-  render: (args: CircularAvatarProps) => <CircularAvatar {...args} />,
-  args: {
-    text: 'Sh auy',
-  },
-};
-
-export const WithImage = {
-  render: (args: CircularAvatarProps) => <CircularAvatar {...args} />,
-  args: {
-    src: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyNzM3ODF8MHwxfGFsbHwxfHx8fHx8fHwxNjM4MjM2MDg0&ixlib=rb-1.2.1&q=80&w=400',
-  },
-};

package/src/stories/DataDisplay/DataTable.stories.tsx

@@ -1,81 +0,0 @@
-import { GridColDef, GridColumnGroupingModel } from '@mui/x-data-grid';
-import { Meta, StoryObj } from '@storybook/react';
-import { DataTable } from '../../components/DataDisplay/DataTable/DataTable';
-// Make sure the path to your component is correct
-
-const columns: GridColDef[] = [
-  { field: 'id', headerName: 'ID', flex: 1 },
-  { field: 'firstName', headerName: 'First name', flex: 3 },
-  { field: 'lastName', headerName: 'Last name', flex: 3 },
-  { field: 'age', headerName: 'Age', type: 'number', flex: 1 },
-];
-
-const rows = [
-  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
-  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
-  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
-  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
-  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
-  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
-  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
-  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
-  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
-  { id: 10, lastName: 'Baratheon', firstName: 'Robert', age: 40 },
-];
-
-const columnGroupingModel: GridColumnGroupingModel = [
-  {
-    groupId: 'full_name',
-    headerName: 'Full Name',
-    description: 'Full Name of Character',
-    children: [{ field: 'firstName' }, { field: 'lastName' }],
-  },
-];
-
-// Define the default export with Meta type including the component type
-const meta: Meta<typeof DataTable> = {
-  title: 'DataDisplay/DataTable',
-  component: DataTable,
-  argTypes: {
-    totalCount: {
-      control: 'number',
-      description: 'Total Number of rows',
-    },
-    limit: {
-      control: 'number',
-      description: 'Total Number of rows',
-    },
-    offset: {
-      control: 'number',
-      description: 'Total Number of rows',
-    },
-    onPageChange: {
-      action: 'onPageChange', // This will log actions in the actions panel of Storybook
-      description: 'Callback function when the page changes',
-    },
-    onLimitChange: {
-      action: 'onLimitChange', // This will log actions in the actions panel of Storybook
-      description: 'Callback function when the limit changes',
-    },
-  },
-  args: {
-    limit: 10,
-    offset: 0,
-    totalCount: 100,
-    onPageChange: (page) => {},
-    onLimitChange: (limit) => {},
-    columnGroupingModel,
-    columns,
-    rows,
-  },
-};
-
-export default meta;
-const Template: StoryObj<typeof DataTable> = {
-  render: (args) => <DataTable {...args} />,
-  args: {},
-};
-
-export const Default: StoryObj<typeof DataTable> = {
-  ...Template,
-};

package/src/stories/DataDisplay/SidePanel.stories.tsx

@@ -1,73 +0,0 @@
-import { Box } from '@mui/material';
-import { Meta } from '@storybook/react/*';
-import {
-  SidePanel,
-  SidePanelProps,
-} from '../../components/DataDisplay/SidePanel/SidePanel';
-
-export default {
-  title: 'DataDisplay/SidePanel',
-  component: SidePanel,
-} as Meta<typeof SidePanel>;
-
-export const WithText = {
-  render: (args: SidePanelProps) => <SidePanel {...args} />,
-  args: {
-    variables: [
-      {
-        label: 'Frequency',
-        value: 'Daily',
-      },
-      {
-        label: 'Start Date',
-        value: '5 July, 2024',
-      },
-      {
-        label: 'Time',
-        value: '04:00 PM',
-      },
-    ],
-  },
-};
-
-export const WithImage = {
-  render: (args: SidePanelProps) => <SidePanel {...args} />,
-  args: {
-    imageUrl: `https://fastly.picsum.photos/id/1063/536/354.jpg?hmac=c-ouc6pAVYGm1E0uLcnK_cavuLd8J0VPbodIe_CG8s0`,
-    variables: [
-      {
-        label: 'Frequency',
-        value: 'Daily',
-      },
-      {
-        label: 'Start Date',
-        value: '5 July, 2024',
-      },
-      {
-        label: 'Time',
-        value: '04:00 PM',
-      },
-    ],
-  },
-};
-export const WithBottomComponent = {
-  render: (args: SidePanelProps) => <SidePanel {...args} />,
-  args: {
-    imageUrl: `https://fastly.picsum.photos/id/1063/536/354.jpg?hmac=c-ouc6pAVYGm1E0uLcnK_cavuLd8J0VPbodIe_CG8s0`,
-    variables: [
-      {
-        label: 'Frequency',
-        value: 'Daily',
-      },
-      {
-        label: 'Start Date',
-        value: '5 July, 2024',
-      },
-      {
-        label: 'Time',
-        value: '04:00 PM',
-      },
-    ],
-    bottomChildren: <Box>here your component</Box>,
-  },
-};

package/src/stories/DataDisplay/SquareAvatar.stories.tsx

@@ -1,50 +0,0 @@
-// Import React and other necessary elements
-
-import { Meta } from '@storybook/react';
-import {
-  SquareAvatar,
-  SquareAvatarProps,
-} from '../../components/DataDisplay/Avatar/Avatar';
-
-// Define the default export with Meta type including the component type
-export default {
-  title: 'DataDisplay/SquareAvatar',
-  component: SquareAvatar,
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: 'text',
-      description: 'Content inside the SquareAvatar component',
-    },
-    src: {
-      control: 'text',
-      description: 'Image source for the SquareAvatar component',
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['circular', 'rounded', 'square'],
-      },
-      description: 'Variant of the SquareAvatar component',
-    },
-    sx: {
-      control: 'object',
-      description: 'Custom styling for the SquareAvatar component',
-    },
-  },
-} as Meta<typeof SquareAvatar>;
-
-// Define stories directly as objects with render function
-export const WithText = {
-  render: (args: SquareAvatarProps) => <SquareAvatar {...args} />,
-  args: {
-    text: 'SQC01',
-  },
-};
-
-export const WithImage = {
-  render: (args: SquareAvatarProps) => <SquareAvatar {...args} />,
-  args: {
-    src: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyNzM3ODF8MHwxfGFsbHwxfHx8fHx8fHwxNjM4MjM2MDg0&ixlib=rb-1.2.1&q=80&w=400',
-  },
-};

package/src/stories/DataDisplay/StatusCard.stories.tsx

@@ -1,62 +0,0 @@
-import { Meta, StoryFn } from '@storybook/react';
-import { StatusCard, StatusCardProps } from '../../components/export';
-
-export default {
-  title: 'DataDisplay/StatusCard',
-  component: StatusCard,
-  argTypes: {
-    color: {
-      control: 'select',
-      options: ['green', 'red', 'orange', 'yellow', 'blue', 'pink'],
-      description: 'The color of the status card',
-    },
-    text: {
-      control: 'text',
-      description: 'The text displayed on the status card',
-    },
-  },
-} as Meta<StatusCardProps>;
-
-const Template: StoryFn<StatusCardProps> = (args) => <StatusCard {...args} />;
-
-export const GreenStatus = Template.bind({});
-GreenStatus.args = {
-  color: 'green',
-  text: 'Success',
-};
-
-export const RedStatus = Template.bind({});
-RedStatus.args = {
-  color: 'red',
-  text: 'Error',
-};
-
-export const OrangeStatus = Template.bind({});
-OrangeStatus.args = {
-  color: 'orange',
-  text: 'Warning',
-};
-
-export const YellowStatus = Template.bind({});
-YellowStatus.args = {
-  color: 'yellow',
-  text: 'Caution',
-};
-
-export const BlueStatus = Template.bind({});
-BlueStatus.args = {
-  color: 'blue',
-  text: 'Info',
-};
-
-export const PinkStatus = Template.bind({});
-PinkStatus.args = {
-  color: 'pink',
-  text: 'Special',
-};
-
-export const CustomStatus = Template.bind({});
-CustomStatus.args = {
-  color: 'red',
-  text: 'Custom Status Text',
-};