norma-library 0.4.2 → 0.4.5

package/src/stories/TextField.stories.tsx

@@ -0,0 +1,445 @@
+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";

package/src/styles/custom.css

@@ -0,0 +1,5 @@
+.appearance-none {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}

package/src/styles/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --transparent: transparent;
+  --current: currentColor;
+  --primary: #fe761c;
+  --secondary: #43bbf2;
+  --error: #d63643;
+  --warning: #ffc300;
+  --info: #71d5f7;
+  --success: #6bc235;
+  --helper: #5a2a79;
+}
+
+.appearance-none {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}

package/src/types/index.ts

@@ -0,0 +1,220 @@
+import {
+  ButtonProps as MuiButtonProps,
+  IconButtonProps as MuiIconButtonProps,
+  TextFieldProps as MuiTextFieldProps,
+  CheckboxProps as MuiCheckBoxProps,
+  MenuProps as MuiDropDownProps,
+  ChipProps as MuiChipProps,
+  LinearProgressProps as MuiLinearProgressProps,
+  SliderProps as MuiSliderProps,
+  AccordionProps as MuiAccordionProps,
+  TabsProps as MuiTabsProps,
+  SelectProps as MuiSelectProps,
+  PaperProps as MuiPaperProps,
+  SvgIconProps,
+  ModalProps,
+  CardProps as MuiCardProps,
+} from "@mui/material";
+
+import { SwitchBaseProps as MuiSwitchBaseProps } from "@mui/material/internal/SwitchBase";
+
+import { iconsSVG } from "../components/Svgs";
+
+export type ColorVariant =
+  | "inherit"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "error"
+  | "info"
+  | "warning";
+
+export type TextFieldColorVariant =
+  | "primary"
+  | "secondary"
+  | "error"
+  | "info"
+  | "success"
+  | "warning";
+
+export type CheckBoxColorVariant =
+  | "primary"
+  | "secondary"
+  | "error"
+  | "info"
+  | "success"
+  | "warning"
+  | "default";
+
+export type SizeVariant = "small" | "medium" | "large";
+export type ButtonVariant = "text" | "outlined" | "contained";
+export type DropVariant = "menu" | "selectedMenu";
+export type TagVariant = "outlined" | "contained";
+export type TabsVariant = "standard" | "scrollable" | "fullWidth";
+export type ProgressVariant =
+  | "determinate"
+  | "indeterminate"
+  | "buffer"
+  | "query";
+
+export type MuiButtonBaseProps = Omit<
+  MuiButtonProps,
+  "sx" | "color" | "size" | "variant"
+>;
+
+export type MuiIconButtonBaseProps = Omit<
+  MuiIconButtonProps,
+  "sx" | "color" | "size" | "variant"
+>;
+
+export type TextFieldValue = string | number;
+export type TextFieldVariant = "standard" | "outlined" | "filled";
+export type TextFieldSizeVariant = "small" | "medium";
+export type DirectionVariant = "vertical" | "horizontal";
+export type PaperVariant = "elevation" | "outlined";
+
+export type MuiTextFieldBaseProps = Omit<
+  MuiTextFieldProps,
+  | "onChange"
+  | "onBlur"
+  | "onFocus"
+  | "defaultValue"
+  | "size"
+  | "value"
+  | "id"
+  | "fullWidth"
+  | "helperText"
+  | "type"
+  | "InputProps"
+  | "InputLabelProps"
+  | "autoComplete"
+  | "label"
+  | "helperText"
+  | "InputLabelProps"
+  | "margin"
+  | "maxRows"
+  | "minRows"
+  | "multiline"
+  | "name"
+  | "placeholder"
+  | "rows"
+  | "select"
+  | "SelectProps"
+  | "sx"
+  | "autoFocus"
+  | "error"
+  | "classes"
+  | "children"
+  | "color"
+  | "variant"
+>;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface CheckboxPropsSizeOverrides {}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface CheckboxPropsColorOverrides {}
+
+export type MuiCheckBoxBaseProps = Omit<MuiCheckBoxProps, "sx">;
+export type MuiModalBaseProps = Omit<ModalProps, "sx">;
+export type MuiCardBaseProps = Omit<MuiCardProps, "sx">;
+export type MuiDropDownBaseProps = Omit<MuiDropDownProps, "sx" | "variant">;
+export type MuiTagBaseProps = Omit<MuiChipProps, "sx" | "color">;
+export type MuiRangerSliderBaseProps = Omit<MuiSliderProps, "sx" | "color">;
+export type MuiProgressBarBaseProps = Omit<MuiLinearProgressProps, "sx">;
+export type MuiTabsBaseProps = Omit<
+  MuiTabsProps,
+  "sx" | "children" | "onChange" | "variant" | "value"
+>;
+export type MuiAccordionBaseProps = Omit<
+  MuiAccordionProps,
+  "sx" | "children" | "defaultExpanded" | "onChange"
+>;
+export type MuiSelectBaseProps = Omit<
+  MuiSelectProps,
+  "sx" | "value" | "onClose" | "onOpen" | "input" | "label"
+>;
+
+export type MuiPaperBaseProps = Omit<MuiPaperProps, "sx">;
+
+export type IconScale =
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "2xlarge"
+  | "3xlarge";
+
+export type IconColors =
+  | "inherit"
+  | "primary"
+  | "secondary"
+  | "error"
+  | "info"
+  | "success"
+  | "warning"
+  | "white"
+  | "black";
+
+export const scaleSize: Record<IconScale, number> = {
+  xsmall: 14,
+  small: 20,
+  medium: 24,
+  large: 28,
+  xlarge: 32,
+  "2xlarge": 36,
+  "3xlarge": 40,
+};
+
+export type SVGIconProps = {
+  icon: React.ReactNode;
+} & SvgIconProps;
+
+export type IconType = keyof typeof iconsSVG;
+export type IconKey = keyof typeof iconsSVG;
+
+export type MuiRadioBaseProps = Omit<
+  MuiSwitchBaseProps,
+  "checkedIcon" | "color" | "icon" | "type" | "checked" | "size"
+>;
+
+export type OptionsRadios = {
+  label: string;
+  value: string;
+  size?: TextFieldSizeVariant;
+};
+
+export type OnAction = {
+  label: string;
+  action: React.ReactEventHandler<{}>;
+  color?: ColorVariant;
+  size?: SizeVariant;
+  variant?: ButtonVariant;
+};
+
+export type DataAccordion = {
+  label: string;
+  id: string;
+  children: NonNullable<React.ReactNode>;
+};
+
+export type DataTabs = {
+  label: string;
+  id: string;
+  children: NonNullable<React.ReactNode>;
+};
+
+export type DataSelect = {
+  label: string;
+  value: string | number;
+};
+
+export type RenderProps<E extends HTMLElement = HTMLElement> = {
+  focusRef?: React.MutableRefObject<E | null>;
+  id?: string;
+};
+
+export type StyledProgressBarProps = {
+  colorCustom?: string;
+};