norma-library 0.5.9 → 0.5.11

package/src/stories/Modal.stories.tsx

@@ -1,195 +1,195 @@
-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}
-          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';
+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}
+          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';

package/src/stories/MultiSelectInput.stories.tsx

@@ -1,91 +1,91 @@
-import React, { useState } from 'react';
-import MultiSelectInput from '../components/MultiSelectInput';
-
-export default {
-  title: 'Form/MultiSelectInput',
-  component: MultiSelectInput,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: { 
-    className: {
-      description: 'Adicione uma classe.',
-    },
-    label: {
-      description: 'Adicione uma label.'
-    },
-    onChange: {
-      description: 'Função para capturar o valor quando alterado.'
-    },
-    placeholder: {
-      description: 'Adicione um placeholder.'
-    },
-    options: {
-      description: 'Lista de valores a ser exibido.'
-    },
-    value: {
-      description: 'Valor selecionado.'
-    },
-    isSearchable: {
-      description: 'Habilita a função de buscar um valor.'
-    },
-    isClearable: {
-      description: 'Habilita a função de limpar o item selecionado.'
-    },
-    disabled: {
-      description: 'Habilita ou desabilita.'
-    }
-  }
-}
-
-export const Default = (args) => {
-  const options = [
-    {
-      label: 'options 1',
-      value: 'value 1'
-    },
-    {
-      label: 'options 2',
-      value: 'value 2'
-    },
-    {
-      label: 'options 3',
-      value: 'value 3'
-    },
-    {
-      label: 'options 4',
-      value: 'value 4'
-    },
-    {
-      label: 'options 5',
-      value: 'value 5'
-    },
-    {
-      label: 'options 6',
-      value: 'value 6'
-    }
-  ]
-  const [selectedValue, setSelectedValue] = useState<any>(options[0])
-  return (
-    <div style={{
-      width: 300
-    }}>
-      <MultiSelectInput 
-        options={options}
-        value={selectedValue}
-        onChange={(value) => setSelectedValue(value)} 
-        {...args} 
-      />
-    </div>
-  )
-}
-
-Default.args = { 
-  className: '',
-  label: 'Selecione:',
-  placeholder: 'Selecione uma opção',
-  disabled: false,
-  isSearchable: false,
-  isClearable: false,
+import React, { useState } from 'react';
+import MultiSelectInput from '../components/MultiSelectInput';
+
+export default {
+  title: 'Form/MultiSelectInput',
+  component: MultiSelectInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: { 
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    label: {
+      description: 'Adicione uma label.'
+    },
+    onChange: {
+      description: 'Função para capturar o valor quando alterado.'
+    },
+    placeholder: {
+      description: 'Adicione um placeholder.'
+    },
+    options: {
+      description: 'Lista de valores a ser exibido.'
+    },
+    value: {
+      description: 'Valor selecionado.'
+    },
+    isSearchable: {
+      description: 'Habilita a função de buscar um valor.'
+    },
+    isClearable: {
+      description: 'Habilita a função de limpar o item selecionado.'
+    },
+    disabled: {
+      description: 'Habilita ou desabilita.'
+    }
+  }
+}
+
+export const Default = (args) => {
+  const options = [
+    {
+      label: 'options 1',
+      value: 'value 1'
+    },
+    {
+      label: 'options 2',
+      value: 'value 2'
+    },
+    {
+      label: 'options 3',
+      value: 'value 3'
+    },
+    {
+      label: 'options 4',
+      value: 'value 4'
+    },
+    {
+      label: 'options 5',
+      value: 'value 5'
+    },
+    {
+      label: 'options 6',
+      value: 'value 6'
+    }
+  ]
+  const [selectedValue, setSelectedValue] = useState<any>(options[0])
+  return (
+    <div style={{
+      width: 300
+    }}>
+      <MultiSelectInput 
+        options={options}
+        value={selectedValue}
+        onChange={(value) => setSelectedValue(value)} 
+        {...args} 
+      />
+    </div>
+  )
+}
+
+Default.args = { 
+  className: '',
+  label: 'Selecione:',
+  placeholder: 'Selecione uma opção',
+  disabled: false,
+  isSearchable: false,
+  isClearable: false,
 }

package/src/stories/Paper.stories.tsx

@@ -1,53 +1,53 @@
-import React from 'react';
-import { Paper } from '../components';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import { ThemeProvider, styled } from '@mui/material/styles';
-import { themes } from '../helpers';
-
-const Item = styled(Paper)(({ theme }) => ({
-  ...theme.typography.body2,
-  textAlign: 'center',
-  height: 60,
-  lineHeight: '60px',
-}));
-
-const meta = {
-  title: 'Layout/Paper',
-  component: Paper,
-  parameters: {
-    // layout: "centered",
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof Paper>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const defaultArgs = {};
-
-export const PaperElevations = () => (
-  <Grid container spacing={2}>
-    <Grid item xs={12}>
-      <Box
-        sx={{
-          p: 2,
-          bgcolor: 'background.default',
-          display: 'grid',
-          gridTemplateColumns: { md: '1fr 1fr' },
-          gap: 2,
-        }}
-      >
-        {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map(elevation => (
-          <Item key={elevation} elevation={elevation}>
-            {`elevation=${elevation}`}
-          </Item>
-        ))}
-      </Box>
-    </Grid>
-  </Grid>
-);
+import React from 'react';
+import { Paper } from '../components';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import { ThemeProvider, styled } from '@mui/material/styles';
+import { themes } from '../helpers';
+
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  textAlign: 'center',
+  height: 60,
+  lineHeight: '60px',
+}));
+
+const meta = {
+  title: 'Layout/Paper',
+  component: Paper,
+  parameters: {
+    // layout: "centered",
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Paper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {};
+
+export const PaperElevations = () => (
+  <Grid container spacing={2}>
+    <Grid item xs={12}>
+      <Box
+        sx={{
+          p: 2,
+          bgcolor: 'background.default',
+          display: 'grid',
+          gridTemplateColumns: { md: '1fr 1fr' },
+          gap: 2,
+        }}
+      >
+        {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map(elevation => (
+          <Item key={elevation} elevation={elevation}>
+            {`elevation=${elevation}`}
+          </Item>
+        ))}
+      </Box>
+    </Grid>
+  </Grid>
+);