@campxdev/react-blueprint 1.2.1 → 1.2.2

package/package.json

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

package/src/components/DataDisplay/Card/Card.tsx

@@ -31,12 +31,10 @@ export interface CardProps {
     endIcon?: ReactNode;
     buttonProps?: any;
   };
-  fields?: [
-    {
-      title: string;
-      value: string;
-    },
-  ];
+  fields?: {
+    title: string;
+    value: string;
+  }[];
   titleProps?: {
     variant: Variant;
     sx?: SxProps;

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

@@ -35,7 +35,7 @@ export const TablePagination = (props: PaginationProps) => {
         {...props}
         variant="outlined"
         shape="rounded"
-        onChange={(e, v) => onPageChange(Number(v) * limit)}
+        onChange={(e, v) => onPageChange((Number(v) - 1) * limit)}
       />
       <DropdownMenu
         anchor={({ open }) => (

package/src/components/DataDisplay/SidePanel/SidePanel.tsx

@@ -1,9 +1,79 @@
+import { SxProps, Typography } from '@mui/material';
 import { ReactNode } from 'react';
+import Image from '../../Image/Image';
+import {
+  StyledSidePanelContainer,
+  StyledTextContainer,
+  StyledTypography,
+  StyledValueContainer,
+} from './styles';
 
 export interface SidePanelProps {
-  children?: ReactNode;
+  variables?: { label: string; value: string }[];
+  bottomChildren?: ReactNode;
+  containerSx?: SxProps;
+  variablesContainerSX?: SxProps;
+  imageUrl?: string;
+  imageWidth?: string;
+  imageHeight?: string;
+  title?: string;
 }
+interface variablesProps {
+  data?: { label: string; value: string }[];
+  variablesContainerSX?: SxProps;
+}
+export const SidePanelVariables = ({
+  data,
+  variablesContainerSX,
+}: variablesProps) => {
+  return (
+    <>
+      {data?.map((item, index) => (
+        <>
+          <StyledValueContainer key={index} sx={variablesContainerSX}>
+            <Typography variant="label1">{item.label}</Typography>
+            <Typography variant="body2">{item.value}</Typography>
+          </StyledValueContainer>
+        </>
+      ))}
+    </>
+  );
+};
+
+export const SidePanel = ({
+  variables,
+  bottomChildren,
+  containerSx,
+  variablesContainerSX,
+  imageUrl,
+  imageHeight = '100%',
+  imageWidth = '100%',
+  title = 'Default Title',
+}: SidePanelProps) => {
+  return (
+    <>
+      <StyledSidePanelContainer sx={containerSx}>
+        {imageUrl ? (
+          <Image
+            radius={'4px'}
+            src={imageUrl || ''}
+            alt="Image"
+            width={imageWidth}
+            height={imageHeight}
+          />
+        ) : (
+          <StyledTextContainer>
+            <StyledTypography variant="subtitle1">{title}</StyledTypography>
+          </StyledTextContainer>
+        )}
+
+        <SidePanelVariables
+          data={variables}
+          variablesContainerSX={variablesContainerSX}
+        />
 
-export const SidePanel = ({ children }: SidePanelProps) => {
-  return <></>;
+        {bottomChildren}
+      </StyledSidePanelContainer>
+    </>
+  );
 };

package/src/components/DataDisplay/SidePanel/styles.tsx

@@ -0,0 +1,33 @@
+import { Box, Stack, styled, Typography } from '@mui/material';
+
+export const StyledSidePanelContainer = styled(Stack)(({ theme }) => ({
+  width: '250px',
+  backgroundColor: theme.palette.surface.paperBackground,
+  padding: '12px',
+  borderRadius: '8px',
+  gap: '12px',
+  margin: '20px',
+}));
+
+export const StyledValueContainer = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.surface.defaultBackground,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  height: '50px',
+  width: '226px',
+  padding: '14px 12px',
+  borderRadius: '4px',
+}));
+
+export const StyledTextContainer = styled(Stack)(({ theme }) => ({
+  width: '226px',
+  height: '128px',
+  backgroundColor: theme.palette.surface.defaultBackground,
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+export const StyledTypography = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.tertiary,
+}));

package/src/components/DataDisplay/export.ts

@@ -3,4 +3,5 @@ export * from './Avatar/Avatar';
 export * from './Card/Card';
 export * from './Chips/Chips';
 export * from './DataTable/DataTable';
+export * from './SidePanel/SidePanel';
 export * from './Typography/Typography';

package/src/components/Input/Button/Button.tsx

@@ -4,11 +4,15 @@ import {
 } from '@mui/material';
 import './ButtonLoader.css';
 
-export type ButtonProps = { loading?: boolean } & MuiButtonProps;
+export type ButtonProps = {
+  loading?: boolean;
+  color?: string;
+} & Omit<MuiButtonProps, 'color'>;
 
-export const Button = ({ loading = false, ...props }: ButtonProps) => {
+export const Button = ({ loading = false, color, ...props }: ButtonProps) => {
   return (
     <MuiButton
+      sx={{ color, ...props.sx }}
       {...props}
       endIcon={loading ? <div className="buttonLoader"></div> : props.endIcon}
       disabled={props.disabled || loading}

package/src/components/Navigation/ConfirmDialog/ConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import { Box, Stack } from '@mui/material';
+import { Box, Stack, useTheme } from '@mui/material';
 import { AnimatedGifs } from '../../../assets/images/gif';
 import { Button, Dialog, Typography } from '../../export';
 
@@ -11,6 +11,8 @@ export type ConfirmDialogProps = {
   onConfirm: () => void;
   onCancel: () => void;
   type: ConfirmDialogType;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
 };
 
 export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
@@ -20,7 +22,10 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
   onConfirm,
   onCancel,
   type,
+  confirmButtonText = type === 'delete' ? 'Confirm Delete' : 'Confirm',
+  cancelButtonText = 'Cancel',
 }) => {
+  const theme = useTheme();
   if (!isOpen) return null;
 
   return (
@@ -54,15 +59,16 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
                   close();
                 }}
                 variant="text"
+                color={theme.palette.text.tertiary}
               >
-                Cancel
+                {cancelButtonText}
               </Button>
               <Button
                 onClick={onConfirm}
                 variant="contained"
                 color={type === 'delete' ? 'error' : 'primary'}
               >
-                {type === 'delete' ? 'Confirm Delete' : 'Confirm'}
+                {confirmButtonText}
               </Button>
             </Stack>
           </>

package/src/stories/DataDisplay/SidePanel.stories.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@mui/material';
 import { Meta } from '@storybook/react/*';
 import {
   SidePanel,
@@ -7,33 +8,66 @@ import {
 export default {
   title: 'DataDisplay/SidePanel',
   component: SidePanel,
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: 'text',
-      description: 'Content inside the Avatar component',
-    },
-    src: {
-      control: 'text',
-      description: 'Image source for the Avatar component',
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['circular', 'rounded', 'square'],
-      },
-      description: 'Variant of the Avatar component',
-    },
-    sx: {
-      control: 'object',
-      description: 'Custom styling for the Avatar component',
-    },
-  },
 } as Meta<typeof SidePanel>;
 
 export const withText = {
   render: (args: SidePanelProps) => <SidePanel {...args} />,
   args: {
-    children: 'SS',
+    variables: [
+      {
+        label: 'Frequency',
+        value: 'Daily',
+      },
+      {
+        label: 'Start Date',
+        value: '5 July, 2024',
+      },
+      {
+        label: 'Time',
+        value: '04:00 PM',
+      },
+    ],
+  },
+};
+
+export const WithImage = {
+  render: (args: SidePanelProps) => <SidePanel {...args} />,
+  args: {
+    imageUrl: `https://fastly.picsum.photos/id/1063/536/354.jpg?hmac=c-ouc6pAVYGm1E0uLcnK_cavuLd8J0VPbodIe_CG8s0`,
+    variables: [
+      {
+        label: 'Frequency',
+        value: 'Daily',
+      },
+      {
+        label: 'Start Date',
+        value: '5 July, 2024',
+      },
+      {
+        label: 'Time',
+        value: '04:00 PM',
+      },
+    ],
+  },
+};
+export const WithBottomComponent = {
+  render: (args: SidePanelProps) => <SidePanel {...args} />,
+  args: {
+    imageUrl: `https://fastly.picsum.photos/id/1063/536/354.jpg?hmac=c-ouc6pAVYGm1E0uLcnK_cavuLd8J0VPbodIe_CG8s0`,
+    variables: [
+      {
+        label: 'Frequency',
+        value: 'Daily',
+      },
+      {
+        label: 'Start Date',
+        value: '5 July, 2024',
+      },
+      {
+        label: 'Time',
+        value: '04:00 PM',
+      },
+    ],
+    bottomChildren: <Box>here your component</Box>,
   },
 };

package/src/stories/Navigation/ConfirmDialog.stories.tsx

@@ -19,6 +19,14 @@ const meta: Meta<typeof ConfirmDialog> = {
       description: 'Message text displayed in the dialog',
       control: 'text',
     },
+    cancelButtonText: {
+      description: 'Text displayed on the cancel button',
+      control: 'text',
+    },
+    confirmButtonText: {
+      description: 'Text displayed on the confirm button',
+      control: 'text',
+    },
     type: {
       description: "Type of confirmation dialog ('confirm' or 'delete')",
       control: {

package/src/themes/colorTokens/darkColorTokens.tsx

@@ -16,6 +16,9 @@ export const DarkColorTokens = {
     primary: ColorPalette.GreyColors.White,
     secondary: ColorPalette.GreyColors.White70,
     tertiary: ColorPalette.GreyColors.White50,
+    black: ColorPalette.GreyColors.Black,
+    white: ColorPalette.GreyColors.White,
+    primaryContrast: ColorPalette.BlueGreyColors.BlueGrey800,
   },
   surface: {
     defaultBackground: ColorPalette.BlueGreyColors.BlueGrey600,

package/src/themes/colorTokens/lightColorTokens.ts

@@ -16,6 +16,9 @@ export const LightColorTokens = {
     primary: ColorPalette.GreyColors.Black,
     secondary: ColorPalette.GreyColors.Black70,
     tertiary: ColorPalette.GreyColors.Black50,
+    black: ColorPalette.GreyColors.Black,
+    white: ColorPalette.GreyColors.White,
+    primaryContrast: ColorPalette.GreyColors.White,
   },
   surface: {
     defaultBackground: ColorPalette.BlueGreyColors.BlueGrey100,

package/src/themes/commonTheme.ts

@@ -479,7 +479,7 @@ export const getCommonTheme = (mode: Theme) => {
           },
           subtitle2: {
             fontSize: '16px',
-            fontWeight: 500,
+            fontWeight: 600,
             fontFamily: 'Poppins',
             color: ColorTokens.text.primary,
           },
@@ -489,6 +489,12 @@ export const getCommonTheme = (mode: Theme) => {
             fontFamily: 'Poppins',
             color: ColorTokens.text.primary,
           },
+          button1: {
+            fontSize: '14px',
+            fontWeight: 600,
+            fontFamily: 'Poppins',
+            color: ColorTokens.text.primary,
+          },
           body1: {
             fontSize: '16px',
             fontWeight: 600,
@@ -501,12 +507,6 @@ export const getCommonTheme = (mode: Theme) => {
             fontFamily: 'Heebo',
             color: ColorTokens.text.primary,
           },
-          caption: {
-            fontSize: '12px',
-            fontWeight: 400,
-            fontFamily: 'Heebo',
-            color: ColorTokens.text.secondary,
-          },
           label1: {
             fontSize: '14px',
             fontWeight: 400,
@@ -514,16 +514,16 @@ export const getCommonTheme = (mode: Theme) => {
             color: ColorTokens.text.secondary,
           },
           label2: {
-            fontSize: '12px',
+            fontSize: '14px',
             fontWeight: 400,
             fontFamily: 'Poppins',
             color: ColorTokens.text.secondary,
           },
-          button1: {
-            fontSize: '14px',
-            fontWeight: 600,
-            fontFamily: 'Poppins',
-            color: ColorTokens.text.primary,
+          caption: {
+            fontSize: '12px',
+            fontWeight: 400,
+            fontFamily: 'Heebo',
+            color: ColorTokens.text.secondary,
           },
         } as TypographyOptions,
       },

package/types/theme.d.ts

@@ -1,6 +1,6 @@
-import "@mui/material/styles";
+import '@mui/material/styles';
 
-declare module "@mui/material/styles" {
+declare module '@mui/material/styles' {
   interface Theme {
     palette: {
       [x: string]: any;
@@ -21,6 +21,9 @@ declare module "@mui/material/styles" {
         primary: string;
         secondary: string;
         tertiary: string;
+        black: string;
+        white: string;
+        primaryContrast: string;
       };
       surface: {
         defaultBackground: string;
@@ -49,7 +52,7 @@ declare module "@mui/material/styles" {
   export function createTheme(options?: CustomThemeOptions): CustomTheme;
 }
 
-declare module "@mui/material/Typography" {
+declare module '@mui/material/Typography' {
   interface TypographyPropsVariantOverrides {
     label1: true;
     label2: true;