Skip to content

Commit 022ec25

Browse files
Artem-K-KoltunovArtem-K-Koltunov
committed
react chat ui kit samples are updated for react kit v0.5.0 (react 19)
1 parent 99c4674 commit 022ec25

33 files changed

+23075
-102980
lines changed

‎samples/react-chat-ui-kit-demo-app/global.d.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
declare module "*.svg" {
2+
import React from "react";
3+
const content: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
4+
export default content;
5+
}
6+
7+
declare module "*.svg?react" {
8+
import React from "react";
9+
const content: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
10+
export default content;
11+
}
12+
13+
declare module "*.svg?url" {
14+
const content: string;
15+
export default content;
16+
}

‎samples/react-chat-ui-kit-demo-app/package-lock.json

Lines changed: 0 additions & 18758 deletions
This file was deleted.

‎samples/react-chat-ui-kit-demo-app/package.json

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,43 @@
11
{
22
"name": "react-chat",
3-
"version": "1.0.18",
3+
"version": "1.0.19",
44
"private": true,
55
"dependencies": {
66
"@emotion/react": "^11.11.0",
77
"@emotion/styled": "^11.11.0",
8-
"@types/node": "^16.18.28",
9-
"@types/react": "^18.2.6",
10-
"@types/react-dom": "^18.2.4",
8+
"@types/node": "^20.11.27",
9+
"@types/react": "^19.0.0",
10+
"@types/react-dom": "^19.0.0",
1111
"quickblox": "2.19.2",
12-
"quickblox-react-ui-kit": "^0.4.5",
13-
"react": "^17.0.0 || ^18.0.0",
14-
"react-dom": "^17.0.0 || ^18.0.0",
12+
"quickblox-react-ui-kit": "0.5.0",
13+
"react": "^19.0.0",
14+
"react-dom": "^19.0.0",
1515
"react-router-dom": "^6.4.3",
16-
"react-scripts": "5.0.1",
17-
"sass": "^1.84.0",
1816
"styled-components": "^5.3.11",
19-
"typescript": "^4.9.5",
17+
"typescript": "^5.3.3",
2018
"web-vitals": "^2.1.4"
2119
},
20+
"devDependencies": {
21+
"@babel/core": "^7.22.15",
22+
"@babel/preset-env": "^7.22.15",
23+
"@babel/preset-react": "^7.22.5",
24+
"@babel/preset-typescript": "^7.22.5",
25+
"@svgr/webpack": "^8.1.0",
26+
"babel-loader": "^9.1.3",
27+
"copy-webpack-plugin": "^12.0.2",
28+
"css-loader": "^6.11.0",
29+
"html-webpack-plugin": "^5.5.0",
30+
"sass": "^1.85.1",
31+
"sass-loader": "^16.0.5",
32+
"style-loader": "^3.3.3",
33+
"ts-loader": "^9.4.2",
34+
"webpack": "^5.88.2",
35+
"webpack-cli": "^5.1.4",
36+
"webpack-dev-server": "^4.15.1"
37+
},
2238
"scripts": {
23-
"start": "react-scripts start",
24-
"build": "react-scripts build",
25-
"test": "react-scripts test",
26-
"eject": "react-scripts eject"
39+
"start": "webpack serve --mode development",
40+
"build": "webpack --mode production"
2741
},
2842
"eslintConfig": {
2943
"extends": [
@@ -44,7 +58,7 @@
4458
]
4559
},
4660
"peerDependencies": {
47-
"react": "^17.0.0 || ^18.0.0",
48-
"react-dom": "^17.0.0 || ^18.0.0"
61+
"react": "^19.0.0",
62+
"react-dom": "^19.0.0"
4963
}
5064
}

‎samples/react-chat-ui-kit-demo-app/public/index.html

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,21 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="icon" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
1010
content="Web site created using create-react-app"
1111
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
12+
<link rel="apple-touch-icon" href="/logo192.png" />
13+
14+
<link rel="manifest" href="/manifest.json" />
2215

23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
2716
<title>React App</title>
2817
</head>
2918
<body>
3019
<noscript>You need to enable JavaScript to run this app.</noscript>
3120
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
4221
</body>
4322
</html>

