norma-library 0.4.9 → 0.5.0

package/src/stories/Accordion.stories.tsx

@@ -1,65 +1,65 @@
-import React from "react";
-
-import type { Meta, StoryObj } from "@storybook/react";
-import { Accordion } from "../components";
-import { DataAccordion } from "../types";
-import { Typography } from "@mui/material";
-
-const data: DataAccordion[] = [
-  {
-    label: "Accordion 1",
-    id: "panel-1",
-    children: (
-      <Typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-        malesuada lacus ex, sit amet blandit leo lobortis eget.
-      </Typography>
-    ),
-  },
-  {
-    label: "Accordion 2",
-    id: "panel-2",
-    children: (
-      <Typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-        malesuada lacus ex, sit amet blandit leo lobortis eget.
-      </Typography>
-    ),
-  },
-];
-
-const meta = {
-  title: "Display/Accordion",
-  component: Accordion,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    data: data,
-  },
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const AccordionBasic = () => {
-  return (
-    <div style={{ width: "480px", marginBottom: 30 }}>
-      <Accordion data={data} />
-    </div>
-  );
-};
-
-AccordionBasic.storyName = "Accordion Basic";
-
-export const AccordionExpanded = () => {
-  return (
-    <div style={{ width: "480px", marginBottom: 30 }}>
-      <Accordion data={data} defaultExpanded="panel-1" />
-    </div>
-  );
-};
-
-AccordionExpanded.storyName = "Accordion Expanded";
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion } from '../components';
+import { DataAccordion } from '../types';
+import { Typography } from '@mui/material';
+
+const data: DataAccordion[] = [
+  {
+    label: 'Accordion 1',
+    id: 'panel-1',
+    children: (
+      <Typography>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+        lobortis eget.
+      </Typography>
+    ),
+  },
+  {
+    label: 'Accordion 2',
+    id: 'panel-2',
+    children: (
+      <Typography>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
+        lobortis eget.
+      </Typography>
+    ),
+  },
+];
+
+const meta = {
+  title: 'Display/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    data: data,
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const AccordionBasic = () => {
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <Accordion data={data} />
+    </div>
+  );
+};
+
+AccordionBasic.storyName = 'Accordion Basic';
+
+export const AccordionExpanded = () => {
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <Accordion data={data} defaultExpanded="panel-1" />
+    </div>
+  );
+};
+
+AccordionExpanded.storyName = 'Accordion Expanded';

package/src/stories/Avatar.stories.tsx

@@ -1,139 +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,47 +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/Button.stories.tsx

@@ -1,27 +1,19 @@
-import React from "react";
-import { Button } from "../components/Button";
-import type { Meta, StoryObj } from "@storybook/react";
-import { ButtonVariant, SizeVariant, ColorVariant } from "../types";
+import React from 'react';
+import { Button } from '../components/Button';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ButtonVariant, SizeVariant, ColorVariant } from '../types';
 
-const sizes: SizeVariant[] = ["small", "medium", "large"];
-const variants: ButtonVariant[] = ["text", "outlined", "contained"];
-const colors: ColorVariant[] = [
-  "inherit",
-  "primary",
-  "secondary",
-  "success",
-  "error",
-  "info",
-  "warning",
-];
+const sizes: SizeVariant[] = ['small', 'medium', 'large'];
+const variants: ButtonVariant[] = ['text', 'outlined', 'contained'];
+const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
 
 const meta = {
-  title: "Layout/Button",
+  title: 'Layout/Button',
   component: Button,
   parameters: {
-    layout: "centered",
+    layout: 'centered',
   },
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } satisfies Meta<typeof Button>;
 
@@ -35,10 +27,10 @@ const defaultArgs = {
 
 export const Playground: Story = {
   args: {
-    label: "My Button",
-    size: "medium",
-    color: "primary",
-    variant: "contained",
+    label: 'My Button',
+    size: 'medium',
+    color: 'primary',
+    variant: 'contained',
   },
 };
 
@@ -50,7 +42,7 @@ export const ButtonSizes = () => (
         label={`Size ${size}`}
         size={size}
         variant="contained"
-        style={{ marginRight: "5px" }}
+        style={{ marginRight: '5px' }}
         {...defaultArgs}
       />
     ))}
@@ -64,7 +56,7 @@ export const ButtonVariants = () => (
         key={key}
         variant={variant}
         label={`Variant ${variant}`}
-        style={{ marginRight: "5px" }}
+        style={{ marginRight: '5px' }}
         {...defaultArgs}
       />
     ))}
@@ -79,7 +71,7 @@ export const ButtonColorsDefault = () => (
         variant="outlined"
         label={`Color ${color}`}
         color={color}
-        style={{ margin: "2px" }}
+        style={{ margin: '2px' }}
         {...defaultArgs}
       />
     ))}
@@ -90,7 +82,7 @@ export const ButtonColorsDefault = () => (
           label={`Color ${color}`}
           color={color}
           variant="contained"
-          style={{ margin: "2px" }}
+          style={{ margin: '2px' }}
           {...defaultArgs}
         />
       ))}

package/src/stories/Card.stories.tsx

@@ -1,55 +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>
+    ))}
+  </>
+);