norma-library 0.5.79 → 0.5.121

package/src/components/TimePicker.tsx

@@ -1,78 +1,78 @@
-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 { styled } from '@mui/material/styles';
-
-import 'dayjs/locale/pt-br';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
-
-import 'dayjs/locale/pt-br';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-import { TimePickerBaseProps } from '@/interfaces/TimePicker';
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-const MuiTimePickerStyled = styled(MuiTimePicker)({
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-    borderRadius: 0,
-    borderBottom: '1px solid #666666',
-  },
-  '& .MuiFormLabel-root': {
-    backgroundColor: '#fff',
-    padding: '0 5px',
-  },
-});
-
-const MuiMobileTimePickerStyled = styled(MuiMobileTimePicker)({
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-    borderRadius: 0,
-    borderBottom: '1px solid #666666',
-  },
-  '& .MuiFormLabel-root': {
-    backgroundColor: '#fff',
-    padding: '0 5px',
-  },
-});
-
-const MuiDesktopTimePickerStyled = styled(MuiDesktopTimePicker)({
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-    borderRadius: 0,
-    borderBottom: '1px solid #666666',
-  },
-  '& .MuiFormLabel-root': {
-    backgroundColor: '#fff',
-    padding: '0 5px',
-  },
-});
-
-export const TimePicker = ({
-  label,
-  timezone = 'America/Sao_Paulo',
-  language = 'pt-br',
-  variant = 'desktop',
-}: TimePickerBaseProps) => {
-
-  return (
-    <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>
-  );
-};
+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 { styled } from '@mui/material/styles';
+
+import 'dayjs/locale/pt-br';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+
+import 'dayjs/locale/pt-br';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+import { TimePickerBaseProps } from '@/interfaces/TimePicker';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const MuiTimePickerStyled = styled(MuiTimePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+const MuiMobileTimePickerStyled = styled(MuiMobileTimePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+const MuiDesktopTimePickerStyled = styled(MuiDesktopTimePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+export const TimePicker = ({
+  label,
+  timezone = 'America/Sao_Paulo',
+  language = 'pt-br',
+  variant = 'desktop',
+}: TimePickerBaseProps) => {
+
+  return (
+    <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/components/Typography/Text/index.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import { TextProps } from "./interfaces"
+import * as S from "./styles"
+
+const Text:React.FC<TextProps> = ({ 
+  children,
+  className,
+  size,
+  type
+}) => {
+  return (
+    <S.Container 
+      className={className} 
+      size={size} 
+      type={type}>
+      { children }
+    </S.Container>
+  ) 
+}
+
+export default Text

package/src/components/Typography/Text/interfaces.ts

@@ -0,0 +1,6 @@
+export interface TextProps {
+  children: JSX.Element[] | JSX.Element | string
+  className?: string
+  size: string
+  type: string
+}

package/src/components/Typography/Text/styles.tsx

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+import { TextProps } from "./interfaces";
+
+const setSize = (size: string) => {
+  switch (size) {
+    case "small":
+      return "12px";
+    case "medium":
+      return "14px";
+    case "large":
+      return "16px"
+    default:
+      return "14px";
+  }
+} 
+
+const setColor = (size: string) => {
+  switch (size) {
+    case "default":
+      return "var(--primary-project, var(--secondary, pink));";
+    case "secondary":
+      return "#808495";
+    case "success":
+      return "#6BC235"
+    case "warning":
+      return "#FF7F11"
+    case "danger":
+      return "#D63643"
+    case "info":
+      return "#43BBF2"
+    default:
+      return "#666";
+  }
+} 
+
+export const Container = styled.p<TextProps>`
+  margin: 0;
+  padding: 0;
+  color: ${props => setColor(props.type)};
+  font-size: ${props => setSize(props.size)};
+`

package/src/components/Typography/Title/index.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { TextProps } from "./interfaces"
+import * as S from "./styles"
+
+const Text:React.FC<TextProps> = ({ 
+  children,
+  className,
+  size,
+  type,
+  as
+}) => {
+  return (
+    <S.Container 
+      as={as}
+      className={className} 
+      size={size} 
+      type={type}>
+      { children }
+    </S.Container>
+  ) 
+}
+
+export default Text

package/src/components/Typography/Title/interfaces.ts

@@ -0,0 +1,7 @@
+export interface TextProps {
+  children: JSX.Element[] | JSX.Element | string
+  className?: string
+  size: string
+  type: string
+  as?: string
+}

package/src/components/Typography/Title/styles.tsx

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+import { TextProps } from "./interfaces";
+
+const setSize = (size: string) => {
+  switch (size) {
+    case "small":
+      return "18px";
+    case "medium":
+      return "24px";
+    case "large":
+      return "30px"
+    default:
+      return "24px";
+  }
+} 
+
+const setColor = (size: string) => {
+  switch (size) {
+    case "default":
+      return "#000";
+    case "secondary":
+      return "#666";
+    case "success":
+      return "#6BC235"
+    case "warning":
+      return "#FF7F11"
+    case "danger":
+      return "#D63643"
+    case "info":
+      return "#43BBF2"
+    default:
+      return "#000";
+  }
+} 
+
+export const Container = styled.h1<TextProps>`
+  margin: 0;
+  padding: 0;
+  color: ${props => setColor(props.type)};
+  font-size: ${props => setSize(props.size)};
+`

package/src/components/Typography/index.tsx

@@ -0,0 +1,7 @@
+import Text from "./Text";
+import Title from "./Title"
+
+export {
+  Text,
+  Title
+}

package/src/components/UncontrolledTable/components/header/index.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import * as S from './styles';
+import SettingsIcon from '@mui/icons-material/Settings';
+
+const Header: React.FC<any> = ({
+  table,
+  showTotalResults,
+  showSettings,
+  showClearFiels,
+  onClearFieldsClick,
+  customTotalResults,
+  clearLabel,
+}) => {
+  const [openTools, setOpenTools] = useState(false);
+
+  return (
+    <S.Header $showResults={showTotalResults}>
+      <div>
+        {showTotalResults && (
+          <S.Results>
+            <S.TextResult>
+              {customTotalResults ? customTotalResults : `${table.getRowModel().rows.length} resultados encontrados.`}
+            </S.TextResult>
+          </S.Results>
+        )}
+        {showClearFiels && (
+          <S.TextClearSearch onClick={() => onClearFieldsClick && onClearFieldsClick()}>
+            {clearLabel || 'Limpar busca'}
+          </S.TextClearSearch>
+        )}
+      </div>
+      <S.Tools>
+        {showSettings ? (
+          <S.IconTools onClick={() => setOpenTools(!openTools)}>
+            <SettingsIcon sx={{ fontSize: 16, color: '#DE8B50' }} />
+          </S.IconTools>
+        ) : null}
+        {openTools ? (
+          <S.ListTools>
+            {table.getAllLeafColumns().map((column: any) => {
+              return (
+                <div key={column.id} className="px-1">
+                  <label>
+                    <input
+                      {...{
+                        type: 'checkbox',
+                        checked: column.getIsVisible(),
+                        onChange: column.getToggleVisibilityHandler(),
+                      }}
+                    />
+                    {column.id}
+                  </label>
+                </div>
+              );
+            })}
+          </S.ListTools>
+        ) : null}
+      </S.Tools>
+    </S.Header>
+  );
+};
+
+export default Header;

package/src/components/UncontrolledTable/components/header/styles.tsx

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+
+export const Header = styled.div<any>`
+  margin: ${props => (props.$showResults ? '0 24px 10px 24px;' : '0 16px;')};
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const Results = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const Tools = styled.div``;
+
+export const TextResult = styled.div`
+  color: #666666;
+  font-size: 16px;
+`;
+
+export const TextClearSearchContent = styled.div`
+  height: 10px;
+`;
+
+export const TextClearSearch = styled.p`
+  color: #de8b50;
+  font-size: 14px;
+  cursor: pointer;
+  margin: 0;
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export const IconTools = styled.div`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+`;
+
+export const ListTools = styled.div`
+  padding: 12px;
+  margin: 6px 0 0 -106px;
+  position: absolute;
+  background: #fff;
+  box-shadow: 0px 3px 6px #00000029;
+  border: 1px solid #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 14px;
+  z-index: 99;
+  label {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+`;

package/src/components/UncontrolledTable/components/index.tsx

@@ -0,0 +1,9 @@
+import Pagination from "./pagination";
+import Header from "./header"
+import TBody from "./tbody";
+
+export {
+  Pagination,
+  Header,
+  TBody
+}

package/src/components/UncontrolledTable/components/pagination/index.tsx

@@ -0,0 +1,40 @@
+import React, { useCallback } from "react"
+import { Pagination as MuiPagination, PaginationItem } from '@mui/material'
+import * as S from "./styles"
+
+const PreviousPagination:React.FC<any> = () => {
+  return <span>{'<'}</span>
+}
+const NextPagination:React.FC<any> = () => {
+  return <span>{'>'}</span>
+}
+
+const Pagination:React.FC<any> = ({ table, onChangePage }) => {
+  
+  const onPageChange = useCallback((_event:React.ChangeEvent<unknown>, page:number) => {
+    if(!!onChangePage) {
+      onChangePage(page-1)
+    } else {
+      table.setPageIndex(page - 1)
+    }
+  }, [table])
+
+  return <S.Pagination>
+    <div className='content'>
+      <MuiPagination
+        onChange={onPageChange}
+        count={table.getPageCount()}
+        renderItem={(item:any) => (
+          <PaginationItem
+            classes={{root: 'button', selected: 'button-active'}}
+            slots={{ previous: PreviousPagination, next: NextPagination }}
+            sx={{height: '35px', minWidth: '35px'}}
+            {...item}
+          />
+        )}
+      />
+    </div>
+  </S.Pagination>
+}
+
+export default Pagination

package/src/components/UncontrolledTable/components/pagination/styles.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const Pagination = styled.div`
+  width: 100%;
+  margin: 24px 0 0 0;
+  display: flex;
+  justify-content: center;
+  .content {
+    display: flex;
+    gap: 8px;
+    .button {
+      border: 1px solid #E8E9EC;
+      background: #fff;
+      border-radius: 4px;
+      color: #4D4F5C;
+      cursor: pointer;
+      &:disabled {
+        opacity: 0.4;
+      }
+    }
+    .button-active {
+      border: 1px solid #FFDB9F;
+      background: #FFDB9F;
+      color: #B74616;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  }
+`

package/src/components/UncontrolledTable/components/tbody/index.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import { flexRender } from '@tanstack/react-table'
+import * as S from "./styles"
+
+const TBody:React.FC<any> = ({ table, onClick, onMouseOver, onMouseOut }) => {
+  return (
+    <tbody>
+      { table.getRowModel().rows.map((row: any, index: number) => {
+        return <S.Tr 
+          key={index} 
+          $hasAction={!!onClick || !!onMouseOver || !!onMouseOut}
+          onClick={() => onClick ? onClick(row.original) : null}
+          onMouseOver={() => onMouseOver ? onMouseOver(row.original) : null}
+          onMouseOut={() => onMouseOut ? onMouseOut(row.original) : null}>
+          { row.getVisibleCells().map((cell: any, index: number) => {
+            return (
+              <td key={index}>
+                { cell.column.columnDef.type == 'action'
+                    ? cell.getValue()
+                    : flexRender(cell.column.columnDef.cell, cell.getContext()) 
+                }
+              </td>
+            )
+          }) }
+        </S.Tr>
+      }) }
+    </tbody>
+  )
+}
+
+export default TBody

package/src/components/UncontrolledTable/components/tbody/styles.tsx

@@ -0,0 +1,5 @@
+import styled from "styled-components"
+
+export const Tr = styled.tr<any>`
+  cursor: ${props => props.$hasAction  ? 'pointer' : 'default' };
+`