‎samples/react-chat-ui-kit-demo-app/src/App.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
@import "styles/_theme_colors_scheme.scss";
2-
@import "styles/_variables.scss";
1+
@use "styles/_theme_colors_scheme.scss";
2+
@use "styles/_variables.scss";
33

44
.main-buttons-wrapper {
55
margin: 10px;

‎samples/react-chat-ui-kit-demo-app/src/App.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -128,14 +128,15 @@ function App() {
128128
.then( async resultUserSession => {
129129
await connectToChatServer(
130130
resultUserSession,
131-
currentUser.login)
131+
loginData.login)
132132
.then( async authData => {
133133
await qbUIKitContext.authorize(authData);
134-
qbUIKitContext.setSubscribeOnSessionExpiredListener(() => {
135-
console.timeLog('call OnSessionExpiredListener ... start')
136-
logoutUIKitHandler();
137-
console.log('OnSessionExpiredListener ... end');
138-
});
134+
// broken from v0.5.0-beta.13
135+
// qbUIKitContext.setSubscribeOnSessionExpiredListener(() => {
136+
// console.timeLog('call OnSessionExpiredListener ... start')
137+
// logoutUIKitHandler();
138+
// console.log('OnSessionExpiredListener ... end');
139+
// });
139140
setSDKInitialized(true);
140141
setUserAuthorized(true);
141142
document.documentElement.setAttribute('data-theme', theme);

‎samples/react-chat-ui-kit-demo-app/src/QBconfig.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// @ts-ignore
12
import {QBUIKitConfig} from "quickblox-react-ui-kit/dist/CommonTypes/CommonTypes";
23

34
export const QBConfig: QBUIKitConfig = {
@@ -125,11 +126,13 @@ export const QBConfig: QBUIKitConfig = {
125126
chatProtocol: {
126127
active: 2,
127128
},
129+
pingLocalhostTimeInterval: 0,
130+
chatReconnectionTimeInterval: 3,
128131
debug: true,
129132
enableForwarding: true,
130133
enableReplying: true,
131-
// regexUserName: '^(?=[a-zA-Z])[-a-zA-Z_ ]{3,49}(?<! )$',
132-
regexUserName: '',
134+
showPublicDialogsInList: false,
135+
allowPublicDialogCreation: false,
133136
endpoints: {
134137
api: 'api.quickblox.com',
135138
chat: 'chat.quickblox.com',

‎samples/react-chat-ui-kit-demo-app/src/layout/Auth/Auth.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import qbLogoGray from "../../assets/img/qblogo-grey.svg";
3-
import qbLogo from "../../assets/img/qb_logo.svg";
2+
import qbLogoGray from '../../assets/img/qblogo-grey.svg?url';
3+
import qbLogo from '../../assets/img/qb_logo.svg?url';
44
import {UserData} from '../../QBHeplers';
55
import packageJson from '../../../package.json';
66
import './Auth.scss';

‎samples/react-chat-ui-kit-demo-app/src/react-app-env.d.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎samples/react-chat-ui-kit-demo-app/src/styles/_theme_colors_scheme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ $qb-dark-color-divider: #FFFFFF;
99
$qb-dark-color-font: #3978FC;
1010

1111
$background-overlay-light: rgba(19, 29, 40, .80);
12-
$background-overlay-dark: rgba(144, 151, 159, .80);
12+
$background-overlay-dark: rgba(19, 29, 40, .80);
1313
$primary-50: #E7EFFF;
1414
$primary-100: #C4D7FE;
1515
$primary-200: #9CBCFE;

‎samples/react-chat-ui-kit-demo-app/src/styles/_theme_dark.scss

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
1-
@import "theme_colors_scheme";
1+
@use 'theme_colors_scheme' as *;
22
// https://sass-lang.com/documentation/breaking-changes/css-vars
33

4-
html[data-theme="dark"]{
4+
html[data-theme='dark'] {
55
--primary: #{$primary-500};
66
--color-background: #{$secondary-900};
7-
--color-background-modal: #{$secondary-200};
7+
--color-background-modal: #{$background-overlay-dark};
88
--color-background-overlay: #{$secondary-900};
99
--color-divider: #{$secondary-400};
1010
--color-font: #{$primary-a-100};
11-
--color-icon: #{$primary-500};
12-
11+
--color-icon: #{$primary-300};
12+
--color-media-icon: #{$primary-a-100};
13+
--color-default-hover: #{$secondary-700};
14+
--color-default-active: #{$secondary-900};
1315

1416
--color-background-info: #{$primary-500};
15-
--tertiary-elements: #{$background-overlay-dark};
17+
--color-border-active: #{$secondary-200};
18+
--tertiary-elements: #{$secondary-300};
1619
--main-elements: #{$primary-300};
1720
--secondary-elements: #{$primary-a-100};
1821
--input-elements: #{$secondary-200};
19-
--disabled-elements: #{$secondary-300};
22+
--disabled-elements: #{$secondary-100};
2023
--field-border: #{$secondary-200};
2124
--main-text: #{$primary-a-100};
2225
--secondary-text: #{$secondary-200};
@@ -26,8 +29,10 @@ html[data-theme="dark"]{
2629
--incoming-background: #{$secondary-400};
2730
--outgoing-background: #{$primary-500};
2831
--dropdown-background: #{$secondary-400};
29-
--chat-input: #{$secondary-800};
32+
--chat-input: #{$secondary-400};
3033
--divider: #{$secondary-400};
3134
--error: #{$error-300};
35+
--error-secondary: #{$error-100};
3236
--hightlight: #{$highlight};
37+
--system: #{$primary-a-100};
3338
}

‎samples/react-chat-ui-kit-demo-app/src/styles/_theme_light.scss

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
1-
@import "theme_colors_scheme";
1+
@use 'theme_colors_scheme' as *;
22

3-
:root{
3+
:root {
44
--primary: #{$primary-500};
55
--color-background: #{$primary-a-100};
6-
--color-background-modal: #{$primary-100};
6+
--color-background-modal: #{$background-overlay-light};
77
--color-background-overlay: #{$secondary-900};
88
--color-divider: #{$primary-50};
99
--color-font: #{$secondary-900};
1010
--color-icon: #{$primary-500};
11+
--color-media-icon: #{$primary-a-100};
12+
--color-default-hover: #{$primary-700};
13+
--color-default-active: #{$primary-900};
1114

12-
--color-background-info:#{$primary-100};
15+
--color-background-info: #{$primary-100};
16+
--color-border-active: #{$primary-200};
1317
--tertiary-elements: #{$secondary-300};
1418
--main-elements: #{$primary-500};
19+
--toast-color: #{$secondary-800};
1520
--secondary-elements: #{$secondary-500};
1621
--input-elements: #{$secondary-500};
1722
--disabled-elements: #{$secondary-100};
@@ -25,9 +30,10 @@
2530
--incoming-background: #{$secondary-50};
2631
--outgoing-background: #{$primary-50};
2732
--dropdown-background: #{$primary-a-100};
28-
--chat-input: #{$primary-a-200};
33+
--chat-input: #{$secondary-50};
2934
--divider: #{$primary-50};
3035
--error: #{$error-500};
36+
--error-secondary: #{$error-200};
3137
--hightlight: #{$highlight};
32-
38+
--system: #{$primary-a-100};
3339
}

‎samples/react-chat-ui-kit-demo-app/src/styles/_variables.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
@import "theme_light";
2-
@import "theme_dark";
1+
@use "theme_light";
2+
@use "theme_dark";

‎samples/react-chat-ui-kit-demo-app/tsconfig.json

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
{
22
"compilerOptions": {
3-
"target": "es5",
4-
"lib": [
5-
"dom",
6-
"dom.iterable",
7-
"esnext"
8-
],
3+
"target": "ES2022",
4+
"lib": ["es2022", "dom", "dom.iterable", "esnext"],
95
"allowJs": true,
106
"skipLibCheck": true,
117
"esModuleInterop": true,
@@ -14,14 +10,12 @@
1410
"forceConsistentCasingInFileNames": true,
1511
"noFallthroughCasesInSwitch": true,
1612
"module": "esnext",
17-
"moduleResolution": "node",
13+
"moduleResolution": "bundler",
1814
"resolveJsonModule": true,
1915
"isolatedModules": true,
2016
"noEmit": true,
2117
"jsx": "react-jsx"
2218
},
23-
"include": [
24-
"src",
25-
"node_modules/quickblox-react-ui-kit/global.d.ts",
26-
]
19+
"include": ["src", "global.d.ts"],
20+
"exclude": ["node_modules", "dist"]
2721
}

0 commit comments

Comments
 (0)