norma-library 0.5.80 → 0.5.122

package/src/components/Table/styles.tsx

@@ -0,0 +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;
+  }
+`

package/src/components/Tabs.tsx

@@ -1,106 +1,106 @@
-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),
-  font: 'normal normal normal 15px/25px Source Sans Pro',
-  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),
+  font: 'normal normal normal 15px/25px Source Sans Pro',
+  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

@@ -0,0 +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>
+  )
+}
+
+export default TextInput

package/src/components/TextInput/interface.ts

@@ -0,0 +1,10 @@
+export interface TextInputProps {
+  className?: string
+  label: string 
+  onChange: Function
+  disabled?: boolean
+  placeholder?: string
+  name?: string
+  type?: string
+  value: string
+}

package/src/components/TextInput/styles.tsx

@@ -0,0 +1,24 @@
+import styled from "styled-components"
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`
+
+export const Label = styled.label`
+  font-size: 14px;
+  margin: 0 0 4px 0;
+  color: #666;
+`
+
+export const Input = styled.input`
+  border: none;
+  color: #4D4F5C;
+  border-bottom: 1px solid #00000033;
+  outline: none;
+  font-size: 18px;
+  padding: 8px;
+  width: 100%;
+  font-size: 16px;
+`

package/src/components/TimeLine.tsx

@@ -1,89 +1,89 @@
-import React from 'react';
-import { Typography } from '@mui/material';
-
-import {
-  Timeline as MuiTimeLine,
-  TimelineItem,
-  timelineItemClasses,
-  TimelineSeparator,
-  TimelineConnector,
-  TimelineContent,
-  TimelineDot,
-} from '@mui/lab';
-
-import { TimeLineBaseProps } from '@/interfaces/TimeLine';
-
-import { styled } from '@mui/material/styles';
-import { palette, lightenRGB } from '../helpers';
-import { ColorVariant, DataTimeLine } 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 sampleData: Array<DataTimeLine> = [
-  {
-    title: 'imported register',
-    data: '01/04/2023 at 07h00',
-    by: 'By IEM',
-  },
-  {
-    title: '80% score applied on register',
-    data: '01/04/2023 at 07h05',
-    by: 'By IEM',
-  },
-  {
-    title: 'Registers transfered to campaign ID 10',
-    data: '',
-    by: '',
-  },
-];
-
-const TimeLineStyled = styled(MuiTimeLine)({
-  [`& .${timelineItemClasses.root}:before`]: {
-    flex: 0,
-    padding: 0,
-  },
-});
-
-export const TimeLine: React.FC<TimeLineBaseProps> = ({
-  data = sampleData,
-  color = 'primary',
-  position = 'left',
-  ...props
-}) => {
-  
-  const renderList = data.map((item, key) => (
-    <TimelineItem key={key}>
-      <TimelineSeparator>
-        <TimelineDot
-          sx={{
-            bgcolor: colorMap[color],
-            p: '6px',
-            border: `4px solid ${lightenRGB(colorMap[color], 50)}`,
-          }}
-        />
-        {key !== data.length - 1 && <TimelineConnector sx={{ bgcolor: colorMap[color], pt: '55px', pl: '3px' }} />}
-      </TimelineSeparator>
-      <TimelineContent>
-        {item.title}
-        <Typography sx={{ m: 'auto 0' }} variant="body2" color="text.secondary">
-          {item.data}
-        </Typography>
-        <Typography sx={{ m: 'auto 0', color: colorMap[color] }} variant="body2">
-          {item.by}
-        </Typography>
-      </TimelineContent>
-    </TimelineItem>
-  ));
-
-  return (
-    <TimeLineStyled {...props}>{renderList}</TimeLineStyled>
-  );
-};
+import React from 'react';
+import { Typography } from '@mui/material';
+
+import {
+  Timeline as MuiTimeLine,
+  TimelineItem,
+  timelineItemClasses,
+  TimelineSeparator,
+  TimelineConnector,
+  TimelineContent,
+  TimelineDot,
+} from '@mui/lab';
+
+import { TimeLineBaseProps } from '@/interfaces/TimeLine';
+
+import { styled } from '@mui/material/styles';
+import { palette, lightenRGB } from '../helpers';
+import { ColorVariant, DataTimeLine } 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 sampleData: Array<DataTimeLine> = [
+  {
+    title: 'imported register',
+    data: '01/04/2023 at 07h00',
+    by: 'By IEM',
+  },
+  {
+    title: '80% score applied on register',
+    data: '01/04/2023 at 07h05',
+    by: 'By IEM',
+  },
+  {
+    title: 'Registers transfered to campaign ID 10',
+    data: '',
+    by: '',
+  },
+];
+
+const TimeLineStyled = styled(MuiTimeLine)({
+  [`& .${timelineItemClasses.root}:before`]: {
+    flex: 0,
+    padding: 0,
+  },
+});
+
+export const TimeLine: React.FC<TimeLineBaseProps> = ({
+  data = sampleData,
+  color = 'primary',
+  position = 'left',
+  ...props
+}) => {
+  
+  const renderList = data.map((item, key) => (
+    <TimelineItem key={key}>
+      <TimelineSeparator>
+        <TimelineDot
+          sx={{
+            bgcolor: colorMap[color],
+            p: '6px',
+            border: `4px solid ${lightenRGB(colorMap[color], 50)}`,
+          }}
+        />
+        {key !== data.length - 1 && <TimelineConnector sx={{ bgcolor: colorMap[color], pt: '55px', pl: '3px' }} />}
+      </TimelineSeparator>
+      <TimelineContent>
+        {item.title}
+        <Typography sx={{ m: 'auto 0' }} variant="body2" color="text.secondary">
+          {item.data}
+        </Typography>
+        <Typography sx={{ m: 'auto 0', color: colorMap[color] }} variant="body2">
+          {item.by}
+        </Typography>
+      </TimelineContent>
+    </TimelineItem>
+  ));
+
+  return (
+    <TimeLineStyled {...props}>{renderList}</TimeLineStyled>
+  );
+};