dt-shared-front 1.0.0 → 1.0.2

package/src/components/button/button.module.scss

@@ -1,166 +0,0 @@
-$color-button-default: var(--color-button-default);
-$color-button-default-text: var(--color-button-default-text);
-$color-button-default--hover: var(--color-button-default--hover);
-$color-button-default--active: var(--color-button-default--active);
-$color-button-default--disabled: var(--color-button-default--disabled);
-
-$color-button-secondary: var(--color-button-secondary);
-$color-button-secondary-text: var(--color-button-secondary-text);
-$color-button-secondary--hover: var(--color-button-secondary--hover);
-$color-button-secondary--active: var(--color-button-secondary--active);
-$color-button-secondary--disabled: var(--color-button-secondary--disabled);
-
-$color-button-tertiary: var(--color-button-tertiary);
-$color-button-tertiary-text: var(--color-button-tertiary-text);
-$color-button-tertiary--hover: var(--color-button-tertiary--hover);
-$color-button-tertiary--active: var(--color-button-tertiary--active);
-$color-button-tertiary--disabled: var(--color-button-tertiary--disabled);
-
-.button {
-  border-radius: 8px;
-  font-weight: 600;
-  border: none;
-  white-space: nowrap;
-  cursor: pointer;
-  box-shadow: none;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-
-  &__small {
-    padding: 8px 16px;
-  }
-
-  &__medium {
-    padding: 16px 24px;
-    font-size: 16px;
-  }
-
-  &__large {
-    padding: 22px 48px;
-  }
-
-  &__default {
-    background-color: $color-button-default;
-    color: $color-button-default-text;
-
-    & > svg {
-      color: $color-button-default-text;
-    }
-
-    &:hover {
-      background-color: $color-button-default--hover;
-    }
-
-    &:active {
-      background-color: $color-button-default--active;
-    }
-  }
-
-  &__secondary {
-    background-color: $color-button-secondary;
-    color: $color-button-secondary-text;
-
-    &:hover {
-      background-color: $color-button-secondary--hover;
-    }
-
-    &:active {
-      background-color: $color-button-secondary--active;
-    }
-  }
-
-  &__tertiary {
-    background-color: $color-button-tertiary;
-    color: $color-button-tertiary-text;
-
-    &:hover {
-      background-color: $color-button-tertiary--hover;
-    }
-
-    &:active {
-      background-color: $color-button-tertiary--active;
-    }
-  }
-
-  &:disabled {
-    background-color: $color-button-default--disabled;
-    cursor: not-allowed;
-
-    &:hover,
-    &:active {
-      background-color: $color-button-default--disabled;
-    }
-  }
-}
-
-@media (max-width: 1023px) {
-  .button {
-    &__small {
-      padding: 8px;
-    }
-
-    &__medium {
-      padding: 10px;
-      font-size: 16px;
-    }
-
-    &__large {
-      padding: 12px;
-    }
-  }
-}
-
-.loading {
-  color: transparent;
-  cursor: wait;
-  & .icon {
-    visibility: hidden;
-  }
-}
-
-.icon {
-  vertical-align: bottom;
-
-  &__small {
-    width: 16px;
-    height: 16px;
-    margin-left: 4px;
-  }
-
-  &__medium {
-    width: 20px;
-    height: 20px;
-    margin-left: 8px;
-  }
-
-  &__large {
-    width: 24px;
-    height: 24px;
-    margin-left: 12px;
-  }
-
-  &__default {
-    color: $color-button-default-text;
-  }
-
-  &__only {
-    margin: 0;
-  }
-}
-
-.loader {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  &__medium {
-    width: 24px;
-    height: 24px;
-  }
-
-  &__default {
-    color: $color-button-default-text;
-  }
-}

package/src/components/button/button.tsx

