norma-library 0.6.2 → 0.6.4

package/src/stories/DateInput.stories.tsx

@@ -1,52 +1,52 @@
-import React from 'react';
-import DateInput from '../components/DateInput';
-
-export default {
-  title: 'Form/DateInput',
-  component: DateInput,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: { 
-    dateFormat: {
-      description: "Adicione uma formato de data: 'dd/MM/yyyy' ou 'dd/MM/yyyy HH:mm'.",
-      options: ['dd/MM/yyyy', 'dd/MM/yyyy HH:mm']
-    },
-    className: {
-      description: 'Adicione uma classe.',
-    },
-    label: {
-      description: 'Adicione uma label.'
-    },
-    dateSelected: {
-      description: 'Adicione uma data inicial.'
-    },
-    onChange: {
-      description: 'Função para capturar o valor quando alterado.'
-    },
-    showTimeSelect: {
-      description: 'Adiciona horario na seleção da data.'
-    },
-    timeFormat: {
-      description: "Adicione uma formato ao horario na seleção da data."
-    },
-    disabled: {
-      description: 'Habilita ou desabilita.'
-    }
-  }
-
-}
-
-export const Default = (args) => <DateInput {...args} />
-
-Default.args = {
-  dateFormat: "dd/MM/yyyy HH:mm",
-  className: '',
-  label: 'Data:',
-  dateSelected: new Date(),
-  onChange: '',
-  showTimeSelect: false,
-  timeFormat: 'HH:mm',
-  disabled: false
+import React from 'react';
+import DateInput from '../components/DateInput';
+
+export default {
+  title: 'Form/DateInput',
+  component: DateInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: { 
+    dateFormat: {
+      description: "Adicione uma formato de data: 'dd/MM/yyyy' ou 'dd/MM/yyyy HH:mm'.",
+      options: ['dd/MM/yyyy', 'dd/MM/yyyy HH:mm']
+    },
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    label: {
+      description: 'Adicione uma label.'
+    },
+    dateSelected: {
+      description: 'Adicione uma data inicial.'
+    },
+    onChange: {
+      description: 'Função para capturar o valor quando alterado.'
+    },
+    showTimeSelect: {
+      description: 'Adiciona horario na seleção da data.'
+    },
+    timeFormat: {
+      description: "Adicione uma formato ao horario na seleção da data."
+    },
+    disabled: {
+      description: 'Habilita ou desabilita.'
+    }
+  }
+
+}
+
+export const Default = (args) => <DateInput {...args} />
+
+Default.args = {
+  dateFormat: "dd/MM/yyyy HH:mm",
+  className: '',
+  label: 'Data:',
+  dateSelected: new Date(),
+  onChange: '',
+  showTimeSelect: false,
+  timeFormat: 'HH:mm',
+  disabled: false
 }

package/src/stories/DatePicker.stories.tsx

@@ -1,50 +1,50 @@
-import React from 'react';
-import { DatePicker } from '../components';
-import type { Meta } from '@storybook/react';
-
-const meta = {
-  title: 'Form/DatePicker',
-  component: DatePicker,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof DatePicker>;
-
-export default meta;
-
-export const BasicDatePicker = () => <DatePicker sx={{ minWidth: 275 }} label="DatePicker" />;
-BasicDatePicker.storyName = 'DatePicker Basic';
-
-export const DatePickerVariants = () => (
-  <>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Responsive" variant="responsive" />
-    </div>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Mobile" variant="mobile" />
-    </div>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Desktop" variant="desktop" />
-    </div>
-  </>
-);
-
-DatePickerVariants.storyName = 'DatePicker Variants';
-
-export const DatePickerLanguage = () => (
-  <>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Brazil" language="pt-br" />
-    </div>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <DatePicker sx={{ minWidth: 275 }} label="DatePicker English" language="en" format="YYYY-MM-DD" />
-    </div>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Spain" language="es" />
-    </div>
-  </>
-);
-
-DatePickerLanguage.storyName = 'DatePicker Languages';
+import React from 'react';
+import { DatePicker } from '../components';
+import type { Meta } from '@storybook/react';
+
+const meta = {
+  title: 'Form/DatePicker',
+  component: DatePicker,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+
+export const BasicDatePicker = () => <DatePicker sx={{ minWidth: 275 }} label="DatePicker" />;
+BasicDatePicker.storyName = 'DatePicker Basic';
+
+export const DatePickerVariants = () => (
+  <>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Responsive" variant="responsive" />
+    </div>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Mobile" variant="mobile" />
+    </div>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Desktop" variant="desktop" />
+    </div>
+  </>
+);
+
+DatePickerVariants.storyName = 'DatePicker Variants';
+
+export const DatePickerLanguage = () => (
+  <>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Brazil" language="pt-br" />
+    </div>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <DatePicker sx={{ minWidth: 275 }} label="DatePicker English" language="en" format="YYYY-MM-DD" />
+    </div>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Spain" language="es" />
+    </div>
+  </>
+);
+
+DatePickerLanguage.storyName = 'DatePicker Languages';

package/src/stories/DropDown.stories.tsx

@@ -1,57 +1,57 @@
-import React from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-import { Button, DropDown } from '../components';
-import { MenuItem } from '@mui/material';
-
-const meta = {
-  title: 'Layout/DropDown',
-  component: DropDown,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof DropDown>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const DropDownlBasic = () => {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <>
-      <Button
-        id="basic-button"
-        aria-controls={open ? 'basic-menu' : undefined}
-        aria-haspopup="true"
-        aria-expanded={open ? 'true' : undefined}
-        onClick={handleClick}
-        color="primary"
-        variant="outlined"
-      >
-        Open DropDown
-      </Button>
-      {open && (
-        <DropDown onClose={handleClose} open anchorEl={anchorEl}>
-          <MenuItem onClick={handleClose}>Profile</MenuItem>
-          <MenuItem onClick={handleClose}>My account</MenuItem>
-          <MenuItem onClick={handleClose}>Logout</MenuItem>
-        </DropDown>
-      )}
-    </>
-  );
-};
-
-DropDownlBasic.storyName = 'DropDown Basic';
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button, DropDown } from '../components';
+import { MenuItem } from '@mui/material';
+
+const meta = {
+  title: 'Layout/DropDown',
+  component: DropDown,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof DropDown>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DropDownlBasic = () => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Button
+        id="basic-button"
+        aria-controls={open ? 'basic-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleClick}
+        color="primary"
+        variant="outlined"
+      >
+        Open DropDown
+      </Button>
+      {open && (
+        <DropDown onClose={handleClose} open anchorEl={anchorEl}>
+          <MenuItem onClick={handleClose}>Profile</MenuItem>
+          <MenuItem onClick={handleClose}>My account</MenuItem>
+          <MenuItem onClick={handleClose}>Logout</MenuItem>
+        </DropDown>
+      )}
+    </>
+  );
+};
+
+DropDownlBasic.storyName = 'DropDown Basic';

package/src/stories/IconButton.stories.tsx

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