norma-library 0.5.817 → 0.6.0

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;

package/src/components/UncontrolledTable/interface.ts

@@ -0,0 +1,43 @@
+import { ColumnDef } from '@tanstack/react-table';
+
+type Labels = {
+  orderAsc: string;
+  orderDesc: string;
+  filter: string;
+  clearFilter: string;
+};
+
+interface Pagination {
+  pageIndex: number;
+  pageSize: number;
+}
+
+export interface UncontrolledTableProps {
+  data: any;
+  columns: ColumnDef<ColumnsTable>[];
+  onClick: any;
+  onMouseOver: any;
+  onMouseOut: any;
+  showTotalResults: boolean;
+  showSettings: boolean;
+  pagination?: Pagination;
+  totalPages: number;
+  showClearFields?: boolean;
+  customTotalResults?: string;
+  onChangePage: (pagination: Pagination) => void;
+  onClearFieldsClick?: () => void;
+  onFilterClick?: (column: string) => void;
+  onSortClick?: (column: string, direction: string) => void;
+  labels?: Labels;
+  tableClassName?: string;
+  stickyHeader?: boolean;
+}
+
+export interface ColumnsTable {
+  header: string;
+  accessorKey: string;
+  type: string;
+  enableColumnFilter: boolean;
+  filterFn: string;
+  nofilter?: boolean;
+}

package/src/components/UncontrolledTable/styles.tsx

@@ -0,0 +1,123 @@
+import { breakpoints } from '../../utils/styledBreakpoints';
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  background-color: #fff;
+`;
+
+export const Table = styled.table`
+  display: table;
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  min-width: 650px;
+  border: none;
+`;
+
+const StickyStyles = `
+  position: sticky;
+  top: 0;
+  z-index: 99;
+  background: #fff;
+`;
+
+export const Thead = styled.thead<{ $sticky?: boolean }>`
+  display: table-header-group;
+  ${props => props.$sticky && StickyStyles}
+`;
+
+export const TableRow = styled.tr`
+  color: inherit;
+  display: table-row;
+  vertical-align: middle;
+  outline: 0;
+`;
+
+export const Th = styled.th`
+  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: rgba(0, 0, 0, 0.87);
+  color: #666666;
+  font-size: 0.875rem;
+  font-weight: 700;
+`;
+
+export const ColumnContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+export const TextColumn = styled.span``;
+
+export const IconFilterDialog = styled.div`
+  height: 20px;
+  width: 20px;
+`;
+
+export const FilterDialog = styled.div`
+  position: absolute;
+  padding: 10px 0;
+  margin: 6px 0px 0 0;
+  width: max-content;
+  background: #fff;
+  box-shadow: 0px 3px 6px #00000029;
+  border: 1px solid #e0e0e0;
+  z-index: 99;
+`;
+
+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 15px;
+  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/UncontrolledTabs/UncontrolledTabs.style.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { TabsProps } from '@mui/material/Tabs';
+
+import { Tab, Tabs } from '@mui/material';
+import { ColorVariant } from '@/types';
+import { palette } from '../../helpers';
+
+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,
+};
+
+interface StyledTabProps {
+  label: string;
+  color: ColorVariant;
+}
+
+export const NormaTabs: React.ComponentType<TabsProps & { color: ColorVariant }> = styled(Tabs)<{
+  color: ColorVariant;
+}>(({ color }) => ({
+  borderBottom: '1px solid #e8e8e8',
+  '& .Mui-selected': {
+    color: colorMap[color],
+  },
+  '& .MuiTabs-indicator': {
+    backgroundColor: colorMap[color],
+  },
+  '& .MuiButtonBase-root': {
+    textTransform: 'none',
+  },
+}));
+
+export const NormaTab: React.ComponentType<StyledTabProps> = styled((props: StyledTabProps) => (
+  <Tab disableRipple {...props} />
+))(({ theme, color }) => ({
+  textTransform: 'none',
+  fontWeight: theme.typography.fontWeightRegular,
+  fontSize: theme.typography.pxToRem(15),
+  marginRight: theme.spacing(1),
+  color: '#666666',
+  padding: '5px 15px',
+  top: '5px',
+  minWidth: '60px',
+  '&.Mui-selected': {
+    color: colorMap[color],
+  },
+  '&.Mui-focusVisible': {
+    backgroundColor: 'rgba(100, 95, 228, 0.32)',
+  },
+}));

package/src/components/UncontrolledTabs/UncontrolledTabs.tsx

@@ -0,0 +1,68 @@
+import React, { SyntheticEvent } from 'react';
+import { Box, SxProps } from '@mui/material';
+import { ColorVariant, DataTabs, MuiTabsBaseProps, TabsVariant } from '@/types';
+import { NormaTab, NormaTabs } from './UncontrolledTabs.style';
+import { Theme } from '@emotion/react';
+
+interface Props extends MuiTabsBaseProps {
+  sx?: SxProps<Theme>;
+  tabs: DataTabs[];
+  tab: number;
+  onTabChange: (event: SyntheticEvent, tab: number) => void;
+  color?: ColorVariant;
+  variant?: TabsVariant;
+}
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(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}`,
+  };
+}
+
+const UncontrolledTabs = ({ tabs, tab, color = 'primary', onTabChange, ...props }: Props) => {
+  const handleChange = (event: SyntheticEvent, newValue: number) => {
+    onTabChange(event, newValue);
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box>
+        <NormaTabs value={tab} color={color} onChange={handleChange} aria-label="tabs" {...props}>
+          {tabs.map((item, key) => (
+            <NormaTab key={key} label={item.label} color={color} {...a11yProps(key)} />
+          ))}
+        </NormaTabs>
+      </Box>
+      {tabs.map((item, key) => (
+        <TabPanel {...item.tabPanel?.props} key={key} value={tab} index={key}>
+          {item.children}
+        </TabPanel>
+      ))}
+    </Box>
+  );
+};
+
+export default UncontrolledTabs;

