norma-library 0.5.818 → 0.6.0

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/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;
+`;

package/src/components/UncontrolledTable/index.tsx

@@ -0,0 +1,221 @@
+import React, { useState, useMemo, useRef } from 'react';
+import * as S from './styles';
+
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  ColumnFiltersState,
+  TableOptions,
+} from '@tanstack/react-table';
+
+import { Pagination, Header, TBody } from './components';
+import { UncontrolledTableProps } from './interface';
+import useClickOutside from '../../hooks/useClickOutside';
+
+const UncontrolledTable = (props: UncontrolledTableProps) => {
+  const {
+    data,
+    columns,
+    onClick,
+    onMouseOver,
+    onMouseOut,
+    showTotalResults,
+    showSettings,
+    onChangePage,
+    pagination,
+    totalPages,
+    showClearFields,
+    onClearFieldsClick,
+    onFilterClick,
+    onSortClick,
+    customTotalResults,
+    labels,
+    tableClassName,
+    stickyHeader,
+  } = props;
+
+  const [openFilterDialog, setOpenFilterDialog] = useState('');
+  const [sorting, setSorting] = useState<any>([]);
+  const [filterByColumn, setFilterByColumn] = useState<ColumnFiltersState>([]);
+  const [globalFilters, setGlobalFilters] = useState<any>([]);
+  const [orderSmallest, setOrderSmallest] = useState(false);
+  const [orderLargest, setOrderLargest] = useState(false);
+
+  const reactTableConfig = useMemo(() => {
+    const config: TableOptions<unknown> = {
+      columns: columns as any,
+      data,
+      state: {
+        sorting: sorting,
+        columnFilters: filterByColumn,
+        pagination: pagination,
+      },
+      rowCount: totalPages,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      onSortingChange: setSorting,
+      onColumnFiltersChange: setFilterByColumn,
+      manualPagination: true,
+    };
+
+    return config;
+  }, [data, sorting, filterByColumn, columns, pagination]);
+
+  const table = useReactTable(reactTableConfig);
+  const filterRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(filterRef, () => setOpenFilterDialog(''));
+
+  return (
+    <S.Container>
+      <Header
+        table={table}
+        globalFilters={globalFilters}
+        orderSmallest={orderSmallest}
+        orderLargest={orderLargest}
+        showTotalResults={showTotalResults}
+        showSettings={showSettings}
+        setGlobalFilters={setGlobalFilters}
+        setOrderLargest={setOrderLargest}
+        setOrderSmallest={setOrderSmallest}
+        showClearFiels={showClearFields}
+        customTotalResults={customTotalResults}
+        clearLabel={labels?.clearFilter}
+        onClearFieldsClick={() => onClearFieldsClick && onClearFieldsClick()}
+      />
+      <S.Table className={tableClassName || ''}>
+        <S.Thead $sticky={stickyHeader}>
+          {table.getHeaderGroups().map((headerGroup: any) => (
+            <S.TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header: any) => (
+                <S.Th key={header.id}>
+                  <S.ColumnContent
+                    onClick={() => {
+                      if (!header?.column?.columnDef?.disableMenu)
+                        setOpenFilterDialog(header.column.columnDef.accessorKey);
+                    }}
+                  >
+                    <S.TextColumn>
+                      {!header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())}
+                    </S.TextColumn>
+                    {!header?.column?.columnDef?.disableMenu && (
+                      <S.IconFilterDialog>
+                        <svg fill="#666" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
+                          <path d="m7 10 5 5 5-5z" />
+                        </svg>
+                      </S.IconFilterDialog>
+                    )}
+                  </S.ColumnContent>
+                  {openFilterDialog === header.column.columnDef.accessorKey && (
+                    <S.FilterDialog ref={filterRef}>
+                      <S.ListFilterDialog>
+                        <S.OptionFilterDialog
+                          style={{
+                            background: orderSmallest ? 'rgba(0, 0, 0, 0.04)' : '',
+                          }}
+                          onClick={() => {
+                            onSortClick && onSortClick(header.column.columnDef.accessorKey, 'asc');
+                            setOpenFilterDialog('');
+                          }}
+                        >
+                          <div className="icon">
+                            <svg
+                              fill="#666"
+                              stroke="currentColor"
+                              strokeWidth="1.5"
+                              viewBox="0 0 24 24"
+                              xmlns="http://www.w3.org/2000/svg"
+                              aria-hidden="true"
+                              width="20"
+                              height="20"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
+                              />
+                            </svg>
+                          </div>
+                          <p>{labels?.orderAsc || 'Menor primeiro'}</p>
+                        </S.OptionFilterDialog>
+                        <S.OptionFilterDialog
+                          style={{
+                            background: orderLargest ? 'rgba(0, 0, 0, 0.04)' : '',
+                          }}
+                          onClick={() => {
+                            onSortClick && onSortClick(header.column.columnDef.accessorKey, 'desc');
+                            setOpenFilterDialog('');
+                          }}
+                        >
+                          <div className="icon rotate">
+                            <svg
+                              fill="#666"
+                              stroke="currentColor"
+                              strokeWidth="1.5"
+                              viewBox="0 0 24 24"
+                              xmlns="http://www.w3.org/2000/svg"
+                              aria-hidden="true"
+                              width="20"
+                              height="20"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                d="M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75"
+                              ></path>
+                            </svg>
+                          </div>
+                          <p>{labels?.orderDesc || 'Maior primeiro'}</p>
+                        </S.OptionFilterDialog>
+                        {!header?.column?.columnDef?.nofilter && (
+                          <S.OptionFilterDialog
+                            onClick={() => {
+                              onFilterClick && onFilterClick(header.column.columnDef.accessorKey);
+                              setOpenFilterDialog('');
+                            }}
+                          >
+                            <div className="icon">
+                              <svg
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="1.5"
+                                viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg"
+                                aria-hidden="true"
+                                width="16"
+                                height="16"
+                              >
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
+                                ></path>
+                              </svg>
+                            </div>
+                            <p>{labels?.filter || 'Filtrar por'}</p>
+                          </S.OptionFilterDialog>
+                        )}
+                      </S.ListFilterDialog>
+                    </S.FilterDialog>
+                  )}
+                </S.Th>
+              ))}
+            </S.TableRow>
+          ))}
+        </S.Thead>
+        <TBody table={table} onClick={onClick} onMouseOver={onMouseOver} onMouseOut={onMouseOut} />
+      </S.Table>
+      {pagination && (
+        <Pagination
+          pagination={pagination}
+          count={totalPages}
+          onChangePage={(page: number) => onChangePage({ ...pagination, pageIndex: page })}
+        />
+      )}
+    </S.Container>
+  );
+};
+
+export default UncontrolledTable;