norma-library 0.6.86 → 0.6.87

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

package/src/stories/NormaChatMessageBalloon.stories.tsx

@@ -1,39 +1,42 @@
-import React from 'react';
-import type { Meta } from '@storybook/react';
-import { IconButton, Icons, NormaChatMessageBalloon } from '../components';
-import { useChatMessageBalloon } from '../components/NormaChatMessageBalloon/hook';
-import { Avatar, Box, Typography } from '@mui/material';
-import { SentimentDissatisfiedOutlined, TagFacesOutlined } from '@mui/icons-material';
+import React from 'react'
+import type { Meta } from '@storybook/react'
+import { IconButton, Icons, NormaChatMessageBalloon } from '../components'
+import { useChatMessageBalloon } from '../components/NormaChatMessageBalloon/hook'
+import { Avatar, Box, Typography } from '@mui/material'
+import { SentimentDissatisfiedOutlined, TagFacesOutlined } from '@mui/icons-material'
 
 const messageArr = [
   {
     direction: 'O' as 'O',
-    label: "Teste de Título",
-    description: "lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.",
-    date: "06/02/2025",
+    label: 'Teste de Título',
+    description:
+      'lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.',
+    date: '06/02/2025',
   },
   {
     direction: 'I' as 'I',
-    label: "Teste de Título",
-    description: "lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.",
-    date: "06/02/2025",
+    label: 'Teste de Título',
+    description:
+      'lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.',
+    date: '06/02/2025',
   },
   {
     direction: 'O' as 'O',
-    label: "Teste de Título",
-    description: "lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.",
-    date: "07/02/2025",
-  }
-];
+    label: 'Teste de Título',
+    description:
+      'lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.',
+    date: '07/02/2025',
+  },
+]
 
 const avatars = {
   O: {
     src: '',
-    alt: 'HC'
+    alt: 'HC',
   },
   I: {
     src: 'https://letsenhance.io/static/73136da51c245e80edc6ccfe44888a99/1015f/MainBefore.jpg',
-    alt: 'MB'
+    alt: 'MB',
   },
 }
 
@@ -41,17 +44,27 @@ const Template = () => {
   return (
     <>
       {messageArr.map((message, index) => {
-        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false);
+        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false)
         return (
-          <Box key={index} sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: '#F5F5F5',
-            padding: '20px',
-          }}>
-            <NormaChatMessageBalloon.Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
-              <NormaChatMessageBalloon.Row direction={message.direction} onMouseEnter={() => console.log('row hover')} onMouseLeave={() => console.log('row leave')}>
+          <Box
+            key={index}
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              backgroundColor: '#F5F5F5',
+              padding: '20px',
+            }}
+          >
+            <NormaChatMessageBalloon.Root
+              onMouseEnter={() => console.log('hover')}
+              onMouseLeave={() => console.log('leave')}
+            >
+              <NormaChatMessageBalloon.Row
+                direction={message.direction}
+                onMouseEnter={() => console.log('row hover')}
+                onMouseLeave={() => console.log('row leave')}
+              >
                 <NormaChatMessageBalloon.Content
                   label={message.label}
                   description={message.description}
@@ -64,33 +77,42 @@ const Template = () => {
               </NormaChatMessageBalloon.Row>
             </NormaChatMessageBalloon.Root>
           </Box>
-        );
+        )
       })}
     </>
-  );
-};
+  )
+}
 
 const TemplateWithAvatar = () => {
   return (
     <>
       {messageArr.map((message, index) => {
-        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false);
+        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false)
         return (
-          <Box key={index} sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: '#F5F5F5',
-            padding: '20px',
-          }}>
-            <NormaChatMessageBalloon.Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
-              <NormaChatMessageBalloon.Row direction={message.direction} onMouseEnter={() => console.log('row hover')} onMouseLeave={() => console.log('row leave')}>
+          <Box
+            key={index}
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              backgroundColor: '#F5F5F5',
+              padding: '20px',
+            }}
+          >
+            <NormaChatMessageBalloon.Root
+              onMouseEnter={() => console.log('hover')}
+              onMouseLeave={() => console.log('leave')}
+            >
+              <NormaChatMessageBalloon.Row
+                direction={message.direction}
+                onMouseEnter={() => console.log('row hover')}
+                onMouseLeave={() => console.log('row leave')}
+              >
                 <NormaChatMessageBalloon.Content
                   label={message.label}
                   description={message.description}
                   direction={message.direction}
                   className={balloonClassNames}
-
                 />
               </NormaChatMessageBalloon.Row>
               <NormaChatMessageBalloon.Row direction={message.direction}>
@@ -119,27 +141,37 @@ const TemplateWithAvatar = () => {
               </NormaChatMessageBalloon.Row>
             </NormaChatMessageBalloon.Root>
           </Box>
-        );
+        )
       })}
     </>
