norma-library 0.6.86 → 0.6.87

package/src/stories/Badge.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta } from '@storybook/react';
-import { Avatar, Badge, Icons } from '../components';
-import { AvatarGroup, Stack } from '@mui/material';
+import type { Meta } from '@storybook/react'
+import { Avatar, Badge, Icons } from '../components'
+import { AvatarGroup, Stack } from '@mui/material'
 
 const meta = {
   title: 'Display/Badge',
@@ -12,9 +12,9 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof Badge>;
+} satisfies Meta<typeof Badge>
 
-export default meta;
+export default meta
 
 export const BadgeBasic = () => {
   return (
@@ -23,17 +23,19 @@ export const BadgeBasic = () => {
         <Icons icon="user" />
       </Badge>
     </>
-  );
-};
+  )
+}
 
 export const BadgeColors = () => {
   return (
     <Stack direction="row" spacing={2}>
-      {['primary', 'secondary', 'default', 'error', 'info', 'success', 'warning'].map((color, key) => (
-        <Badge badgeContent={4} color={color} key={key}>
-          <Icons icon="user" />
-        </Badge>
-      ))}
+      {['primary', 'secondary', 'default', 'error', 'info', 'success', 'warning'].map(
+        (color, key) => (
+          <Badge badgeContent={4} color={color} key={key}>
+            <Icons icon="user" />
+          </Badge>
+        ),
+      )}
     </Stack>
-  );
-};
+  )
+}

package/src/stories/Box.stories.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import Box from '../components/Box';
+import React from 'react'
+import Box from '../components/Box'
 
 export default {
   title: 'Layout/Box',
@@ -10,27 +10,31 @@ export default {
     backgrounds: {
       default: 'gray',
       values: [
-        { 
-          name: 'gray', 
-          value: '#f8f8f8' 
-        }
+        {
+          name: 'gray',
+          value: '#f8f8f8',
+        },
       ],
     },
   },
   argTypes: {
     children: {
-      description: 'Adiciona um children.'
+      description: 'Adiciona um children.',
     },
     size: {
       description: 'Definir o tamanho do componente.',
       options: ['small', 'medium', 'large'],
-      control: { type: 'radio' }
+      control: { type: 'radio' },
     },
   },
 }
 
-export const Default = (args) => <Box {...args}><p>Conteudo</p></Box>
+export const Default = (args) => (
+  <Box {...args}>
+    <p>Conteudo</p>
+  </Box>
+)
 
-Default.args = { 
-  size: 'medium'
-}
+Default.args = {
+  size: 'medium',
+}

package/src/stories/Breadcrumb.stories.tsx

@@ -1,18 +1,55 @@
 import React from 'react';
 import Breadcrumb from '../components/Breadcrumb';
+import { BreadCrumbProps } from '../components/Breadcrumb/interface';
+import { ApartmentRounded, DoNotStepOutlined, Home } from '@mui/icons-material';
 
