norma-library 0.6.86 → 0.6.87

package/src/stories/Tag.stories.tsx

@@ -1,12 +1,20 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta } from '@storybook/react';
-import { Tag } from '../components';
-import { ColorVariant, TextFieldSizeVariant } from '../types';
+import type { Meta } from '@storybook/react'
+import { Tag } from '../components'
+import { ColorVariant, TextFieldSizeVariant } from '../types'
 
-const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
+const colors: ColorVariant[] = [
+  'inherit',
+  'primary',
+  'secondary',
+  'success',
+  'error',
+  'info',
+  'warning',
+]
 
-const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
+const sizes: TextFieldSizeVariant[] = ['small', 'medium']
 
 const meta = {
   title: 'Display/Tag',
@@ -16,9 +24,9 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof Tag>;
+} satisfies Meta<typeof Tag>
 
-export default meta;
+export default meta
 
 export const TagBasic = () => {
   return (
@@ -26,8 +34,8 @@ export const TagBasic = () => {
       <Tag label="Chip Filled" color="primary" style={{ margin: 5 }} />
       <Tag label="Chip Outlined" outlined style={{ margin: 5 }} />
     </>
-  );
-};
+  )
+}
 
 export const TagColors = () => {
   return (
@@ -39,8 +47,8 @@ export const TagColors = () => {
         </div>
       ))}
     </>
-  );
-};
+  )
+}
 
 export const TagSizes = () => {
   return (
@@ -52,5 +60,5 @@ export const TagSizes = () => {
         </div>
       ))}
     </>
-  );
-};
+  )
+}

package/src/stories/Text.stories.tsx

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

package/src/stories/TextField.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'
 
