norma-library 0.6.3 → 0.6.5

package/src/stories/Table.stories.tsx

@@ -1,373 +1,373 @@
-import React from 'react'
-import Table from '../components/Table'
-import { Button } from "../components/Button"
-import { format } from "date-fns"
-
-export default {
-  title: "Layout/Table",
-  component: Table,
-  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: 'duration',
-    accessorKey: 'duration',
-    type: 'number',
-    enableColumnFilter: true,
-    filterFn: 'customFilterText'
-  },
-  {
-    header: 'campaign',
-    accessorKey: 'campaign',
-    type: 'string',
-    enableColumnFilter: true,
-    filterFn: 'customFilterText'
-  },
-  {
-    header: 'agent',
-    accessorKey: 'agent',
-    type: 'string',
-    enableColumnFilter: true,
-    filterFn: 'customFilterText'
-  },
-  {
-    header: 'disposition',
-    accessorKey: 'disposition',
-    type: 'string',
-    enableColumnFilter: true,
-    filterFn: 'customFilterText'
-  },
-  {
-    header: 'origin',
-    accessorKey: 'origin',
-    type: 'string',
-    enableColumnFilter: true,
-    filterFn: 'customFilterText'
-  },
-  {
-    header: 'ID',
-    accessorKey: 'id',
-    type: 'string',
-    enableColumnFilter: true,
-    filterFn: 'customFilterText'
-  },
-  {
-    header: 'action',
-    accessorKey: 'action',
-    type: 'action',
-    enableColumnFilter: false,
-    filterFn: 'customFilterText'
-  }
-]
-
-export const Default = (args) => (
-  <Table 
-    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)}
-    pagination={{pageIndex:0, pageSize: 10, totalPages: 2}}
-    {...args} 
-  />
-)
-
+import React from 'react'
+import Table from '../components/Table'
+import { Button } from "../components/Button"
+import { format } from "date-fns"
+
+export default {
+  title: "Layout/Table",
+  component: Table,
+  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: 'duration',
+    accessorKey: 'duration',
+    type: 'number',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText'
+  },
+  {
+    header: 'campaign',
+    accessorKey: 'campaign',
+    type: 'string',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText'
+  },
+  {
+    header: 'agent',
+    accessorKey: 'agent',
+    type: 'string',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText'
+  },
+  {
+    header: 'disposition',
+    accessorKey: 'disposition',
+    type: 'string',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText'
+  },
+  {
+    header: 'origin',
+    accessorKey: 'origin',
+    type: 'string',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText'
+  },
+  {
+    header: 'ID',
+    accessorKey: 'id',
+    type: 'string',
+    enableColumnFilter: true,
+    filterFn: 'customFilterText'
+  },
+  {
+    header: 'action',
+    accessorKey: 'action',
+    type: 'action',
+    enableColumnFilter: false,
+    filterFn: 'customFilterText'
+  }
+]
+
+export const Default = (args) => (
+  <Table 
+    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)}
+    pagination={{pageIndex:0, pageSize: 10, totalPages: 2}}
+    {...args} 
+  />
+)
+
 Default.args = {}