@campxdev/react-blueprint 0.1.0

package/src/components/DropDownMenu/styles.tsx

@@ -0,0 +1,31 @@
+import { Button, IconButton, MenuItem, styled } from "@mui/material";
+
+export const StyledDropDownButton = styled(Button)(({}) => ({
+  minWidth: "180px",
+  justifyContent: "space-between",
+}));
+
+export const StyledIconButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== "outlined",
+})<{ outlined?: boolean }>(({ theme, outlined }) => ({
+  ...(outlined && {
+    border: `1px solid ${theme.palette.primary.main}`,
+    borderRadius: "5px",
+    height: "40px",
+    width: "40px",
+  }),
+}));
+
+export const StyledMenuItem = styled(MenuItem)(({}) => ({
+  display: "flex",
+  alignItems: "center",
+  height: "50px",
+  gap: "5px",
+  "& .MuiListItemIcon-root": {
+    minWidth: "24px",
+  },
+  "& .MuiSvgIcon-root": {
+    height: "14px",
+    width: "14px",
+  },
+}));

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

@@ -0,0 +1,62 @@
+// Import React and other necessary elements
+import { Meta } from "@storybook/react";
+
+// Make sure your TextField import is correct
+
+import Button, { ButtonProps } from "./Button";
+
+// Define the default export with Meta type including the component type
+export default {
+  title: "Input/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["contained", "outlined", "text", "string"],
+      description: "The Button Variant to use",
+    },
+    children: {
+      control: "text",
+      description: "text in button",
+    },
+    color: {
+      control: "select",
+      options: ["primary", "secondary"],
+      description: "The Button Variant to use",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disabled Button",
+      defaultValue: false,
+    },
+  },
+} as Meta<typeof Button>;
+
+// Define stories directly as objects with render function
+export const Primary = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    color: "primary",
+    variant: "contained",
+    children: "Primary Button",
+  },
+};
+
+export const Secondary = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    color: "secondary",
+    variant: "contained",
+    children: "Secondary Button",
+  },
+};
+
+export const Disabled = {
+  render: (args: ButtonProps) => <Button {...args} />,
+  args: {
+    disabled: true,
+    variant: "contained",
+    children: "Disabled Button",
+  },
+};

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

@@ -0,0 +1,11 @@
+import {
+  Button as MuiButton,
+  ButtonProps as MuiButtonProps,
+} from "@mui/material";
+
+export type ButtonProps = {} & MuiButtonProps;
+
+const Button = (props: ButtonProps) => {
+  return <MuiButton {...props} />;
+};
+export default Button;

package/src/components/Input/Label/Label.tsx

@@ -0,0 +1,11 @@
+import { Typography } from "@mui/material";
+
+const Label = ({ label, required, name }: any) => {
+  if (typeof label !== "string") return label;
+  return (
+    <Typography htmlFor={name} component="label" variant="label1">
+      {label} {required && <span>{" *"}</span>}
+    </Typography>
+  );
+};
+export default Label;

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

@@ -0,0 +1,55 @@
+// Import React and other necessary elements
+import { Meta } from "@storybook/react";
+
+// Make sure your TextField import is correct
+import { TextFieldProps } from "@mui/material";
+import SingleSelect from "./SingleSelect";
+
+// Define the default export with Meta type including the component type
+export default {
+  title: "Input/SingleSelect",
+  component: SingleSelect,
+  tags: ["autodocs"],
+  argTypes: {},
+} as Meta<typeof SingleSelect>;
+
+// Define stories directly as objects with render function
+export const Primary = {
+  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  args: {},
+};
+
+export const Disabled = {
+  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  args: {},
+};
+
+export const WithValue = {
+  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  args: {},
+};
+
+export const InputWithPlaceholder = {
+  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  args: {},
+};
+
+export const ErrorInput = {
+  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  args: {},
+};
+
+export const SuccessInput = {
+  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  args: {},
+};
+
+export const WarningInput = {
+  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  args: {},
+};
+
+export const PassowrdInput = {
+  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  args: {},
+};

package/src/components/Input/SingleSelect/SingleSelect.tsx

@@ -0,0 +1,4 @@
+const SingleSelect = () => {
+  return <></>;
+};
+export default SingleSelect;

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

