@campxdev/react-blueprint 1.0.16 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
@@ -10,8 +10,8 @@
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@mui/x-data-grid": "^7.5.1",
-    "@storybook/addon-backgrounds": "^8.1.5",
-    "@storybook/addon-designs": "^8.0.2",
+    "@storybook/addon-backgrounds": "^8.2.6",
+    "@storybook/addon-designs": "^8.0.3",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
@@ -68,21 +68,21 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@chromatic-com/storybook": "^1.5.0",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-interactions": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-mdx-gfm": "^8.1.5",
-    "@storybook/addon-onboarding": "^8.1.5",
-    "@storybook/blocks": "^8.1.5",
-    "@storybook/preset-create-react-app": "^8.1.5",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-webpack5": "^8.1.5",
-    "@storybook/test": "^8.1.5",
+    "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-essentials": "^8.2.6",
+    "@storybook/addon-interactions": "^8.2.6",
+    "@storybook/addon-links": "^8.2.6",
+    "@storybook/addon-mdx-gfm": "^8.2.6",
+    "@storybook/addon-onboarding": "^8.2.6",
+    "@storybook/blocks": "^8.2.6",
+    "@storybook/preset-create-react-app": "^8.2.6",
+    "@storybook/react": "^8.2.6",
+    "@storybook/react-webpack5": "^8.2.6",
+    "@storybook/test": "^8.2.6",
     "@types/js-cookie": "^3.0.5",
     "eslint-plugin-storybook": "^0.8.0",
     "prop-types": "^15.8.1",
-    "storybook": "^8.1.5",
+    "storybook": "^8.2.6",
     "webpack": "^5.91.0"
   }
 }

package/src/components/Feedback/Alert/Alert.tsx

@@ -0,0 +1,28 @@
+import { Alert as MuiAlert, AlertProps as MuiAlertProps } from "@mui/material";
+import { Icons } from "../../export";
+
+export type AlertProps = {
+  message: string;
+  severity: MuiAlertProps["severity"];
+} & MuiAlertProps;
+
+const getIcon = (severity: MuiAlertProps["severity"]) => {
+  switch (severity) {
+    case "success":
+      return <Icons.SuccessFilledIcon size={20} />;
+    case "error":
+      return <Icons.AlertFilledIcon size={20} />;
+    case "info":
+      return <Icons.InfoFilledIcon size={20} />;
+    case "warning":
+      return <Icons.WarningFilledIcon size={20} />;
+  }
+};
+
+export const Alert = ({ severity, message }: AlertProps) => {
+  return (
+    <MuiAlert severity={severity} icon={getIcon(severity)}>
+      {message}
+    </MuiAlert>
+  );
+};

package/src/components/Feedback/exports.ts

@@ -1,3 +1,4 @@
+export * from "./Alert/Alert";
 export * from "./Snackbar/Snackbar";
 export * from "./Spinner/Spinner";
 export * from "./Tooltip/Tooltip";

package/src/components/Navigation/exports.ts

@@ -1,21 +1,8 @@
-import { Breadcrumbs } from "./Breadcrumbs/Breadcrumbs";
-import { CustomDialog } from "./DialogButton/DialogButton";
-import { DropDownButton } from "./DropDownMenu/DropDownButton";
-import { DropDownIcon } from "./DropDownMenu/DropDownIcon";
-import { DropdownMenu } from "./DropDownMenu/DropDownMenu";
-import { DropdownMenuItem } from "./DropDownMenu/DropdownMenuItem";
-import { Sidebar } from "./Sidebar/Sidebar";
-import { Stepper } from "./Stepper/Stepper";
-import { TabsContainer } from "./TabsContainer/TabsContainer";
-
-export {
-  Breadcrumbs,
-  CustomDialog,
-  DropDownButton,
-  DropDownIcon,
-  DropdownMenu,
-  DropdownMenuItem,
-  Sidebar,
-  Stepper,
-  TabsContainer,
-};
+export * from "./DialogButton/DialogButton";
+export * from "./DropDownMenu/DropDownButton";
+export * from "./DropDownMenu/DropDownIcon";
+export * from "./DropDownMenu/DropDownMenu";
+export * from "./DropDownMenu/DropdownMenuItem";
+export * from "./Sidebar/Sidebar";
+export * from "./Stepper/Stepper";
+export * from "./TabsContainer/TabsContainer";

