@campxdev/react-blueprint 0.1.14 → 0.1.16

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

@@ -0,0 +1,65 @@
+import { useTheme } from "@mui/material";
+
+export const DashBoardIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      style={{
+        stroke: color,
+      }}
+    >
+      <g
+        id="vuesax_linear_chart-2"
+        data-name="vuesax/linear/chart-2"
+        transform="translate(-236 -188)"
+      >
+        <g id="chart-2" transform="translate(236 188)">
+          <path
+            id="Vector"
+            d="M4.667,13.333h4c3.333,0,4.667-1.333,4.667-4.667v-4C13.333,1.333,12,0,8.667,0h-4C1.333,0,0,1.333,0,4.667v4C0,12,1.333,13.333,4.667,13.333Z"
+            transform="translate(1.333 1.333)"
+            fill="none"
+            stroke={color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-2"
+            data-name="Vector"
+            d="M1.333,8.667A1.337,1.337,0,0,0,2.667,7.333v-6A1.333,1.333,0,0,0,0,1.333v6A1.333,1.333,0,0,0,1.333,8.667Z"
+            transform="translate(9 3.667)"
+            fill="none"
+            stroke={color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-3"
+            data-name="Vector"
+            d="M1.333,5A1.337,1.337,0,0,0,2.667,3.667V1.333A1.333,1.333,0,0,0,0,1.333V3.667A1.333,1.333,0,0,0,1.333,5Z"
+            transform="translate(4.333 7.333)"
+            fill="none"
+            stroke={color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-4"
+            data-name="Vector"
+            d="M0,0H16V16H0Z"
+            fill="none"
+            opacity="0"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { useTheme } from "@mui/material";
+
+export const ExamResultIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14.3"
+        height="20.3"
+        viewBox="0 0 15.3 20.3"
+        style={{
+          fill: color,
+        }}
+      >
+        <path
+          id="mobile"
+          d="M13.833,0H7.167A4.172,4.172,0,0,0,3,4.167V15.833A4.172,4.172,0,0,0,7.167,20h6.667A4.172,4.172,0,0,0,18,15.833V4.167A4.172,4.172,0,0,0,13.833,0Zm2.5,15.833a2.5,2.5,0,0,1-2.5,2.5h-2.5V17.5a.833.833,0,1,0-1.667,0v.833h-2.5a2.5,2.5,0,0,1-2.5-2.5V4.167a2.5,2.5,0,0,1,2.5-2.5h6.667a2.5,2.5,0,0,1,2.5,2.5Zm-2.5-2.5a.833.833,0,0,1-.833.833H8A.833.833,0,1,1,8,12.5h5A.833.833,0,0,1,13.833,13.333Zm-5-2.5A.833.833,0,0,0,9.667,10V9.167h1.667V10A.833.833,0,0,0,13,10V6.667a2.5,2.5,0,1,0-5,0V10A.833.833,0,0,0,8.833,10.833Zm1.667-5a.833.833,0,0,1,.833.833V7.5H9.667V6.667A.833.833,0,0,1,10.5,5.833Z"
+          transform="translate(-2.85 0.15)"
+          stroke-width="0.3"
+        />
+      </svg>
+    </>
+  );
+};

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

@@ -0,0 +1,57 @@
+import { useTheme } from "@mui/material";
+
+export const HelpIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      id="message-question"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      style={{
+        stroke: color,
+      }}
+    >
+      <g id="message-question-2" data-name="message-question">
+        <path
+          id="Vector"
+          d="M12.5,16.667H4.1A3.877,3.877,0,0,1,0,12.593V4.074A3.893,3.893,0,0,1,4.167,0H12.5a3.893,3.893,0,0,1,4.167,4.074v8.52A3.893,3.893,0,0,1,12.5,16.667Z"
+          transform="translate(1.667 2.025)"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+        <path
+          id="Vector-2"
+          data-name="Vector"
+          d="M2.245,6.086V5.8A2.119,2.119,0,0,1,3.382,4,2.073,2.073,0,0,0,4.491,2.245,2.245,2.245,0,0,0,0,2.245"
+          transform="translate(7.755 5.594)"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+        <path
+          id="Vector-3"
+          data-name="Vector"
+          d="M0,0H20V20H0Z"
+          fill="none"
+          opacity="0"
+        />
+        <path
+          id="Vector-4"
+          data-name="Vector"
+          d="M.5.5H.508"
+          transform="translate(9.499 14.414)"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,52 @@
+import { useTheme } from "@mui/material";
+
+export const HomeIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      style={{
+        stroke: color,
+      }}
+    >
+      <g
+        id="vuesax_linear_home-2"
+        data-name="vuesax/linear/home-2"
+        transform="translate(-620 -188)"
+      >
+        <g id="home-2" transform="translate(620 188)">
+          <path
+            id="Vector"
+            d="M4.68.548l-3.593,2.8A3.172,3.172,0,0,0,0,5.562V10.5a2.817,2.817,0,0,0,2.807,2.813h7.72a2.815,2.815,0,0,0,2.807-2.807V5.655a3.149,3.149,0,0,0-1.2-2.3L8.013.468A2.991,2.991,0,0,0,4.68.548Z"
+            transform="translate(1.333 1.345)"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-2"
+            data-name="Vector"
+            d="M0,2V0"
+            transform="translate(8 9.993)"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-3"
+            data-name="Vector"
+            d="M0,0H16V16H0Z"
+            fill="none"
+            opacity="0"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,72 @@
+import { useTheme } from "@mui/material";
+
+export const LeftIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      style={{
+        stroke: color,
+      }}
+    >
+      <g
+        id="vuesax_linear_logout"
+        data-name="vuesax/linear/logout"
+        transform="translate(-364 -444)"
+      >
+        <g id="logout">
+          <g
+            id="Group_5120"
+            data-name="Group 5120"
+            transform="translate(373.659 453.381)"
+          >
+            <path
+              id="Vector"
+              d="M2.682,5.363,0,2.682,2.682,0"
+              transform="translate(0)"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+            />
+            <path
+              id="Vector-2"
+              data-name="Vector"
+              d="M10.653,0H0"
+              transform="translate(0.073 2.682)"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+            />
+          </g>
+          <path
+            id="Vector-3"
+            data-name="Vector"
+            d="M8.38,16.76A8.015,8.015,0,0,1,0,8.38,8.015,8.015,0,0,1,8.38,0"
+            transform="translate(367.374 447.62)"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            id="Vector-4"
+            data-name="Vector"
+            d="M0,0H24V24H0Z"
+            transform="translate(388 468) rotate(180)"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            opacity="0"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,66 @@
+import { useTheme } from "@mui/material";
+import { useState } from "react";
+
+interface LogoutIconProps {
+  hoverColor?: string;
+}
+
+export const LogoutIcon: React.FC<LogoutIconProps> = ({ hoverColor }) => {
+  const theme = useTheme();
+  const [isHovered, setIsHovered] = useState(false);
+  const defaultColor = theme.palette.text.primary;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{
+        stroke: isHovered && hoverColor ? hoverColor : defaultColor,
+      }}
+    >
+      <g id="logout" transform="translate(0 0)">
+        <path
+          id="Vector"
+          d="M12.6,5.07C12.29,1.47,10.44,0,6.39,0H6.26C1.79,0,0,1.79,0,6.26v6.52c0,4.47,1.79,6.26,6.26,6.26h.13c4.02,0,5.87-1.45,6.2-4.99"
+          transform="translate(2.5 2.49)"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.2"
+        />
+        <path
+          id="Vector-2"
+          data-name="Vector"
+          d="M0,0H11.38"
+          transform="translate(9 12)"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.2"
+        />
+        <path
+          id="Vector-3"
+          data-name="Vector"
+          d="M0,0,3.35,3.35,0,6.7"
+          transform="translate(18.15 8.65)"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.2"
+        />
+        <path
+          id="Vector-4"
+          data-name="Vector"
+          d="M0,24H24V0H0Z"
+          transform="translate(0 0)"
+          fill="none"
+          opacity="0"
+        />
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,29 @@
+import { useTheme } from "@mui/material";
+
+export const NotificationIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        style={{
+          stroke: color,
+        }}
+      >
+        <path
+          id="bell_10_"
+          data-name="bell (10)"
+          d="M18.958,11.384l-1.583-5.7a7.767,7.767,0,0,0-15.064.395L1.085,11.595a4.166,4.166,0,0,0,4.067,5.07H6.08a4.166,4.166,0,0,0,8.166,0h.7a4.166,4.166,0,0,0,4.015-5.281Zm-8.795,6.948a2.5,2.5,0,0,1-2.346-1.666H12.51A2.5,2.5,0,0,1,10.163,18.332Zm6.771-4.32A2.481,2.481,0,0,1,14.944,15H5.152a2.5,2.5,0,0,1-2.44-3.042L3.937,6.444a6.1,6.1,0,0,1,11.832-.31l1.583,5.7a2.481,2.481,0,0,1-.418,2.181Z"
+          transform="translate(-0.95 -0.002)"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </>
+  );
+};

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

