norma-library 0.6.85 → 0.6.87

package/src/stories/DateInput.stories.tsx

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

package/src/stories/DatePicker.stories.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { DatePicker } from '../components';
-import type { Meta } from '@storybook/react';
+import React from 'react'
+import { DatePicker } from '../components'
+import type { Meta } from '@storybook/react'
 
 const meta = {
   title: 'Form/DatePicker',
@@ -10,12 +10,12 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof DatePicker>;
+} satisfies Meta<typeof DatePicker>
 
-export default meta;
+export default meta
 
-export const BasicDatePicker = () => <DatePicker sx={{ minWidth: 275 }} label="DatePicker" />;
-BasicDatePicker.storyName = 'DatePicker Basic';
+export const BasicDatePicker = () => <DatePicker sx={{ minWidth: 275 }} label="DatePicker" />
+BasicDatePicker.storyName = 'DatePicker Basic'
 
 export const DatePickerVariants = () => (
   <>
@@ -29,9 +29,9 @@ export const DatePickerVariants = () => (
       <DatePicker sx={{ minWidth: 275 }} label="DatePicker Desktop" variant="desktop" />
     </div>
   </>
-);
+)
 
-DatePickerVariants.storyName = 'DatePicker Variants';
+DatePickerVariants.storyName = 'DatePicker Variants'
 
 export const DatePickerLanguage = () => (
   <>
@@ -39,12 +39,17 @@ export const DatePickerLanguage = () => (
       <DatePicker sx={{ minWidth: 275 }} label="DatePicker Brazil" language="pt-br" />
     </div>
     <div style={{ width: '480px', marginBottom: 30 }}>
-      <DatePicker sx={{ minWidth: 275 }} label="DatePicker English" language="en" format="YYYY-MM-DD" />
+      <DatePicker
+        sx={{ minWidth: 275 }}
+        label="DatePicker English"
+        language="en"
+        format="YYYY-MM-DD"
+      />
     </div>
     <div style={{ width: '480px', marginBottom: 30 }}>
       <DatePicker sx={{ minWidth: 275 }} label="DatePicker Spain" language="es" />
     </div>
   </>
-);
+)
 
-DatePickerLanguage.storyName = 'DatePicker Languages';
+DatePickerLanguage.storyName = 'DatePicker Languages'

package/src/stories/DropDown.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta, StoryObj } from '@storybook/react';
-import { Button, DropDown } from '../components';
-import { MenuItem } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button, DropDown } from '../components'
+import { MenuItem } from '@mui/material'
 
 const meta = {
   title: 'Layout/DropDown',
@@ -12,23 +12,23 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof DropDown>;
+} satisfies Meta<typeof DropDown>
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 export const DropDownlBasic = () => {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
+  const open = Boolean(anchorEl)
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
+    setAnchorEl(event.currentTarget)
+  }
 
   const handleClose = () => {
-    setAnchorEl(null);
-  };
+    setAnchorEl(null)
+  }
 
   return (
     <>
@@ -51,7 +51,7 @@ export const DropDownlBasic = () => {
         </DropDown>
       )}
     </>
-  );
-};
+  )
+}
 
-DropDownlBasic.storyName = 'DropDown Basic';
+DropDownlBasic.storyName = 'DropDown Basic'

package/src/stories/IconButton.stories.tsx

@@ -1,11 +1,19 @@
-import React from 'react';
-import { IconButton, Icons } from '../components';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ButtonVariant, SizeVariant, ColorVariant } from '../types';
+import React from 'react'
+import { IconButton, Icons } from '../components'
+import type { Meta, StoryObj } from '@storybook/react'
+import { ButtonVariant, SizeVariant, ColorVariant } from '../types'
 
-const sizes: SizeVariant[] = ['small', 'medium', 'large'];
-const variants: ButtonVariant[] = ['text', 'outlined', 'contained'];
-const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
+const sizes: SizeVariant[] = ['small', 'medium', 'large']
+const variants: ButtonVariant[] = ['text', 'outlined', 'contained']
+const colors: ColorVariant[] = [
+  'inherit',
+  'primary',
+  'secondary',
+  'success',
+  'error',
+  'info',
+  'warning',
+]
 
 const meta = {
   title: 'Layout/IconButton',
@@ -15,15 +23,15 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof IconButton>;
+} satisfies Meta<typeof IconButton>
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 const defaultArgs = {
   color: 'primary',
-};
+}
 
 export const Playground: Story = {
   args: {
@@ -32,7 +40,7 @@ export const Playground: Story = {
     color: 'primary',
     variant: 'text',
   },
-};
+}
 
 export const IconButtonSizes = () => (
   <>
@@ -42,21 +50,31 @@ export const IconButtonSizes = () => (
       </IconButton>
     ))}
   </>
