norma-library 0.4.1 → 0.4.3

package/src/components/tag/tag.stories.tsx

@@ -0,0 +1,80 @@
+import React from "react"
+import type { StoryDefault, Story } from '@ladle/react'
+import { Tag } from './tag'
+
+export default {
+  title: 'Data / Tag',
+  meta: {
+    key: 'tag',
+  },
+} satisfies StoryDefault
+
+export const TagBasic: Story = () => (
+  <div style={{ display: 'flex', gap: '1rem' }}>
+    <Tag label="Tag Filled" />
+    <Tag label="Tag Outlined" variant="outlined" />
+  </div>
+)
+
+TagBasic.storyName = 'Tag Basic'
+
+export const TagClickable: Story = () => {
+  const handleClick = () => {
+    console.info('You clicked the Chip.')
+  }
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <Tag label="Clickable" onClick={handleClick} />
+      <Tag label="Clickable" variant="outlined" onClick={handleClick} />
+    </div>
+  )
+}
+
+TagClickable.storyName = 'Tag Clickable'
+
+export const TagDeletable: Story = () => {
+  const handleDelete = () => {
+    console.info('You clicked the delete icon.')
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <Tag label="Deletable" onDelete={handleDelete} />
+      <Tag label="Deletable" variant="outlined" onDelete={handleDelete} />
+    </div>
+  )
+}
+
+TagDeletable.storyName = 'Tag Deletable'
+
+export const TagColor: Story = () => {
+  const handleDelete = () => {
+    console.info('You clicked the delete icon.')
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <Tag label="Deletable" onDelete={handleDelete} color="primary" />
+      <Tag label="Deletable" onDelete={handleDelete} color="success" />
+      <Tag label="Deletable" variant="outlined" onDelete={handleDelete} color="primary" />
+      <Tag label="Deletable" variant="outlined" onDelete={handleDelete} color="success" />
+    </div>
+  )
+}
+
+TagColor.storyName = 'Tag Color'
+
+export const TagSize: Story = () => {
+  const handleDelete = () => {
+    console.info('You clicked the delete icon.')
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <Tag label="Small" onDelete={handleDelete} size="small" />
+      <Tag label="Small outlined" variant="outlined" onDelete={handleDelete} size="small" />
+    </div>
+  )
+}
+
+TagSize.storyName = 'Tag Size'

package/src/components/tag/tag.tsx

@@ -0,0 +1,13 @@
+import { themes } from '../../helpers/colors';
+import { ThemeProvider } from '@mui/material';
+import { Chip as MuiChip } from '@mui/material';
+import React from 'react';
+import { TagBaseProps } from './types';
+
+export const Tag: React.FC<TagBaseProps> = ({ ...rest }) => {
+  return (
+    <ThemeProvider theme={themes.light}>
+      <MuiChip {...rest} />
+    </ThemeProvider>
+  );
+};

package/src/components/tag/types.ts

@@ -0,0 +1,47 @@
+import {
+  ChipProps,
+  ChipPropsColorOverrides,
+  ChipPropsSizeOverrides,
+  ChipPropsVariantOverrides,
+  SxProps,
+} from '@mui/material';
+import { OverridableStringUnion } from '@mui/types';
+import { Theme } from '@emotion/react';
+import Tag from './tag';
+
+type MuiTagBaseProps = Pick<ChipProps, 'sx'>;
+
+export interface TagBaseProps extends MuiTagBaseProps {
+  sx?: SxProps<Theme>;
+  avatar?: React.ReactElement;
+  children?: null;
+  clickable?: boolean;
+  deleteIcon?: React.ReactElement;
+  disabled?: boolean;
+  icon?: React.ReactElement;
+  label?: React.ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onDelete?: React.EventHandler<any>;
+  size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides>;
+  skipFocusWhenDisabled?: boolean;
+  tabIndex?: number;
+  variant?: OverridableStringUnion<
+    'filled' | 'outlined',
+    ChipPropsVariantOverrides
+  >;
+  onClick?: (
+    event: React.MouseEvent | React.KeyboardEvent | React.TouchEvent
+  ) => void;
+  color?: OverridableStringUnion<
+    | 'default'
+    | 'primary'
+    | 'secondary'
+    | 'error'
+    | 'info'
+    | 'success'
+    | 'warning',
+    ChipPropsColorOverrides
+  >;
+}
+
+export type TagType = keyof typeof Tag;

