norma-library 0.5.3 → 0.5.50

package/src/components/CheckBox.tsx

@@ -1,24 +1,21 @@
-import React, { useMemo } from 'react';
-import { FormControlLabel, Checkbox as MuiCheckbox, ThemeProvider, useMediaQuery } from '@mui/material';
+import React from 'react';
+import { FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material';
 
 import { CheckBoxBaseProps } from '../interfaces';
 
-import { themes } from '../helpers';
 import { styled } from '@mui/material/styles';
 
 const CheckBoxStyled = styled(MuiCheckbox)({});
 
 export const CheckBox = ({ ...props }: CheckBoxBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
+  
   return (
-    <ThemeProvider theme={theme}>
+    <>
       {props.label ? (
         <FormControlLabel control={<CheckBoxStyled {...props} />} label={props.label} />
       ) : (
         <CheckBoxStyled {...props} />
       )}
-    </ThemeProvider>
+    </>
   );
 };

package/src/components/DataGrid/index.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useMemo, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
-import { Box, Stack, ThemeProvider, useMediaQuery, Paper } from '@mui/material';
+import { Box, Stack, Paper } from '@mui/material';
 
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -14,8 +14,6 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 
 import { DataGridBaseProps, DataSourceItem } from '../../interfaces';
 
-import { themes } from '../../helpers';
-
 import DropdownFilter from './base/dropdown';
 import { Pagination as MuiPagination } from '@mui/material';
 
@@ -66,9 +64,6 @@ export function Cog6ToothIcon(props: any) {
 const dataSource = generateRandomDataSource(30);
 
 export const DataGrid: React.FC<DataGridBaseProps> = ({ data = [] }) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.light), [prefersDarkMode]);
-
   const pageSize = 10;
   const columns = data[0].columns;
 
