@canmingir/link 1.1.0

package/src/theme/typography.js

@@ -0,0 +1,107 @@
+// ----------------------------------------------------------------------
+
+export function remToPx(value) {
+  return Math.round(parseFloat(value) * 16);
+}
+
+export function pxToRem(value) {
+  return `${value / 16}rem`;
+}
+
+export function responsiveFontSizes({ sm, md, lg }) {
+  return {
+    "@media (min-width:600px)": {
+      fontSize: pxToRem(sm),
+    },
+    "@media (min-width:900px)": {
+      fontSize: pxToRem(md),
+    },
+    "@media (min-width:1200px)": {
+      fontSize: pxToRem(lg),
+    },
+  };
+}
+
+export const primaryFont = "Public Sans, sans-serif";
+export const secondaryFont = "Barlow, sans-serif";
+
+// ----------------------------------------------------------------------
+
+export const typography = {
+  fontFamily: primaryFont,
+  fontSecondaryFamily: secondaryFont,
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightSemiBold: 600,
+  fontWeightBold: 700,
+  h1: {
+    fontWeight: 800,
+    lineHeight: 80 / 64,
+    fontSize: pxToRem(40),
+    ...responsiveFontSizes({ sm: 52, md: 58, lg: 64 }),
+  },
+  h2: {
+    fontWeight: 800,
+    lineHeight: 64 / 48,
+    fontSize: pxToRem(32),
+    ...responsiveFontSizes({ sm: 40, md: 44, lg: 48 }),
+  },
+  h3: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(24),
+    ...responsiveFontSizes({ sm: 26, md: 30, lg: 32 }),
+  },
+  h4: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(20),
+    ...responsiveFontSizes({ sm: 20, md: 24, lg: 24 }),
+  },
+  h5: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(18),
+    ...responsiveFontSizes({ sm: 19, md: 20, lg: 20 }),
+  },
+  h6: {
+    fontWeight: 700,
+    lineHeight: 28 / 18,
+    fontSize: pxToRem(17),
+    ...responsiveFontSizes({ sm: 18, md: 18, lg: 18 }),
+  },
+  subtitle1: {
+    fontWeight: 600,
+    lineHeight: 1.5,
+    fontSize: pxToRem(16),
+  },
+  subtitle2: {
+    fontWeight: 600,
+    lineHeight: 22 / 14,
+    fontSize: pxToRem(14),
+  },
+  body1: {
+    lineHeight: 1.5,
+    fontSize: pxToRem(16),
+  },
+  body2: {
+    lineHeight: 22 / 14,
+    fontSize: pxToRem(14),
+  },
+  caption: {
+    lineHeight: 1.5,
+    fontSize: pxToRem(12),
+  },
+  overline: {
+    fontWeight: 700,
+    lineHeight: 1.5,
+    fontSize: pxToRem(12),
+    textTransform: "uppercase",
+  },
+  button: {
+    fontWeight: 700,
+    lineHeight: 24 / 14,
+    fontSize: pxToRem(14),
+    textTransform: "unset",
+  },
+};

package/src/utils/flatten-array.js

@@ -0,0 +1,16 @@
+// ----------------------------------------------------------------------
+
+export function flattenArray(list, key = "children") {
+  let children = [];
+
+  const flatten = list?.map((item) => {
+    if (item[key] && item[key].length) {
+      children = [...children, ...item[key]];
+    }
+    return item;
+  });
+
+  return flatten?.concat(
+    children.length ? flattenArray(children, key) : children
+  );
+}

package/src/utils/format-number.js

@@ -0,0 +1,37 @@
+import numeral from "numeral";
+
+// ----------------------------------------------------------------------
+
+export function fNumber(number) {
+  return numeral(number).format();
+}
+
+export function fCurrency(number) {
+  const format = number ? numeral(number).format("$0,0.00") : "";
+
+  return result(format, ".00");
+}
+
+export function fPercent(number) {
+  const format = number ? numeral(Number(number) / 100).format("0.0%") : "";
+
+  return result(format, ".0");
+}
+
+export function fShortenNumber(number) {
+  const format = number ? numeral(number).format("0.00a") : "";
+
+  return result(format, ".00");
+}
+
+export function fData(number) {
+  const format = number ? numeral(number).format("0.0 b") : "";
+
+  return result(format, ".0");
+}
+
+function result(format, key = ".00") {
+  const isInteger = format.includes(key);
+
+  return isInteger ? format.replace(key, "") : format;
+}

package/src/utils/format-time.js