-const routes = [
+const routes: BreadCrumbProps['items'] = [
   {
-    name: 'Pagina 1',
-    route: '/pagina-1'
+    id: '1',
+    label: 'Home',
+    href: '/home',
+    icon: Home,
   },
   {
-    name: 'Pagina 2',
-    route: '/pagina-2'
+    id: '2',
+    label: 'Products',
+    href: '/products',
+    icon: ApartmentRounded,
   },
   {
-    name: 'Pagina 3',
-    route: '/pagina-3'
+    id: '3',
+    label: 'Shoes',
+    href: '/shoes',
+    icon: DoNotStepOutlined,
+  },
+  {
+    id: '4',
+    label: 'Sneakers',
+    href: '/sneakers',
+    icon: "faceAngry",
+  }
+]
+
+const routesWithoutIcons: BreadCrumbProps['items'] = [
+  {
+    id: '1',
+    label: 'Home',
+    href: '/home',
+  },
+  {
+    id: '2',
+    label: 'Products',
+    href: '/products',
+  },
+  {
+    id: '3',
+    label: 'Shoes',
+    href: '/shoes',
+  },
+  {
+    id: '4',
+    label: 'Sneakers',
+    href: '/sneakers',
   }
 ]
 
@@ -24,22 +61,29 @@ export default {
     layout: 'centered',
   },
   argTypes: {
-    links: {
-      description: 'Adicione as rotas que irão aparecer.',
+    items: {
+      description: 'Adicione as rotas que irão aparecer, com as propriedades id, label, href e icon.',
     },
-    className: {
-      description: 'Adicione uma classe.',
+    onHomeClick: {
+      description: 'Função que será chamada ao clicar no botão de Home.',
+    },
+    onPathClick: {
+      description: 'Função que será chamada ao clicar em uma rota.',
     },
-    onChange: {
-      description: 'Função para capturar o valor quando clicado.'
-    }
   }
 }
 
-export const Default = (args) => <Breadcrumb {...args} />
+export const Default = (args: BreadCrumbProps) => <Breadcrumb {...args} />
+export const WithoutIcons = (args: BreadCrumbProps) => <Breadcrumb {...args} />
 
 Default.args = {
-  links: routes,
-  className: '',
-  onChange: '',
+  items: routes,
+  onHomeClick: () => console.log('Home clicked', routes[0]),
+  onPathClick: (item) => console.log('Path clicked', item),
+}
+
+WithoutIcons.args = {
+  items: routesWithoutIcons.map(({ id, label, href }) => ({ id, label, href })),
+  onHomeClick: () => console.log('Home clicked', routes[0]),
+  onPathClick: (item) => console.log('Path clicked', item),
 }

package/src/stories/Button.stories.tsx

@@ -1,12 +1,20 @@
-import React from 'react';
-import { Button } from '../components/Button';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ButtonVariant, SizeVariant, ColorVariant, DisabledVariant } from '../types';
+import React from 'react'
+import { Button } from '../components/Button'
+import type { Meta, StoryObj } from '@storybook/react'
+import { ButtonVariant, SizeVariant, ColorVariant, DisabledVariant } from '../types'
 
-const sizes: SizeVariant[] = ['small', 'medium', 'large'];
-const disableds: DisabledVariant[] = ['true', 'false'];
-const variants: ButtonVariant[] = ['text', 'outlined', 'contained'];
-const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
+const sizes: SizeVariant[] = ['small', 'medium', 'large']
+const disableds: DisabledVariant[] = ['true', 'false']
+const variants: ButtonVariant[] = ['text', 'outlined', 'contained']
+const colors: ColorVariant[] = [
+  'inherit',
+  'primary',
+  'secondary',
+  'success',
+  'error',
+  'info',
+  'warning',
+]
 
 const meta = {
   title: 'Layout/Button',
@@ -16,15 +24,15 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof Button>
 
-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: {
@@ -34,7 +42,7 @@ export const Playground: Story = {
     color: 'primary',
     variant: 'contained',
   },
-};
+}
 
 export const ButtonSizes = () => (
   <>
@@ -49,7 +57,7 @@ export const ButtonSizes = () => (
       />
     ))}
   </>
-);
+)
 
 export const ButtonVariants = () => (
   <>
@@ -63,7 +71,7 @@ export const ButtonVariants = () => (
       />
     ))}
   </>
-);
+)
 
 export const ButtonColorsDefault = () => (
   <>
@@ -90,4 +98,4 @@ export const ButtonColorsDefault = () => (
       ))}
     </div>
   </>
-);
+)

package/src/stories/Card.stories.tsx

@@ -1,9 +1,17 @@
-import React from 'react';
-import { Card } from '../components/Card';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ColorVariant } from '../types';
-
-const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
+import React from 'react'
+import { Card } from '../components/Card'
+import type { Meta, StoryObj } from '@storybook/react'
+import { ColorVariant } from '../types'
+
+const colors: ColorVariant[] = [
+  'inherit',
+  'primary',
+  'secondary',
+  'success',
+  'error',
+  'info',
+  'warning',
+]
 
 const meta = {
   title: 'Layout/Card',
@@ -13,21 +21,21 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof Card>;
+} satisfies Meta<typeof Card>
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
-const defaultArgs = {};
+const defaultArgs = {}
 
-export const BasicCard = () => <Card sx={{ minWidth: 275 }}>Content children card</Card>;
+export const BasicCard = () => <Card sx={{ minWidth: 275 }}>Content children card</Card>
 
 export const BasicBordered = () => (
   <Card sx={{ minWidth: 275 }} border={true} color="primary">
     Card with border
   </Card>
-);
+)
 
 export const BasicBorderedColors = () => (
   <>
@@ -37,4 +45,4 @@ export const BasicBorderedColors = () => (
       </Card>
     ))}
   </>
-);
+)

package/src/stories/ChatMessage.stories.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta } from '@storybook/react';
-import { ChatMessage, Icons, Avatar } from '../components';
+import type { Meta } from '@storybook/react'
+import { ChatMessage, Icons, Avatar } from '../components'
 
 const meta = {
   title: 'Display/ChatMessage',
@@ -11,15 +11,16 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof ChatMessage>;
+} satisfies Meta<typeof ChatMessage>
 
-export default meta;
+export default meta
 
 const chat = [
   {
     send: 'me',
     name: 'Alice',
-    message: 'Olá, tudo bem? Meu nome é Alice e falo em nome do banco Bradesco. Eu gostaria de falar com Bob',
+    message:
+      'Olá, tudo bem? Meu nome é Alice e falo em nome do banco Bradesco. Eu gostaria de falar com Bob',
     time: '09:50',
     emotion: (
       <Avatar
@@ -73,12 +74,12 @@ const chat = [
       </Avatar>
     ),
   },
-];
+]
 
 export const ChatMessageBasic = () => {
   return (
     <>
       <ChatMessage data={chat} />
     </>
-  );
-};
+  )
+}

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'