@@ -162,93 +157,91 @@ export const DataGrid: React.FC<DataGridBaseProps> = ({ data = [] }) => {
   }, [selectedItems]);
 
   return (
-    <ThemeProvider theme={theme}>
-      <Box sx={{ width: '100%', minHeight: 480 }}>
-        <DataGridHeaderStyled>
-          <TotalRecordsStyled>{totalRecords} results found for this search</TotalRecordsStyled>
-          <HeaderCogStyled type="button">
-            <Cog6ToothIcon width={24} height={24} />
-          </HeaderCogStyled>
-        </DataGridHeaderStyled>
-        <TableContainer component={Paper} sx={{ overflowX: 'inherit' }}>
-          <Table sx={{ minWidth: 650, width: '100%' }} aria-label="a dense table">
-            <TableHead>
-              <TableRow>
-                {columns &&
-                  columns.map((item: any, key: any) => (
-                    <TableCellStyled
-                      key={key}
-                      ref={ref => (sortRefs.current[key] = ref as React.RefObject<HTMLTableCellElement> | null)}
-                    >
-                      <Stack direction="row" spacing={2} sx={{ position: 'relative' }}>
-                        <ButtonStyled
-                          variant="text"
-                          size="small"
-                          color={currentActiveSorting === item.field ? 'primary' : 'inherit'}
-                          endIcon={
-                            currentActiveSorting === item.field && sorting === 'up' ? (
-                              <ArrowDropUpIcon />
-                            ) : (
-                              <ArrowDropDownIcon />
-                            )
-                          }
-                          onClick={() => {
-                            handleDropDown(item.field);
-                          }}
-                        >
-                          {item.headerText}
-                        </ButtonStyled>
-                        {currentDropDownActive && currentDropDownActive === item.field && (
-                          <DropdownFilter
-                            format={item.format}
-                            onOrder={handleSorting}
-                            onFilter={handleFilter}
-                            onSelected={handleItemSelected}
-                            itemsSelected={selectedItems}
-                            onFilterSelected={handleFilterSelected}
-                            onChecketAll={setSelectAll}
-                            onSelectAll={selectAll}
-                            data={groupByDataSource(dataSource, item.field)}
-                          />
-                        )}
-                      </Stack>
-                    </TableCellStyled>
-                  ))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {newDataSource &&
-                newDataSource.map((item: DataSourceItem, key: number) => (
-                  <TableRowStyled key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                    {Object.keys(item).map(columnKey => (
-                      <TableCell component="th" scope="row" key={columnKey}>
-                        {item[columnKey]}
-                      </TableCell>
-                    ))}
-                  </TableRowStyled>
+    <Box sx={{ width: '100%', minHeight: 480 }}>
+      <DataGridHeaderStyled>
+        <TotalRecordsStyled>{totalRecords} results found for this search</TotalRecordsStyled>
+        <HeaderCogStyled type="button">
+          <Cog6ToothIcon width={24} height={24} />
+        </HeaderCogStyled>
+      </DataGridHeaderStyled>
+      <TableContainer component={Paper} sx={{ overflowX: 'inherit' }}>
+        <Table sx={{ minWidth: 650, width: '100%' }} aria-label="a dense table">
+          <TableHead>
+            <TableRow>
+              {columns &&
+                columns.map((item: any, key: any) => (
+                  <TableCellStyled
+                    key={key}
+                    ref={ref => (sortRefs.current[key] = ref as React.RefObject<HTMLTableCellElement> | null)}
+                  >
+                    <Stack direction="row" spacing={2} sx={{ position: 'relative' }}>
+                      <ButtonStyled
+                        variant="text"
+                        size="small"
+                        color={currentActiveSorting === item.field ? 'primary' : 'inherit'}
+                        endIcon={
+                          currentActiveSorting === item.field && sorting === 'up' ? (
+                            <ArrowDropUpIcon />
+                          ) : (
+                            <ArrowDropDownIcon />
+                          )
+                        }
+                        onClick={() => {
+                          handleDropDown(item.field);
+                        }}
+                      >
+                        {item.headerText}
+                      </ButtonStyled>
+                      {currentDropDownActive && currentDropDownActive === item.field && (
+                        <DropdownFilter
+                          format={item.format}
+                          onOrder={handleSorting}
+                          onFilter={handleFilter}
+                          onSelected={handleItemSelected}
+                          itemsSelected={selectedItems}
+                          onFilterSelected={handleFilterSelected}
+                          onChecketAll={setSelectAll}
+                          onSelectAll={selectAll}
+                          data={groupByDataSource(dataSource, item.field)}
+                        />
+                      )}
+                    </Stack>
+                  </TableCellStyled>
                 ))}
-            </TableBody>
-          </Table>
-          <Stack
-            spacing={2}
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              borderTop: '1px solid #ccc',
-              padding: 2,
-            }}
-          >
-            <MuiPagination
-              variant="outlined"
-              shape="rounded"
-              count={totalPages}
-              page={currentPage}
-              onChange={(_event, page) => handleChangePage(page)}
-            />
-          </Stack>
-        </TableContainer>
-      </Box>
-    </ThemeProvider>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {newDataSource &&
+              newDataSource.map((item: DataSourceItem, key: number) => (
+                <TableRowStyled key={key} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                  {Object.keys(item).map(columnKey => (
+                    <TableCell component="th" scope="row" key={columnKey}>
+                      {item[columnKey]}
+                    </TableCell>
+                  ))}
+                </TableRowStyled>
+              ))}
+          </TableBody>
+        </Table>
+        <Stack
+          spacing={2}
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderTop: '1px solid #ccc',
+            padding: 2,
+          }}
+        >
+          <MuiPagination
+            variant="outlined"
+            shape="rounded"
+            count={totalPages}
+            page={currentPage}
+            onChange={(_event, page) => handleChangePage(page)}
+          />
+        </Stack>
+      </TableContainer>
+    </Box>
   );
 };

package/src/components/DatePicker.tsx