@@ -0,0 +1,62 @@
+// Import React and other necessary elements
+import { Meta } from "@storybook/react";
+
+// Make sure your TextField import is correct
+
+import Switch, { SwitchProps } from "./Switch";
+
+// Define the default export with Meta type including the component type
+export default {
+  title: "Input/Switch",
+  component: Switch,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["contained", "outlined", "text", "string"],
+      description: "The Switch Variant to use",
+    },
+    children: {
+      control: "text",
+      description: "text in Switch",
+    },
+    color: {
+      control: "select",
+      options: ["primary", "secondary"],
+      description: "The Switch Variant to use",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disabled Switch",
+      defaultValue: false,
+    },
+  },
+} as Meta<typeof Switch>;
+
+// Define stories directly as objects with render function
+export const Primary = {
+  render: (args: SwitchProps) => <Switch {...args} />,
+  args: {
+    color: "primary",
+    variant: "contained",
+    children: "Primary Switch",
+  },
+};
+
+export const Secondary = {
+  render: (args: SwitchProps) => <Switch {...args} />,
+  args: {
+    color: "secondary",
+    variant: "contained",
+    children: "Secondary Switch",
+  },
+};
+
+export const Disabled = {
+  render: (args: SwitchProps) => <Switch {...args} />,
+  args: {
+    disabled: true,
+    variant: "contained",
+    children: "Disabled Switch",
+  },
+};

package/src/components/Input/Switch/Switch.tsx

@@ -0,0 +1,11 @@
+import {
+  Switch as MuiSwitch,
+  SwitchProps as MuiSwitchProps,
+} from "@mui/material";
+
+export type SwitchProps = {} & MuiSwitchProps;
+const Switch = (props: SwitchProps) => {
+  return <MuiSwitch {...props} />;
+};
+
+export default Switch;

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

@@ -0,0 +1,135 @@
+// Import React and other necessary elements
+import { Meta } from "@storybook/react";
+
+// Make sure your TextField import is correct
+import TextField, { TextFieldProps } from "./TextField";
+
+// Define the default export with Meta type including the component type
+export default {
+  title: "Input/TextField",
+  component: TextField,
+  tags: ["autodocs"],
+  argTypes: {
+    name: {
+      control: "text",
+      description: "The name of the input field, used in form submissions.",
+    },
+    label: {
+      control: "text",
+      description: "The label text disp layed above the input field.",
+    },
+    value: {
+      control: "text",
+      description: "The input value of the TextField.",
+    },
+    required: {
+      control: "boolean",
+      description: "Specifies if the field is required for form submission.",
+    },
+    placeholder: {
+      control: "text",
+      description: "The placeholder value of the TextField.",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Controls whether the TextField is disabled or not.",
+    },
+    helperText: {
+      control: "text",
+      description:
+        "Helper text that appears below the text field to provide additional guidance.",
+    },
+    error: {
+      control: "boolean",
+      description: "Shows how the error message is shown",
+    },
+  },
+} as Meta<typeof TextField>;
+
+// Define stories directly as objects with render function
+export const Primary = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "First Name",
+    name: "firstName",
+    value: "",
+    required: true,
+    helperText: "",
+  },
+};
+
+export const Disabled = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "Disabled Input",
+    name: "disabledInput",
+    value: "Disabled",
+    required: false,
+    disabled: true,
+  },
+};
+
+export const WithValue = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "Last Name",
+    name: "lastName",
+    value: "Doe",
+    required: false,
+  },
+};
+
+export const InputWithPlaceholder = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "Mobile",
+    value: "",
+    placeholder: "10 digit phone number",
+  },
+};
+
+export const ErrorInput = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "First Name",
+    required: true,
+    value: "",
+    error: true,
+    helperText: "Name can't be empty",
+  },
+};
+
+export const SuccessInput = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "Pan Card",
+    required: true,
+    value: "KAHPS9888B",
+    color: "success",
+    helperText: "Pan Card Successfully Verified",
+    focused: true,
+  },
+};
+
+export const WarningInput = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "Pan Card",
+    required: true,
+    value: "KAHPS9888B",
+    color: "warning",
+    helperText: `Pan Card doesn't match with the provided name`,
+    focused: true,
+  },
+};
+
+export const PassowrdInput = {
+  render: (args: TextFieldProps) => <TextField {...args} />,
+  args: {
+    label: "Password",
+    type: "password",
+    required: true,
+    value: "KAHPS9888B",
+    helperText: "Password should be alpha-numeric with special character",
+  },
+};

package/src/components/Input/TextField/TextField.tsx