@@ -0,0 +1,27 @@
+import { format, formatDistanceToNow, getTime } from "date-fns";
+
+// ----------------------------------------------------------------------
+
+export function fDate(date, newFormat) {
+  const fm = newFormat || "dd MMM yyyy";
+
+  return date ? format(new Date(date), fm) : "";
+}
+
+export function fDateTime(date, newFormat) {
+  const fm = newFormat || "dd MMM yyyy p";
+
+  return date ? format(new Date(date), fm) : "";
+}
+
+export function fTimestamp(date) {
+  return date ? getTime(new Date(date)) : "";
+}
+
+export function fToNow(date) {
+  return date
+    ? formatDistanceToNow(new Date(date), {
+        addSuffix: true,
+      })
+    : "";
+}

package/src/utils/storage-available.js

@@ -0,0 +1,24 @@
+// ----------------------------------------------------------------------
+
+export function localStorageAvailable() {
+  try {
+    const key = "__some_random_key_you_are_not_going_to_use__";
+    window.localStorage.setItem(key, key);
+    window.localStorage.removeItem(key);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+export function localStorageGetItem(key, defaultValue = "") {
+  const storageAvailable = localStorageAvailable();
+
+  let value;
+
+  if (storageAvailable) {
+    value = localStorage.getItem(key) || defaultValue;
+  }
+
+  return value;
+}

package/src/widgets/Login/Login.jsx

@@ -0,0 +1,55 @@
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+import React from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import config from "../../config/config";
+import { storage } from "@nucleoidjs/webstorage";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+// ----------------------------------------------------------------------
+
+export default function Auth0LoginView() {
+  const { name, project } = config();
+
+  const handleOAuthLogin = ({ authUrl, clientId, redirectUri, scope }) => {
+    window.location.href = `${authUrl}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=code`;
+  };
+  const navigate = useNavigate();
+
+  function token() {
+    if (storage.get(name, "refreshToken") && storage.get(name, "accessToken")) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  useEffect(() => {
+    if (token()) {
+      navigate("/");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigate]);
+
+  return (
+    <>
+      <Typography variant="h4" sx={{ mb: 5 }}>
+        Sign in to {name}
+      </Typography>
+      <Divider />
+      <Stack spacing={2}>
+        <Button
+          fullWidth={true}
+          color="primary"
+          size="large"
+          variant="contained"
+          onClick={() => handleOAuthLogin({ ...project.github })}
+        >
+          Login with Github
+        </Button>
+      </Stack>
+    </>
+  );
+}

package/src/widgets/LoginForm/LoginForm.jsx

@@ -0,0 +1,80 @@
+import NucleoidLoginForm from "../../components/NucleoidLoginForm";
+import SocialLoginButtons from "../../components/SocialLoginButtons";
+import Stack from "@mui/material/Stack";
+import config from "../../config/config";
+
+import { Box, Divider, Link as MuiLink, Typography } from "@mui/material";
+import React, { useState } from "react";
+
+const handleOAuthLogin = ({ redirectUri, authUrl, clientId, scope }) => {
+  window.location.href = `${authUrl}?client_id=${clientId}&scope=${scope}&response_type=code&redirect_uri=${redirectUri}`;
+};
+
+function LoginForm() {
+  const { name, project } = config();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const renderHead = (
+    <Stack spacing={2} sx={{ mb: 5 }}>
+      <Typography variant="h4">Sign in to {name}</Typography>
+      {project.nucleoid && (
+        <Stack direction="row" spacing={0.5}>
+          <Typography variant="body2">New user?</Typography>
+
+          <MuiLink variant="subtitle2">Create an account</MuiLink>
+        </Stack>
+      )}
+    </Stack>
+  );
+
+  const renderForm = (
+    <>
+      {!!project.nucleoid && (
+        <>
+          <NucleoidLoginForm
+            email={email}
+            password={password}
+            setEmail={setEmail}
+            setPassword={setPassword}
+            // TODO: Add function for login without Oauth 2.0
+            onSubmit={() => handleOAuthLogin(config.login.nucleoid)}
+          />
+          <Typography
+            variant="body2"
+            sx={{ width: "100%", textAlign: "center" }}
+          >
+            Don&apos;t have an account ?
+            <MuiLink
+              href="/console/login2"
+              variant="body2"
+              sx={{ display: "flex", justifyContent: "center" }}
+            >
+              Sign Up Now
+            </MuiLink>
+          </Typography>
+
+          <Divider sx={{ width: "100%", margin: "1rem 0" }}>
+            <Box sx={{ px: 2 }}>or</Box>
+          </Divider>
+        </>
+      )}
+      <SocialLoginButtons
+        googleEnable={!!project.google}
+        onGoogle={() => handleOAuthLogin({ ...project.google })}
+        githubEnable={!!project.github}
+        onGithub={() => handleOAuthLogin({ ...project.github })}
+        linkedinEnable={!!project.linkedin}
+        onLinkedin={() => handleOAuthLogin({ ...project.linkedin })}
+      />
+    </>
+  );
+
+  return (
+    <>
+      {renderHead} {renderForm}
+    </>
+  );
+}
+export default LoginForm;

package/src/widgets/LoginForm/LoginFormStyles.js

@@ -0,0 +1,43 @@
+const LoginFormStyles = {
+  mainBoxStyle: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "1rem",
+    borderRadius: "10px",
+    justifyContent: "center",
+  },
+
+  formBoxStyle: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+  },
+  signInButtonStyle: {
+    margin: "1rem 0 2rem",
+    width: "100%",
+    color: "#f4f4f4",
+  },
+  githubButtonStyle: {
+    margin: "0.5rem 0 ",
+    width: "100%",
+    color: "#f4f4f4",
+    backgroundColor: "#333",
+  },
+  googleButtonStyle: {
+    margin: "0.5rem 0",
+    width: "100%",
+    backgroundColor: "#fff",
+    color: "#3C3C3C",
+    borderColor: "#DB4437",
+  },
+  linkedinButtonStyle: {
+    margin: "0.5rem 0 1rem",
+    width: "100%",
+    backgroundColor: "#0077b5",
+    color: "#f4f4f4",
+  },
+};
+export default LoginFormStyles;

package/src/widgets/LoginForm/index.js

@@ -0,0 +1 @@
+export { default } from "./LoginForm";

package/src/widgets/SettingsDialog.jsx

@@ -0,0 +1,308 @@
+import { Iconify } from "@nucleoidai/platform/minimal/components";
+import config from "../config/config";
+import { useEvent } from "@nucleoidai/react-event";
+import useSettings from "../hooks/useSettings";
+import { useUser } from "../hooks/use-user";
+
+import {
+  Avatar,
+  Box,
+  FormControl,
+  Grow,
+  IconButton,
+  InputLabel,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemSecondaryAction,
+  ListItemText,
+  NativeSelect,
+  Stack,
+  Tab,
+  Tabs,
+  TextField,
+  Typography,
+} from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
+import React, { useEffect, useState } from "react";
+
+function a11yProps(index) {
+  return {
+    id: `vertical-tab-${index}`,
+    "aria-controls": `vertical-tabpanel-${index}`,
+  };
+}
+
+const TabPanel = (props) => {
+  const { children, value, index } = props;
+
+  return <>{value === index && <Box sx={{ pl: 2, pr: 1 }}>{children}</Box>}</>;
+};
+
+const SettingsDialogTabs = ({ tabs }) => {
+  const [value, setValue] = useState(0);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  return (
+    <>
+      <Box
+        sx={{
+          flexGrow: 1,
+          bgcolor: "background.paper",
+          display: "flex",
+          height: 515,
+        }}
+      >
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          orientation="vertical"
+          variant="scrollable"
+          sx={{
+            borderRight: 1,
+            borderColor: "divider",
+            width: 120,
+            display: "flex",
+            flexDirection: "flex-end",
+            ml: -2,
+            mt: 1,
+            "& .MuiTabs-indicator": {
+              backgroundColor: "primary.main",
+              height: 3,
+            },
+            "& .MuiTab-root.Mui-selected": {
+              color: "custom.grey",
+              bgcolor: "rgba(0,0,0,0.1)",
+              borderTopLeftRadius: 8,
+              borderBottomLeftRadius: 8,
+            },
+            "& .MuiTab-root": {
+              color: "custom.grey",
+              width: 1,
+            },
+          }}
+        >
+          <Tab
+            label={"Permissions"}
+            sx={{ "& label": { color: "custom.grey" } }}
+            {...a11yProps(0)}
+          />
+          <Tab
+            label={"Settings"}
+            sx={{ "& label": { color: "custom.grey" } }}
+            {...a11yProps(1)}
+          />
+          {tabs?.map((tab, index) => (
+            <Tab
+              key={tab.label}
+              iconPosition="start"
+              label={tab.label}
+              sx={{ "& label": { color: "custom.grey" } }}
+              {...a11yProps(index + 2)}
+            />
+          ))}
+        </Tabs>
+        <Box sx={{ width: "100%" }}>
+          <TabPanel value={value} index={0}>
+            <Permission />
+          </TabPanel>
+          <TabPanel value={value} index={1}>
+            <Settings />
+          </TabPanel>
+          {tabs?.map((tab, index) => (
+            <TabPanel key={tab.label} value={value} index={index + 2}>
+              <tab.panel />
+            </TabPanel>
+          ))}
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+function SettingsDialog({ handleClose, open }) {
+  const { settings } = config().template;
+  return (
+    <Dialog
+      open={open}
+      fullWidth
+      maxWidth={"md"}
+      onClose={() => handleClose()}
+      sx={{ bgcolor: "custom.darkDialogBg", zIndex: 2147483647 }}
+      PaperProps={{
+        style: {
+          color: "white",
+          minHeight: 600,
+        },
+      }}
+    >
+      <DialogContent>
+        <Typography variant="h5" sx={{ my: 2 }}>
+          Settings
+        </Typography>
+        <SettingsDialogTabs tabs={settings.tabs} />
+      </DialogContent>
+      <DialogActions
+        sx={{
+          borderTop: 1,
+          borderColor: "divider",
+          display: "flex",
+          justifyContent: "flex-end",
+        }}
+      >
+        <Button
+          sx={{ color: "white" }}
+          autoFocus
+          onClick={() => console.log("save")}
+        >
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+const Permission = () => {
+  const [newUserId, setNewUserId] = useState(null);
+  const { getPermittedUsers, users, createPermission, deletePermission } =
+    useUser();
+  const [event] = useEvent("PERMISSION_CREATED", null);
+  const [event2] = useEvent("PERMISSION_DELETED", null);
+
+  useEffect(() => {
+    getPermittedUsers();
+  }, [event, event2]);
+
+  return (
+    <Stack direction="column" spacing={2} p={2}>
+      <Typography variant="h6">Users</Typography>
+      <Typography variant="subtitle2" color="text.secondary">
+        Users with access to the project.
+      </Typography>
+      <List>
+        {users?.map((user) => (
+          <ListItem
+            key={user.id}
+            sx={{
+              backgroundColor: "background.paper",
+              boxShadow: 1,
+              borderRadius: 1,
+              m: 1,
+              p: 2,
+              ":hover": { boxShadow: 3 },
+              transition: "all 0.2s ease-in-out",
+            }}
+          >
+            <ListItemAvatar>
+              <Avatar src={user.avatar_url} alt={user.name} />
+            </ListItemAvatar>
+            <ListItemText primary={user.name} />
+            <ListItemSecondaryAction>
+              <IconButton
+                onClick={async () => {
+                  await deletePermission(user.id);
+                }}
+                sx={{ color: "error.main" }}
+              >
+                <Iconify icon="solar:trash-bin-minimalistic-bold-duotone" />
+              </IconButton>
+            </ListItemSecondaryAction>
+          </ListItem>
+        ))}
+        {newUserId !== null && (
+          <Grow in={true}>
+            <TextField
+              label="User ID"
+              value={newUserId}
+              onChange={(e) => setNewUserId(e.target.value)}
+              sx={{ width: "calc(100% - 16px)", m: 1 }}
+            />
+          </Grow>
+        )}
+      </List>
+      <Button
+        variant="contained"
+        size="medium"
+        fullWidth
+        sx={{
+          backgroundColor: "primary.main",
+          ":hover": { backgroundColor: "primary.dark" },
+        }}
+        onClick={async () => {
+          if (newUserId) {
+            await createPermission(newUserId);
+            setNewUserId(null);
+          } else {
+            setNewUserId("");
+          }
+        }}
+      >
+        {newUserId ? "Add User" : "Enter User ID"}
+      </Button>
+    </Stack>
+  );
+};
+
+const Settings = () => {
+  const projectId = localStorage.getItem("projectId");
+  const { settings, updateSettings } = useSettings(projectId);
+
+  const timeZones = [
+    "Asia/Kolkata",
+    "Asia/Dubai",
+    "America/New_York",
+    "America/Los_Angeles",
+    "Europe/London",
+  ];
+
+  const handleChange = (event) => {
+    const newTimeZone = event.target.value;
+    updateSettings(projectId, newTimeZone);
+  };
+
+  return (
+    <Stack direction="column" spacing={2} p={2}>
+      <Typography variant="h6">Settings</Typography>
+      <Typography variant="subtitle2" color="text.secondary">
+        Configure your application settings.
+      </Typography>
+      <List>
+        <ListItem
+          sx={{
+            backgroundColor: "background.paper",
+            boxShadow: 1,
+            borderRadius: 1,
+            m: 1,
+            p: 2,
+            ":hover": { boxShadow: 3 },
+            transition: "all 0.2s ease-in-out",
+          }}
+        >
+          <FormControl fullWidth>
+            <InputLabel variant="standard" shrink>
+              Time Zone
+            </InputLabel>
+            <NativeSelect
+              defaultValue={settings.timeZone || ""}
+              onChange={(event) => handleChange(event)}
+            >
+              <option value="" disabled>
+                {settings.timeZone || "Select Time Zone"}
+              </option>
+              {timeZones.map((time, index) => (
+                <option key={index} value={time}>
+                  {time}
+                </option>
+              ))}
+            </NativeSelect>
+          </FormControl>
+        </ListItem>
+      </List>
+    </Stack>
+  );
+};
+
+export default SettingsDialog;