quickblox-react-ui-kit 0.1.1 → 0.1.2

package/src/Presentation/assets/styles/_theme_dark.scss

@@ -1,33 +0,0 @@
-@import "theme_colors_scheme";
-// https://sass-lang.com/documentation/breaking-changes/css-vars
-
-html[data-theme="dark"]{
-  --primary: #{$primary-500};
-  --color-background: #{$secondary-900};
-  --color-background-modal: #{$secondary-200};
-  --color-background-overlay: #{$secondary-900};
-  --color-divider: #{$secondary-400};
-  --color-font: #{$primary-a-100};
-  --color-icon: #{$primary-500};
-
-
-  --color-background-info: #{$primary-500};
-  --tertiary-elements: #{$background-overlay-dark};
-  --main-elements: #{$primary-300};
-  --secondary-elements: #{$primary-a-100};
-  --input-elements: #{$secondary-200};
-  --disabled-elements: #{$secondary-300};
-  --field-border: #{$secondary-200};
-  --main-text: #{$primary-a-100};
-  --secondary-text: #{$secondary-200};
-  --caption: #{$secondary-100};
-  --main-background: #{$secondary-500};
-  --secondary-background: #{$secondary-800};
-  --incoming-background: #{$secondary-400};
-  --outgoing-background: #{$primary-500};
-  --dropdown-background: #{$secondary-400};
-  --chat-input: #{$secondary-800};
-  --divider: #{$secondary-400};
-  --error: #{$error-300};
-  --hightlight: #{$highlight};
-}

package/src/Presentation/assets/styles/_theme_light.scss

@@ -1,33 +0,0 @@
-@import "theme_colors_scheme";
-
-:root{
-  --primary: #{$primary-500};
-  --color-background: #{$primary-a-100};
-  --color-background-modal: #{$primary-100};
-  --color-background-overlay: #{$secondary-900};
-  --color-divider: #{$primary-50};
-  --color-font: #{$secondary-900};
-  --color-icon: #{$primary-500};
-
-  --color-background-info:#{$primary-100};
-  --tertiary-elements: #{$secondary-300};
-  --main-elements: #{$primary-500};
-  --secondary-elements: #{$secondary-500};
-  --input-elements: #{$secondary-500};
-  --disabled-elements: #{$secondary-100};
-  --field-border: #{$secondary-200};
-  --main-text: #{$secondary-900};
-  --secondary-text: #{$secondary-300};
-  --caption: #{$secondary-200};
-  --main-background: #{$primary-a-100};
-  --secondary-background: #{$primary-a-100}; // #{$primary-50};
-  --secondary-background-modal: #{$background-overlay-light};
-  --incoming-background: #{$secondary-50};
-  --outgoing-background: #{$primary-50};
-  --dropdown-background: #{$primary-a-100};
-  --chat-input: #{$primary-a-200};
-  --divider: #{$primary-50};
-  --error: #{$error-500};
-  --hightlight: #{$highlight};
-
-}

package/src/Presentation/assets/styles/_variables.scss

@@ -1,2 +0,0 @@
-@import "theme_light";
-@import "theme_dark";

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 '../../../../Views/Base/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 '../../../../Views/Base/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.scss

@@ -1,127 +0,0 @@
-.main-button {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 16px;
-
-  //width: 63px;
-  height: 32px;
-
-  /* Light UiKitTheme/Main elements */
-
-  background: var(--main-elements);
-  border-radius: 4px;
-
-  /* Inside auto layout */
-
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-
-  //
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 16px;
-  /* identical to box height, or 114% */
-
-  letter-spacing: 0.4px;
-
-  /* Light UiKitTheme/System */
-  color: var(--main-background);
-}
-
-.danger-button {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 16px;
-
-  //width: 76px;
-  height: 32px;
-
-  /* Light UiKitTheme/Error */
-  background: var(--error);
-  border-radius: 4px;
-  /* Inside auto layout */
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-
-  /* Button/Default */
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 16px;
-  /* identical to box height, or 114% */
-  letter-spacing: 0.4px;
-  /* Light UiKitTheme/System */
-  color: var(--main-background);
-}
-
-.secondary-button{
-  /* Button */
-  box-sizing: border-box;
-  /* Auto layout */
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 16px;
-  //width: 76px;
-  height: 32px;
-
-  /* Light UiKitTheme/Secondary elements */
-  background-color: var(--main-background);
-  border: 1px solid var(--secondary-elements);
-  border-radius: 4px;
-  /* Inside auto layout */
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-  //
-  /* Button/Default */
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 16px;
-  /* identical to box height, or 114% */
-  letter-spacing: 0.4px;
-  /* Light UiKitTheme/Secondary elements */
-  color: var(--secondary-elements);
-
-}
-
-.main-disabled-button{
-  /* Button */
-  /* Auto layout */
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 16px;
-  //width: 76px;
-  height: 32px;
-  /* Light UiKitTheme/Disabled elements */
-  background: var(--disabled-elements);
-  border-radius: 4px;
-  /* Inside auto layout */
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-  /* Button/Default */
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 16px;
-  /* identical to box height, or 114% */
-  letter-spacing: 0.4px;
-  /* Light UiKitTheme/Secondary text */
-  color: var(--secondary-text);
-}

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

