@campxdev/react-blueprint 0.1.27 → 0.1.29

package/.storybook/main.ts

@@ -2,7 +2,6 @@ import type { StorybookConfig } from "@storybook/react-webpack5";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-
   addons: [
     "@storybook/preset-create-react-app",
     "@storybook/addon-onboarding",

package/.storybook/preview.tsx

@@ -4,7 +4,9 @@ import React from "react";
 import { BrowserRouter } from "react-router-dom";
 import { useDarkMode } from "storybook-dark-mode";
 import { MuiThemeProvider } from "../src/themes/MuiThemeProvider";
-import { DarkColorTokens, LightColorTokens } from "../src/themes/colorTokens";
+
+import { DarkColorTokens } from "../src/themes/colorTokens/darkColorTokens";
+import { LightColorTokens } from "../src/themes/colorTokens/lightColorTokens";
 import { darkTheme } from "../src/themes/darkTheme";
 import { lightTheme } from "../src/themes/lightTheme";
 
@@ -19,10 +21,13 @@ const preview: Preview = {
     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 },
+        { name: "light", value: LightColorTokens.surface.defaultBackground },
+        {
+          name: "light paper",
+          value: LightColorTokens.surface.paperBackground,
+        },
+        { name: "dark", value: DarkColorTokens.surface.defaultBackground },
+        { name: "dark paper", value: DarkColorTokens.surface.paperBackground },
       ],
     },
   },

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["autodocs"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/App.tsx

@@ -5,12 +5,11 @@ import Providers from "./contexts/Providers";
 function App() {
   return (
     <Providers>
-      {/* <AppHeader clientLogo={""} fullName={""} userBoxActions={[]} /> */}
       <AppHeader
-        appsMenu={<AppsMenu apps={[]} />}
-        clientLogo={""}
-        fullName={""}
-        userBoxActions={[]}
+        clientName="Anurag University"
+        actions={[<p>asdjflsf</p>]}
+        appsMenu={<AppsMenu apps={["exams", "square", "admin"]} />}
+        userFullName="Srikanth Yellapragada"
       />
     </Providers>
   );

package/src/components/Assets/Icons/IconComponents/AdministratorIcon.tsx

@@ -0,0 +1,26 @@
+import { useTheme } from "@mui/material";
+
+export const AdministratorIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <>
+      <svg
+        width="30"
+        height="30"
+        viewBox="0 0 30 30"
+        style={{ fill: color }}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.0008 28.2871C14.1809 28.3018 13.3712 28.1037 12.6508 27.7121L5.77578 23.7501C2.97578 21.8621 2.80078 21.5751 2.80078 18.6121V11.3871C2.80078 8.42409 2.96378 8.13709 5.71378 6.27509L12.6388 2.27509C13.363 1.89929 14.1669 1.70313 14.9828 1.70312C15.7987 1.70312 16.6026 1.89929 17.3268 2.27509L24.2268 6.25009C27.0268 8.13809 27.2018 8.42509 27.2018 11.3871V18.6031C27.2018 21.5651 27.0398 21.8531 24.2888 23.7161L17.3638 27.7161C16.6378 28.105 15.8243 28.3016 15.0008 28.2871ZM15.0008 3.58709C14.5152 3.57053 14.0334 3.6779 13.6008 3.89909L6.72578 7.87509C4.68878 9.25009 4.68778 9.25009 4.68778 11.3871V18.6031C4.68778 20.7411 4.68778 20.7411 6.77478 22.1531L13.6008 26.0871C14.0399 26.297 14.5205 26.406 15.0073 26.406C15.494 26.406 15.9746 26.297 16.4138 26.0871L23.2888 22.1121C25.3138 20.7371 25.3138 20.7371 25.3138 18.5991V11.3871C25.3138 9.24909 25.3138 9.25009 23.2268 7.83709L16.4008 3.90309C15.9685 3.68052 15.4867 3.57176 15.0008 3.58709Z"
+          fill="#121212"
+        />
+        <path
+          d="M15.0015 19.6875C14.0742 19.6877 13.1677 19.4129 12.3966 18.8979C11.6255 18.3828 11.0245 17.6507 10.6695 16.794C10.3146 15.9373 10.2217 14.9947 10.4025 14.0852C10.5834 13.1757 11.0299 12.3403 11.6856 11.6846C12.3413 11.0289 13.1767 10.5824 14.0862 10.4016C14.9956 10.2207 15.9383 10.3136 16.795 10.6686C17.6516 11.0235 18.3838 11.6245 18.8988 12.3956C19.4139 13.1667 19.6887 14.0732 19.6885 15.0005C19.688 16.2434 19.194 17.4353 18.3151 18.3141C17.4363 19.193 16.2444 19.687 15.0015 19.6875ZM15.0015 12.1875C14.4451 12.1873 13.9011 12.3521 13.4384 12.6611C12.9757 12.9701 12.615 13.4094 12.4019 13.9233C12.1889 14.4373 12.133 15.003 12.2414 15.5487C12.3499 16.0944 12.6177 16.5958 13.0111 16.9893C13.4044 17.3828 13.9056 17.6508 14.4513 17.7594C14.997 17.868 15.5627 17.8124 16.0768 17.5995C16.5908 17.3866 17.0302 17.0261 17.3394 16.5634C17.6485 16.1008 17.8135 15.5569 17.8135 15.0005C17.8124 14.255 17.5159 13.5402 16.9888 13.013C16.4617 12.4857 15.7471 12.1888 15.0015 12.1875Z"
+          fill="#121212"
+        />
+      </svg>
+    </>
+  );
+};

