quickblox-react-ui-kit 0.4.1 → 0.4.2-beta.2

package/src/Presentation/Views/PreviewDialog/PreviewDialogContextMenu/PreviewDialogContextMenu.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import './PreviewDialogContextMenu.scss';
-import UiKitTheme from '../../../themes/UiKitTheme';
-import { MenuItem } from '../../Dialog/AIWidgets/AIWidgetActions/AIWidgetActions';
-import ContextMenu from '../../Dialog/ContextMenu/ContextMenu';
-import EditDots from '../../../components/UI/svgs/Icons/Actions/EditDots';
-import { DialogEntity } from '../../../../Domain/entity/DialogEntity';
-// eslint-disable-next-line import/named
-import { FunctionDialogEntityToVoid } from '../../../../CommonTypes/BaseViewModel';
-
-interface PreviewDialogContextMenuProps {
-  theme?: UiKitTheme;
-  dialog: DialogEntity;
-  onLeave: FunctionDialogEntityToVoid;
-  enableLeaveDialog: boolean;
-}
-
-export default function PreviewDialogContextMenu(
-  props: PreviewDialogContextMenuProps,
-) {
-  const { theme, dialog, onLeave, enableLeaveDialog } = props;
-  // const menuItems: MenuItem[] = [];
-  //
-  // if (enableLeaveDialog) {
-  //   menuItems.push({
-  //     title: 'Leave Dialog',
-  //     action: () => {
-  //       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-  //       if (onLeave) onLeave(dialog);
-  //     },
-  //   });
-  // }
-  //
-  const menuItems: MenuItem[] = enableLeaveDialog
-    ? [
-        {
-          title: 'Leave Dialog',
-          action: () => {
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-            if (onLeave) onLeave(dialog);
-          },
-        },
-      ]
-    : [];
-  //
-
-  return (
-    <div className="dialog-context-menu">
-      <ContextMenu
-        widgetToRender={
-          <EditDots
-            color={theme ? theme.secondaryText() : 'var(--secondary-text)'}
-          />
-        }
-        items={menuItems}
-      />
-    </div>
-  );
-}

package/src/Presentation/Views/PreviewDialog/PreviewDialogViewModel.ts

@@ -1,42 +0,0 @@
-import BaseViewModel, {
-  FunctionTypeViewModelToVoid,
-} from '../../../CommonTypes/BaseViewModel';
-import { DialogEntity } from '../../../Domain/entity/DialogEntity';
-
-export default class PreviewDialogViewModel extends BaseViewModel<DialogEntity> {
-  get item(): BaseViewModel<DialogEntity> {
-    return this;
-  }
-
-  protected _isSelected: boolean;
-
-  get isSelected(): boolean {
-    return this._isSelected;
-  }
-
-  set isSelected(value: boolean) {
-    this._isSelected = value;
-  }
-
-  constructor(
-    itemClickActionHandler:
-      | FunctionTypeViewModelToVoid<DialogEntity>
-      | undefined,
-    itemTouchActionHandler:
-      | FunctionTypeViewModelToVoid<DialogEntity>
-      | undefined,
-    // id: number,
-    // name: string,
-    dialogEntity: DialogEntity,
-  ) {
-    // super(id, name, dialogEntity);
-    super(dialogEntity);
-    this.itemClickActionHandler = itemClickActionHandler;
-    this.itemTouchActionHandler = itemTouchActionHandler;
-    this._isSelected = false;
-  }
-
-  public itemClickActionHandler?: FunctionTypeViewModelToVoid<DialogEntity>;
-
-  public itemTouchActionHandler?: FunctionTypeViewModelToVoid<DialogEntity>;
-}

package/src/Presentation/Views/YesNoQuestion/YesNoQuestion.scss

@@ -1,11 +0,0 @@
-.ynq-dialog-actions {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-  align-items: flex-end;
-  justify-content: flex-end;
-  align-self: stretch;
-  flex-shrink: 0;
-  position: relative;
-}
-

package/src/Presentation/Views/YesNoQuestion/YesNoQuestion.tsx

