Skip to content

Commit 8c20a35

Browse files
henrycheahenrychea
authored
Add-full-flow-react-example (#5)
* feat: add react full flow example * fix: remove deprecated polyfill
1 parent f156259 commit 8c20a35

23 files changed

+1320
-1
lines changed

‎sdk-integration-examples/web-sdk/react/face-scan/src/main.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import "./index.css";
77
import { JSX as LocalJSX } from "@idverse/idverse-sdk-browser/ui";
88
import {
99
defineCustomElements,
10-
applyPolyfills,
1110
} from "@idverse/idverse-sdk-browser/ui/loader";
1211
import { HTMLAttributes } from "react";
1312

‎sdk-integration-examples/web-sdk/react/flow-example/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
node_modules
5+
/.pnp
6+
.pnp.js
7+
*.zip
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
/dist
14+
15+
# misc
16+
.DS_Store
17+
.env.local
18+
.env.development.local
19+
.env.test.local
20+
.env.production.local
21+
22+
npm-debug.log*
23+
yarn-debug.log*
24+
yarn-error.log*

‎sdk-integration-examples/web-sdk/react/flow-example/README.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Getting Started
2+
3+
## Available Scripts
4+
5+
In the project directory, you can run:
6+
7+
### `npm run dev`
8+
9+
Runs the app in the development mode.\
10+
Open [http://localhost:5173](http://localhost:5173) to view it in your browser.
11+
12+
The page will reload when you make changes.\
13+
You may also see any lint errors in the console.
14+
15+
### `npm run build`
16+
17+
Builds the app for production to the `dist` folder.\

‎sdk-integration-examples/web-sdk/react/flow-example/eslint.config.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎sdk-integration-examples/web-sdk/react/flow-example/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>IDVerse - Document and Liveness 5 Flow Example</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎sdk-integration-examples/web-sdk/react/flow-example/package.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "doc5-liveness5-flow-example",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"host": "vite --host",
9+
"build": "tsc -b && vite build",
10+
"lint": "eslint .",
11+
"preview": "vite preview"
12+
},
13+
"dependencies": {
14+
"@idverse/idverse-sdk-browser": "file:../../../idverse-sdk-browser",
15+
"@idverse/idverse-sdk-ui": "file:../../../idverse-sdk-browser/ui",
16+
"react": "^18.3.1",
17+
"react-dom": "^18.3.1"
18+
},
19+
"devDependencies": {
20+
"@eslint/js": "^9.11.1",
21+
"@types/react": "^18.3.10",
22+
"@types/react-dom": "^18.3.0",
23+
"@vitejs/plugin-react": "^4.3.2",
24+
"@vitejs/plugin-basic-ssl": "^1.2.0",
25+
"eslint": "^9.11.1",
26+
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
27+
"eslint-plugin-react-refresh": "^0.4.12",
28+
"globals": "^15.9.0",
29+
"typescript": "^5.5.3",
30+
"typescript-eslint": "^8.7.0",
31+
"vite": "^5.4.8"
32+
}
33+
}

‎sdk-integration-examples/web-sdk/react/flow-example/public/favicon.ico

3.78 KB
Binary file not shown.

‎sdk-integration-examples/web-sdk/react/flow-example/public/images/backID.svg

+305
Loading

‎sdk-integration-examples/web-sdk/react/flow-example/public/images/frontID.svg

+34
Loading

‎sdk-integration-examples/web-sdk/react/flow-example/public/images/liveness.svg

+10
Loading

‎sdk-integration-examples/web-sdk/react/flow-example/public/images/loading.svg

+6
Loading

‎sdk-integration-examples/web-sdk/react/flow-example/public/logo.svg

+19
Loading

‎sdk-integration-examples/web-sdk/react/flow-example/src/App.css

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
.App {
2+
background: #051c2c;
3+
min-height: 100vh;
4+
width: 100%;
5+
color: #fff;
6+
display: flex;
7+
justify-content: center;
8+
align-items: self-start;
9+
}
10+
11+
.container {
12+
width: 100%;
13+
max-width: 420px;
14+
padding: 20px;
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
18+
gap: 20px;
19+
}
20+
21+
.header {
22+
display: flex;
23+
flex-direction: column;
24+
align-items: center;
25+
min-height: 140px;
26+
padding: 20px 0;
27+
}
28+
29+
.header img {
30+
padding-top: 20px;
31+
}
32+
33+
.header h1 {
34+
font-size: 31px;
35+
font-weight: 600;
36+
padding: 15px 0 5px;
37+
}
38+
39+
.header p {
40+
font-size: 16px;
41+
font-weight: 500;
42+
line-height: 26px;
43+
}
44+
45+
.actions {
46+
width: 100%;
47+
display: flex;
48+
flex-direction: column;
49+
align-items: center;
50+
justify-items: center;
51+
gap: 20px;
52+
padding: 20px 0;
53+
overflow-y: auto;
54+
}
55+
56+
.action-item {
57+
font-size: 18px;
58+
cursor: pointer;
59+
text-align: center;
60+
font-weight: 500;
61+
user-select: none;
62+
background-color: rgba(207, 210, 211, 0.1);
63+
padding: 15px;
64+
border-radius: 19px;
65+
min-height: 130px;
66+
max-width: 290px;
67+
width: 100%;
68+
display: flex;
69+
flex-direction: column;
70+
justify-content: center;
71+
align-items: center;
72+
transition: background-color 0.2s ease;
73+
}
74+
75+
.action-item:hover {
76+
background-color: #34cccc;
77+
}
78+
79+
.action-item input[type="file"] {
80+
display: none;
81+
}
82+
83+
.icon {
84+
padding: 15px 0;
85+
display: flex;
86+
justify-content: center;
87+
align-items: center;
88+
width: 100%;
89+
}
90+
91+
.icon img {
92+
display: block;
93+
margin: 0 auto;
94+
}
95+
96+
.input-group {
97+
width: 100%;
98+
max-width: 290px;
99+
display: flex;
100+
flex-direction: column;
101+
gap: 15px;
102+
padding: 20px 0;
103+
}
104+
105+
.input-field {
106+
width: 100%;
107+
background-color: rgba(207, 210, 211, 0.1);
108+
border-radius: 8px;
109+
padding: 12px 15px;
110+
}
111+
112+
.input-field label {
113+
display: block;
114+
font-size: 14px;
115+
color: #fff;
116+
padding-bottom: 5px;
117+
font-weight: 500;
118+
}
119+
120+
.input-field input {
121+
width: 100%;
122+
background: transparent;
123+
border: none;
124+
color: #fff;
125+
font-size: 16px;
126+
font-family: inherit;
127+
padding: 0;
128+
outline: none;
129+
}
130+
131+
.input-field input::placeholder {
132+
color: rgba(255, 255, 255, 0.5);
133+
}
134+
135+
.my-button {
136+
background-color: #34cccc;
137+
color: #fff;
138+
padding: 10px 20px;
139+
border-radius: 5px;
140+
cursor: pointer;
141+
border: none;
142+
transition: opacity 0.2s ease;
143+
}
144+
145+
.my-button:hover {
146+
opacity: 0.9;
147+
}

0 commit comments

Comments
 (0)