@pplancq/react-template 2.10.1 → 2.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.env.mock +1 -1
- package/.prettierignore +8 -0
- package/.stylelintignore +4 -0
- package/CHANGELOG.md +21 -0
- package/_README.md +2 -2
- package/bin/template-install.js +8 -8
- package/commitlint.config.mjs +1 -1
- package/eslint.config.mjs +12 -9
- package/lint-staged.config.mjs +5 -5
- package/mise.toml +1 -1
- package/mocks/handlers/userHandlers.ts +1 -3
- package/mrc.playwright.config.ts +14 -14
- package/package.json +13 -15
- package/playwright.config.ts +21 -21
- package/prettier.config.mjs +1 -1
- package/rsbuild.config.ts +23 -23
- package/scripts/lint.js +4 -4
- package/scripts/playwright.js +19 -19
- package/scripts/removeDemo.cjs +115 -89
- package/scripts/test.js +6 -6
- package/src/app/App.tsx +5 -7
- package/src/app/providers/Providers/Providers.tsx +5 -7
- package/src/app/providers/QueryClientProvider/QueryClientProvider.tsx +6 -8
- package/src/demo/application/use-cases/GetArchitecturePrinciplesUseCase.ts +1 -3
- package/src/demo/application/use-cases/GetDemoUsersUseCase.ts +1 -3
- package/src/demo/infrastructure/repositories/StaticArchitecturePrincipleRepository.ts +1 -3
- package/src/demo/ui/components/DemoFooter/DemoFooter.tsx +8 -10
- package/src/demo/ui/components/DemoHeader/DemoHeader.tsx +15 -17
- package/src/demo/ui/components/Logo/Logo.tsx +3 -3
- package/src/demo/ui/layouts/DemoLayout/DemoLayout.tsx +5 -7
- package/src/demo/ui/layouts/MainTemplate/MainTemplate.tsx +10 -12
- package/src/demo/ui/pages/DemoHome/DemoHome.tsx +96 -98
- package/stylelint.config.mjs +1 -1
- package/vitest.config.mts +22 -22
- package/vitest.setup.ts +5 -5
|
@@ -3,115 +3,113 @@ import { NavLink } from "@Demo/ui/components/NavLink/NavLink";
|
|
|
3
3
|
import { demoAppRoutes } from "@Demo/ui/routing/demoAppRoutes";
|
|
4
4
|
import classes from "./DemoHome.module.scss";
|
|
5
5
|
|
|
6
|
-
export const DemoHome = () =>
|
|
7
|
-
|
|
8
|
-
<div className={classes.
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
</div>
|
|
6
|
+
export const DemoHome = () => (
|
|
7
|
+
<div className={classes.container}>
|
|
8
|
+
<div className={classes.bigTitleStyle}>
|
|
9
|
+
Welcome to Your React Starter Kit <span>Clean Architecture</span>
|
|
10
|
+
</div>
|
|
12
11
|
|
|
13
|
-
|
|
12
|
+
<div className={classes.foo}>Vertical slices, shared kernel, and explicit composition.</div>
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
</div>
|
|
14
|
+
<div className={classes.paragraphContainer}>
|
|
15
|
+
<h1 className={classes.titleStyle}>Overview</h1>
|
|
16
|
+
<div className={classes.infoSection}>
|
|
17
|
+
<span className={classes.centredText}>
|
|
18
|
+
<p className={classes.paragraphStyle}>
|
|
19
|
+
This template now starts from a <span className={classes.highlight}>Clean Architecture</span> inspired
|
|
20
|
+
structure with a dedicated <span className={classes.boldText}>app</span> bootstrap layer, a{" "}
|
|
21
|
+
<span className={classes.boldText}>shared</span> common layer, and a{" "}
|
|
22
|
+
<span className={classes.boldText}>demo</span> bounded context.
|
|
23
|
+
</p>
|
|
24
|
+
<p className={classes.paragraphStyle}>
|
|
25
|
+
The goal is to help you start from explicit architecture choices while still keeping a runnable example
|
|
26
|
+
project that demonstrates routing, form handling, data fetching, and dependency injection.
|
|
27
|
+
</p>
|
|
28
|
+
</span>
|
|
31
29
|
</div>
|
|
32
|
-
|
|
30
|
+
</div>
|
|
31
|
+
<img src={image} alt="Template architecture overview" className={classes.imagePlace} />
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
</div>
|
|
33
|
+
<div className={classes.paragraphContainer}>
|
|
34
|
+
<h1 className={classes.titleStyle}>Folder Structure</h1>
|
|
35
|
+
<div className={classes.infoSection}>
|
|
36
|
+
<div className={classes.tableWrapper}>
|
|
37
|
+
<table>
|
|
38
|
+
<thead>
|
|
39
|
+
<tr>
|
|
40
|
+
<th>Folder</th>
|
|
41
|
+
<th>Description</th>
|
|
42
|
+
</tr>
|
|
43
|
+
</thead>
|
|
44
|
+
<tbody>
|
|
45
|
+
<tr>
|
|
46
|
+
<td>
|
|
47
|
+
<span className={classes.boldText}>app</span>
|
|
48
|
+
</td>
|
|
49
|
+
<td>Application bootstrap, routing, providers, config, and global assets.</td>
|
|
50
|
+
</tr>
|
|
51
|
+
<tr>
|
|
52
|
+
<td>
|
|
53
|
+
<span className={classes.boldText}>shared</span>
|
|
54
|
+
</td>
|
|
55
|
+
<td>Reusable common code with no demo-specific responsibility.</td>
|
|
56
|
+
</tr>
|
|
57
|
+
<tr>
|
|
58
|
+
<td>
|
|
59
|
+
<span className={classes.boldText}>demo</span>
|
|
60
|
+
</td>
|
|
61
|
+
<td>Example bounded context split into ui, application, domain, and infrastructure.</td>
|
|
62
|
+
</tr>
|
|
63
|
+
</tbody>
|
|
64
|
+
</table>
|
|
67
65
|
</div>
|
|
68
66
|
</div>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
</
|
|
67
|
+
</div>
|
|
68
|
+
<div className={classes.paragraphContainer}>
|
|
69
|
+
<h1 className={classes.titleStyle}>Pedagogical Demos</h1>
|
|
70
|
+
<div className={classes.infoSection}>
|
|
71
|
+
<p className={classes.paragraphStyle}>
|
|
72
|
+
Each page below demonstrates a different aspect of the template. The React Query example resolves its use case
|
|
73
|
+
through Inversify, the React Hook Form example stays focused on UI composition, and the dependency injection
|
|
74
|
+
example makes the layer boundaries explicit.
|
|
75
|
+
</p>
|
|
76
|
+
</div>
|
|
78
77
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
</div>
|
|
78
|
+
<div className={classes.infoSection}>
|
|
79
|
+
<p className={classes.paragraphStyle}>
|
|
80
|
+
<span className={classes.boldText}>React Query demo: </span>
|
|
81
|
+
fetches remote users through a repository and a use case.
|
|
82
|
+
</p>
|
|
83
|
+
<div className={classes.demoStyle}>
|
|
84
|
+
<NavLink to={demoAppRoutes.reactQuery} className={classes.a}>
|
|
85
|
+
Run demo
|
|
86
|
+
</NavLink>
|
|
89
87
|
</div>
|
|
88
|
+
</div>
|
|
90
89
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
</div>
|
|
90
|
+
<div className={classes.infoSection}>
|
|
91
|
+
<p className={classes.paragraphStyle}>
|
|
92
|
+
<span className={classes.boldText}>React Hook Form demo: </span>
|
|
93
|
+
shows a form-first UI example inside the new bounded context.
|
|
94
|
+
</p>
|
|
95
|
+
<div className={classes.demoStyle}>
|
|
96
|
+
<NavLink to={demoAppRoutes.reactHookForm} className={classes.a}>
|
|
97
|
+
Run demo
|
|
98
|
+
</NavLink>
|
|
101
99
|
</div>
|
|
100
|
+
</div>
|
|
102
101
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
</div>
|
|
102
|
+
<div className={classes.infoSection}>
|
|
103
|
+
<p className={classes.paragraphStyle}>
|
|
104
|
+
<span className={classes.boldText}>Dependency injection demo: </span>
|
|
105
|
+
explains how app, shared, and demo collaborate through explicit abstractions.
|
|
106
|
+
</p>
|
|
107
|
+
<div className={classes.demoStyle}>
|
|
108
|
+
<NavLink to={demoAppRoutes.dependencyInjection} className={classes.a}>
|
|
109
|
+
Run demo
|
|
110
|
+
</NavLink>
|
|
113
111
|
</div>
|
|
114
112
|
</div>
|
|
115
113
|
</div>
|
|
116
|
-
|
|
117
|
-
|
|
114
|
+
</div>
|
|
115
|
+
);
|
package/stylelint.config.mjs
CHANGED
package/vitest.config.mts
CHANGED
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
import react from
|
|
2
|
-
import { loadEnv } from
|
|
3
|
-
import svgr from
|
|
1
|
+
import react from "@vitejs/plugin-react";
|
|
2
|
+
import { loadEnv } from "vite";
|
|
3
|
+
import svgr from "vite-plugin-svgr";
|
|
4
4
|
// eslint-disable-next-line import/no-unresolved
|
|
5
|
-
import { defineConfig } from
|
|
5
|
+
import { defineConfig } from "vitest/config";
|
|
6
6
|
|
|
7
7
|
export default defineConfig(({ mode }) => {
|
|
8
|
-
const env = loadEnv(mode, process.cwd(),
|
|
8
|
+
const env = loadEnv(mode, process.cwd(), "");
|
|
9
9
|
|
|
10
10
|
return {
|
|
11
11
|
plugins: [react(), svgr()],
|
|
12
|
-
envPrefix: env.ENV_PREFIX ??
|
|
12
|
+
envPrefix: env.ENV_PREFIX ?? "FRONT_",
|
|
13
13
|
resolve: {
|
|
14
14
|
tsconfigPaths: true,
|
|
15
15
|
},
|
|
16
16
|
test: {
|
|
17
17
|
globals: true,
|
|
18
|
-
environment:
|
|
19
|
-
setupFiles:
|
|
18
|
+
environment: "jsdom",
|
|
19
|
+
setupFiles: "vitest.setup.ts",
|
|
20
20
|
clearMocks: true,
|
|
21
21
|
css: {
|
|
22
22
|
modules: {
|
|
23
|
-
classNameStrategy:
|
|
23
|
+
classNameStrategy: "non-scoped",
|
|
24
24
|
},
|
|
25
25
|
},
|
|
26
|
-
reporters: [
|
|
26
|
+
reporters: ["default", "junit", "vitest-sonar-reporter"],
|
|
27
27
|
outputFile: {
|
|
28
|
-
|
|
29
|
-
junit:
|
|
28
|
+
"vitest-sonar-reporter": "sonar-report.xml",
|
|
29
|
+
junit: "junit-report.xml",
|
|
30
30
|
},
|
|
31
|
-
include: [
|
|
31
|
+
include: ["tests/unit/**/*.(spec|test|steps).[jt]s?(x)"],
|
|
32
32
|
maxWorkers: env.CI ? 2 : undefined,
|
|
33
33
|
coverage: {
|
|
34
|
-
enabled: env.CI ===
|
|
35
|
-
reporter: [
|
|
36
|
-
provider:
|
|
34
|
+
enabled: env.CI === "true",
|
|
35
|
+
reporter: ["lcovonly", "html", "text", "text-summary"],
|
|
36
|
+
provider: "v8",
|
|
37
37
|
lines: 80,
|
|
38
38
|
functions: 75,
|
|
39
39
|
branches: 80,
|
|
40
40
|
statements: 80,
|
|
41
|
-
include: [
|
|
41
|
+
include: ["src/**/*.[jt]s?(x)"],
|
|
42
42
|
exclude: [
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
43
|
+
"src/**/*.d.[jt]s?(x)",
|
|
44
|
+
"src/utils/tests/**/*.[jt]s?(x)",
|
|
45
|
+
"src/**/*.types.[jt]s?(x)",
|
|
46
|
+
"src/**/index.[jt]s?(x)",
|
|
47
|
+
"src/**/*.stories.[jt]s?(x)",
|
|
48
48
|
],
|
|
49
49
|
},
|
|
50
50
|
},
|
package/vitest.setup.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
2
|
-
import
|
|
3
|
-
import { server } from
|
|
4
|
-
import { cleanup } from
|
|
5
|
-
import * as matchers from
|
|
2
|
+
import "@testing-library/jest-dom/vitest";
|
|
3
|
+
import { server } from "@Mocks/server";
|
|
4
|
+
import { cleanup } from "@testing-library/react";
|
|
5
|
+
import * as matchers from "vitest-axe/matchers";
|
|
6
6
|
|
|
7
7
|
expect.extend(matchers);
|
|
8
8
|
|
|
9
9
|
beforeAll(() => {
|
|
10
|
-
server.listen({ onUnhandledRequest:
|
|
10
|
+
server.listen({ onUnhandledRequest: "error" });
|
|
11
11
|
});
|
|
12
12
|
|
|
13
13
|
afterAll(() => {
|