@@ -0,0 +1,35 @@
+import {
+  TextField as MuiTextField,
+  TextFieldProps as MuiTextFieldProps,
+  Stack,
+  StackProps,
+} from "@mui/material";
+import Label from "../Label/Label";
+
+export type TextFieldProps = {
+  containerProps?: StackProps;
+} & MuiTextFieldProps;
+
+export default function TextField({
+  name,
+  label,
+  value,
+  onChange,
+  required = false,
+  containerProps,
+  ...rest
+}: TextFieldProps) {
+  return (
+    <Stack margin="15px 20px" {...containerProps}>
+      <Label label={label} required={required} name={name} />
+      <MuiTextField
+        id={name}
+        value={value}
+        label={label}
+        name={name}
+        onChange={onChange}
+        {...rest}
+      />
+    </Stack>
+  );
+}

package/src/components/Layout/ComponentBackground/ComponentBackground.tsx

@@ -0,0 +1,82 @@
+import {
+  Stack,
+  Switch,
+  SxProps,
+  ToggleButton,
+  ToggleButtonGroup,
+} from "@mui/material";
+import { ReactNode, useState } from "react";
+import { darkTheme, lightTheme } from "../../../themes";
+import MuiThemeProvider from "../../../themes/MuiThemeProvider";
+import Typography from "../../Typography/Typography";
+import { DefaultBackground } from "./DefaultBackground";
+import { PaperBackground } from "./PaperBackground";
+
+export enum ComponentBackgroundTypes {
+  DEFAULT = "default",
+  PAPER = "paper",
+}
+
+export type ComponentBackgroundProps = {
+  children: ReactNode;
+  sx?: SxProps;
+};
+
+const BackgroundComponent = ({
+  children,
+  backgroundType,
+  sx,
+}: {
+  children: ReactNode;
+  backgroundType: ComponentBackgroundTypes;
+  sx?: SxProps;
+}) => {
+  switch (backgroundType) {
+    case ComponentBackgroundTypes.DEFAULT:
+      return <DefaultBackground sx={sx}>{children}</DefaultBackground>;
+    case ComponentBackgroundTypes.PAPER:
+      return <PaperBackground sx={sx}>{children}</PaperBackground>;
+    default:
+      return <DefaultBackground sx={sx}>{children}</DefaultBackground>;
+  }
+};
+
+const ComponentBackground = ({ children, sx }: ComponentBackgroundProps) => {
+  const [darkMode, setDarkMode] = useState(false);
+  const [backgroundType, setBackgroundType] =
+    useState<ComponentBackgroundTypes>(ComponentBackgroundTypes.DEFAULT);
+
+  return (
+    <MuiThemeProvider theme={darkMode ? darkTheme : lightTheme}>
+      <BackgroundComponent backgroundType={backgroundType} sx={sx}>
+        {children}
+        <Stack gap={2} direction="row" marginTop="50px">
+          <Switch
+            onChange={(e) => {
+              setDarkMode(e.target.checked);
+            }}
+          />
+          <Typography variant="label1">Dark Mode</Typography>
+          <ToggleButtonGroup
+            color="primary"
+            value={backgroundType}
+            exclusive
+            onChange={(e, v) => {
+              setBackgroundType(v);
+            }}
+            aria-label="Platform"
+          >
+            <ToggleButton value={ComponentBackgroundTypes.DEFAULT}>
+              DEFAULT
+            </ToggleButton>
+            <ToggleButton value={ComponentBackgroundTypes.PAPER}>
+              PAPER
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Stack>
+      </BackgroundComponent>
+    </MuiThemeProvider>
+  );
+};
+
+export default ComponentBackground;

package/src/components/Layout/ComponentBackground/DefaultBackground.tsx

@@ -0,0 +1,12 @@
+import { Box, styled } from "@mui/material";
+
+export const DefaultBackground = styled(Box)(({ theme }) => ({
+  minHeight: "150px",
+  backgroundColor: theme.palette.background.default,
+  minWidth: "600px",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "50px",
+}));

package/src/components/Layout/ComponentBackground/PaperBackground.tsx

@@ -0,0 +1,12 @@
+import { Box, styled } from "@mui/material";
+
+export const PaperBackground = styled(Box)(({ theme }) => ({
+  minHeight: "150px",
+  backgroundColor: theme.palette.background.paper,
+  minWidth: "600px",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "50px",
+}));