norma-library 0.5.4 → 0.5.10

package/src/stories/Table.stories.tsx

@@ -0,0 +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} 
+  />
+)
+
+Default.args = {}

package/src/stories/Tabs.stories.tsx

@@ -54,7 +54,7 @@ export const Playground: Story = {
 export const TabsBasic = () => {
   return (
     <div style={{ width: '480px', marginBottom: 30 }}>
-      <Tabs data={data} />
+      <Tabs data={data} onChange={(e, value) => console.log(e, value)} />
     </div>
   );
 };

package/src/stories/Text.stories.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import Text from '../components/Typography/Text';
+
+export default {
+  title: 'Tipografia/Text',
+  component: Text,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: { 
+    children: {
+      description: 'Adiciona um children.'
+    },
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    size: {
+      description: 'Adicione um tamanho.',
+      options: ['small', 'medium', 'large'],
+      control: { type: 'radio' }
+    },
+    type: {
+      description: 'Adicione um tipo.',
+      options: ['default', 'secondary', 'success', 'warning', 'danger', 'info'],
+      control: { type: 'radio' }
+    },
+  }
+}
+
+export const Default = (args) => <Text {...args} />
+
+Default.args = {
+  children: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
+  className: '',
+  size: 'default',
+  type: ''
+}

package/src/stories/TextInput.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import TextInput from '../components/TextInput';
+
+export default {
+  title: 'Form/TextInput',
+  component: TextInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: { 
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    label: {
+      description: 'Adicione uma label.'
+    },
+    value: {
+      description: 'Adicione um valor.'
+    },
+    onChange: {
+      description: 'Função para capturar o valor quando alterado.'
+    },
+    disabled: {
+      description: 'Habilita ou desabilita.'
+    },
+    placeholder: {
+      description: 'Adicione um placeholder.'
+    },
+    name: {
+      description: 'Adiciona um name'
+    },
+    type: {
+      description: 'Adiciona um type',
+      options: ['text', 'password'],
+      control: { type: 'radio' }
+    }
+  }
+
+}
+
+export const Default = (args) => <TextInput {...args} />
+
+Default.args = {
+  className: '',
+  label: 'Data:',
+  onChange: '',
+  disabled: false,
+  value: 'Valor do input',
+  placeholder: 'Digite algo...',
+  name: '',
+  type: '' 
+}

package/src/stories/Title.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+import Title from '../components/Typography/Title';
+
+export default {
+  title: 'Tipografia/Title',
+  component: Title,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    as: {
+      description: 'Adiciona a tag do titulo.',
+      options: ['h1', 'h2', 'h3', 'h4', 'h5'],
+      control: { type: 'radio' }
+    },
+    children: {
+      description: 'Adiciona um children.'
+    },
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    size: {
+      description: 'Adicione um tamanho.',
+      options: ['small', 'medium', 'large'],
+      control: { type: 'radio' }
+    },
+    type: {
+      description: 'Adicione um tipo.',
+      options: ['default', 'secondary', 'success', 'warning', 'danger', 'info'],
+      control: { type: 'radio' }
+    },
+  }
+}
+
+export const Default = (args) => <Title {...args} />
+
+Default.args = {
+  as: 'h1',
+  children: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
+  className: '',
+  size: 'default',
+  type: ''
+}