norma-library 0.6.3 → 0.6.4

package/src/stories/Modal.stories.tsx

@@ -1,246 +1,246 @@
-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;
-
-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}
-          paperProps={{
-            sx: {
-              width: '90vw',
-            },
-          }}
-        >
-          <>
-            <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';
-
-export const ModalSize = () => {
-  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"
-          width='90vw'
-        >
-          <>
-            <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>
-      )}
-    </>
-  );
-};
-
-ModalSize.storyName = 'Modal width and height';
+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;
+
+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}
+          paperProps={{
+            sx: {
+              width: '90vw',
+            },
+          }}
+        >
+          <>
+            <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';
+
+export const ModalSize = () => {
+  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"
+          width='90vw'
+        >
+          <>
+            <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>
+      )}
+    </>
+  );
+};
+
+ModalSize.storyName = 'Modal width and height';

package/src/stories/ModalStatus.stories.tsx

@@ -1,46 +1,46 @@
-import React from 'react';
-
-import type { Meta } from '@storybook/react';
-import { ModalStatus } from '../components/StatusModal/StatusModal';
-import { OnAction } from '../types';
-
-const actions: OnAction[] = [
-  {
-    label: 'Cancelar',
-    action: () => {},
-  },
-  {
-    label: 'Entendi',
-    action: () => {},
-  },
-];
-
-const meta = {
-  title: 'Layout/ModalStatus',
-  component: ModalStatus,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof ModalStatus>;
-
-export default meta;
-
-export const ModalSuccess = () => {
-  return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." actions={actions} type="success" />;
-};
-
-ModalSuccess.storyName = 'Modal Success';
-
-export const ModalWarning = () => {
-  return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." actions={actions} type="warning" />;
-};
-
-ModalWarning.storyName = 'Modal Warning';
-
-export const ModalInfo = () => {
-  return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." type="info" actions={actions} />;
-};
-
-ModalInfo.storyName = 'Modal Info';
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+import { ModalStatus } from '../components/StatusModal/StatusModal';
+import { OnAction } from '../types';
+
+const actions: OnAction[] = [
+  {
+    label: 'Cancelar',
+    action: () => {},
+  },
+  {
+    label: 'Entendi',
+    action: () => {},
+  },
+];
+
+const meta = {
+  title: 'Layout/ModalStatus',
+  component: ModalStatus,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof ModalStatus>;
+
+export default meta;
+
+export const ModalSuccess = () => {
+  return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." actions={actions} type="success" />;
+};
+
+ModalSuccess.storyName = 'Modal Success';
+
+export const ModalWarning = () => {
+  return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." actions={actions} type="warning" />;
+};
+
+ModalWarning.storyName = 'Modal Warning';
+
+export const ModalInfo = () => {
+  return <ModalStatus title="Título" text="Lorem ipsum dolor sit amet." type="info" actions={actions} />;
+};
+
+ModalInfo.storyName = 'Modal Info';