norma-library 0.4.3 → 0.4.6

package/src/{components/textfield/textfield.stories.tsx → stories/TextField.stories.tsx}

@@ -1,376 +1,445 @@
-import React from "react"
-import type { StoryDefault, Story } from '@ladle/react'
-import { TextField } from './textfield'
-import Box from '@mui/material/Box'
-
-export default {
-  title: 'Form / TextField',
-  meta: {
-    key: 'button',
-  },
-} satisfies StoryDefault
-
-export const TextFieldVariant: Story = () => (
-  <div style={{ display: 'flex', gap: '1rem', margin: 15 }}>
-    <TextField variant="standard" label="Variant text" />
-    <TextField variant="filled" label="Variant Contained" />
-    <TextField variant="outlined" label="Variant Outlined" />
-  </div>
-)
-
-TextFieldVariant.storyName = 'Textfield Variants'
-
-export const TextFieldProps: Story = () => (
-  <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'
-
-export const TextFieldValidation: Story = () => (
-  <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: Story = () => (
-  <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: Story = () => (
-  <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: Story = () => (
-  <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'
+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";