@@ -1,5 +1,4 @@
-import React, { useMemo } from 'react';
-import { ThemeProvider, useMediaQuery } from '@mui/material';
+import React from 'react';
 import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -7,7 +6,6 @@ import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
 import { MobileDatePicker as MuiMobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
 import { DesktopDatePicker as MuiDesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
 import { DatePickerBaseProps } from '../interfaces';
-import { themes } from '../helpers';
 import { styled } from '@mui/material/styles';
 
 import 'dayjs/locale/pt-br';
@@ -56,18 +54,14 @@ export const DatePicker = ({
   language = 'pt-br',
   variant = 'desktop',
 }: DatePickerBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
+  
   return (
-    <ThemeProvider theme={theme}>
-      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
-        <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
-          {variant === 'responsive' && <MuiDatePickerStyled label={label} format={format} />}
-          {variant === 'mobile' && <MuiMobileDatePickerStyled label={label} format={format} />}
-          {variant === 'desktop' && <MuiDesktopDatePickerStyled label={label} format={format} />}
-        </DemoContainer>
-      </LocalizationProvider>
-    </ThemeProvider>
+    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
+      <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
+        {variant === 'responsive' && <MuiDatePickerStyled label={label} format={format} />}
+        {variant === 'mobile' && <MuiMobileDatePickerStyled label={label} format={format} />}
+        {variant === 'desktop' && <MuiDesktopDatePickerStyled label={label} format={format} />}
+      </DemoContainer>
+    </LocalizationProvider>
   );
 };

package/src/components/DropDown.tsx

@@ -1,31 +1,24 @@
-import React, { useMemo } from 'react';
-import { Menu as MuiDropDown, ThemeProvider, useMediaQuery } from '@mui/material';
+import React from 'react';
+import { Menu as MuiDropDown } from '@mui/material';
 import { DropDownBaseProps } from '../interfaces';
-import { themes } from '../helpers';
 import { styled } from '@mui/material/styles';
 
 const DropDownStyled = styled(MuiDropDown)({});
 
 export const DropDown = ({ open, children, ...props }: DropDownBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
+  
   return (
-    <ThemeProvider theme={theme}>
-      <>
-        <DropDownStyled
-          open
-          id="basic-menu"
-          anchorEl={props.anchorEl}
-          onClose={props.onClose}
-          MenuListProps={{
-            'aria-labelledby': 'basic-button',
-          }}
-          {...props}
-        >
-          {children}
-        </DropDownStyled>
-      </>
-    </ThemeProvider>
+    <DropDownStyled
+      open
+      id="basic-menu"
+      anchorEl={props.anchorEl}
+      onClose={props.onClose}
+      MenuListProps={{
+        'aria-labelledby': 'basic-button',
+      }}
+      {...props}
+    >
+      {children}
+    </DropDownStyled>
   );
 };

package/src/components/IconButton.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo } from 'react';
-import { IconButton as MuiIconButton, ThemeProvider, useMediaQuery } from '@mui/material';
+import React from 'react';
+import { IconButton as MuiIconButton } from '@mui/material';
 import { IconButtonBaseProps } from '../interfaces';
-import { palette, themes } from '../helpers';
+import { palette } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { ButtonVariant, ColorVariant } from '@/types';
 
@@ -28,14 +28,10 @@ const IconButtonStyled = styled(MuiIconButton)<{
 }));
 
 export const IconButton = ({ circle = false, children, ...props }: IconButtonBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.dark : themes.light), [prefersDarkMode]);
-
+  
   return (
-    <ThemeProvider theme={theme}>
-      <IconButtonStyled circle={circle} color="primary" variant="text" cursor="default" {...props}>
-        {children}
-      </IconButtonStyled>
-    </ThemeProvider>
+    <IconButtonStyled circle={circle} color="primary" variant="text" cursor="default" {...props}>
+      {children}
+    </IconButtonStyled>
   );
 };

package/src/components/Modal.tsx

