norma-library 0.5.80 → 0.5.121

package/src/stories/TextField.stories.tsx

@@ -1,310 +1,310 @@
-import React from 'react';
-
-import Box from '@mui/material/Box';
-import type { Meta, StoryObj } from '@storybook/react';
-import { TextField } from '../components';
-
-const meta = {
-  title: 'Form/TextField',
-  component: TextField,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof TextField>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const defaultArgs = {
-  disabled: false,
-};
-
-export const Playground: Story = {
-  args: {
-    label: 'Nome',
-    id: 'input-demo',
-    color: 'primary',
-    variant: 'standard',
-  },
-};
-
-export const TextFieldVariant = () => (
-  <>
-    <TextField variant="standard" label="Variant text" />
-    <TextField variant="filled" label="Variant Contained" />
-    <TextField variant="outlined" label="Variant Outlined" />
-  </>
-);
-TextFieldVariant.storyName = 'TextField Variants';
-
-export const TextFieldValidation = () => (
-  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
-    <Box
-      component="form"
-      sx={{
-        '& .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-helper-text"
-          label="Error"
-          defaultValue="Hello World"
-          helperText="Incorrect entry."
-        />
-      </div>
-      <div>
-        <TextField error id="filled-error" label="Error" defaultValue="Hello World" variant="filled" />
-        <TextField
-          error
-          id="filled-error-helper-text"
-          label="Error"
-          defaultValue="Hello World"
-          helperText="Incorrect entry."
-          variant="filled"
-        />
-      </div>
-      <div>
-        <TextField error id="standard-error" label="Error" defaultValue="Hello World" variant="standard" />
-        <TextField
-          error
-          id="standard-error-helper-text"
-          label="Error"
-          defaultValue="Hello World"
-          helperText="Incorrect entry."
-          variant="standard"
-        />
-      </div>
-    </Box>
-  </div>
-);
-TextFieldValidation.storyName = 'TextField Validation';
-
-export const TextFieldMultiline = () => (
-  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
-    <Box
-      component="form"
-      sx={{
-        '& .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" />
-      </div>
-      <div>
-        <TextField id="filled-multiline-flexible" label="Multiline" multiline maxRows={4} variant="filled" />
-        <TextField
-          id="filled-textarea"
-          label="Multiline Placeholder"
-          placeholder="Placeholder"
-          multiline
-          variant="filled"
-        />
-        <TextField
-          id="filled-multiline-static"
-          label="Multiline"
-          multiline
-          rows={4}
-          defaultValue="Default Value"
-          variant="filled"
-        />
-      </div>
-      <div>
-        <TextField id="standard-multiline-flexible" label="Multiline" multiline maxRows={4} variant="standard" />
-        <TextField
-          id="standard-textarea"
-          label="Multiline Placeholder"
-          placeholder="Placeholder"
-          multiline
-          variant="standard"
-        />
-        <TextField
-          id="standard-multiline-static"
-          label="Multiline"
-          multiline
-          rows={4}
-          defaultValue="Default Value"
-          variant="standard"
-        />
-      </div>
-    </Box>
-  </div>
-);
-TextFieldMultiline.storyName = 'TextField Multiline';
-
-export const TextFieldSizes = () => (
-  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
-    <Box
-      component="form"
-      sx={{
-        '& .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" />
-      </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" />
-      </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" />
-      </div>
-    </Box>
-  </div>
-);
-TextFieldSizes.storyName = 'TextField Sizes';
-
-export const TextFieldColors = () => (
-  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
-    <Box
-      component="form"
-      sx={{
-        '& > :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 />
-    </Box>
-  </div>
-);
-TextFieldColors.storyName = 'TextField Colors';
-
-export const TextFieldProps = () => (
-  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
-    <Box
-      component="form"
-      sx={{
-        '& .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
-          id="outlined-read-only-input"
-          label="Read Only"
-          defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
-          }}
-        />
-        <TextField
-          id="outlined-number"
-          label="Number"
-          type="number"
-          InputLabelProps={{
-            shrink: true,
-          }}
-        />
-        <TextField id="outlined-search" label="Search field" type="search" />
-        <TextField
-          id="outlined-helperText"
-          label="Helper text"
-          defaultValue="Default Value"
-          helperText="Some important text"
-        />
-      </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
-          id="filled-password-input"
-          label="Password"
-          type="password"
-          autoComplete="current-password"
-          variant="filled"
-        />
-        <TextField
-          id="filled-read-only-input"
-          label="Read Only"
-          defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
-          }}
-          variant="filled"
-        />
-        <TextField
-          id="filled-number"
-          label="Number"
-          type="number"
-          InputLabelProps={{
-            shrink: true,
-          }}
-          variant="filled"
-        />
-        <TextField id="filled-search" label="Search field" type="search" variant="filled" />
-        <TextField
-          id="filled-helperText"
-          label="Helper text"
-          defaultValue="Default Value"
-          helperText="Some important text"
-          variant="filled"
-        />
-      </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
-          id="standard-password-input"
-          label="Password"
-          type="password"
-          autoComplete="current-password"
-          variant="standard"
-        />
-        <TextField
-          id="standard-read-only-input"
-          label="Read Only"
-          defaultValue="Hello World"
-          InputProps={{
-            readOnly: true,
-          }}
-          variant="standard"
-        />
-        <TextField
-          id="standard-number"
-          label="Number"
-          type="number"
-          InputLabelProps={{
-            shrink: true,
-          }}
-          variant="standard"
-        />
-        <TextField id="standard-search" label="Search field" type="search" variant="standard" />
-        <TextField
-          id="standard-helperText"
-          label="Helper text"
-          defaultValue="Default Value"
-          helperText="Some important text"
-          variant="standard"
-        />
-      </div>
-    </Box>
-  </div>
-);
-TextFieldProps.storyName = 'TextField Props';
+import React from 'react';
+
+import Box from '@mui/material/Box';
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextField } from '../components';
+
+const meta = {
+  title: 'Form/TextField',
+  component: TextField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof TextField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+export const Playground: Story = {
+  args: {
+    label: 'Nome',
+    id: 'input-demo',
+    color: 'primary',
+    variant: 'standard',
+  },
+};
+
+export const TextFieldVariant = () => (
+  <>
+    <TextField variant="standard" label="Variant text" />
+    <TextField variant="filled" label="Variant Contained" />
+    <TextField variant="outlined" label="Variant Outlined" />
+  </>
+);
+TextFieldVariant.storyName = 'TextField Variants';
+
+export const TextFieldValidation = () => (
+  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
+    <Box
+      component="form"
+      sx={{
+        '& .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-helper-text"
+          label="Error"
+          defaultValue="Hello World"
+          helperText="Incorrect entry."
+        />
+      </div>
+      <div>
+        <TextField error id="filled-error" label="Error" defaultValue="Hello World" variant="filled" />
+        <TextField
+          error
+          id="filled-error-helper-text"
+          label="Error"
+          defaultValue="Hello World"
+          helperText="Incorrect entry."
+          variant="filled"
+        />
+      </div>
+      <div>
+        <TextField error id="standard-error" label="Error" defaultValue="Hello World" variant="standard" />
+        <TextField
+          error
+          id="standard-error-helper-text"
+          label="Error"
+          defaultValue="Hello World"
+          helperText="Incorrect entry."
+          variant="standard"
+        />
+      </div>
+    </Box>
+  </div>
+);
+TextFieldValidation.storyName = 'TextField Validation';
+
+export const TextFieldMultiline = () => (
+  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
+    <Box
+      component="form"
+      sx={{
+        '& .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" />
+      </div>
+      <div>
+        <TextField id="filled-multiline-flexible" label="Multiline" multiline maxRows={4} variant="filled" />
+        <TextField
+          id="filled-textarea"
+          label="Multiline Placeholder"
+          placeholder="Placeholder"
+          multiline
+          variant="filled"
+        />
+        <TextField
+          id="filled-multiline-static"
+          label="Multiline"
+          multiline
+          rows={4}
+          defaultValue="Default Value"
+          variant="filled"
+        />
+      </div>
+      <div>
+        <TextField id="standard-multiline-flexible" label="Multiline" multiline maxRows={4} variant="standard" />
+        <TextField
+          id="standard-textarea"
+          label="Multiline Placeholder"
+          placeholder="Placeholder"
+          multiline
+          variant="standard"
+        />
+        <TextField
+          id="standard-multiline-static"
+          label="Multiline"
+          multiline
+          rows={4}
+          defaultValue="Default Value"
+          variant="standard"
+        />
+      </div>
+    </Box>
+  </div>
+);
+TextFieldMultiline.storyName = 'TextField Multiline';
+
+export const TextFieldSizes = () => (
+  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
+    <Box
+      component="form"
+      sx={{
+        '& .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" />
+      </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" />
+      </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" />
+      </div>
+    </Box>
+  </div>
+);
+TextFieldSizes.storyName = 'TextField Sizes';
+
+export const TextFieldColors = () => (
+  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
+    <Box
+      component="form"
+      sx={{
+        '& > :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 />
+    </Box>
+  </div>
+);
+TextFieldColors.storyName = 'TextField Colors';
+
+export const TextFieldProps = () => (
+  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
+    <Box
+      component="form"
+      sx={{
+        '& .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
+          id="outlined-read-only-input"
+          label="Read Only"
+          defaultValue="Hello World"
+          InputProps={{
+            readOnly: true,
+          }}
+        />
+        <TextField
+          id="outlined-number"
+          label="Number"
+          type="number"
+          InputLabelProps={{
+            shrink: true,
+          }}
+        />
+        <TextField id="outlined-search" label="Search field" type="search" />
+        <TextField
+          id="outlined-helperText"
+          label="Helper text"
+          defaultValue="Default Value"
+          helperText="Some important text"
+        />
+      </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
+          id="filled-password-input"
+          label="Password"
+          type="password"
+          autoComplete="current-password"
+          variant="filled"
+        />
+        <TextField
+          id="filled-read-only-input"
+          label="Read Only"
+          defaultValue="Hello World"
+          InputProps={{
+            readOnly: true,
+          }}
+          variant="filled"
+        />
+        <TextField
+          id="filled-number"
+          label="Number"
+          type="number"
+          InputLabelProps={{
+            shrink: true,
+          }}
+          variant="filled"
+        />
+        <TextField id="filled-search" label="Search field" type="search" variant="filled" />
+        <TextField
+          id="filled-helperText"
+          label="Helper text"
+          defaultValue="Default Value"
+          helperText="Some important text"
+          variant="filled"
+        />
+      </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
+          id="standard-password-input"
+          label="Password"
+          type="password"
+          autoComplete="current-password"
+          variant="standard"
+        />
+        <TextField
+          id="standard-read-only-input"
+          label="Read Only"
+          defaultValue="Hello World"
+          InputProps={{
+            readOnly: true,
+          }}
+          variant="standard"
+        />
+        <TextField
+          id="standard-number"
+          label="Number"
+          type="number"
+          InputLabelProps={{
+            shrink: true,
+          }}
+          variant="standard"
+        />
+        <TextField id="standard-search" label="Search field" type="search" variant="standard" />
+        <TextField
+          id="standard-helperText"
+          label="Helper text"
+          defaultValue="Default Value"
+          helperText="Some important text"
+          variant="standard"
+        />
+      </div>
+    </Box>
+  </div>
+);
+TextFieldProps.storyName = 'TextField Props';