norma-library 0.6.77 → 0.6.79

package/src/stories/UncontrolledTable.stories.tsx

@@ -28,236 +28,58 @@ export default {
   argTypes: {},
 };
 
-const data = [
-  {
-    date: format(new Date('8-14-2023 21:29'), 'dd/MM/yyyy'),
-    duration: 60,
-    campaign: 'Campaign 1',
-    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>
-    ),
-  },
+const columns = [
   {
-    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>
-    ),
+    header: 'Data',
+    accessorKey: 'date',
+    type: 'date',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText',
   },
   {
-    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>
-    ),
+    header: 'Duração',
+    accessorKey: 'duration',
+    type: 'number',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText',
   },
   {
-    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>
-    ),
+    header: 'Campanha',
+    accessorKey: 'campaign',
+    type: 'string',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText',
   },
   {
-    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>
-    ),
+    header: 'Ação',
+    accessorKey: 'action',
+    type: 'action',
+    enableColumnFilter: false,
+    filterFn: 'customFilterText',
+    disableMenu: true,
   },
 ];
 
-const columns = [
+const dnd_columns = [
   {
     header: 'Data',
     accessorKey: 'date',
     type: 'date',
-    enableColumnFilter: true,
+    enableColumnFilter: false,
     filterFn: 'customFilterText',
   },
   {
     header: 'Duração',
     accessorKey: 'duration',
     type: 'number',
-    enableColumnFilter: true,
+    enableColumnFilter: false,
     filterFn: 'customFilterText',
   },
   {
     header: 'Campanha',
     accessorKey: 'campaign',
     type: 'string',
-    enableColumnFilter: true,
+    enableColumnFilter: false,
     filterFn: 'customFilterText',
   },
   {
@@ -266,11 +88,220 @@ const columns = [
     type: 'action',
     enableColumnFilter: false,
     filterFn: 'customFilterText',
-    disableMenu: true,
   },
 ];
 
 export const Default = args => {
+  const data = [
+    {
+      date: format(new Date('8-14-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 1',
+      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 [hiddenColumns, setHiddenColumns] = useState<string[]>(() =>
     JSON.parse(localStorage.getItem('hiddenColumns') || '[]'),
   );
@@ -289,7 +320,7 @@ export const Default = args => {
   };
 
   useEffect(() => {
-    console.log('Colunas escondidas ao carregar:::', hiddenColumns);
+    console.info('Colunas escondidas ao carregar:::', hiddenColumns);
   }, [hiddenColumns]);
 
   return (
@@ -336,3 +367,230 @@ export const Default = args => {
 };
 
 Default.args = {};
+
+export const RowDnd = args => {
+  const [data, setData] = useState([
+    {
+      date: format(new Date('8-14-2023 21:29'), 'dd/MM/yyyy'),
+      duration: 60,
+      campaign: 'Campaign 1',
+      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: '55',
+      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: '9',
+      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: '10',
+      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: '11',
+      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: '12',
+      action: (
+        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+          Editar
+        </Button>
+      ),
+    },
+  ]);
+
+  return (
+    <>
+      <UncontrolledTable
+        data={data}
+        columns={dnd_columns}
+        stickyHeader
+        draggable
+        onDragEnd={data => setData(data)}
+        {...args}
+      />
+    </>
+  );
+};
+
+RowDnd.args = {};