@campxdev/react-blueprint 0.1.24 → 0.1.25

package/.storybook/preview.tsx

@@ -29,7 +29,6 @@ const preview: Preview = {
   decorators: [
     (Story) => {
       const isDarkMode = useDarkMode();
-      console.log(isDarkMode);
       const theme = isDarkMode ? darkTheme : lightTheme;
       return (
         <BrowserRouter>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
@@ -20,6 +20,7 @@
     "axios": "^1.7.2",
     "framer-motion": "^11.2.9",
     "js-cookie": "^3.0.5",
+    "lodash": "^4.17.21",
     "pullstate": "^1.24.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/src/components/DataDisplay/Avatar/Avatar.tsx

@@ -0,0 +1,70 @@
+import {
+  Avatar as MuiAvatar,
+  AvatarProps as MuiAvatarProps,
+  styled,
+  useTheme,
+} from "@mui/material";
+import { Typography } from "../Typography/Typography";
+
+export type CircularAvatarProps = {
+  text: string;
+} & Omit<MuiAvatarProps, "sx">;
+
+export const CircularAvatar = ({ text, ...rest }: CircularAvatarProps) => {
+  const stringAvatar = (text: string) => {
+    if (!text) return "";
+    return text
+      .split(" ")
+      ?.map((w) => w[0])
+      ?.join("")
+      .toUpperCase();
+  };
+  const theme = useTheme();
+
+  const StyledCircularAvatar = styled(MuiAvatar)(({ theme }) => ({
+    height: "42px",
+    width: "42px",
+  }));
+
+  return (
+    <StyledCircularAvatar variant="circular" {...rest}>
+      <Typography variant="subtitle3">{stringAvatar(text)}</Typography>
+    </StyledCircularAvatar>
+  );
+};
+
+export type SquareAvatarProps = {
+  text: string;
+  onlyStartLetters: boolean;
+} & Omit<MuiAvatarProps, "sx">;
+
+export const SquareAvatar = ({
+  onlyStartLetters = false,
+  text,
+  ...rest
+}: SquareAvatarProps) => {
+  const stringAvatar = (text: string) => {
+    if (!text) return "";
+    return text
+      .split(" ")
+      ?.map((w) => w[0])
+      ?.join("")
+      .toUpperCase();
+  };
+
+  const StyledSquareAvatar = styled(MuiAvatar)(({ theme }) => ({
+    height: "150px",
+    width: "210px",
+    backgroundColor: theme.palette.secondary.dark,
+    borderRadius: "5px",
+    border: "none",
+  }));
+
+  return (
+    <StyledSquareAvatar variant="square" {...rest}>
+      <Typography variant="h6">
+        {onlyStartLetters ? stringAvatar(text) : text}
+      </Typography>
+    </StyledSquareAvatar>
+  );
+};

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

@@ -0,0 +1,27 @@
+// Import React and other necessary elements
+
+import { Meta } from "@storybook/react";
+import { CircularAvatar, CircularAvatarProps } from "./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/components/DataDisplay/Avatar/SquareAvatar.stories.tsx

@@ -0,0 +1,47 @@
+// Import React and other necessary elements
+
+import { Meta } from "@storybook/react";
+import { SquareAvatar, SquareAvatarProps } from "./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/components/DataDisplay/SidePanel/SidePanel.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta } from "@storybook/react/*";
+import { SidePanel, SidePanelProps } from "./SidePanel";
+
+export default {
+  title: "DataDisplay/SidePanel",
+  component: SidePanel,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: "text",
+      description: "Content inside the Avatar component",
+    },
+    src: {
+      control: "text",
+      description: "Image source for the Avatar component",
+    },
+    variant: {
+      control: {
+        type: "select",
+        options: ["circular", "rounded", "square"],
+      },
+      description: "Variant of the Avatar component",
+    },
+    sx: {
+      control: "object",
+      description: "Custom styling for the Avatar component",
+    },
+  },
+} as Meta<typeof SidePanel>;
+
+export const withText = {
+  render: (args: SidePanelProps) => <SidePanel {...args} />,
+  args: {
+    children: "SS",
+  },
+};

package/src/components/DataDisplay/SidePanel/SidePanel.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+export interface SidePanelProps {
+  children?: ReactNode;
+}
+
+export const SidePanel = ({ children }: SidePanelProps) => {
+  return <></>;
+};

package/src/components/{FeedBack → Feedback}/Spinner/Spinner.stories.tsx

@@ -7,7 +7,7 @@ import { Spinner } from "./Spinner";
 
 // Define the default export with Meta type including the component type
 export default {
-  title: "FeedBack/Spinner",
+  title: "Feedback/Spinner",
   component: Spinner,
   tags: ["autodocs"],
   argTypes: {},
@@ -17,4 +17,4 @@ export default {
 export const Primary = {
   render: (args: any) => <Spinner {...args} />,
   args: {},
-};
+};

package/src/components/Feedback/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ToolTipContent, Tooltip } from "./Tooltip";
+import { InfoIcon } from "../../Icons/IconComponents/InfoIcon";
+import { Button } from "../../Input/Button/Button";
+
+export default {
+  title: "Feedback/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  argTypes: {
+    icon: { control: false },
+    message: { control: "text" },
+  },
+} as Meta<typeof Tooltip>;
+
+export const IconTooltip: StoryObj<typeof Tooltip> = {
+  render: (args) => <Tooltip {...args} />,
+  args: {
+    title: (
+      <ToolTipContent message="Duis rhoncus dui venenatis consequat porttitor. Etiam aliquet congue consequat. In posuere, nunc sit amet laoreet blandit, urna sapien imperdiet lectusui." />
+    ),
+    children: <InfoIcon />,
+  },
+};
+
+export const TextTooltip: StoryObj<typeof Tooltip> = {
+  render: (args) => <Tooltip {...args} />,
+  args: {
+    title: (
+      <ToolTipContent message="Duis rhoncus dui venenatis consequat porttitor. Etiam aliquet congue consequat. In posuere, nunc sit amet laoreet blandit, urna sapien imperdiet lectusui." />
+    ),
+    children: <>Info</>,
+  },
+};
+
+export const ButtonTooltip: StoryObj<typeof Tooltip> = {
+  render: (args) => <Tooltip {...args} />,
+  args: {
+    title: (
+      <ToolTipContent message="Duis rhoncus dui venenatis consequat porttitor. Etiam aliquet congue consequat. In posuere, nunc sit amet laoreet blandit, urna sapien imperdiet lectusui." />
+    ),
+    children: <Button>Info</Button>,
+  },
+};

package/src/components/Feedback/Tooltip/Tooltip.tsx

@@ -0,0 +1,45 @@
+import {
+  Stack,
+  Tooltip as MuiTooltip,
+  TooltipProps as MuiTooltipProps,
+  IconButton,
+  Button,
+} from "@mui/material";
+import { BulbIcon } from "../../Icons/IconComponents/BulbIcon";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+import { InfoIcon } from "../../Icons/IconComponents/InfoIcon";
+import { Children, ReactElement, useState } from "react";
+
+export type TooltipProps = {
+  children: ReactElement | string;
+} & MuiTooltipProps;
+export type TooltipContentProps = { message: string };
+
+export const Tooltip = ({
+  placement = "right",
+  arrow = true,
+  ...props
+}: TooltipProps) => {
+  const isIconButton = Children.only(props.children).type === IconButton;
+  return (
+    <MuiTooltip {...props} placement={placement} arrow={arrow}>
+      {isIconButton ? (
+        props.children
+      ) : (
+        <IconButton>{props.children}</IconButton>
+      )}
+    </MuiTooltip>
+  );
+};
+
+export const ToolTipContent = ({ message }: TooltipContentProps) => {
+  return (
+    <Stack gap={1}>
+      <Stack direction="row" gap={1}>
+        <BulbIcon />
+        <Typography variant="subtitle3">Note:</Typography>
+      </Stack>
+      <Typography variant="caption">{message}</Typography>
+    </Stack>
+  );
+};

package/src/components/Icons/IconComponents/{TooltipIcon.tsx → BulbIcon.tsx}

@@ -1,14 +1,14 @@
 import { useTheme } from "@mui/material";
 
-export const TooltipIcon = () => {
+export const BulbIcon = () => {
   const theme = useTheme();
-  const color = theme.palette.text.primary;
+  const color = theme.palette.info.main;
 
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      width="20.182"
-      height="21.03"
+      width="16"
+      height="18"
       viewBox="0 0 20.182 21.03"
       style={{
         fill: color,

package/src/components/Icons/IconComponents/CrossIcon.tsx

@@ -0,0 +1,25 @@
+import { useTheme } from "@mui/material";
+
+export const CrossIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="8"
+      height="8"
+      viewBox="0 0 8 8"
+      style={{
+        stroke: color,
+      }}
+    >
+      <path
+        id="cross-small_3_"
+        data-name="cross-small (3)"
+        d="M13.521,5.893h0a.636.636,0,0,0-.9,0L9.707,8.808,6.792,5.893a.636.636,0,0,0-.9,0h0a.636.636,0,0,0,0,.9L8.808,9.707,5.893,12.622a.636.636,0,0,0,0,.9h0a.636.636,0,0,0,.9,0l2.915-2.915,2.915,2.915a.636.636,0,0,0,.9,0h0a.636.636,0,0,0,0-.9L10.606,9.707l2.915-2.915A.636.636,0,0,0,13.521,5.893Z"
+        transform="translate(-5.707 -5.707)"
+        opacity="0.5"
+      />
+    </svg>
+  );
+};

package/src/components/Icons/IconComponents/InfoIcon.tsx

@@ -2,7 +2,7 @@ import { useTheme } from "@mui/material";
 
 export const InfoIcon = () => {
   const theme = useTheme();
-  const color = theme.palette.text.primary;
+  const color = theme.palette.info.main;
 
   return (
     <svg

package/src/components/Icons/export.ts

@@ -13,6 +13,8 @@ import { HelpIcon } from "./IconComponents/HelpIcon";
 import { HomeIcon } from "./IconComponents/HomeIcon";
 import { InfoIcon } from "./IconComponents/InfoIcon";
 
+import { BulbIcon } from "./IconComponents/BulbIcon";
+import { CrossIcon } from "./IconComponents/CrossIcon";
 import { InstitutionsIcon } from "./IconComponents/InstitutionsIcon";
 import { LeftIcon } from "./IconComponents/LeftIcon";
 import { LocationIcon } from "./IconComponents/LocationIcon";
@@ -22,7 +24,6 @@ import { NotificationIcon } from "./IconComponents/NotificationIcon";
 import { ProfileIcon } from "./IconComponents/ProfileIcon";
 import { RightIcon } from "./IconComponents/RightIcon";
 import { TicketsIcon } from "./IconComponents/TicketsIcon";
-import { TooltipIcon } from "./IconComponents/TooltipIcon";
 import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
 import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
 export const Icons = {
@@ -48,8 +49,9 @@ export const Icons = {
   CheckedCheckboxIcon,
   UnCheckedRadioIcon,
   CheckedRadioIcon,
-  TooltipIcon,
+  BulbIcon,
   InfoIcon,
   LocationIcon,
   DeviceIcon,
+  CrossIcon,
 };

package/src/components/Input/Chips/Chips.stories.tsx

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

package/src/components/Input/Chips/Chips.tsx

@@ -0,0 +1,44 @@
+import { Chip } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+import { Icons } from "../../export";
+
+const ChipList = styled("ul")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  flexWrap: "wrap",
+  listStyle: "none",
+}));
+
+export type ChipsProps = {
+  chips: { label: string; value: any }[];
+  onClick?: (clickedChip: any) => void;
+  onDelete?: (deletedChip: any) => void;
+};
+
+export const Chips = ({ chips, onClick, onDelete }: ChipsProps) => {
+  return (
+    <ChipList>
+      {chips.map(({ label, value }) => (
+        <Chip
+          label={<Typography variant="body2">{label}</Typography>}
+          onClick={
+            onClick
+              ? () => {
+                  onClick(value);
+                }
+              : undefined
+          }
+          onDelete={
+            onDelete
+              ? (e) => {
+                  onDelete(value);
+                }
+              : undefined
+          }
+          deleteIcon={<Icons.CrossIcon />}
+        />
+      ))}
+    </ChipList>
+  );
+};

package/src/components/Input/HelpButton/HelpButton.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import HelpButton from "./HelpButton";
+
+export default {
+  title: "Input/HelpButton",
+  component: HelpButton,
+  tags: ["autodocs"],
+  argTypes: {
+    href: {
+      control: "text",
+      description: "The URL the button links to",
+      defaultValue: "https://example.com/help",
+    },
+  },
+} as Meta<typeof HelpButton>;
+
+export const Default = (args: any) => <HelpButton {...args} />;
+Default.args = {
+  href: "https://example.com/help",
+};

package/src/components/Input/HelpButton/HelpButton.tsx

@@ -0,0 +1,17 @@
+// HelpButton.tsx
+import React from "react";
+import { IconButton } from "@mui/material";
+import { Icons } from "../../export";
+
+const HelpButton = () => {
+  return (
+    <IconButton
+      href={"https://campx.atlassian.net/servicedesk/customer/portal/2"}
+      target="_blank"
+    >
+      <Icons.HelpIcon />
+    </IconButton>
+  );
+};
+
+export default HelpButton;

package/src/components/Input/LabelWrapper/LabelWrapper.tsx

@@ -16,7 +16,7 @@ export const LabelWrapper = ({
 }) => {
   const theme = useTheme();
   return (
-    <Stack margin="15px 20px" {...containerProps} gap={1}>
+    <Stack margin="15px 20px" {...containerProps}>
       {typeof label === "string" ? (
         <Typography htmlFor={name} component="label" variant="label1">
           {label}

package/src/components/Input/OtpInput/OtpInput.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import OtpInput, { OtpInputProps } from "./OtpInput";
+
+export default {
+  title: "Input/OtpInput",
+  component: OtpInput,
+  tags: ["autodocs"],
+  argTypes: {},
+} as Meta<typeof OtpInput>;
+
+export const Default = {
+  render: (args: OtpInputProps) => <OtpInput {...args} />,
+  args: {
+    length: 6,
+    onChangeOtp: (otp: string) => {
+      console.log("OTP Value:", otp);
+    },
+  },
+};

package/src/components/Input/OtpInput/OtpInput.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useRef } from "react";
+
+interface OtpInputProps {
+  length: number;
+  onChangeOtp: (otp: string) => void;
+}
+
+const OtpInput = ({ length, onChangeOtp }:OtpInputProps) => {
+  const [otp, setOtp] = useState<string[]>(Array(length).fill(""));
+  const inputRefs = useRef<HTMLInputElement[]>([]);
+
+  const handleChange = (element: HTMLInputElement, index: number) => {
+    const value = element.value;
+    if (/^[0-9]$/.test(value) || value === "") {
+      const newOtp = [...otp];
+      newOtp[index] = value;
+      setOtp(newOtp);
+      onChangeOtp(newOtp.join(""));
+
+      if (value && index < length - 1) {
+        inputRefs.current[index + 1].focus();
+      }
+    }
+  };
+
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    if (event.key === "Backspace" && !otp[index] && index > 0) {
+      inputRefs.current[index - 1].focus();
+    }
+  };
+
+  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+    const paste = event.clipboardData.getData("text");
+    const digits = paste.split("").filter((char) => /^[0-9]$/.test(char));
+
+    if (digits.length > 0) {
+      const newOtp = [...otp];
+      const startIndex = Number(event.currentTarget.dataset.index) || 0;
+      let focusIndex = startIndex;
+
+      for (let i = startIndex; i < length; i++) {
+        if (digits.length > 0) {
+          newOtp[i] = digits.shift()!;
+          focusIndex = i;
+        }
+      }
+
+      setOtp(newOtp);
+      onChangeOtp(newOtp.join(""));
+      inputRefs.current[Math.min(focusIndex + 1, length - 1)].focus();
+    }
+  };
+
+  return (
+    <div style={{ display: "flex", gap: "10px" }}>
+      {otp.map((value, index) => (
+        <input
+        className="MuiOtpInput"
+          key={index}
+          ref={(el) => (inputRefs.current[index] = el!)}
+          type="text"
+          value={value ? "•" : ""}
+          onChange={(e) => handleChange(e.target, index)}
+          onKeyDown={(e) => handleKeyDown(e, index)}
+          onPaste={handlePaste}
+          data-index={index}
+          maxLength={1}
+          style={{
+            width: "40px",
+            height: "40px",
+            textAlign: "center",
+            fontSize: "20px",
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default OtpInput;
+export type { OtpInputProps };

package/src/components/Input/RadioGroup/RadioGroup.stories.tsx

@@ -34,9 +34,7 @@ export const Default = {
         value: "4",
       },
     ],
-    onChange: (event: any, value: any) => {
-      console.log(event.target.checked, value);
-    },
+    onChange: (event: any, value: any) => {},
     row: true,
     defaultValue: "3",
   },