package/src/helpers/colors.ts

@@ -1,20 +1,20 @@
-import { createTheme } from '@mui/material/styles';
+import { createTheme, PaletteOptions } from '@mui/material/styles';
 
 export const getPalette = () => {
   return {
-    primary: 'rgb(219, 102, 25)',
+    primary: '#db6619',
     primaryLight: '#FFDB9F',
     primaryMedium: '#FFA84C',
     primaryDark: '#B74608',
-    inherit: 'rgb(102, 102, 102)',
-    secondary: 'rgb(67, 187, 242)',
-    error: 'rgb(214, 54, 67)',
-    warning: 'rgb(255, 195, 0)',
-    info: 'rgb(113, 213, 247)',
-    success: 'rgb(107, 194, 53)',
+    inherit: '#666666',
+    secondary: '#43bbf2',
+    error: '#d63643',
+    warning: '#ffc300',
+    info: '#71d5f7',
+    success: '#6bc235',
     white: '#ffffff',
-    black: 'rgb(0, 0, 0)',
-    helper: 'rgb(90, 42, 121)',
+    black: '#000000',
+    helper: '#5a2a79',
     secondaryLight: '#D9FCFE',
     secondaryMedium: '#71D5F7',
     secondaryDark: '#154F8C',
@@ -135,6 +135,50 @@ export const olosPalette = {
   },
 };
 
+export const newOlosPalette: PaletteOptions = {
+  primary: {
+    main: palette.primary,
+    light: palette.primaryLight,
+    dark: palette.primaryDark,
+    '500': palette.primaryMedium,
+  },
+  secondary: {
+    main: palette.secondary,
+    light: palette.secondaryLight,
+    dark: palette.secondaryDark,
+    '500': palette.secondaryMedium,
+  },
+  error: {
+    main: palette.error,
+    light: palette.errorLight,
+    dark: palette.errorDark,
+    '500': palette.errorMedium,
+  },
+  warning: {
+    main: palette.warning,
+    light: palette.warningLight,
+    dark: palette.warningDark,
+    '500': palette.warningMedium,
+  },
+  info: {
+    main: palette.inherit,
+    light: palette.inheritLight,
+    dark: palette.inheritDark,
+    '500': palette.inheritMedium,
+  },
+  success: {
+    main: palette.success,
+    light: palette.successLight,
+    dark: palette.successDark,
+    '500': palette.successMedium,
+  },
+  text: {
+    primary: palette.black,
+    secondary: palette.primary,
+    disabled: palette.inherit,
+  }
+};
+
 export const lightTheme = createTheme({
   palette: {
     mode: 'light',
@@ -142,6 +186,13 @@ export const lightTheme = createTheme({
   },
 });
 
+export const newLightTheme = createTheme({
+  palette: {
+    mode: 'light',
+    ...newOlosPalette,
+  },
+});
+
 export const darkTheme = createTheme({
   palette: {
     mode: 'dark',
@@ -156,6 +207,7 @@ export const darkTheme = createTheme({
 export const themes = {
   light: lightTheme,
   dark: darkTheme,
+  newLight: newLightTheme,
 };
 
 type PaletteKey = keyof typeof getPalette;

package/src/hooks/useClickOutside.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+const useClickOutside = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+  const handleClickOutside = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, callback]);
+};
+
+export default useClickOutside;

package/src/index.ts

@@ -18,14 +18,18 @@ import { ChatMessage, ChatMessageBalloon } from './components';
 import { NormaProvider } from './providers/NormaProvider';
 import { themes, getPalette } from './helpers';
 import DateInput from './components/DateInput';
-import Box from './components/Box'
+import Box from './components/Box';
 import Breadcrumb from './components/Breadcrumb';
 import SelectInput from './components/SelectInput';
 import MultiSelectInput from './components/MultiSelectInput';
-import { Title, Text } from './components/Typography'
+import { Title, Text } from './components/Typography';
 import TextInput from './components/TextInput';
 import Table from './components/Table';
-
+import UncontrolledTable from './components/UncontrolledTable';
+import UncontrolledTabs from './components/UncontrolledTabs/UncontrolledTabs';
+import { ModalStatus } from './components/StatusModal/StatusModal';
+import { breakpoints } from './utils/styledBreakpoints';
+import { useTheme } from '@mui/material';
 
 export {
   Accordion,
@@ -57,5 +61,10 @@ export {
   Text,
   Title,
   TextInput,
-  Table
+  Table,
+  UncontrolledTable,
+  UncontrolledTabs,
+  ModalStatus,
+  breakpoints,
+  useTheme
 };

package/src/interfaces/Modal.ts

@@ -8,9 +8,11 @@ export interface ModalBaseProps extends MuiModalBaseProps {
   open: boolean;
   onClose?: React.ReactEventHandler<{}>;
   action?: OnAction[];
+  actionSpaceBetween?: boolean;
   className?: string;
-  full?: boolean;
   title?: string;
   id?: string;
   paperProps?: MuiPaperBaseProps;
+  width?: string;
+
 }