package/src/components/Assets/Icons/IconComponents/CampxIcon.tsx

@@ -0,0 +1,25 @@
+import { useTheme } from "@mui/material";
+
+export const CampxIcon = () => {
+  const theme = useTheme();
+
+  const color = theme.palette.mode === "dark" ? "white" : "blue";
+  console.log(color);
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 5 101.234 104.906"
+      style={{
+        fill: color,
+      }}
+    >
+      <path
+        id="Subtraction_130"
+        data-name="Subtraction 130"
+        d="M100.772,104.906H76.085L61.518,84.856l12.7-17.476,27.02,37.19-.463.336Zm-75.622,0H.463L0,104.57,37.92,52.377,0,.185.254,0H25.26L50.617,34.9l.005-.007,12.7,17.475-.005.007.018.024-12.7,17.476-.017-.024L25.15,104.906ZM74.112,37.516h0L61.415,20.04,75.975,0H100.98l.254.185L74.112,37.516Z"
+      />
+    </svg>
+  );
+};

package/src/components/{Icons/export.ts → Assets/Icons/Icons.tsx}

@@ -14,6 +14,7 @@ import { HomeIcon } from "./IconComponents/HomeIcon";
 import { InfoIcon } from "./IconComponents/InfoIcon";
 
 import { BulbIcon } from "./IconComponents/BulbIcon";
+import { CampxIcon } from "./IconComponents/CampxIcon";
 import { CrossIcon } from "./IconComponents/CrossIcon";
 import { InstitutionsIcon } from "./IconComponents/InstitutionsIcon";
 import { LeftIcon } from "./IconComponents/LeftIcon";
@@ -27,6 +28,7 @@ import { RightIcon } from "./IconComponents/RightIcon";
 import { TicketsIcon } from "./IconComponents/TicketsIcon";
 import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
 import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
