@campxdev/react-blueprint 1.1.5 → 1.1.7

package/src/components/Navigation/Sidebar/interfaces.ts

@@ -1,21 +1,44 @@
-import { ReactElement } from "react";
+import { ReactElement } from 'react';
+import { SideMenuItemProps } from '../exports';
 
-export interface MenuItemProps {
+export interface MenuState {
+  menu: SideMenuItemProps[];
+  title: string | null;
+  path: string | null;
+}
+
+export interface GetActiveMenuProps {
+  menu: SideMenuItemProps[];
+  pathArray: string[];
+  previousMenuState: any;
+}
+
+export interface InternalMenuClickHandlerProps {
+  menuTitle: string;
+  menuPath: string;
+  internalMenu: SideMenuItemProps[];
+}
+
+export interface TooltipIconProps {
   name: string;
-  path: string;
   icon: ReactElement;
-  permissionKey?: string;
-  menu?: MenuItemProps[];
-  dropdownMenu?: DropdownMenuItem[];
 }
 
-export interface DropdownMenuItem {
+export interface InternalMenuButtonProps {
   name: string;
-  path: string;
-  permissionKey?: string;
+  icon: ReactElement;
+  collapsed: boolean;
 }
 
-export interface MenuHistory {
-  menu: MenuItemProps[] | null;
-  menuTitle: string | null;
+export interface DefaultButtonProps {
+  name: string;
+  icon: ReactElement;
+  collapsed: boolean;
+}
+
+export interface SubMenuButtonProps {
+  name: string;
+  icon: ReactElement;
+  expanded: boolean;
+  collapsed: boolean;
 }

package/src/components/Navigation/Sidebar/styles.tsx

@@ -107,7 +107,7 @@ export const createSidebarStyles = (collapsed: boolean) => {
     display: "none",
   }));
 
-  const StyledDropdownButton = styled(Button)<StyledLinkButtonProps>(
+  const StyledSubMenuButton = styled(Button)<StyledLinkButtonProps>(
     ({ theme, match }) => ({
       width: collapsed ? "auto" : "100%",
       textDecoration: "none",
@@ -141,7 +141,7 @@ export const createSidebarStyles = (collapsed: boolean) => {
     StyledLinkButton,
     StyledListItemButton,
     StyledListItemIcon,
-    StyledDropdownButton,
+    StyledSubMenuButton,
     StyledMenuHeaderButton,
     HoverIcon,
   };

package/src/components/Navigation/exports.ts

@@ -3,6 +3,8 @@ export * from "./DropDownMenu/DropDownButton";
 export * from "./DropDownMenu/DropDownIcon";
 export * from "./DropDownMenu/DropDownMenu";
 export * from "./DropDownMenu/DropdownMenuItem";
+
 export * from "./Sidebar/Sidebar";
+
 export * from "./Stepper/Stepper";
 export * from "./TabsContainer/TabsContainer";

package/src/components/export.ts

@@ -4,4 +4,4 @@ export * from "./Feedback/exports";
 export * from "./Input/export";
 export * from "./Layout/exports";
 export * from "./Navigation/exports";
-
+export * from "./Charts/export";

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

@@ -0,0 +1,131 @@
+import ImageList from '@mui/material/ImageList';
+import ImageListItem from '@mui/material/ImageListItem';
+import { Meta, StoryObj } from '@storybook/react/*';
+import { AccordionGroup } from '../../components/DataDisplay/AccordionGroup/AccordionGroup';
+
+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 meta: Meta<typeof AccordionGroup> = {
+  title: 'DataDisplay/Accordion',
+  component: AccordionGroup,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof AccordionGroup>;
+
+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 />,
+  },
+];
+
+export const Primary: Story = {
+  args: { data: primaryData },
+};
+
+export const Secondary: Story = {
+  args: { data: SecondaryData },
+};

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

@@ -0,0 +1,77 @@
+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/Input/DatePicker.stories.tsx

@@ -0,0 +1,138 @@
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { Meta, StoryObj } from '@storybook/react/*';
+import { add } from 'date-fns';
+import { Icons } from '../../components/Assets/Icons/Icons';
+import { DatePicker } from '../../components/Input/DatePicker/DatePicker';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Input/DatePicker',
+  component: DatePicker,
+  decorators: [
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <Story />
+      </LocalizationProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const Primary: Story = {
+  args: { label: 'Date Picker', name: 'date-picker', required: true },
+};
+
+export const Secondary: Story = {
+  args: { ...Primary.args, label: 'Date Picker (Full Month Text)', format: 'dd MMMM yyyy' },
+};
+
+export const Tertiary: Story = {
+  args: { ...Primary.args, label: 'Just Month Year', format: 'MMMM yyyy', views: ['month', 'year'] },
+};
+
+export const Quaternary: Story = {
+  args: { ...Primary.args, label: 'Just Year', format: 'yyyy', views: ['year'] },
+};
+
+export const WithShortcuts: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Shortcuts',
+    required: false,
+    shortcutsItems: [
+      { label: 'Today', getValue: () => new Date() },
+      { label: 'Tomorrow', getValue: () => add(new Date(), { days: 1 }) },
+      { label: 'Yesterday', getValue: () => add(new Date(), { days: -1 }) },
+      {
+        label: 'Independence Day',
+        getValue: () => {
+          const currentYear = new Date().getFullYear();
+          return new Date(currentYear, 6, 15);
+        },
+      },
+      {
+        label: 'Christmas',
+        getValue: () => {
+          const currentYear = new Date().getFullYear();
+          return new Date(currentYear, 11, 25);
+        },
+      },
+    ],
+  },
+};
+
+export const WithDefaultValue: Story = {
+  args: { ...Primary.args, label: 'With Default Value', required: false, value: new Date('2024/9/15') },
+};
+
+export const WithMinMaxDate: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Min and Max Date',
+    required: false,
+    minDate: new Date('2024/8/15'),
+    maxDate: new Date('2024/10/9'),
+  },
+};
+
+export const WithCustomIcon: Story = {
+  args: { ...Primary.args, label: 'With Custom Icon', required: false, openPickerIcon: Icons.CareerIcon },
+};
+
+export const WithPlaceHolderHelperText: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Place Holder, Helper Text',
+    required: false,
+    placeholder: 'CampX date',
+    helperText: 'Mandatory field',
+  },
+};
+
+export const DisablePast: Story = {
+  args: { ...Primary.args, label: 'Disable Past Dates', required: false, disablePast: true },
+};
+
+export const DisableFuture: Story = {
+  args: { ...Primary.args, label: 'Disable Future Dates', required: false, disableFuture: true },
+};
+
+export const DisableSpecificDate: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Disable Specific Dates',
+    required: false,
+    shouldDisableDate: (date: Date) => {
+      return date.getDay() === 0 || date.getDay() === 6;
+    },
+  },
+};
+
+export const DisableSpecificMonth: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Disable Specific Month (February)',
+    required: false,
+    shouldDisableMonth: (date: Date) => {
+      return date.getMonth() === 1;
+    },
+  },
+};
+
+export const DisableSpecificYear: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Disable Specific Year (2022)',
+    required: false,
+    shouldDisableYear: (date: Date) => {
+      return date.getFullYear() === 2022;
+    },
+  },
+};
+
+export const ReadOnly = {
+  args: { ...Primary.args, label: 'Read Only', required: false, disabled: true, value: new Date('2024/9/15') },
+};

