norma-library 0.6.89 → 0.6.91

package/src/components/UncontrolledTable/interface.ts

@@ -1,49 +1,69 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef } from '@tanstack/react-table'
+import { JSX } from 'react'
 
 type Labels = {
-  orderAsc: string;
-  orderDesc: string;
-  filter: string;
-  clearFilter: string;
-};
+  orderAsc: string
+  orderDesc: string
+  filter: string
+  clearFilter: string
+  columns: string
+}
 
 interface Pagination {
-  pageIndex: number;
-  pageSize: number;
+  pageIndex: number
+  pageSize: number
+}
+
+interface Sticky {
+  enabled: boolean
+  top: number
+}
+
+export interface TableList {
+  id: string
+  label: string
+  onClick?: (id: string) => void
+  checked?: () => boolean | boolean
+  disabled?: boolean
+}
+
+export interface TableButton {
+  render: () => JSX.Element
+  list?: {
+    options: TableList[]
+    toggleableList?: boolean
+  }
+  toggleableList?: boolean
+  onClick?: () => void
 }
 
 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;
-  labels?: Labels;
-  tableClassName?: string;
-  stickyHeader?: boolean;
-  stickyHeaderP?: number;
-  customIcons?: React.ReactNode[];
-  hideColumns?: string[];
-  draggable?: boolean;
-  onChangePage: (pagination: Pagination) => void;
-  onClearFieldsClick?: () => void;
-  onFilterClick?: (column: string) => void;
-  onSortClick?: (column: string, direction: string) => void;
-  onColumnVisibilityChange?: (columnId: string, isVisible: boolean) => void;
-  onDragEnd?: (data: any[]) => void;
+  data: any
+  columns: ColumnDef<ColumnsTable>[]
+  pagination?: Pagination
+  totalPages: number
+  labels?: Labels
+  tableClassName?: string
+  sticky?: Sticky
+  draggable?: boolean
+  buttons?: TableButton[]
+  configs?: TableButton[]
+  hideColumns?: string[]
+  onClick?: () => void
+  onMouseOver?: () => void
+  onMouseOut?: () => void
+  onColumnVisibilityChange?: (column: string, value: boolean) => void
+  onChangePage: (pagination: Pagination) => void
+  onFilterClick?: (column: string) => void
+  onSortClick?: (column: string, direction: string) => void
+  onDragEnd?: (data: any[]) => void
 }
 
 export interface ColumnsTable {
-  header: string;
-  accessorKey: string;
-  type: string;
-  enableColumnFilter: boolean;
-  filterFn: string;
-  nofilter?: boolean;
+  header: string
+  accessorKey: string
+  type: string
+  enableColumnFilter: boolean
+  filterFn: string
+  nofilter?: boolean
 }

package/src/components/UncontrolledTabs/UncontrolledTabs.tsx

