norma-library 0.6.86 → 0.6.88

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'

package/src/stories/MultiSelectInput.stories.tsx

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