-);
+)
 
-IconButtonSizes.storyName = 'IconButton Sizes';
+IconButtonSizes.storyName = 'IconButton Sizes'
 
 export const IconButtonVariants = () => (
   <>
     {variants.map((variant, key) => (
-      <IconButton key={key} size="medium" variant={variant} color="primary" sx={{ marginRight: '5px' }}>
-        <Icons icon="faceHappy" color={variant === 'contained' ? 'white' : 'primary'} scale="medium" />
+      <IconButton
+        key={key}
+        size="medium"
+        variant={variant}
+        color="primary"
+        sx={{ marginRight: '5px' }}
+      >
+        <Icons
+          icon="faceHappy"
+          color={variant === 'contained' ? 'white' : 'primary'}
+          scale="medium"
+        />
       </IconButton>
     ))}
   </>
-);
+)
 
-IconButtonVariants.storyName = 'IconButton Variants';
+IconButtonVariants.storyName = 'IconButton Variants'
 
 export const IconButtonColors = () => (
   <>
@@ -67,12 +85,18 @@ export const IconButtonColors = () => (
     ))}
     <div>
       {colors.map((color, key) => (
-        <IconButton key={key} size="medium" variant="contained" color={color} sx={{ margin: '5px' }}>
+        <IconButton
+          key={key}
+          size="medium"
+          variant="contained"
+          color={color}
+          sx={{ margin: '5px' }}
+        >
           <Icons icon="user" color="white" scale="medium" />
         </IconButton>
       ))}
     </div>
   </>
-);
+)
 
-IconButtonColors.storyName = 'IconButton Colors';
+IconButtonColors.storyName = 'IconButton Colors'

package/src/stories/Modal.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta, StoryObj } from '@storybook/react';
-import { Button, Modal } from '../components';
-import { Box, Typography } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react'
+import { Button, Modal } from '../components'
+import { Box, Typography } from '@mui/material'
 
 const meta = {
   title: 'Layout/Modal',
@@ -12,14 +12,14 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof Modal>;
+} satisfies Meta<typeof Modal>
 
-export default meta;
+export default meta
 
 export const ModalBasic = () => {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+  const [open, setOpen] = React.useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
 
   return (
     <>
@@ -45,15 +45,15 @@ export const ModalBasic = () => {
         </Modal>
       )}
     </>
-  );
-};
+  )
+}
 
-ModalBasic.storyName = 'Modal Basic';
+ModalBasic.storyName = 'Modal Basic'
 
 export const ModalTitle = () => {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+  const [open, setOpen] = React.useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
   return (
     <>
       <Button onClick={handleOpen} color="primary" variant="outlined">
@@ -67,7 +67,7 @@ export const ModalTitle = () => {
           aria-labelledby="modal-modal-title"
           aria-describedby="modal-modal-description"
           title="Title Modal"
-          description='Description Modal'
+          description="Description Modal"
         >
           <>
             <Typography id="modal-modal-title" variant="h6" component="h2">
@@ -80,15 +80,15 @@ export const ModalTitle = () => {
         </Modal>
       )}
     </>
-  );
-};
+  )
+}
 
-ModalTitle.storyName = 'Modal Title';
+ModalTitle.storyName = 'Modal Title'
 
 export const ModalAction = () => {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+  const [open, setOpen] = React.useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
 
   const defaultAction = [
     {
@@ -105,7 +105,7 @@ export const ModalAction = () => {
       size: 'medium',
       variant: 'contained',
     },
-  ];
+  ]
   return (
     <>
       <Button onClick={handleOpen} color="primary" variant="outlined">
@@ -136,15 +136,15 @@ export const ModalAction = () => {
         </Modal>
       )}
     </>
-  );
-};
+  )
+}
 
