@campxdev/react-blueprint 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
@@ -8,12 +8,12 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.14.11",
     "@mui/material": "^5.14.11",
+    "@mui/x-data-grid": "^7.5.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
-    "react-error-boundary": "^3.1.4",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "axios": "^1.7.2",
@@ -21,6 +21,7 @@
     "pullstate": "^1.24.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^3.1.4",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
     "typescript": "^5.3.3",
@@ -55,7 +56,6 @@
   },
   "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.4",
     "@storybook/addon-interactions": "^8.1.4",
@@ -67,6 +67,7 @@
     "@storybook/react": "^8.1.4",
     "@storybook/react-webpack5": "^8.1.4",
     "@storybook/test": "^8.1.4",
+    "@types/js-cookie": "^3.0.5",
     "eslint-plugin-storybook": "^0.8.0",
     "prop-types": "^15.8.1",
     "storybook": "^8.1.4",

package/src/components/DataDisplay/DataTable/DataTable.stories.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import DataTable from "./DataTable"; // Make sure the path to your component is correct
+import { GridColDef } from "@mui/x-data-grid";
+
+const columns: GridColDef[] = [
+  { field: "id", headerName: "ID", width: 70 },
+  { field: "firstName", headerName: "First name", width: 130 },
+  { field: "lastName", headerName: "Last name", width: 130 },
+  { field: "age", headerName: "Age", type: "number", width: 90 },
+  {
+    field: "fullName",
+    headerName: "Full name",
+    description: "This column has a value getter and is not sortable.",
+    sortable: false,
+    width: 160,
+  },
+];
+
+const rows = [
+  { id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
+  { id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
+  { id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
+  { id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
+  { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
+  { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
+  { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
+  { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
+  { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
+];
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof DataTable> = {
+  title: "DataDisplay/DataTable",
+  component: DataTable,
+  parameters: {
+    controls: {
+      include: ["rows", "columns"], // Specify the controls you want to include
+    },
+  },
+};
+
+export default meta;
+const Template: StoryObj<typeof DataTable> = {
+  render: (args) => <DataTable {...args} />,
+  args: {
+    columns,
+    rows,
+  },
+};
+
+export const Default: StoryObj<typeof DataTable> = {
+  ...Template,
+};

package/src/components/DataDisplay/DataTable/DataTable.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { DataGrid, GridColDef, GridRowsProp } from "@mui/x-data-grid";
+
+interface DataTableProps {
+  columns: GridColDef[];
+  rows: GridRowsProp;
+}
+
+export default function DataTable({ columns, rows }: DataTableProps) {
+  return (
+    <div style={{ height: 400, width: "100%" }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        initialState={{
+          pagination: {
+            paginationModel: { page: 0, pageSize: 5 },
+          },
+        }}
+        pageSizeOptions={[5, 10]}
+        checkboxSelection
+        onPaginationMetaChange={(params) => {
+          console.log(params);
+        }}
+        onPaginationModelChange={(params) => {
+          console.log(params);
+        }}
+      />
+    </div>
+  );
+}

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

@@ -30,6 +30,11 @@ export default {
       description: "Disabled Button",
       defaultValue: false,
     },
+    loading: {
+      control: "boolean",
+      description: "Loading Button",
+      defaultValue: false,
+    },
   },
 } as Meta<typeof Button>;
 

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

@@ -2,9 +2,16 @@ import {
   Button as MuiButton,
   ButtonProps as MuiButtonProps,
 } from "@mui/material";
+import "./ButtonLoader.css";
 
-export type ButtonProps = {} & MuiButtonProps;
+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} />;
 };

package/src/components/Input/Button/ButtonLoader.css

@@ -0,0 +1,24 @@
+/* HTML: <div class="buttonLoader"></div> */
+.buttonLoader {
+    max-height: 40px;
+    padding: 5px 30px;
+    aspect-ratio: 2.5;
+    --_g: no-repeat radial-gradient(farthest-side,#000 90%,#0000);
+    background: var(--_g), var(--_g), var(--_g), var(--_g);
+    background-size: 20% 50%;
+    animation: l44 1s infinite linear alternate; 
+    scale:0.5;
+  }
+  @keyframes l44 {
+    0%,
+    5%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
+    12.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
+    25%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
+    37.5% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
+    50%   {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
+    62.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
+    75%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
+    87.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
+    95%,
+    100%  {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
+  }

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

@@ -2,12 +2,14 @@ import {
   Box,
   CircularProgress,
   Autocomplete as MuiAutocomplete,
+  Paper,
   TextField,
 } from "@mui/material";
 import axios from "axios";
 import { useReducer } from "react";
 import { campxAxios } from "../../../utils/campxAxios";
 import { Typography } from "../../Typography/Typography";
+import { FetchingOptionsLoader } from "../components/FetchingOptionsLoader";
 import { OptionContainer } from "../styles";
 
 function sleep(duration: number): Promise<void> {
@@ -182,6 +184,12 @@ export const SingleSelect = ({
           }}
         />
       )}
+      PaperComponent={(props) => (
+        <Paper {...props}>
+          {props.children}
+          <FetchingOptionsLoader loading={loadingInternalOptions} />
+        </Paper>
+      )}
       renderOption={(props, option: any) => {
         return (
           <Box component="li" {...props}>

package/src/components/Input/components/FetchingOptionsLoader.tsx

@@ -0,0 +1,10 @@
+import { Box } from "@mui/material";
+import { Spinner } from "../../Layout/Spinner/Spinner";
+
+export const FetchingOptionsLoader = ({ loading }: { loading: boolean }) => {
+  return (
+    <Box>
+      <Spinner />
+    </Box>
+  );
+};

package/src/components/Layout/LayoutWrapper/LayoutWrapper.tsx

@@ -3,6 +3,7 @@ import { IconButton, Toolbar, Typography } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import { useState } from "react";
 import { LeftIcon, RightIcon } from "../../../assets/images/icons";
+import { activeStore } from "../../../store/activeStore";
 import { SideNavigation } from "../SideNavigation/SideNavigation";
 import {
   StyledLayoutContainer,
@@ -26,14 +27,12 @@ export const LayoutWrapper = ({
   );
   const [isHovered, setIsHovered] = useState<boolean>(false);
 
-  const [active, setActive] = useState(0);
+  const { active } = activeStore.useState((s) => s);
 
   const handleDrawer = () => {
     setOpen(!open);
   };
 
-  console.log(active, menu[active].name);
-
   return (
     <StyledLayoutContainer>
       <StyledMainContainer>
@@ -44,7 +43,7 @@ export const LayoutWrapper = ({
               aria-label="open drawer"
               onClick={handleDrawer}
               edge="start"
-              sx={{ mr: 0.5 }}
+              sx={{ mr: 0.5, padding: "6px", marginLeft: "0px" }}
               onMouseEnter={() => setIsHovered(true)}
               onMouseLeave={() => setIsHovered(false)}
             >
@@ -67,7 +66,6 @@ export const LayoutWrapper = ({
           children={children}
           open={open}
           handleDrawer={handleDrawer}
-          setActive={setActive}
         />
       </StyledMainContainer>
     </StyledLayoutContainer>

package/src/components/Layout/SideNavigation/SideNavigation.tsx

@@ -1,6 +1,7 @@
 import { ListItemIcon, Stack } from "@mui/material";
 import { useMatch, useResolvedPath } from "react-router-dom";
 import { HomeIcon } from "../../../assets/images/icons";
+import { activeStore } from "../../../store/activeStore";
 import { Typography } from "../../Typography/Typography";
 import {
   Main,
@@ -16,7 +17,6 @@ export interface SideNavigationProps {
   children: React.ReactNode;
   open?: any;
   handleDrawer?: any;
-  setActive: any;
 }
 
 export interface MenuItemProps {
@@ -28,7 +28,6 @@ export interface MenuItemProps {
     iconType: string;
   };
   index: number;
-  setActive: any;
 }
 
 export const SideNavigation = ({
@@ -36,7 +35,6 @@ export const SideNavigation = ({
   children,
   open,
   handleDrawer,
-  setActive,
 }: SideNavigationProps) => {
   return (
     <Stack gap="20px" direction={"row"}>
@@ -48,12 +46,7 @@ export const SideNavigation = ({
       >
         <StyledList>
           {menu?.map((item: any, index: number) => (
-            <MenuItem
-              menuItem={item}
-              index={index}
-              key={index}
-              setActive={setActive}
-            />
+            <MenuItem menuItem={item} index={index} key={index} />
           ))}
         </StyledList>
       </StyledDrawer>
@@ -62,7 +55,7 @@ export const SideNavigation = ({
   );
 };
 
-const MenuItem = ({ menuItem, index, setActive }: MenuItemProps) => {
+const MenuItem = ({ menuItem, index }: MenuItemProps) => {
   const { path, icon: Icon, name, permissionKey, iconType } = menuItem;
 
   let resolved = useResolvedPath(path);
@@ -73,14 +66,16 @@ const MenuItem = ({ menuItem, index, setActive }: MenuItemProps) => {
 
   // if (!hasAccess) return null
 
-  console.log(index, "path");
-
   return (
     <StyledListItem key={path} disablePadding match={match}>
       <StyledLinkButton
         to={path}
         style={{ width: "100%" }}
-        onClick={() => setActive(index)}
+        onClick={() =>
+          activeStore.update((s) => {
+            s.active = index;
+          })
+        }
       >
         <StyledListItemButton>
           <ListItemIcon

package/src/components/Layout/SideNavigation/styles/styles.tsx

@@ -48,6 +48,9 @@ export const StyledListItemButton = styled(ListItemButton)(() => ({
 
 export const StyledLinkButton = styled(Link)({
   textDecoration: "none",
+  "&:hover": {
+    color: "unset",
+  },
 });
 
 export const Main = styled("main", {

package/src/components/Layout/Spinner/Spinner.css

@@ -0,0 +1,32 @@
+.spinner {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    position: relative;
+    animation: rotate 1s linear infinite;
+    scale: 0.5;
+  }
+  .spinner::before , .spinner::after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0px;
+    border-radius: 50%;
+    border: 5px solid #7D60D9;
+    animation: prixClipFix 1.5s linear infinite ;
+  }
+  .spinner::after{
+    transform: rotate3d(90, 90, 0, 180deg );
+    border-color: #FF3D00;
+  }
+
+  @keyframes rotate {
+    0%   {transform: rotate(0deg)}
+    100%   {transform: rotate(360deg)}
+  }
+
+  @keyframes prixClipFix {
+      0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+      50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+      75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+  }

package/src/components/Layout/Spinner/Spinner.stories.tsx

@@ -0,0 +1,20 @@
+// Import React and other necessary elements
+import { Meta } from "@storybook/react";
+
+// Make sure your TextField import is correct
+
+import { Spinner } from "./Spinner";
+
+// Define the default export with Meta type including the component type
+export default {
+  title: "Layout/Spinner",
+  component: Spinner,
+  tags: ["autodocs"],
+  argTypes: {},
+} as Meta<typeof Spinner>;
+
+// Define stories directly as objects with render function
+export const Primary = {
+  render: (args: any) => <Spinner {...args} />,
+  args: {},
+};

package/src/components/Layout/Spinner/Spinner.tsx

@@ -0,0 +1,5 @@
+import "./Spinner.css";
+
+export const Spinner = () => {
+  return <div className="spinner" style={{}}></div>;
+};

package/src/store/activeStore.ts

@@ -0,0 +1,5 @@
+import { Store } from "pullstate";
+
+export const activeStore = new Store({
+  active: 0,
+});

package/src/themes/commonTheme.ts

@@ -76,9 +76,9 @@ export const getCommonTheme = (mode: Theme) => {
             "& li": {
               borderBottom: "1212121A",
               minHeight: "55px",
-              ":hover": {
-                backgroundColor: "rgba(0, 0, 0, 0.025)",
-              },
+              // ":hover": {
+              //   backgroundColor: "rgba(0, 0, 0, 0.025)",
+              // },
             },
             "& > :last-child": {
               borderBottom: "none",

package/.env

@@ -1 +0,0 @@
-REACT_APP_API_HOST=http://localhost:3000