norma-library 0.5.80 → 0.5.121

package/src/stories/Avatar.stories.tsx

@@ -1,123 +1,123 @@
-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';
-
-const meta = {
-  title: 'Display/Avatar',
-  component: Avatar,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-
-function stringToColor(string: string) {
-  let hash = 0;
-  let i;
-
-  /* eslint-disable no-bitwise */
-  for (i = 0; i < string.length; i += 1) {
-    hash = string.charCodeAt(i) + ((hash << 5) - hash);
-  }
-
-  let color = '#';
-
-  for (i = 0; i < 3; i += 1) {
-    const value = (hash >> (i * 8)) & 0xff;
-    color += `00${value.toString(16)}`.slice(-2);
-  }
-  /* eslint-enable no-bitwise */
-
-  return color;
-}
-
-function stringAvatar(name: string) {
-  return {
-    sx: {
-      bgcolor: stringToColor(name),
-    },
-    children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
-  };
-}
-
-export const AvatarBasic = () => {
-  return (
-    <>
-      <Avatar src="https://mui.com/static/images/avatar/2.jpg" />
-    </>
-  );
-};
-
-export const AvatarVariants = () => {
-  return (
-    <Stack direction="row" spacing={2}>
-      <Avatar src="https://mui.com/static/images/avatar/1.jpg" variant="square" />
-      <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 (
-    <>
-      <Stack direction="row" spacing={2}>
-        <Avatar {...stringAvatar('Kent Dodds')} />
-        <Avatar {...stringAvatar('Jed Watson')} />
-        <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/2.jpg" variant="rounded" />
-        <Avatar src="https://mui.com/static/images/avatar/3.jpg" sx={{ width: 56, height: 56 }} />
-      </Stack>
-    </>
-  );
-};
-
-export const AvatarWidthIcons = () => {
-  return (
-    <>
-      <Stack direction="row" spacing={2}>
-        <Avatar>
-          <Icons icon="user" color="white" />
-        </Avatar>
-        <Avatar sx={{ bgcolor: pink[500] }}>
-          <Icons icon="starOutlined" color="white" />
-        </Avatar>
-        <Avatar sx={{ bgcolor: green[500] }}>
-          <Icons icon="chartBar" color="white" />
-        </Avatar>
-      </Stack>
-    </>
-  );
-};
-
-export const AvatarGrouped = () => {
-  return (
-    <>
-      <Stack direction="row" spacing={2}>
-        <AvatarGroup max={4}>
-          <Avatar src="https://mui.com/static/images/avatar/1.jpg" />
-          <Avatar src="https://mui.com/static/images/avatar/2.jpg" />
-          <Avatar src="https://mui.com/static/images/avatar/3.jpg" />
-          <Avatar src="https://mui.com/static/images/avatar/4.jpg" />
-          <Avatar src="https://mui.com/static/images/avatar/5.jpg" />
-        </AvatarGroup>
-      </Stack>
-    </>
-  );
-};
+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';
+
+const meta = {
+  title: 'Display/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+function stringToColor(string: string) {
+  let hash = 0;
+  let i;
+
+  /* eslint-disable no-bitwise */
+  for (i = 0; i < string.length; i += 1) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  let color = '#';
+
+  for (i = 0; i < 3; i += 1) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+  /* eslint-enable no-bitwise */
+
+  return color;
+}
+
+function stringAvatar(name: string) {
+  return {
+    sx: {
+      bgcolor: stringToColor(name),
+    },
+    children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
+  };
+}
+
+export const AvatarBasic = () => {
+  return (
+    <>
+      <Avatar src="https://mui.com/static/images/avatar/2.jpg" />
+    </>
+  );
+};
+
+export const AvatarVariants = () => {
+  return (
+    <Stack direction="row" spacing={2}>
+      <Avatar src="https://mui.com/static/images/avatar/1.jpg" variant="square" />
+      <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 (
+    <>
+      <Stack direction="row" spacing={2}>
+        <Avatar {...stringAvatar('Kent Dodds')} />
+        <Avatar {...stringAvatar('Jed Watson')} />
+        <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/2.jpg" variant="rounded" />
+        <Avatar src="https://mui.com/static/images/avatar/3.jpg" sx={{ width: 56, height: 56 }} />
+      </Stack>
+    </>
+  );
+};
+
+export const AvatarWidthIcons = () => {
+  return (
+    <>
+      <Stack direction="row" spacing={2}>
+        <Avatar>
+          <Icons icon="user" color="white" />
+        </Avatar>
+        <Avatar sx={{ bgcolor: pink[500] }}>
+          <Icons icon="starOutlined" color="white" />
+        </Avatar>
+        <Avatar sx={{ bgcolor: green[500] }}>
+          <Icons icon="chartBar" color="white" />
+        </Avatar>
+      </Stack>
+    </>
+  );
+};
+
+export const AvatarGrouped = () => {
+  return (
+    <>
+      <Stack direction="row" spacing={2}>
+        <AvatarGroup max={4}>
+          <Avatar src="https://mui.com/static/images/avatar/1.jpg" />
+          <Avatar src="https://mui.com/static/images/avatar/2.jpg" />
+          <Avatar src="https://mui.com/static/images/avatar/3.jpg" />
+          <Avatar src="https://mui.com/static/images/avatar/4.jpg" />
+          <Avatar src="https://mui.com/static/images/avatar/5.jpg" />
+        </AvatarGroup>
+      </Stack>
+    </>
+  );
+};

package/src/stories/Badge.stories.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-
-import type { Meta } from '@storybook/react';
-import { Avatar, Badge, Icons } from '../components';
-import { AvatarGroup, Stack } from '@mui/material';
-
-const meta = {
-  title: 'Display/Badge',
-  component: Badge,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-
-export const BadgeBasic = () => {
-  return (
-    <>
-      <Badge badgeContent={4} color="primary">
-        <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>
-      ))}
-    </Stack>
-  );
-};
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+import { Avatar, Badge, Icons } from '../components';
+import { AvatarGroup, Stack } from '@mui/material';
+
+const meta = {
+  title: 'Display/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+export const BadgeBasic = () => {
+  return (
+    <>
+      <Badge badgeContent={4} color="primary">
+        <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>
+      ))}
+    </Stack>
+  );
+};

