norma-library 0.5.3 → 0.5.50

package/src/components/Select.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import {
   FormControl,
   InputLabel,
@@ -6,11 +6,8 @@ import {
   MenuItem,
   Select as MuiSelect,
   OutlinedInput,
-  ThemeProvider,
-  useMediaQuery,
 } from '@mui/material';
 import { SelectBaseProps } from '../interfaces';
-import { themes } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { CheckBox } from './CheckBox';
 
@@ -38,45 +35,40 @@ const SelectStyled = styled(MuiSelect)(({ multiple, variant }) => ({
 }));
 
 export const Select = ({ label, onChange, data = [], value = '', multiple = false, ...props }: SelectBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
   return (
-    <ThemeProvider theme={theme}>
-      <FormControl fullWidth>
-        <InputLabel id={props.id}>{label}</InputLabel>
+    <FormControl fullWidth>
+      <InputLabel id={props.id}>{label}</InputLabel>
 
-        {multiple ? (
-          <SelectStyled
-            labelId={props.id}
-            id="demo-simple-select"
-            value={value}
-            MenuProps={MenuProps}
-            input={<OutlinedInput label="Tag" />}
-            renderValue={(selected: any) => selected.join(', ')}
-            onChange={onChange}
-            multiple
-            {...props}
-          >
-            {data &&
-              data.map((item, key) => (
-                <MenuItem value={item.value} key={key}>
-                  <CheckBox checked={value.includes(String(item.value))} />
-                  <ListItemText primary={String(item.label)} />
-                </MenuItem>
-              ))}
-          </SelectStyled>
-        ) : (
-          <SelectStyled labelId={props.id} id="demo-simple-select" value={value} onChange={onChange} {...props}>
-            {data &&
-              data.map((item, key) => (
-                <MenuItem value={item.value} key={key}>
-                  <ListItemText primary={String(item.label)} />
-                </MenuItem>
-              ))}
-          </SelectStyled>
-        )}
-      </FormControl>
-    </ThemeProvider>
+      {multiple ? (
+        <SelectStyled
+          labelId={props.id}
+          id="demo-simple-select"
+          value={value}
+          MenuProps={MenuProps}
+          input={<OutlinedInput label="Tag" />}
+          renderValue={(selected: any) => selected.join(', ')}
+          onChange={onChange}
+          multiple
+          {...props}
+        >
+          {data &&
+            data.map((item, key) => (
+              <MenuItem value={item.value} key={key}>
+                <CheckBox checked={value.includes(String(item.value))} />
+                <ListItemText primary={String(item.label)} />
+              </MenuItem>
+            ))}
+        </SelectStyled>
+      ) : (
+        <SelectStyled labelId={props.id} id="demo-simple-select" value={value} onChange={onChange} {...props}>
+          {data &&
+            data.map((item, key) => (
+              <MenuItem value={item.value} key={key}>
+                <ListItemText primary={String(item.label)} />
+              </MenuItem>
+            ))}
+        </SelectStyled>
+      )}
+    </FormControl>
   );
 };

package/src/components/Tabs.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo } from 'react';
-import { Box, Tabs as MuiTabs, Tab, ThemeProvider, Typography, useMediaQuery } from '@mui/material';
+import React from 'react';
+import { Box, Tabs as MuiTabs, Tab, Typography } from '@mui/material';
 import { TabPanelProps, TabsBaseProps } from '../interfaces';
-import { palette, themes } from '../helpers';
+import { palette } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { ColorVariant } from '@/types';
 
@@ -88,24 +88,19 @@ export const Tabs = ({ data = [], color = 'primary', ...props }: TabsBaseProps)
     console.log(event);
   };
 
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
   return (
-    <ThemeProvider theme={theme}>
-      <Box sx={{ width: '100%' }}>
-        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-          <TabsStyled value={value} color={color} onChange={handleChange} aria-label="basic tabs example" {...props}>
-            {data && data.map((item, key) => <TabStyled label={item.label} color={color} {...a11yProps(key)} />)}
-          </TabsStyled>
-        </Box>
-        {data &&
-          data.map((item, key) => (
-            <CustomTabPanel value={value} index={key}>
-              {item.children}
-            </CustomTabPanel>
-          ))}
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <TabsStyled value={value} color={color} onChange={handleChange} aria-label="basic tabs example" {...props}>
+          {data && data.map((item, key) => <TabStyled label={item.label} color={color} {...a11yProps(key)} />)}
+        </TabsStyled>
       </Box>
-    </ThemeProvider>
+      {data &&
+        data.map((item, key) => (
+          <CustomTabPanel value={value} index={key}>
+            {item.children}
+          </CustomTabPanel>
+        ))}
+    </Box>
   );
 };

package/src/components/Tag.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo } from 'react';
-import { Chip as MuiTag, ThemeProvider, useMediaQuery } from '@mui/material';
+import React from 'react';
+import { Chip as MuiTag } from '@mui/material';
 import { TagBaseProps } from '../interfaces';
-import { palette, themes } from '../helpers';
+import { palette } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { ColorVariant } from '@/types';
 
