Structure app

README.md

@@ -2,14 +2,12 @@
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-[A DDI catalog tool](https://making-sense-info.github.io/Addict/)
+A DDI catalog tool.
 
 ## Resources
 
 [DDI resources](./resources/README.md)
 
 ## Application
 
-[Source code](./app/README.md)
-
-[Source code](TODO)
+[Source code](./app/README.md)

app/.env

@@ -0,0 +1,7 @@
+VITE_GITHUB_REPO_OWNER=making-sense-info
+VITE_GITHUB_REPO_NAME=addict
+VITE_GITHUB_REPO_BRANCH=gh-pages
+
+VITE_GITHUB_TOKEN=
+
+VITE_PREFERED_LANGUAGE="fr-FR"

app/.prettierrc.json

@@ -7,5 +7,17 @@
     "quoteProps": "preserve",
     "trailingComma": "none",
     "bracketSpacing": true,
-    "arrowParens": "avoid"
+    "arrowParens": "avoid",
+    "plugins": ["@trivago/prettier-plugin-sort-imports"],
+    "importOrderSeparation": true,
+    "importOrder": [
+        "^@components/(.*)$",
+        "^@pages/(.*)$",
+        "^@store/(.*)$",
+        "^@api/(.*)$",
+        "^@utils/(.*)$",
+        "^@model/(.*)$",
+        "^@theme/(.*)$",
+        "^[./]"
+    ]
 }

app/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Making-Sense-Info
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app/package.json

@@ -2,7 +2,6 @@
     "name": "addict",
     "version": "0.1.0",
     "license": "MIT",
-    "homepage": "https://making-sense-info.github.io/Addict/",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -12,11 +11,19 @@
         "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx}\""
     },
     "dependencies": {
+        "@emotion/react": "^11.13.5",
+        "@emotion/styled": "^11.13.5",
+        "@mui/icons-material": "^6.1.10",
+        "@mui/material": "^6.1.10",
+        "@tanstack/react-query": "^5.62.2",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.0.0",
+        "zustand": "^5.0.2"
     },
     "devDependencies": {
         "@eslint/js": "^9.15.0",
+        "@trivago/prettier-plugin-sort-imports": "^4.3.0",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^4.3.4",
@@ -27,6 +34,7 @@
         "prettier": "^3.4.2",
         "typescript": "~5.6.2",
         "typescript-eslint": "^8.15.0",
-        "vite": "^6.0.1"
+        "vite": "^6.0.1",
+        "vite-tsconfig-paths": "^5.1.3"
     }
 }

app/src/App.tsx

@@ -1,11 +1,41 @@
-import addictLogo from "/addict.svg";
-
-const App = () => (
-    <div
-        style={{ textAlign: "center", display: "flex", justifyContent: "center", alignItems: "center" }}
-    >
-        <img src={addictLogo} className="logo" alt="Addict logo" />
-    </div>
-);
+import { ThemeProvider, CssBaseline } from "@mui/material";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider } from "react-router-dom";
+
+import { router } from "@pages/router";
+
+import { useTheme } from "@store/index";
+
+import { lightTheme, darkTheme } from "@theme/index";
+
+const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false, gcTime: 5 * 60 * 1000 } }
+});
+
+const App = () => {
+    const { theme } = useTheme();
+
+    return (
+        <QueryClientProvider client={queryClient}>
+            <ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}>
+                <CssBaseline />
+                <div
+                    style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        background:
+                            theme === "dark"
+                                ? darkTheme.palette.background.default
+                                : lightTheme.palette.background.default
+                    }}
+                >
+                    <RouterProvider router={router} />
+                </div>
+            </ThemeProvider>
+        </QueryClientProvider>
+    );
+};
 
 export default App;

app/src/Layout.tsx

@@ -0,0 +1,12 @@
+import { Outlet } from "react-router-dom";
+
+import { TopBar } from "@components/common";
+
+const Layout: React.FC = () => (
+    <>
+        <TopBar />
+        <Outlet />
+    </>
+);
+
+export default Layout;

app/src/api/file-content.ts

@@ -0,0 +1,11 @@
+import { getHeaders } from "@utils/index";
+
+export const getContent = (url: string) =>
+    fetch(url, { headers: getHeaders() })
+        .then(r => {
+            if (r.ok) {
+                return r.json();
+            }
+            throw new Error(`API returns: ${r.status}`);
+        })
+        .then(r => atob(r.content));

app/src/api/files.ts

@@ -0,0 +1,16 @@
+import { getHeaders } from "@utils/index";
+
+import { ResourceType } from "@model/index";
+
+export const getFiles = (url: string) =>
+    fetch(url, { headers: getHeaders() })
+        .then(r => {
+            if (r.ok) {
+                return r.json();
+            }
+            throw new Error(`API returns: ${r.status}`);
+        })
+        .then(r => r as ResourceType[])
+        .then(r =>
+            r.filter(({ type, name }) => type === "dir" || (type === "file" && name.endsWith(".xml")))
+        );

