norma-library 0.6.893 → 0.6.981

package/src/stories/UncontrolledTable.stories.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react'
-import UncontrolledTable from '../components/UncontrolledTable'
 import { Button } from '../components/Button'
 import { format } from 'date-fns'
 import CodeIcon from '@mui/icons-material/Code'
 import CreateIcon from '@mui/icons-material/Create'
+import UncontrolledTable from '../components/UncontrolledTable/UncontrolledTable'
+import { TableButton } from '../components/UncontrolledTable/interface'
 
 const Template = (args) => {
   return <UncontrolledTable {...args} />
@@ -37,19 +38,21 @@ const columns = [
     filterFn: 'customFilterText',
   },
   {
-    header: 'Duração',
+    header: 'Confiança da transcrição da conversa',
     accessorKey: 'duration',
     type: 'number',
     enableColumnFilter: true,
     filterFn: 'customFilterText',
+    width: '150px',
   },
   {
-    header: 'Campanha',
+    header: 'Confiança da transcrição da conversa',
     accessorKey: 'campaign',
     type: 'string',
     enableColumnFilter: true,
     filterFn: 'customFilterText',
   },
+  
   {
     header: 'Ação',
     accessorKey: 'action',
@@ -379,7 +382,6 @@ export const Default = (args) => {
 
       localStorage.setItem('hiddenColumns', JSON.stringify(updatedHiddenColumns))
 
-      console.log('Colunas escondidas:::', updatedHiddenColumns)
       return updatedHiddenColumns
     })
   }
