@ebubekirylmaz/link-test 1.0.0

package/project/server/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "json server for example project",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "joi": "^17.13.3",
+    "jsonwebtoken": "^9.0.2"
+  },
+  "devDependencies": {
+    "json-server": "^0.17.4"
+  }
+}

package/project/server/server.js

@@ -0,0 +1,127 @@
+const jsonServer = require("json-server");
+const cors = require("cors");
+
+const jwt = require("jsonwebtoken");
+const axios = require("axios");
+
+const {
+  mockPermission,
+  config,
+  JWT_SECRET,
+  OAUTH_CLIENT_SECRET,
+} = require("./oauthMock");
+
+const server = jsonServer.create();
+const router = jsonServer.router("mock.json");
+const middlewares = jsonServer.defaults();
+
+server.use(jsonServer.bodyParser);
+server.use(middlewares);
+server.use(cors());
+
+server.post("/oauth", async (req, res) => {
+  let { appId, projectId, code, refreshToken, redirectUri } = req.body;
+  if (!code && !refreshToken) {
+    return res.status(400).send("Missing OAuth Code and Refresh Token");
+  }
+  if (code && redirectUri) {
+    const params = new URLSearchParams();
+    params.append("client_id", config.project.oauth.clientId);
+    params.append("client_secret", OAUTH_CLIENT_SECRET);
+    params.append("code", code);
+    params.append("redirect_uri", redirectUri);
+    params.append("grant_type", "authorization_code");
+
+    const { data } = await axios.post(
+      config.project.oauth.tokenUrl,
+      params.toString(),
+      {
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      }
+    );
+
+    console.log(data);
+
+    const urlParams = new URLSearchParams(data);
+
+    if (urlParams.get("error")) {
+      throw new Error(urlParams.get("error_description"));
+    }
+
+    refreshToken = urlParams.get("access_token");
+  }
+
+  const { userId, role, organizationId } = mockPermission;
+
+  let accessToken;
+
+  if (projectId) {
+    accessToken = jwt.sign(
+      {
+        sub: userId,
+        iss: "nuc",
+        aud: projectId,
+        oid: organizationId,
+        aid: appId,
+        rls: role,
+      },
+      JWT_SECRET,
+      { expiresIn: "12h" }
+    );
+  } else {
+    accessToken = jwt.sign(
+      { sub: userId, iss: "nuc", aid: appId },
+      JWT_SECRET,
+      {
+        expiresIn: "12h",
+      }
+    );
+  }
+
+  res.status(200).json({ accessToken, refreshToken });
+});
+
+server.get("/emperors", (req, res) => {
+  res.jsonp(router.db.get("emperors").value());
+});
+
+server.patch("/projects/:id/settings", async (req, res) => {
+  const projectId = req.params.id;
+  const newSettings = req.body.settings;
+
+  const existingSettings = router.db
+    .get("settings")
+    .find({ projectId })
+    .value();
+
+  let updatedSettings;
+
+  if (existingSettings) {
+    updatedSettings = router.db
+      .get("settings")
+      .find({ projectId })
+      .assign({
+        projectId,
+        settings: {
+          ...existingSettings.settings,
+          ...newSettings,
+        },
+      })
+      .write();
+  } else {
+    updatedSettings = router.db
+      .get("settings")
+      .push({
+        projectId,
+        settings: { ...newSettings },
+      })
+      .write();
+  }
+  res.jsonp(updatedSettings);
+});
+
+server.use(router);
+
+server.listen(3000, () => {
+  console.log("JSON Server is running");
+});

package/project/src/Container.jsx

@@ -0,0 +1,7 @@
+import { Outlet } from "react-router-dom";
+
+function Container() {
+  return <Outlet />;
+}
+
+export default Container;

package/project/src/components/ActionButton.jsx

@@ -0,0 +1,18 @@
+import BoltIcon from "@mui/icons-material/Bolt";
+import { IconButton } from "@mui/material";
+
+const EnergyButton = () => (
+  <IconButton
+    sx={{
+      width: "3rem",
+      height: "3rem",
+      borderStyle: "solid",
+      borderWidth: "1px",
+      borderColor: (theme) => theme.palette.primary,
+    }}
+  >
+    <BoltIcon sx={{ width: "100%", height: "100%" }} color="primary" />
+  </IconButton>
+);
+
+export default EnergyButton;

package/project/src/hooks/useEmperor.jsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+import axios from "axios";
+import config from "../../config";
+
+const useEmperor = (id) => {
+  const [emperor, setEmperor] = useState([]);
+
+  useEffect(() => {
+    getEmperorById(id);
+  }, []);
+
+  const getEmperorById = async (id) => {
+    const response = await axios.get(`${config.api}/emperors/${id}`);
+    setEmperor(response.data);
+  };
+
+  return { emperor };
+};
+
+export default useEmperor;

package/project/src/http/index.js