package/src/stories/Box.stories.tsx

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

package/src/stories/Breadcrumb.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Breadcrumb from '../components/Breadcrumb';
+
+const routes = [
+  {
+    name: 'Pagina 1',
+    route: '/pagina-1'
+  },
+  {
+    name: 'Pagina 2',
+    route: '/pagina-2'
+  },
+  {
+    name: 'Pagina 3',
+    route: '/pagina-3'
+  }
+]
+
+export default {
+  title: 'Layout/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    links: {
+      description: 'Adicione as rotas que irão aparecer.',
+    },
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    onChange: {
+      description: 'Função para capturar o valor quando clicado.'
+    }
+  }
+}
+
+export const Default = (args) => <Breadcrumb {...args} />
+
+Default.args = {
+  links: routes,
+  className: '',
+  onChange: '',
+}

package/src/stories/Button.stories.tsx

@@ -1,93 +1,93 @@
-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 meta = {
-  title: 'Layout/Button',
-  component: Button,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof Button>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const defaultArgs = {
-  disabled: false,
-};
-
-export const Playground: Story = {
-  args: {
-    label: 'My Button',
-    disabled: defaultArgs.disabled,
-    size: 'medium',
-    color: 'primary',
-    variant: 'contained',
-  },
-};
-
-export const ButtonSizes = () => (
-  <>
-    {sizes.map((size, key) => (
-      <Button
-        key={key}
-        label={`Size ${size}`}
-        size={size}
-        variant="contained"
-        style={{ marginRight: '5px' }}
-        {...defaultArgs}
-      />
-    ))}
-  </>
-);
-
-export const ButtonVariants = () => (
-  <>
-    {variants.map((variant, key) => (
-      <Button
-        key={key}
-        variant={variant}
-        label={`Variant ${variant}`}
-        style={{ marginRight: '5px' }}
-        {...defaultArgs}
-      />
-    ))}
-  </>
-);
-
-export const ButtonColorsDefault = () => (
-  <>
-    {colors.map((color, key) => (
-      <Button
-        key={key}
-        variant="outlined"
-        label={`Color ${color}`}
-        color={color}
-        style={{ margin: '2px' }}
-        {...defaultArgs}
-      />
-    ))}
-    <div>
-      {colors.map((color, key) => (
-        <Button
-          key={key}
-          label={`Color ${color}`}
-          color={color}
-          variant="contained"
-          style={{ margin: '2px' }}
-          {...defaultArgs}
-        />
-      ))}
-    </div>
-  </>
-);
+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 meta = {
+  title: 'Layout/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+export const Playground: Story = {
+  args: {
+    label: 'My Button',
+    disabled: defaultArgs.disabled,
+    size: 'medium',
+    color: 'primary',
+    variant: 'contained',
+  },
+};
+
+export const ButtonSizes = () => (
+  <>
+    {sizes.map((size, key) => (
+      <Button
+        key={key}
+        label={`Size ${size}`}
+        size={size}
+        variant="contained"
+        style={{ marginRight: '5px' }}
+        {...defaultArgs}
+      />
+    ))}
+  </>
+);
+
+export const ButtonVariants = () => (
+  <>
+    {variants.map((variant, key) => (
+      <Button
+        key={key}
+        variant={variant}
+        label={`Variant ${variant}`}
+        style={{ marginRight: '5px' }}
+        {...defaultArgs}
+      />
+    ))}
+  </>
+);
+
+export const ButtonColorsDefault = () => (
+  <>
+    {colors.map((color, key) => (
+      <Button
+        key={key}
+        variant="outlined"
+        label={`Color ${color}`}
+        color={color}
+        style={{ margin: '2px' }}
+        {...defaultArgs}
+      />
+    ))}
+    <div>
+      {colors.map((color, key) => (
+        <Button
+          key={key}
+          label={`Color ${color}`}
+          color={color}
+          variant="contained"
+          style={{ margin: '2px' }}
+          {...defaultArgs}
+        />
+      ))}
+    </div>
+  </>
+);

package/src/stories/Card.stories.tsx

@@ -1,40 +1,40 @@
-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',
-  component: Card,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof Card>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const defaultArgs = {};
-
-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 = () => (
-  <>
-    {colors.map((color, key) => (
-      <Card sx={{ minWidth: 275, marginBottom: 2 }} border={true} color={color} key={key}>
-        Card with border {color}
-      </Card>
-    ))}
-  </>
+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',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Card>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {};
+
+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 = () => (
+  <>
+    {colors.map((color, key) => (
+      <Card sx={{ minWidth: 275, marginBottom: 2 }} border={true} color={color} key={key}>
+        Card with border {color}
+      </Card>
+    ))}
+  </>
 );