norma-library 0.5.80 → 0.5.122

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/TimeLine.stories.tsx

@@ -1,35 +1,35 @@
-import React from 'react';
-
-import type { Meta } from '@storybook/react';
-import { TimeLine } from '../components';
-import { Stack } from '@mui/material';
-
-const meta = {
-  title: 'Display/TimeLine',
-  component: TimeLine,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof TimeLine>;
-
-export default meta;
-
-export const TimeLineBasic = () => {
-  return (
-    <>
-      <TimeLine />
-    </>
-  );
-};
-
-export const TimeLineColors = () => {
-  return (
-    <Stack direction="row" spacing={2}>
-      {['primary', 'secondary', 'inherit', 'error', 'info', 'success', 'warning'].map((color, key) => (
-        <TimeLine color={color} key={key} />
-      ))}
-    </Stack>
-  );
-};
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+import { TimeLine } from '../components';
+import { Stack } from '@mui/material';
+
+const meta = {
+  title: 'Display/TimeLine',
+  component: TimeLine,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof TimeLine>;
+
+export default meta;
+
+export const TimeLineBasic = () => {
+  return (
+    <>
+      <TimeLine />
+    </>
+  );
+};
+
+export const TimeLineColors = () => {
+  return (
+    <Stack direction="row" spacing={2}>
+      {['primary', 'secondary', 'inherit', 'error', 'info', 'success', 'warning'].map((color, key) => (
+        <TimeLine color={color} key={key} />
+      ))}
+    </Stack>
+  );
+};

package/src/stories/TimePicker.stories.tsx

@@ -1,87 +1,87 @@
-import React from 'react';
-import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
-import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
-import type { Meta } from '@storybook/react';
-import dayjs, { Dayjs } from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
-
-import 'dayjs/locale/pt-br';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-const meta = {
-  title: 'Form/TimePicker',
-  component: TimePicker,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof TimePicker>;
-
-export default meta;
-
-export const BasicDatePicker = () => (
-  <LocalizationProvider dateAdapter={AdapterDayjs}>
-    <DemoContainer components={['TimePicker']}>
-      <TimePicker label="TimePicker" />
-    </DemoContainer>
-  </LocalizationProvider>
-);
-
-BasicDatePicker.storyName = 'TimePicker Basic';
-
-export const TimePickerVariants = () => (
-  <LocalizationProvider dateAdapter={AdapterDayjs}>
-    <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
-      <div style={{ width: '480px', marginBottom: 30 }}>
-        <TimePicker sx={{ minWidth: 275 }} label="TimePicker Responsive" timezone="America/Sao_Paulo" />
-      </div>
-      <div style={{ width: '480px', marginBottom: 30 }}>
-        <MobileTimePicker sx={{ minWidth: 275 }} label="TimePicker Mobile" timezone="America/Sao_Paulo" />
-      </div>
-      <div style={{ width: '480px', marginBottom: 30 }}>
-        <DesktopTimePicker sx={{ minWidth: 275 }} label="TimePicker Desktop" timezone="America/Sao_Paulo" />
-      </div>
-    </DemoContainer>
-  </LocalizationProvider>
-);
-
-TimePickerVariants.storyName = 'TimePicker Variants';
-
-export const TimePickerLanguage = () => (
-  <>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'pt-br'}>
-        <DemoContainer components={['TimePicker']}>
-          <TimePicker sx={{ minWidth: 275 }} label="TimePicker Brazil" timezone="America/Sao_Paulo" />
-        </DemoContainer>
-      </LocalizationProvider>
-    </div>
-
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'en'}>
-        <DemoContainer components={['TimePicker']}>
-          <TimePicker sx={{ minWidth: 275 }} label="TimePicker English" timezone="America/Sao_Paulo" />
-        </DemoContainer>
-      </LocalizationProvider>
-    </div>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'es'}>
-        <DemoContainer components={['TimePicker']}>
-          <TimePicker sx={{ minWidth: 275 }} label="TimePicker Spain" timezone="America/Sao_Paulo" />
-        </DemoContainer>
-      </LocalizationProvider>
-    </div>
-  </>
-);
-
-TimePickerLanguage.storyName = 'TimePicker Languages';
+import React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
+import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
+import type { Meta } from '@storybook/react';
+import dayjs, { Dayjs } from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+
+import 'dayjs/locale/pt-br';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const meta = {
+  title: 'Form/TimePicker',
+  component: TimePicker,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof TimePicker>;
+
+export default meta;
+
+export const BasicDatePicker = () => (
+  <LocalizationProvider dateAdapter={AdapterDayjs}>
+    <DemoContainer components={['TimePicker']}>
+      <TimePicker label="TimePicker" />
+    </DemoContainer>
+  </LocalizationProvider>
+);
+
+BasicDatePicker.storyName = 'TimePicker Basic';
+
+export const TimePickerVariants = () => (
+  <LocalizationProvider dateAdapter={AdapterDayjs}>
+    <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
+      <div style={{ width: '480px', marginBottom: 30 }}>
+        <TimePicker sx={{ minWidth: 275 }} label="TimePicker Responsive" timezone="America/Sao_Paulo" />
+      </div>
+      <div style={{ width: '480px', marginBottom: 30 }}>
+        <MobileTimePicker sx={{ minWidth: 275 }} label="TimePicker Mobile" timezone="America/Sao_Paulo" />
+      </div>
+      <div style={{ width: '480px', marginBottom: 30 }}>
+        <DesktopTimePicker sx={{ minWidth: 275 }} label="TimePicker Desktop" timezone="America/Sao_Paulo" />
+      </div>
+    </DemoContainer>
+  </LocalizationProvider>
+);
+
+TimePickerVariants.storyName = 'TimePicker Variants';
+
+export const TimePickerLanguage = () => (
+  <>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'pt-br'}>
+        <DemoContainer components={['TimePicker']}>
+          <TimePicker sx={{ minWidth: 275 }} label="TimePicker Brazil" timezone="America/Sao_Paulo" />
+        </DemoContainer>
+      </LocalizationProvider>
+    </div>
+
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'en'}>
+        <DemoContainer components={['TimePicker']}>
+          <TimePicker sx={{ minWidth: 275 }} label="TimePicker English" timezone="America/Sao_Paulo" />
+        </DemoContainer>
+      </LocalizationProvider>
+    </div>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'es'}>
+        <DemoContainer components={['TimePicker']}>
+          <TimePicker sx={{ minWidth: 275 }} label="TimePicker Spain" timezone="America/Sao_Paulo" />
+        </DemoContainer>
+      </LocalizationProvider>
+    </div>
+  </>
+);
+
+TimePickerLanguage.storyName = 'TimePicker Languages';

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: ''
+}

