@campxdev/react-blueprint 0.1.12 → 0.1.14

package/.storybook/main.ts

@@ -10,7 +10,8 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
-    "@storybook/addon-mdx-gfm"
+    "@storybook/addon-mdx-gfm",
+    "storybook-dark-mode",
   ],
 
   framework: {
@@ -23,7 +24,7 @@ const config: StorybookConfig = {
   staticDirs: ["../public"],
 
   typescript: {
-    reactDocgen: "react-docgen-typescript"
-  }
+    reactDocgen: "react-docgen-typescript",
+  },
 };
 export default config;

package/.storybook/preview.tsx

@@ -1,17 +1,12 @@
 import { CssBaseline } from "@mui/material";
 import type { Preview } from "@storybook/react";
 import React from "react";
+import { MuiThemeProvider } from "../src/themes/MuiThemeProvider";
+import { useDarkMode } from "storybook-dark-mode";
+import { darkTheme } from "../src/themes/darkTheme";
+import { lightTheme } from "../src/themes/lightTheme";
+import { DarkColorTokens, LightColorTokens } from "../src/themes/colorTokens";
 import { BrowserRouter } from "react-router-dom";
-import { ComponentBackground } from "../src/components/Layout/ComponentBackground/ComponentBackground";
-
-const withThemeProvider = (Story) => (
-  <ComponentBackground>
-    <BrowserRouter>
-      <Story />
-    </BrowserRouter>
-    <CssBaseline />
-  </ComponentBackground>
-);
 
 const preview: Preview = {
   parameters: {
@@ -21,10 +16,32 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    backgrounds: {
+      default: "light", // name of the default background to use
+      values: [
+        { name: "light", value: LightColorTokens.background.default },
+        { name: "light paper", value: LightColorTokens.background.paper },
+        { name: "dark", value: DarkColorTokens.background.default },
+        { name: "dark paper", value: DarkColorTokens.background.paper },
+      ],
+    },
   },
-
-  decorators: [withThemeProvider],
-  tags: ["autodocs"]
+  decorators: [
+    (Story) => {
+      const isDarkMode = useDarkMode();
+      console.log(isDarkMode);
+      const theme = isDarkMode ? darkTheme : lightTheme;
+      return (
+        <BrowserRouter>
+          <MuiThemeProvider theme={theme}>
+            <CssBaseline />
+            <Story />
+          </MuiThemeProvider>
+        </BrowserRouter>
+      );
+    },
+  ],
+  tags: ["autodocs"],
 };
 
 export default preview;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
@@ -8,12 +8,13 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.14.11",
     "@mui/material": "^5.14.11",
+    "@mui/x-data-grid": "^7.5.1",
+    "@storybook/addon-backgrounds": "^8.1.4",
     "@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,8 +22,10 @@
     "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",
+    "storybook-dark-mode": "^4.0.1",
     "typescript": "^5.3.3",
     "web-vitals": "^2.1.0"
   },
@@ -55,7 +58,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 +69,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,63 @@
+import { GridColDef } from "@mui/x-data-grid";
+import { Meta, StoryObj } from "@storybook/react";
+import { DataTable } from "./DataTable"; // Make sure the path to your component is correct
+
+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,
+  argTypes: {
+    totalCount: {
+      control: "number",
+      description: "Total Number of rows",
+    },
+    limit: {
+      control: "number",
+      description: "Total Number of rows",
+    },
+    offset: {
+      control: "number",
+      description: "Total Number of rows",
+    },
+  },
+};
+
+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,27 @@
+import { Pagination } from "@mui/material";
+import {
+  DataGrid as MuiDataGrid,
+  DataGridProps as MuiDataGridProps,
+} from "@mui/x-data-grid";
+import { DataGridContainer } from "../styles";
+
+export type DataTableProps = {
+  limit: number;
+  offset: number;
+  totalCount: number;
+} & MuiDataGridProps;
+
+export const DataTable = (props: DataTableProps) => {
+  const pages = Math.ceil(props.totalCount / props.limit);
+  const currentPage = Math.ceil(props.offset / props.limit);
+  return (
+    <DataGridContainer>
+      <MuiDataGrid
+        {...props}
+        slots={{
+          pagination: () => <Pagination count={pages} page={currentPage} />,
+        }}
+      />
+    </DataGridContainer>
+  );
+};

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

@@ -0,0 +1,22 @@
+import {
+  Pagination as MuiPagination,
+  PaginationProps as MuiPaginationProps,
+  Stack,
+} from "@mui/material";
+import { Typography } from "../../Typography/Typography";
+
+export type PaginationProps = {
+  pageStart: number;
+  pageEnd: number;
+  totalCount: number;
+} & MuiPaginationProps;
+
+export const TablePagination = (props: PaginationProps) => {
+  const { pageStart, pageEnd, totalCount } = props;
+  return (
+    <Stack direction="row">
+      <Typography variant="caption">{`${pageStart} - ${pageEnd} of ${totalCount}`}</Typography>
+      <MuiPagination {...props} variant="outlined" shape="rounded" />
+    </Stack>
+  );
+};

package/src/components/DataDisplay/styles.tsx

@@ -0,0 +1,5 @@
+import { Box, styled } from "@mui/material";
+
+export const DataGridContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+}));

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

