@campxdev/react-blueprint 1.0.4 → 1.0.6

package/src/stories/Charts/Treemap.stories.tsx

@@ -0,0 +1,224 @@
+import { Meta } from "@storybook/react";
+import TreeMap from "../../components/Charts/TreeMap/TreeMap";
+
+const data = [
+  {
+    name: "axis",
+    children: [
+      { name: "Axes", size: 1302 },
+      { name: "Axis", size: 24593 },
+      { name: "AxisGridLine", size: 652 },
+      { name: "AxisLabel", size: 636 },
+      { name: "CartesianAxes", size: 6703 },
+    ],
+  },
+  {
+    name: "controls",
+    children: [
+      { name: "AnchorControl", size: 2138 },
+      { name: "ClickControl", size: 3824 },
+      { name: "Control", size: 1353 },
+      { name: "ControlList", size: 4665 },
+      { name: "DragControl", size: 2649 },
+      { name: "ExpandControl", size: 2832 },
+      { name: "HoverControl", size: 4896 },
+      { name: "IControl", size: 763 },
+      { name: "PanZoomControl", size: 5222 },
+      { name: "SelectionControl", size: 7862 },
+      { name: "TooltipControl", size: 8435 },
+    ],
+  },
+  {
+    name: "data",
+    children: [
+      { name: "Data", size: 20544 },
+      { name: "DataList", size: 19788 },
+      { name: "DataSprite", size: 10349 },
+      { name: "EdgeSprite", size: 3301 },
+      { name: "NodeSprite", size: 19382 },
+      {
+        name: "render",
+        children: [
+          { name: "ArrowType", size: 698 },
+          { name: "EdgeRenderer", size: 5569 },
+          { name: "IRenderer", size: 353 },
+          { name: "ShapeRenderer", size: 2247 },
+        ],
+      },
+      { name: "ScaleBinding", size: 11275 },
+      { name: "Tree", size: 7147 },
+      { name: "TreeBuilder", size: 9930 },
+    ],
+  },
+  {
+    name: "events",
+    children: [
+      { name: "DataEvent", size: 7313 },
+      { name: "SelectionEvent", size: 6880 },
+      { name: "TooltipEvent", size: 3701 },
+      { name: "VisualizationEvent", size: 2117 },
+    ],
+  },
+  {
+    name: "legend",
+    children: [
+      { name: "Legend", size: 20859 },
+      { name: "LegendItem", size: 4614 },
+      { name: "LegendRange", size: 10530 },
+    ],
+  },
+  {
+    name: "operator",
+    children: [
+      {
+        name: "distortion",
+        children: [
+          { name: "BifocalDistortion", size: 4461 },
+          { name: "Distortion", size: 6314 },
+          { name: "FisheyeDistortion", size: 3444 },
+        ],
+      },
+      {
+        name: "encoder",
+        children: [
+          { name: "ColorEncoder", size: 3179 },
+          { name: "Encoder", size: 4060 },
+          { name: "PropertyEncoder", size: 4138 },
+          { name: "ShapeEncoder", size: 1690 },
+          { name: "SizeEncoder", size: 1830 },
+        ],
+      },
+      {
+        name: "filter",
+        children: [
+          { name: "FisheyeTreeFilter", size: 5219 },
+          { name: "GraphDistanceFilter", size: 3165 },
+          { name: "VisibilityFilter", size: 3509 },
+        ],
+      },
+      { name: "IOperator", size: 1286 },
+      {
+        name: "label",
+        children: [
+          { name: "Labeler", size: 9956 },
+          { name: "RadialLabeler", size: 3899 },
+          { name: "StackedAreaLabeler", size: 3202 },
+        ],
+      },
+      {
+        name: "layout",
+        children: [
+          { name: "AxisLayout", size: 6725 },
+          { name: "BundledEdgeRouter", size: 3727 },
+          { name: "CircleLayout", size: 9317 },
+          { name: "CirclePackingLayout", size: 12003 },
+          { name: "DendrogramLayout", size: 4853 },
+          { name: "ForceDirectedLayout", size: 8411 },
+          { name: "IcicleTreeLayout", size: 4864 },
+          { name: "IndentedTreeLayout", size: 3174 },
+          { name: "Layout", size: 7881 },
+          { name: "NodeLinkTreeLayout", size: 12870 },
+          { name: "PieLayout", size: 2728 },
+          { name: "RadialTreeLayout", size: 12348 },
+          { name: "RandomLayout", size: 870 },
+          { name: "StackedAreaLayout", size: 9121 },
+          { name: "TreeMapLayout", size: 9191 },
+        ],
+      },
+      { name: "Operator", size: 2490 },
+      { name: "OperatorList", size: 5248 },
+      { name: "OperatorSequence", size: 4190 },
+      { name: "OperatorSwitch", size: 2581 },
+      { name: "SortOperator", size: 2023 },
+    ],
+  },
+];
+
+const COLORS = [
+  "#8889DD",
+  "#9597E4",
+  "#8DC77B",
+  "#A5D297",
+  "#E2CF45",
+  "#F8C12D",
+];
+
+export default {
+  title: "Charts/TreeMap",
+  component: TreeMap,
+  argTypes: {
+    title: {
+      control: "text",
+      description: "Title of the TreeMap",
+    },
+    titleSx: {
+      control: "object",
+      description: "Styling for the title",
+    },
+    dataKey: {
+      control: "text",
+      description: "Key for the data value",
+    },
+    width: {
+      control: "number",
+      description: "Width of the TreeMap",
+    },
+    height: {
+      control: "number",
+      description: "Height of the TreeMap",
+    },
+    margin: {
+      control: "object",
+      description: "Margin around the TreeMap",
+    },
+    aspectRatio: {
+      control: "number",
+      description: "Aspect ratio of the TreeMap",
+    },
+    fill: {
+      control: "color",
+      description: "Fill color for the TreeMap",
+    },
+    stroke: {
+      control: "color",
+      description: "Stroke color for the TreeMap",
+    },
+    colors: {
+      control: { type: "object" },
+      description: "Array of colors for the TreeMap",
+    },
+    showToolTip: {
+      control: "boolean",
+      description: "Toggle tooltip visibility",
+    },
+    isAnimationActive: {
+      control: "boolean",
+      description: "Toggle animation",
+    },
+    animationEasing: {
+      control: "text",
+      description: "Animation easing",
+    },
+    treeMapStyle: {
+      control: "object",
+      description: "Styling for the TreeMap",
+    },
+    containerSx: {
+      control: "object",
+      description: "Styling for the container",
+    },
+  },
+} as Meta<typeof TreeMap>;
+
+export const Default = () => {
+  return (
+    <TreeMap
+      title="Tree Map Example"
+      width={800}
+      height={600}
+      data={data}
+      colors={COLORS}
+      dataKey={"size"}
+    />
+  );
+};