@@ -1,79 +0,0 @@
-import React, { PropsWithChildren, useMemo, MouseEvent } from 'react';
-import classnames from 'classnames';
-import Loader from '../icon/icons/button-loader.svg';
-
-import styles from './button.module.scss';
-
-export enum EButtonSize {
-  small = 'small',
-  medium = 'medium',
-  large = 'large',
-}
-
-export enum EButtonVariant {
-  default = 'default',
-  secondary = 'secondary',
-  tertiary = 'tertiary'
-}
-
-interface IButtonProps {
-  variant?: EButtonVariant;
-  size?: EButtonSize;
-  icon?: any;
-  loading?: boolean;
-  disabled?: boolean;
-  onClick?: (e?: MouseEvent<HTMLButtonElement>) => void
-}
-
-export const Button = ({
-  variant = EButtonVariant.default,
-  size = EButtonSize.medium,
-  icon: Icon,
-  loading,
-  disabled,
-  children,
-  onClick
-}: PropsWithChildren<IButtonProps>) => {
-  const classNames = useMemo(
-    () =>
-      classnames(
-        styles.button,
-        styles[`button__${variant}`],
-        styles[`button__${size}`],
-        {
-          [styles.loading]: loading,
-          [styles.withIcon]: Icon,
-        }
-      ),
-    [variant, size, loading, Icon, disabled]
-  );
-
-  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}`],
-        { [styles.icon__only]: !children }
-      ),
-    [variant, size, children]
-  );
-
-  return (
-    <button className={classNames} disabled={disabled} onClick={onClick}>
-      {children}
-      {Icon && <Icon className={iconClassNames} />}
-      {loading && <Loader className={loaderClassNames} />}
-    </button>
-  );
-};

package/src/components/checkbox/checkbox.module.scss

@@ -1,82 +0,0 @@
-$defaultFontSize: 16px;
-$colorPinkWB: #cb11ab;
-$colorGreyWB: #8b8b8b;
-
-.wbCheckbox {
-  position: absolute;
-  z-index: -1;
-  opacity: 0;
-
-  & + label {
-    display: inline-flex;
-    align-items: center;
-    user-select: none;
-    cursor: pointer;
-
-    &::before {
-      content: "";
-      display: inline-block;
-      width: 22px;
-      height: 22px;
-      flex-shrink: 0;
-      flex-grow: 0;
-      border: 1px solid $colorGreyWB;
-      border-radius: 7px;
-      margin-right: 0.5em;
-      background-repeat: no-repeat;
-      background-position: center center;
-      background-size: 50% 50%;
-    }
-
-    &::after {
-      display: none !important;
-    }
-  }
-
-  &.small + label::before {
-    width: 17px;
-    height: 17px;
-    border-radius: 4px;
-  }
-
-  &:checked + label::before {
-    border-color: $colorPinkWB;
-    background-color: $colorPinkWB;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
-  }
-
-  /* стили при наведении курсора на checkbox */
-  &:not(:disabled):not(:checked) + label:hover::before {
-    border-color: $colorPinkWB;
-  }
-
-  /* стили для активного состояния чекбокса (при нажатии на него) */
-  &:not(:disabled):active + label::before {
-    background-color: $colorPinkWB;
-    border-color: $colorPinkWB;
-  }
-
-  /* стили для чекбокса, находящегося в фокусе */
-  &:focus + label::before {
-    box-shadow: 0 0 0 0.2rem rgba(255, 24, 236, 0.2);
-  }
-
-  /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */
-  &:focus:not(:checked) + label::before {
-    border-color: $colorPinkWB;
-  }
-
-  /* стили для чекбокса, находящегося в состоянии disabled */
-  &:disabled {
-    // color: $secondaryTextColor;
-
-    & + label::before {
-      opacity: 0.7;
-    }
-
-    &:checked + label::before {
-      background-color: $colorPinkWB;
-      opacity: 0.7;
-    }
-  }
-}

package/src/components/checkbox/checkbox.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import { ChangeEvent } from 'react';
-import styles from './checkbox.module.scss';
-
-export type ICheckboxProps = {
-  disabled?: boolean;
-  checked?: boolean;
-  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-  id?: string;
-  children?: JSX.Element | string;
-  small?: boolean;
-};
-
-export const Checkbox = ({
-  disabled = false,
-  checked = false,
-  id,
-  small = false,
-  onChange = () => {},
-  children,
-}: ICheckboxProps) => {
-  return (
-    <>
-      <input
-        className={classnames(styles.wbCheckbox, { small })}
-        type="checkbox"
-        disabled={disabled}
-        id={id}
-        checked={checked}
-        onChange={onChange}
-      />
-      <label htmlFor={id}>{children}</label>
-    </>
-  );
-};

package/src/components/dropdown/dropdown.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-import { Dropdown as AntDropdown, DropDownProps as AntDropdownProps } from 'antd';
-
-interface IDropdownProps extends AntDropdownProps {}
-
-export const Dropdown = (props: IDropdownProps) => {
-  return <AntDropdown {...props} />;
-};

package/src/components/icon/icons/button-loader.svg

@@ -1,18 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path d="M17 10C17 11.6195 16.4385 13.1889 15.4111 14.4408C14.3837 15.6926 12.954 16.5495 11.3657 16.8655C9.77729 17.1814 8.1285 16.9369 6.70024 16.1734C5.27198 15.41 4.15262 14.175 3.53287 12.6788C2.91311 11.1826 2.83133 9.51776 3.30144 7.96801C3.77155 6.41825 4.76448 5.07945 6.11103 4.17971C7.45758 3.27997 9.07445 2.87497 10.6861 3.03371C12.0062 3.16372 13.2558 3.6653 14.294 4.47173C14.6757 4.76817 14.6728 5.32726 14.331 5.66897V5.66897C13.9893 6.01068 13.4387 6.00353 13.045 5.72325C12.3028 5.1948 11.4313 4.86557 10.5146 4.77528C9.30584 4.65623 8.09319 4.95998 7.08328 5.63478C6.07336 6.30959 5.32867 7.31369 4.97608 8.47601C4.6235 9.63832 4.68484 10.8869 5.14965 12.0091C5.61447 13.1312 6.45399 14.0575 7.52519 14.6301C8.59638 15.2027 9.83297 15.3861 11.0242 15.1491C12.2155 14.9122 13.2878 14.2695 14.0583 13.3306C14.8289 12.3917 15.25 11.2146 15.25 10H17Z" fill="url(#paint0_linear)">
-    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="0.75s" repeatCount="indefinite"/>
-  </path>
-	<path d="M17 10C17 11.6195 16.4385 13.1889 15.4111 14.4408C14.3837 15.6926 12.954 16.5495 11.3657 16.8655C9.77729 17.1814 8.1285 16.9369 6.70024 16.1734C5.27198 15.41 4.15262 14.175 3.53287 12.6788C2.91311 11.1826 2.83133 9.51776 3.30144 7.96801C3.77155 6.41825 4.76448 5.07945 6.11103 4.17971C7.45758 3.27997 9.07445 2.87497 10.6861 3.03371C12.0062 3.16372 13.2558 3.6653 14.294 4.47173C14.6757 4.76817 14.6728 5.32726 14.331 5.66897V5.66897C13.9893 6.01068 13.4387 6.00353 13.045 5.72325C12.3028 5.1948 11.4313 4.86557 10.5146 4.77528C9.30584 4.65623 8.09319 4.95998 7.08328 5.63478C6.07336 6.30959 5.32867 7.31369 4.97608 8.47601C4.6235 9.63832 4.68484 10.8869 5.14965 12.0091C5.61447 13.1312 6.45399 14.0575 7.52519 14.6301C8.59638 15.2027 9.83297 15.3861 11.0242 15.1491C12.2155 14.9122 13.2878 14.2695 14.0583 13.3306C14.8289 12.3917 15.25 11.2146 15.25 10H17Z" fill="url(#paint1_linear)">
-    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="0.75s" repeatCount="indefinite"/>
-  </path>
-	<defs>
-		<linearGradient id="paint0_linear" x1="14.5" y1="5.5" x2="16.5" y2="10" gradientUnits="userSpaceOnUse">
-			<stop stop-color="currentColor" />
-			<stop offset="1" stop-color="currentColor" stop-opacity="0" />
-		</linearGradient>
-		<linearGradient id="paint1_linear" x1="10" y1="16" x2="17" y2="9.5" gradientUnits="userSpaceOnUse">
-			<stop stop-color="currentColor" />
-			<stop offset="1" stop-color="currentColor" stop-opacity="0" />
-		</linearGradient>
-	</defs>
-</svg>

package/src/components/icon/icons/clear.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path d="M13 4.00714L11.9929 3L8 6.99286L4.00714 3L3 4.00714L6.99286 8L3 11.9929L4.00714 13L8 9.00714L11.9929 13L13 11.9929L9.00714 8L13 4.00714Z" fill="currentColor" />
-</svg>

package/src/components/icon/icons/input-loader.svg

@@ -1,18 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path d="M17 10C17 11.6195 16.4385 13.1889 15.4111 14.4408C14.3837 15.6926 12.954 16.5495 11.3657 16.8655C9.77729 17.1814 8.1285 16.9369 6.70024 16.1734C5.27198 15.41 4.15262 14.175 3.53287 12.6788C2.91311 11.1826 2.83133 9.51776 3.30144 7.96801C3.77155 6.41825 4.76448 5.07945 6.11103 4.17971C7.45758 3.27997 9.07445 2.87497 10.6861 3.03371C12.0062 3.16372 13.2558 3.6653 14.294 4.47173C14.6757 4.76817 14.6728 5.32726 14.331 5.66897V5.66897C13.9893 6.01068 13.4387 6.00353 13.045 5.72325C12.3028 5.1948 11.4313 4.86557 10.5146 4.77528C9.30584 4.65623 8.09319 4.95998 7.08328 5.63478C6.07336 6.30959 5.32867 7.31369 4.97608 8.47601C4.6235 9.63832 4.68484 10.8869 5.14965 12.0091C5.61447 13.1312 6.45399 14.0575 7.52519 14.6301C8.59638 15.2027 9.83297 15.3861 11.0242 15.1491C12.2155 14.9122 13.2878 14.2695 14.0583 13.3306C14.8289 12.3917 15.25 11.2146 15.25 10H17Z" fill="url(#paint0_linear)">
-    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="0.75s" repeatCount="indefinite"/>
-  </path>
-	<path d="M17 10C17 11.6195 16.4385 13.1889 15.4111 14.4408C14.3837 15.6926 12.954 16.5495 11.3657 16.8655C9.77729 17.1814 8.1285 16.9369 6.70024 16.1734C5.27198 15.41 4.15262 14.175 3.53287 12.6788C2.91311 11.1826 2.83133 9.51776 3.30144 7.96801C3.77155 6.41825 4.76448 5.07945 6.11103 4.17971C7.45758 3.27997 9.07445 2.87497 10.6861 3.03371C12.0062 3.16372 13.2558 3.6653 14.294 4.47173C14.6757 4.76817 14.6728 5.32726 14.331 5.66897V5.66897C13.9893 6.01068 13.4387 6.00353 13.045 5.72325C12.3028 5.1948 11.4313 4.86557 10.5146 4.77528C9.30584 4.65623 8.09319 4.95998 7.08328 5.63478C6.07336 6.30959 5.32867 7.31369 4.97608 8.47601C4.6235 9.63832 4.68484 10.8869 5.14965 12.0091C5.61447 13.1312 6.45399 14.0575 7.52519 14.6301C8.59638 15.2027 9.83297 15.3861 11.0242 15.1491C12.2155 14.9122 13.2878 14.2695 14.0583 13.3306C14.8289 12.3917 15.25 11.2146 15.25 10H17Z" fill="url(#paint1_linear)">
-    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="0.75s" repeatCount="indefinite"/>
-  </path>
-	<defs>
-		<linearGradient id="paint0_linear" x1="14.5" y1="5.5" x2="16.5" y2="10" gradientUnits="userSpaceOnUse">
-			<stop stop-color="currentColor" />
-			<stop offset="1" stop-color="currentColor" stop-opacity="0" />
-		</linearGradient>
-		<linearGradient id="paint1_linear" x1="10" y1="16" x2="17" y2="9.5" gradientUnits="userSpaceOnUse">
-			<stop stop-color="currentColor" />
-			<stop offset="1" stop-color="currentColor" stop-opacity="0" />
-		</linearGradient>
-	</defs>
-</svg>

package/src/components/input/input.module.scss

@@ -1,178 +0,0 @@
-.input {
-  position: relative;
-  width: 100%;
-
-  & input {
-    height: 100%;
-    width: 100%;
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border: none;
-    outline: none;
-    user-select: text;
-    font-weight: inherit;
-
-    &[type=number]::-webkit-inner-spin-button,
-    &[type=number]::-webkit-outer-spin-button,
-    &[type=time]::-webkit-inner-spin-button,
-    &[type=time]::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-    &:-webkit-autofill,
-    &:-webkit-autofill:hover,
-    &:-webkit-autofill:focus,
-    &:-internal-autofill-selected {
-      -webkit-text-fill-color: none;
-      -webkit-box-shadow: 0 0 200px white inset;
-    }
-    &::-webkit-calendar-picker-indicator {
-      display: none;
-    }
-
-    &:-moz-ui-invalid {
-      box-shadow: none;
-    }
-
-    &[type=time] {
-      &::-webkit-clear-button {
-        display: none;
-      }
-
-      &::-webkit-datetime-edit-second-field,
-      &::-webkit-datetime-edit-minute-field,
-      &::-webkit-datetime-edit-hour-field {
-        &:focus {
-          background: #f5caeb;
-        }
-      }
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  &__medium input {
-    border-radius: 4px;
-    padding: 0 12px;
-    font-size: var(--size-text-m);
-  }
-
-  &__large input {
-    border-radius: 8px;
-    padding: 16px;
-    font-size: var(--size-text-l);
-  }
-
-  &__action_medium input {
-    padding-right: 36px;
-  }
-
-  &__action_large input {
-    padding-right: 48px;
-  }
-
-  &__actions_medium input {
-    padding-right: 60px;
-  }
-
-  &__actions_large input {
-    padding-right: 80px;
-  }
-
-  &__outlined input {
-    background-color: var(--color-input);
-    border: 1px solid var(--color-border);
-    background-clip: padding-box;
-    transition: border-color .3s;
-
-    &:disabled {
-      background-color: var(--color-input--disabled);
-      border-color: var(--color-border--disabled);
-      color: var(--color-font--disabled);
-    }
-
-    &::placeholder {
-      color: var(--color-placeholder);
-    }
-    &:read-only {
-      background-color: var(--color-input--disabled);
-      border-color: var(--color-border--disabled);
-    }
-    &:focus {
-      border-color: var(--color-border--active);
-    }
-  }
-
-  &__filled input {
-    background-color: var(--color-input-filled);
-    color: var(--color-input-filled-text);
-    transition: background-color .1s;
-
-    &::placeholder {
-      color: var(--color-input-filled-placeholder);
-    }
-    &:focus {
-      background-color: var(--color-input-filled--focus);
-      color: var(--color-input-filled-text);
-      &::placeholder {
-        color: var(--color-input-filled-placeholder);
-      }
-    }
-    &:disabled {
-      background-color: var(--color-input-filled--disabled);
-    }
-  }
-}
-
-.clear {
-  position: absolute;
-  cursor: pointer;
-
-  &__large {
-    width: 24px;
-    height: 24px;
-    right: 16px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  &__action_medium {
-    right: 36px;
-  }
-
-  &__action_large {
-    right: 48px;
-  }
-}
-
-.icon {
-  position: absolute;
-  cursor: pointer;
-
-  &__large {
-    width: 24px;
-    height: 24px;
-    right: 16px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}
-
-.loader {
-  position: absolute;
-
-  &__large {
-    width: 24px;
-    height: 24px;
-    right: 16px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  &__filled {
-    color: var(--color-input-filled-text);
-  }
-}