@@ -1,11 +1,21 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { DashBoardIcon } from "../../../assets/images/icons";
 import { LayoutWrapper, LayoutWrapperProps } from "./LayoutWrapper";
+import DialogButton from "../../Modals/DialogButton";
+import { Button } from "@mui/material";
+
+const LayoutWrapperStory = (props: LayoutWrapperProps) => {
+  return (
+    <div style={{ minHeight: "300px" }}>
+      <LayoutWrapper {...props} />
+    </div>
+  );
+};
 
 // Define the default export with Meta type including the component type
-const meta: Meta<typeof LayoutWrapper> = {
+const meta: Meta<typeof LayoutWrapperStory> = {
   title: "Layout/LayoutWrapper",
-  component: LayoutWrapper,
+  component: LayoutWrapperStory,
   tags: ["autodocs"],
   // argTypes: {
   //   menu: {
@@ -16,16 +26,49 @@ const meta: Meta<typeof LayoutWrapper> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof LayoutWrapper>;
+type Story = StoryObj<typeof LayoutWrapperStory>;
 
 // Primary story
 export const Primary: Story = {
-  render: (args: LayoutWrapperProps) => <LayoutWrapper {...args} />,
+  render: (args: LayoutWrapperProps) => <LayoutWrapperStory {...args} />,
+  args: {
+    menu: [
+      { name: "Tickets", path: "/home", icon: DashBoardIcon },
+      { name: "Item 2", path: "/item2" },
+    ],
+    children: <>hi</>,
+    actionButtons: [
+      <DialogButton
+        anchor={({ open }) => (
+          <Button variant="contained" onClick={open}>
+            Create
+          </Button>
+        )}
+        content={({ close }) => <Button onClick={close}>Click Me</Button>}
+        title="Dialog Title"
+      />,
+    ],
+  },
+};
+
+export const WithActionButtons: Story = {
+  render: (args: LayoutWrapperProps) => <LayoutWrapperStory {...args} />,
   args: {
     menu: [
-      { name: "Tickets", path: "/", icon: DashBoardIcon },
+      { name: "Tickets", path: "/home", icon: DashBoardIcon },
       { name: "Item 2", path: "/item2" },
     ],
     children: <>hi</>,
+    actionButtons: [
+      <DialogButton
+        anchor={({ open }) => (
+          <Button variant="contained" onClick={open}>
+            Click Me
+          </Button>
+        )}
+        content={({ close }) => <Button onClick={close}>Click Me</Button>}
+        title="Dialog Title"
+      />,
+    ],
   },
 };

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

@@ -1,4 +1,4 @@
-import { IconButton, Toolbar, Typography } from "@mui/material";
+import { Box, IconButton, Stack, Toolbar, Typography } from "@mui/material";
 
 import MenuIcon from "@mui/icons-material/Menu";
 import { useState } from "react";
@@ -12,6 +12,7 @@ import {
 
 export interface LayoutWrapperProps {
   title?: string;
+  actionButtons?: React.ReactNode[];
   children: React.ReactNode;
   showIcon?: boolean;
   menu?: any;
@@ -21,6 +22,7 @@ export const LayoutWrapper = ({
   title,
   showIcon = true,
   menu,
+  actionButtons,
 }: LayoutWrapperProps) => {
   const [open, setOpen] = useState<boolean>(
     window.innerWidth > 1024 ? true : false
@@ -36,29 +38,46 @@ export const LayoutWrapper = ({
   return (
     <StyledLayoutContainer>
       <StyledMainContainer>
-        <Toolbar sx={{ paddingLeft: "0px !important" }}>
+        <Toolbar
+          sx={{
+            padding: "0px !important",
+          }}
+        >
           {showIcon && (
-            <IconButton
-              color="inherit"
-              aria-label="open drawer"
-              onClick={handleDrawer}
-              edge="start"
-              sx={{ mr: 0.5, padding: "6px", marginLeft: "0px" }}
-              onMouseEnter={() => setIsHovered(true)}
-              onMouseLeave={() => setIsHovered(false)}
-            >
-              {open && isHovered ? (
-                <LeftIcon />
-              ) : !open && isHovered ? (
-                <RightIcon />
-              ) : (
-                <MenuIcon />
-              )}
-            </IconButton>
+            <>
+              <Stack
+                direction={"row"}
+                width={"100%"}
+                justifyContent={"space-between"}
+              >
+                <Stack direction={"row"}>
+                  <IconButton
+                    color="inherit"
+                    aria-label="open drawer"
+                    onClick={handleDrawer}
+                    edge="start"
+                    sx={{ mr: 0.5, padding: "6px", marginLeft: "0px" }}
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                  >
+                    {open && isHovered ? (
+                      <LeftIcon />
+                    ) : !open && isHovered ? (
+                      <RightIcon />
+                    ) : (
+                      <MenuIcon />
+                    )}
+                  </IconButton>
+                  <Typography variant="subtitle1" noWrap>
+                    {title ? title : menu[active].name}
+                  </Typography>
+                </Stack>
+                <Stack direction={"row"} alignItems={"flex-end"}>
+                  {actionButtons?.map((element) => element)}
+                </Stack>
+              </Stack>
+            </>
           )}
-          <Typography variant="subtitle1" noWrap>
-            {title ? title : menu[active].name}
-          </Typography>
         </Toolbar>
 
         <SideNavigation

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