@technical_user/design-system NPM

Installation

Using npm

$ npm i -g npm
$ npm i @technical_user/design-system

Pre requirements:

$ npm i react
$ npm i react-bootstrap
$ npm i react-switch
$ npm i react-datepicker
$ npm i @technical_user/validation
$ npm i react-icomoon
$ npm i react-popper
$ npm i react-router-dom

AtomButton:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<AtomButton>submit </AtomButton>

Props:

    export interface IButtonProps extends React.HTMLProps<HTMLButtonElement> {
    bsPrefix?: string;
    type?: 'primary' | 'secondary';
    customPadding?: boolean;
    }

AtomCheckBox:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<AtomCheckbox />

Props:

   export interface IChechBoxProps extends React.HTMLProps<HTMLInputElement> {
  bsPrefix?: string;
  as?: 'input' | 'textarea';
  type?: 'checkbox' | 'radio' | 'switch';
  id?: string;
  isInValid?: boolean;
  isValid?: boolean;
  isFormatNumber?: boolean;
  thousandsGroupStyle?: string;
  decimalSeparator?: string;
  thousandSeparator?: string;
  placeholder?: string;
  rows?: number;
  widthSize?: 'auto' | 'small' | 'medium' | 'larg';
  checked?: any;
  checkBoxType?: 'primary' | 'success';
}

AtomText:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<AtomText />

Props:

  export interface ITextProps extends React.HTMLProps<HTMLElement> {
  type?:
    | ''
    | 'type-1'
    | 'type-2'
    | 'type-3'
    | 'type-4'
    | 'type-5'
    | 'type-6'
    | 'type-7'
    | 'type-8'
    | 'type-9'
    | 'type-10'
    | 'type-11'
    | 'title';
  isLabel?: boolean;
  isSpan?: boolean;
  text?: any;
  id?: string;
  isFilter?: boolean;
  filterValue?: string;
  isLoading?: boolean;
}

AtomImage:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<AtomImage src={image} />

Props:

  export interface IImageProps extends React.HTMLProps<HTMLImageElement> {
  type?: string;
}

AtomInput:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<AtomInput />

Props:

export interface IInputProps extends FormControlProps {
  bsPrefix?: string;
  className?: string;
  onChange?: any;
  as?: 'input' | 'textarea';
  disabled?: boolean;
  readOnly?: boolean;
  type?: string;
  value?: any;
  id?: string;
  isInValid?: boolean;
  isValid?: boolean;
  thousandsGroupStyle?: string;
  decimalSeparator?: string;
  thousandSeparator?: string;
  placeholder?: string;
  widthSize?: 'auto' | 'small' | 'medium' | 'larg';
}

AtomSpinner:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<AtomSpinner />

Props:

export interface SpinnerProps extends React.HTMLAttributes<HTMLElement>, BsPrefixProps {
    animation?: 'border' | 'grow';
    size?: 'sm';
    variant?: Variant;
}

AtomPortal:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<AtomPortal>portal</AtomPortal>

Props:

export interface IPortalProps extends React.HTMLProps<HTMLDivElement> {
  container?: Element | DocumentFragment;
  key?: null | string;
}

AtomSwitch:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<AtomSwitch />

Props:

type htmlInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
type excludedHTMLInputProps = 'onFocus' | 'onBlur' | 'onKeyUp' | 'onChange' | 'ref' | keyof ReactSwitchProps;

type allowedHTMLinputProps = Omit<htmlInputProps, excludedHTMLInputProps>;

export interface ISwitchProps extends ReactSwitchProps, allowedHTMLinputProps {}

AtomToolTip:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<AtomToolTip />

Props:

export interface ITooltipProps extends React.HTMLProps<HTMLElement> {
  tooltipClassName?: string;
  backgroundColor?: string;
  tooltipText?: string;
  place?:
    | 'auto'
    | 'auto-start'
    | 'auto-end'
    | 'top'
    | 'bottom'
    | 'right'
    | 'left'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'right-start'
    | 'right-end'
    | 'left-start'
    | 'left-end';
  containerClassName?: string;
  isClickable?: boolean;
}

AtomDatePicker:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<AtomDatePicker />

Props:

export interface IDatePickerProps extends ReactDatePickerProps {
  bsPrefix?: string;
  className?: string;
  as?: 'input' | 'textarea';
  onChange: any;
  disabled?: boolean;
  readOnly?: boolean;
  type?: string;
  value?: any;
  id?: string;
  isInValid?: boolean;
  isValid?: boolean;
  isFormatNumber?: boolean;
  thousandsGroupStyle?: string;
  decimalSeparator?: string;
  thousandSeparator?: string;
  placeholder?: string;
  rows?: number;
  widthSize?: 'auto' | 'small' | 'medium' | 'larg';
}

AtomSelect:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<AtomSelect />

Props:

export interface ISelectProps {
  widthSize?: 'auto' | 'small' | 'medium' | 'larg';
  isInValid?: boolean;
  isValid?: boolean;
  onChange?: any;
  placeholder?: string | null;
  options: any[];
  value?: any;
  className?: string | null;
  isMulti?: boolean;
  isSearch?: boolean;
  closeCallback?: any;
  darkPlaceHolder?: boolean;
  colorType?: string | null;
  isPortal?: boolean;
  index?: number;
}

