pierre/GeneIT
1
0
Fork 0
Code Issues Pull Requests 6 Packages Projects Releases Wiki Activity

WIP vite migration

Browse Source
This commit is contained in:
Pierre HUBERT 2023-12-12 19:37:41 +01:00
parent cba850251f
commit 34efa48c3e
15 changed files with 729 additions and 16603 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
geneit_app/.env
View File

@ -1 +1 @@
REACT_APP_BACKEND=http://localhost:8000 VITE_APP_BACKEND=http://localhost:8000

2
geneit_app/.env.production
View File

@ -1 +1 @@
REACT_APP_BACKEND=https://geneit-backend.communiquons.org VITE_APP_BACKEND=https://geneit-backend.communiquons.org

12
geneit_app/public/index.html → geneit_app/index.html
View File

@ -2,25 +2,25 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="/logo192.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
@ -39,5 +39,7 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
<script type="module" src="/src/index.tsx"></script>
</body> </body>
</html> </html>

17236
geneit_app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
geneit_app/package.json
View File

@ -2,6 +2,7 @@
"name": "geneit_app", "name": "geneit_app",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"type": "module",
"dependencies": { "dependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@emotion/react": "^11.11.0", "@emotion/react": "^11.11.0",
@ -18,9 +19,9 @@
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2", "@types/jest": "^27.5.2",
"@types/node": "^16.18.34",
"@types/react": "^18.2.8", "@types/react": "^18.2.8",
"@types/react-dom": "^18.2.4", "@types/react-dom": "^18.2.4",
"@vitejs/plugin-react": "^4.2.1",
"date-and-time": "^3.0.1", "date-and-time": "^3.0.1",
"email-validator": "^2.0.4", "email-validator": "^2.0.4",
"family-chart": "^0.0.0-beta-1", "family-chart": "^0.0.0-beta-1",
@ -30,17 +31,17 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-easy-crop": "^5.0.0", "react-easy-crop": "^5.0.0",
"react-router-dom": "^6.11.2", "react-router-dom": "^6.11.2",
"react-scripts": "^5.0.1",
"react-zoom-pan-pinch": "^3.1.0", "react-zoom-pan-pinch": "^3.1.0",
"svg2pdf.js": "^2.2.2", "svg2pdf.js": "^2.2.3",
"typescript": "^4.9.5", "typescript": "^4.9.5",
"vite": "^5.0.8",
"vite-tsconfig-paths": "^4.2.2",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "vite",
"build": "react-scripts build", "build": "tsc && vite build",
"test": "react-scripts test", "preview": "vite preview"
"eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [

0
geneit_app/src/widgets/complex_family_tree/family_chart.d.ts → geneit_app/src/@types/family_chart.d.ts vendored
View File

2
geneit_app/src/api/ApiClient.ts
View File

@ -16,7 +16,7 @@ export class APIClient {
* Get backend URL * Get backend URL
*/ */
static backendURL(): string { static backendURL(): string {
const URL = process.env.REACT_APP_BACKEND ?? ""; const URL = import.meta.env.VITE_APP_BACKEND ?? "";
if (URL.length === 0) throw new Error("Backend URL undefined!"); if (URL.length === 0) throw new Error("Backend URL undefined!");
return URL; return URL;
} }

1
geneit_app/src/react-app-env.d.ts vendored
View File

@ -1 +0,0 @@
/// <reference types="react-scripts" />

7
geneit_app/src/routes/family/FamilyMemberTreeRoute.tsx
View File

@ -26,7 +26,6 @@ import { useFamily } from "../../widgets/BaseFamilyRoute";
import { BasicFamilyTree } from "../../widgets/BasicFamilyTree"; import { BasicFamilyTree } from "../../widgets/BasicFamilyTree";
import { MemberItem } from "../../widgets/MemberItem"; import { MemberItem } from "../../widgets/MemberItem";
import { RouterLink } from "../../widgets/RouterLink"; import { RouterLink } from "../../widgets/RouterLink";
import { ComplexFamilyTree } from "../../widgets/complex_family_tree/ComplexFamilyTree";
import { SimpleFamilyTree } from "../../widgets/simple_family_tree/SimpleFamilyTree"; import { SimpleFamilyTree } from "../../widgets/simple_family_tree/SimpleFamilyTree";
enum CurrTab { enum CurrTab {
@ -149,7 +148,7 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
> >
<Tab tabIndex={CurrTab.BasicTree} label="Basique" /> <Tab tabIndex={CurrTab.BasicTree} label="Basique" />
<Tab tabIndex={CurrTab.SimpleTree} label="Simple" /> <Tab tabIndex={CurrTab.SimpleTree} label="Simple" />
<Tab tabIndex={CurrTab.AdvancedTree} label="Avancé" /> {/*<Tab tabIndex={CurrTab.AdvancedTree} label="Avancé" />*/}
</Tabs> </Tabs>
</div> </div>
@ -160,11 +159,11 @@ export function FamilyMemberTreeRoute(): React.ReactElement {
) : currTab === CurrTab.SimpleTree ? ( ) : currTab === CurrTab.SimpleTree ? (
<SimpleFamilyTree tree={tree!} depth={currDepth} /> <SimpleFamilyTree tree={tree!} depth={currDepth} />
) : ( ) : (
<ComplexFamilyTree <>unimplemented</> /*<ComplexFamilyTree
tree={tree!} tree={tree!}
isUp={currMode === TreeMode.Ascending} isUp={currMode === TreeMode.Ascending}
depth={currDepth} depth={currDepth}
/> />*/
)} )}
</Paper> </Paper>
</div> </div>

4
geneit_app/src/utils/debug_utils.ts
View File

@ -1,3 +1,5 @@
export function isDebug(): boolean { export function isDebug(): boolean {
return !process.env.NODE_ENV || process.env.NODE_ENV === "development"; return (
!import.meta.env.NODE_ENV || import.meta.env.NODE_ENV === "development"
);
} }

12
geneit_app/src/widgets/complex_family_tree/ComplexFamilyTree.tsx
View File

@ -2,7 +2,7 @@ import { mdiXml } from "@mdi/js";
import Icon from "@mdi/react"; import Icon from "@mdi/react";
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf"; import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
import { IconButton, Tooltip } from "@mui/material"; import { IconButton, Tooltip } from "@mui/material";
import f3, { f3Data } from "family-chart"; import "family-chart";
import { jsPDF } from "jspdf"; import { jsPDF } from "jspdf";
import React from "react"; import React from "react";
import "svg2pdf.js"; import "svg2pdf.js";
@ -24,7 +24,7 @@ export function ComplexFamilyTree(p: {
depth: number; depth: number;
}): React.ReactElement { }): React.ReactElement {
const darkTheme = useDarkTheme(); const darkTheme = useDarkTheme();
console.log(f3);
const applyTree = (container: HTMLDivElement) => { const applyTree = (container: HTMLDivElement) => {
if (!container) return; if (!container) return;
@ -207,10 +207,10 @@ function treeToF3Data(
node: FamilyTreeNode, node: FamilyTreeNode,
isUp: boolean, isUp: boolean,
depth: number depth: number
): f3Data[] { ): f3.f3Data[] {
const availableMembers = getAvailableMembers(node, depth); const availableMembers = getAvailableMembers(node, depth);
const list: f3Data[] = []; const list: f3.f3Data[] = [];
if (isUp) treeToF3DataUpRecurse(node, list, availableMembers); if (isUp) treeToF3DataUpRecurse(node, list, availableMembers);
else treeToF3DataDownRecurse(node, list, availableMembers); else treeToF3DataDownRecurse(node, list, availableMembers);
return list; return list;
@ -232,7 +232,7 @@ function memberData(m: Member, c?: Couple): f3.f3DataData {
function treeToF3DataUpRecurse( function treeToF3DataUpRecurse(
node: FamilyTreeNode, node: FamilyTreeNode,
array: f3Data[], array: f3.f3Data[],
availableMembers: Set<number>, availableMembers: Set<number>,
child?: number, child?: number,
spouses?: number[] spouses?: number[]
@ -274,7 +274,7 @@ function treeToF3DataUpRecurse(
function treeToF3DataDownRecurse( function treeToF3DataDownRecurse(
node: FamilyTreeNode, node: FamilyTreeNode,
array: f3Data[], array: f3.f3Data[],
availableMembers: Set<number> availableMembers: Set<number>
) { ) {
if (!availableMembers.has(node.member.id)) return; if (!availableMembers.has(node.member.id)) return;

4
geneit_app/src/widgets/simple_family_tree/SimpleFamilyTree.tsx
View File

@ -13,6 +13,7 @@ import { downloadBlob } from "../../utils/files_utils";
import { getTextWidth } from "../../utils/render_utils"; import { getTextWidth } from "../../utils/render_utils";
import "./simpletree.css"; import "./simpletree.css";
import "./Roboto-normal"; import "./Roboto-normal";
import "svg2pdf.js";
const FACE_WIDTH = 60; const FACE_WIDTH = 60;
const FACE_HEIGHT = 70; const FACE_HEIGHT = 70;
@ -92,7 +93,8 @@ function buildSimpleTreeNode(
): SimpleTreeNode { ): SimpleTreeNode {
if (depth === 0) throw new Error("Too much recursion reached!"); if (depth === 0) throw new Error("Too much recursion reached!");
const lastCouple = tree.couples?.[tree.couples?.length - 1 ?? 0]; const lastCoupleId = tree.couples?.length ?? 1;
const lastCouple = tree.couples?.[lastCoupleId - 1];
// Preprocess children // Preprocess children
let childrenToProcess = tree.down; let childrenToProcess = tree.down;

13
geneit_app/tsconfig.json
View File

@ -1,11 +1,8 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "ESNext",
"lib": [ "lib": ["dom", "dom.iterable", "esnext"],
"dom", "types": ["vite/client"],
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
@ -20,7 +17,5 @@
"noEmit": true, "noEmit": true,
"jsx": "react-jsx" "jsx": "react-jsx"
}, },
"include": [ "include": ["src"]
"src"
]
} }

1
geneit_app/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

21
geneit_app/vite.config.ts Normal file
View File

@ -0,0 +1,21 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";
import { resolve } from "path";
export default defineConfig({
// depending on your application, base can also be "/"
base: "/",
plugins: [react(), viteTsconfigPaths()],
server: {
// this ensures that the browser opens upon server start
open: true,
// this sets a default port to 3000
port: 3000,
},
resolve: {
alias: {
"family-chart": resolve(__dirname, "src"),
},
},
});