@campxdev/react-blueprint 0.1.28 → 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.28",
+  "version": "0.1.29",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/App.tsx

@@ -5,12 +5,12 @@ import Providers from "./contexts/Providers";
 function App() {
   return (
     <Providers>
-      {/* <AppHeader clientLogo={""} fullName={""} userBoxActions={[]} /> */}
       <AppHeader
-        appsMenu={<AppsMenu apps={[]} />}
-        clientLogo={""}
-        fullName={""}
-        userBoxActions={[]} navigationIcon={true} showActiveDevices={true}      />
+        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

@@ -1 +1,2 @@
-export * from ".//DataTable/DataTable";
+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/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

@@ -18,7 +18,7 @@ export interface HeaderActionsProps {
   actions?: ReactNode[];
   profileSx?: any;
   avatar?: any;
-  navigationIcon:any;
+  navigationIcon: any;
   showActiveDevices: any;
 }
 
@@ -30,9 +30,9 @@ const HeaderActions = ({
   profileUrl = "",
   actions = [],
   profileSx = {},
-  avatar={},
-  navigationIcon={},
-  showActiveDevices={},
+  avatar = {},
+  navigationIcon = {},
+  showActiveDevices = {},
 }: HeaderActionsProps) => {
   return (
     <Stack direction="row" gap={1} alignItems="center">
@@ -54,18 +54,17 @@ const HeaderActions = ({
 
       {/* Render UserBox */}
       {fullName && (
-  <UserBox
-    fullName={fullName}
-    designation={designation}
-    actions={userBoxActions}
-    profileUrl={profileUrl}
-    profileSx={profileSx}
-    avatar={avatar}
-    navigationIcon={navigationIcon}
-    showActiveDevices={showActiveDevices}
-  />
-)}
-
+        <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,9 +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";
 
 const getStartingLetters = (text: string) => {
   if (!text) return "";
@@ -42,9 +41,9 @@ export default function UserBox({
   return (
     <DropdownMenu
       anchor={({ open }) => (
-        <StyledAvatar src={profileUrl ?? ""} onClick={open} sx={profileSx}>
+        <Avatar src={profileUrl ?? ""} onClick={open} sx={profileSx}>
           {getStartingLetters(fullName)}
-        </StyledAvatar>
+        </Avatar>
       )}
       menuListProps={{
         sx: {
@@ -56,7 +55,7 @@ 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"}
@@ -64,9 +63,9 @@ export default function UserBox({
               >
                 {avatar && (
                   <Stack direction={"row"} gap={1}>
-                    <StyledAvatar src={profileUrl ?? ""} sx={profileSx}>
+                    <Avatar src={profileUrl ?? ""} sx={profileSx}>
                       {getStartingLetters(fullName)}
-                    </StyledAvatar>
+                    </Avatar>
                     <Stack direction={"row"} justifyContent={"space-between"}>
                       <Stack>
                         <Typography variant="subtitle3">{fullName}</Typography>
@@ -100,7 +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,13 +1,10 @@
+export * from "./Assets/export";
 export * from "./DataDisplay/export";
-export * from "./Icons/export";
 export * from "./Input/export";
-export * from "./Layout/Header/AppHeader";
-export * from "./Layout/Header/AppLogo";
-export * from "./Layout/Header/AppsMenu";
+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 {

package/src/{themes → stories/DesignSystem}/colorTokens.stories.tsx

@@ -1,6 +1,6 @@
-// src/stories/ColorPalette.stories.jsx
-import React from "react";
-import { LightColorTokens, DarkColorTokens } from "./colorTokens";
+import { Typography } from "../../components/DataDisplay/Typography/Typography";
+import { DarkColorTokens } from "../../themes/colorTokens/darkColorTokens";
+import { LightColorTokens } from "../../themes/colorTokens/lightColorTokens";
 
 export default {
   title: "Design System/Color Palette",
@@ -17,13 +17,13 @@ const ColorBox = ({ color, name }: { color: string; name: string }) => (
         height: 60,
         backgroundColor: color,
         marginRight: 10,
-        border: "1px solid #ddd", // Slight border to distinguish white or light colors
+        border: "1px solid #ddd",
         borderRadius: 5,
       }}
     />
     <div>
-      <div style={{ fontSize: 16, fontWeight: "bold" }}>{name}</div>
-      <div style={{ fontSize: 12 }}>{color}</div>
+      <Typography variant="subtitle1">{name}</Typography>
+      <Typography variant="caption">{color}</Typography>
     </div>
   </div>
 );
@@ -41,11 +41,7 @@ const PaletteDisplay = ({
       <div key={group}>
         <h4>{group.toUpperCase()}</h4>
         {Object.entries(colorTokens[group]).map(([name, color]) => (
-          <ColorBox
-            key={name}
-            name={`${group} ${name}`}
-            color={color as string}
-          />
+          <ColorBox key={name} name={name} color={color as string} />
         ))}
       </div>
     ))}

package/src/{themes → stories/DesignSystem}/typography.stories.tsx

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

package/src/{components/Feedback/Spinner → stories/Feedback}/Spinner.stories.tsx

@@ -1,10 +1,9 @@
 // Import React and other necessary elements
 import { Meta } from "@storybook/react";
+import { Spinner } from "../../components/Feedback/Spinner/Spinner";
 
 // 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: "Feedback/Spinner",

package/src/{components/Feedback/Tooltip → stories/Feedback}/Tooltip.stories.tsx

@@ -1,7 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { ToolTipContent, Tooltip } from "./Tooltip";
-import { InfoIcon } from "../../Icons/IconComponents/InfoIcon";
-import { Button } from "../../Input/Button/Button";
+
+import { Icons } from "../../components/Assets/Icons/Icons";
+import {
+  ToolTipContent,
+  Tooltip,
+} from "../../components/Feedback/Tooltip/Tooltip";
+import { Button } from "../../components/Input/Button/Button";
 
 export default {
   title: "Feedback/Tooltip",
@@ -19,7 +23,7 @@ export const IconTooltip: StoryObj<typeof Tooltip> = {
     title: (
       <ToolTipContent message="Duis rhoncus dui venenatis consequat porttitor. Etiam aliquet congue consequat. In posuere, nunc sit amet laoreet blandit, urna sapien imperdiet lectusui." />
     ),
-    children: <InfoIcon />,
+    children: <Icons.InfoIcon />,
   },
 };
 

package/src/{components/Input/Button → stories/Input}/Button.stories.tsx

@@ -1,10 +1,9 @@
 // Import React and other necessary elements
 import { Meta } from "@storybook/react";
+import { Button, ButtonProps } from "../../components/Input/Button/Button";
 
 // Make sure your TextField import is correct
 
-import { Button, ButtonProps } from "./Button";
-
 // Define the default export with Meta type including the component type
 export default {
   title: "Input/Button",

package/src/{components/Input/Chips → stories/Input}/Chips.stories.tsx

@@ -1,6 +1,6 @@
 // Import React and other necessary elements
 import { Meta } from "@storybook/react";
-import { Chips } from "./Chips";
+import { Chips } from "../../components/Input/Chips/Chips";
 
 const sampleChips = [
   {

package/src/{components/Input/MultiCheckBox → stories/Input}/MultiCheckBox.stories.tsx

@@ -1,6 +1,9 @@
 import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "react";
-import { MultiCheckBox, MultiCheckboxProps } from "./MultiCheckBox";
+import {
+  MultiCheckBox,
+  MultiCheckboxProps,
+} from "../../components/Input/MultiCheckBox/MultiCheckBox";
 
 export default {
   title: "Input/MultiCheckBox",