norma-library 0.5.147 → 0.5.148

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

@@ -1,41 +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)};
+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

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

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

@@ -1,63 +1,65 @@
-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;
+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

@@ -1,60 +1,63 @@
-import styled from 'styled-components';
-
-export const Header = styled.div<any>`
-  display: flex;
-  justify-content: space-between;
-  width: calc(100% - 32px);
-  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: 99;
-  label {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-`;
+import styled from 'styled-components';
+
+export const Header = styled.div<any>`
+  display: flex;
+  justify-content: space-between;
+  width: calc(100% - 32px);
+  @media screen and (min-width: 768px) {
+    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

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

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

@@ -1,43 +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;
+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

@@ -1,29 +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;
-    }
-  }
+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

@@ -1,33 +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;
+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

@@ -1,25 +1,32 @@
-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;
-  color: #666666;
-  font-size: 0.875rem;
-`;
+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;
+  ${breakpoints({
+    cssProp: 'padding',
+    cssPropUnits: 'px',
+    values: [{ 768: 8 }, { 1024: 16 }],
+    mediaQueryType: 'min-width',
+  })};
+  padding: 16px;
+  color: #666666;
+  font-size: 0.875rem;
+`;