norma-library 0.4.9 → 0.5.0

package/src/stories/TextField.stories.tsx

@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react';
 
-import Box from "@mui/material/Box";
-import type { Meta, StoryObj } from "@storybook/react";
-import { TextField } from "../components";
+import Box from '@mui/material/Box';
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextField } from '../components';
 
 const meta = {
-  title: "Form/TextField",
+  title: 'Form/TextField',
   component: TextField,
   parameters: {
-    layout: "centered",
+    layout: 'centered',
   },
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } satisfies Meta<typeof TextField>;
 
@@ -24,10 +24,10 @@ const defaultArgs = {
 
 export const Playground: Story = {
   args: {
-    label: "Nome",
-    id: "input-demo",
-    color: "primary",
-    variant: "standard",
+    label: 'Nome',
+    id: 'input-demo',
+    color: 'primary',
+    variant: 'standard',
   },
 };
 
@@ -38,25 +38,20 @@ export const TextFieldVariant = () => (
     <TextField variant="outlined" label="Variant Outlined" />
   </>
 );
-TextFieldVariant.storyName = "TextField Variants";
+TextFieldVariant.storyName = 'TextField Variants';
 
 export const TextFieldValidation = () => (
-  <div style={{ display: "flex", gap: "1rem", margin: 15 }}>
+  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
     <Box
       component="form"
       sx={{
-        "& .MuiTextField-root": { m: 1, width: "100%" },
+        '& .MuiTextField-root': { m: 1, width: '100%' },
       }}
       noValidate
       autoComplete="off"
     >
       <div>
-        <TextField
-          error
-          id="outlined-error"
-          label="Error"
-          defaultValue="Hello World"
-        />
+        <TextField error id="outlined-error" label="Error" defaultValue="Hello World" />
         <TextField
           error
           id="outlined-error-helper-text"
@@ -66,13 +61,7 @@ export const TextFieldValidation = () => (
         />
       </div>
       <div>
-        <TextField
-          error
-          id="filled-error"
-          label="Error"
-          defaultValue="Hello World"
-          variant="filled"
-        />
+        <TextField error id="filled-error" label="Error" defaultValue="Hello World" variant="filled" />
         <TextField
           error
           id="filled-error-helper-text"
@@ -83,13 +72,7 @@ export const TextFieldValidation = () => (
         />
       </div>
       <div>
-        <TextField
-          error
-          id="standard-error"
-          label="Error"
-          defaultValue="Hello World"
-          variant="standard"
-        />
+        <TextField error id="standard-error" label="Error" defaultValue="Hello World" variant="standard" />
         <TextField
           error
           id="standard-error-helper-text"
@@ -102,47 +85,25 @@ export const TextFieldValidation = () => (
     </Box>
   </div>
 );
-TextFieldValidation.storyName = "TextField Validation";
+TextFieldValidation.storyName = 'TextField Validation';
 
 export const TextFieldMultiline = () => (
-  <div style={{ display: "flex", gap: "1rem", margin: 15 }}>
+  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
     <Box
       component="form"
       sx={{
-        "& .MuiTextField-root": { m: 1, width: "100%" },
+        '& .MuiTextField-root': { m: 1, width: '100%' },
       }}
       noValidate
       autoComplete="off"
     >
       <div>
-        <TextField
-          id="outlined-multiline-flexible"
-          label="Multiline"
-          multiline
-          maxRows={4}
-        />
-        <TextField
-          id="outlined-textarea"
-          label="Multiline Placeholder"
-          placeholder="Placeholder"
-          multiline
-        />
-        <TextField
-          id="outlined-multiline-static"
-          label="Multiline"
-          multiline
-          rows={4}
-          defaultValue="Default Value"
-        />
+        <TextField id="outlined-multiline-flexible" label="Multiline" multiline maxRows={4} />
+        <TextField id="outlined-textarea" label="Multiline Placeholder" placeholder="Placeholder" multiline />
+        <TextField id="outlined-multiline-static" label="Multiline" multiline rows={4} defaultValue="Default Value" />
       </div>
       <div>
-        <TextField
-          id="filled-multiline-flexible"
-          label="Multiline"
-          multiline
-          maxRows={4}
-          variant="filled"
-        />
+        <TextField id="filled-multiline-flexible" label="Multiline" multiline maxRows={4} variant="filled" />
         <TextField
           id="filled-textarea"
           label="Multiline Placeholder"
@@ -160,13 +121,7 @@ export const TextFieldMultiline = () => (
         />
       </div>
       <div>
-        <TextField
-          id="standard-multiline-flexible"
-          label="Multiline"
-          multiline
-          maxRows={4}
-          variant="standard"
-        />
+        <TextField id="standard-multiline-flexible" label="Multiline" multiline maxRows={4} variant="standard" />
         <TextField
           id="standard-textarea"
           label="Multiline Placeholder"
@@ -186,127 +141,71 @@ export const TextFieldMultiline = () => (
     </Box>
   </div>
 );
-TextFieldMultiline.storyName = "TextField Multiline";
+TextFieldMultiline.storyName = 'TextField Multiline';
 
 export const TextFieldSizes = () => (
-  <div style={{ display: "flex", gap: "1rem", margin: 15 }}>
+  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
     <Box
       component="form"
       sx={{
-        "& .MuiTextField-root": { m: 1, width: "100%" },
+        '& .MuiTextField-root': { m: 1, width: '100%' },
       }}
       noValidate
       autoComplete="off"
     >
       <div>
-        <TextField
-          label="Size"
-          id="outlined-size-small"
-          defaultValue="Small"
-          size="small"
-        />
-        <TextField
-          label="Size"
-          id="outlined-size-normal"
-          defaultValue="Normal"
-        />
+        <TextField label="Size" id="outlined-size-small" defaultValue="Small" size="small" />
+        <TextField label="Size" id="outlined-size-normal" defaultValue="Normal" />
       </div>
       <div>
-        <TextField
-          label="Size"
-          id="filled-size-small"
-          defaultValue="Small"
-          variant="filled"
-          size="small"
-        />
-        <TextField
-          label="Size"
-          id="filled-size-normal"
-          defaultValue="Normal"
-          variant="filled"
-        />
+        <TextField label="Size" id="filled-size-small" defaultValue="Small" variant="filled" size="small" />
+        <TextField label="Size" id="filled-size-normal" defaultValue="Normal" variant="filled" />
       </div>
       <div>
-        <TextField
-          label="Size"
-          id="standard-size-small"
-          defaultValue="Small"
-          size="small"
-          variant="standard"
-        />
-        <TextField
-          label="Size"
-          id="standard-size-normal"
-          defaultValue="Normal"
-          variant="standard"
-        />
+        <TextField label="Size" id="standard-size-small" defaultValue="Small" size="small" variant="standard" />
+        <TextField label="Size" id="standard-size-normal" defaultValue="Normal" variant="standard" />
       </div>
     </Box>
   </div>
 );
-TextFieldSizes.storyName = "TextField Sizes";
+TextFieldSizes.storyName = 'TextField Sizes';
 
 export const TextFieldColors = () => (
-  <div style={{ display: "flex", gap: "1rem", margin: 15 }}>
+  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
     <Box
       component="form"
       sx={{
-        "& > :not(style)": { m: 1, width: "100%" },
+        '& > :not(style)': { m: 1, width: '100%' },
       }}
       noValidate
       autoComplete="off"
     >
       <TextField label="Outlined Primary" color="primary" focused />
       <TextField label="Outlined secondary" color="secondary" focused />
-      <TextField
-        label="Filled success"
-        variant="filled"
-        color="success"
-        focused
-      />
-      <TextField
-        label="Standard warning"
-        variant="standard"
-        color="warning"
-        focused
-      />
+      <TextField label="Filled success" variant="filled" color="success" focused />
+      <TextField label="Standard warning" variant="standard" color="warning" focused />
     </Box>
   </div>
 );
-TextFieldColors.storyName = "TextField Colors";
+TextFieldColors.storyName = 'TextField Colors';
 
 export const TextFieldProps = () => (
-  <div style={{ display: "flex", gap: "1rem", margin: 15 }}>
+  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
     <Box
       component="form"
       sx={{
-        "& .MuiTextField-root": { m: 1, width: "100%" },
-        display: "flex",
-        gap: "1rem",
+        '& .MuiTextField-root': { m: 1, width: '100%' },
+        display: 'flex',
+        gap: '1rem',
         margin: 15,
       }}
       noValidate
       autoComplete="off"
     >
       <div>
-        <TextField
-          required
-          id="outlined-required"
-          label="Required"
-          defaultValue="Hello World"
-        />
-        <TextField
-          disabled
-          id="outlined-disabled"
-          label="Disabled"
-          defaultValue="Hello World"
-        />
-        <TextField
-          id="outlined-password-input"
-          label="Password"
-          type="password"
-          autoComplete="current-password"
-        />
+        <TextField required id="outlined-required" label="Required" defaultValue="Hello World" />
+        <TextField disabled id="outlined-disabled" label="Disabled" defaultValue="Hello World" />
+        <TextField id="outlined-password-input" label="Password" type="password" autoComplete="current-password" />
         <TextField
           id="outlined-read-only-input"
           label="Read Only"
@@ -332,20 +231,8 @@ export const TextFieldProps = () => (
         />
       </div>
       <div>
-        <TextField
-          required
-          id="filled-required"
-          label="Required"
-          defaultValue="Hello World"
-          variant="filled"
-        />
-        <TextField
-          disabled
-          id="filled-disabled"
-          label="Disabled"
-          defaultValue="Hello World"
-          variant="filled"
-        />
+        <TextField required id="filled-required" label="Required" defaultValue="Hello World" variant="filled" />
+        <TextField disabled id="filled-disabled" label="Disabled" defaultValue="Hello World" variant="filled" />
         <TextField
           id="filled-password-input"
           label="Password"
@@ -371,12 +258,7 @@ export const TextFieldProps = () => (
           }}
           variant="filled"
         />
-        <TextField
-          id="filled-search"
-          label="Search field"
-          type="search"
-          variant="filled"
-        />
+        <TextField id="filled-search" label="Search field" type="search" variant="filled" />
         <TextField
           id="filled-helperText"
           label="Helper text"
@@ -386,20 +268,8 @@ export const TextFieldProps = () => (
         />
       </div>
       <div>
-        <TextField
-          required
-          id="standard-required"
-          label="Required"
-          defaultValue="Hello World"
-          variant="standard"
-        />
-        <TextField
-          disabled
-          id="standard-disabled"
-          label="Disabled"
-          defaultValue="Hello World"
-          variant="standard"
-        />
+        <TextField required id="standard-required" label="Required" defaultValue="Hello World" variant="standard" />
+        <TextField disabled id="standard-disabled" label="Disabled" defaultValue="Hello World" variant="standard" />
         <TextField
           id="standard-password-input"
           label="Password"
@@ -425,12 +295,7 @@ export const TextFieldProps = () => (
           }}
           variant="standard"
         />
-        <TextField
-          id="standard-search"
-          label="Search field"
-          type="search"
-          variant="standard"
-        />
+        <TextField id="standard-search" label="Search field" type="search" variant="standard" />
         <TextField
           id="standard-helperText"
           label="Helper text"
@@ -442,4 +307,4 @@ export const TextFieldProps = () => (
     </Box>
   </div>
 );
-TextFieldProps.storyName = "TextField Props";
+TextFieldProps.storyName = 'TextField Props';

package/src/stories/TimeLine.stories.tsx

@@ -1,43 +1,35 @@
-import React from "react";
-
-import type { Meta } from "@storybook/react";
-import { TimeLine } from "../components";
-import { Stack } from "@mui/material";
-
-const meta = {
-  title: "Display/TimeLine",
-  component: TimeLine,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {},
-} satisfies Meta<typeof TimeLine>;
-
-export default meta;
-
-export const TimeLineBasic = () => {
-  return (
-    <>
-      <TimeLine />
-    </>
-  );
-};
-
-export const TimeLineColors = () => {
-  return (
-    <Stack direction="row" spacing={2}>
-      {[
-        "primary",
-        "secondary",
-        "inherit",
-        "error",
-        "info",
-        "success",
-        "warning",
-      ].map((color, key) => (
-        <TimeLine color={color} key={key} />
-      ))}
-    </Stack>
-  );
-};
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+import { TimeLine } from '../components';
+import { Stack } from '@mui/material';
+
+const meta = {
+  title: 'Display/TimeLine',
+  component: TimeLine,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof TimeLine>;
+
+export default meta;
+
+export const TimeLineBasic = () => {
+  return (
+    <>
+      <TimeLine />
+    </>
+  );
+};
+
+export const TimeLineColors = () => {
+  return (
+    <Stack direction="row" spacing={2}>
+      {['primary', 'secondary', 'inherit', 'error', 'info', 'success', 'warning'].map((color, key) => (
+        <TimeLine color={color} key={key} />
+      ))}
+    </Stack>
+  );
+};