norma-library 0.5.4 → 0.5.10

package/src/sample-data-2.json

@@ -0,0 +1,178 @@
+[
+  {
+    "columns": [
+      {
+        "allowFiltering": true,
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "data",
+        "format": "date",
+        "headerText": "Data",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "duration",
+        "format": "time",
+        "headerText": "Duração",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "campanha",
+        "format": "string",
+        "headerText": "Campanha",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "agente",
+        "format": "string",
+        "headerText": "Agente",
+        "textAlign": "center",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "ani",
+        "format": "number",
+        "headerText": "ANI",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "dnis",
+        "format": "number",
+        "headerText": "DNIS",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "disposition",
+        "format": "string",
+        "headerText": "Tabulação",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "origem",
+        "format": "number",
+        "headerText": "Origem",
+        "textAlign": "left",
+        "width": "100%"
+      },
+      {
+        "allowFiltering": true,
+        "allowSorting": true,
+        "field": "id",
+        "format": "number",
+        "headerText": "ID",
+        "textAlign": "left",
+        "width": "100%"
+      }
+    ],
+    "dataSource": [
+      {
+        "data": "01/05/2022",
+        "duration": "08:18",
+        "campanha": "Campanha 1",
+        "agente": 16321,
+        "ani": 50364908,
+        "dnis": 123456,
+        "disposition": "Tabulação 1",
+        "origin": 12723,
+        "id": 10
+      },
+      {
+        "data": "01/05/2022",
+        "duration": "00:18",
+        "campanha": "Campanha 2",
+        "agente": "16322",
+        "ani": "50364909",
+        "dnis": "123457",
+        "disposition": "Tabulação 2",
+        "origin": "12721",
+        "id": 20
+      },
+      {
+        "data": "03/05/2022",
+        "duration": "03:13",
+        "campanha": "Campanha 1",
+        "agente": "16321",
+        "ani": "50364908",
+        "dnis": "123456",
+        "disposition": "Tabulação 1",
+        "origin": "12723",
+        "id": 30
+      },
+      {
+        "data": "01/05/2022",
+        "duration": "09:19",
+        "campanha": "Campanha 1",
+        "agente": "16321",
+        "ani": "50364908",
+        "dnis": "123456",
+        "disposition": "Tabulação 1",
+        "origin": "12723",
+        "id": 40
+      },
+      {
+        "data": "02/05/2022",
+        "duration": "02:59",
+        "campanha": "Campanha 1",
+        "agente": "16321",
+        "ani": "50364908",
+        "dnis": "123456",
+        "disposition": "Tabulação 1",
+        "origin": "12723",
+        "id": 50
+      },
+      {
+        "data": "04/05/2022",
+        "duration": "05:02",
+        "campanha": "Campanha 1",
+        "agente": "16321",
+        "ani": "50364908",
+        "dnis": "123456",
+        "disposition": "Tabulação 1",
+        "origin": "12723",
+        "id": 60
+      },
+      {
+        "data": "21/05/2022",
+        "duration": "06:02",
+        "campanha": "Campanha 7",
+        "agente": "16315",
+        "ani": "50364909",
+        "dnis": "123456",
+        "disposition": "Tabulação 7",
+        "origin": "12754",
+        "id": 70
+      },
+      {
+        "data": "23/05/2022",
+        "duration": "04:04",
+        "campanha": "Campanha 8",
+        "agente": "16321",
+        "ani": "50364908",
+        "dnis": "123456",
+        "disposition": "Tabulação 8",
+        "origin": "12752",
+        "id": 80
+      }
+    ]
+  }
+]

package/src/sample-data.json

