@campxdev/react-blueprint 1.2.0 → 1.2.1

package/package.json

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

package/src/components/Charts/BarChart/BarChart.tsx

@@ -1,4 +1,4 @@
-import { Stack, SxProps, Typography, useTheme } from '@mui/material';
+import { Stack, SxProps, useTheme } from '@mui/material';
 import {
   Bar,
   CartesianGrid,
@@ -15,12 +15,14 @@ import {
   CartesianGridProps,
   LegendProps,
   MarginProps,
+  TitleProps,
 } from '../types/types';
 import { LayoutType } from 'recharts/types/util/types';
+import { Typography } from '../../export';
 
 export type BarChartProps = {
   title?: string;
-  titleSx?: SxProps;
+  titleProps?: TitleProps;
   width?: number;
   height?: number;
   layout?: LayoutType;
@@ -48,7 +50,7 @@ type BarItem = {
 
 export const BarChart = ({
   title = 'Bar Chart',
-  titleSx,
+  titleProps = { variant: 'subtitle2' },
   width = 700,
   height = 500,
   margin,
@@ -74,7 +76,11 @@ export const BarChart = ({
 
   return (
     <Stack alignItems={'center'} sx={{ ...containerSx }} width={'fit-content'}>
-      <Typography variant={'h5'} align={'center'} sx={{ ...titleSx }}>
+      <Typography
+        variant={titleProps.variant}
+        align={'center'}
+        sx={titleProps.sx}
+      >
         {title}
       </Typography>
       <ReBarChart

package/src/components/Charts/LineChart/LineChart.tsx

@@ -1,4 +1,4 @@
-import { Box, Stack, SxProps, Typography, useTheme } from '@mui/material';
+import { Box, Stack, SxProps, useTheme } from '@mui/material';
 import {
   Bar,
   CartesianGrid,
@@ -15,12 +15,14 @@ import {
   CartesianGridProps,
   LegendProps,
   MarginProps,
+  TitleProps,
 } from '../types/types';
 import { CurveType } from 'recharts/types/shape/Curve';
+import { Typography } from '../../export';
 
 export type LineChartProps = {
   title?: string;
-  titleSx?: SxProps;
+  titleProps?: TitleProps;
   width?: number;
   height?: number;
   dataKey: string;
@@ -44,7 +46,7 @@ type LineItem = {
 
 export const LineChart = ({
   title = 'Line Chart',
-  titleSx,
+  titleProps = { variant: 'subtitle2' },
   width = 700,
   height = 500,
   margin,
@@ -64,7 +66,11 @@ export const LineChart = ({
 
   return (
     <Stack alignItems={'center'} sx={containerSx}>
-      <Typography variant={'h5'} align={'center'} sx={titleSx}>
+      <Typography
+        variant={titleProps.variant}
+        align={'center'}
+        sx={titleProps.sx}
+      >
         {title}
       </Typography>
       <ReLineChart width={width} height={height} margin={margin} data={data}>

package/src/components/Charts/PieChart/PieChart.tsx

@@ -1,10 +1,11 @@
-import { Stack, SxProps, Typography, useTheme } from '@mui/material';
+import { Stack, SxProps, useTheme } from '@mui/material';
 import { Cell, Legend, Pie, PieChart as RePieChart, Tooltip } from 'recharts';
-import { LegendProps, MarginProps } from '../types/types';
+import { LegendProps, MarginProps, TitleProps } from '../types/types';
+import { Typography } from '../../export';
 
 export type PieChartProps = {
   title?: string;
-  titleSx?: SxProps;
+  titleProps?: TitleProps;
   margin?: MarginProps;
   width?: number;
   height?: number;
@@ -30,7 +31,7 @@ type PieProps = {
 
 export const PieChart = ({
   title = 'Pie Chart',
-  titleSx,
+  titleProps = { variant: 'subtitle2' },
   margin,
   width = 500,
   height = 500,
@@ -45,7 +46,11 @@ export const PieChart = ({
 
   return (
     <Stack alignItems="center" sx={{ ...containerSx }}>
-      <Typography variant="h5" align="center" sx={{ ...titleSx }}>
+      <Typography
+        variant={titleProps.variant}
+        align={'center'}
+        sx={titleProps.sx}
+      >
         {title}
       </Typography>
       <RePieChart width={width} height={height} margin={margin}>

package/src/components/Charts/TreeMap/TreeMap.tsx

@@ -1,18 +1,12 @@
-import {
-  Box,
-  Stack,
-  styled,
-  SxProps,
-  Typography,
-  useTheme,
-} from '@mui/material';
+import { Box, Stack, styled, SxProps, useTheme } from '@mui/material';
 import { Treemap as ReTreeMap, Tooltip } from 'recharts';
 import { AnimationTiming } from 'recharts/types/util/types';
-import { MarginProps } from '../types/types';
+import { MarginProps, TitleProps } from '../types/types';
+import { Typography } from '../../export';
 
 interface TreeMapProps {
   title?: string;
-  titleSx?: any;
+  titleProps?: TitleProps;
   data: any;
   dataKey: string | number;
   width?: number;
@@ -31,7 +25,7 @@ interface TreeMapProps {
 
 const TreeMap = ({
   title = 'Tree Map',
-  titleSx,
+  titleProps = { variant: 'subtitle2' },
   data,
   dataKey,
   width = 400,
@@ -48,7 +42,11 @@ const TreeMap = ({
 }: TreeMapProps) => {
   return (
     <Stack alignItems={'center'} sx={{ ...containerSx }}>
-      <Typography variant={'h5'} align={'center'} sx={{ ...titleSx }}>
+      <Typography
+        variant={titleProps.variant}
+        align={'center'}
+        sx={titleProps.sx}
+      >
         {title}
       </Typography>
       <ReTreeMap

package/src/components/Charts/types/types.ts

@@ -1,4 +1,5 @@
-import { SxProps } from '@mui/material';
+import { Variant } from '@mui/material/styles/createTypography';
+
 import {
   HorizontalAlignmentType,
   IconType,
@@ -16,6 +17,11 @@ export type AxisLabelProps = {
   yLabel?: LabelProps;
 };
 
+export type TitleProps = {
+  variant?: Variant;
+  sx?: any;
+};
+
 export type MarginProps = {
   top?: number;
   right?: number;

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

@@ -5,6 +5,7 @@ import {
 } from '@mui/x-data-grid';
 import { DataGridContainer } from '../styles';
 import { TablePagination } from './TablePagination';
+import { v4 } from 'uuid';
 
 export type DataTableProps = {
   limit?: number;
@@ -23,6 +24,7 @@ export const DataTable = (props: DataTableProps) => {
         disableColumnFilter
         disableColumnMenu
         disableColumnSorting
+        getRowId={(row) => row.id ?? v4()}
         {...props}
         slots={{
           pagination: () => {

package/src/components/Navigation/Sidebar/Sidebar.tsx

@@ -13,6 +13,7 @@ import {
   MenuState,
 } from './interfaces';
 import { createSidebarStyles } from './styles';
+import { Box } from '@mui/material';
 
 export const Sidebar = ({
   menu,
@@ -164,9 +165,11 @@ export const Sidebar = ({
         direction="column"
         className="sidebarContainer"
       >
-        <StyledLogoArea collapsed={collapsed}>
-          {collapsed ? <CampxIcon size={32} /> : <CampxFullLogoIcon />}
-        </StyledLogoArea>
+        <Box>
+          <StyledLogoArea collapsed={collapsed}>
+            {collapsed ? <CampxIcon size={32} /> : <CampxFullLogoIcon />}
+          </StyledLogoArea>
+        </Box>
 
         <motion.div
           initial={{ x: menuPosition }}

package/src/components/Navigation/UploadDialog/Styles.tsx

@@ -5,25 +5,27 @@ interface StyledBoxProps {
   dragging: boolean;
 }
 
-export const UploadDialogBox = styled(Box)<StyledBoxProps>(
-  ({ theme, dragging }) => ({
+export const UploadDialogBox = styled(Box)<StyledBoxProps>(({
+  theme,
+  dragging,
+}) => {
+  const strokeColor = dragging
+    ? encodeURIComponent(theme.palette.primary.dark)
+    : encodeURIComponent(theme.palette.primary.main);
+
+  return {
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
     height: '250px',
-    border: '1.5px dashed',
-    borderRadius: '10px',
-    borderColor: dragging
-      ? theme.palette.primary.dark
-      : theme.palette.primary.main,
-    backgroundColor: dragging
-      ? theme.palette.secondary.dark
-      : theme.palette.secondary.light,
+    borderRadius: '7px',
+    backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='7' ry='7' stroke='${strokeColor}' stroke-width='3' stroke-dasharray='4%2c 8' stroke-dashoffset='8' stroke-linecap='round'/%3e%3c/svg%3e")`,
+    backgroundColor: theme.palette.surface.defaultBackground,
     justifyContent: 'center',
     alignItems: 'center',
     transition: 'background-color 0.3s, border-color 0.3s',
-  }),
-);
+  };
+});
 
 export const ImageContainer = React.memo(
   styled('img')<{ size?: number }>(({ size }) => ({

package/src/components/Navigation/UploadDialog/UploadDialogContainer.tsx

@@ -62,7 +62,7 @@ export const UploadDialogContainer = ({
           Import your file
         </Typography>
         <Typography
-          color={theme.palette.primary.light}
+          color={theme.palette.text.tertiary}
           lineHeight="27px"
           variant="body2"
         >

package/src/themes/commonTheme.ts

@@ -309,25 +309,25 @@ export const getCommonTheme = (mode: Theme) => {
       MuiSwitch: {
         styleOverrides: {
           root: {
-            width: 45,
-            height: 26,
+            width: 40,
+            height: 20,
             padding: 0,
             '& .MuiSwitch-switchBase': {
-              padding: 0,
+              padding: 1,
               margin: 2,
               transitionDuration: '500ms',
               '&.Mui-checked': {
-                transform: 'translateX(18px)',
+                transform: 'translateX(20px)',
                 '& + .MuiSwitch-track': {
-                  backgroundColor: ColorTokens.surface.grey,
+                  backgroundColor: ColorTokens.surface.paperBackground,
+                  border: `1px solid ${ColorTokens.highlight.highlightRed}`,
                   opacity: 1,
-                  border: 0,
                 },
                 '& .MuiSwitch-thumb': {
                   boxSizing: 'border-box',
-                  backgroundColor: ColorTokens.primary.main,
-                  width: 22,
-                  height: 22,
+                  backgroundColor: ColorTokens.highlight.highlightRed,
+                  width: 14,
+                  height: 14,
                 },
                 '&.Mui-disabled + .MuiSwitch-track': {
                   opacity: 0.5,
@@ -336,13 +336,16 @@ export const getCommonTheme = (mode: Theme) => {
             },
             '& .MuiSwitch-thumb': {
               boxSizing: 'border-box',
-              backgroundColor: ColorTokens.surface.paperBackground,
-              width: 22,
-              height: 22,
+              boxShadow: 'none',
+              borderRadius: 4,
+              backgroundColor: ColorTokens.surface.grey,
+              width: 14,
+              height: 14,
             },
             '& .MuiSwitch-track': {
-              borderRadius: 13,
-              backgroundColor: ColorTokens.surface.grey,
+              borderRadius: 4,
+              backgroundColor: ColorTokens.surface.paperBackground,
+              border: `1px solid ${ColorTokens.border.primary}`,
               opacity: 1,
             },
             '&.Mui-disabled + .MuiSwitch-track': {