-  );
-};
+  )
+}
 
 const TemplateWithChildren = () => {
   return (
     <>
       {messageArr.map((message, index) => {
-        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false);
+        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false)
         return (
-          <Box key={index} sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: '#F5F5F5',
-            padding: '20px',
-          }}>
-            <NormaChatMessageBalloon.Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
-              <NormaChatMessageBalloon.Row direction={message.direction} onMouseEnter={() => console.log('row hover')} onMouseLeave={() => console.log('row leave')}>
+          <Box
+            key={index}
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              backgroundColor: '#F5F5F5',
+              padding: '20px',
+            }}
+          >
+            <NormaChatMessageBalloon.Root
+              onMouseEnter={() => console.log('hover')}
+              onMouseLeave={() => console.log('leave')}
+            >
+              <NormaChatMessageBalloon.Row
+                direction={message.direction}
+                onMouseEnter={() => console.log('row hover')}
+                onMouseLeave={() => console.log('row leave')}
+              >
                 <NormaChatMessageBalloon.Content
                   label={message.label}
                   description={message.description}
@@ -153,36 +185,41 @@ const TemplateWithChildren = () => {
               {/* Children located here */}
               <NormaChatMessageBalloon.Row direction={message.direction}>
                 <IconButton>
-                  <Icons icon={TagFacesOutlined} scale='medium' color='black' />
+                  <Icons icon={TagFacesOutlined} scale="medium" color="black" />
                 </IconButton>
                 <IconButton>
-                  <Icons icon={SentimentDissatisfiedOutlined} scale='medium' color='black' />
+                  <Icons icon={SentimentDissatisfiedOutlined} scale="medium" color="black" />
                 </IconButton>
                 <p>...children</p>
               </NormaChatMessageBalloon.Row>
-
             </NormaChatMessageBalloon.Root>
           </Box>
-        );
+        )
       })}
     </>
-  );
-};
+  )
+}
 
 const SimplifiedTemplate = () => {
   return (
     <>
       {messageArr.map((message, index) => {
-        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false);
+        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false)
         return (
-          <Box key={index} sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            backgroundColor: '#F5F5F5',
-            padding: '20px',
-          }}>
-            <NormaChatMessageBalloon.Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
+          <Box
+            key={index}
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              backgroundColor: '#F5F5F5',
+              padding: '20px',
+            }}
+          >
+            <NormaChatMessageBalloon.Root
+              onMouseEnter={() => console.log('hover')}
+              onMouseLeave={() => console.log('leave')}
+            >
               <NormaChatMessageBalloon.MessageItem
                 direction={message.direction}
                 label={message.label}
@@ -194,10 +231,10 @@ const SimplifiedTemplate = () => {
                 children={
                   <>
                     <IconButton>
-                      <Icons icon={TagFacesOutlined} scale='medium' color='black' />
+                      <Icons icon={TagFacesOutlined} scale="medium" color="black" />
                     </IconButton>
                     <IconButton>
-                      <Icons icon={TagFacesOutlined} scale='medium' color='primary' />
+                      <Icons icon={TagFacesOutlined} scale="medium" color="primary" />
                     </IconButton>
                     <p>...children</p>
                   </>
@@ -205,11 +242,11 @@ const SimplifiedTemplate = () => {
               />
             </NormaChatMessageBalloon.Root>
           </Box>
-        );
+        )
       })}
     </>
-  );
-};
+  )
+}
 
 const meta = {
   title: 'Norma/ChatMessageBalloon',
@@ -219,11 +256,11 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof Template>;
+} satisfies Meta<typeof Template>
 
-export default meta;
+export default meta
 
-export const Default = Template.bind({});
-export const WithAvatar = TemplateWithAvatar.bind({});
-export const WithChildren = TemplateWithChildren.bind({});
-export const Simplified = SimplifiedTemplate.bind({});
+export const Default = Template.bind({})
+export const WithAvatar = TemplateWithAvatar.bind({})
+export const WithChildren = TemplateWithChildren.bind({})
+export const Simplified = SimplifiedTemplate.bind({})

package/src/stories/Paper.stories.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
-import { Paper } from '../components';
-import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react'
+import { Paper } from '../components'
+import type { Meta, StoryObj } from '@storybook/react'
 
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import { ThemeProvider, styled } from '@mui/material/styles';
-import { themes } from '../helpers';
+import Grid from '@mui/material/Grid'
+import Box from '@mui/material/Box'
+import { ThemeProvider, styled } from '@mui/material/styles'
+import { themes } from '../helpers'
 
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
   textAlign: 'center',
   height: 60,
   lineHeight: '60px',
-}));
+}))
 
 const meta = {
   title: 'Layout/Paper',
@@ -22,13 +22,13 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof Paper>;
+} satisfies Meta<typeof Paper>
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
-const defaultArgs = {};
+const defaultArgs = {}
 
 export const PaperElevations = () => (
   <Grid container spacing={2}>
@@ -42,7 +42,7 @@ export const PaperElevations = () => (
           gap: 2,
         }}
       >
