quickblox-react-ui-kit 0.1.0

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

@@ -0,0 +1,32 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,700&display=swap');
+////font-family: 'Ubuntu', sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
+////font-family: 'Roboto', sans-serif;
+/*
+@font-face {
+  font-family: "Roboto-Regular";
+  src: url("../fonts/Roboto-Regular.eot");
+  src: local("☺"), url("../fonts/Roboto-Regular.woff") format("woff"),
+  url("../fonts/Roboto-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto-Medium";
+  src: url("../fonts/Roboto-Medium.eot");
+  src: local("☺"), url("../fonts/Roboto-Medium.woff") format("woff"),
+  url("../fonts/Roboto-Medium.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Roboto-Bold";
+  src: url("../fonts/Roboto-Bold.eot");
+  src: local("☺"), url("../fonts/Roboto-Bold.woff") format("woff"),
+  url("../fonts/Roboto-Bold.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+*/

package/src/Presentation/assets/styles/_reset-styles.scss

@@ -0,0 +1,435 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0-modified | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* make sure to set some focus styles for accessibility */
+:focus {
+  outline: 0;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+input[type=search] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  resize: vertical;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+  max-width: 100%;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+
+[hidden] {
+  display: none;
+}
+
+/**
+ * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
+ *    `em` units.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-size: 100%; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -ms-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+  outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/**
+ * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improve image quality when scaled in IE 7.
+ */
+
+img {
+  border: 0; /* 1 */
+  -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/**
+ * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+
+figure {
+  margin: 0;
+}
+
+/**
+ * Correct margin displayed oddly in IE 6/7.
+ */
+
+form {
+  margin: 0;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct color not being inherited in IE 6/7/8/9.
+ * 2. Correct text not wrapping in Firefox 3.
+ * 3. Correct alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0;
+  white-space: normal; /* 2 */
+  *margin-left: -7px; /* 3 */
+}
+
+/**
+ * 1. Correct font size not being inherited in all browsers.
+ * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *    and Chrome.
+ * 3. Improve appearance and consistency in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+  font-size: 100%; /* 1 */
+  margin: 0; /* 2 */
+  vertical-align: baseline; /* 3 */
+  *vertical-align: middle; /* 3 */
+}
+
+/**
+ * Address Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+  line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+  *overflow: visible;  /* 4 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to content-box in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ * 3. Remove excess padding in IE 7.
+ *    Known issue: excess padding remains in IE 6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+  *height: 13px; /* 3 */
+  *width: 13px; /* 3 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 3+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+  overflow: auto; /* 1 */
+  vertical-align: top; /* 2 */
+}
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+html,
+button,
+input,
+select,
+textarea {
+  color: #222;
+}
+
+
+::-moz-selection {
+  background: #b3d4fc;
+  text-shadow: none;
+}
+
+::selection {
+  background: #b3d4fc;
+  text-shadow: none;
+}
+
+img {
+  vertical-align: middle;
+}
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+textarea {
+  resize: vertical;
+}
+
+.chromeframe {
+  margin: 0.2em 0;
+  background: #ccc;
+  color: #000;
+  padding: 0.2em 0;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+*, *:before, *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+:focus, :active {
+  outline: none;
+}
+
+a:focus, a:active {
+  outline: none;
+}
+
+nav, footer, header, aside {
+  display: block;
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
+  font-size: 100%;
+  line-height: 1;
+  font-size: 14px;
+  -ms-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+input, button, textarea {
+  font-family: inherit;
+}
+
+input::-ms-clear {
+  display: none;
+}
+
+button {
+  cursor: pointer;
+}
+
+button::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+a, a:visited {
+  text-decoration: none;
+}
+
+ul li {
+  list-style: none;
+}
+
+img {
+  vertical-align: top;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: 400;
+}

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

@@ -0,0 +1,56 @@
+$qb-light-primary: #3978FC;
+$qb-light-color-background: #FFFFFF;
+$qb-light-color-divider: #E7EFFF;
+$qb-light-color-font: #0B121B;
+
+$qb-dark-primary: #202F3E;
+$qb-dark-color-background: #414E5B;
+$qb-dark-color-divider: #FFFFFF;
+$qb-dark-color-font: #3978FC;
+
+$background-overlay-light: rgba(19, 29, 40, .80);
+$background-overlay-dark: rgba(144, 151, 159, .80);
+$primary-50: #E7EFFF;
+$primary-100: #C4D7FE;
+$primary-200: #9CBCFE;
+$primary-300: #74A1FD;
+$primary-400: #578CFC;
+$primary-500: #3978FC;
+$primary-600: #3370FC;
+$primary-700: #2C65FB;
+$primary-800: #245BFB;
+$primary-900: #1748FA;
+$primary-a-100: #FFFFFF;
+$primary-a-200: #F7F9FF;
+$primary-a-400: #C4CFFF;
+$primary-a-700: #ABBAFF;
+
+$secondary-50: #E4E6E8;
+$secondary-100: #BCC1C5;
+$secondary-200: #90979F;
+$secondary-300: #636D78;
+$secondary-400: #414E5B;
+$secondary-500: #202F3E;
+$secondary-600: #1C2A38;
+$secondary-700: #182330;
+$secondary-800: #131D28;
+$secondary-900: #0B121B;
+$secondary-a-100: #74A1FD;
+$secondary-a-200: #3978FC;
+$secondary-a-400: #245BFB;
+$secondary-a-700: #0050DC;
+
+$system-green-100: #C8F1D6;
+$system-green-200: #A4E7BB;
+$system-green-300: #80DDA0;
+$system-green-400: #64D68B;
+$system-green-500: #49CF77;
+
+$error-100: #FFC4C1;
+$error-200: #FF9D98;
+$error-300: #FF766E;
+$error-400: #FF584F;
+$error-500: #FF3B30;
+
+$information: #FDB0FF;
+$highlight: #FFFDC1;

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

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

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

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

package/src/Presentation/components/Button.js

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

package/src/Presentation/components/Navbar.tsx

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

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

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

@@ -0,0 +1,13 @@
+import DefaultTheme from './DefaultTheme'
+
+
+export default class CustomTheme extends DefaultTheme {
+  // eslint-disable-next-line class-methods-use-this
+  divider = (): string => 'var(--divider)';
+
+  // eslint-disable-next-line class-methods-use-this
+  mainText = (): string => '#FFFFFF';
+
+  // eslint-disable-next-line class-methods-use-this
+  fontFamily = (): string => 'Roboto';
+}