norma-library 0.6.85 → 0.6.87

package/src/stories/Table.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import Table from '../components/Table'
-import { Button } from "../components/Button"
-import { format } from "date-fns"
+import { Button } from '../components/Button'
+import { format } from 'date-fns'
 
 export default {
-  title: "Layout/Table",
+  title: 'Layout/Table',
   component: Table,
   tags: ['autodocs'],
   parameters: {
@@ -12,10 +12,10 @@ export default {
     backgrounds: {
       default: 'gray',
       values: [
-        { 
-          name: 'gray', 
-          value: '#f8f8f8' 
-        }
+        {
+          name: 'gray',
+          value: '#f8f8f8',
+        },
       ],
     },
   },
@@ -24,277 +24,212 @@ export default {
 
 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-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-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-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-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-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-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-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')}
-      >
+    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>
+    ),
+  },
+  {
+    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 = [
@@ -303,71 +238,71 @@ const columns = [
     accessorKey: 'date',
     type: 'date',
     enableColumnFilter: true,
-    filterFn: 'customFilterText'
+    filterFn: 'customFilterText',
   },
   {
     header: 'duration',
     accessorKey: 'duration',
     type: 'number',
     enableColumnFilter: true,
-    filterFn: 'customFilterText'
+    filterFn: 'customFilterText',
   },
   {
     header: 'campaign',
     accessorKey: 'campaign',
     type: 'string',
     enableColumnFilter: true,
-    filterFn: 'customFilterText'
+    filterFn: 'customFilterText',
   },
   {
     header: 'agent',
     accessorKey: 'agent',
     type: 'string',
     enableColumnFilter: true,
-    filterFn: 'customFilterText'
+    filterFn: 'customFilterText',
   },
   {
     header: 'disposition',
     accessorKey: 'disposition',
     type: 'string',
     enableColumnFilter: true,
-    filterFn: 'customFilterText'
+    filterFn: 'customFilterText',
   },
   {
     header: 'origin',
     accessorKey: 'origin',
     type: 'string',
     enableColumnFilter: true,
-    filterFn: 'customFilterText'
+    filterFn: 'customFilterText',
   },
   {
     header: 'ID',
     accessorKey: 'id',
     type: 'string',
     enableColumnFilter: true,
-    filterFn: 'customFilterText'
+    filterFn: 'customFilterText',
   },
   {
     header: 'action',
     accessorKey: 'action',
     type: 'action',
     enableColumnFilter: false,
-    filterFn: 'customFilterText'
-  }
+    filterFn: 'customFilterText',
+  },
 ]
 
 export const Default = (args) => (
-  <Table 
-    data={data} 
-    columns={columns} 
-    showTotalResults 
+  <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} 
+    pagination={{ pageIndex: 0, pageSize: 10, totalPages: 2 }}
+    {...args}
   />
 )
 
-Default.args = {}
+Default.args = {}

package/src/stories/Tabs.stories.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta, StoryObj } from '@storybook/react';
-import { Tabs } from '../components';
-import { DataTabs } from '../types';
-import { Typography } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react'
+import { Tabs } from '../components'
+import { DataTabs } from '../types'
+import { Typography } from '@mui/material'
 
 const data: DataTabs[] = [
   {
@@ -11,8 +11,8 @@ const data: DataTabs[] = [
     id: 'panel-1',
     children: (
       <Typography>
-        Tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
-        blandit leo lobortis eget.
+        Tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus
+        ex, sit amet blandit leo lobortis eget.
       </Typography>
     ),
   },
@@ -21,12 +21,12 @@ const data: DataTabs[] = [
     id: 'panel-2',
     children: (
       <Typography>
-        Tab 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
-        blandit leo lobortis eget.
+        Tab 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus
+        ex, sit amet blandit leo lobortis eget.
       </Typography>
     ),
   },
-];
+]
 
 const meta = {
   title: 'Display/Tabs',
@@ -38,24 +38,24 @@ const meta = {
   argTypes: {
     data: data,
   },
-} satisfies Meta<typeof Tabs>;
+} satisfies Meta<typeof Tabs>
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {
   args: {
     data: data,
   },
-};
+}
 
 export const TabsBasic = () => {
   return (
     <div style={{ width: '480px', marginBottom: 30 }}>
       <Tabs data={data} onChange={(e, value) => console.log(e, value)} />
     </div>
-  );
-};
+  )
+}
 
-TabsBasic.storyName = 'Tabs Basic';
+TabsBasic.storyName = 'Tabs Basic'