-ModalAction.storyName = 'Modal Action';
+ModalAction.storyName = 'Modal Action'
 
 export const ModalProps = () => {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+  const [open, setOpen] = React.useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
 
   const defaultAction = [
     {
@@ -161,7 +161,7 @@ export const ModalProps = () => {
       size: 'medium',
       variant: 'contained',
     },
-  ];
+  ]
   return (
     <>
       <Button onClick={handleOpen} color="primary" variant="outlined">
@@ -188,15 +188,15 @@ export const ModalProps = () => {
         </Modal>
       )}
     </>
-  );
-};
+  )
+}
 
-ModalProps.storyName = 'Modal Title and Action';
+ModalProps.storyName = 'Modal Title and Action'
 
 export const ModalSize = () => {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+  const [open, setOpen] = React.useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
 
   const defaultAction = [
     {
@@ -213,7 +213,7 @@ export const ModalSize = () => {
       size: 'medium',
       variant: 'contained',
     },
-  ];
+  ]
   return (
     <>
       <Button onClick={handleOpen} color="primary" variant="outlined">
@@ -228,7 +228,7 @@ export const ModalSize = () => {
           aria-describedby="modal-modal-description"
           action={defaultAction}
           title="Select a company"
-          width='90vw'
+          width="90vw"
         >
           <>
             <Typography id="modal-modal-title" variant="h6" component="h2">
@@ -241,15 +241,15 @@ export const ModalSize = () => {
         </Modal>
       )}
     </>
-  );
-};
+  )
+}
 
-ModalSize.storyName = 'Modal width and height';
+ModalSize.storyName = 'Modal width and height'
 
 export const ModalOutsideClick = () => {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+  const [open, setOpen] = React.useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
 
   const defaultAction = [
     {
@@ -266,7 +266,7 @@ export const ModalOutsideClick = () => {
       size: 'medium',
       variant: 'contained',
     },
-  ];
+  ]
   return (
     <>
       <Button onClick={handleOpen} color="primary" variant="outlined">
@@ -282,7 +282,7 @@ export const ModalOutsideClick = () => {
           aria-describedby="modal-modal-description"
           action={defaultAction}
           title="Select a company"
-          width='90vw'
+          width="90vw"
         >
           <>
             <Typography id="modal-modal-title" variant="h6" component="h2">
@@ -295,7 +295,7 @@ export const ModalOutsideClick = () => {
         </Modal>
       )}
     </>
-  );
-};
+  )
+}
 
-ModalOutsideClick.storyName = 'Modal custom outside click behaviour';
+ModalOutsideClick.storyName = 'Modal custom outside click behaviour'

package/src/stories/ModalStatus.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta } from '@storybook/react';
-import { ModalStatus } from '../components/StatusModal/StatusModal';
-import { OnAction } from '../types';
+import type { Meta } from '@storybook/react'
+import { ModalStatus } from '../components/StatusModal/StatusModal'
+import { OnAction } from '../types'
 
 const actions: OnAction[] = [
   {
@@ -14,7 +14,7 @@ const actions: OnAction[] = [
     variant: 'contained',
     action: () => {},
   },
-];
+]
 
 const meta = {
   title: 'Layout/ModalStatus',
@@ -24,24 +24,40 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof ModalStatus>;
+} satisfies Meta<typeof ModalStatus>
 
-export default meta;
+export default meta
 
 export const ModalSuccess = () => {
-  return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." actions={actions} type="success" />;
-};
-
-ModalSuccess.storyName = 'Modal Success';
+  return (
+    <ModalStatus
+      title="Título"
+      text="Lorem ipsum dolor sit amet."
+      actions={actions}
+      type="success"
+    />
+  )
+}
+
+ModalSuccess.storyName = 'Modal Success'
 
 export const ModalWarning = () => {
-  return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." actions={actions} type="warning" />;
-};
-
-ModalWarning.storyName = 'Modal Warning';
+  return (
+    <ModalStatus
+      title="Título"
+      text="Lorem ipsum dolor sit amet."
+      actions={actions}
+      type="warning"
+    />
+  )
+}
+
+ModalWarning.storyName = 'Modal Warning'
 
 export const ModalInfo = () => {
-  return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." type="info" actions={actions} />;
-};
+  return (
+    <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." type="info" actions={actions} />
+  )
+}
 
-ModalInfo.storyName = 'Modal Info';
+ModalInfo.storyName = 'Modal Info'