@campxdev/react-blueprint 0.1.12 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.12",
+  "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.stories.tsx

@@ -23,7 +23,7 @@ export const Primary: Story = {
   render: (args: LayoutWrapperProps) => <LayoutWrapper {...args} />,
   args: {
     menu: [
-      { name: "Tickets", path: "/", icon: DashBoardIcon },
+      { name: "Tickets", path: "/home", icon: DashBoardIcon },
       { name: "Item 2", path: "/item2" },
     ],
     children: <>hi</>,

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

@@ -1,4 +1,4 @@
-import { Link, ListItemIcon, Stack } from "@mui/material";
+import { ListItemIcon, Stack } from "@mui/material";
 import { useMatch, useResolvedPath } from "react-router-dom";
 import { HomeIcon } from "../../../assets/images/icons";
 import { activeStore } from "../../../store/activeStore";
@@ -6,6 +6,7 @@ import { Typography } from "../../Typography/Typography";
 import {
   Main,
   StyledDrawer,
+  StyledLinkButton,
   StyledList,
   StyledListItem,
   StyledListItemButton,
@@ -67,8 +68,8 @@ const MenuItem = ({ menuItem, index }: MenuItemProps) => {
 
   return (
     <StyledListItem key={path} disablePadding match={match}>
-      <Link
-        href={path}
+      <StyledLinkButton
+        to={path}
         style={{ width: "100%" }}
         onClick={() =>
           activeStore.update((s) => {
@@ -87,7 +88,7 @@ const MenuItem = ({ menuItem, index }: MenuItemProps) => {
           </ListItemIcon>
           <Typography variant="subtitle3">{name}</Typography>
         </StyledListItemButton>
-      </Link>
+      </StyledLinkButton>
     </StyledListItem>
   );
 };

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/.env

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