norma-library 0.6.3 → 0.6.5

package/src/components/Table/interface.ts

@@ -1,24 +1,24 @@
-import { ColumnDef } from '@tanstack/react-table'
-
-export interface TablePropos {
-  data: any
-  columns: ColumnDef<ColumnsTable>[]
-  onClick: any
-  onMouseOver: any
-  onMouseOut: any
-  showTotalResults: boolean
-  showSettings: boolean
-  minHeight: string
-  rowCount: number
-  onChangePage?: (page:number) => void
-  pagination?: {pageIndex:number, pageSize:number, totalPages:number}
-  customTotalResult?: string
-}
-
-export interface ColumnsTable {
-  header: string,
-  accessorKey: string,
-  type: string,
-  enableColumnFilter: boolean,
-  filterFn: string
+import { ColumnDef } from '@tanstack/react-table'
+
+export interface TablePropos {
+  data: any
+  columns: ColumnDef<ColumnsTable>[]
+  onClick: any
+  onMouseOver: any
+  onMouseOut: any
+  showTotalResults: boolean
+  showSettings: boolean
+  minHeight: string
+  rowCount: number
+  onChangePage?: (page:number) => void
+  pagination?: {pageIndex:number, pageSize:number, totalPages:number}
+  customTotalResult?: string
+}
+
+export interface ColumnsTable {
+  header: string,
+  accessorKey: string,
+  type: string,
+  enableColumnFilter: boolean,
+  filterFn: string
 }

package/src/components/Table/styles.tsx

@@ -1,118 +1,118 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  width: 100%;
-  background: #fff;
-  box-shadow: 0px 2px 6px #0000000A;
-  padding: 24px 0;
-`
-
-export const Content = styled.div<any>`
-  min-height: ${props => props.minHeight ? props.minHeight : 'auto'};
-`
-
-export const Table = styled.table`
-  border-collapse: collapse;
-  width: 100%;
-  thead {
-    tr {
-      border-bottom: 1px solid #E0E0E0;
-      th {
-        padding: 12px 24px;
-      }
-    }
-  }
-  tbody {
-    tr {
-      td {
-        padding: 16px 24px;
-        color: #666666;
-        font-size: 14px;
-      }
-    }
-    tr:nth-child(even) {
-      background: #FAFAFA;
-      border-bottom: 1px solid #f1f1f1;
-      border-top: 1px solid #f1f1f1;
-    }
-  }
-`
-
-export const TextColumn = styled.span`
-  color: #666666;
-  font-size: 14px;
-`
-
-export const ColumnContent = styled.div`
-  gap: 2px;
-  align-items: center;
-  display: flex;
-`
-
-export const IconFilterDialog = styled.div`
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-`
-
-export const backgroundDialog = styled.div`
-  width: 100%;
-  position: absolute;
-  height: 100vh;
-  background: transparent;
-  top: 0;
-  left: 0;
-`
-
-export const FilterDialog = styled.div`
-  padding: 8px;
-  margin: 6px 0px 0 0;
-  position: absolute;
-  width: 302px;
-  background: #fff;
-  box-shadow: 0px 3px 6px #00000029;
-  border: 1px solid #E0E0E0;
-`
-
-export const ListFilterDialog = styled.div`
-  display: flex;
-  flex-direction: column;
-  .label {
-    margin: 0 0 8px 0;
-    color: #666666;
-    font-size: 14px;
-    font-weight: 400;
-    text-align: left;
-  }
-  .select {
-    border: 1px solid #E0E0E0;
-    padding: 8px 12px;
-  }
-`
-
-export const OptionFilterDialog = styled.div`
-  display: flex;
-  gap: 16px;
-  align-items: center;
-  padding: 6px 8px;
-  cursor: pointer;
-  &:hover {
-    background: rgba(0, 0, 0, 0.04);
-  }
-  .icon {
-    color: #666;
-  }
-  .rotate {
-    rotate: 180deg;
-  }
-  div {
-    width: 20px;
-    height: 20px;
-  }
-  p {
-    margin: 0;
-    color: #666666;
-    font-size: 16px;
-    font-weight: 400;
-  }
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100%;
+  background: #fff;
+  box-shadow: 0px 2px 6px #0000000A;
+  padding: 24px 0;
+`
+
+export const Content = styled.div<any>`
+  min-height: ${props => props.minHeight ? props.minHeight : 'auto'};
+`
+
+export const Table = styled.table`
+  border-collapse: collapse;
+  width: 100%;
+  thead {
+    tr {
+      border-bottom: 1px solid #E0E0E0;
+      th {
+        padding: 12px 24px;
+      }
+    }
+  }
+  tbody {
+    tr {
+      td {
+        padding: 16px 24px;
+        color: #666666;
+        font-size: 14px;
+      }
+    }
+    tr:nth-child(even) {
+      background: #FAFAFA;
+      border-bottom: 1px solid #f1f1f1;
+      border-top: 1px solid #f1f1f1;
+    }
+  }
+`
+
+export const TextColumn = styled.span`
+  color: #666666;
+  font-size: 14px;
+`
+
+export const ColumnContent = styled.div`
+  gap: 2px;
+  align-items: center;
+  display: flex;
+`
+
+export const IconFilterDialog = styled.div`
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+`
+
+export const backgroundDialog = styled.div`
+  width: 100%;
+  position: absolute;
+  height: 100vh;
+  background: transparent;
+  top: 0;
+  left: 0;
+`
+
+export const FilterDialog = styled.div`
+  padding: 8px;
+  margin: 6px 0px 0 0;
+  position: absolute;
+  width: 302px;
+  background: #fff;
+  box-shadow: 0px 3px 6px #00000029;
+  border: 1px solid #E0E0E0;
+`
+
+export const ListFilterDialog = styled.div`
+  display: flex;
+  flex-direction: column;
+  .label {
+    margin: 0 0 8px 0;
+    color: #666666;
+    font-size: 14px;
+    font-weight: 400;
+    text-align: left;
+  }
+  .select {
+    border: 1px solid #E0E0E0;
+    padding: 8px 12px;
+  }
+`
+
+export const OptionFilterDialog = styled.div`
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 6px 8px;
+  cursor: pointer;
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .icon {
+    color: #666;
+  }
+  .rotate {
+    rotate: 180deg;
+  }
+  div {
+    width: 20px;
+    height: 20px;
+  }
+  p {
+    margin: 0;
+    color: #666666;
+    font-size: 16px;
+    font-weight: 400;
+  }
 `

package/src/components/Tabs.tsx

@@ -1,105 +1,105 @@
-import React from 'react';
-import { Box, Tabs as MuiTabs, Tab } from '@mui/material';
-import { TabPanelProps, TabsBaseProps } from '../interfaces';
-import { palette } from '../helpers';
-import { styled } from '@mui/material/styles';
-import { ColorVariant } from '@/types';
-
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
-
-const TabsStyled = styled(MuiTabs)<{
-  color: ColorVariant;
-}>(({ color }) => ({
-  borderBottom: '1px solid #e8e8e8',
-  '& .Mui-selected': {
-    color: colorMap[color],
-  },
-  '& .MuiTabs-indicator': {
-    backgroundColor: colorMap[color],
-  },
-  '& .MuiButtonBase-root': {
-    textTransform: 'none',
-  },
-}));
-
-interface StyledTabProps {
-  label: string;
-  color: ColorVariant;
-}
-
-const TabStyled = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(({ theme, color }) => ({
-  textTransform: 'none',
-  fontWeight: theme.typography.fontWeightRegular,
-  fontSize: theme.typography.pxToRem(15),
-  marginRight: theme.spacing(1),
-  color: '#666666',
-  padding: '5px 15px',
-  top: '5px',
-  minWidth: '60px',
-  '&.Mui-selected': {
-    color: colorMap[color],
-  },
-  '&.Mui-focusVisible': {
-    backgroundColor: 'rgba(100, 95, 228, 0.32)',
-  },
-}));
-
-function CustomTabPanel(props: TabPanelProps) {
-  const { children, value, index, ...other } = props;
-
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}
-    >
-      {value === index && (
-        <Box sx={{ p: 3 }}>
-          {children}
-        </Box>
-      )}
-    </div>
-  );
-}
-
-function a11yProps(index: number) {
-  return {
-    id: `simple-tab-${index}`,
-    'aria-controls': `simple-tabpanel-${index}`,
-  };
-}
-
-export const Tabs = ({ data = [], color = 'primary', onChange, ...props }: TabsBaseProps) => {
-  const [value, setValue] = React.useState(0);
-
-  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-    setValue(newValue);
-    if(!!onChange) onChange(event, newValue)
-  };
-
-  return (
-    <Box sx={{ width: '100%' }}>
-      <Box>
-        <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>
-  );
-};
+import React from 'react';
+import { Box, Tabs as MuiTabs, Tab } from '@mui/material';
+import { TabPanelProps, TabsBaseProps } from '../interfaces';
+import { palette } from '../helpers';
+import { styled } from '@mui/material/styles';
+import { ColorVariant } from '@/types';
+
+const colorMap: Record<ColorVariant, string> = {
+  inherit: palette.inherit,
+  primary: palette.primary,
+  secondary: palette.secondary,
+  error: palette.error,
+  warning: palette.warning,
+  info: palette.info,
+  success: palette.success,
+};
+
+const TabsStyled = styled(MuiTabs)<{
+  color: ColorVariant;
+}>(({ color }) => ({
+  borderBottom: '1px solid #e8e8e8',
+  '& .Mui-selected': {
+    color: colorMap[color],
+  },
+  '& .MuiTabs-indicator': {
+    backgroundColor: colorMap[color],
+  },
+  '& .MuiButtonBase-root': {
+    textTransform: 'none',
+  },
+}));
+
+interface StyledTabProps {
+  label: string;
+  color: ColorVariant;
+}
+
+const TabStyled = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(({ theme, color }) => ({
+  textTransform: 'none',
+  fontWeight: theme.typography.fontWeightRegular,
+  fontSize: theme.typography.pxToRem(15),
+  marginRight: theme.spacing(1),
+  color: '#666666',
+  padding: '5px 15px',
+  top: '5px',
+  minWidth: '60px',
+  '&.Mui-selected': {
+    color: colorMap[color],
+  },
+  '&.Mui-focusVisible': {
+    backgroundColor: 'rgba(100, 95, 228, 0.32)',
+  },
+}));
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          {children}
+        </Box>
+      )}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+export const Tabs = ({ data = [], color = 'primary', onChange, ...props }: TabsBaseProps) => {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+    if(!!onChange) onChange(event, newValue)
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box>
+        <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>
+  );
+};

package/src/components/Tag.tsx

@@ -1,33 +1,33 @@
-import React from 'react';
-import { Chip as MuiTag } from '@mui/material';
-import { TagBaseProps } from '../interfaces';
-import { palette } from '../helpers';
-import { styled } from '@mui/material/styles';
-import { ColorVariant } from '@/types';
-
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
-
-const TagStyled = styled(MuiTag)({});
-
-export const Tag = ({ label, color = 'primary', outlined = false, ...props }: TagBaseProps) => {
-  
-  return (
-    <TagStyled
-      label={label}
-      sx={{
-        color: outlined !== true ? '#FFFF' : colorMap[color],
-        backgroundColor: outlined !== true ? colorMap[color] : 'inherit',
-        border: `1px solid ${colorMap[color]}`,
-      }}
-      {...props}
-    />
-  );
-};
+import React from 'react';
+import { Chip as MuiTag } from '@mui/material';
+import { TagBaseProps } from '../interfaces';
+import { palette } from '../helpers';
+import { styled } from '@mui/material/styles';
+import { ColorVariant } from '@/types';
+
+const colorMap: Record<ColorVariant, string> = {
+  inherit: palette.inherit,
+  primary: palette.primary,
+  secondary: palette.secondary,
+  error: palette.error,
+  warning: palette.warning,
+  info: palette.info,
+  success: palette.success,
+};
+
+const TagStyled = styled(MuiTag)({});
+
+export const Tag = ({ label, color = 'primary', outlined = false, ...props }: TagBaseProps) => {
+  
+  return (
+    <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,19 +1,19 @@
-import React from 'react';
-
-import { FormControl, TextField as MuiTextField } from '@mui/material';
-
-import { TextFieldBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const TextFieldStyled = styled(MuiTextField)({
-  textTransform: 'none',
-  color: 'currentcolor',
-});
-
-export const TextField: React.FC<TextFieldBaseProps> = ({ label, ...props }) => {
-  return (
-    <FormControl sx={{ width: '100%' }}>
-      <TextFieldStyled {...props} label={label} />
-    </FormControl>
-  );
-};
+import React from 'react';
+
+import { FormControl, TextField as MuiTextField } from '@mui/material';
+
+import { TextFieldBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const TextFieldStyled = styled(MuiTextField)({
+  textTransform: 'none',
+  color: 'currentcolor',
+});
+
+export const TextField: React.FC<TextFieldBaseProps> = ({ label, ...props }) => {
+  return (
+    <FormControl sx={{ width: '100%' }}>
+      <TextFieldStyled {...props} label={label} />
+    </FormControl>
+  );
+};

package/src/components/TextInput/index.tsx

@@ -1,38 +1,38 @@
-import React, { useState } from "react"
-import * as S from "./styles"
-import { TextInputProps } from "./interface"
-
-const TextInput:React.FC<TextInputProps> = ({ 
-  label, 
-  className,
-  onChange,
-  disabled,
-  placeholder,
-  name,
-  type,
-  value
-}) => {
-  const [valueSelected, setValueSelected] = useState(value)
-
-  const changeValue = (event: any) => {
-    const { value } = event.target
-    setValueSelected(value)
-    onChange(event)
-  }
-
-  return (
-    <S.Container className={className}>
-      <S.Label>{label}</S.Label>
-      <S.Input 
-        type={type}
-        name={name}
-        value={valueSelected}
-        placeholder={placeholder} 
-        disabled={disabled} 
-        onChange={(event) => changeValue(event)} 
-      />
-    </S.Container>
-  )
-}
-
+import React, { useState } from "react"
+import * as S from "./styles"
+import { TextInputProps } from "./interface"
+
+const TextInput:React.FC<TextInputProps> = ({ 
+  label, 
+  className,
+  onChange,
+  disabled,
+  placeholder,
+  name,
+  type,
+  value
+}) => {
+  const [valueSelected, setValueSelected] = useState(value)
+
+  const changeValue = (event: any) => {
+    const { value } = event.target
+    setValueSelected(value)
+    onChange(event)
+  }
+
+  return (
+    <S.Container className={className}>
+      <S.Label>{label}</S.Label>
+      <S.Input 
+        type={type}
+        name={name}
+        value={valueSelected}
+        placeholder={placeholder} 
+        disabled={disabled} 
+        onChange={(event) => changeValue(event)} 
+      />
+    </S.Container>
+  )
+}
+
 export default TextInput