quickblox-react-ui-kit 0.2.8 → 0.3.0-beta.1

package/src/Presentation/layouts/LayoutCommonTypes.ts

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

package/src/Presentation/layouts/TestStage/CompanyLogo/CompanyLogo.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+// eslint-disable-next-line react/function-component-definition
+const CompanyLogo: React.FC = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        width: '322px',
+        height: '42px',
+        border: '1px solid #333',
+      }}
+    >
+      <img
+        src="../../../assets/img/bee-img.png"
+        alt="Company Logo"
+        style={{ width: '100px', height: 'auto', marginRight: '10px' }}
+      />
+      <span style={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}>
+        Your Company Name
+      </span>
+    </div>
+  );
+};
+
+export default CompanyLogo;

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

@@ -0,0 +1,72 @@
+a { text-decoration: none; }
+
+h1 { font-size: 1em; }
+
+h1, p {
+  margin-bottom: 10px;
+}
+
+strong {
+  font-weight: bold;
+}
+
+.uppercase { text-transform: uppercase; }
+
+/* ---------- LOGIN ---------- */
+
+#login {
+  border: 3px solid #6c38cc;
+  margin: 50px auto;
+  width: 100%;
+}
+
+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: 100%;
+  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: 100%;
+}
+
+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/layouts/TestStage/LoginView/Login.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import './Login.scss';
+import { InitParams } from '../../../providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
+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 = useQbInitializedDataContext();
+  const [UserName, setUsername] = useState(
+    currentContext.InitParams.loginData?.login || '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 = {
+      login: 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 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/providers/ModalContextProvider/Modal.scss

@@ -0,0 +1,76 @@
+.modal-container-overlay{
+  position: fixed;
+  top: 0;
+  width: 100%;//inherit;
+  height: 100%;//inherit;
+  background: var(--secondary-background-modal);
+  //display: flex;
+  //align-items: center;
+  //justify-content: center;
+
+  &[aria-expanded='false']{
+    display: none;
+  }
+}
+
+.modal-container{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 380px;
+  min-height: 312px;
+  background-color: var(--main-background);
+  padding: 24px;
+  position: relative;
+  border-radius: 4px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  &__close{
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    cursor: pointer;
+
+    //font-weight: 500;
+    //font-size: 20px;
+    //font-style: normal;
+    //font-family: 'Roboto';
+
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+    /* identical to box height, or 120% */
+    letter-spacing: 0.0015em;
+    color: var(--secondary-elements);
+  }
+  &__subtitle{
+    margin-bottom: 24px;
+    //
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.0015em;
+    color: var(--main-text);
+
+    //border: 1px solid black;
+  }
+  &__content{
+    margin-bottom: 20px;
+    width: 100%;
+    //border: 1px solid brown;
+  }
+  &__footer{
+    //border: 1px solid black;
+  }
+}

package/src/Presentation/providers/ModalContextProvider/Modal.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import './Modal.scss';
+import Close from '../../components/UI/svgs/Icons/Navigation/Close';
+
+type ModalContextType = {
+  isOpen: boolean;
+  handleModal: (
+    show: boolean,
+    content: React.ReactNode,
+    headerText?: string,
+    withoutClose?: boolean,
+    haveModalFooter?: boolean,
+    haveModalContainerStyle?: React.CSSProperties,
+  ) => void;
+  modalContent: React.ReactNode;
+  modalHeader: string;
+  modalCloseTab: boolean;
+  haveModalFooter: boolean;
+  ModalContainerStyle: React.CSSProperties;
+};
+const initValue: ModalContextType = {
+  isOpen: false,
+  modalCloseTab: true,
+  haveModalFooter: true,
+  modalHeader: '',
+  modalContent: '',
+  handleModal: () => {
+    // console.log('empty function');
+  },
+  ModalContainerStyle: {},
+};
+
+export const ModalContext = React.createContext<ModalContextType>(initValue);
+
+function Modal() {
+  const {
+    isOpen,
+    handleModal,
+    modalContent,
+    modalHeader,
+    modalCloseTab,
+    haveModalFooter,
+    ModalContainerStyle,
+  } = React.useContext(ModalContext);
+
+  const onClickHandler = () => {
+    handleModal(false, '');
+  };
+  const questionSizeBox: React.CSSProperties = haveModalFooter
+    ? {
+        minHeight: '160px',
+        minWidth: '332px',
+        maxHeight: '160px',
+        maxWidth: '332px',
+        backgroundColor: 'var(--main-background)',
+      }
+    : ModalContainerStyle || {};
+
+  return (
+    <div className="modal-container-overlay" aria-expanded={isOpen}>
+      {isOpen ? (
+        <div style={questionSizeBox} className="modal-container">
+          {modalCloseTab && (
+            <div className="modal-container__close" onClick={onClickHandler}>
+              <Close width="24" height="24" color="var(--secondary-elements)" />
+            </div>
+          )}
+          <div
+            style={haveModalFooter ? { marginBottom: '30px' } : {}}
+            className="modal-container__subtitle"
+          >
+            {modalHeader}
+          </div>
+          <div className="modal-container__content">{modalContent}</div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+export default Modal;

package/src/Presentation/providers/ModalContextProvider/ModalContextProvider.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import useModal from './useModal';
+import Modal, { ModalContext } from './Modal';
+import { ProviderProps } from '../ProviderProps';
+
+const { Provider } = ModalContext;
+
+function ModalContextProvider({ children }: ProviderProps) {
+  console.log('call ModalContextProvider:');
+  const {
+    isOpen,
+    handleModal,
+    modalContent,
+    modalHeader,
+    modalCloseTab,
+    haveModalFooter,
+    ModalContainerStyle,
+  } = useModal();
+
+  return (
+    <Provider
+      value={{
+        isOpen,
+        handleModal,
+        modalContent,
+        modalHeader,
+        modalCloseTab,
+        haveModalFooter,
+        ModalContainerStyle,
+      }}
+    >
+      {children}
+      <Modal />
+    </Provider>
+  );
+}
+
+export default ModalContextProvider;

package/src/Presentation/providers/ModalContextProvider/useModal.ts

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+
+const useModal = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [modalContent, setModalContent] = React.useState<React.ReactNode>('');
+  const [modalHeader, setModalHeader] = React.useState<string>('');
+  const [modalCloseTab, setModalCloseTab] = React.useState<boolean>(true);
+  const [haveModalFooter, setHaveModalFooter] = React.useState<boolean>(true);
+  const [ModalContainerStyle, setModalContainerStyle] =
+    useState<React.CSSProperties>({});
+  const handleModal = (
+    show: boolean,
+    content: React.ReactNode,
+    headerText?: string,
+    withoutCloseTab?: boolean,
+    withoutFooter?: boolean,
+    haveModalContainerStyle?: React.CSSProperties,
+  ) => {
+    setIsOpen(show);
+    if (content) setModalContent(content);
+    if (headerText) setModalHeader(headerText);
+    setModalCloseTab(!withoutCloseTab);
+    setHaveModalFooter(withoutFooter || false);
+    if (haveModalContainerStyle)
+      setModalContainerStyle(haveModalContainerStyle);
+  };
+
+  return {
+    isOpen,
+    handleModal,
+    modalContent,
+    modalHeader,
+    modalCloseTab,
+    haveModalFooter,
+    ModalContainerStyle,
+  };
+};
+
+export default useModal;

package/src/Presentation/providers/ProviderProps.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export type ProviderProps = {
+  children?: React.ReactNode;
+};