-import Box from '@mui/material/Box';
-import type { Meta, StoryObj } from '@storybook/react';
-import { TextField } from '../components';
+import Box from '@mui/material/Box'
+import type { Meta, StoryObj } from '@storybook/react'
+import { TextField } from '../components'
 
 const meta = {
   title: 'Form/TextField',
@@ -12,15 +12,15 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof TextField>;
+} satisfies Meta<typeof TextField>
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 const defaultArgs = {
   disabled: false,
-};
+}
 
 export const Playground: Story = {
   args: {
@@ -29,7 +29,7 @@ export const Playground: Story = {
     color: 'primary',
     variant: 'standard',
   },
-};
+}
 
 export const TextFieldVariant = () => (
   <>
@@ -37,8 +37,8 @@ export const TextFieldVariant = () => (
     <TextField variant="filled" label="Variant Contained" />
     <TextField variant="outlined" label="Variant Outlined" />
   </>
-);
-TextFieldVariant.storyName = 'TextField Variants';
+)
+TextFieldVariant.storyName = 'TextField Variants'
 
 export const TextFieldValidation = () => (
   <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
@@ -61,7 +61,13 @@ export const TextFieldValidation = () => (
         />
       </div>
       <div>
-        <TextField error id="filled-error" label="Error" defaultValue="Hello World" variant="filled" />
+        <TextField
+          error
+          id="filled-error"
+          label="Error"
+          defaultValue="Hello World"
+          variant="filled"
+        />
         <TextField
           error
           id="filled-error-helper-text"
@@ -72,7 +78,13 @@ export const TextFieldValidation = () => (
         />
       </div>
       <div>
-        <TextField error id="standard-error" label="Error" defaultValue="Hello World" variant="standard" />
+        <TextField
+          error
+          id="standard-error"
+          label="Error"
+          defaultValue="Hello World"
+          variant="standard"
+        />
         <TextField
           error
           id="standard-error-helper-text"
@@ -84,8 +96,8 @@ export const TextFieldValidation = () => (
       </div>
     </Box>
   </div>
-);
-TextFieldValidation.storyName = 'TextField Validation';
+)
+TextFieldValidation.storyName = 'TextField Validation'
 
 export const TextFieldMultiline = () => (
   <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
@@ -99,11 +111,28 @@ export const TextFieldMultiline = () => (
     >
       <div>
         <TextField id="outlined-multiline-flexible" label="Multiline" multiline maxRows={4} />
-        <TextField id="outlined-textarea" label="Multiline Placeholder" placeholder="Placeholder" multiline />
-        <TextField id="outlined-multiline-static" label="Multiline" multiline rows={4} defaultValue="Default Value" />
+        <TextField
+          id="outlined-textarea"
+          label="Multiline Placeholder"
+          placeholder="Placeholder"
+          multiline
+        />
+        <TextField
+          id="outlined-multiline-static"
+          label="Multiline"
+          multiline
+          rows={4}
+          defaultValue="Default Value"
+        />
       </div>
       <div>
-        <TextField id="filled-multiline-flexible" label="Multiline" multiline maxRows={4} variant="filled" />
+        <TextField
+          id="filled-multiline-flexible"
+          label="Multiline"
+          multiline
+          maxRows={4}
+          variant="filled"
+        />
         <TextField
           id="filled-textarea"
           label="Multiline Placeholder"
@@ -121,7 +150,13 @@ export const TextFieldMultiline = () => (
         />
       </div>
       <div>
-        <TextField id="standard-multiline-flexible" label="Multiline" multiline maxRows={4} variant="standard" />
+        <TextField
+          id="standard-multiline-flexible"
+          label="Multiline"
+          multiline
+          maxRows={4}
+          variant="standard"
+        />
         <TextField
           id="standard-textarea"
           label="Multiline Placeholder"
@@ -140,8 +175,8 @@ export const TextFieldMultiline = () => (
       </div>
     </Box>
   </div>
-);
-TextFieldMultiline.storyName = 'TextField Multiline';
+)
+TextFieldMultiline.storyName = 'TextField Multiline'
 
 export const TextFieldSizes = () => (
   <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
@@ -158,17 +193,34 @@ export const TextFieldSizes = () => (
         <TextField label="Size" id="outlined-size-normal" defaultValue="Normal" />
       </div>
       <div>
-        <TextField label="Size" id="filled-size-small" defaultValue="Small" variant="filled" size="small" />
+        <TextField
+          label="Size"
+          id="filled-size-small"
+          defaultValue="Small"
+          variant="filled"
+          size="small"
+        />
         <TextField label="Size" id="filled-size-normal" defaultValue="Normal" variant="filled" />
       </div>
       <div>
-        <TextField label="Size" id="standard-size-small" defaultValue="Small" size="small" variant="standard" />
-        <TextField label="Size" id="standard-size-normal" defaultValue="Normal" variant="standard" />
+        <TextField
+          label="Size"
+          id="standard-size-small"
+          defaultValue="Small"
+          size="small"
+          variant="standard"
+        />
+        <TextField
+          label="Size"
+          id="standard-size-normal"
+          defaultValue="Normal"
+          variant="standard"
+        />
       </div>
     </Box>
   </div>
-);
-TextFieldSizes.storyName = 'TextField Sizes';
+)
+TextFieldSizes.storyName = 'TextField Sizes'
 
 export const TextFieldColors = () => (
   <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
@@ -186,8 +238,8 @@ export const TextFieldColors = () => (
       <TextField label="Standard warning" variant="standard" color="warning" focused />
     </Box>
   </div>
-);
-TextFieldColors.storyName = 'TextField Colors';
+)
+TextFieldColors.storyName = 'TextField Colors'
 
 export const TextFieldProps = () => (
   <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
@@ -205,7 +257,12 @@ export const TextFieldProps = () => (
       <div>
         <TextField required id="outlined-required" label="Required" defaultValue="Hello World" />
         <TextField disabled id="outlined-disabled" label="Disabled" defaultValue="Hello World" />
-        <TextField id="outlined-password-input" label="Password" type="password" autoComplete="current-password" />
+        <TextField
+          id="outlined-password-input"
+          label="Password"
+          type="password"
+          autoComplete="current-password"
+        />
         <TextField
           id="outlined-read-only-input"
           label="Read Only"
@@ -231,8 +288,20 @@ export const TextFieldProps = () => (
         />
       </div>
       <div>
-        <TextField required id="filled-required" label="Required" defaultValue="Hello World" variant="filled" />
-        <TextField disabled id="filled-disabled" label="Disabled" defaultValue="Hello World" variant="filled" />
+        <TextField
+          required
+          id="filled-required"
+          label="Required"
+          defaultValue="Hello World"
+          variant="filled"
+        />
+        <TextField
+          disabled
+          id="filled-disabled"
+          label="Disabled"
+          defaultValue="Hello World"
+          variant="filled"
+        />
         <TextField
           id="filled-password-input"
           label="Password"
@@ -268,8 +337,20 @@ export const TextFieldProps = () => (
         />
       </div>
       <div>
-        <TextField required id="standard-required" label="Required" defaultValue="Hello World" variant="standard" />
-        <TextField disabled id="standard-disabled" label="Disabled" defaultValue="Hello World" variant="standard" />
+        <TextField
+          required
+          id="standard-required"
+          label="Required"
+          defaultValue="Hello World"
+          variant="standard"
+        />
+        <TextField
+          disabled
+          id="standard-disabled"
+          label="Disabled"
+          defaultValue="Hello World"
+          variant="standard"
+        />
         <TextField
           id="standard-password-input"
           label="Password"
@@ -306,5 +387,5 @@ export const TextFieldProps = () => (
       </div>
     </Box>
   </div>
-);
-TextFieldProps.storyName = 'TextField Props';
+)
+TextFieldProps.storyName = 'TextField Props'

package/src/stories/TextInput.stories.tsx

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

package/src/stories/TimeLine.stories.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { TimeLine, TimeLineData } from '../components/TimeLine/TimeLine';
-import type { Meta } from '@storybook/react';
-import { Stack } from '@mui/material';
+import React from 'react'
+import { TimeLine, TimeLineData } from '../components/TimeLine/TimeLine'
+import type { Meta } from '@storybook/react'
+import { Stack } from '@mui/material'
 
 const meta = {
   title: 'Layout/TimeLine',
@@ -11,7 +11,7 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof TimeLine>;
+} satisfies Meta<typeof TimeLine>
 
 const data: TimeLineData[] = [
   {
@@ -52,32 +52,34 @@ const data: TimeLineData[] = [
     date: '04/10/2024 às 10:00:00',
     description: 'Classificador Iniciado por Artur Mortari',
   },
-];
+]
 
 export const TimeLineBasic = () => {
   return (
     <>
       <TimeLine data={data} />
     </>
-  );
-};
+  )
+}
 
 export const TimeLineThemes = () => {
   return (
     <Stack direction="row" spacing={2}>
-      {['primary', 'secondary', 'inherit', 'error', 'info', 'success', 'warning'].map((color, key) => (
-        <TimeLine data={data} theme={color} key={key} />
-      ))}
+      {['primary', 'secondary', 'inherit', 'error', 'info', 'success', 'warning'].map(
+        (color, key) => (
+          <TimeLine data={data} theme={color} key={key} />
+        ),
+      )}
     </Stack>
-  );
-};
+  )
+}
 
 export const TimeLineColor = () => {
-    return (
-      <>
-        <TimeLine data={data} color='#9c27b0' />
-      </>
-    );
-  };
+  return (
+    <>
+      <TimeLine data={data} color="#9c27b0" />
+    </>
+  )
+}
 
-export default meta;
+export default meta

package/src/stories/TimePicker.stories.tsx

@@ -1,21 +1,21 @@
-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 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';
+import 'dayjs/locale/pt-br'
+import 'dayjs/locale/en'
+import 'dayjs/locale/es'
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
+dayjs.extend(utc)
+dayjs.extend(timezone)
 
 const meta = {
   title: 'Form/TimePicker',
@@ -25,9 +25,9 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof TimePicker>;
+} satisfies Meta<typeof TimePicker>
 
-export default meta;
+export default meta
 
 export const BasicDatePicker = () => (
   <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -35,34 +35,50 @@ export const BasicDatePicker = () => (
       <TimePicker label="TimePicker" />
     </DemoContainer>
   </LocalizationProvider>
-);
+)
 
-BasicDatePicker.storyName = 'TimePicker Basic';
+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" />
+        <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" />
+        <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" />
+        <DesktopTimePicker
+          sx={{ minWidth: 275 }}
+          label="TimePicker Desktop"
+          timezone="America/Sao_Paulo"
+        />
       </div>
     </DemoContainer>
   </LocalizationProvider>
-);
+)
 
-TimePickerVariants.storyName = 'TimePicker Variants';
+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" />
+          <TimePicker
+            sx={{ minWidth: 275 }}
+            label="TimePicker Brazil"
+            timezone="America/Sao_Paulo"
+          />
         </DemoContainer>
       </LocalizationProvider>
     </div>
@@ -70,18 +86,26 @@ export const TimePickerLanguage = () => (
     <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" />
+          <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" />
+          <TimePicker
+            sx={{ minWidth: 275 }}
+            label="TimePicker Spain"
+            timezone="America/Sao_Paulo"
+          />
         </DemoContainer>
       </LocalizationProvider>
     </div>
   </>
-);
+)
 
-TimePickerLanguage.storyName = 'TimePicker Languages';
+TimePickerLanguage.storyName = 'TimePicker Languages'