package/src/stories/UncontrolledTable.stories.tsx

@@ -0,0 +1,337 @@
+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: 'Table/UncontrolledTable',
+  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: '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',
+    disableMenu: true,
+  },
+];
+
+export const Default = args => {
+  const [pagination, setPagination] = useState({
+    pageIndex: 1,
+    pageSize: 10,
+  });
+  return (
+    <>
+      <div className="Buttons" style={{marginBottom: '10px'}}>
+        <button onClick={() => setPagination({ ...pagination, pageIndex: 1 })}>Page 1</button>
+        <button onClick={() => setPagination({ ...pagination, pageIndex: 10 })}>Page 10</button>
+      </div>
+      <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 => setPagination(pagination)}
+        onSortClick={(column, direction) => console.log('onSortClick', column, direction)}
+        pagination={pagination}
+        totalPages={10}
+        showClearFields
+        labels={{
+          orderAsc: 'orderAsc',
+          orderDesc: 'orderDesc',
+          filter: 'filter',
+          clearFilter: 'clearFilter',
+        }}
+        {...args}
+      />
+    </>
+  );
+};
+
+Default.args = {};

package/src/styles/custom.css

@@ -1,3 +1,4 @@
+
 .appearance-none {
   -webkit-appearance: none;
   -moz-appearance: none;