dt-shared-front 1.0.0 → 1.0.2

package/src/components/input/input.tsx

@@ -1,138 +0,0 @@
-import React, { InputHTMLAttributes, useMemo, ChangeEvent } from 'react';
-import classnames from 'classnames';
-import Loader from '../icon/icons/input-loader.svg';
-import Clear from '../icon/icons/clear.svg';
-
-import styles from './input.module.scss';
-import { useState } from 'react';
-import { useCallback } from 'react';
-import { useEffect } from 'react';
-
-export enum EInputVariant {
-  filled = 'filled',
-  outlined = 'outlined',
-}
-
-export enum EInputSize {
-  small = 'small',
-  medium = 'medium',
-  large = 'large',
-}
-
-type IInputProps = {
-  invalid?: boolean;
-  icon?: any;
-  variant: EInputVariant;
-  size: EInputSize;
-  loading?: boolean;
-  showClear?: boolean;
-  onClear?: () => void;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'variant'>;
-
-export const Input = ({
-  onChange,
-  onFocus = () => {},
-  onBlur = () => {},
-  onClear,
-  icon: Icon,
-  name,
-  required,
-  disabled,
-  value,
-  type = 'text',
-  placeholder,
-  style,
-  loading,
-  showClear,
-  size = EInputSize.medium,
-  variant = EInputVariant.outlined,
-}: IInputProps) => {
-  const [_value, _setValue] = useState(value);
-
-  useEffect(() => _setValue(value), [value]);
-
-  const classNames = useMemo(
-    () =>
-      classnames(
-        styles.input,
-        styles[`input__${variant}`],
-        styles[`input__${size}`],
-        {
-          [styles[`input__action_${size}`]]: Icon || loading || showClear,
-          [styles[`input__actions_${size}`]]: (Icon || loading) && showClear,
-          [styles.input__disabled]: disabled,
-        }
-      ),
-    [variant, size, disabled, loading, showClear]
-  );
-
-  const clearClassNames = useMemo(
-    () =>
-      classnames(
-        styles.clear,
-        styles[`clear__${variant}`],
-        styles[`clear__${size}`],
-        {
-          [styles[`clear__action_${size}`]]: Icon || loading,
-        }
-      ),
-    [variant, size, Icon, loading]
-  );
-
-  const loaderClassNames = useMemo(
-    () =>
-      classnames(
-        styles.loader,
-        styles[`loader__${variant}`],
-        styles[`loader__${size}`]
-      ),
-    [variant, size]
-  );
-
-  const iconClassNames = useMemo(
-    () =>
-      classnames(
-        styles.icon,
-        styles[`icon__${variant}`],
-        styles[`icon__${size}`]
-      ),
-    [variant, size]
-  );
-
-  const _onChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    _setValue(e.target.value);
-    if (onChange) {
-      onChange(e);
-    }
-  }, []);
-
-  const _onClear = useCallback(() => {
-    _setValue(undefined);
-
-    if (onClear) {
-      onClear();
-    }
-  }, [onClear]);
-
-  return (
-    <div className={classNames}>
-      <input
-        name={name}
-        disabled={disabled}
-        placeholder={placeholder}
-        type={type}
-        value={_value || ''}
-        onChange={_onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        required={required}
-        style={style}
-      />
-      {showClear && _value && (
-        <Clear className={clearClassNames} onClick={_onClear} />
-      )}
-      {Icon && !loading && <Icon className={iconClassNames} />}
-      {loading && <Loader className={loaderClassNames} />}
-    </div>
-  );
-};

package/src/components/link/index.ts

@@ -1 +0,0 @@
-export { Link, ELinkVariant } from './link';

package/src/components/link/link.module.scss

@@ -1,26 +0,0 @@
-$actionColor: var(--color-pink);
-$iconColor: var(--color-icon-default);
-$iconColorHover: var(--color-icon-default--hover);
-
-.link {
-  text-decoration: none;
-  &__link {
-    color: $actionColor;
-  }
-
-  &__action {
-  }
-
-  & svg {
-    // color: $iconColor;
-
-    &:hover {
-      color: $iconColorHover;
-    }
-  }
-}
-
-
-.linkBold {
-  font-weight: 600;
-}

package/src/components/link/link.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import { useMemo } from 'react';
-import classnames from 'classnames';
-
-import styles from './link.module.scss';
-
-export enum ELinkVariant {
-  link = 'link',
-  action = 'action',
-}
-
-interface ILinkProps {
-  variant?: ELinkVariant;
-  children: any;
-  href?: string;
-  bold?: boolean;
-}
-
-export const Link = ({ children, variant = ELinkVariant.link, href, bold }: ILinkProps) => {
-  const classNames = useMemo(
-    () =>
-      classnames(styles.link, styles[`link__${variant}`], {
-        [styles.linkBold]: bold,
-      }),
-    [variant]
-  );
-
-  const link = useMemo(
-    () =>
-      variant === ELinkVariant.link ? (
-        <a href={href} className={classNames}>{children}</a>
-      ) : (
-        <div className={classNames}>{children}</div>
-      ),
-    [variant, children]
-  );
-
-  return link;
-};

package/src/components/menu/menu.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Menu as AntMenu, MenuProps as AntMenuProps } from 'antd';
-
-interface IMenuProps extends AntMenuProps {}
-
-export const Menu = (props: IMenuProps) => {
-  return <AntMenu {...props} />;
-};

package/src/components/text/text.module.scss