@@ -1,7 +1,6 @@
-import React, { useMemo } from 'react';
-import { Modal as MuiModal, Paper, Box, ThemeProvider, useMediaQuery } from '@mui/material';
+import React from 'react';
+import { Modal as MuiModal, Paper, Box } from '@mui/material';
 import { ModalBaseProps } from '../interfaces';
-import { themes } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { IconButton } from './IconButton';
 import { Button } from './Button';
@@ -67,48 +66,44 @@ export function Close() {
 }
 
 export const Modal = ({ open, children, ...props }: ModalBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
+  
   return (
-    <ThemeProvider theme={theme}>
-      <ModalStyled open {...props}>
-        <ModalContentStyled>
-          {props.title && (
-            <ModalHeaderStyled>
-              <>
-                <h2>{props.title}</h2>
-                <IconButton
-                  onClick={props.onClose}
-                  size="small"
-                  color="inherit"
-                  variant="text"
-                  cursor="pointer"
-                  sx={{ position: 'absolute', right: 0, top: 5 }}
-                >
-                  <Close />
-                </IconButton>
-              </>
-            </ModalHeaderStyled>
-          )}
-          {children}
-          {props.action && (
-            <ModalFooterStyled>
-              {props.action.map((item, key) => (
-                <Button
-                  color={item.color}
-                  variant={item.variant}
-                  key={key}
-                  onClick={item.action}
-                  style={{ marginLeft: 10 }}
-                >
-                  {item.label}
-                </Button>
-              ))}
-            </ModalFooterStyled>
-          )}
-        </ModalContentStyled>
-      </ModalStyled>
-    </ThemeProvider>
+    <ModalStyled open {...props}>
+      <ModalContentStyled>
+        {props.title && (
+          <ModalHeaderStyled>
+            <>
+              <h2>{props.title}</h2>
+              <IconButton
+                onClick={props.onClose}
+                size="small"
+                color="inherit"
+                variant="text"
+                cursor="pointer"
+                sx={{ position: 'absolute', right: 0, top: 5 }}
+              >
+                <Close />
+              </IconButton>
+            </>
+          </ModalHeaderStyled>
+        )}
+        {children}
+        {props.action && (
+          <ModalFooterStyled>
+            {props.action.map((item, key) => (
+              <Button
+                color={item.color}
+                variant={item.variant}
+                key={key}
+                onClick={item.action}
+                style={{ marginLeft: 10 }}
+              >
+                {item.label}
+              </Button>
+            ))}
+          </ModalFooterStyled>
+        )}
+      </ModalContentStyled>
+    </ModalStyled>
   );
 };

package/src/components/Paper.tsx

@@ -1,19 +1,12 @@
-import React, { useMemo } from 'react';
-import { Paper as MuiPaper, ThemeProvider, useMediaQuery } from '@mui/material';
+import React from 'react';
+import { Paper as MuiPaper } from '@mui/material';
 import { PaperBaseProps } from '../interfaces';
-import { themes } from '../helpers';
 import { styled } from '@mui/material/styles';
 
 const PaperStyled = styled(MuiPaper)({});
 
 export const Paper = ({ children, ...props }: PaperBaseProps & {}) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
   return (
-    <ThemeProvider theme={theme}>
-      <PaperStyled {...props}>{children}</PaperStyled>
-    </ThemeProvider>
+    <PaperStyled {...props}>{children}</PaperStyled>
   );
 };

package/src/components/ProgressBar.tsx

@@ -1,14 +1,11 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import {
   LinearProgress as MuiProgressBar,
   linearProgressClasses,
-  ThemeProvider,
-  useMediaQuery,
   Typography,
 } from '@mui/material';
 
 import { ProgressBarBaseProps } from '../interfaces';