@@ -1,48 +0,0 @@
-import './YesNoQuestion.scss';
-import React from 'react';
-import { FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
-import { Button } from '../../ui-components';
-
-type YesNoQuestionProps = {
-  messageText?: string;
-  onClickYesAction?: FunctionTypeVoidToVoid;
-  OnTouchYesAction?: FunctionTypeVoidToVoid;
-  onTouchNoAction?: FunctionTypeVoidToVoid;
-  yesActionCaption?: string;
-  noActionCaption?: string;
-};
-// eslint-disable-next-line react/function-component-definition
-const YesNoQuestionComponent: React.FC<YesNoQuestionProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  messageText,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onClickYesAction,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  OnTouchYesAction,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  onTouchNoAction,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  yesActionCaption = undefined,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  noActionCaption = undefined,
-}: YesNoQuestionProps) => {
-  return (
-    <div>
-      <div className="ynq-dialog-actions">
-        <Button title={noActionCaption || 'No'} variant="outlined" />
-        <Button
-          title={yesActionCaption || 'Yes'}
-          variant="danger"
-          onClick={() => {
-            if (onClickYesAction) {
-              onClickYesAction();
-            }
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default YesNoQuestionComponent;

package/src/Presentation/components/Button.js

@@ -1,5 +0,0 @@
-export default function List({ onClick, title, }) {
-    return (
-        <button style={{ height: 24 }} onClick={onClick}>{title}</button>
-    );
-}

package/src/Presentation/components/Navbar.tsx

@@ -1,45 +0,0 @@
-import { Link } from 'react-router-dom';
-
-export default function Navbar() {
-  return (
-    <nav className="navbar navbar-expand-lg bg-light">
-      <div className="container-fluid">
-        <button
-          className="navbar-toggler"
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#navbarNav"
-          aria-controls="navbarNav"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-        >
-          <span className="navbar-toggler-icon" />
-        </button>
-        <div className="collapse navbar-collapse" id="navbarNav">
-          <ul className="navbar-nav">
-            <li className="nav-item">
-              <Link className="nav-link" to="/">
-                Login
-              </Link>
-            </li>
-            <li className="nav-item">
-              <Link className="nav-link" to="/test-stage">
-                Markup test stage
-              </Link>
-            </li>
-            <li className="nav-item">
-              <Link className="nav-link" to="/desktop-test-mock">
-                Test Mock Sync Dialogs Use Case
-              </Link>
-            </li>
-            <li className="nav-item">
-              <Link className="nav-link" to="/desktop-test">
-                Desktop
-              </Link>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </nav>
-  );
-}

package/src/Presentation/components/TextInput.js

@@ -1,10 +0,0 @@
-import React from 'react';
-export default function TextInput(rest) {
-    return (
-        <input
-
-            style={{ height: 28, padding: 10, marginBottom: 10 }}
-            {...rest}
-        />
-    );
-}

package/src/Presentation/components/UI/Buttons/ActiveButton/ActiveButton.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { FunctionTypeVoidToVoid } from '../../../../../CommonTypes/BaseViewModel';
-
-type ActiveButtonContainerProps = {
-  content: React.ReactNode;
-  touchAction?: FunctionTypeVoidToVoid;
-  clickAction?: FunctionTypeVoidToVoid;
-};
-// eslint-disable-next-line react/function-component-definition
-const ActiveButton: React.FC<ActiveButtonContainerProps> = ({
-  content,
-  touchAction,
-  clickAction,
-}: ActiveButtonContainerProps) => {
-  return (
-    <div
-      className="active-svg-container"
-      onTouchStart={() => {
-        // eslint-disable-next-line no-unused-expressions
-        touchAction && typeof touchAction === 'function'
-          ? touchAction()
-          : () => {
-              console.log('touched');
-            };
-      }}
-      onClick={() => {
-        // eslint-disable-next-line no-unused-expressions
-        clickAction && typeof clickAction === 'function'
-          ? clickAction()
-          : () => {
-              console.log('clicked');
-            };
-      }}
-    >
-      {content}
-    </div>
-  );
-};
-
-export default ActiveButton;

package/src/Presentation/components/UI/Buttons/MainBoundedButton/MainBoundedButton.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import './MainBoundedButton.scss';
-import { FunctionTypeVoidToVoid } from '../../../../../CommonTypes/BaseViewModel';
-
-type MainBoundedButtonProps = {
-  title: string;
-  styleBox: React.CSSProperties;
-  clickHandler?: FunctionTypeVoidToVoid;
-  touchHandler?: FunctionTypeVoidToVoid;
-};
-// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-const MainBoundedButton: React.FC<MainBoundedButtonProps> = ({
-  title,
-  styleBox,
-  clickHandler,
-  touchHandler,
-}) => {
-  return (
-    <button
-      type="button"
-      style={styleBox}
-      onClick={clickHandler}
-      onTouchStart={touchHandler}
-    >
-      {title}
-    </button>
-  );
-};
-
-export default MainBoundedButton;

package/src/Presentation/components/UI/Buttons/MainButton/MainButton.css

@@ -1,103 +0,0 @@
-.main-button {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 16px 8px 16px;
-
-  height: 32px;
-
-  background: var(--main-elements);
-  border-radius: 4px;
-
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 16px;
-  letter-spacing: 0.4px;
-
-  color: var(--main-background);
-
-  border: none;
-  outline: none;
-}
-
-.danger-button {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 16px 8px 16px;
-
-  height: 32px;
-
-  background: var(--error);
-  border-radius: 4px;
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 16px;
-  letter-spacing: 0.4px;
-  color: var(--main-background);
-
-  border: none;
-  outline: none;
-}
-
-.secondary-button{
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 16px 8px 16px;
-  height: 32px;
-
-  background-color: var(--main-background);
-  border: 1px solid var(--secondary-elements);
-  border-radius: 4px;
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 16px;
-  letter-spacing: 0.4px;
-  color: var(--secondary-elements);
-}
-
-.main-disabled-button{
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 16px 8px 16px;
-  height: 32px;
-  background: var(--disabled-elements);
-  border-radius: 4px;
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 16px;
-  letter-spacing: 0.4px;
-  color: var(--secondary-text);
-
-  border: none;
-  outline: none;
-}

package/src/Presentation/components/UI/Buttons/MainButton/MainButton.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import './MainButton.css';
-import { FunctionTypeVoidToVoid } from '../../../../../CommonTypes/BaseViewModel';
-
-export const TypeButton = {
-  default: 'default',
-  danger: 'danger',
-  outlined: 'outlined',
-  text: 'text',
-  defaultDisabled: 'defaultDisabled',
-} as const;
-
-// 'enum like' "TS type" creation
-export type ButtonArcheType = keyof typeof TypeButton;
-type MainButtonProps = {
-  title: string;
-  typeButton?: ButtonArcheType;
-  disabled?: boolean;
-  // loading?: boolean;
-  styleBox?: React.CSSProperties;
-  clickHandler?: FunctionTypeVoidToVoid;
-  touchHandler?: FunctionTypeVoidToVoid;
-};
-
-// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-const MainButton: React.FC<MainButtonProps> = ({
-  title,
-  typeButton = TypeButton.default,
-  disabled = false,
-  // loading = false,
-  styleBox,
-  clickHandler,
-  touchHandler,
-}) => {
-  const StyleButton: Record<string, string> = {};
-
-  StyleButton[TypeButton.default] = 'main-button';
-  StyleButton[TypeButton.defaultDisabled] = 'main-disabled-button';
-  StyleButton[TypeButton.danger] = 'danger-button';
-  StyleButton[TypeButton.outlined] = 'secondary-button';
-  StyleButton[TypeButton.text] = 'secondary-button';
-
-  const mainClassName = [StyleButton[typeButton]].join(' ');
-
-  return (
-    <button
-      className={
-        disabled ? StyleButton[TypeButton.defaultDisabled] : mainClassName
-      }
-      type="button"
-      style={styleBox}
-      onClick={clickHandler}
-      onTouchStart={touchHandler}
-      disabled={disabled}
-      // loading={loading}
-    >
-      {title}
-    </button>
-  );
-};
-
-export default MainButton;

