@campxdev/react-blueprint 1.0.3 → 1.0.5

package/src/components/Navigation/exports.ts

@@ -1,17 +1,21 @@
+import { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs";
 import { CustomDialog } from "./DialogButton/DialogButton";
 import { DropDownButton } from "./DropDownMenu/DropDownButton";
 import { DropDownIcon } from "./DropDownMenu/DropDownIcon";
 import { DropdownMenu } from "./DropDownMenu/DropDownMenu";
 import { DropdownMenuItem } from "./DropDownMenu/DropdownMenuItem";
 import { Sidebar } from "./Sidebar/Sidebar";
+import { Stepper } from "./Stepper/Stepper";
 import { TabsContainer } from "./TabsContainer/TabsContainer";
 
 export {
+  Breadcrumbs,
   CustomDialog,
   DropDownButton,
   DropDownIcon,
   DropdownMenu,
   DropdownMenuItem,
   Sidebar,
+  Stepper,
   TabsContainer,
 };

package/src/components/export.ts

@@ -1,7 +1,7 @@
 export * from "./Assets/export";
 export * from "./DataDisplay/export";
 export * from "./Input/export";
-export * from "./Layout/AppHeader/AppHeader";
 
 export * from "./Feedback/exports";
+export * from "./Layout/exports";
 export * from "./Navigation/exports";

package/src/stories/Charts/BarChart.stories.tsx

@@ -0,0 +1,142 @@
+import { Meta } from "@storybook/react";
+import {
+  BarChart,
+  BarChartProps,
+} from "../../components/Charts/BarChart/BarChart";
+
+const data = [
+  {
+    name: "Page A",
+    uv: 4000,
+    pv: 2400,
+    amt: 2400,
+  },
+  {
+    name: "Page B",
+    uv: 3000,
+    pv: 1398,
+    amt: 2210,
+  },
+  {
+    name: "Page C",
+    uv: 2000,
+    pv: 9800,
+    amt: 2290,
+  },
+];
+
+const bars = [
+  { dataKey: "uv", stackId: "a", fill: "#0088FE" },
+  { dataKey: "pv", stackId: "a", fill: "#00C49F" },
+  { dataKey: "amt", stackId: "b", fill: "#FFBB28" },
+];
+
+export default {
+  title: "Charts/BarChart",
+  component: BarChart,
+  argTypes: {
+    title: {
+      control: "text",
+      description: "Title of the chart",
+    },
+    titleSx: {
+      control: "object",
+      description: "Styling for the title",
+    },
+    width: {
+      control: "number",
+      description: "Width of the chart",
+    },
+    height: {
+      control: "number",
+      description: "Height of the chart",
+    },
+    margin: {
+      control: "object",
+      description: "Margin around the chart",
+    },
+    showToolTip: {
+      control: "boolean",
+      description: "Toggle tooltip visibility",
+    },
+    showLegend: {
+      control: "boolean",
+      description: "Toggle legend visibility",
+    },
+    legendSx: {
+      control: "object",
+      description: "Styling for the legend",
+    },
+    containerSx: {
+      control: "object",
+      description: "Styling for the container",
+    },
+    dataKey: {
+      control: "text",
+      description: "Key for the X axis",
+    },
+    data: {
+      control: "object",
+      description: "Data for the chart",
+    },
+    bars: {
+      control: "object",
+      description: "Bars configuration",
+    },
+    cartesianGrid: {
+      control: "object",
+      description: "Configuration for the Cartesian grid",
+    },
+    axisLabelProps: {
+      control: "object",
+      description: "Labels for the axes",
+    },
+    axisStroke: {
+      control: "color",
+      description: "Stroke color for the axes",
+    },
+    barGap: {
+      control: "number",
+      description: "Gap between bars",
+    },
+    barSize: {
+      control: "number",
+      description: "Size of the bars",
+    },
+    barChartStyle: {
+      control: "object",
+      description: "Styling for the bar chart",
+    },
+    layout: {
+      control: {
+        type: "radio",
+        options: ["horizontal", "vertical"],
+      },
+      description: "Layout of the chart",
+    },
+  },
+} as Meta<typeof BarChart>;
+
+export const Default = {
+  render: (args: BarChartProps) => <BarChart {...args} />,
+  args: {
+    data: data,
+    bars: bars,
+    dataKey: "name",
+    containerSx: { width: "800px", height: "800px" },
+    cartesianGrid: { showCartesianGrid: true, size: 5 },
+    axisLabelProps: {
+      xLabel: { value: "X-Axis", dy: 20 },
+      yLabel: { value: "Y-Axis", dx: -20, angle: -90 },
+    },
+    legendSx: {
+      width: 150,
+      height: 150,
+      layout: "vertical",
+      align: "right",
+      verticalAlign: "top",
+      iconType: "line",
+    },
+    margin: { top: 20, left: 30, bottom: 20, right: 30 },
+  },
+};

package/src/stories/Charts/LineChart.stories.tsx

@@ -0,0 +1,112 @@
+import { Meta } from "@storybook/react";
+import {
+  LineChart,
+  LineChartProps,
+} from "../../components/Charts/LineChart/LineChart";
+
+const data = [
+  { name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
+  { name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
+  { name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
+  { name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
+  { name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
+  { name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
+  { name: "Page G", uv: 3490, pv: 4300, amt: 2100 },
+];
+
+const lines = [
+  { type: "monotone", dataKey: "uv", stroke: "#8884d8" },
+  { type: "monotone", dataKey: "pv", stroke: "#82ca9d" },
+];
+
+export default {
+  title: "Charts/LineChart",
+  component: LineChart,
+  argTypes: {
+    title: {
+      control: "text",
+      description: "Title of the chart",
+    },
+    titleSx: {
+      control: "object",
+      description: "Styling for the title",
+    },
+    width: {
+      control: "number",
+      description: "Width of the chart",
+    },
+    height: {
+      control: "number",
+      description: "Height of the chart",
+    },
+    margin: {
+      control: "object",
+      description: "Margin around the chart",
+    },
+    showToolTip: {
+      control: "boolean",
+      description: "Toggle tooltip visibility",
+    },
+    showLegend: {
+      control: "boolean",
+      description: "Toggle legend visibility",
+    },
+    legendSx: {
+      control: "object",
+      description: "Styling for the legend",
+    },
+    containerSx: {
+      control: "object",
+      description: "Styling for the container",
+    },
+    dataKey: {
+      control: "text",
+      description: "Key for the X axis",
+    },
+    data: {
+      control: "object",
+      description: "Data for the chart",
+    },
+    lines: {
+      control: "object",
+      description: "Lines configuration",
+    },
+    cartesianGrid: {
+      control: "object",
+      description: "Configuration for the Cartesian grid",
+    },
+    axisLabelProps: {
+      control: "object",
+      description: "Labels for the axes",
+    },
+    lineChartStyle: {
+      control: "object",
+      description: "Styling for the bar chart",
+    },
+  },
+} as Meta<typeof LineChart>;
+
+export const Default = {
+  render: (args: LineChartProps) => <LineChart {...args} />,
+  args: {
+    title: "Line Chart Example",
+    width: 700,
+    height: 500,
+    showToolTip: true,
+    showLegend: true,
+    dataKey: "name",
+    data: data,
+    lines: lines,
+    cartesianGrid: { showCartesianGrid: true, size: 3 },
+    axisLabelProps: {
+      xLabel: { value: "Pages", dy: 20 },
+      yLabel: { value: "Values", dx: -10, angle: -90 },
+    },
+    legendSx: {
+      layout: "horizontal",
+      align: "center",
+      verticalAlign: "top",
+    },
+    margin: { top: 30, right: 20, bottom: 30, left: 20 },
+  },
+};

package/src/stories/Charts/PieChart.stories.tsx

@@ -0,0 +1,137 @@
+import { Meta } from "@storybook/react";
+import {
+  PieChart,
+  PieChartProps,
+} from "../../components/Charts/PieChart/PieChart";
+
+const pieData1 = [
+  { name: "Group A", value: 400 },
+  { name: "Group B", value: 300 },
+  { name: "Group C", value: 300 },
+  { name: "Group D", value: 200 },
+];
+
+const pieData2 = [
+  { name: "Group A", value: 2400 },
+  { name: "Group B", value: 4567 },
+  { name: "Group C", value: 1398 },
+  { name: "Group D", value: 9800 },
+];
+
+const colors1 = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];
+const colors2 = ["#721C24", "#D33F6A", "#FFC0CB", "#341F97"];
+
+export default {
+  title: "Charts/PieChart",
+  component: PieChart,
+  argTypes: {
+    title: {
+      control: "text",
+      description: "Title of the chart",
+    },
+    titleSx: {
+      control: "object",
+      description: "Styling for the title",
+    },
+    width: {
+      control: "number",
+      description: "Width of the chart",
+    },
+    height: {
+      control: "number",
+      description: "Height of the chart",
+    },
+    margin: {
+      control: "object",
+      description: "Margin around the chart",
+    },
+    showToolTip: {
+      control: "boolean",
+      description: "Toggle tooltip visibility",
+    },
+    showLegend: {
+      control: "boolean",
+      description: "Toggle legend visibility",
+    },
+    legendSx: {
+      control: "object",
+      description: "Styling for the legend",
+    },
+    containerSx: {
+      control: "object",
+      description: "Styling for the container",
+    },
+    pie1: {
+      control: "object",
+      description: "Configuration for the first pie",
+    },
+    pie2: {
+      control: "object",
+      description: "Configuration for the second pie",
+    },
+    pieChartStyle: {
+      control: "object",
+      description: "Styling for the bar chart",
+    },
+  },
+} as Meta<typeof PieChart>;
+
+export const Default = {
+  render: (args: PieChartProps) => <PieChart {...args} />,
+  args: {
+    title: "Pie Chart Example",
+    width: 500,
+    height: 500,
+    showToolTip: true,
+    showLegend: true,
+    pie1: {
+      data: pieData1,
+      dataKey: "value",
+      outerRadius: 80,
+      fill: "#8884d8",
+      colors: colors1,
+    },
+    pie2: {
+      data: pieData2,
+      dataKey: "value",
+      innerRadius: 90,
+      outerRadius: 120,
+      fill: "#82ca9d",
+      label: true,
+      colors: colors2,
+    },
+    legendSx: {
+      layout: "horizontal",
+      align: "center",
+      verticalAlign: "bottom",
+    },
+    containerSx: { padding: 2 },
+    margin: { top: 20, right: 20, bottom: 20, left: 20 },
+  },
+};
+
+export const SinglePie = {
+  render: (args: PieChartProps) => <PieChart {...args} />,
+  args: {
+    title: "Single Pie Chart Example",
+    width: 500,
+    height: 500,
+    showToolTip: true,
+    showLegend: true,
+    pie1: {
+      data: pieData1,
+      dataKey: "value",
+      outerRadius: 100,
+      fill: "#8884d8",
+      label: true,
+      colors: ["#8884d8", "#83a6ed", "#8dd1e1", "#82ca9d"],
+    },
+    legendSx: {
+      layout: "horizontal",
+      align: "center",
+      verticalAlign: "bottom",
+    },
+    containerSx: { border: "1px solid black", padding: 2 },
+    margin: { top: 20, right: 20, bottom: 20, left: 20 },
+  },
+};

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 },
+};