norma-library 0.6.86 → 0.6.88

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,130 @@ 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
+    favorite={{
+      flagged: false,
+      onFlag: () => console.log('flagged'),
+    }}
+    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
+    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
+    favorite={{
+      flagged: true,
+      onFlag: () => console.log('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';
+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';
+export const NoBorderProductCard = () => (
+  <ProductCard
+    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'
 
+export const ProductCardGroup = () => (
+  <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', justifyContent: 'center', width: '1024px'}}>
+    <ProductCard
+      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',
+      }}
+    />
+    <ProductCard
+      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',
+      }}
+    />
+    <ProductCard
+      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',
+      }}
+    />
+  </div>
+)
+ProductCardGroup.storyName = 'Product Card Group'

package/src/stories/ProgressBar.stories.tsx

@@ -1,9 +1,17 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ProgressBar } from '../components';
-import { ColorVariant } from '../types';
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { ProgressBar } from '../components'
+import { ColorVariant } from '../types'
 
-const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
+const colors: ColorVariant[] = [
+  'inherit',
+  'primary',
+  'secondary',
+  'success',
+  'error',
+  'info',
+  'warning',
+]
 
 const meta = {
   title: 'Display/ProgressBar',
@@ -13,15 +21,15 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof ProgressBar>;
+} satisfies Meta<typeof ProgressBar>
 
-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: {
@@ -30,7 +38,7 @@ export const Playground: Story = {
     color: 'primary',
     value: 10,
   },
-};
+}
 
 export const ProgressBarBasic = () => (
   <div style={{ display: 'flex', gap: '1rem', width: '320px' }}>
@@ -38,9 +46,9 @@ export const ProgressBarBasic = () => (
       <ProgressBar value={40} total={100} color="primary" />
     </div>
   </div>
-);
+)
 
-ProgressBarBasic.storyName = 'ProgressBar Basic';
+ProgressBarBasic.storyName = 'ProgressBar Basic'
 
 export const ProgressBarTitle: Story = () => (
   <div style={{ display: 'flex', gap: '1rem', width: '320px' }}>
@@ -48,9 +56,9 @@ export const ProgressBarTitle: Story = () => (
       <ProgressBar value={10} label="Progress" total={100} />
     </div>
   </div>
-);
+)
 
-ProgressBarTitle.storyName = 'ProgressBar With Title';
+ProgressBarTitle.storyName = 'ProgressBar With Title'
 
 export const ProgressBarColors: Story = () => (
   <>
@@ -81,9 +89,9 @@ export const ProgressBarColors: Story = () => (
       </div>
     </div>
   </>
-);
+)
 
-ProgressBarColors.storyName = 'ProgressBar Colors';
+ProgressBarColors.storyName = 'ProgressBar Colors'
 
 export const ProgressBarCustomColors: Story = () => (
   <>
@@ -106,11 +114,11 @@ export const ProgressBarCustomColors: Story = () => (
           label="Custom Color Blue"
           h={5}
           hideValue
-          fSize='12px'
+          fSize="12px"
         />
       </div>
     </div>
   </>
-);
+)
 
-ProgressBarCustomColors.storyName = 'ProgressBar Custom Colors';
+ProgressBarCustomColors.storyName = 'ProgressBar Custom Colors'