@@ -393,38 +395,27 @@ export const Default = (args) => {
       <UncontrolledTable
         data={data}
         columns={columns}
-        showTotalResults
-        showSettings
-        customIcons={[
-          <div key="1" onClick={() => alert('Ícone 1 clicado')}>
-            <CodeIcon sx={{ fontSize: 18, color: '#DE8B50' }} />
-          </div>,
-          <div key="2" onClick={() => alert('Ícone 2 clicado')}>
-            <CreateIcon sx={{ fontSize: 18, color: '#DE8B50' }} />
-          </div>,
-        ]}
         onClick={(value) => console.log('onClick line:', value)}
         onMouseOver={(value) => console.log('onMouseOver line:', value)}
         onMouseOut={(value) => console.log('onMouseOut line:', value)}
-        onClearFieldsClick={() => console.log('onClearFieldsClick')}
-        onFilterClick={(column) => console.log('onFilterClick', column)}
-        onChangePage={(pagination) => console.log('onChangePage', pagination)}
-        onSortClick={(column, direction) => console.log('onSortClick', column, direction)}
         pagination={{
           pageIndex: 1,
           pageSize: 10,
         }}
         totalPages={10}
-        showClearFields
-        hideColumns={hiddenColumns}
-        onColumnVisibilityChange={handleColumnVisibilityChange}
         labels={{
           orderAsc: 'orderAsc',
-          orderDesc: 'orderDesc',
-          filter: 'filter',
-          clearFilter: 'clearFilter',
         }}
-        stickyHeader
+        tableClassName="table"
+        sticky={{
+          enabled: true,
+          top: 0,
+        }}
+        hideColumns={hiddenColumns}
+        onColumnVisibilityChange={handleColumnVisibilityChange}
+        onChangePage={(pagination) => console.log('onChangePage', pagination)}
+        onFilterClick={(column) => console.log('onFilterClick', column)}
+        onSortClick={(column, direction) => console.log('onSortClick', column, direction)}
         {...args}
       />
     </>
@@ -724,3 +715,317 @@ export const RowDnd = (args) => {
 }
 
 RowDnd.args = {}
+
+export const ExtraMenu = (args) => {
+  const data = [
+    {
+      date: format(new Date('8-14-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 10',
+      agent: 'Maggie Leach',
+      dnis: 'dnis',
+      disposition: 'Disposition 1',
+      origin: 'origin',
+      id: '1',
+      action: (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      ),
+    },
+    {
+      date: format(new Date('8-13-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 2',
+      agent: 'Christina Harris',
+      ani: 'ani',
+      dnis: 'dnis',
+      disposition: 'Disposition 2',
+      origin: 'origin',
+      id: '2',
+      action: (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      ),
+    },
+    {
+      date: format(new Date('8-12-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 3',
+      agent: 'Alexia Crawford',
+      ani: 'ani',
+      dnis: 'dnis',
+      disposition: 'Disposition 3',
+      origin: 'origin',
+      id: '3',
+      action: (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      ),
+    },
+    {
+      date: format(new Date('8-11-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 4',
+      agent: 'Robyn Phillips',
+      ani: 'ani',
+      dnis: 'dnis',
+      disposition: 'Disposition 4',
+      origin: 'origin',
+      id: '4',
+      action: (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      ),
+    },
+    {
+      date: format(new Date('8-10-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 5',
+      agent: 'Bruce Robinson',
+      ani: 'ani',
+      dnis: 'dnis',
+      disposition: 'Disposition 5',
+      origin: 'origin',
+      id: '5',
+      action: (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      ),
+    },
+    {
+      date: format(new Date('8-9-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 6',
+      agent: 'Sophia Fletcher',
+      ani: 'ani',
+      dnis: 'dnis',
+      disposition: 'Disposition 6',
+      origin: 'origin',
+      id: '6',
+      action: (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      ),
+    },
+    {
+      date: format(new Date('8-8-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 7',
+      agent: 'Blanca Roberts',
+      ani: 'ani',
+      dnis: 'dnis',
+      disposition: 'Disposition 7',
+      origin: 'origin',
+      id: '7',
+      action: (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      ),
+    },
+    {
+      date: format(new Date('8-7-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 8',
+      agent: 'Peter Warburton',
+      ani: 'ani',
+      dnis: 'dnis',
+      disposition: 'Disposition 8',
+      origin: 'origin',
+      id: '8',
+      action: (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      ),
+    },
+    {
+      date: format(new Date('8-7-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 8',
+      agent: 'Peter Warburton',
+      ani: 'ani',
+      dnis: 'dnis',
+      disposition: 'Disposition 8',
+      origin: 'origin',
+      id: '8',
+      action: (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      ),
+    },
+    {
+      date: format(new Date('8-7-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 8',
+      agent: 'Peter Warburton',
+      ani: 'ani',
+      dnis: 'dnis',
+      disposition: 'Disposition 8',
+      origin: 'origin',
+      id: '8',
+      action: (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      ),
+    },
+    {
+      date: format(new Date('8-7-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 8',
+      agent: 'Peter Warburton',
+      ani: 'ani',
+      dnis: 'dnis',
+      disposition: 'Disposition 8',
+      origin: 'origin',
+      id: '8',
+      action: (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      ),
+    },
+    {
+      date: format(new Date('8-7-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 8',
+      agent: 'Peter Warburton',
+      ani: 'ani',
+      dnis: 'dnis',
+      disposition: 'Disposition 8',
+      origin: 'origin',
+      id: '8',
+      action: (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      ),
+    },
+    {
+      date: format(new Date('8-7-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 8',
+      agent: 'Peter Warburton',
+      ani: 'ani',
+      dnis: 'dnis',
+      disposition: 'Disposition 8',
+      origin: 'origin',
+      id: '8',
+      action: (
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
+          Editar
+        </Button>
+      ),
+    },
+  ]
+
+  const menus: TableButton[] = [
+    {
+      render: () => <span>Menu</span>,
+      onClick: () => console.log('Menu clicked'),
+      disabled: true,
+    },
+    {
+      render: () => <span>Agrupar</span>,
+      list: {
+        options: [
+          {
+            id: 'groupByCampaign',
+            label: <div style={{display: 'flex', alignItems: 'center', gap: '5px'}}>
+              <span style={{backgroundColor: "green"}}>OK</span>
+              <span>Agrupar por campanha</span>
+            </div>,
+            onClick: (id) => console.log('Agrupar por campanha', id),
+          },
+          {
+            id: 'groupByDate',
+            label: 'Agrupar por data',
+            onClick: (id) => console.log('Agrupar por data', id),
+          },
+        ],
+        closeOnClick: true,
+      },
+    },
+  ]
+
+  return (
+    <>
+      <UncontrolledTable data={data} columns={columns} buttons={menus} configs={menus} />
+    </>
+  )
+}
+
+ExtraMenu.args = {}

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

@@ -1,89 +0,0 @@
-import React, { useRef, useState, useEffect } 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,
-  customIcons,
-  hideColumns = [],
-  onColumnVisibilityChange,
-}) => {
-  const [openTools, setOpenTools] = useState(false);
-  const listToolsRef = useRef<HTMLDivElement>(null);
-
-  useClickOutside(listToolsRef, () => setOpenTools(false));
-
-  useEffect(() => {
-    hideColumns?.length &&
-      table
-        .getAllLeafColumns()
-        .filter((column: any) => hideColumns.includes(column.id))
-        .forEach((column: any) => column.toggleVisibility(false));
-  }, [hideColumns, table]);
-
-  const handleVisibilityChange = (column: any) => {
-    const isVisible = !column.getIsVisible();
-    column.toggleVisibility(isVisible);
-
-    onColumnVisibilityChange?.(column.id, isVisible);
-  };
-
-  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: 18, color: '#DE8B50' }} />
-          </S.IconTools>
-        ) : null}
-
-        {customIcons &&
-          customIcons.map((IconComponent: React.ReactNode, index: number) => (
-            <S.IconTools key={index}>{IconComponent}</S.IconTools>
-          ))}
-
-        {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={() => handleVisibilityChange(column)}
-                  />
-                </div>
-              );
-            })}
-          </S.ListTools>
-        ) : null}
-      </S.Tools>
-    </S.Header>
-  );
-};
-
-export default Header;

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

@@ -1,67 +0,0 @@
-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`
-  display: flex;
-  align-items: center;
-`;
-
-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;
-  top: 0;
-  label {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-`;