@@ -0,0 +1,39 @@
+import axios from "axios";
+import config from "../../config";
+import { storage } from "@nucleoidjs/webstorage";
+
+const instance = axios.create({
+  baseURL: config.api,
+  headers: {
+    common: {
+      "Content-Type": "application/json",
+    },
+  },
+});
+
+instance.interceptors.request.use((request) => {
+  const accessToken = storage.get(config.name, "accessToken");
+  if (!accessToken) {
+    window.location.href =
+      config.base === "/" ? "/login" : `${config.base}/login`;
+  }
+  request.headers["Authorization"] = `Bearer ${accessToken}`;
+  request.headers["companyId"] = "1";
+  return request;
+});
+
+instance.interceptors.response.use((response) => {
+  const accessToken = storage.get(config.name, "accessToken");
+  if (!accessToken) {
+    window.location.href = "/login";
+  }
+  response.headers["Authorization"] = `Bearer ${accessToken}`;
+  response.headers["companyId"] = "1";
+  return response;
+});
+
+instance.interceptors.response.use((response) => {
+  return response;
+});
+
+export default instance;

package/project/src/main.jsx

@@ -0,0 +1,10 @@
+import { Platform } from "@nucleoidai/platform";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import routes from "../routes";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <Platform routes={routes} />
+  </React.StrictMode>
+);

package/project/src/pages/Battles.jsx

@@ -0,0 +1,16 @@
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+
+export default function Battles() {
+  return (
+    <Stack
+      spacing={1}
+      alignItems="center"
+      sx={{
+        border: "solid 0.5rem gray",
+        width: "100%",
+        height: "100vh",
+      }}
+    ></Stack>
+  );
+}

package/project/src/pages/Emperor.jsx

@@ -0,0 +1,50 @@
+import { Box, Stack, Typography } from "@mui/material";
+import React, { useEffect, useState } from "react";
+
+import { alpha } from "@mui/material";
+import useEmperor from "../hooks/useEmperor";
+import { useStorage } from "@nucleoidjs/webstorage";
+
+const Emperor = () => {
+  const [itemId] = useStorage("projectId", null);
+
+  const { emperor } = useEmperor(itemId);
+
+  return (
+    <>
+      <Box
+        sx={{
+          mt: 5,
+          mb: 5,
+          width: 1,
+          height: "100%",
+          borderRadius: 2,
+          bgcolor: (theme) => alpha(theme.palette.grey[500], 0.04),
+          border: (theme) => `dashed 1px ${theme.palette.divider}`,
+        }}
+      >
+        <Stack
+          direction={"column"}
+          alignItems={"center"}
+          justifyContent={"center"}
+          p={5}
+        >
+          <Box
+            component={"img"}
+            src={emperor.portrait}
+            sx={{ width: "10rem", borderWidth: 2, borderRadius: "2rem" }}
+          />
+          <Typography variant="h2">{emperor.name}</Typography>
+          <Typography variant="subtitle1">Reign: {emperor.reign}</Typography>
+          <Typography variant="subtitle2">Born: {emperor.born}</Typography>
+          <Stack width={"70rem"} m={2}>
+            <Typography variant="body1">{emperor.description}</Typography>
+          </Stack>
+        </Stack>
+      </Box>
+      Emperor
+    </>
+  );
+};
+
+export default Emperor;

package/project/src/pages/index.jsx

@@ -0,0 +1,33 @@
+import { Container, Typography } from "@mui/material";
+
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useStorage } from "@nucleoidjs/webstorage";
+
+const Index = () => {
+  const navigate = useNavigate();
+  const [itemId] = useStorage("projectId", null);
+
+  useEffect(() => {
+    if (itemId) {
+      navigate("/emperor");
+    }
+  }, [itemId]);
+
+  return (
+    <Container
+      sx={{
+        height: "100dvh",
+        width: "100dvh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "column",
+      }}
+    >
+      <Typography variant="h3">Select An Emperor</Typography>
+    </Container>
+  );
+};
+
+export default Index;

package/project/src/theme.js

@@ -0,0 +1,151 @@
+import { createTheme } from "@mui/material";
+
+let theme = createTheme({
+  palette: {
+    type: "light",
+    primary: {
+      main: "#060F12",
+    },
+    secondary: {
+      main: "#C7C7C7",
+    },
+    background: {
+      default: "#F7F7F7",
+      paper: "#EDEDED",
+    },
+    text: {
+      secondary: "#45CCB4",
+    },
+    custom: {
+      popUpBg: "#C0C0C0",
+      sidebarBG: "#1C2028",
+      error: "#CC0000",
+      loading: "#D4AF37",
+    },
+  },
+
+  props: {
+    MuiButton: {
+      variant: "contained",
+    },
+  },
+});
+
+theme = {
+  ...theme,
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          "&::-webkit-scrollbar, & *::-webkit-scrollbar": {
+            backgroundColor: "#fff",
+            width: 6,
+            height: 6,
+          },
+          "&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
+            borderRadius: 10,
+            backgroundColor: "#959595",
+            minHeight: 24,
+            border: "3px",
+          },
+          "&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus":
+            {
+              backgroundColor: "#c9c9c9",
+            },
+          "&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active":
+            {
+              backgroundColor: "#c9c9c9",
+            },
+          "&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover":
+            {
+              backgroundColor: "#c9c9c9",
+            },
+          "&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
+            backgroundColor: "#2b2b2b",
+          },
+        },
+      },
+    },
+    MuiDataGrid: {
+      styleOverrides: {
+        root: {
+          "& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-cell:focus-within":
+            {
+              outline: "none",
+            },
+        },
+      },
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundColor: "#323a40",
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+        },
+      },
+    },
+    MuiCardActions: {
+      styleOverrides: {
+        root: {
+          justifyContent: "center",
+        },
+      },
+    },
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "rgba(0,0,0,0.1)",
+        },
+      },
+    },
+    MuiTextField: {
+      defaultProps: {
+        variant: "standard",
+      },
+    },
+    MuiSelect: {
+      defaultProps: {
+        variant: "standard",
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          color: "black",
+        },
+      },
+    },
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          background: "#c9c9c9",
+          color: "#959595",
+        },
+      },
+    },
+  },
+};
+
+theme = {
+  ...theme,
+  custom: {
+    schema: {
+      width: 75,
+    },
+  },
+};
+
+theme = {
+  ...theme,
+  spacing: (factor) => 8 * factor, // Bootstrap strategy
+};
+
+export default theme;

