@campxdev/react-blueprint 0.1.0 → 0.1.1

package/.storybook/preview.tsx

@@ -2,7 +2,7 @@ import { CssBaseline } from "@mui/material";
 import type { Preview } from "@storybook/react";
 import React from "react";
 import { BrowserRouter } from "react-router-dom";
-import ComponentBackground from "../src/components/Layout/ComponentBackground/ComponentBackground";
+import { ComponentBackground } from "../src/components/Layout/ComponentBackground/ComponentBackground";
 
 const withThemeProvider = (Story) => (
   <ComponentBackground>

package/exports.ts

@@ -1 +1,2 @@
-export * from "./src/components";
+export * from "./src/components/export";
+export * from "./src/themes/export";

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.0",
-  "main": "./exports.ts",
+  "version": "0.1.1",
   "publishConfig": {
     "access": "public"
   },
@@ -17,18 +16,19 @@
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "axios": "^1.7.2",
+    "js-cookie": "^3.0.5",
+    "pullstate": "^1.24.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.4.2",
-    "pullstate": "^1.24.0",
-    "web-vitals": "^2.1.0",
-    "react-router-dom": "^6.4.2"
+    "web-vitals": "^2.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "CI=false && react-scripts build",
-    "prepublish": "npm run build",
+    "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
@@ -55,6 +55,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/js-cookie": "^3.0.5",
     "@chromatic-com/storybook": "^1.4.0",
     "@storybook/addon-essentials": "^8.1.1",
     "@storybook/addon-interactions": "^8.1.1",

package/src/App.tsx

@@ -5,6 +5,7 @@ function App() {
   return (
     <Providers>
       {/* <AppHeader clientLogo={""} fullName={""} userBoxActions={[]} /> */}
+      <></>
     </Providers>
   );
 }

package/src/components/DropDownMenu/DropDownButton.tsx

@@ -2,7 +2,7 @@ import { KeyboardArrowDown } from "@mui/icons-material";
 import { ButtonProps, CircularProgress } from "@mui/material";
 import { StyledDropDownButton } from "./styles";
 
-export default function DropDownButton({
+export const DropDownButton = ({
   button,
   handleClick,
   loading,
@@ -13,7 +13,7 @@ export default function DropDownButton({
     buttonProps?: ButtonProps;
   };
   handleClick: any;
-}) {
+}) => {
   return (
     <StyledDropDownButton
       onClick={handleClick}
@@ -27,4 +27,4 @@ export default function DropDownButton({
       {button?.label}
     </StyledDropDownButton>
   );
-}
+};

package/src/components/DropDownMenu/DropDownIcon.tsx

@@ -8,7 +8,7 @@ const defaultIcon = {
   outlined: true,
 };
 
-export default function DropDownIcon({
+export const DropDownIcon = ({
   icon = defaultIcon,
   handleClick,
 }: {
@@ -18,7 +18,7 @@ export default function DropDownIcon({
     outlined?: boolean;
   };
   handleClick: any;
-}) {
+}) => {
   return (
     <StyledIconButton
       outlined={icon?.outlined ?? false}
@@ -28,4 +28,4 @@ export default function DropDownIcon({
       {icon.icon}
     </StyledIconButton>
   );
-}
+};

package/src/components/DropDownMenu/DropDownMenu.stories.tsx

@@ -2,10 +2,10 @@ import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { IconButton } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
 import { HelpIcon } from "../../assets/images/icons";
-import DropDownButton from "./DropDownButton";
-import DropDownIcon from "./DropDownIcon";
-import DropDownMenu, { DropDownMenuProps } from "./DropDownMenu";
-import MenuItemButton from "./MenuItemButton";
+import { DropDownButton } from "./DropDownButton";
+import { DropDownIcon } from "./DropDownIcon";
+import { DropDownMenu, DropDownMenuProps } from "./DropDownMenu";
+import { MenuItemButton } from "./MenuItemButton";
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof DropDownMenu> = {

package/src/components/DropDownMenu/DropDownMenu.tsx

@@ -8,7 +8,7 @@ export interface DropDownMenuProps {
   menuListProps?: MenuListProps;
 }
 
-const DropDownMenu = ({
+export const DropDownMenu = ({
   menuProps,
   menu = [],
   menuListProps,
@@ -62,4 +62,3 @@ const DropDownMenu = ({
     </>
   );
 };
-export default DropDownMenu;

package/src/components/DropDownMenu/MenuItemButton.tsx

@@ -8,7 +8,7 @@ export type MenuItemButtonProps = {
   onClick: () => void;
 };
 
-const MenuItemButton = ({
+export const MenuItemButton = ({
   icon,
   label,
   onClick,
@@ -25,5 +25,3 @@ const MenuItemButton = ({
     </StyledMenuItem>
   );
 };
-
-export default MenuItemButton;

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

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/react";
 
 // Make sure your TextField import is correct
 
-import Button, { ButtonProps } from "./Button";
+import { Button, ButtonProps } from "./Button";
 
 // Define the default export with Meta type including the component type
 export default {

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

@@ -5,7 +5,6 @@ import {
 
 export type ButtonProps = {} & MuiButtonProps;
 
-const Button = (props: ButtonProps) => {
+export const Button = (props: ButtonProps) => {
   return <MuiButton {...props} />;
 };
-export default Button;

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

@@ -2,8 +2,8 @@
 import { Meta } from "@storybook/react";
 
 // Make sure your TextField import is correct
-import { TextFieldProps } from "@mui/material";
-import SingleSelect from "./SingleSelect";
+
+import { SingleSelect, SingleSelectProps } from "./SingleSelect";
 
 // Define the default export with Meta type including the component type
 export default {
@@ -15,41 +15,41 @@ export default {
 
 // Define stories directly as objects with render function
 export const Primary = {
-  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
   args: {},
 };
 
 export const Disabled = {
-  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
   args: {},
 };
 
 export const WithValue = {
-  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
   args: {},
 };
 
 export const InputWithPlaceholder = {
-  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
   args: {},
 };
 
 export const ErrorInput = {
-  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
   args: {},
 };
 
 export const SuccessInput = {
-  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
   args: {},
 };
 
 export const WarningInput = {
-  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
   args: {},
 };
 
 export const PassowrdInput = {
-  render: (args: TextFieldProps) => <SingleSelect {...args} />,
+  render: (args: SingleSelectProps) => <SingleSelect {...args} />,
   args: {},
 };

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

@@ -1,4 +1,194 @@
-const SingleSelect = () => {
-  return <></>;
+import {
+  CircularProgress,
+  Autocomplete as MuiAutocomplete,
+  TextField,
+} from "@mui/material";
+import axios from "axios";
+import { useReducer } from "react";
+import { campxAxios } from "../../../utils/campxAxios";
+
+function sleep(duration: number): Promise<void> {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+}
+
+const topFilms = [
+  { label: "The Shawshank Redemption", value: 1994 },
+  { label: "The Godfather", value: 1972 },
+  { label: "The Godfather: Part II", value: 1974 },
+  { label: "The Dark Knight", value: 2008 },
+  { label: "12 Angry Men", value: 1957 },
+  { label: "Schindler's List", value: 1993 },
+  { label: "Pulp Fiction", value: 1994 },
+  {
+    label: "The Lord of the Rings: The Return of the King",
+    value: 2003,
+  },
+  { label: "The Good, the Bad and the Ugly", value: 1966 },
+  { label: "Fight Club", value: 1999 },
+  {
+    label: "The Lord of the Rings: The Fellowship of the Ring",
+    value: 2001,
+  },
+  {
+    label: "Star Wars: Episode V - The Empire Strikes Back",
+    value: 1980,
+  },
+  { label: "Forrest Gump", value: 1994 },
+  { label: "Inception", value: 2010 },
+  {
+    label: "The Lord of the Rings: The Two Towers",
+    value: 2002,
+  },
+  { label: "One Flew Over the Cuckoo's Nest", value: 1975 },
+  { label: "Goodfellas", value: 1990 },
+  { label: "The Matrix", value: 1999 },
+  { label: "Seven Samurai", value: 1954 },
+  {
+    label: "Star Wars: Episode IV - A New Hope",
+    value: 1977,
+  },
+  { label: "City of God", value: 2002 },
+  { label: "Se7en", value: 1995 },
+  { label: "The Silence of the Lambs", value: 1991 },
+  { label: "It's a Wonderful Life", value: 1946 },
+  { label: "Life Is Beautiful", value: 1997 },
+  { label: "The Usual Suspects", value: 1995 },
+  { label: "Léon: The Professional", value: 1994 },
+  { label: "Spirited Away", value: 2001 },
+  { label: "Saving Private Ryan", value: 1998 },
+  { label: "Once Upon a Time in the West", value: 1968 },
+  { label: "American History X", value: 1998 },
+  { label: "Interstellar", value: 2014 },
+];
+
+export interface SingleSelectProps {
+  options?: { label: string; subLabel?: string; value: any }[];
+  optionsApiEndPoint?: string;
+  useCampxAxios: boolean;
+}
+
+enum SingleSelectActionsTypes {
+  OPEN = "open",
+  CLOSE = "close",
+  LOAD_INTERNAL_OPTIONS_START = "load_internal_options_start",
+  LOAD_INTERNAL_OPTIONS_END = "load_internal_options_end",
+  SET_NETWORK_ERROR = "set_network_error",
+  SET_INTERNAL_OPTIONS = "set_internal_options",
+}
+const singleSelectReducer = (
+  state: any,
+  {
+    actionType,
+    stateChanges,
+  }: { actionType: SingleSelectActionsTypes; stateChanges?: any }
+) => {
+  switch (actionType) {
+    case SingleSelectActionsTypes.OPEN: {
+      return { ...state, open: true };
+    }
+    case SingleSelectActionsTypes.CLOSE: {
+      return { ...state, open: false };
+    }
+    case SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START: {
+      return { ...state, loadingInternalOptions: true };
+    }
+    case SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END: {
+      return { ...state, loadingInternalOptions: false };
+    }
+    case SingleSelectActionsTypes.SET_NETWORK_ERROR: {
+      return { ...state, ...stateChanges };
+    }
+    default:
+      return { ...state, ...stateChanges };
+  }
 };
+
+export const SingleSelect = ({
+  options,
+  optionsApiEndPoint,
+  useCampxAxios = true,
+}: SingleSelectProps) => {
+  const [state, dispatch] = useReducer(singleSelectReducer, {
+    open: false,
+    loadingInternalOptions: false,
+    internalOptions: options ?? topFilms,
+  });
+  const { open, loadingInternalOptions, internalOptions } = state;
+
+  const internalAxios = useCampxAxios ? campxAxios : axios;
+
+  const handleOpen = async () => {
+    dispatch({
+      actionType: SingleSelectActionsTypes.OPEN,
+    });
+    if (optionsApiEndPoint) {
+      try {
+        dispatch({
+          actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START,
+        });
+        const options = await internalAxios
+          .get(optionsApiEndPoint, {
+            params: {
+              limit: 10,
+              offset: 0,
+              skip: 0,
+            },
+          })
+          .then((res) => res.data);
+        dispatch({
+          actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
+          stateChanges: {
+            options,
+            loadingInternalOptions: false,
+          },
+        });
+      } catch (e) {
+        dispatch({
+          actionType: SingleSelectActionsTypes.SET_NETWORK_ERROR,
+          stateChanges: {
+            error: e,
+          },
+        });
+        dispatch({
+          actionType: SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END,
+        });
+      }
+    }
+  };
+
+  return (
+    <MuiAutocomplete
+      open={open}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="Asynchronous"
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <>
+                {loadingInternalOptions ? (
+                  <CircularProgress color="inherit" size={20} />
+                ) : null}
+                {params.InputProps.endAdornment}
+              </>
+            ),
+          }}
+        />
+      )}
+      onOpen={handleOpen}
+      onClose={() => {
+        dispatch({
+          actionType: SingleSelectActionsTypes.CLOSE,
+        });
+      }}
+      options={internalOptions}
+    />
+  );
+};
+
 export default SingleSelect;

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

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/react";
 
 // Make sure your TextField import is correct
 
-import Switch, { SwitchProps } from "./Switch";
+import { Switch, SwitchProps } from "./Switch";
 
 // Define the default export with Meta type including the component type
 export default {

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

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

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

@@ -2,7 +2,7 @@
 import { Meta } from "@storybook/react";
 
 // Make sure your TextField import is correct
-import TextField, { TextFieldProps } from "./TextField";
+import { TextField, TextFieldProps } from "./TextField";
 
 // Define the default export with Meta type including the component type
 export default {

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

@@ -10,7 +10,7 @@ export type TextFieldProps = {
   containerProps?: StackProps;
 } & MuiTextFieldProps;
 
-export default function TextField({
+export const TextField = ({
   name,
   label,
   value,
@@ -18,7 +18,7 @@ export default function TextField({
   required = false,
   containerProps,
   ...rest
-}: TextFieldProps) {
+}: TextFieldProps) => {
   return (
     <Stack margin="15px 20px" {...containerProps}>
       <Label label={label} required={required} name={name} />
@@ -32,4 +32,4 @@ export default function TextField({
       />
     </Stack>
   );
-}
+};

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

@@ -6,9 +6,9 @@ import {
   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 { MuiThemeProvider } from "../../../themes/MuiThemeProvider";
+import { darkTheme, lightTheme } from "../../../themes/export";
+import { Typography } from "../../Typography/Typography";
 import { DefaultBackground } from "./DefaultBackground";
 import { PaperBackground } from "./PaperBackground";
 
@@ -22,7 +22,7 @@ export type ComponentBackgroundProps = {
   sx?: SxProps;
 };
 
-const BackgroundComponent = ({
+export const BackgroundComponent = ({
   children,
   backgroundType,
   sx,
@@ -41,7 +41,10 @@ const BackgroundComponent = ({
   }
 };
 
-const ComponentBackground = ({ children, sx }: ComponentBackgroundProps) => {
+export const ComponentBackground = ({
+  children,
+  sx,
+}: ComponentBackgroundProps) => {
   const [darkMode, setDarkMode] = useState(false);
   const [backgroundType, setBackgroundType] =
     useState<ComponentBackgroundTypes>(ComponentBackgroundTypes.DEFAULT);
@@ -78,5 +81,3 @@ const ComponentBackground = ({ children, sx }: ComponentBackgroundProps) => {
     </MuiThemeProvider>
   );
 };
-
-export default ComponentBackground;

package/src/components/Layout/Header/AppHeader.stories.tsx

@@ -1,7 +1,7 @@
 import { IconButton } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
 import { CareerIcon, ExamResultIcon } from "../../../assets/images/icons";
-import MenuItemButton from "../../DropDownMenu/MenuItemButton";
+import { MenuItemButton } from "../../DropDownMenu/MenuItemButton";
 import AppHeader, { AppHeaderProps } from "./AppHeader";
 import AppsMenu from "./AppsMenu";
 

package/src/components/Layout/Header/HeaderActions/CogWheelMenu.tsx

@@ -1,7 +1,7 @@
 import { Divider, IconButton } from "@mui/material";
 import { ReactNode } from "react";
 import { ClogWheelIcon } from "../../../../assets/images/icons";
-import DropDownMenu from "../../../DropDownMenu/DropDownMenu";
+import { DropDownMenu } from "../../../DropDownMenu/DropDownMenu";
 // import { clogWheel } from "../../../../assets/images";
 // import DropDownButton from "../../../DropDownButton/DropDownButton";
 

package/src/components/Layout/Header/HeaderActions/UserBox.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import DropDownMenu from "../../../DropDownMenu/DropDownMenu";
+import { DropDownMenu } from "../../../DropDownMenu/DropDownMenu";
 import { StyledAvatar } from "../styles/styles";
 // import {
 //   activeDevices,

package/src/components/Typography/Typography.stories.tsx

@@ -3,7 +3,7 @@ import { Meta } from "@storybook/react";
 
 // Make sure your childrenField import is correct
 
-import Typography, { TypographyProps } from "./Typography";
+import { Typography, TypographyProps } from "./Typography";
 
 // Define the default export with Meta type including the component type
 export default {

package/src/components/Typography/Typography.tsx

@@ -5,8 +5,6 @@ import {
 
 export type TypographyProps = {} & MuiTypographyProps;
 
-const Typography = ({ variant, children }: TypographyProps) => {
+export const Typography = ({ variant, children }: TypographyProps) => {
   return <MuiTypography variant={variant}>{children}</MuiTypography>;
 };
-
-export default Typography;

package/src/components/export.ts

@@ -0,0 +1,6 @@
+export * from "./DropDownMenu/DropDownButton";
+export * from "./DropDownMenu/DropDownMenu";
+export * from "./Input/Button/Button";
+export * from "./Input/SingleSelect/SingleSelect";
+export * from "./Input/Switch/Switch";
+export * from "./Input/TextField/TextField";

package/src/contexts/Providers.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import MuiThemeProvider from "../themes/MuiThemeProvider";
+import { MuiThemeProvider } from "../themes/MuiThemeProvider";
 
 export default function Providers({ children }: { children: ReactNode }) {
   return <MuiThemeProvider>{children}</MuiThemeProvider>;

package/src/themes/MuiThemeProvider.tsx

@@ -1,18 +1,18 @@
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import { ReactNode } from "react";
-import lightTheme from "./lightTheme";
+import { lightTheme } from "./lightTheme";
 
-export default function MuiThemeProvider({
+export const MuiThemeProvider = ({
   children,
   theme,
 }: {
   children: ReactNode;
   theme?: any;
-}) {
+}) => {
   return (
     <ThemeProvider theme={theme ?? lightTheme}>
       <CssBaseline />
       {children}
     </ThemeProvider>
   );
-}
+};

package/src/themes/commonTheme.ts

@@ -11,185 +11,6 @@ declare module "@mui/material/Typography" {
   }
 }
 
-//   typography: {
-//     fontFamily: ["Heebo", "Poppins", "sans-serif"].join(","),
-//   },
-//   components: {
-//     MuiIconButton: {
-//       defaultProps: {
-//         disableRipple: true,
-//         disableFocusRipple: true,
-//         disableTouchRipple: true,
-//       },
-//       styleOverrides: {
-//         root: {
-//           borderRadius: "10px",
-//         },
-//       },
-//     },
-//     MuiButtonBase: {
-//       defaultProps: {},
-//       styleOverrides: {
-//         root: {},
-//       },
-//     },
-//     MuiButton: {
-//       defaultProps: {},
-//       styleOverrides: {
-//         root: {
-//           textTransform: "none",
-//           padding: "5px 30px ",
-//           maxHeight: "40px ",
-//           borderRadius: "5px ",
-//           boxShadow: "none ",
-//           fontSize: "14px ",
-//           fontFamily: "Poppins",
-//           fontWeight: 600,
-//           "&:hover": {
-//             boxShadow: "none ",
-//             "@media (hover: none )": {
-//               boxShadow: "none ",
-//             },
-//           },
-//           "&$focusVisible": {
-//             boxShadow: "none",
-//           },
-//           "&:active": {
-//             boxShadow: "none",
-//           },
-//           "&$disabled": { boxShadow: "none" },
-//         },
-//       },
-//     },
-//     MuiLink: {
-//       defaultProps: {
-//         underline: "none",
-//       },
-//     },
-//     MuiTextField: {
-//       defaultProps: {
-//         variant: "outlined",
-//         color: "primary",
-//         fullWidth: true,
-//       },
-//       styleOverrides: {
-//         root: {
-//           "& label": {
-//             display: "none",
-//           },
-//           "& legend": {
-//             "& span": {
-//               display: "none",
-//             },
-//           },
-//           minWidth: "350px",
-//         },
-//       },
-//     },
-//     MuiInputBase: {
-//       styleOverrides: {
-//         root: {
-//           fontSize: "16px !important",
-//           fontFamily: "Heebo !important",
-//           fontWeight: 300,
-//           color: "#FFFFFF",
-//           "&.Mui-disabled": {
-//             backgroundColor: "#F8F8F8",
-//             color: "#a0a0a0",
-//           },
-//         },
-//       },
-//     },
-//     MuiOutlinedInput: {
-//       styleOverrides: {
-//         root: {
-//           "& label": {
-//             display: "none",
-//           },
-//           "& legend": {
-//             "& span": {
-//               display: "none",
-//             },
-//           },
-//           "&.Mui-disabled": {
-//             backgroundColor: "#f0f0f0",
-//           },
-//           maxHeight: "40px",
-//           maxWidth: "400px",
-//         },
-//       },
-//     },
-//     MuiFormLabel: {
-//       styleOverrides: {
-//         root: {
-//           fontSize: "14px",
-//           color: "#959595",
-//         },
-//       },
-//     },
-//     MuiTypography: {
-//       styleOverrides: {
-//         h6: {
-//           fontSize: "24px",
-//           fontWeight: 800,
-//           fontFamily: "Poppins",
-//           color: LightColorTokens.text.primary,
-//         },
-//         subtitle1: {
-//           fontSize: "18px",
-//           fontWeight: 600,
-//           fontFamily: "Poppins",
-//           color: LightColorTokens.text.primary,
-//         },
-//         subtitle2: {
-//           fontSize: "16px",
-//           fontWeight: 600,
-//           fontFamily: "Poppins",
-//           color: LightColorTokens.text.primary,
-//         },
-//         subtitle3: {
-//           fontSize: "14px",
-//           fontWeight: 400,
-//           fontFamily: "Poppins",
-//           color: LightColorTokens.text.primary,
-//         },
-//         body1: {
-//           fontSize: "16px",
-//           fontWeight: 600,
-//           fontFamily: "Heebo",
-//           color: LightColorTokens.text.primary,
-//         },
-//         body2: {
-//           fontSize: "14px",
-//           fontWeight: 400,
-//           fontFamily: "Heebo",
-//           color: LightColorTokens.text.primary,
-//         },
-//         caption: {
-//           fontSize: "12px",
-//           fontWeight: 400,
-//           fontFamily: "Heebo",
-//           color: LightColorTokens.text.primary,
-//         },
-//         label1: {
-//           fontSize: "14px",
-//           fontWeight: 300,
-//           fontFamily: "Heebo",
-//           color: LightColorTokens.text.secondary,
-//         },
-//         label2: {
-//           fontSize: "14px",
-//           fontWeight: 300,
-//           fontFamily: "Poppins",
-//           color: LightColorTokens.text.secondary,
-//         },
-//       } as TypographyOptions,
-//     },
-//     MuiCssBaseline: {
-//       styleOverrides: customCssBaseline,
-//     },
-//   } as Components,
-// };
 export enum Theme {
   LIGHT = "light",
   DARK = "dark",
@@ -343,6 +164,17 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+      MuiAutocomplete: {
+        styleOverrides: {
+          root: {
+            "& .MuiOutlinedInput-root .MuiAutocomplete-input": {
+              padding: 0,
+              maxHeight: "40px",
+              maxWidth: "400px",
+            },
+          },
+        },
+      },
       MuiOutlinedInput: {
         styleOverrides: {
           root: {

package/src/themes/darkTheme.ts

@@ -2,9 +2,7 @@ import { createTheme } from "@mui/material/styles";
 import { DarkColorTokens } from "./colorTokens";
 import { getCommonTheme, Theme } from "./commonTheme";
 
-const darkThemeColors = {};
-
-const darkTheme = createTheme({
+export const darkTheme = createTheme({
   palette: {
     mode: "dark",
     primary: DarkColorTokens.primary,
@@ -20,5 +18,3 @@ const darkTheme = createTheme({
   },
   ...getCommonTheme(Theme.DARK),
 });
-
-export default darkTheme;

package/src/themes/export.ts

@@ -0,0 +1,5 @@
+import { darkTheme } from "./darkTheme";
+import { lightTheme } from "./lightTheme";
+
+export * from "./MuiThemeProvider";
+export { darkTheme, lightTheme };

package/src/themes/lightTheme.ts

@@ -2,7 +2,7 @@ import { createTheme } from "@mui/material/styles";
 import { LightColorTokens } from "./colorTokens";
 import { Theme, getCommonTheme } from "./commonTheme";
 
-const lightTheme = createTheme({
+export const lightTheme = createTheme({
   palette: {
     mode: "light",
     primary: LightColorTokens.primary,
@@ -18,5 +18,3 @@ const lightTheme = createTheme({
   },
   ...getCommonTheme(Theme.LIGHT),
 });
-
-export default lightTheme;

package/src/themes/typography.stories.tsx

@@ -1,6 +1,6 @@
 // src/stories/Typography.stories.jsx
 import { Stack } from "@mui/material";
-import Typography from "../components/Typography/Typography";
+import { Typography } from "../components/Typography/Typography";
 // Update path as necessary
 
 export default {

package/src/utils/campxAxios.ts

@@ -0,0 +1,17 @@
+import axios from "axios";
+import Cookies from "js-cookie";
+
+const tenantCode = window.location.pathname.split("/")[1] ?? "campx";
+const institutionCode = window.location.pathname.split("/")[2] ?? "campx";
+const sessionKey = Cookies.get("campx_session_key");
+const isProduction = process.env.NODE_ENV === "production";
+
+export const campxAxios = axios.create({
+  baseURL: process.env.REACT_APP_API_HOST,
+  withCredentials: true,
+  headers: {
+    "x-tenant-id": tenantCode,
+    ...(!isProduction && sessionKey ? { campx_session_key: sessionKey } : {}),
+    "x-institution-id": institutionCode,
+  },
+});

package/tsconfig.json

@@ -18,6 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
+    "types": ["node"],
     "jsx": "react-jsx"
   },
   "include": [

package/src/components/index.ts

@@ -1 +0,0 @@
-export { default as ActionButton } from "./Input/Button/Button";

package/src/themes/index.ts

@@ -1,4 +0,0 @@
-import lightTheme from "./lightTheme";
-import darkTheme from "./darkTheme";
-
-export { lightTheme, darkTheme };