norma-library 0.5.817 → 0.6.0

package/src/components/ProgressBar.tsx

@@ -1,47 +1,71 @@
 import React from 'react';
-import {
-  LinearProgress as MuiProgressBar,
-  linearProgressClasses,
-  Typography,
-} from '@mui/material';
-
-import { ProgressBarBaseProps } from '../interfaces';
+import { LinearProgress as MuiProgressBar, linearProgressClasses, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import { ProgressBarBaseProps, CustomColor } from '../interfaces';
 
-const ProgressBarStyled = styled(MuiProgressBar)({
+const ProgressBarStyled = styled(MuiProgressBar)<{ colorCustom?: CustomColor; $h?: number }>(({ colorCustom, $h }) => ({
   width: '100%',
-  height: '10px',
+  height: $h ? `${$h}px` : '10px',
   borderRadius: '10px',
   position: 'relative',
-  backgroundColor: `&.${linearProgressClasses.determinate} {
-    background-color: #e0e0e0,
-  }`,
-});
+  backgroundColor: colorCustom ? colorCustom.root : undefined,
+  [`&.${linearProgressClasses.determinate}`]: {
+    backgroundColor: colorCustom ? colorCustom.root : undefined,
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    backgroundColor: colorCustom ? colorCustom.bar : undefined,
+  },
+}));
 
-const ProgressBarLabelStyled = styled(Typography)`
+const ProgressBarLabelStyled = styled(Typography)<{ $fSize?: string }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 8px;
   position: relative;
   text-align: left;
-  font: normal normal normal 16px/20px Source Sans Pro;
+  font-size: ${({ $fSize }) => $fSize || '1rem'};
 `;
 
-export const ProgressBar = ({ value = 0, label, variant = 'determinate', total, className, ...props }: ProgressBarBaseProps) => {
+export const ProgressBar = ({
+  value = 0,
+  label,
+  variant = 'determinate',
+  total,
+  className,
+  localeString,
+  colorCustom,
+  color = 'primary',
+  htmlLabel,
+  ...props
+}: ProgressBarBaseProps) => {
   const percentage = value && total ? (value / total) * 100 : 0;
 
   return (
     <div className={className} style={{ minWidth: '100px' }}>
-      {label && (
-        <ProgressBarLabelStyled>
-          {label}
-          <span style={{ right: 0 }}>
-            {value} ({percentage.toFixed(2)}%)
-          </span>
+      {label ? (
+        <ProgressBarLabelStyled $fSize={props.fSize} className="ProgressBarLabel">
+          <>
+            {label}
+            {!props.hideValue && (
+              <span style={{ right: 0 }}>
+                {localeString ? value.toLocaleString() : value} ({percentage.toFixed(2)}%)
+              </span>
+            )}
+          </>
         </ProgressBarLabelStyled>
+      ) : (
+        htmlLabel
       )}
-      <ProgressBarStyled value={percentage} variant={variant} {...props} />
+
+      <ProgressBarStyled
+        value={percentage}
+        variant={variant}
+        colorCustom={colorCustom}
+        $h={props.h}
+        color={colorCustom ? undefined : color}
+        {...props}
+      />
     </div>
   );
 };

package/src/components/RadioGroup.tsx

@@ -15,15 +15,17 @@ const RadioStyled = styled(MuiRadio)({});
 const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
 
 export const RadioGroup = ({ ...props }: RadioBaseProps) => {
+  const { onChange } = props;
   
   return (
-    <FormControl>
+    <FormControl disabled={props.disabled}>
       <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}
+        onChange={!!onChange ? (event, value) => onChange(event, value) : undefined}
       >
         {props.options &&
           props.options.map((item, key) => (
@@ -32,6 +34,7 @@ export const RadioGroup = ({ ...props }: RadioBaseProps) => {
               control={<RadioStyled color={props.color} size={item.size ? item.size : sizes[1]} />}
               label={item.label}
               key={key}
+              sx={{alignItems: "start"}}
             />
           ))}
       </MuiRadioGroup>

package/src/components/RangerSlider.tsx

@@ -17,6 +17,7 @@ const colorMap: Record<ColorVariant, string> = {
 
 const RangerSliderStyled = styled(MuiSlider)(() => ({
   height: 8,
+  color: colorMap['primary'],
   '& .MuiSlider-track': {
     border: 'none',
   },
@@ -39,16 +40,17 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
   '& .MuiSlider-valueLabel': {
     fontSize: 12,
     fontWeight: 'normal',
-    top: 40,
+    top: 48,
     position: 'absolute',
-    backgroundColor: 'unset',
+    transition: 'none',
     color: colorMap['primary'],
     '&:before': {
-      display: 'none',
+      bottom: 'inherit',
+      top: '-8px',
     },
     '& *': {
       background: 'transparent',
-      color: '#000',
+      color: '#FFF',
     },
   },
   '& .MuiSlider-rail': {
@@ -59,7 +61,5 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
 }));
 
 export const RangerSlider = ({ defaultValue = 50, color = 'primary', ...props }: RangerSliderBaseProps) => {
-  return (
-    <RangerSliderStyled aria-label="Default" color={color} {...props} />
-  );
+  return <RangerSliderStyled aria-label="Default" color={color} {...props} />;
 };

package/src/components/StatusModal/StatusModal.style.tsx

@@ -0,0 +1,75 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 9999;
+`;
+
+export const Modal = styled.div<{ $w?: string }>`
+  display: flex;
+  width: ${props => props.$w || '430px'};
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  border-radius: 4px;
+  background: #fff;
+`;
+
+export const ModalHeader = styled.div`
+  display: flex;
+  gap: 16px;
+  align-self: stretch;
+  align-items: center;
+`;
+
+export const ModalIcon = styled.div<{ $bg: string }>`
+  display: flex;
+  padding: 4px;
+  align-items: center;
+  border-radius: 4px;
+  background-color: ${props => props.$bg};
+`;
+
+export const ModalTitle = styled.h1`
+  color: #1d1d1d;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.25px;
+  margin: 0;
+`;
+
+export const ModalBody = styled.div`
+  display: flex;
+  width: 100%;
+  border-bottom: 2px solid #a3a3a3;
+  margin-top: 16px;
+  padding-bottom: 32px;
+`;
+
+export const ModalText = styled.p`
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.17px;
+  margin: 0;
+  line-height: 1.3;
+`;
+
+export const ModalFooter = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  margin-top: 8px;
+  gap: 8px;
+`;

package/src/components/StatusModal/StatusModal.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { WarningRounded, CheckCircleRounded, InfoRounded } from '@mui/icons-material';
+
+import * as S from './StatusModal.style';
+import { Button } from '../Button';
+import { OnAction } from '@/types';
+
+interface ModalStatusProps {
+  title: string;
+  text: string;
+  type: 'success' | 'info' | 'warning';
+  actions: OnAction[];
+  w?: string;
+}
+
+export const ModalStatus = (props: ModalStatusProps) => {
+  const { title, text, type, actions, w } = props;
+
+  const iconBgColor = {
+    warning: '#FFDB9F',
+    info: '#D9FCFE',
+    success: '#C9F5CB',
+  };
+
+  return (
+    <S.Container>
+      <S.Modal $w={w}>
+        <S.ModalHeader>
+          <S.ModalIcon $bg={iconBgColor[type]}>
+            {type === 'warning' && <WarningRounded sx={{ fill: '#B74608' }} />}
+            {type === 'info' && <InfoRounded sx={{ fill: '#154F8C' }} />}
+            {type === 'success' && <CheckCircleRounded sx={{ fill: '#2E7D32' }} />}
+          </S.ModalIcon>
+          <S.ModalTitle>{title}</S.ModalTitle>
+        </S.ModalHeader>
+        <S.ModalBody>
+          <S.ModalText>{text}</S.ModalText>
+        </S.ModalBody>
+        <S.ModalFooter>
+          {actions.map((action, key) => {
+            return (
+              <Button
+                key={key}
+                color={action.color || 'primary'}
+                variant={action.variant || 'contained'}
+                disabled={action.disabled}
+                onClick={action.action}
+              >
+                {action.label}
+              </Button>
+            );
+          })}
+        </S.ModalFooter>
+      </S.Modal>
+    </S.Container>
+  );
+};

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

@@ -11,16 +11,19 @@ const Header:React.FC<any> = ({
   showSettings,
   setGlobalFilters,
   setOrderLargest,
-  setOrderSmallest
+  setOrderSmallest,
+  customTotalResult
 }) => {
   const [openTools, setOpenTools] = useState(false)
 
+  const totalResults = customTotalResult ? customTotalResult : `${table.getRowModel().rows.length} resultados encontrados.`
+
   return (
     <S.Header $showResults={showTotalResults}>
       <div>
       { showTotalResults
           ? <S.Results>
-              <S.TextResult>{ table.getRowModel().rows.length } resultados encontrados.</S.TextResult>
+              <S.TextResult>{totalResults}</S.TextResult>
               <S.TextClearSearchContent>
                 { globalFilters.length || !!orderSmallest || !!orderLargest ? <S.TextClearSearch onClick={() => {
                   table.resetColumnFilters(true)

package/src/components/Table/index.tsx

@@ -14,7 +14,7 @@ import { Button } from "@mui/material";
 import { TablePropos } from './interface';
 import { Pagination, Header, TBody } from "./components"
 
-const Table:React.FC<TablePropos> = ({ data, columns, onClick, onMouseOver, onMouseOut, showTotalResults, showSettings, pagination, rowCount, onChangePage }) => {
+const Table:React.FC<TablePropos> = ({ data, columns, onClick, onMouseOver, onMouseOut, showTotalResults, showSettings, pagination, rowCount, onChangePage, customTotalResult }) => {
   const [openFilterDialog, setOpenFilterDialog] = useState('')
   const [sorting, setSorting] = useState<any>([])
   const [openFilterOptions, setOpenFilterOptions] = useState(false)
@@ -127,6 +127,7 @@ const Table:React.FC<TablePropos> = ({ data, columns, onClick, onMouseOver, onMo
     <S.Container>
       <Header 
         table={table} 
+        customTotalResult={customTotalResult}
         globalFilters={globalFilters} 
         orderSmallest={orderSmallest}
         orderLargest={orderLargest}

package/src/components/Table/interface.ts

@@ -12,6 +12,7 @@ export interface TablePropos {
   rowCount: number
   onChangePage?: (page:number) => void
   pagination?: {pageIndex:number, pageSize:number, totalPages:number}
+  customTotalResult?: string
 }
 
 export interface ColumnsTable {

package/src/components/Tabs.tsx

@@ -40,7 +40,6 @@ const TabStyled = styled((props: StyledTabProps) => <Tab disableRipple {...props
   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',

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

@@ -0,0 +1,65 @@
+import React, { useRef, useState } from 'react';
+import * as S from './styles';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { CheckBox } from '../../../CheckBox';
+import useClickOutside from '../../../../hooks/useClickOutside';
+
+const Header: React.FC<any> = ({
+  table,
+  showTotalResults,
+  showSettings,
+  showClearFiels,
+  onClearFieldsClick,
+  customTotalResults,
+  clearLabel,
+}) => {
+  const [openTools, setOpenTools] = useState(false);
+  const listToolsRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(listToolsRef, () => setOpenTools(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 ref={listToolsRef}>
+            {table.getAllLeafColumns().map((column: any) => {
+              return (
+                <div key={column.id} className="px-1">
+                  <CheckBox
+                    label={column.columnDef.header || column.id}
+                    size="small"
+                    checked={column.getIsVisible()}
+                    value={column.getIsVisible()}
+                    onChange={column.getToggleVisibilityHandler()}
+                  />
+                </div>
+              );
+            })}
+          </S.ListTools>
+        ) : null}
+      </S.Tools>
+    </S.Header>
+  );
+};
+
+export default Header;

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

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+
+export const Header = styled.div<any>`
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 32px);
+  @media screen and (max-width: 1440px) {
+    width: calc(100% - 16px);
+  }
+  margin: 0 auto;
+`;
+
+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: 100;
+  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,43 @@
+import React from 'react';
+import { Pagination as MuiPagination, PaginationItem } from '@mui/material';
+import * as S from './styles';
+
+interface PaginationProps {
+  count: number;
+  pagination: { pageIndex: number; pageSize: number };
+  onChangePage: (page: number) => void;
+}
+
+const Pagination = (props: PaginationProps) => {
+  const { count, pagination, onChangePage } = props;
+
+  const PreviousPagination: React.FC<any> = () => {
+    return <span>{'<'}</span>;
+  };
+
+  const NextPagination: React.FC<any> = () => {
+    return <span>{'>'}</span>;
+  };
+
+  return (
+    <S.Pagination>
+      <div className="content">
+        <MuiPagination
+          onChange={(_event: React.ChangeEvent<unknown>, page: number) => onChangePage(page)}
+          page={pagination.pageIndex}
+          count={count}
+          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,33 @@
+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 (
+                <S.Td key={index}>
+                  {cell.column.columnDef.type == 'action'
+                    ? cell.getValue()
+                    : flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </S.Td>
+              );
+            })}
+          </S.Tr>
+        );
+      })}
+    </tbody>
+  );
+};
+
+export default TBody;

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

@@ -0,0 +1,32 @@
+import { breakpoints } from '../../../../utils/styledBreakpoints';
+import styled from 'styled-components';
+
+export const Tr = styled.tr<any>`
+  color: inherit;
+  display: table-row;
+  vertical-align: middle;
+  outline: 0;
+  &:nth-of-type(even) {
+    background-color: #fafafa;
+  }
+`;
+
+export const Td = styled.td`
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  letter-spacing: 0.01071em;
+  display: table-cell;
+  vertical-align: inherit;
+  border-bottom: 1px solid rgba(224, 224, 224, 1);
+  text-align: left;
+  padding: 16px;
+  ${breakpoints({
+    cssProp: 'padding',
+    cssPropUnits: 'px',
+    values: [{ 1440: 8 }],
+    mediaQueryType: 'max-width',
+  })};
+  color: #666666;
+  font-size: 0.875rem;
+`;