package/project/src/widgets/ActionButton.jsx

@@ -0,0 +1,68 @@
+import { Alert, Avatar, Box, Snackbar } from "@mui/material";
+import React, { useState } from "react";
+
+import { Label } from "@nucleoidai/platform/minimal/components";
+
+export default function ActionButton() {
+  const [open, setOpen] = useState(false);
+
+  const handleClick = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Box sx={{ position: "relative" }} onClick={handleClick}>
+        <Avatar
+          src={"https://cdn-icons-png.flaticon.com/512/12482/12482702.png"}
+          sx={{
+            display: "flex",
+            alignSelf: "center",
+            mx: "auto",
+            width: { xs: 24, md: 45 },
+            height: { xs: 24, md: 45 },
+            border: `solid 2px ${(theme) => theme.palette.common.white}`,
+          }}
+        />
+        <Label
+          color="primary"
+          variant="filled"
+          sx={{
+            m: 1,
+            top: -18,
+            px: 0.5,
+            left: 30,
+            height: 20,
+            position: "absolute",
+            borderBottomLeftRadius: 2,
+          }}
+        >
+          Talk to Emperor
+        </Label>
+      </Box>
+      <Snackbar
+        open={open}
+        autoHideDuration={5000}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+      >
+        <Alert
+          onClose={handleClose}
+          severity="error"
+          variant="filled"
+          sx={{ width: "100%" }}
+        >
+          Emperor is busy right now
+        </Alert>
+      </Snackbar>
+    </>
+  );
+}

package/project/src/widgets/AddNewEmperor.jsx

@@ -0,0 +1,120 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+import React, { useState } from "react";
+import { publish, useEvent } from "@nucleoidai/react-event";
+
+import useEmperor from "../hooks/useEmperor";
+
+function AddNewEmperor() {
+  const [platformDialog] = useEvent("PLATFORM_DIALOG", { open: false });
+  const { addEmperor } = useEmperor();
+  const [emperor, setEmperor] = useState({
+    id: "",
+    name: "",
+    born: "",
+    icon: "",
+    reign: "",
+    portrait: "",
+    description: "",
+  });
+
+  const handleClose = () => {
+    publish("PLATFORM_DIALOG", { open: false });
+  };
+
+  const handleChange = (e) => {
+    setEmperor({ ...emperor, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e) => {
+    emperor.id = 4;
+    e.preventDefault();
+    addEmperor(emperor);
+    handleClose();
+  };
+
+  return (
+    <div>
+      <Dialog
+        open={platformDialog.open}
+        onClose={handleClose}
+        aria-labelledby="form-dialog-title"
+      >
+        <DialogTitle id="form-dialog-title">Add New Emperor</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Please fill out the details of the new emperor.
+          </DialogContentText>
+          <form onSubmit={handleSubmit}>
+            <TextField
+              autoFocus
+              margin="dense"
+              name="name"
+              label="Name"
+              type="text"
+              fullWidth
+              onChange={handleChange}
+            />
+            <TextField
+              margin="dense"
+              name="born"
+              label="Born"
+              type="text"
+              fullWidth
+              onChange={handleChange}
+            />
+            <TextField
+              margin="dense"
+              name="icon"
+              label="Icon"
+              type="text"
+              fullWidth
+              onChange={handleChange}
+            />
+            <TextField
+              margin="dense"
+              name="reign"
+              label="Reign"
+              type="text"
+              fullWidth
+              onChange={handleChange}
+            />
+            <TextField
+              margin="dense"
+              name="portrait"
+              label="Portrait URL"
+              type="text"
+              fullWidth
+              onChange={handleChange}
+            />
+            <TextField
+              margin="dense"
+              name="description"
+              label="Description"
+              type="text"
+              fullWidth
+              onChange={handleChange}
+            />
+            <DialogActions>
+              <Button onClick={handleClose} color="primary">
+                Cancel
+              </Button>
+              <Button type="submit" color="primary">
+                Add
+              </Button>
+            </DialogActions>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+export default AddNewEmperor;