@@ -2,7 +2,6 @@
   {
     "columns": [
       {
-        "allowFiltering": true,
         "allowFiltering": true,
         "allowSorting": true,
         "field": "data",
@@ -35,7 +34,7 @@
         "field": "agente",
         "format": "string",
         "headerText": "Agente",
-        "textAlign": "left",
+        "textAlign": "center",
         "width": "100%"
       },
       {
@@ -68,8 +67,8 @@
       {
         "allowFiltering": true,
         "allowSorting": true,
-        "field": "origem",
-        "format": "number",
+        "field": "origin",
+        "format": "string",
         "headerText": "Origem",
         "textAlign": "left",
         "width": "100%"

package/src/stories/Box.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Box from '../components/Box';
+
+export default {
+  title: 'Layout/Box',
+  component: Box,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'gray',
+      values: [
+        { 
+          name: 'gray', 
+          value: '#f8f8f8' 
+        }
+      ],
+    },
+  },
+  argTypes: {
+    children: {
+      description: 'Adiciona um children.'
+    },
+    size: {
+      description: 'Definir o tamanho do componente.',
+      options: ['small', 'medium', 'large'],
+      control: { type: 'radio' }
+    },
+  },
+}
+
+export const Default = (args) => <Box {...args}><p>Conteudo</p></Box>
+
+Default.args = { 
+  size: 'medium'
+}

package/src/stories/Breadcrumb.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Breadcrumb from '../components/Breadcrumb';
+
+const routes = [
+  {
+    name: 'Pagina 1',
+    route: '/pagina-1'
+  },
+  {
+    name: 'Pagina 2',
+    route: '/pagina-2'
+  },
+  {
+    name: 'Pagina 3',
+    route: '/pagina-3'
+  }
+]
+
+export default {
+  title: 'Layout/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    links: {
+      description: 'Adicione as rotas que irão aparecer.',
+    },
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    onChange: {
+      description: 'Função para capturar o valor quando clicado.'
+    }
+  }
+}
+
+export const Default = (args) => <Breadcrumb {...args} />
+
+Default.args = {
+  links: routes,
+  className: '',
+  onChange: '',
+}

package/src/stories/Button.stories.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Button } from '../components/Button';
 import type { Meta, StoryObj } from '@storybook/react';
-import { ButtonVariant, SizeVariant, ColorVariant } from '../types';
+import { ButtonVariant, SizeVariant, ColorVariant, DisabledVariant } from '../types';
 
 const sizes: SizeVariant[] = ['small', 'medium', 'large'];
+const disableds: DisabledVariant[] = ['true', 'false'];
 const variants: ButtonVariant[] = ['text', 'outlined', 'contained'];
 const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
 
@@ -28,6 +29,7 @@ const defaultArgs = {
 export const Playground: Story = {
   args: {
     label: 'My Button',
+    disabled: defaultArgs.disabled,
     size: 'medium',
     color: 'primary',
     variant: 'contained',

package/src/stories/Card.stories.tsx

@@ -37,4 +37,4 @@ export const BasicBorderedColors = () => (
       </Card>
     ))}
   </>
-);
+);

package/src/stories/ChatMessageBalloon.stories.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+import { ChatMessageBalloon } from '../components';
+import { Typography } from '@mui/material';
+
+const meta = {
+  title: 'Display/ChatMessageBalloon',
+  component: ChatMessageBalloon,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} ;
+
+export default meta;
+
+
+export const ChatMessageBalloonBasic = () => {
+  return (
+    <div style={{backgroundColor: "#F0F0F0", boxSizing: "border-box", padding: "20px"}}>
+      <ChatMessageBalloon 
+        onMouseEnter={ () => console.log('onMouseEnter') }
+        bottomChildren={<div>Bottom Children</div>}
+        label="Agente Marcos" 
+        description={
+          <Typography
+            variant="body1"
+            style={{
+              fontSize: "16px"
+            }}
+          >
+            {"Olá, tudo bem? Meu nome é Ana e falo em nome do banco Bradesco. Eu gostaria de falar com Maria Conceição da Silva"}
+          </Typography>
+        }
+        date={"10:23"} 
+        direction="I"
+        attachments={[]}
+      >
+        <span style={{ 
+          height: "38px", 
+          width: "38px", 
+          border: "1px solid #FF8348", 
+          borderRadius: "38px", 
+          backgroundColor: "#FFF",
+          display: "flex", 
+          alignItems: "center",
+          justifyContent: "center",
+          marginRight: "10px"
+        }}>{"1"}</span>
+        <span style={{ 
+          height: "38px", 
+          width: "38px", 
+          border: "1px solid #FF8348", 
+          borderRadius: "38px", 
+          backgroundColor: "#FFF",
+          display: "flex", 
+          alignItems: "center",
+          justifyContent: "center"
+        }}>{"2"}</span>
+      </ChatMessageBalloon>
+
+      <ChatMessageBalloon 
+        onMouseEnter={ () => console.log('onMouseEnter') }
+        bottomChildren={<div>Bottom children</div>}
+        label="Agente Marcos" 
+        description={
+          <Typography
+            variant="body1"
+            style={{
+              fontSize: "16px"
+            }}
+          >
+            {"Olá, tudo bem? Meu nome é Ana e falo em nome do banco Bradesco. Eu gostaria de falar com Maria Conceição da Silva"}
+          </Typography>
+        }
+        date={"10:23"} 
+        direction="O"
+        attachments={[]}
+      >
+        <span style={{ 
+          height: "38px", 
+          width: "38px", 
+          border: "1px solid #FF8348", 
+          borderRadius: "38px", 
+          backgroundColor: "#FFF",
+          display: "flex", 
+          alignItems: "center",
+          justifyContent: "center",
+          marginRight: "10px"
+        }}>{"1"}</span>
+        <span style={{ 
+          height: "38px", 
+          width: "38px", 
+          border: "1px solid #FF8348", 
+          borderRadius: "38px", 
+          backgroundColor: "#FFF",
+          display: "flex", 
+          alignItems: "center",
+          justifyContent: "center"
+        }}>{"2"}</span>
+      </ChatMessageBalloon>
+    </div>
+
+    
+  );
+};