package/src/components/textfield/index.ts

@@ -0,0 +1 @@
+export * from './textfield';

package/src/components/textfield/textfield.stories.tsx

@@ -0,0 +1,376 @@
+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'

package/src/components/textfield/textfield.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TextFieldBaseProps } from './types';
+import {
+  FormControl,
+  ThemeProvider,
+  TextField as MuiTextField,
+} from '@mui/material';
+import { themes } from '../../helpers/colors';
+
+export const TextField: React.FC<TextFieldBaseProps> = ({
+  label,
+  disabled = false,
+  onChange,
+  ...rest
+}) => {
+  return (
+    <ThemeProvider theme={themes.light}>
+      <FormControl sx={{ width: '100%' }}>
+        <MuiTextField {...rest} label={label} disabled={disabled} />
+      </FormControl>
+    </ThemeProvider>
+  );
+};

package/src/components/textfield/types.ts

@@ -0,0 +1,93 @@
+import React, { ReactNode } from 'react'
+
+import {
+  TextFieldProps as MuiTextFieldProps,
+  TextFieldPropsColorOverrides,
+  TextFieldPropsSizeOverrides,
+} from '@mui/material/TextField'
+import {
+  FormHelperTextProps,
+  InputBaseProps,
+  InputLabelProps,
+  OutlinedInputProps,
+  SelectProps,
+} from '@mui/material'
+import { InputProps as StandardInputProps } from '@mui/material/Input'
+import { OverridableStringUnion } from '@mui/types'
+import { TextField } from '@mui/material'
+
+export type TextFieldValue = string | number
+export type TextFieldVariant = 'standard' | 'outlined' | 'filled'
+
+type MuiTextFieldBaseProps = Pick<
+  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'
+>
+
+export interface TextFieldBaseProps extends MuiTextFieldBaseProps {
+  id?: string
+  name?: string
+  defaultValue?: string
+  disabled?: boolean
+  required?: boolean
+  type?: React.InputHTMLAttributes<unknown>['type']
+  hasError?: boolean
+  label?: ReactNode
+  children?: ReactNode
+  error?: boolean
+  variant?: TextFieldVariant
+  helperText?: React.ReactNode
+  InputLabelProps?: Partial<InputLabelProps>
+  InputProps?: Partial<OutlinedInputProps>
+  autoComplete?: string
+  placeholder?: string
+  multiline?: boolean
+  rows?: string | number
+  maxRows?: string | number
+  minRows?: string | number
+  select?: boolean
+  SelectProps?: Partial<SelectProps>
+  onClick?: InputBaseProps['onClick']
+  onBlur?: InputBaseProps['onBlur']
+  onFocus?: StandardInputProps['onFocus']
+  size?: OverridableStringUnion<'small' | 'medium', TextFieldPropsSizeOverrides>
+  FormHelperTextProps?: Partial<FormHelperTextProps>
+  color?: OverridableStringUnion<
+    'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+    TextFieldPropsColorOverrides
+  >
+  value?: unknown
+}
+
+export type TextFieldType = keyof typeof TextField

package/src/helpers/clients.ts

@@ -0,0 +1,6 @@
+const CLIENT_COLORS = {
+  olos: ['#FF7F11', '#FFDB9F', '#FFA84C', '#B74608'],
+  bradesco: ['#cc092f', '#cc092f', '#cc092f', '#99061e'],
+}
+
+export default CLIENT_COLORS