norma-library 0.4.3 → 0.4.5

package/src/components/modal/types.ts

@@ -1,47 +0,0 @@
-import { Modal, ModalProps as MuiModalProps, SxProps } from '@mui/material';
-import { Theme } from '@emotion/react';
-
-type RenderProps<E extends HTMLElement = HTMLElement> = {
-  focusRef?: React.MutableRefObject<E | null>;
-  id?: string;
-};
-
-type MuiModalBaseProps = Pick<MuiModalProps, 'sx' | 'children' | 'onClose'>;
-
-export interface ModalBaseProps extends MuiModalBaseProps {
-  sx?: SxProps<Theme>;
-  title?: string;
-  open: boolean;
-  children: React.ReactElement;
-  onConfirm?: (
-    event?: React.MouseEvent | React.KeyboardEvent | React.TouchEvent,
-    contextId?: string
-  ) => void;
-  onClose?: {
-    bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
-  }['bivarianceHack'];
-  onCancel?: (
-    event?: React.MouseEvent | React.KeyboardEvent | React.TouchEvent,
-    contextId?: string
-  ) => void;
-}
-
-export interface ModalHeaderProps {
-  title?: string;
-  onClose?: {
-    bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
-  }['bivarianceHack'];
-}
-
-export interface ModalFooterProps {
-  onCancel?: (
-    event?: React.MouseEvent | React.KeyboardEvent | React.TouchEvent,
-    contextId?: string
-  ) => void;
-  onConfirm: (
-    event?: React.MouseEvent | React.KeyboardEvent | React.TouchEvent,
-    contextId?: string
-  ) => void;
-}
-
-export type ModalType = keyof typeof Modal;

package/src/components/progress-bar/index.ts

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

package/src/components/progress-bar/progress-bar.stories.tsx

@@ -1,68 +0,0 @@
-import React from "react"
-import type { StoryDefault, Story } from '@ladle/react'
-import { ProgressBar } from './progress-bar'
-import { Fragment } from 'react'
-
-export default {
-  title: 'Data / ProgressBar',
-  meta: {
-    key: 'button',
-  },
-} satisfies StoryDefault
-
-export const ProgressBarVariant: Story = () => (
-  <div style={{ display: 'flex', gap: '1rem' }}>
-    <div style={{ position: 'relative', width: '100%' }}>
-      <ProgressBar value={10} usage={23} total={100} />
-    </div>
-  </div>
-)
-
-ProgressBarVariant.storyName = 'Progressbar Simple'
-
-export const ProgressBarTitle: Story = () => (
-  <div style={{ display: 'flex', gap: '1rem' }}>
-    <div style={{ position: 'relative', width: '100%' }}>
-      <ProgressBar value={10} label="Progress" usage={23} total={100} />
-    </div>
-  </div>
-)
-
-ProgressBarTitle.storyName = 'Progressbar Title'
-
-export const ProgressBarColors: Story = () => (
-  <Fragment>
-    <div style={{ display: 'flex', gap: '1rem', marginBottom: 15 }}>
-      <div style={{ position: 'relative', flex: 1, width: '100%' }}>
-        <ProgressBar value={60} usage={23} total={100} color="inherit" label="Progress Inherit" />
-      </div>
-      <div style={{ position: 'relative', flex: 1, width: '100%' }}>
-        <ProgressBar
-          value={60}
-          usage={23}
-          total={100}
-          color="secondary"
-          label="Progress secondary"
-        />
-      </div>
-    </div>
-    <div style={{ display: 'flex', gap: '1rem', marginBottom: 15 }}>
-      <div style={{ position: 'relative', flex: 1, width: '100%' }}>
-        <ProgressBar value={60} usage={23} total={100} color="error" label="Progress error" />
-      </div>
-      <div style={{ position: 'relative', flex: 1, width: '100%' }}>
-        <ProgressBar value={60} usage={23} total={100} color="info" label="Progress info" />
-      </div>
-    </div>
-    <div style={{ display: 'flex', gap: '1rem', marginBottom: 15 }}>
-      <div style={{ position: 'relative', flex: 1, width: '100%' }}>
-        <ProgressBar value={60} usage={23} total={100} color="success" label="Progress success" />
-      </div>
-      <div style={{ position: 'relative', flex: 1, width: '100%' }}>
-        <ProgressBar value={60} usage={23} total={100} color="warning" label="Progress warning" />
-      </div>
-    </div>
-  </Fragment>
-)
-
-ProgressBarColors.storyName = 'Progressbar Colors'