@@ -0,0 +1,65 @@
+import { useTheme } from "@mui/material";
+
+export const RightIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      id="vuesax_linear_logout"
+      data-name="vuesax/linear/logout"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      style={{
+        stroke: color,
+      }}
+    >
+      <g id="logout">
+        <g
+          id="Group_5120"
+          data-name="Group 5120"
+          transform="translate(3.614 9.381)"
+        >
+          <path
+            id="Vector"
+            d="M0,5.363,2.682,2.682,0,0"
+            transform="translate(8.045)"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+          <path
+            id="Vector-2"
+            data-name="Vector"
+            d="M0,0H10.653"
+            transform="translate(0 2.682)"
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+          />
+        </g>
+        <path
+          id="Vector-3"
+          data-name="Vector"
+          d="M0,16.76A8.015,8.015,0,0,0,8.38,8.38,8.015,8.015,0,0,0,0,0"
+          transform="translate(12.246 3.62)"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+        <path
+          id="Vector-4"
+          data-name="Vector"
+          d="M0,24H24V0H0Z"
+          transform="translate(0 0)"
+          fill="none"
+          opacity="0"
+        />
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,74 @@
+import { useTheme } from "@mui/material";
+
+export const TicketsIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+    >
+      <g
+        id="vuesax_linear_profile-add"
+        data-name="vuesax/linear/profile-add"
+        transform="translate(-364 -252)"
+      >
+        <g id="profile-add" transform="translate(364 252)">
+          <path
+            id="Vector"
+            d="M2.667,0H0"
+            transform="translate(9.667 13)"
+            fill="none"
+            stroke={color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-2"
+            data-name="Vector"
+            d="M0,2.667V0"
+            transform="translate(11 11.667)"
+            fill="none"
+            stroke={color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-3"
+            data-name="Vector"
+            d="M3.067,5.913a1.212,1.212,0,0,0-.22,0,2.957,2.957,0,1,1,.22,0Z"
+            transform="translate(5.04 1.333)"
+            fill="none"
+            stroke={color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-4"
+            data-name="Vector"
+            d="M4.55,5.753a6.1,6.1,0,0,1-3.34-.92A2.187,2.187,0,0,1,1.21.92a6.511,6.511,0,0,1,6.673,0"
+            transform="translate(3.443 8.787)"
+            fill="none"
+            stroke={color}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.2"
+          />
+          <path
+            id="Vector-5"
+            data-name="Vector"
+            d="M0,0H16V16H0Z"
+            transform="translate(16 16) rotate(180)"
+            fill="none"
+            opacity="0"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};

package/src/components/Icons/Icons.stories.tsx

@@ -0,0 +1,21 @@
+// Import React and other necessary elements
+import { Meta, StoryObj } from "@storybook/react/*";
+
+import IconsStory from "./Icons";
+
+export default {
+  title: "Assets/Icons",
+  component: IconsStory,
+  tags: ["autodocs"],
+  argTypes: {},
+} as Meta<typeof IconsStory>;
+
+type Story = StoryObj<typeof IconsStory>;
+
+export const Icon: Story = {
+  render: (args: any) => (
+    <>
+      <IconsStory />
+    </>
+  ),
+};

package/src/components/Icons/Icons.tsx

@@ -0,0 +1,14 @@
+import { Stack } from "@mui/material";
+import { Icons } from "./export";
+
+export const IconsStory = () => {
+  return (
+    <Stack gap={2} direction={"row"}>
+      {Object.values(Icons).map((Icon) => (
+        <Icon />
+      ))}
+    </Stack>
+  );
+};
+
+export default IconsStory;

package/src/components/Icons/export.ts

@@ -0,0 +1,26 @@
+import { AppsIcon } from "./IconComponents/AppsIcon";
+import { CareerIcon } from "./IconComponents/CareerIcon";
+import { ClogWheelIcon } from "./IconComponents/ClogWheelIcon";
+import { DashBoardIcon } from "./IconComponents/DashBoardIcon";
+import { ExamResultIcon } from "./IconComponents/ExamResultIcon";
+import { HelpIcon } from "./IconComponents/HelpIcon";
+import { HomeIcon } from "./IconComponents/HomeIcon";
+import { LeftIcon } from "./IconComponents/LeftIcon";
+import { LogoutIcon } from "./IconComponents/LogoutIcon";
+import { NotificationIcon } from "./IconComponents/NotificationIcon";
+import { RightIcon } from "./IconComponents/RightIcon";
+import { TicketsIcon } from "./IconComponents/TicketsIcon";
+export const Icons = {
+  AppsIcon: AppsIcon,
+  CareerIcon: CareerIcon,
+  ClogWheelIcon: ClogWheelIcon,
+  DashBoardIcon: DashBoardIcon,
+  HelpIcon: HelpIcon,
+  HomeIcon: HomeIcon,
+  LeftIcon: LeftIcon,
+  ExamResultIcon: ExamResultIcon,
+  NotificationIcon: NotificationIcon,
+  RightIcon: RightIcon,
+  LogoutIcon: LogoutIcon,
+  TicketsIcon: TicketsIcon,
+};

package/src/components/Input/Button/Button.tsx

@@ -6,12 +6,14 @@ import "./ButtonLoader.css";
 
 export type ButtonProps = { loading: boolean } & MuiButtonProps;
 
-export const Button = (props: ButtonProps) => {
-  if (props.loading)
-    return (
-      <MuiButton {...props} onClick={() => {}}>
-        <div className="buttonLoader"></div>
-      </MuiButton>
-    );
-  return <MuiButton {...props} />;
+export const Button = ({ loading = false, ...props }: ButtonProps) => {
+  return (
+    <MuiButton
+      {...props}
+      endIcon={loading ? <div className="buttonLoader"></div> : props.endIcon}
+      disabled={props.disabled || loading}
+    >
+      {props.children}
+    </MuiButton>
+  );
 };

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

@@ -0,0 +1,35 @@
+import { Stack, StackProps, Typography, useTheme } from "@mui/material";
+import { ReactNode } from "react";
+
+export const LabelWrapper = ({
+  required,
+  name,
+  children,
+  containerProps,
+  label,
+}: {
+  required: boolean;
+  name?: string;
+  label?: ReactNode | string;
+  children: ReactNode;
+  containerProps?: StackProps;
+}) => {
+  const theme = useTheme();
+  return (
+    <Stack margin="15px 20px" {...containerProps} gap={1}>
+      {typeof label === "string" ? (
+        <Typography htmlFor={name} component="label" variant="label1">
+          {label}
+          {required && (
+            <span style={{ color: `${theme.palette.highlight.main}` }}>
+              {" *"}
+            </span>
+          )}
+        </Typography>
+      ) : (
+        label
+      )}
+      {children}
+    </Stack>
+  );
+};