norma-library 0.6.86 → 0.6.88

package/src/stories/ChatMessageBalloon.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta } from '@storybook/react';
-import { ChatMessageBalloon } from '../components';
-import { Typography } from '@mui/material';
+import type { Meta } from '@storybook/react'
+import { ChatMessageBalloon } from '../components'
+import { Typography } from '@mui/material'
 
 const meta = {
   title: 'Display/ChatMessageBalloon',
@@ -12,97 +12,114 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} ;
-
-export default meta;
+}
 
+export default meta
 
 export const ChatMessageBalloonBasic = () => {
   return (
-    <div style={{backgroundColor: "#F0F0F0", boxSizing: "border-box", padding: "20px"}}>
-      <ChatMessageBalloon 
-        onMouseEnter={ () => console.log('onMouseEnter') }
+    <div style={{ backgroundColor: '#F0F0F0', boxSizing: 'border-box', padding: '20px' }}>
+      <ChatMessageBalloon
+        onMouseEnter={() => console.log('onMouseEnter')}
         bottomChildren={<div>Bottom Children</div>}
-        label="Agente Marcos" 
+        label="Agente Marcos"
         description={
           <Typography
             variant="body1"
             style={{
-              fontSize: "16px"
+              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"}
+            {
+              '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"} 
+        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>
+        <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') }
+      <ChatMessageBalloon
+        onMouseEnter={() => console.log('onMouseEnter')}
         bottomChildren={<div>Bottom children</div>}
-        label="Agente Marcos" 
+        label="Agente Marcos"
         description={
           <Typography
             variant="body1"
             style={{
-              fontSize: "16px"
+              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"}
+            {
+              '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"} 
+        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>
+        <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/CheckBox.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { CheckBox } from '../components/CheckBox';
-import type { Meta, StoryObj } from '@storybook/react';
-import { FormControlLabel } from '@mui/material';
-import { pink } from '@mui/material/colors';
+import React from 'react'
+import { CheckBox } from '../components/CheckBox'
+import type { Meta, StoryObj } from '@storybook/react'
+import { FormControlLabel } from '@mui/material'
+import { pink } from '@mui/material/colors'
 
 const meta = {
   title: 'Form/CheckBox',
@@ -12,23 +12,23 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof CheckBox>;
+} satisfies Meta<typeof CheckBox>
 
-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: {
     color: 'primary',
   },
-};
+}
 
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } }
 
 export const CheckboxVariant = () => {
   return (
@@ -38,9 +38,9 @@ export const CheckboxVariant = () => {
       <CheckBox {...label} disabled />
       <CheckBox {...label} disabled checked />
     </>
-  );
-};
-CheckboxVariant.storyName = 'CheckBox Variants';
+  )
+}
+CheckboxVariant.storyName = 'CheckBox Variants'
 
 export const CheckboxProps = () => {
   return (
@@ -50,9 +50,9 @@ export const CheckboxProps = () => {
       <FormControlLabel required control={<CheckBox />} label="Required" />
       <FormControlLabel disabled control={<CheckBox />} label="Disabled" />
     </>
-  );
-};
-CheckboxProps.storyName = 'Variants and Label';
+  )
+}
+CheckboxProps.storyName = 'Variants and Label'
 
 export const CheckboxColors = () => {
   return (
@@ -72,9 +72,9 @@ export const CheckboxColors = () => {
         }}
       />
     </>
-  );
-};
-CheckboxColors.storyName = 'CheckBox Colors';
+  )
+}
+CheckboxColors.storyName = 'CheckBox Colors'
 
 export const CheckboxSizes = () => {
   return (
@@ -83,6 +83,6 @@ export const CheckboxSizes = () => {
       <FormControlLabel control={<CheckBox />} label="CheckBox Default" />
       <FormControlLabel control={<CheckBox size="medium" />} label="CheckBox Medium" />
     </>
-  );
-};
-CheckboxSizes.storyName = 'CheckBox Sizes';
+  )
+}
+CheckboxSizes.storyName = 'CheckBox Sizes'

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'