@campxdev/react-blueprint 1.2.4 → 1.2.5

package/src/components/Navigation/TableColumnFilters/TableColumnFilters.tsx

@@ -0,0 +1,108 @@
+import { KeyboardArrowDown } from '@mui/icons-material';
+import { MenuListProps, MenuProps, Typography, useTheme } from '@mui/material';
+import { GridColDef } from '@mui/x-data-grid';
+import { useState } from 'react';
+import { Button, Icons, SearchBar, SingleCheckBox } from '../../export';
+import { DropdownMenu } from '../export';
+
+export type TableColumnFiltersProps = {
+  columns: GridColDef[];
+  menuProps?: Omit<MenuProps, 'open'>;
+  menuListProps?: MenuListProps;
+  onChange: (values: string[]) => void;
+};
+
+export const TableColumnFilters = ({
+  columns,
+  onChange,
+  ...props
+}: TableColumnFiltersProps) => {
+  const [values, setValues] = useState<GridColDef[]>([]);
+  const [search, setSearch] = useState<string>('');
+  const theme = useTheme();
+
+  const filteredOptions = columns.filter((option) =>
+    option.field.toLowerCase().includes(search.toLowerCase()),
+  );
+
+  const handleCheckboxChange = (column: GridColDef, checked: boolean) => {
+    const updatedValues = checked
+      ? [...values, column]
+      : values.filter((v) => v.field !== column.field);
+    setValues(updatedValues);
+    onChange(updatedValues.map((v) => v.field));
+  };
+  return (
+    <>
+      <DropdownMenu
+        menuListProps={{
+          sx: {
+            padding: '12px',
+            width: '250px',
+          },
+          ...props.menuListProps,
+        }}
+        anchor={({ open }: { open: (e: any) => void }) => (
+          <Button
+            onClick={open}
+            sx={{
+              gap: '1px',
+              borderRadius: '20px',
+            }}
+            variant="contained"
+            endIcon={<KeyboardArrowDown />}
+          >
+            Columns
+          </Button>
+        )}
+        menuProps={{ ...props.menuProps }}
+        menuHeader={
+          <SearchBar
+            fullWidth
+            size="small"
+            placeholder="Search"
+            onSearch={(value) => {
+              setSearch(value);
+            }}
+          />
+        }
+        menuListContainerSx={{
+          margin: '10px 2px 0px 0px',
+          gap: 1,
+          maxHeight: '350px',
+        }}
+        menu={filteredOptions.map((item, index) => (
+          <SingleCheckBox
+            key={index}
+            formControlLabelProps={{
+              labelPlacement: 'start',
+              sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                marginLeft: '0px',
+              },
+            }}
+            icon={<Icons.VisibilityIcon />}
+            checkedIcon={<Icons.VisibilityOffIcon />}
+            checked={values.includes(item)}
+            label={
+              <Typography
+                color={
+                  values.includes(item)
+                    ? theme.palette.text.tertiary
+                    : theme.palette.text.primary
+                }
+                variant="subtitle3"
+              >
+                {item.headerName}
+              </Typography>
+            }
+            onChange={(e) => {
+              handleCheckboxChange(item, e.target.checked);
+            }}
+          />
+        ))}
+      />
+    </>
+  );
+};

package/src/components/Navigation/TableDensityFilter/TableDensityFilter.tsx