package/src/stories/Feedback/{Alerts.stories.tsx → Alert.stories.tsx}

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-
-import { Alert } from "../../components/Feedback/Alerts/Alerts";
+import { Alert } from "../../components/export";
 
 export default {
   title: "Feedback/Alert",

package/src/stories/Feedback/Snackbar.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-
-import { Snackbar } from "../../components/Feedback/Snackbar/Snackbar";
+import { Snackbar } from "../../components/export";
 
 export default {
   title: "Feedback/Snackbar",

package/src/stories/Feedback/Spinner.stories.tsx

@@ -1,6 +1,6 @@
 // Import React and other necessary elements
 import { Meta } from "@storybook/react";
-import { Spinner } from "../../components/Feedback/Spinner/Spinner";
+import { Spinner } from "../../components/export";
 
 // Make sure your TextField import is correct
 

package/src/stories/Feedback/Tooltip.stories.tsx

@@ -1,11 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react";
-
-import { Icons } from "../../components/Assets/Icons/Icons";
 import {
-  ToolTipContent,
+  Button,
+  Icons,
   Tooltip,
-} from "../../components/Feedback/Tooltip/Tooltip";
-import { Button } from "../../components/Input/Button/Button";
+  ToolTipContent,
+} from "../../components/export";
 
 export default {
   title: "Feedback/Tooltip",

package/src/stories/Feedback/Tutorial.stories.tsx

@@ -1,7 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Tutorial } from "../../components/Feedback/Tutorial/Tutorial";
-import { Typography } from "../../components/DataDisplay/Typography/Typography";
-import { useTheme } from "@mui/material";
+import { Tutorial, Typography } from "../../components/export";
 
 export default {
   title: "Feedback/Tutorial",

package/src/themes/commonTheme.ts

@@ -61,8 +61,21 @@ export const getCommonTheme = (mode: Theme) => {
           root: {
             maxWidth: "400px",
             fontFamily: "Poppins",
-            fontWeight: 600,
-            fontSize: "12px",
+            fontWeight: 500,
+            fontSize: "14px",
+            color: ColorTokens.text.primary,
+          },
+          standardSuccess: {
+            backgroundColor: ColorTokens.highlight.greenBackground,
+          },
+          standardInfo: {
+            backgroundColor: ColorTokens.highlight.blueBackground,
+          },
+          standardWarning: {
+            backgroundColor: ColorTokens.highlight.orangeBackground,
+          },
+          standardError: {
+            backgroundColor: ColorTokens.highlight.redBackground,
           },
         },
       },

package/src/components/Feedback/Alerts/Alerts.tsx

@@ -1,34 +0,0 @@
-import {
-  Alert as MuiAlert,
-  AlertProps as MuiAlertProps,
-  useTheme,
-} from "@mui/material";
-import { Icons } from "../../export";
-
-export type AlertProps = {
-  message: string;
-  severity: MuiAlertProps["severity"];
-} & MuiAlertProps;
-
-const getIcon = (severity: MuiAlertProps["severity"], theme: any) => {
-  switch (severity) {
-    case "success":
-      return <Icons.SuccessFilledIcon />;
-    case "error":
-      return <Icons.AlertFilledIcon />;
-    case "info":
-      return <Icons.InfoFilledIcon />;
-    case "warning":
-      return <Icons.WarningFilledIcon />;
-  }
-};
-
-export const Alert = ({ severity, message }: AlertProps) => {
-  const theme = useTheme();
-
-  return (
-    <MuiAlert severity={severity} icon={getIcon(severity, theme)}>
-      {message}
-    </MuiAlert>
-  );
-};