quickblox-react-ui-kit 0.1.0

package/src/Presentation/components/UI/ DefaultThemes/DefaultTheme.ts

@@ -0,0 +1,58 @@
+import Theme from '../../../assets/Theme';
+
+export default class DefaultTheme implements Theme {
+  // eslint-disable-next-line class-methods-use-this
+  divider = (): string => 'var(--divider)';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainText = (): string => 'var(--main-text)';
+
+  // eslint-disable-next-line class-methods-use-this
+  fontFamily = (): string => 'var(--font-family)';
+
+  //
+  // eslint-disable-next-line class-methods-use-this
+  caption = (): string => 'var(--caption)';
+
+  // eslint-disable-next-line class-methods-use-this
+  chatInput = (): string => 'var(--chat-input)';
+
+  // eslint-disable-next-line class-methods-use-this
+  disabledElements = (): string => 'var(--disabled-elements)';
+
+  // eslint-disable-next-line class-methods-use-this
+  dropdownBackground = (): string => 'var(--dropdown-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  error = (): string => 'var(--error)';
+
+  // eslint-disable-next-line class-methods-use-this
+  fieldBorder = (): string => 'var(--field-border)';
+
+  // eslint-disable-next-line class-methods-use-this
+  hightlight = (): string => 'var(--hightlight)';
+
+  // eslint-disable-next-line class-methods-use-this
+  incomingBackground = (): string => 'var(--incoming-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  inputElements = (): string => 'var(--input-elements)';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainBackground = (): string => 'var(--main-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainElements = (): string => 'var(--main-elements)';
+
+  // eslint-disable-next-line class-methods-use-this
+  outgoingBackground = (): string => 'var(--outgoing-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryBackground = (): string => 'var(--secondary-background)';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryElements = (): string => 'var(--secondary-elements)';
+
+  // eslint-disable-next-line class-methods-use-this
+  secondaryText = (): string => 'var(--secondary-text)';
+}

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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,127 @@
+.main-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 16px;
+
+  //width: 63px;
+  height: 32px;
+
+  /* Light Theme/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 Theme/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 Theme/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 Theme/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 Theme/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 Theme/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 Theme/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 Theme/Secondary text */
+  color: var(--secondary-text);
+}

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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,45 @@
+$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

@@ -0,0 +1,77 @@
+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;