@@ -0,0 +1,104 @@
+import { Box, MenuListProps, MenuProps, styled, useTheme } from '@mui/material';
+import { GridDensity } from '@mui/x-data-grid';
+import { useState } from 'react';
+import {
+  Button,
+  DropDownIcon,
+  DropdownMenu,
+  Icons,
+  Typography,
+} from '../../export';
+
+export type TableDensityFilterProps = {
+  menuProps?: Omit<MenuProps, 'open'>;
+  menuListProps?: MenuListProps;
+  onChange: (value: GridDensity) => void;
+};
+
+export const TableDensityFilter = ({
+  onChange,
+  ...props
+}: TableDensityFilterProps) => {
+  const [density, setDensity] = useState<GridDensity>('standard');
+
+  const gridDensity: GridDensity[] = ['compact', 'standard', 'comfortable'];
+
+  const theme = useTheme();
+
+  const getIcon = (type: GridDensity, color?: string, size?: number) => {
+    switch (type) {
+      case 'standard':
+        return <Icons.StandardIcon size={size} color={color} />;
+      case 'compact':
+        return <Icons.CompactIcon size={size} color={color} />;
+      case 'comfortable':
+        return <Icons.ComfortableIcon size={size} color={color} />;
+    }
+  };
+
+  const handleClick = (value: GridDensity, close: () => void) => {
+    setDensity(value);
+    onChange(value);
+    close();
+  };
+
+  return (
+    <DropdownMenu
+      menuListProps={{
+        sx: {
+          width: '220px',
+          padding: '12px',
+          maxHeight: '350px',
+        },
+        ...props.menuListProps,
+      }}
+      anchor={({ open }: { open: (e: any) => void }) => (
+        <DropDownIcon
+          icon={{
+            icon: (
+              <FilterAnchorContainer>{getIcon(density)}</FilterAnchorContainer>
+            ),
+          }}
+          handleClick={open}
+        />
+      )}
+      menuProps={{
+        ...props.menuProps,
+      }}
+      menuHeader={
+        <Typography color={theme.palette.text.secondary} variant="label1">
+          Row Density
+        </Typography>
+      }
+      menuListContainerSx={{
+        margin: '10px 2px 0px 0px',
+        gap: 1,
+      }}
+      menu={({ close }) =>
+        gridDensity.map((item) => (
+          <Button
+            sx={{
+              gap: '5px',
+              justifyContent: 'flex-start',
+            }}
+            onClick={() => handleClick(item, close)}
+            variant="text"
+          >
+            {getIcon(item, theme.palette.secondary.light, 20)}
+            <Typography variant="label2">{item}</Typography>
+          </Button>
+        ))
+      }
+    />
+  );
+};
+
+const FilterAnchorContainer = styled(Box)(({ theme }) => ({
+  height: '40px',
+  width: '40px',
+  backgroundColor: theme.palette.secondary.main,
+  borderRadius: '5px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));

package/src/components/Navigation/export.ts

@@ -6,8 +6,11 @@ export * from './DropDownMenu/DropDownButton';
 export * from './DropDownMenu/DropDownIcon';
 export * from './DropDownMenu/DropDownMenu';
 export * from './DropDownMenu/DropdownMenuItem';
+export * from './ManageFilters/ManageFilters';
 export * from './PreviewFiles/PreviewFiles';
 export * from './Sidebar/Sidebar';
 export * from './Stepper/Stepper';
+export * from './TableColumnFilters/TableColumnFilters';
+export * from './TableDensityFilter/TableDensityFilter';
 export * from './TabsContainer/TabsContainer';
 export * from './UploadDialog/UploadDialog';

package/src/stories/Input/Password.stories.tsx

@@ -1,8 +1,5 @@
 import { Meta } from '@storybook/react';
-import {
-  PasswordField,
-  PasswordFieldProps,
-} from '../../components/Input/PasswordField/PasswordField';
+import { PasswordField, PasswordFieldProps } from '../../components/export';
 
 export default {
   title: 'Input/PasswordField',

package/src/stories/Navigation/ColumnFilters.stories.tsx

@@ -0,0 +1,82 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
+import {
+  TableColumnFilters,
+  TableColumnFiltersProps,
+} from '../../components/export';
+
+const meta: Meta<typeof TableColumnFilters> = {
+  title: 'Navigation/ColumnFilters',
+  component: TableColumnFilters,
+  argTypes: {
+    columns: {
+      control: { type: 'object' },
+      description: 'Array of filter options with labels and values.',
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback when the selected values change.',
+    },
+    menuProps: {
+      control: { type: 'object' },
+      description: 'Props to customize the MUI Menu component.',
+    },
+    menuListProps: {
+      control: { type: 'object' },
+      description: 'Props to customize the MUI MenuList component.',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<TableColumnFiltersProps> = (args) => {
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+
+  const handleOnChange = (values: string[]) => {
+    setSelectedValues(values);
+    args.onChange(values);
+  };
+
+  return (
+    <>
+      <TableColumnFilters {...args} onChange={handleOnChange} />
+      <div>
+        {selectedValues.length > 0 ? (
+          <ul>{selectedValues.map((value) => value)}</ul>
+        ) : (
+          <p>No values selected.</p>
+        )}
+      </div>
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  columns: [
+    { field: 'id', headerName: 'ID', width: 90 },
+    {
+      field: 'firstName',
+      headerName: 'First name',
+      width: 150,
+      editable: true,
+    },
+    {
+      field: 'lastName',
+      headerName: 'Last name',
+      width: 150,
+      editable: true,
+    },
+    {
+      field: 'age',
+      headerName: 'Age',
+      type: 'number',
+      width: 110,
+      editable: true,
+    },
+  ],
+};

package/src/stories/Navigation/ManageFilters.stories.tsx

@@ -0,0 +1,117 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { ReactNode, useState } from 'react';
+import {
+  ManageFilters,
+  ManageFiltersProps,
+  SingleSelect,
+  TextField,
+} from '../../components/export';
+import { RadioGroup } from '../../components/Input/RadioGroup/RadioGroup';
+
+const meta: Meta<typeof ManageFilters> = {
+  title: 'Navigation/ManageFilters',
+  component: ManageFilters,
+  argTypes: {
+    options: {
+      control: { type: 'object' },
+      description: 'Array of filter options with labels and values.',
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback when the selected values change.',
+    },
+    menuProps: {
+      control: { type: 'object' },
+      description: 'Props to customize the MUI Menu component.',
+    },
+    menuListProps: {
+      control: { type: 'object' },
+      description: 'Props to customize the MUI MenuList component.',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<ManageFiltersProps> = (args) => {
+  const [selectedValues, setSelectedValues] = useState<ReactNode[]>([]);
+
+  const handleOnChange = (values: ReactNode[]) => {
+    setSelectedValues(values);
+    args.onChange(values);
+  };
+
+  return (
+    <>
+      <ManageFilters {...args} onChange={handleOnChange} />
+      <div>
+        {selectedValues.length > 0 ? (
+          <ul>{selectedValues.map((value, index) => value)}</ul>
+        ) : (
+          <p>No values selected.</p>
+        )}
+      </div>
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  options: [
+    {
+      label: 'Option 1',
+      value: (
+        <SingleSelect
+          useCampxAxios={false}
+          onChange={() => {}}
+          options={[
+            {
+              label: 'done',
+              value: 'done',
+            },
+            {
+              label: 'processing',
+              value: 'processing',
+            },
+            {
+              label: 'onHold',
+              value: 'onHold',
+            },
+          ]}
+        />
+      ),
+    },
+    {
+      label: 'text Filed',
+      value: <TextField sx={{ width: '250px' }} />,
+    },
+    {
+      label: 'Radio Group',
+      value: (
+        <RadioGroup
+          options={[
+            {
+              label: 'done',
+              value: 'done',
+            },
+            {
+              label: 'processing',
+              value: 'processing',
+            },
+            {
+              label: 'onHold',
+              value: 'onHold',
+            },
+          ]}
+          label={''}
+          required={false}
+          name={''}
+          disabled={false}
+        />
+      ),
+    },
+  ],
+};

package/src/stories/Navigation/TableDensityFilter.stories.tsx

@@ -0,0 +1,45 @@
+import { GridDensity } from '@mui/x-data-grid';
+import { Meta, StoryFn } from '@storybook/react';
+import {
+  TableDensityFilter,
+  TableDensityFilterProps,
+} from '../../components/export';
+
+const meta: Meta<typeof TableDensityFilter> = {
+  title: 'Navigation/TableDensityFilter',
+  component: TableDensityFilter,
+  argTypes: {
+    onChange: {
+      action: 'changed',
+      description: 'Callback when the selected values change.',
+    },
+    menuProps: {
+      control: { type: 'object' },
+      description: 'Props to customize the MUI Menu component.',
+    },
+    menuListProps: {
+      control: { type: 'object' },
+      description: 'Props to customize the MUI MenuList component.',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<TableDensityFilterProps> = (args) => {
+  const handleOnChange = (value: GridDensity) => {
+    args.onChange(value);
+  };
+
+  return (
+    <>
+      <TableDensityFilter {...args} onChange={handleOnChange} />
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/themes/commonTheme.ts

@@ -143,6 +143,19 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+      MuiBadge: {
+        styleOverrides: {
+          dot: {
+            width: '4px',
+            height: '4px',
+            borderRadius: '10px',
+            backgroundColor: ColorTokens.tertiary.main,
+            margin: '3px',
+            minWidth: '4px',
+          },
+        },
+      },
+
       MuiChip: {
         styleOverrides: {
           root: {
@@ -163,9 +176,10 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           root: {
             boxShadow: 'none',
-
+            backgroundColor: ColorTokens.surface.paperBackground,
             border: `1px solid ${ColorTokens.border.primary}`,
             borderRadius: '8px',
+            backgroundImage: 'none',
           },
         },
       },
@@ -199,8 +213,7 @@ export const getCommonTheme = (mode: Theme) => {
           paper: {
             borderRadius: '5px',
             border: `1px solid ${ColorTokens.secondary.main}`,
-            marginTop: '10px',
-            boxShadow: `0px 5px 15px ${ColorTokens.secondary.main}`,
+            boxShadow: '0px',
             '&::-webkit-scrollbar': {
               width: '0.5em',
               height: '0.5em',