-import { themes } from '../helpers';
 import { styled } from '@mui/material/styles';
 
 const ProgressBarStyled = styled(MuiProgressBar)({
@@ -32,23 +29,19 @@ const ProgressBarLabelStyled = styled(Typography)`
 `;
 
 export const ProgressBar = ({ value = 0, label, variant = 'determinate', total, ...props }: ProgressBarBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const percentage = value && total ? (value / total) * 100 : 0;
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
 
   return (
-    <ThemeProvider theme={theme}>
-      <div style={{ minWidth: '100px' }}>
-        {label && (
-          <ProgressBarLabelStyled>
-            {label}
-            <span style={{ right: 0 }}>
-              {total} ({percentage.toFixed(2)}%)
-            </span>
-          </ProgressBarLabelStyled>
-        )}
-        <ProgressBarStyled value={value} variant={variant} {...props} />
-      </div>
-    </ThemeProvider>
+    <div style={{ minWidth: '100px' }}>
+      {label && (
+        <ProgressBarLabelStyled>
+          {label}
+          <span style={{ right: 0 }}>
+            {total} ({percentage.toFixed(2)}%)
+          </span>
+        </ProgressBarLabelStyled>
+      )}
+      <ProgressBarStyled value={value} variant={variant} {...props} />
+    </div>
   );
 };

package/src/components/RadioGroup.tsx

@@ -1,15 +1,12 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import {
   FormControl,
   FormControlLabel,
   FormLabel,
   Radio as MuiRadio,
   RadioGroup as MuiRadioGroup,
-  ThemeProvider,
-  useMediaQuery,
 } from '@mui/material';
 
-import { themes } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { RadioBaseProps } from '../interfaces/RadioGroup';
 import { TextFieldSizeVariant } from '../types';
@@ -18,30 +15,26 @@ const RadioStyled = styled(MuiRadio)({});
 const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
 
 export const RadioGroup = ({ ...props }: RadioBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
+  
   return (
-    <ThemeProvider theme={theme}>
-      <FormControl>
-        <FormLabel id={props.id}>{props.label}</FormLabel>
-        <MuiRadioGroup
-          aria-labelledby={props.id}
-          defaultValue={props.checked}
-          name="radio-buttons-group"
-          row={props.direction === 'horizontal' ? true : false}
-        >
-          {props.options &&
-            props.options.map((item, key) => (
-              <FormControlLabel
-                value={item.value}
-                control={<RadioStyled color={props.color} size={item.size ? item.size : sizes[1]} />}
-                label={item.label}
-                key={key}
-              />
-            ))}
-        </MuiRadioGroup>
-      </FormControl>
-    </ThemeProvider>
+    <FormControl>
+      <FormLabel id={props.id}>{props.label}</FormLabel>
+      <MuiRadioGroup
+        aria-labelledby={props.id}
+        defaultValue={props.checked}
+        name="radio-buttons-group"
+        row={props.direction === 'horizontal' ? true : false}
+      >
+        {props.options &&
+          props.options.map((item, key) => (
+            <FormControlLabel
+              value={item.value}
+              control={<RadioStyled color={props.color} size={item.size ? item.size : sizes[1]} />}
+              label={item.label}
+              key={key}
+            />
+          ))}
+      </MuiRadioGroup>
+    </FormControl>
   );
 };

package/src/components/RangerSlider.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react';
-import { Slider as MuiSlider, ThemeProvider, useMediaQuery } from '@mui/material';
-import { palette, themes } from '../helpers';
+import React from 'react';
+import { Slider as MuiSlider } from '@mui/material';
+import { palette } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { ColorVariant } from '@/types';
 import { RangerSliderBaseProps } from '@/interfaces/RangerSlider';
@@ -59,12 +59,7 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
 }));
 
 export const RangerSlider = ({ defaultValue = 50, color = 'primary', ...props }: RangerSliderBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
   return (
-    <ThemeProvider theme={theme}>
-      <RangerSliderStyled aria-label="Default" color={color} {...props} />
-    </ThemeProvider>
+    <RangerSliderStyled aria-label="Default" color={color} {...props} />
   );
 };