package/src/Presentation/components/UI/Elements/SwitchButton/SwitchButton.scss

@@ -1,61 +0,0 @@
-$background-color-off: var(--disabled-elements);
-$background-color-on: var(--main-elements);
-/* The switch - the box around the slider */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 20px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {display:none;}
-
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 12px;
-  width: 12px;
-  left: 4px;
-  bottom: 4px;
-  right: 4px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-}
-
-input:checked + .slider {
-  background-color: #2196F3;
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px #2196F3;
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(12px);
-  -ms-transform: translateX(12px);
-  transform: translateX(12px);
-}
-
-/* Rounded sliders */
-.slider.round {
-  border-radius: 12px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}

package/src/Presentation/components/UI/Elements/SwitchButton/SwitchButton.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import './SwitchButton.scss';
-import { FunctionTypeVoidToVoid } from '../../../../../CommonTypes/BaseViewModel';
-
-type SwitchButtonProps = {
-  disabled?: boolean;
-  styleBox?: React.CSSProperties;
-  clickHandler?: FunctionTypeVoidToVoid;
-  touchHandler?: FunctionTypeVoidToVoid;
-};
-
-// eslint-disable-next-line react/function-component-definition
-const SwitchButton: React.FC<SwitchButtonProps> = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  disabled = false,
-  styleBox,
-  clickHandler,
-  touchHandler,
-}) => {
-  return (
-    <div
-      style={styleBox}
-      onClick={() => {
-        console.log('click on SwitchButton');
-        if (typeof clickHandler === 'function') {
-          clickHandler();
-        }
-      }}
-      onTouchStart={() => {
-        if (touchHandler) touchHandler();
-      }}
-    >
-      <label className="switch">
-        <input type="checkbox" />
-        <span className="slider round" />
-      </label>
-    </div>
-  );
-};
-
-/*
-() => {
-              console.log('clicked theme');
-              document.documentElement.setAttribute('data-theme', 'dark');
-              changeThemeActions();
-            }
- */
-export default SwitchButton;