@@ -1,28 +0,0 @@
-$textSmallFontSize: var(--size-text-s);
-$textMediumFontSize: var(--size-text-m);
-$textLargeFontSize: var(--size-text-l);
-
-$textColorAddition: var(--color-font-addition);
-
-.text {
-  &__small {
-    font-size: $textSmallFontSize;
-  }
-
-  &__medium {
-    font-size: $textMediumFontSize;
-  }
-
-  &__large {
-    font-size: $textLargeFontSize;
-  }
-}
-
-
-.textAddition {
-  color: $textColorAddition;
-}
-
-.textBold {
-  font-weight: 600;
-}

package/src/components/text/text.tsx

@@ -1,31 +0,0 @@
-import { useMemo } from 'react';
-import classnames from 'classnames';
-
-import styles from './text.module.scss';
-import React from 'react';
-
-export enum ETextSize {
-  small = 'small',
-  medium = 'medium',
-  large = 'large',
-}
-
-interface ITextProps {
-  size?: ETextSize;
-  children?: any;
-  bold?: boolean;
-  addition?: boolean;
-}
-
-export const Text = ({ children, size = ETextSize.medium, bold, addition }: ITextProps) => {
-  const classNames = useMemo(
-    () =>
-      classnames(styles.text, styles[`text__${size}`], {
-        [styles.textAddition]: addition,
-        [styles.textBold]: bold,
-      }),
-    [size]
-  );
-
-  return <div className={classNames}>{children}</div>;
-};

package/src/index.ts

@@ -1,7 +0,0 @@
-export { Button, EButtonSize, EButtonVariant } from './components/button';
-export { Checkbox } from './components/checkbox';
-export { Dropdown } from './components/dropdown';
-export { Input, EInputSize, EInputVariant } from './components/input';
-export { Link, ELinkVariant } from './components/link';
-export { Menu } from './components/menu';
-export { Text, ETextSize } from './components/text';

package/src/styles/_components.scss

@@ -1,111 +0,0 @@
-:root {
-  //Font sizes
-  --size-text-xs: 10px;
-  --size-text-s: 12px;
-  --size-text-m: 14px;
-  --size-text-l: 16px;
-  --size-text-xl: 20px;
-
-  --size-header-s: 18px;
-  --size-header-m: 24px;
-  --size-header-l: 28px;
-  --size-header-xl: 36px;
-
-  //Colors
-  --color-default: #8F07CF;
-  --color-secondary: #FEE833;
-  --color-tertiary: #FB8A29;
-  --color-pink: #CB11AB;
-
-  --color-resolve: #00A611;
-  --color-reject: #FF4444;
-  --color-other: #1e90ff;
-  --color-danger: #ff773c;
-  --color-link: #4682b4;
-
-  --color-f8: #F8F8F8;
-  --color-d5: #d5d5d5;
-  --color-b6: #b6b6b6;
-  --color-8b: #8b8b8b;
-  --color-64: #646464;
-
-  //Button
-  --color-button-default-text: #FFFFFF;
-  --color-button-default: #8F07CF;
-  --color-button-default--active: #7E06B6;
-  --color-button-default--hover: #A008E8;
-  --color-button-default--disabled: #d5d5d5;
-
-  --color-button-secondary-text: #000000;
-  --color-button-secondary: #FEE833;
-  --color-button-secondary--active: darken(#FEE833, 5%);
-  --color-button-secondary--hover: lighten(#FEE833, 5%);
-  --color-button-secondary--disabled: #d5d5d5;
-
-  --color-button-tertiary-text: #8B8B8B;
-  --color-button-tertiary: #F8F8F8;
-  --color-button-tertiary--active: #F8F8F8;
-  --color-button-tertiary--hover: #F8F8F8;
-  --color-button-tertiary--disabled: #d5d5d5;
-
-  //Icon
-  --color-icon-default: #000000;
-  --color-icon-default--active: #CB11AB;
-  --color-icon-default--hover: #CB11AB;
-
-
-  //Input
-  --color-input-filled: #F8F8F8;
-  --color-input-filled-placeholder: #646464;
-  --color-input-filled-text: #000000;
-  --color-input-filled-text--disabled: #000000;
-
-  --color-input-filled--hover: #F8F8F8;
-  --color-input-filled--focus: #F8F8F8;
-  --color-input-filled--disabled: #646464;
-
-  --color-input: #ffffff;
-  --color-input--disabled: #f5f5f5;
-
-
-  --backdrop-blur: none;
-  --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-
-  --color-font: #000000;
-  --color-font-inverse: #ffffff;
-  --color-font-addition: #8b8b8b;
-  --color-font--disabled: #b6b6b6;
-
-  --color-text: #000000;
-  --color-text--hover: #000000;
-  --color-text--active: #000000;
-
-  --color-background: #ffffff;
-  --color-background--hover: #f5f5f5;
-
-
-  --color-element: #f5f5f5;
-  --color-element--active: #d5d5d5;
-  --color-element--hover: #f5f5f5;
-
-  --color-tab: #f5f5f5;
-  --color-tab--hover: #d5d5d5;
-
-  --color-border: #d5d5d5;
-  --color-border--active: #b6b6b6;
-  --color-border--hover: #b6b6b6;
-  --color-border--disabled: #d5d5d5;
-
-  --color-placeholder: #b6b6b6;
-
-  --color-icon-grey: #b6b6b6;
-  --color-icon-grey--hover: #8b8b8b;
-
-  --color-scroll: rgba(0, 0, 0, 0.15);
-
-  --color-bg: #FFFFFF;
-
-  --color-toast-reject: #fe3d3eee;
-  --color-toast-resolve: #56b661ee;
-
-}