norma-library 0.6.86 → 0.6.88

package/src/stories/Avatar.stories.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta } from '@storybook/react';
-import { Avatar, Icons } from '../components';
-import { AvatarGroup, Stack } from '@mui/material';
-import { green, pink } from '@mui/material/colors';
+import type { Meta } from '@storybook/react'
+import { Avatar, Icons } from '../components'
+import { AvatarGroup, Stack } from '@mui/material'
+import { green, pink } from '@mui/material/colors'
 
 const meta = {
   title: 'Display/Avatar',
@@ -13,28 +13,28 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof Avatar>;
+} satisfies Meta<typeof Avatar>
 
-export default meta;
+export default meta
 
 function stringToColor(string: string) {
-  let hash = 0;
-  let i;
+  let hash = 0
+  let i
 
   /* eslint-disable no-bitwise */
   for (i = 0; i < string.length; i += 1) {
-    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+    hash = string.charCodeAt(i) + ((hash << 5) - hash)
   }
 
-  let color = '#';
+  let color = '#'
 
   for (i = 0; i < 3; i += 1) {
-    const value = (hash >> (i * 8)) & 0xff;
-    color += `00${value.toString(16)}`.slice(-2);
+    const value = (hash >> (i * 8)) & 0xff
+    color += `00${value.toString(16)}`.slice(-2)
   }
   /* eslint-enable no-bitwise */
 
-  return color;
+  return color
 }
 
 function stringAvatar(name: string) {
@@ -43,7 +43,7 @@ function stringAvatar(name: string) {
       bgcolor: stringToColor(name),
     },
     children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
-  };
+  }
 }
 
 export const AvatarBasic = () => {
@@ -51,8 +51,8 @@ export const AvatarBasic = () => {
     <>
       <Avatar src="https://mui.com/static/images/avatar/2.jpg" />
     </>
-  );
-};
+  )
+}
 
 export const AvatarVariants = () => {
   return (
@@ -61,8 +61,8 @@ export const AvatarVariants = () => {
       <Avatar src="https://mui.com/static/images/avatar/2.jpg" variant="rounded" />
       <Avatar src="https://mui.com/static/images/avatar/3.jpg" />
     </Stack>
-  );
-};
+  )
+}
 
 export const AvatarLetters = () => {
   return (
@@ -73,20 +73,24 @@ export const AvatarLetters = () => {
         <Avatar {...stringAvatar('Tim Neutkens')} />
       </Stack>
     </>
-  );
-};
+  )
+}
 
 export const AvatarSizes = () => {
   return (
     <>
       <Stack direction="row" spacing={2}>
-        <Avatar src="https://mui.com/static/images/avatar/1.jpg" variant="square" sx={{ width: 24, height: 24 }} />
+        <Avatar
+          src="https://mui.com/static/images/avatar/1.jpg"
+          variant="square"
+          sx={{ width: 24, height: 24 }}
+        />
         <Avatar src="https://mui.com/static/images/avatar/2.jpg" variant="rounded" />
         <Avatar src="https://mui.com/static/images/avatar/3.jpg" sx={{ width: 56, height: 56 }} />
       </Stack>
     </>
-  );
-};
+  )
+}
 
 export const AvatarWidthIcons = () => {
   return (
@@ -103,8 +107,8 @@ export const AvatarWidthIcons = () => {
         </Avatar>
       </Stack>
     </>
-  );
-};
+  )
+}
 
 export const AvatarGrouped = () => {
   return (
@@ -119,5 +123,5 @@ export const AvatarGrouped = () => {
         </AvatarGroup>
       </Stack>
     </>
-  );
-};
+  )
+}

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} />
     </>
-  );
-};
+  )
+}