norma-library 0.4.9 → 0.5.0

package/src/stories/IconButton.stories.tsx

@@ -1,114 +1,78 @@
-import React from "react";
-import { IconButton, Icons } from "../components";
-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 meta = {
-  title: "Layout/IconButton",
-  component: IconButton,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {},
-} satisfies Meta<typeof IconButton>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const defaultArgs = {
-  color: "primary",
-};
-
-export const Playground: Story = {
-  args: {
-    children: <Icons icon="checkCircle" color="primary" />,
-    size: "medium",
-    color: "primary",
-    variant: "text",
-  },
-};
-
-export const IconButtonSizes = () => (
-  <>
-    {sizes.map((size, key) => (
-      <IconButton
-        key={key}
-        size={size}
-        variant="text"
-        color="primary"
-        sx={{ marginRight: "5px" }}
-      >
-        <Icons icon="checkCircle" color="primary" scale={size} />
-      </IconButton>
-    ))}
-  </>
-);
-
-IconButtonSizes.storyName = "IconButton Sizes";
-
-export const IconButtonVariants = () => (
-  <>
-    {variants.map((variant, key) => (
-      <IconButton
-        key={key}
-        size="medium"
-        variant={variant}
-        color="primary"
-        sx={{ marginRight: "5px" }}
-      >
-        <Icons
-          icon="faceHappy"
-          color={variant === "contained" ? "white" : "primary"}
-          scale="medium"
-        />
-      </IconButton>
-    ))}
-  </>
-);
-
-IconButtonVariants.storyName = "IconButton Variants";
-
-export const IconButtonColors = () => (
-  <>
-    {colors.map((color, key) => (
-      <IconButton
-        key={key}
-        size="medium"
-        variant="outlined"
-        color={color}
-        sx={{ margin: "5px" }}
-      >
-        <Icons icon="starOutlined" color={color} scale="medium" />
-      </IconButton>
-    ))}
-    <div>
-      {colors.map((color, key) => (
-        <IconButton
-          key={key}
-          size="medium"
-          variant="contained"
-          color={color}
-          sx={{ margin: "5px" }}
-        >
-          <Icons icon="user" color="white" scale="medium" />
-        </IconButton>
-      ))}
-    </div>
-  </>
-);
-
-IconButtonColors.storyName = "IconButton Colors";
+import React from 'react';
+import { IconButton, Icons } from '../components';
+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 meta = {
+  title: 'Layout/IconButton',
+  component: IconButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {
+  color: 'primary',
+};
+
+export const Playground: Story = {
+  args: {
+    children: <Icons icon="checkCircle" color="primary" />,
+    size: 'medium',
+    color: 'primary',
+    variant: 'text',
+  },
+};
+
+export const IconButtonSizes = () => (
+  <>
+    {sizes.map((size, key) => (
+      <IconButton key={key} size={size} variant="text" color="primary" sx={{ marginRight: '5px' }}>
+        <Icons icon="checkCircle" color="primary" scale={size} />
+      </IconButton>
+    ))}
+  </>
+);
+
+IconButtonSizes.storyName = 'IconButton Sizes';
+
+export const IconButtonVariants = () => (
+  <>
+    {variants.map((variant, key) => (
+      <IconButton key={key} size="medium" variant={variant} color="primary" sx={{ marginRight: '5px' }}>
+        <Icons icon="faceHappy" color={variant === 'contained' ? 'white' : 'primary'} scale="medium" />
+      </IconButton>
+    ))}
+  </>
+);
+
+IconButtonVariants.storyName = 'IconButton Variants';
+
+export const IconButtonColors = () => (
+  <>
+    {colors.map((color, key) => (
+      <IconButton key={key} size="medium" variant="outlined" color={color} sx={{ margin: '5px' }}>
+        <Icons icon="starOutlined" color={color} scale="medium" />
+      </IconButton>
+    ))}
+    <div>
+      {colors.map((color, key) => (
+        <IconButton key={key} size="medium" variant="contained" color={color} sx={{ margin: '5px' }}>
+          <Icons icon="user" color="white" scale="medium" />
+        </IconButton>
+      ))}
+    </div>
+  </>
+);
+
+IconButtonColors.storyName = 'IconButton Colors';

package/src/stories/Modal.stories.tsx

@@ -1,190 +1,190 @@
-import React from "react";
-
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button, Modal } from "../components";
-import { Box, Typography } from "@mui/material";
-
-const meta = {
-  title: "Layout/Modal",
-  component: Modal,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {},
-} satisfies Meta<typeof Modal>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const ModalBasic = () => {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    <>
-      <Button onClick={handleOpen} color="primary" variant="outlined">
-        Open modal
-      </Button>
-
-      {open && (
-        <Modal
-          open={open}
-          onClose={handleClose}
-          aria-labelledby="modal-modal-title"
-          aria-describedby="modal-modal-description"
-        >
-          <>
-            <Typography id="modal-modal-title" variant="h6" component="h2">
-              Text in a modal
-            </Typography>
-            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-            </Typography>
-          </>
-        </Modal>
-      )}
-    </>
-  );
-};
-
-ModalBasic.storyName = "Modal Basic";
-
-export const ModalTitle = () => {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-  return (
-    <>
-      <Button onClick={handleOpen} color="primary" variant="outlined">
-        Open modal
-      </Button>
-
-      {open && (
-        <Modal
-          open={open}
-          onClose={handleClose}
-          aria-labelledby="modal-modal-title"
-          aria-describedby="modal-modal-description"
-          title="Title Modal"
-        >
-          <>
-            <Typography id="modal-modal-title" variant="h6" component="h2">
-              Text in a modal
-            </Typography>
-            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-            </Typography>
-          </>
-        </Modal>
-      )}
-    </>
-  );
-};
-
-ModalTitle.storyName = "Modal Title";
-
-export const ModalAction = () => {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  const defaultAction = [
-    {
-      label: "Cancelar",
-      action: handleClose,
-      color: "error",
-      size: "medium",
-      variant: "outlined",
-    },
-    {
-      label: "Confirmar",
-      action: handleClose,
-      color: "primary",
-      size: "medium",
-      variant: "contained",
-    },
-  ];
-  return (
-    <>
-      <Button onClick={handleOpen} color="primary" variant="outlined">
-        Open modal
-      </Button>
-
-      {open && (
-        <Modal
-          open={open}
-          onClose={handleClose}
-          aria-labelledby="modal-modal-title"
-          aria-describedby="modal-modal-description"
-          action={defaultAction}
-        >
-          <>
-            <Typography id="modal-modal-title" variant="h6" component="h2">
-              Text in a modal
-            </Typography>
-            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-            </Typography>
-          </>
-        </Modal>
-      )}
-    </>
-  );
-};
-
-ModalAction.storyName = "Modal Action";
-
-export const ModalProps = () => {
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  const defaultAction = [
-    {
-      label: "Cancelar",
-      action: handleClose,
-      color: "error",
-      size: "medium",
-      variant: "outlined",
-    },
-    {
-      label: "Confirmar",
-      action: handleClose,
-      color: "primary",
-      size: "medium",
-      variant: "contained",
-    },
-  ];
-  return (
-    <>
-      <Button onClick={handleOpen} color="primary" variant="outlined">
-        Open modal
-      </Button>
-
-      {open && (
-        <Modal
-          open={open}
-          onClose={handleClose}
-          aria-labelledby="modal-modal-title"
-          aria-describedby="modal-modal-description"
-          action={defaultAction}
-          title="Select a company"
-        >
-          <>
-            <Typography id="modal-modal-title" variant="h6" component="h2">
-              Text in a modal
-            </Typography>
-            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
-              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
-            </Typography>
-          </>
-        </Modal>
-      )}
-    </>
-  );
-};
-
-ModalProps.storyName = "Modal Title and Action";
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button, Modal } from '../components';
+import { Box, Typography } from '@mui/material';
+
+const meta = {
+  title: 'Layout/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ModalBasic = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <>
+      <Button onClick={handleOpen} color="primary" variant="outlined">
+        Open modal
+      </Button>
+
+      {open && (
+        <Modal
+          open={open}
+          onClose={handleClose}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+        >
+          <>
+            <Typography id="modal-modal-title" variant="h6" component="h2">
+              Text in a modal
+            </Typography>
+            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </Typography>
+          </>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+ModalBasic.storyName = 'Modal Basic';
+
+export const ModalTitle = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  return (
+    <>
+      <Button onClick={handleOpen} color="primary" variant="outlined">
+        Open modal
+      </Button>
+
+      {open && (
+        <Modal
+          open={open}
+          onClose={handleClose}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+          title="Title Modal"
+        >
+          <>
+            <Typography id="modal-modal-title" variant="h6" component="h2">
+              Text in a modal
+            </Typography>
+            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </Typography>
+          </>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+ModalTitle.storyName = 'Modal Title';
+
+export const ModalAction = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const defaultAction = [
+    {
+      label: 'Cancelar',
+      action: handleClose,
+      color: 'error',
+      size: 'medium',
+      variant: 'outlined',
+    },
+    {
+      label: 'Confirmar',
+      action: handleClose,
+      color: 'primary',
+      size: 'medium',
+      variant: 'contained',
+    },
+  ];
+  return (
+    <>
+      <Button onClick={handleOpen} color="primary" variant="outlined">
+        Open modal
+      </Button>
+
+      {open && (
+        <Modal
+          open={open}
+          onClose={handleClose}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+          action={defaultAction}
+        >
+          <>
+            <Typography id="modal-modal-title" variant="h6" component="h2">
+              Text in a modal
+            </Typography>
+            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </Typography>
+          </>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+ModalAction.storyName = 'Modal Action';
+
+export const ModalProps = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const defaultAction = [
+    {
+      label: 'Cancelar',
+      action: handleClose,
+      color: 'error',
+      size: 'medium',
+      variant: 'outlined',
+    },
+    {
+      label: 'Confirmar',
+      action: handleClose,
+      color: 'primary',
+      size: 'medium',
+      variant: 'contained',
+    },
+  ];
+  return (
+    <>
+      <Button onClick={handleOpen} color="primary" variant="outlined">
+        Open modal
+      </Button>
+
+      {open && (
+        <Modal
+          open={open}
+          onClose={handleClose}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+          action={defaultAction}
+          title="Select a company"
+        >
+          <>
+            <Typography id="modal-modal-title" variant="h6" component="h2">
+              Text in a modal
+            </Typography>
+            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </Typography>
+          </>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+ModalProps.storyName = 'Modal Title and Action';