@@ -18,20 +18,16 @@ const colorMap: Record<ColorVariant, string> = {
 const TagStyled = styled(MuiTag)({});
 
 export const Tag = ({ label, color = 'primary', outlined = false, ...props }: TagBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
+  
   return (
-    <ThemeProvider theme={theme}>
-      <TagStyled
-        label={label}
-        sx={{
-          color: outlined !== true ? '#FFFF' : colorMap[color],
-          backgroundColor: outlined !== true ? colorMap[color] : 'inherit',
-          border: `1px solid ${colorMap[color]}`,
-        }}
-        {...props}
-      />
-    </ThemeProvider>
+    <TagStyled
+      label={label}
+      sx={{
+        color: outlined !== true ? '#FFFF' : colorMap[color],
+        backgroundColor: outlined !== true ? colorMap[color] : 'inherit',
+        border: `1px solid ${colorMap[color]}`,
+      }}
+      {...props}
+    />
   );
 };

package/src/components/TextField.tsx

@@ -1,10 +1,9 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
-import { FormControl, ThemeProvider, useMediaQuery, TextField as MuiTextField } from '@mui/material';
+import { FormControl, TextField as MuiTextField } from '@mui/material';
 
 import { TextFieldBaseProps } from '../interfaces';
 import { styled } from '@mui/material/styles';
-import { themes } from '../helpers';
 
 const TextFieldStyled = styled(MuiTextField)({
   textTransform: 'none',
@@ -12,13 +11,9 @@ const TextFieldStyled = styled(MuiTextField)({
 });
 
 export const TextField: React.FC<TextFieldBaseProps> = ({ label, ...props }) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
   return (
-    <ThemeProvider theme={theme}>
-      <FormControl sx={{ width: '100%' }}>
-        <TextFieldStyled {...props} label={label} />
-      </FormControl>
-    </ThemeProvider>
+    <FormControl sx={{ width: '100%' }}>
+      <TextFieldStyled {...props} label={label} />
+    </FormControl>
   );
 };

package/src/components/TimeLine.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react';
-import { ThemeProvider, useMediaQuery, Typography } from '@mui/material';
+import React from 'react';
+import { Typography } from '@mui/material';
 
 import {
   Timeline as MuiTimeLine,
@@ -14,7 +14,7 @@ import {
 import { TimeLineBaseProps } from '@/interfaces/TimeLine';
 
 import { styled } from '@mui/material/styles';
-import { palette, lightenRGB, themes } from '../helpers';
+import { palette, lightenRGB } from '../helpers';
 import { ColorVariant, DataTimeLine } from '@/types';
 
 const colorMap: Record<ColorVariant, string> = {
@@ -58,9 +58,7 @@ export const TimeLine: React.FC<TimeLineBaseProps> = ({
   position = 'left',
   ...props
 }) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.light), [prefersDarkMode]);
-
+  
   const renderList = data.map((item, key) => (
     <TimelineItem key={key}>
       <TimelineSeparator>
@@ -86,8 +84,6 @@ export const TimeLine: React.FC<TimeLineBaseProps> = ({
   ));
 
   return (
-    <ThemeProvider theme={theme}>
-      <TimeLineStyled {...props}>{renderList}</TimeLineStyled>
-    </ThemeProvider>
+    <TimeLineStyled {...props}>{renderList}</TimeLineStyled>
   );
 };

package/src/components/TimePicker.tsx

@@ -1,12 +1,10 @@
-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';
 import { TimePicker as MuiTimePicker } from '@mui/x-date-pickers/TimePicker';
 import { MobileTimePicker as MuiMobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
 import { DesktopTimePicker as MuiDesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
-import { themes } from '../helpers';
 import { styled } from '@mui/material/styles';
 
 import 'dayjs/locale/pt-br';
@@ -67,18 +65,14 @@ export const TimePicker = ({
   language = 'pt-br',
   variant = 'desktop',
 }: TimePickerBaseProps) => {
-  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' && <MuiTimePickerStyled label={label} timezone={timezone} />}
-          {variant === 'mobile' && <MuiMobileTimePickerStyled label={label} timezone={timezone} />}
-          {variant === 'desktop' && <MuiDesktopTimePickerStyled label={label} timezone={timezone} />}
-        </DemoContainer>
-      </LocalizationProvider>
-    </ThemeProvider>
+    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
+      <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
+        {variant === 'responsive' && <MuiTimePickerStyled label={label} timezone={timezone} />}
+        {variant === 'mobile' && <MuiMobileTimePickerStyled label={label} timezone={timezone} />}
+        {variant === 'desktop' && <MuiDesktopTimePickerStyled label={label} timezone={timezone} />}
+      </DemoContainer>
+    </LocalizationProvider>
   );
 };

package/src/index.ts

@@ -14,6 +14,7 @@ import { Tabs } from './components/Tabs';
 import { Tag } from './components/Tag';
 import { TextField } from './components/TextField';
 import { DatePicker } from './components/DatePicker';
+import { NormaProvider } from './providers/NormaProvider';
 import { themes, getPalette } from './helpers';
 
 export {
@@ -34,5 +35,6 @@ export {
   Tabs,
   Tag,
   TextField,
+  NormaProvider,
   themes,
 };

package/src/providers/NormaProvider.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ThemeProvider } from '@mui/material';
+import { ThemeProviderProps } from "@mui/material/styles/ThemeProvider";
+
+export const NormaProvider = (props:ThemeProviderProps) => {
+  const { theme, children } = props;
+  
+  return (
+    <ThemeProvider theme={theme}>
+      {children}
+    </ThemeProvider>
+  );
+};