package/src/stories/DateInput.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import DateInput from '../components/DateInput';
+
+export default {
+  title: 'Form/DateInput',
+  component: DateInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: { 
+    dateFormat: {
+      description: "Adicione uma formato de data: 'dd/MM/yyyy' ou 'dd/MM/yyyy HH:mm'.",
+      options: ['dd/MM/yyyy', 'dd/MM/yyyy HH:mm']
+    },
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    label: {
+      description: 'Adicione uma label.'
+    },
+    dateSelected: {
+      description: 'Adicione uma data inicial.'
+    },
+    onChange: {
+      description: 'Função para capturar o valor quando alterado.'
+    },
+    showTimeSelect: {
+      description: 'Adiciona horario na seleção da data.'
+    },
+    timeFormat: {
+      description: "Adicione uma formato ao horario na seleção da data."
+    },
+    disabled: {
+      description: 'Habilita ou desabilita.'
+    }
+  }
+
+}
+
+export const Default = (args) => <DateInput {...args} />
+
+Default.args = {
+  dateFormat: "dd/MM/yyyy HH:mm",
+  className: '',
+  label: 'Data:',
+  dateSelected: new Date(),
+  onChange: '',
+  showTimeSelect: false,
+  timeFormat: 'HH:mm',
+  disabled: false
+}

package/src/stories/Modal.stories.tsx

@@ -120,6 +120,11 @@ export const ModalAction = () => {
           aria-labelledby="modal-modal-title"
           aria-describedby="modal-modal-description"
           action={defaultAction}
+          paperProps={{
+            sx: {
+              width: "90vw"
+            }
+          }}
         >
           <>
             <Typography id="modal-modal-title" variant="h6" component="h2">

package/src/stories/MultiSelectInput.stories.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import MultiSelectInput from '../components/MultiSelectInput';
+
+export default {
+  title: 'Form/MultiSelectInput',
+  component: MultiSelectInput,
+  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'
+    },
+    {
+      label: 'options 4',
+      value: 'value 4'
+    },
+    {
+      label: 'options 5',
+      value: 'value 5'
+    },
+    {
+      label: 'options 6',
+      value: 'value 6'
+    }
+  ]
+  const [selectedValue, setSelectedValue] = useState<any>(options[0])
+  return (
+    <div style={{
+      width: 300
+    }}>
+      <MultiSelectInput 
+        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/ProgressBar.stories.tsx

@@ -60,10 +60,10 @@ export const ProgressBarColors: Story = () => (
     <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
       <>
         <div style={{ position: 'relative', flex: 1, width: '230px' }}>
-          <ProgressBar value={18} total={100} color="inherit" label="Progress Inherit" />
+          <ProgressBar value={100} total={300} color="inherit" label="Progress Inherit" />
         </div>
         <div style={{ position: 'relative', flex: 1, width: '230px' }}>
-          <ProgressBar value={77} total={100} color="secondary" label="Progress secondary" />
+          <ProgressBar value={125} total={1000} color="secondary" label="Progress secondary" />
         </div>
       </>
     </div>

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,
+}