-        {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map(elevation => (
+        {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map((elevation) => (
           <Item key={elevation} elevation={elevation}>
             {`elevation=${elevation}`}
           </Item>
@@ -50,4 +50,4 @@ export const PaperElevations = () => (
       </Box>
     </Grid>
   </Grid>
-);
+)

package/src/stories/ProductCard.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta } from "@storybook/react";
-import { ProductCard } from "../components/ProductCard/ProductCard";
-import React from "react";
+import { Meta } from '@storybook/react'
+import { ProductCard } from '../components/ProductCard/ProductCard'
+import React from 'react'
 
 const meta = {
   title: 'Layout/ProductCard',
@@ -10,58 +10,82 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof ProductCard>;
+} satisfies Meta<typeof ProductCard>
 
-export default meta;
+export default meta
 
-export const BasicProductCard = () => <ProductCard flaggable title="Financeiro e Jurídico" description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança." color="#FDF6E3"
-  icon={{
-    iconName: 'olosAnalytics',
-    iconColor: "#B16E4B",
-    bgColor: "#F6F07F",
-    scale: "medium",
-    iconWidth: "36px",
-    iconHeight: "36px"
-  }}
-/>;
-BasicProductCard.storyName = 'Basic Product Card';
+export const BasicProductCard = () => (
+  <ProductCard
+    flaggable
+    title="Financeiro e Jurídico"
+    description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
+    color="#FDF6E3"
+    icon={{
+      iconName: 'olosAnalytics',
+      iconColor: '#B16E4B',
+      bgColor: '#F6F07F',
+      scale: 'medium',
+      iconWidth: '36px',
+      iconHeight: '36px',
+    }}
+  />
+)
+BasicProductCard.storyName = 'Basic Product Card'
 
-export const DisabledProductCard = () => <ProductCard flaggable title="Financeiro e Jurídico" description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança." color="#FDF6E3"
-  icon={{
-    iconName: 'olosCloud',
-    iconColor: "#B16E4B",
-    bgColor: "#F6F07F",
-    scale: "medium",
-    iconWidth: "36px",
-    iconHeight: "36px"
-  }}
-  disabled
-/>;
-DisabledProductCard.storyName = 'Disabled Product Card';
+export const DisabledProductCard = () => (
+  <ProductCard
+    flaggable
+    title="Financeiro e Jurídico"
+    description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
+    color="#FDF6E3"
+    icon={{
+      iconName: 'olosCloud',
+      iconColor: '#B16E4B',
+      bgColor: '#F6F07F',
+      scale: 'medium',
+      iconWidth: '36px',
+      iconHeight: '36px',
+    }}
+    disabled
+  />
+)
+DisabledProductCard.storyName = 'Disabled Product Card'
 
-export const FlaggedProductCard = () => <ProductCard flaggable flagged title="Financeiro e Jurídico" description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança." color="#FDF6E3"
-  icon={{
-    iconName: 'olosAnywhere',
-    iconColor: "#B16E4B",
-    bgColor: "#F6F07F",
-    scale: "medium",
-    iconWidth: "36px",
-    iconHeight: "36px"
-  }}
-/>;
+export const FlaggedProductCard = () => (
+  <ProductCard
+    flaggable
+    flagged
+    title="Financeiro e Jurídico"
+    description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
+    color="#FDF6E3"
+    icon={{
+      iconName: 'olosAnywhere',
+      iconColor: '#B16E4B',
+      bgColor: '#F6F07F',
+      scale: 'medium',
+      iconWidth: '36px',
+      iconHeight: '36px',
+    }}
+  />
+)
 
-FlaggedProductCard.storyName = 'Flagged Product Card';
-
-export const NoBorderProductCard = () => <ProductCard flaggable title="Financeiro e Jurídico" description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança." color="#FDF6E3"
-  icon={{
-    iconName: 'olosAnalytics',
-    iconColor: "#B16E4B",
-    bgColor: "#F6F07F",
-    scale: "medium",
-    iconWidth: "36px",
-    iconHeight: "36px"
-  }}
-  hasBorder={false}
-/>;
-NoBorderProductCard.storyName = 'No Border Product Card';
+FlaggedProductCard.storyName = 'Flagged Product Card'
 
+export const NoBorderProductCard = () => (
+  <ProductCard
+    flaggable
+    title="Financeiro e Jurídico"
+    description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança."
+    color="#FDF6E3"
+    icon={{
+      iconName: 'olosAnalytics',
+      iconColor: '#B16E4B',
+      bgColor: '#F6F07F',
+      scale: 'medium',
+      iconWidth: '36px',
+      iconHeight: '36px',
+    }}
+    hasBorder={false}
+  />
+)
+NoBorderProductCard.storyName = 'No Border Product Card'