app/src/api/index.ts

@@ -0,0 +1,2 @@
+export * from "./file-content";
+export * from "./files";

app/src/components/common/Breadcrumb.tsx

@@ -0,0 +1,46 @@
+import HomeIcon from "@mui/icons-material/Home";
+import { Typography } from "@mui/material";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+
+type GitHubBreadcrumbsProps = {
+    path: string;
+    setPath: (p: string) => void;
+};
+
+function GitHubBreadcrumbs({ path, setPath }: GitHubBreadcrumbsProps) {
+    const items = path.split("/");
+    return (
+        <Breadcrumbs aria-label="breadcrumb">
+            {items.map((item, index) => (
+                <Typography
+                    component={"h6"}
+                    key={index}
+                    onClick={() => setPath(items.slice(0, index + 1).join("/"))}
+                    sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        textDecoration: "none",
+                        cursor: "pointer",
+                        fontSize: "1.1rem",
+                        marginTop: "0.2em",
+                        marginBottom: "0.2em",
+                        "&:hover": {
+                            textDecoration: "underline"
+                        }
+                    }}
+                >
+                    {item === "resources" ? (
+                        <>
+                            <HomeIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                            Home
+                        </>
+                    ) : (
+                        item
+                    )}
+                </Typography>
+            ))}
+        </Breadcrumbs>
+    );
+}
+
+export default GitHubBreadcrumbs;

app/src/components/common/Error.tsx

@@ -0,0 +1,11 @@
+import Typography from "@mui/material/Typography";
+
+type ErrorType = { message: string };
+
+const Error = ({ message }: ErrorType) => (
+    <Typography color="error" variant="body1">
+        {message}
+    </Typography>
+);
+
+export default Error;

app/src/components/common/Loader.tsx

@@ -0,0 +1,5 @@
+import CircularProgress from "@mui/material/CircularProgress";
+
+const Loader = () => <CircularProgress sx={{ marginTop: "3em" }} color="secondary" size={100} />;
+
+export default Loader;

app/src/components/common/ThemeSwitcher.tsx

@@ -0,0 +1,18 @@
+import Brightness4Icon from "@mui/icons-material/Brightness4";
+import Brightness7Icon from "@mui/icons-material/Brightness7";
+import { IconButton } from "@mui/material";
+
+type ThemeSwitcherProps = {
+    isDarkMode: boolean;
+    toggleTheme: () => void;
+};
+
+const ThemeSwitcher = ({ isDarkMode, toggleTheme }: ThemeSwitcherProps) => (
+    <div style={{ position: "absolute", top: 16, right: 16 }}>
+        <IconButton onClick={toggleTheme} color="inherit">
+            {isDarkMode ? <Brightness7Icon /> : <Brightness4Icon />}
+        </IconButton>
+    </div>
+);
+
+export default ThemeSwitcher;

app/src/components/common/TopBar.tsx

@@ -0,0 +1,56 @@
+import HomeIcon from "@mui/icons-material/Home";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Toolbar from "@mui/material/Toolbar";
+import { useNavigate } from "react-router-dom";
+
+import { useTheme } from "@store/index";
+
+import ThemeSwitcher from "./ThemeSwitcher";
+import addictLogo from "/addict.svg";
+
+function TopBar() {
+    const navigate = useNavigate();
+    const { theme, setTheme } = useTheme();
+
+    const updateTheme = () => {
+        setTheme(theme === "dark" ? "light" : "dark");
+    };
+
+    return (
+        <AppBar position="static" color="primary">
+            <Toolbar>
+                {/* Home Icon */}
+                <IconButton
+                    edge="start"
+                    color="inherit"
+                    aria-label="home"
+                    onClick={() => navigate("/")}
+                    sx={{ mr: 2 }}
+                >
+                    <HomeIcon />
+                </IconButton>
+
+                {/* Addict Logo */}
+                <Box
+                    sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flex: 1,
+                        height: "25px"
+                    }}
+                    onClick={() => navigate("/")}
+                >
+                    <img src={addictLogo} className="logo" alt="Addict logo" />
+                </Box>
+
+                {/* Theme Switcher */}
+                <ThemeSwitcher isDarkMode={theme === "dark"} toggleTheme={updateTheme} />
+            </Toolbar>
+        </AppBar>
+    );
+}
+
+export default TopBar;

app/src/components/common/index.ts

@@ -0,0 +1,4 @@
+export { default as Breadcrumb } from "./Breadcrumb";
+export { default as Error } from "./Error";
+export { default as Loader } from "./Loader";
+export { default as TopBar } from "./TopBar";