quickblox-react-ui-kit 0.1.0

package/src/Presentation/components/layouts/Desktop/DesktopLayoutForMockModels.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import './DesktopLayout.scss';
+
+type LayoutItems = {
+  dialogsView: React.ReactNode;
+  dialogMessagesView: React.ReactNode;
+  dialogInfoView: React.ReactNode;
+};
+function DesktopLayoutForMockModels({
+  dialogsView,
+  dialogMessagesView,
+  dialogInfoView,
+}: LayoutItems) {
+  return (
+    <div className="desktop-layout-main-container">
+      <div className="desktop-layout-main-container__item-left">
+        {dialogsView}
+      </div>
+      <div className="desktop-layout-main-container__item-center">
+        {dialogMessagesView}
+      </div>
+      {dialogInfoView && (
+        <div className="desktop-layout-main-container__item-right">
+          {dialogInfoView}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DesktopLayoutForMockModels;

package/src/Presentation/components/layouts/LayoutCommonTypes.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export type ContainerProps = {
+  children?: React.ReactNode;
+  gapBetweenItem?: string;
+  maxWidth?: string;
+};

package/src/Presentation/components/layouts/TestStage/LoginView/Login.scss

@@ -0,0 +1,71 @@
+a { text-decoration: none; }
+
+h1 { font-size: 1em; }
+
+h1, p {
+  margin-bottom: 10px;
+}
+
+strong {
+  font-weight: bold;
+}
+
+.uppercase { text-transform: uppercase; }
+
+/* ---------- LOGIN ---------- */
+
+#login {
+  margin: 50px auto;
+  width: 300px;
+}
+
+form fieldset input[type="text"],
+input[type="password"] {
+  appearance: none;
+  background: #e5e5e5;
+  border: none;
+  border-radius: 3px;
+  color: #5a5656;
+  font-family: inherit;
+  font-size: 14px;
+  height: 50px;
+  outline: none;
+  padding: 0px 10px;
+  width: 280px;
+  border: 1px solid #008dde;
+  margin: 1px;
+}
+
+form fieldset button[type="submit"] {
+  appearance: none;
+  background-color: #008dde;
+  border: none;
+  border-radius: 3px;
+  color: #f4f4f4;
+  cursor: pointer;
+  font-family: inherit;
+  height: 50px;
+  text-transform: uppercase;
+  width: 280px;
+}
+
+form fieldset a {
+  color: #5a5656;
+  font-size: 10px;
+}
+
+form fieldset a:hover { text-decoration: underline; }
+
+.btn-round {
+  background: #5a5656;
+  border-radius: 50%;
+  color: #f4f4f4;
+  display: block;
+  font-size: 12px;
+  height: 50px;
+  line-height: 50px;
+  margin: 30px 125px;
+  text-align: center;
+  text-transform: uppercase;
+  width: 50px;
+}

package/src/Presentation/components/layouts/TestStage/LoginView/Login.tsx

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import './Login.scss';
+import { InitParams } from '../../../providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
+import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import { LoginData } from '../../../../../Data/source/remote/RemoteDataSource';
+
+export type FunctionTypeLoginDataToVoid = (data: LoginData) => void;
+
+type LoginProps = {
+  loginHandler?: FunctionTypeLoginDataToVoid;
+};
+// eslint-disable-next-line react/function-component-definition
+const Login: React.FC<LoginProps> = ({ loginHandler }: LoginProps) => {
+  const currentContext = useQbDataContext();
+  const [UserName, setUsername] = useState(
+    currentContext.InitParams.loginData?.userName || 'tester',
+  );
+  const [Password, setPassword] = useState('quickblox');
+
+  // const [term, setTerm] = useState('');
+
+  const submitForm = (event: React.FormEvent<HTMLFormElement>) => {
+    // Preventing the page from reloading
+    event.preventDefault();
+
+    // Do something
+    // alert(username);
+    console.log('submit actions perform');
+
+    const data: LoginData = {
+      userName: UserName,
+      password: Password,
+    };
+
+    console.log('data: ', data);
+
+    if (loginHandler) {
+      //
+      const oldData: InitParams = currentContext.InitParams;
+      const newData: InitParams = { ...oldData, loginData: data };
+
+      currentContext.updateQBInitParams(newData);
+      //
+      loginHandler(data);
+    }
+  };
+
+  return (
+    // <div>
+    //   <div>Login data:</div>
+    //   <div>user: anruaav</div>
+    //   <div>password: quickblox</div>
+    //   <button
+    //     onClick={() => {
+    //       console.log('ok');
+    //       const data = {
+    //         userName: 'anruaav',
+    //         password: 'anruaav',
+    //       };
+    //
+    //       if (loginHandler) {
+    //         loginHandler(data);
+    //       }
+    //     }}
+    //     type="button"
+    //   >
+    //     login
+    //   </button>
+    // </div>
+    <div id="login">
+      <h1>Please login.</h1>
+
+      <form onSubmit={submitForm}>
+        <fieldset>
+          <p>
+            <input
+              type="text"
+              required
+              placeholder="Username"
+              value={UserName}
+              onChange={(event) => setUsername(event.target.value)}
+            />
+          </p>
+
+          <p>
+            <input
+              type="password"
+              required
+              placeholder="Password"
+              value={Password}
+              onChange={(event) => setPassword(event.target.value)}
+            />
+          </p>
+
+          <button type="submit">Submit</button>
+        </fieldset>
+      </form>
+    </div>
+    // <div className="container">
+    //   <form onSubmit={submitForm}>
+    //     <input
+    //       value={term}
+    //       onChange={(e) => setTerm(e.target.value)}
+    //       type="text"
+    //       placeholder="Enter a term"
+    //       className="input"
+    //     />
+    //     <button type="submit" className="btn">
+    //       Submit
+    //     </button>
+    //   </form>
+    // </div>
+  );
+};
+
+export default Login;

package/src/Presentation/components/layouts/TestStage/TestStageMarkup.scss

@@ -0,0 +1,24 @@
+$gap-width: 20px;
+$column-count: 4;
+$gap-count: $column-count - 1;
+
+$content-gap-width: 5px;
+
+.container-test-stage{
+  border: 10px solid #6c38cc;
+  display: flex;
+  flex-wrap: wrap;
+  gap: $gap-width;
+  &__item{
+    //border: 1px solid #6c38cc;
+    text-align: center;
+    padding: calc($gap-width / 2);
+    flex: 0 1 calc(100% / $column-count - $gap-width * $gap-count / $column-count);
+  }
+  &--content-wrapper{
+    //border: 10px solid #6c38cc;
+    display: flex;
+    flex-wrap: wrap;
+    gap: $content-gap-width;
+  }
+}