@@ -13,16 +13,18 @@ interface Props extends MuiTabsBaseProps {
   color?: ColorVariant;
   variant?: TabsVariant;
   info?: React.ReactNode;
+  tabPanelSx?: SxProps<Theme>;
 }
 
 interface TabPanelProps {
   children?: React.ReactNode;
   index: number;
   value: number;
+  sx?: SxProps<Theme>;
 }
 
 function TabPanel(props: TabPanelProps) {
-  const { children, value, index, ...other } = props;
+  const { children, value, index, sx, ...other } = props;
 
   return (
     <div
@@ -32,7 +34,7 @@ function TabPanel(props: TabPanelProps) {
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+      {value === index && <Box sx={{ p: 3, ...sx }}>{children}</Box>}
     </div>
   );
 }
@@ -60,7 +62,7 @@ const UncontrolledTabs = ({ tabs, tab, color = 'primary', onTabChange, info, ...
         </NormaTabs>
       </Box>
       {tabs.map((item, key) => (
-        <TabPanel {...item.tabPanel?.props} key={key} value={tab} index={key}>
+        <TabPanel {...item.tabPanel?.props} key={key} value={tab} index={key} sx={props.tabPanelSx}>
           {item.children}
         </TabPanel>
       ))}

package/src/hooks/useClickOutside.tsx

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

package/src/hooks/useOutsideScreen.tsx

@@ -0,0 +1,35 @@
+import { useState, useEffect, RefObject } from 'react'
+
+/**
+ * Hook that detects when an element is partially visible in the viewport
+ * @param elementRef - Reference to the DOM element to observe
+ * @returns boolean indicating if the element is partially visible in the viewport
+ */
+export const usePartiallyVisible = (elementRef: RefObject<HTMLElement | null>): boolean => {
+    const [isPartiallyVisible, setIsPartiallyVisible] = useState<boolean>(false)
+
+    useEffect(() => {
+        const element = elementRef.current
+        if (!element) return
+
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                // Element is partially visible if it's intersecting but not completely visible
+                const isPartial = entry.isIntersecting && entry.intersectionRatio < 1.0
+                setIsPartiallyVisible(isPartial)
+            },
+            {
+                root: null, // Use the viewport as the root
+                threshold: [0, 1.0], // Check at these thresholds to determine partial visibility
+            }
+        )
+
+        observer.observe(element)
+
+        return () => {
+            if (element) observer.unobserve(element)
+        }
+    }, [elementRef])
+
+    return isPartiallyVisible
+}

package/src/index.ts

@@ -25,7 +25,7 @@ import MultiSelectInput from './components/MultiSelectInput';
 import { Title, Text } from './components/Typography';
 import TextInput from './components/TextInput';
 import Table from './components/Table';
-import UncontrolledTable from './components/UncontrolledTable';
+import UncontrolledTable from './components/UncontrolledTable/UncontrolledTable';
 import UncontrolledTabs from './components/UncontrolledTabs/UncontrolledTabs';
 import { TimeLine, TimeLineData } from './components/TimeLine/TimeLine';
 import { ModalStatus } from './components/StatusModal/StatusModal';

package/src/stories/ModalStatus.stories.tsx

@@ -61,3 +61,11 @@ export const ModalInfo = () => {
 }
 
 ModalInfo.storyName = 'Modal Info'
+
+export const ModalTextElement = () => {
+  return (
+    <ModalStatus title="Título" text={<p>Isso é um elemento P dentro da prop  text</p>} type="info" actions={actions} />
+  )
+}
+
+ModalInfo.ModalTextElement = 'Modal Text Element'

package/src/stories/ProductCard.stories.tsx

@@ -126,7 +126,7 @@ export const ProductCardGroup = () => (
       description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
       color="#FDF6E3"
       icon={{
-        iconName: 'olosAnywhere',
+        iconName: 'olosJourneyX',
         iconColor: '#B16E4B',
         bgColor: '#F6F07F',
         scale: 'medium',

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} />
@@ -379,7 +380,6 @@ export const Default = (args) => {
 
       localStorage.setItem('hiddenColumns', JSON.stringify(updatedHiddenColumns))
 
-      console.log('Colunas escondidas:::', updatedHiddenColumns)
       return updatedHiddenColumns
     })
   }
@@ -393,38 +393,31 @@ 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',
+          columns: 'Colunas 1',
         }}
-        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 +717,312 @@ 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'),
+    },
+    {
+      render: () => <span>Agrupar</span>,
+      list: {
+        options: [
+          {
+            id: 'groupByCampaign',
+            label: 'Agrupar por campanha',
+            onClick: (id) => console.log('Agrupar por campanha', id),
+          },
+          {
+            id: 'groupByDate',
+            label: 'Agrupar por data',
+            onClick: (id) => console.log('Agrupar por data', id),
+          },
+        ],
+      },
+    },
+  ]
+
+  return (
+    <>
+      <UncontrolledTable data={data} columns={columns} buttons={menus} configs={menus} />
+    </>
+  )
+}
+
+ExtraMenu.args = {}

package/src/stories/UncontrolledTabs.stories.tsx

@@ -76,4 +76,22 @@ export const UncontrolledTabsInfo = () => {
   )
 }
 
-UncontrolledTabsInfo.storyName = 'Uncontrolled Tabs With  Info'
+UncontrolledTabsInfo.storyName = 'Uncontrolled Tabs With  Info';
+
+export const UncontrolledTabsAndTabPanelSx = () => {
+  const [tab, setTab] = useState(0);
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <UncontrolledTabs
+        info={<div>tabPanelSx permite estilizar a tab</div>}
+        tab={tab}
+        tabs={data}
+        onTabChange={(evt, tab) => setTab(tab)}
+        tabPanelSx={{ backgroundColor: 'gray', color: 'orange', p: 0 }}
+      />
+    </div>
+  );
+};
+
+UncontrolledTabsAndTabPanelSx.storyName = 'Uncontrolled Tabs With  Info and tabPanelSx';
+