norma-library 0.6.85 → 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, NormaChatMessageBalloon } from '../components';
-import { useChatMessageBalloon } from '../components/NormaChatMessageBalloon/hook';
-import { Avatar, Box, Typography } from '@mui/material';
-import { IconifyIcon } from '../components/IconifyIcon';
+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>
-                  <IconifyIcon iconName="bx:bx-smile" size='2rem' color='#E18B50' />
+                  <Icons icon={TagFacesOutlined} scale="medium" color="black" />
                 </IconButton>
                 <IconButton>
-                  <IconifyIcon iconName="uil:atom" size='2rem' color='#E18B50' />
+                  <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>
-                      <IconifyIcon iconName="bx:bx-smile" size='2rem' color='#E18B50' />
+                      <Icons icon={TagFacesOutlined} scale="medium" color="black" />
                     </IconButton>
                     <IconButton>
-                      <IconifyIcon iconName="uil:atom" size='2rem' color='#E18B50' />
+                      <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,13 +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." iconColor="#247010" color="#F3FCEA" iconName="lucide:briefcase-medical" />;
-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 title="Suporte" description="Novo mundo de possibilidades em jornada omnicanal, design de Data Lake, Data Blocks e Segurança." iconColor="#6a491d" color="#FDF6E3" iconName="lucide:bookmark" disabled />;
+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 NoBorderProductCard = () => <ProductCard flaggable title="Teste" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eleifend, ex sit amet sagittis interdum, est ante placerat velit, sed consectetur arcu sem id nisi. Integer vitae mauris et lectus vulputate maximus" iconColor="#6a491d" color="#FDF6E3" iconName="lucide:user" hasBorder={false} />;
+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'