package/src/stories/DataDisplay/Accordion.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from "@storybook/react/*";
+import { Accordion } from "../../components/DataDisplay/Accordion/Accordion";
+import StandardImageList from "../../components/DataDisplay/Accordion/utils/StandardImageList";
+
+const meta: Meta<typeof Accordion> = {
+  title: "DataDisplay/Accordion",
+  component: Accordion,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Accordion>;
+
+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/DesignSystem/typography.stories.tsx

@@ -47,7 +47,7 @@ export const TypographyStyles = () => (
       text="Subtitle 2 (subtitle2) - Lorem ipsum dolor sit."
     />
     <TypographyDisplay
-      variant="subtitle1"
+      variant="subtitle3"
       fontInfo={{ family: "Poppins", weight: "400", size: "14px" }}
       text="Subtitle 3 (subtitle3) - Lorem ipsum dolor sit."
     />

package/src/stories/Layout/TabsLayout.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from "@storybook/react/*";
+import { TabsLayout } from "../../components/export";
+
+const meta: Meta<typeof TabsLayout> = {
+  title: "Layout/TabsLayout",
+  component: TabsLayout,
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof TabsLayout>;
+
+export const Primary: Story = {
+  args: {
+    menu: [
+      {
+        path: "degrees",
+        title: "Degrees",
+        permissionKey: "degreesPermission",
+      },
+      {
+        path: "calendar",
+        title: "Academic Calendar",
+        permissionKey: "calendarPermission",
+      },
+      {
+        path: "programs",
+        title: "Programs",
+        permissionKey: "programsPermission",
+      },
+      {
+        path: "semester",
+        title: "Semester",
+        permissionKey: "semesterPermission",
+      },
+      {
+        path: "courses",
+        title: "Courses",
+        permissionKey: "coursesPermission",
+      },
+      {
+        path: "professors",
+        title: "Professors",
+        permissionKey: "professorsPermission",
+      },
+      {
+        path: "Faculties",
+        title: "Faculties",
+        permissionKey: "facultiesPermission",
+      },
+    ],
+  },
+};

package/src/stories/Navigation/Breadcrumbs.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/react/*";
+import { Breadcrumbs } from "../../components/Navigation/Breadcrumbs/Breadcrumbs";
+
+const meta: Meta<typeof Breadcrumbs> = {
+  title: "Navigation/Breadcrumbs",
+  component: Breadcrumbs,
+  argTypes: {
+    links: {
+      description: "Array of links",
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Breadcrumbs>;
+
+export const Primary: Story = {
+  args: {
+    links: [
+      {
+        name: "External Exams",
+        to: "/home",
+      },
+      {
+        name: "Archived Exams",
+        to: "/about",
+      },
+      {
+        name: "Contact",
+        to: "/contact",
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,51 @@
+import { Meta, StoryObj } from "@storybook/react/*";
+import { Stepper } from "../../components/Navigation/Stepper/Stepper";
+
+const meta: Meta<typeof Stepper> = {
+  title: "Navigation/Stepper",
+  component: Stepper,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Stepper>;
+
+export const VerticalStepper: Story = {
+  args: {
+    orientation: "vertical",
+    steps: [
+      {
+        label: "Semester Configuration",
+        description:
+          "Configure Credits, Tuition Fee Requirements, Registration Dates",
+      },
+      {
+        label: "Semester Calender",
+        description:
+          "Manage the timeline of the semester. Add new or edit the following events as per the semester needs",
+      },
+      {
+        label: "Students and Sections",
+        description: "Add or move students to their respective sections",
+      },
+      {
+        label: "Courses",
+        description:
+          "Verify the courses that are going to be taught in this semester",
+      },
+      {
+        label: "Assign Faculty",
+        description: "Assign Faculty to the available subjects",
+      },
+    ],
+    activeStep: 2,
+  },
+};
+
+export const HorizontalStepper: Story = {
+  args: {
+    ...VerticalStepper.args,
+    orientation: "horizontal",
+  },
+};

package/src/themes/commonTheme.ts

@@ -15,6 +15,47 @@ export const getCommonTheme = (mode: Theme) => {
       fontFamily: ["Heebo", "Poppins", "sans-serif"].join(","),
     },
     components: {
+      MuiAccordionSummary: {
+        styleOverrides: {
+          root: {
+            justifyContent: "flex-start",
+            paddingLeft: "20px",
+            "&.Mui-expanded": {
+              minHeight: "0px",
+            },
+          },
+          content: {
+            flexGrow: "unset",
+            margin: "0px 16px 0px 0px",
+            "&.Mui-expanded": {
+              margin: "16px 16px 0px 0px",
+            },
+          },
+          expandIconWrapper: {
+            "&.Mui-expanded": {
+              transform: "rotate(180deg)",
+              marginTop: "16px",
+            },
+          },
+        },
+      },
+      MuiStepLabel: {
+        styleOverrides: {
+          root: {
+            marginLeft: "2px",
+          },
+        },
+      },
+      MuiBreadcrumbs: {
+        styleOverrides: {
+          root: {
+            fontFamily: "Poppins",
+          },
+          separator: {
+            color: ColorTokens.text.tertiary,
+          },
+        },
+      },
       MuiIconButton: {
         defaultProps: {
           disableRipple: true,
@@ -178,7 +219,7 @@ export const getCommonTheme = (mode: Theme) => {
                 display: "none",
               },
             },
-            minWidth: "350px",
+            minWidth: "200px",
             margin: "5px 0px",
           },
         },
@@ -285,6 +326,11 @@ export const getCommonTheme = (mode: Theme) => {
         defaultProps: {
           underline: "none",
         },
+        styleOverrides: {
+          root: {
+            color: ColorTokens.text.tertiary,
+          },
+        },
       },
       MuiTabs: {
         styleOverrides: {

package/types/theme.d.ts

@@ -28,7 +28,7 @@ declare module "@mui/material/styles" {
         grey: string;
       };
       border: {
-        main: string;
+        primary: string;
       };
       highlight: {
         highlightGreen: string;