package/src/components/progress-bar/progress-bar.tsx

@@ -1,38 +0,0 @@
-import { ThemeProvider } from '@emotion/react';
-import { themes } from '../../helpers/colors';
-import React from 'react';
-import { ProgressBarBaseProps } from './types';
-import { StyledProgressBarLabel, StyledProgressBar } from './styles';
-
-export const ProgressBar: React.FC<ProgressBarBaseProps & {
-  usage?: number;
-  total?: number;
-  colorCustom?: string;
-}> = ({
-  value = 0,
-  label,
-  variant = 'determinate',
-  usage,
-  total,
-  ...props
-}) => {
-  const percentage = usage && total ? (usage / total) * 100 : 0;
-  return (
-    <ThemeProvider theme={themes.light}>
-      {label && (
-        <StyledProgressBarLabel>
-          {label}
-          <span style={{ right: 0 }}>
-            {total} ({percentage.toFixed(2)}%)
-          </span>
-        </StyledProgressBarLabel>
-      )}
-      <StyledProgressBar
-        value={value}
-        variant={variant}
-        sx={{ height: 10 }}
-        {...props}
-      />
-    </ThemeProvider>
-  );
-};

package/src/components/progress-bar/styles.tsx

@@ -1,27 +0,0 @@
-import {
-  LinearProgress as MuiProgressBar,
-  linearProgressClasses,
-} from '@mui/material';
-import styled from 'styled-components';
-import { StyledProgressBarProps } from './types';
-
-export const StyledProgressBar = styled(MuiProgressBar)<StyledProgressBarProps>`
-  width: 100%;
-  height: 5px;
-  border-radius: 10px;
-  position: relative;
-
-  &.${linearProgressClasses.determinate} {
-    background-color: #e0e0e0;
-  }
-`;
-
-export const StyledProgressBarLabel = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-  position: relative;
-  text-align: left;
-  font: normal normal normal 16px/20px Source Sans Pro;
-`;

package/src/components/progress-bar/types.ts

@@ -1,35 +0,0 @@
-import { SxProps, LinearProgressProps } from '@mui/material';
-import { Theme } from '@emotion/react';
-import { OverridableStringUnion } from '@mui/types';
-import { ProgressBar } from './progress-bar';
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface LinearProgressPropsColorOverrides {}
-
-type MuiProgressBarBaseProps = Pick<LinearProgressProps, 'sx'>;
-
-export interface ProgressBarBaseProps extends MuiProgressBarBaseProps {
-  sx?: SxProps<Theme>;
-  usage?: number;
-  value?: number;
-  total?: number;
-  label?: string;
-  colorCustom?: string;
-  variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query';
-  color?: OverridableStringUnion<
-    | 'primary'
-    | 'secondary'
-    | 'error'
-    | 'info'
-    | 'success'
-    | 'warning'
-    | 'inherit',
-    LinearProgressPropsColorOverrides
-  >;
-}
-
-export type StyledProgressBarProps = {
-  colorCustom?: string;
-};
-
-export type ProgressBarType = keyof typeof ProgressBar;

package/src/components/radio/index.ts

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

package/src/components/radio/radio.stories.tsx

@@ -1,150 +0,0 @@
-import React from 'react';
-import type { StoryDefault, Story } from '@ladle/react'
-import { Radiobox } from './radio'
-import { FormControl, FormControlLabel, FormLabel, RadioGroup } from '@mui/material'
-import { pink } from '@mui/material/colors'
-import { ChangeEvent, useState } from 'react'
-
-export default {
-  title: 'Form / Radiobox',
-  meta: {
-    key: 'radiobox',
-  },
-} satisfies StoryDefault
-
-export const RadioboxBasic: Story = () => {
-  const [selectedValue, setSelectedValue] = useState('b')
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedValue(event.target.value)
-  }
-
-  return (
-    <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
-      <Radiobox
-        checked={selectedValue === 'a'}
-        onChange={handleChange}
-        value="a"
-        name="radio-buttons"
-        inputProps={{ 'aria-label': 'A' }}
-      />
-      <Radiobox
-        checked={selectedValue === 'b'}
-        onChange={handleChange}
-        value="b"
-        name="radio-buttons"
-        inputProps={{ 'aria-label': 'B' }}
-      />
-    </div>
-  )
-}
-
-RadioboxBasic.storyName = 'Radiobox Basic'
-
-export const RadioboxGroup: Story = () => (
-  <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
-    <FormControl>
-      <FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
-      <RadioGroup
-        aria-labelledby="demo-radio-buttons-group-label"
-        defaultValue="female"
-        name="radio-buttons-group"
-      >
-        <FormControlLabel value="female" control={<Radiobox />} label="Female" />
-        <FormControlLabel value="male" control={<Radiobox />} label="Male" />
-        <FormControlLabel value="other" control={<Radiobox />} label="Other" />
-      </RadioGroup>
-    </FormControl>
-  </div>
-)
-RadioboxGroup.storyName = 'Radiobox Group'
-
-export const RadioboxDirection: Story = () => (
-  <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
-    <FormControl>
-      <FormLabel id="demo-row-radio-buttons-group-label">Gender</FormLabel>
-      <RadioGroup
-        row
-        aria-labelledby="demo-row-radio-buttons-group-label"
-        name="row-radio-buttons-group"
-      >
-        <FormControlLabel value="female" control={<Radiobox />} label="Female" />
-        <FormControlLabel value="male" control={<Radiobox />} label="Male" />
-        <FormControlLabel value="other" control={<Radiobox />} label="Other" />
-        <FormControlLabel value="disabled" disabled control={<Radiobox />} label="other" />
-      </RadioGroup>
-    </FormControl>
-  </div>
-)
-RadioboxDirection.storyName = 'Radiobox Direction'
-
-export const RadioboxSize: Story = () => {
-  const [selectedValue, setSelectedValue] = useState('a')
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setSelectedValue(event.target.value)
-  }
-
-  const controlProps = (item: string) => ({
-    checked: selectedValue === item,
-    onChange: handleChange,
-    value: item,
-    name: 'size-radio-button-demo',
-    inputProps: { 'aria-label': item },
-  })
-
-  return (
-    <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
-      <Radiobox {...controlProps('a')} size="small" />
-      <Radiobox {...controlProps('b')} />
-      <Radiobox
-        {...controlProps('c')}
-        sx={{
-          '& .MuiSvgIcon-root': {
-            fontSize: 28,
-          },
-        }}
-      />
-    </div>
-  )
-}
-
-RadioboxSize.storyName = 'Radiobox Size'
-
-export const RadioboxColors: Story = () => (
-  <div style={{ display: 'flex', gap: '1rem', margin: 16 }}>
-    <FormControl>
-      <FormLabel id="demo-row-radio-buttons-group-label">Colors</FormLabel>
-      <RadioGroup
-        row
-        aria-labelledby="demo-row-radio-buttons-group-label"
-        name="row-radio-buttons-group"
-      >
-        <FormControlLabel value="Primary" control={<Radiobox />} label="Primary" />
-        <FormControlLabel
-          value="secondary"
-          control={<Radiobox color="secondary" />}
-          label="Secondary"
-        />
-        <FormControlLabel value="success" control={<Radiobox color="success" />} label="Success" />
-        <FormControlLabel value="default" control={<Radiobox color="default" />} label="Default" />
-        <FormControlLabel
-          value="pink"
-          label="Pink"
-          control={
-            <Radiobox
-              sx={{
-                color: pink[800],
-                '&.Mui-checked': {
-                  color: pink[600],
-                },
-              }}
-            />
-          }
-        />
-      </RadioGroup>
-    </FormControl>
-  </div>
-)
-
-RadioboxColors.storyName = 'Radiobox Colors'

package/src/components/radio/radio.tsx

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

package/src/components/radio/types.ts

@@ -1,27 +0,0 @@
-import React from 'react'
-import { OverridableStringUnion } from '@mui/types'
-
-import {
-  Radio,
-  ButtonBaseProps as MuiButtonBaseProps,
-  RadioPropsColorOverrides,
-  RadioPropsSizeOverrides,
-} from '@mui/material'
-
-type MuiRadioBaseProps = Pick<MuiButtonBaseProps, 'sx'>
-
-export interface RadioBaseProps extends MuiRadioBaseProps {
-  name?: string
-  disabled?: boolean
-  required?: boolean
-  tabIndex?: number
-  value?: unknown
-  size?: OverridableStringUnion<'small' | 'medium', RadioPropsSizeOverrides>
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-  color?: OverridableStringUnion<
-    'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default',
-    RadioPropsColorOverrides
-  >
-}
-
-export type RadioType = keyof typeof Radio

package/src/components/tag/index.ts

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

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

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

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

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

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

package/src/components/textfield/textfield.tsx

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

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