+import { AdministratorIcon } from "./IconComponents/AdministratorIcon";
 export const Icons = {
   AppsIcon,
   CareerIcon,
@@ -56,4 +58,6 @@ export const Icons = {
   DeviceIcon,
   CrossIcon,
   ProductFeaturesIcon,
+  CampxIcon,
+  AdministratorIcon,
 };

package/src/components/Assets/export.ts

@@ -0,0 +1 @@
+export * from "./Icons/Icons";

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

@@ -4,7 +4,9 @@ import {
   Stack,
 } from "@mui/material";
 import { DropdownMenuItem } from "../../Navigation/DropDownMenu/DropdownMenuItem";
-import { DropDownButton, DropdownMenu } from "../../export";
+
+import { DropDownButton } from "../../Navigation/DropDownMenu/DropDownButton";
+import { DropdownMenu } from "../../Navigation/DropDownMenu/DropDownMenu";
 import { Typography } from "../Typography/Typography";
 
 export type PaginationProps = {

package/src/components/DataDisplay/export.ts

@@ -0,0 +1,2 @@
+export * from "./Avatar/Avatar";
+export * from "./DataTable/DataTable";

package/src/components/Feedback/Tooltip/Tooltip.tsx

@@ -1,14 +1,12 @@
 import {
-  Stack,
+  IconButton,
   Tooltip as MuiTooltip,
   TooltipProps as MuiTooltipProps,
-  IconButton,
-  Button,
+  Stack,
 } from "@mui/material";
-import { BulbIcon } from "../../Icons/IconComponents/BulbIcon";
+import { Children, ReactElement } from "react";
+import { BulbIcon } from "../../Assets/Icons/IconComponents/BulbIcon";
 import { Typography } from "../../DataDisplay/Typography/Typography";
-import { InfoIcon } from "../../Icons/IconComponents/InfoIcon";
-import { Children, ReactElement, useState } from "react";
 
 export type TooltipProps = {
   children: ReactElement | string;

package/src/components/Input/LabelWrapper/LabelWrapper.tsx

@@ -21,7 +21,7 @@ export const LabelWrapper = ({
         <Typography htmlFor={name} component="label" variant="label1">
           {label}
           {required && (
-            <span style={{ color: `${theme.palette.highlight.main}` }}>
+            <span style={{ color: `${theme.palette.tertiary.main}` }}>
               {" *"}
             </span>
           )}

package/src/components/Input/SingleCheckBox/SIngleCheckBox.tsx

@@ -35,7 +35,7 @@ export const SingleCheckBox = ({
         <Typography variant="body2">
           {label}
           {required && (
-            <span style={{ color: `${theme.palette.highlight.main}` }}>
+            <span style={{ color: `${theme.palette.tertiary.main}` }}>
               {" *"}
             </span>
           )}

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

@@ -246,7 +246,6 @@ export const SingleSelect = ({
   };
 
   useEffect(() => {
-    console.log("useEffect");
     if (value && optionsApiEndPoint) {
       fetchInitialOptions().finally(() => {
         dispatch({

package/src/components/Input/export.ts

@@ -0,0 +1,5 @@
+export * from "./Button/Button";
+export * from "./SearchBar/SearchBar";
+export * from "./SingleSelect/SingleSelect";
+export * from "./Switch/Switch";
+export * from "./TextField/TextField";

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

@@ -0,0 +1,55 @@
+import { Box, Divider, IconButton, Stack } from "@mui/material";
+import { ReactNode } from "react";
+import { StyledHeader } from "./styles/styles";
+import { CampxIcon } from "../../Assets/Icons/IconComponents/CampxIcon";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+import UserBox from "./AppHeaderActions/UserBox";
+import { HelpIcon } from "../../Assets/Icons/IconComponents/HelpIcon";
+import { AdministratorIcon } from "../../Assets/Icons/IconComponents/AdministratorIcon";
+import { TicketsIcon } from "../../Assets/Icons/IconComponents/TicketsIcon";
+import { StyledIconButton } from "../../Navigation/DropDownMenu/styles";
+
+export interface AppHeaderProps {
+  actions?: ReactNode[];
+  appsMenu?: ReactNode;
+  clientLogoUrl?: string;
+  clientName: string;
+  userFullName: string;
+}
+
+export const AppHeader = ({
+  actions = [],
+  appsMenu,
+  clientLogoUrl,
+  clientName,
+  userFullName,
+}: AppHeaderProps) => {
+  return (
+    <StyledHeader>
+      <Stack
+        flexDirection={"row"}
+        alignItems={"center"}
+        gap={"20px"}
+        divider={<Divider orientation="vertical" flexItem />}
+      >
+        {appsMenu && (
+          <Stack alignItems={"center"} gap={"12px"} flexDirection={"row"}>
+            {appsMenu}
+          </Stack>
+        )}
+        <CampxIcon />
+        <Typography variant={"subtitle2"}>{clientName}</Typography>
+      </Stack>
+      <Stack alignItems={"center"} gap={"12px"} flexDirection={"row"}>
+        <StyledIconButton
+          onClick={() => {
+            alert("help button clicked");
+          }}
+        >
+          <HelpIcon />
+        </StyledIconButton>
+        <UserBox fullName={userFullName} actions={[]} />
+      </Stack>
+    </StyledHeader>
+  );
+};

package/src/components/Layout/{Header/HeaderActions → AppHeader/AppHeaderActions}/HeaderActions.tsx

@@ -1,3 +1,5 @@
+// HeaderActions.tsx
+
 import { Divider, Stack } from "@mui/material";
 import { ReactNode } from "react";
 import CogWheelMenu from "./CogWheelMenu";
@@ -5,26 +7,32 @@ import UserBox from "./UserBox";
 
 export interface HeaderActionsProps {
   cogWheelMenu: ReactNode[];
-  fullName: string;
+  fullName?: string;
   designation?: string;
-  userBoxActions: {
+  userBoxActions?: {
     label: ReactNode;
     icon?: ReactNode;
     onClick: any;
   }[];
-  profileUrl: string | undefined;
+  profileUrl?: string;
   actions?: ReactNode[];
-  profileSx?: any; // Making HelpButton prop optional
+  profileSx?: any;
+  avatar?: any;
+  navigationIcon: any;
+  showActiveDevices: any;
 }
 
 const HeaderActions = ({
   cogWheelMenu,
   fullName,
   designation,
-  userBoxActions,
+  userBoxActions = [],
   profileUrl = "",
   actions = [],
   profileSx = {},
+  avatar = {},
+  navigationIcon = {},
+  showActiveDevices = {},
 }: HeaderActionsProps) => {
   return (
     <Stack direction="row" gap={1} alignItems="center">
@@ -45,13 +53,18 @@ const HeaderActions = ({
       {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
 
       {/* Render UserBox */}
-      <UserBox
-        fullName={fullName}
-        designation={designation}
-        actions={userBoxActions}
-        profileUrl={profileUrl}
-        profileSx={profileSx}
-      />
+      {fullName && (
+        <UserBox
+          fullName={fullName}
+          designation={designation}
+          actions={userBoxActions}
+          profileUrl={profileUrl}
+          profileSx={profileSx}
+          avatar={avatar}
+          navigationIcon={navigationIcon}
+          showActiveDevices={showActiveDevices}
+        />
+      )}
     </Stack>
   );
 };

package/src/components/Layout/{Header/HeaderActions → AppHeader/AppHeaderActions}/UserBox.tsx

@@ -1,23 +1,8 @@
-import { Stack, Typography, useTheme } from "@mui/material";
+import { Avatar, Stack, Typography, useTheme } from "@mui/material";
 import { ReactNode } from "react";
 import { DropdownMenu } from "../../../Navigation/DropDownMenu/DropDownMenu";
 import { DropdownMenuItem } from "../../../Navigation/DropDownMenu/DropdownMenuItem";
 import { Icons } from "../../../export";
-import { StyledAvatar, StyledTypography } from "../styles/styles";
-// import {
-//   activeDevices,
-//   changePassword,
-//   logoutIcon,
-//   profile,
-// } from '../../../../assets/images'
-
-// import logout from '../../../../utils/logout'
-// import ActiveDevices from '../../../ActiveDevices'
-// import ChangePassword from '../../../ChangePassword'
-// import DropDownButton from '../../../DropDownButton/DropDownButton'
-// import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
-// import MyProfile from '../../../MyProfile/MyProfile'
-// import { StyledAvatar } from '../styles'
 
 const getStartingLetters = (text: string) => {
   if (!text) return "";
@@ -33,6 +18,9 @@ export default function UserBox({
   actions,
   profileUrl,
   profileSx = {},
+  avatar = true, // Make avatar optional, default to true
+  navigationIcon = true, // Make navigationIcon optional, default to true
+  showActiveDevices = true, // Make active devices optional, default to true
 }: {
   fullName: string;
   designation?: string;
@@ -44,15 +32,18 @@ export default function UserBox({
 
   profileUrl?: string;
   profileSx?: any;
+  avatar?: boolean; // Define avatar as optional
+  navigationIcon?: boolean; // Define navigationIcon as optional
+  showActiveDevices?: boolean; // Define active devices as optional
 }) {
   const theme = useTheme();
 
   return (
     <DropdownMenu
       anchor={({ open }) => (
-        <StyledAvatar src={profileUrl ?? ""} onClick={open} sx={profileSx}>
+        <Avatar src={profileUrl ?? ""} onClick={open} sx={profileSx}>
           {getStartingLetters(fullName)}
-        </StyledAvatar>
+        </Avatar>
       )}
       menuListProps={{
         sx: {
@@ -64,37 +55,41 @@ export default function UserBox({
         <DropdownMenuItem
           label={
             <Stack gap={0.5} sx={{ width: "100%" }}>
-              <StyledTypography variant="subtitle3">Account</StyledTypography>
+              <Typography variant="subtitle3">Account</Typography>
               <Stack
                 direction={"row"}
                 alignItems={"center"}
                 justifyContent={"space-between"}
               >
-                <Stack direction={"row"} gap={1}>
-                  <StyledAvatar src={profileUrl ?? ""} sx={profileSx}>
-                    {getStartingLetters(fullName)}
-                  </StyledAvatar>
-                  <Stack direction={"row"} justifyContent={"space-between"}>
-                    <Stack>
-                      <Typography variant="subtitle3">{fullName}</Typography>
-                      <Typography variant="caption">{designation}</Typography>
+                {avatar && (
+                  <Stack direction={"row"} gap={1}>
+                    <Avatar src={profileUrl ?? ""} sx={profileSx}>
+                      {getStartingLetters(fullName)}
+                    </Avatar>
+                    <Stack direction={"row"} justifyContent={"space-between"}>
+                      <Stack>
+                        <Typography variant="subtitle3">{fullName}</Typography>
+                        <Typography variant="caption">{designation}</Typography>
+                      </Stack>
                     </Stack>
                   </Stack>
-                </Stack>
-                <Icons.NavigationIcon />
+                )}
+                {navigationIcon && <Icons.NavigationIcon />}
               </Stack>
             </Stack>
           }
           onClick={() => alert("Action 1 clicked")}
         />,
-        <DropdownMenuItem
-          label={
-            <Stack gap={0.5}>
-              <Typography variant="subtitle3">Active Devices</Typography>
-            </Stack>
-          }
-          onClick={() => alert("Action 1 clicked")}
-        />,
+        showActiveDevices && (
+          <DropdownMenuItem
+            label={
+              <Stack gap={0.5}>
+                <Typography variant="subtitle3">Active Devices</Typography>
+              </Stack>
+            }
+            onClick={() => alert("Action 1 clicked")}
+          />
+        ),
         <DropdownMenuItem
           label={
             <Stack
@@ -104,8 +99,7 @@ export default function UserBox({
               width={"100%"}
             >
               <Typography variant="subtitle3">Logout</Typography>
-
-              <Icons.LogoutIcon hoverColor={theme.palette.highlight.main} />
+              <Icons.LogoutIcon hoverColor={theme.palette.tertiary.main} />
             </Stack>
           }
           onClick={() => alert("Action 1 clicked")}

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

@@ -0,0 +1,37 @@
+import { Box, styled } from "@mui/material";
+import { Link } from "react-router-dom";
+
+export const StyledHeader = styled("header")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  width: "100%",
+  position: "fixed",
+  top: 0,
+  height: "60px",
+  backgroundColor: theme.palette.background.paper,
+  justifyContent: "space-between",
+  padding: "0 32px",
+}));
+
+export const StyledActionBox = styled(Box)(({ theme }) => ({
+  marginRight: "20px",
+  display: "flex",
+  alignItems: "center",
+  gap: "14px",
+}));
+
+export const StyledRouterLink = styled(Link)(() => ({
+  textDecoration: "none",
+}));
+
+export const StyledImageWrapper = styled(Box)(() => ({
+  width: "auto",
+  height: "22px",
+  display: "flex",
+  img: {
+    width: "100%",
+    height: "25px",
+    objectFit: "contain",
+  },
+}));

package/src/components/Navigation/exports.ts

@@ -0,0 +1,15 @@
+import { CustomDialog } from "./DialogButton/DialogButton";
+import { DropDownButton } from "./DropDownMenu/DropDownButton";
+import { DropdownMenu } from "./DropDownMenu/DropDownMenu";
+import { DropDownIcon } from "./DropDownMenu/DropDownIcon";
+import { DropdownMenuItem } from "./DropDownMenu/DropdownMenuItem";
+import { TabsContainer } from "./TabsContainer/TabsContainer";
+
+export {
+  CustomDialog,
+  DropDownButton,
+  DropdownMenu,
+  DropDownIcon,
+  DropdownMenuItem,
+  TabsContainer,
+};

package/src/components/export.ts

@@ -1,16 +1,10 @@
-export * from "./DataDisplay/DataTable/DataTable";
-export * from "./Icons/export";
-export * from "./Input/Button/Button";
-export * from "./Input/SingleSelect/SingleSelect";
-export * from "./Input/Switch/Switch";
-export * from "./Input/TextField/TextField";
-export * from "./Layout/Header/AppHeader";
-export * from "./Layout/Header/AppLogo";
-export * from "./Layout/Header/AppsMenu";
+export * from "./Assets/export";
+export * from "./DataDisplay/export";
+export * from "./Input/export";
+export * from "./Layout/AppHeader/AppHeader";
+
+export * from "./Layout/AppHeader/AppsMenu";
 export * from "./Layout/LayoutWrapper/LayoutWrapper";
 export * from "./Layout/PageContent/PageContent";
 export * from "./Layout/SideNavigation/SideNavigation";
-export * from "./Navigation/DropDownMenu/DropDownButton";
-export * from "./Navigation/DropDownMenu/DropDownIcon";
-export * from "./Navigation/DropDownMenu/DropDownMenu";
-export * from "./Navigation/DropDownMenu/DropdownMenuItem";
+export * from "./Navigation/exports";

package/src/{components/Icons → stories/Assets}/Icons.stories.tsx

@@ -1,7 +1,17 @@
 // Import React and other necessary elements
+import { Stack } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react/*";
+import { Icons } from "../../components/Assets/Icons/Icons";
 
-import IconsStory from "./Icons";
+const IconsStory = () => {
+  return (
+    <Stack gap={2} direction={"row"}>
+      {Object.values(Icons).map((Icon) => (
+        <Icon />
+      ))}
+    </Stack>
+  );
+};
 
 export default {
   title: "Assets/Icons",

package/src/{components/DataDisplay/Avatar → stories/DataDisplay}/CircularAvatar.stories.tsx

@@ -1,7 +1,10 @@
 // Import React and other necessary elements
 
 import { Meta } from "@storybook/react";
-import { CircularAvatar, CircularAvatarProps } from "./Avatar";
+import {
+  CircularAvatar,
+  CircularAvatarProps,
+} from "../../components/DataDisplay/Avatar/Avatar";
 
 // Define the default export with Meta type including the component type
 export default {

package/src/{components/DataDisplay/DataTable → stories/DataDisplay}/DataTable.stories.tsx

@@ -1,6 +1,7 @@
 import { GridColDef, GridColumnGroupingModel } from "@mui/x-data-grid";
 import { Meta, StoryObj } from "@storybook/react";
-import { DataTable } from "./DataTable"; // Make sure the path to your component is correct
+import { DataTable } from "../../components/DataDisplay/DataTable/DataTable";
+// Make sure the path to your component is correct
 
 const columns: GridColDef[] = [
   { field: "id", headerName: "ID", flex: 1 },

package/src/{components/DataDisplay/SidePanel → stories/DataDisplay}/SidePanel.stories.tsx

@@ -1,5 +1,8 @@
 import { Meta } from "@storybook/react/*";
-import { SidePanel, SidePanelProps } from "./SidePanel";
+import {
+  SidePanel,
+  SidePanelProps,
+} from "../../components/DataDisplay/SidePanel/SidePanel";
 
 export default {
   title: "DataDisplay/SidePanel",

package/src/{components/DataDisplay/Avatar → stories/DataDisplay}/SquareAvatar.stories.tsx

@@ -1,7 +1,10 @@
 // Import React and other necessary elements
 
 import { Meta } from "@storybook/react";
-import { SquareAvatar, SquareAvatarProps } from "./Avatar";
+import {
+  SquareAvatar,
+  SquareAvatarProps,
+} from "../../components/DataDisplay/Avatar/Avatar";
 
 // Define the default export with Meta type including the component type
 export default {