MoleculeButton:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<MoleculeButton />

Props:

export interface IMoleculeButtonProps {
  bsPrefix?: string;
  className?: string;
  disabled?: boolean;
  onClick?: any;
  type?: 'primary' | 'secondary';
  customPadding?: boolean;
  style?: object;
  iconSize?: string;
  iconName?: string;
  iconStyle?: object;
  iconClassName?: string;
  iconColor?: string;
  isLeftIcon?: boolean;
  isRightIcon?: boolean;
  isLoading?: boolean;
  isDropDown?: boolean;
  options?: any[];
  textType?: ITextProps['type'];
  textClassName?: string;
  text?: string;
}

MoleculeChecbox:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<MoleculeChecbox />

Props:

export interface IMoleculeCheckBoxProps {
  bsPrefix?: string;
  className?: string;
  onChange?: MouseEventHandler<HTMLInputElement> | undefined;
  as?: 'input' | 'textarea';
  disabled?: boolean;
  readOnly?: boolean;
  type?: IChechBoxProps['type'];
  value?: any;
  id?: string;
  isInValid?: boolean;
  isValid?: boolean;
  isFormatNumber?: boolean;
  thousandsGroupStyle?: string;
  decimalSeparator?: string;
  thousandSeparator?: string;
  placeholder?: string;
  rows?: number;
  widthSize?: 'auto' | 'small' | 'medium' | 'larg';
  error?: string;
  errorClassName?: string;
  errorType?: ITextProps['type'];
  checked?: boolean;
  containerClassName?: string;
  checkBoxType?: 'primary' | 'success';
  isFullWidth?: boolean;
  label?: string;
}

MoleculeCollapseTitle:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<MoleculeCollapseTitle />

Props:

export interface IMoleculeCollapseTitleProps {
  className?: string;
  textClassName?: string;
  title?: string;
  onClickIcon?: any;
  isShowContent?: boolean;
}

MoleculeDatePicker:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<MoleculeDatePicker />

Props:

export interface IMoleculeDatePickerProps extends IDatePickerProps {
  label?: string;
  labelClassName?: string;
  labelType?: ITextProps['type'];
  error?: string;
  errorClassName?: string;
  errorType?: ITextProps['type'];
  containerClassName?: string;
  iconSize: string;
  iconClassName?: string;
  iconColor?: string;
  isRequired?: boolean;
}

MoleculeDoubleCheckBox:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<MoleculeDoubleCheckBox />

Props:

export interface IMoleculeDoubleCheckBoxProps {
  mainLabel?: string;
  containerClassName?: string;
  firstCheckboxLabel?: string;
  isCheckedFirstCheckbox?: boolean;
  onClickFirstCheckbox?: any;
  firstCheckboxClassName?: string;
  firstCheckboxContainerClassName?: string;
  secondCheckboxLabel?: string;
  isCheckedSecondCheckbox?: boolean;
  onClickSecondCheckbox?: any;
  secondCheckboxClassName?: string;
  secondCheckboxContainerClassName?: string;
}

MoleculeIconText:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<MoleculeIconText />

Props:

export interface IMoleculeIconTextProps {
  className?: string;
  onClick?: any;
  type?: ITextProps['type'];
  isLabel?: boolean;
  isSpan?: boolean;
  text?: any;
  id?: string;
  isFilter?: boolean;
  filterValue?: string;
  isLoading?: boolean;
  style?: object;
  iconSize?: string;
  iconName?: string;
  iconStyle?: object;
  iconClassName?: string;
  iconColor?: string;
  textType?: ITextProps['type'];
  isLeftIcon?: boolean;
  isRightIcon?: boolean;
  containerClassName?: string;
  linkPath?: string;
  textClassName?: string;
}

MoleculeInput:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<MoleculeInput />

Props:

export interface IMoleculeInputProps {
  bsPrefix?: string;
  className?: string;
  onChange?: any;
  as?: IInputProps['as'];
  disabled?: boolean;
  readOnly?: boolean;
  type?: string;
  value?: any;
  id?: string;
  isInValid?: boolean;
  isValid?: boolean;
  thousandsGroupStyle?: string;
  decimalSeparator?: string;
  thousandSeparator?: string;
  placeholder?: string;
  widthSize?: 'auto' | 'small' | 'medium' | 'larg';
  label?: string;
  labelClassName?: string;
  labelType?: ITextProps['type'];
  error?: string;
  errorClassName?: string;
  errorType?: ITextProps['type'];
  iconSize?: string;
  iconName: string;
  iconStyle?: object;
  iconClassName?: string;
  iconColor?: string;
  isLeftIcon?: boolean;
  containerClassName?: string;
  isPassword?: boolean;
  isRequired?: boolean;
  onClickIcon?: any;
}

MoleculeProgressBar:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-datepicker/dist/react-datepicker.css'
import '@technical_user/design-system/lib/main.css'
<MoleculeProgressBar />

Props:

export interface IMoleculeProgressbarProps {
  containerClassName?: string;
  type?: 'success' | 'error' | 'warning';
  text?: string;
  autoSize?: boolean;
  className?: string;
}

@infinitebrahmanuniverse/nolb-_tec @everything-registry/sub-chunk-901

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago