norma-library 0.6.3 → 0.6.5

package/src/stories/UncontrolledTable.stories.tsx

@@ -1,305 +1,315 @@
-import React, { useState } from 'react';
-import UncontrolledTable from '../components/UncontrolledTable';
-import { Button } from '../components/Button';
-import { format } from 'date-fns';
-
-const Template = args => {
-  return <UncontrolledTable {...args} />;
-};
-
-export default {
-  title: 'Uncontrolled/Table',
-  component: Template,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'gray',
-      values: [
-        {
-          name: 'gray',
-          value: '#f8f8f8',
-        },
-      ],
-    },
-  },
-  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>
-    ),
-  },
-  {
-    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 columns = [
-  {
-    header: 'Data',
-    accessorKey: 'date',
-    type: 'date',
-    enableColumnFilter: true,
-    filterFn: 'customFilterText',
-  },
-  {
-    header: 'Duração',
-    accessorKey: 'duration',
-    type: 'number',
-    enableColumnFilter: true,
-    filterFn: 'customFilterText',
-  },
-  {
-    header: 'Campanha',
-    accessorKey: 'campaign',
-    type: 'string',
-    enableColumnFilter: true,
-    filterFn: 'customFilterText',
-  },
-  {
-    header: 'Ação',
-    accessorKey: 'action',
-    type: 'action',
-    enableColumnFilter: false,
-    filterFn: 'customFilterText',
-    disableMenu: true,
-  },
-];
-
-export const Default = args => {
-  return (
-    <>
-      <UncontrolledTable
-        data={data}
-        columns={columns}
-        showTotalResults
-        showSettings
-        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
-        labels={{
-          orderAsc: 'orderAsc',
-          orderDesc: 'orderDesc',
-          filter: 'filter',
-          clearFilter: 'clearFilter',
-        }}
-        stickyHeader
-        {...args}
-      />
-    </>
-  );
-};
-
-Default.args = {};
+import React 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';
+
+const Template = args => {
+  return <UncontrolledTable {...args} />;
+};
+
+export default {
+  title: 'Uncontrolled/Table',
+  component: Template,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'gray',
+      values: [
+        {
+          name: 'gray',
+          value: '#f8f8f8',
+        },
+      ],
+    },
+  },
+  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>
+    ),
+  },
+  {
+    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 columns = [
+  {
+    header: 'Data',
+    accessorKey: 'date',
+    type: 'date',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText',
+  },
+  {
+    header: 'Duração',
+    accessorKey: 'duration',
+    type: 'number',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText',
+  },
+  {
+    header: 'Campanha',
+    accessorKey: 'campaign',
+    type: 'string',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText',
+  },
+  {
+    header: 'Ação',
+    accessorKey: 'action',
+    type: 'action',
+    enableColumnFilter: false,
+    filterFn: 'customFilterText',
+    disableMenu: true,
+  },
+];
+
+export const Default = args => {
+  return (
+    <>
+      <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
+        labels={{
+          orderAsc: 'orderAsc',
+          orderDesc: 'orderDesc',
+          filter: 'filter',
+          clearFilter: 'clearFilter',
+        }}
+        stickyHeader
+        {...args}
+      />
+    </>
+  );
+};
+
+Default.args = {};