norma-library 0.5.79 → 0.5.121

package/src/stories/Select.stories.tsx

@@ -1,100 +1,100 @@
-import React from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-import { Select } from '../components';
-import { DataSelect, TextFieldSizeVariant } from '../types';
-import { SelectChangeEvent } from '@mui/material';
-
-const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
-
-const data: DataSelect[] = [
-  { label: 'Oliver Hansen', value: 'oliver-hansen' },
-  { label: 'Van Henry', value: 'van-henry' },
-  { label: 'April Tucker', value: 'april-tucker' },
-  { label: 'Ralph Hubbard', value: 'ralph-hubbard' },
-  { label: 'Omar Alexander', value: 'omar-alexander' },
-  { label: 'Carlos Abbott', value: 'carlos-abbott' },
-  { label: 'Miriam Wagner', value: 'miriam-wagner' },
-  { label: 'Bradley Wilkerson', value: 'bradley-wilkerson' },
-  { label: 'Virginia Andrews', value: 'virginia-andrews' },
-  { label: 'Kelly Snyder', value: 'kelly-snyder' },
-];
-
-const meta = {
-  title: 'Form/Select',
-  component: Select,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof Select>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const SelectBasic = () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: SelectChangeEvent) => {
-    setValue(event.target.value as string);
-  };
-  return (
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="standard" data={data} />
-    </div>
-  );
-};
-
-SelectBasic.storyName = 'Select Basic';
-
-export const SelectVariants = () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: SelectChangeEvent) => {
-    setValue(event.target.value as string);
-  };
-  return (
-    <>
-      <div style={{ width: '480px', marginBottom: 30 }}>
-        <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="standard" data={data} />
-      </div>
-      <div style={{ width: '480px', marginBottom: 30 }}>
-        <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="filled" data={data} />
-      </div>
-      <div style={{ width: '480px', marginBottom: 30 }}>
-        <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="outlined" data={data} />
-      </div>
-    </>
-  );
-};
-
-SelectVariants.storyName = 'Select Variantes';
-
-export const SelectMultiple = () => {
-  const [value, setValue] = React.useState<string[]>([]);
-
-  const handleChange = (event: SelectChangeEvent<typeof value>) => {
-    const {
-      target: { value },
-    } = event;
-    setValue(typeof value === 'string' ? value.split(',') : value);
-  };
-
-  return (
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <Select
-        id="select-demo"
-        value={value}
-        onChange={handleChange}
-        label="Members"
-        multiple={true}
-        data={data}
-        variant="standard"
-      />
-    </div>
-  );
-};
-
-SelectMultiple.storyName = 'Select Multiples';
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from '../components';
+import { DataSelect, TextFieldSizeVariant } from '../types';
+import { SelectChangeEvent } from '@mui/material';
+
+const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
+
+const data: DataSelect[] = [
+  { label: 'Oliver Hansen', value: 'oliver-hansen' },
+  { label: 'Van Henry', value: 'van-henry' },
+  { label: 'April Tucker', value: 'april-tucker' },
+  { label: 'Ralph Hubbard', value: 'ralph-hubbard' },
+  { label: 'Omar Alexander', value: 'omar-alexander' },
+  { label: 'Carlos Abbott', value: 'carlos-abbott' },
+  { label: 'Miriam Wagner', value: 'miriam-wagner' },
+  { label: 'Bradley Wilkerson', value: 'bradley-wilkerson' },
+  { label: 'Virginia Andrews', value: 'virginia-andrews' },
+  { label: 'Kelly Snyder', value: 'kelly-snyder' },
+];
+
+const meta = {
+  title: 'Form/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Select>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SelectBasic = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setValue(event.target.value as string);
+  };
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="standard" data={data} />
+    </div>
+  );
+};
+
+SelectBasic.storyName = 'Select Basic';
+
+export const SelectVariants = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setValue(event.target.value as string);
+  };
+  return (
+    <>
+      <div style={{ width: '480px', marginBottom: 30 }}>
+        <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="standard" data={data} />
+      </div>
+      <div style={{ width: '480px', marginBottom: 30 }}>
+        <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="filled" data={data} />
+      </div>
+      <div style={{ width: '480px', marginBottom: 30 }}>
+        <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="outlined" data={data} />
+      </div>
+    </>
+  );
+};
+
+SelectVariants.storyName = 'Select Variantes';
+
+export const SelectMultiple = () => {
+  const [value, setValue] = React.useState<string[]>([]);
+
+  const handleChange = (event: SelectChangeEvent<typeof value>) => {
+    const {
+      target: { value },
+    } = event;
+    setValue(typeof value === 'string' ? value.split(',') : value);
+  };
+
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <Select
+        id="select-demo"
+        value={value}
+        onChange={handleChange}
+        label="Members"
+        multiple={true}
+        data={data}
+        variant="standard"
+      />
+    </div>
+  );
+};
+
+SelectMultiple.storyName = 'Select Multiples';

package/src/stories/SelectInput.stories.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import SelectInput from '../components/SelectInput';
+
+export default {
+  title: 'Form/SelectInput',
+  component: SelectInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: { 
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    label: {
+      description: 'Adicione uma label.'
+    },
+    onChange: {
+      description: 'Função para capturar o valor quando alterado.'
+    },
+    placeholder: {
+      description: 'Adicione um placeholder.'
+    },
+    options: {
+      description: 'Lista de valores a ser exibido.'
+    },
+    value: {
+      description: 'Valor selecionado.'
+    },
+    isSearchable: {
+      description: 'Habilita a função de buscar um valor.'
+    },
+    isClearable: {
+      description: 'Habilita a função de limpar o item selecionado.'
+    },
+    disabled: {
+      description: 'Habilita ou desabilita.'
+    }
+  }
+}
+
+export const Default = (args) => {
+  const options = [
+    {
+      label: 'options 1',
+      value: 'value 1'
+    },
+    {
+      label: 'options 2',
+      value: 'value 2'
+    },
+    {
+      label: 'options 3',
+      value: 'value 3'
+    }
+  ]
+  const [selectedValue, setSelectedValue] = useState<any>(options[0])
+  return (
+    <div style={{
+      width: 300
+    }}>
+      <SelectInput 
+        options={options}
+        value={selectedValue}
+        onChange={(value) => setSelectedValue(value)} 
+        {...args} 
+      />
+    </div>
+  )
+}
+
+Default.args = { 
+  className: '',
+  label: 'Selecione:',
+  placeholder: 'Selecione uma opção',
+  disabled: false,
+  isSearchable: false,
+  isClearable: false,
+}

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 = {}