package/src/stories/Input/IconButtons.stories.tsx

@@ -0,0 +1,30 @@
+import { Stack } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react/*";
+import { IconButtons } from "../../components/Input/IconButtons/IconButtons";
+
+const IconButtonsStory = () => {
+  return (
+    <Stack gap={2} direction={"row"}>
+      {Object.values(IconButtons).map((IconButton) => (
+        <IconButton />
+      ))}
+    </Stack>
+  );
+};
+
+export default {
+  title: "Input/IconButtons",
+  component: IconButtonsStory,
+  tags: ["autodocs"],
+  argTypes: {},
+} as Meta<typeof IconButtonsStory>;
+
+type Story = StoryObj<typeof IconButtonsStory>;
+
+export const Icon: Story = {
+  render: (args: any) => (
+    <>
+      <IconButtonsStory />
+    </>
+  ),
+};

package/src/stories/Input/{Chips.stories.tsx → Tags.stories.tsx}

@@ -1,40 +1,40 @@
 // Import React and other necessary elements
-import { Meta } from "@storybook/react";
-import { Chips } from "../../components/Input/Chips/Chips";
+import { Meta } from '@storybook/react';
+import { Tags } from '../../components/Input/Tags/Tags';
 
-const sampleChips = [
+const sampleTags = [
   {
-    label: "Chip1",
+    label: 'Tag1',
     value: 1,
   },
   {
-    label: "Chip2",
+    label: 'Tag2',
     value: 2,
   },
   {
-    label: "Chip3",
+    label: 'Tag3',
     value: 3,
   },
 ];
 
 // Define the default export with Meta type including the component type
 export default {
-  title: "Input/Chips",
-  component: Chips,
-  tags: ["autodocs"],
+  title: 'Input/Tags',
+  component: Tags,
+  tags: ['autodocs'],
   argTypes: {},
-} as Meta<typeof Chips>;
+} as Meta<typeof Tags>;
 
 // Define stories directly as objects with render function
 export const Default = {
-  render: () => <Chips chips={sampleChips} />,
+  render: () => <Tags tags={sampleTags} />,
   args: {},
 };
 
-export const ClickableChip = {
+export const ClickableTag = {
   render: () => (
-    <Chips
-      chips={sampleChips}
+    <Tags
+      tags={sampleTags}
       onClick={(clickedChip) => {
         console.log(clickedChip);
       }}
@@ -42,10 +42,10 @@ export const ClickableChip = {
   ),
 };
 
-export const DeletableChip = {
+export const DeletableTag = {
   render: () => (
-    <Chips
-      chips={sampleChips}
+    <Tags
+      tags={sampleTags}
       onDelete={(deletedChip) => {
         console.log(deletedChip);
       }}

package/src/stories/Input/TimePicker.stories.tsx

@@ -0,0 +1,123 @@
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { Meta, StoryObj } from '@storybook/react/*';
+import { add, isWithinInterval, startOfDay } from 'date-fns';
+import { TimePicker } from '../../components/Input/TimePicker/TimePicker';
+
+const meta: Meta<typeof TimePicker> = {
+  title: 'Input/TimePicker',
+  component: TimePicker,
+  decorators: [
+    (Story) => (
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <Story />
+      </LocalizationProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TimePicker>;
+
+export const Primary: Story = {
+  args: { label: 'Time Picker (Hours Minutes Meridian)', name: 'time-picker', required: true },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Time Picker (Hours Minutes Seconds Meridian)',
+    format: 'HH:mm:ss a',
+    views: ['hours', 'minutes', 'seconds'],
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Time Picker (Hours Minutes - 24hr Format)',
+    format: 'HH:mm',
+    ampm: false,
+  },
+};
+
+export const Quaternary: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Time Picker (Hours Minutes Seconds - 24hr Format)',
+    format: 'HH:mm:ss',
+    ampm: false,
+    views: ['hours', 'minutes', 'seconds'],
+  },
+};
+
+export const WithDefaultValue: Story = {
+  args: { ...Primary.args, label: 'With Default Value', required: false, value: new Date('2024/9/15 15:30') },
+};
+
+export const WithPlaceHolderHelperText: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Placeholder & Helper Text',
+    required: false,
+    placeholder: 'Select Time',
+    helperText: 'Mandatory field',
+  },
+};
+
+export const WithDifferentTimeSteps: Story = {
+  args: { ...Primary.args, label: 'With Time Steps', required: false, timeSteps: { hours: 2, minutes: 15 } },
+};
+
+export const DisablePast: Story = {
+  args: { ...Primary.args, label: 'Disable Past', format: 'HH:mm', ampm: false, required: false, disablePast: true },
+};
+
+export const DisableFuture: Story = {
+  args: { ...Primary.args, label: 'Disable Future', format: 'HH:mm', ampm: false, required: false, disableFuture: true },
+};
+
+export const MinimumTime: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Minimum Time (9AM)',
+    format: 'HH:mm',
+    ampm: false,
+    required: false,
+    minTime: new Date('2024/9/15 09:00'),
+  },
+};
+
+export const MaximumTime: Story = {
+  args: {
+    ...Primary.args,
+    label: 'With Maximum Time (5PM)',
+    format: 'HH:mm',
+    ampm: false,
+    required: false,
+    maxTime: new Date('2024/9/15 17:00'),
+  },
+};
+
+export const DisableSpecificTime: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Disable Specific Time (12AM - 9AM)',
+    ampm: false,
+    required: false,
+    shouldDisableTime: (time: Date, clockType: 'hours' | 'minutes' | 'seconds') => {
+      if (clockType === 'hours') {
+        const today = startOfDay(new Date());
+        const startTime = today;
+        const endTime = add(today, { hours: 8 });
+        return isWithinInterval(time, { start: startTime, end: endTime });
+      }
+      return false;
+    },
+  },
+};
+
+export const ReadOnly: Story = {
+  args: { ...Primary.args, label: 'Read Only', required: false, disabled: true, value: new Date('2024/9/15 15:30') },
+};