@@ -1,62 +0,0 @@
-import React from 'react';
-import './MainButton.scss';
-import { FunctionTypeVoidToVoid } from '../../../../Views/Base/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/Dialogs/CreateDialog/CreateDialog.scss

@@ -1,45 +0,0 @@
-$create-dialog-container-width: 380px;
-$create-dialog-container-height: 312px;
-
-.create-dialog-container {
-  min-height: $create-dialog-container-height;
-  max-height: $create-dialog-container-height;
-  height: $create-dialog-container-height;
-  //border: 1px solid green;
-  &--btn-wrapper{
-    height: 64px;
-    width: 332px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 16px;
-    cursor: pointer;
-    border-radius: 4px;
-
-    border: 1px solid var(--tertiary-elements);
-
-    &__text{
-      min-height: 24px;
-      // margin: 16px 16px 16px 16px;
-      font-family: 'Roboto';
-      font-style: normal;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 24px;
-      letter-spacing: 0.15px;
-      flex: 2 2 268px;
-      letter-spacing: 0.15px;
-
-      //border: 1px solid orange;
-    }
-    &__icon{
-      min-height: 24px;
-      margin-left: 10px;
-      flex: 1 1 24px;
-
-     // border: 1px solid red;
-    }
-  }
-}

package/src/Presentation/components/UI/Dialogs/CreateDialog/CreateDialog.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import './CreateDialog.scss';
-import ColumnContainer from '../../../containers/ColumnContainer/ColumnContainer';
-import Chat from '../../svgs/Icons/Contents/Chat';
-import GroupChat from '../../svgs/Icons/Contents/GroupChat';
-import PublicChannel from '../../svgs/Icons/Contents/PublicChannel';
-import { FunctionTypeVoidToVoid } from '../../../../Views/Base/BaseViewModel';
-import ActiveButton from '../../Buttons/ActiveButton/ActiveButton';
-
-type CreateDialogProps = {
-  createPrivateDialogClickHandler: FunctionTypeVoidToVoid;
-  createPrivateDialogTouchHandler: FunctionTypeVoidToVoid;
-  createGroupDialogClickHandler: FunctionTypeVoidToVoid;
-  createGroupDialogTouchHandler: FunctionTypeVoidToVoid;
-  createPublicDialogClickHandler: FunctionTypeVoidToVoid;
-  createPublicDialogTouchHandler: FunctionTypeVoidToVoid;
-};
-// eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-const CreateDialog: React.FC<CreateDialogProps> = ({
-  createPrivateDialogClickHandler,
-  createPrivateDialogTouchHandler,
-  createGroupDialogClickHandler,
-  createGroupDialogTouchHandler,
-  createPublicDialogClickHandler,
-  createPublicDialogTouchHandler,
-}) => {
-  return (
-    <ColumnContainer gapBetweenItem="8px">
-      <ActiveButton
-        content={
-          <div className="create-dialog-container--btn-wrapper">
-            <div className="create-dialog-container--btn-wrapper__icon">
-              <Chat width="24" height="24" applyZoom />
-            </div>
-            <div className="create-dialog-container--btn-wrapper__text">
-              Private
-            </div>
-          </div>
-        }
-        clickAction={createPrivateDialogClickHandler}
-        touchAction={createPrivateDialogTouchHandler}
-      />
-
-      <ActiveButton
-        content={
-          <div className="create-dialog-container--btn-wrapper">
-            <div className="create-dialog-container--btn-wrapper__icon">
-              <GroupChat width="32" height="32" applyZoom />
-            </div>
-            <div className="create-dialog-container--btn-wrapper__text">
-              Group
-            </div>
-          </div>
-        }
-        clickAction={createGroupDialogClickHandler}
-        touchAction={createGroupDialogTouchHandler}
-      />
-
-      <ActiveButton
-        content={
-          <div className="create-dialog-container--btn-wrapper">
-            <div className="create-dialog-container--btn-wrapper__icon">
-              <PublicChannel width="32" height="32" applyZoom />
-            </div>
-            <div className="create-dialog-container--btn-wrapper__text">
-              Public
-            </div>
-          </div>
-        }
-        clickAction={createPublicDialogClickHandler}
-        touchAction={createPublicDialogTouchHandler}
-      />
-    </ColumnContainer>
-  );
-};
-
-export default CreateDialog;