sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP 4

Browse source
This commit is contained in:
Darren Clarke 2024-03-17 12:58:25 +01:00
parent f62c9f064d
commit b8c6e893ff
43 changed files with 4721 additions and 1807 deletions
Download patch file Download diff file Expand all files Collapse all files

0
packages/components-common/.gitkeep
View file

2
packages/leafcutter-common/components/OpenSearchWrapper.tsx
View file

@ -34,7 +34,7 @@ export const OpenSearchWrapper: FC<OpenSearchWrapperProps> = ({
>
<Iframe
id="opensearch"
url={`${process.env.NEXT_PUBLIC_NEXTAUTH_URL}${url}&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-3y%2Cto%3Anow))`}
url={`/opensearch/${url}&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-3y%2Cto%3Anow))`}
width="100%"
height="100%"
frameBorder={0}

1
packages/leafcutter-common/index.ts
View file

@ -9,6 +9,7 @@ export { Tooltip } from "./components/Tooltip";
export { Preview } from "./components/Preview";
export { GettingStartedDialog } from "./components/GettingStartedDialog";
export { VisualizationDetail } from "./components/VisualizationDetail";
export { OpenSearchWrapper } from "./components/OpenSearchWrapper";
export const locales = {
en,
fr,

2
packages/leafcutter-common/tsconfig.tsbuildinfo
View file

File diff suppressed because one or more lines are too long

0
packages/tsconfig/CHANGELOG.md → packages/ts-config/CHANGELOG.md
View file

0
packages/tsconfig/LICENSE.md → packages/ts-config/LICENSE.md
View file

0
packages/tsconfig/README.md → packages/ts-config/README.md
View file

3
packages/tsconfig/package.json → packages/ts-config/package.json
View file

@ -1,9 +1,8 @@
{
"name": "tsconfig",
"name": "ts-config",
"version": "0.1.4",
"description": "Shared TypeScript config",
"license": "AGPL-3.0-or-later",
"repository": "https://gitlab.com/digiresilience.org/link/tsconfig-amigo",
"author": "Abel Luck <abel@guardianproject.info>",
"main": "tsconfig.json",
"engines": {

0
packages/tsconfig/tsconfig.json → packages/ts-config/tsconfig.json
View file

26
packages/ui/components/Detail.tsx Normal file
View file

@ -0,0 +1,26 @@
"use client";
import { FC } from "react";
import { Grid, Box } from "@mui/material";
import { typography } from "../styles/theme";
interface DetailProps {
title: string;
entity: string;
children: any;
}
export const Detail: FC<DetailProps> = ({ title, entity, children }) => {
const { h3 } = typography;
return (
<Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
<Grid container direction="column">
<Grid item>
<Box sx={h3}>{title}</Box>
</Grid>
<Grid item>{children}</Grid>
</Grid>
</Box>
);
};

67
packages/ui/components/Dialog.tsx Normal file
View file

@ -0,0 +1,67 @@
"use client";
import { FC } from "react";
import {
Grid,
Button,
Dialog as MUIDialog,
DialogActions,
DialogContent,
TextField,
Autocomplete,
} from "@mui/material";
import { typography } from "../styles/theme";
interface DialogProps {
title: string;
open: boolean;
closeDialog: () => void;
children?: any;
}
export const Dialog: FC<DialogProps> = ({
title,
open,
closeDialog,
children,
}) => {
return (
<MUIDialog open={open} maxWidth="md" fullWidth>
<DialogContent>{children}</DialogContent>
<DialogActions sx={{ px: 3, pt: 0, pb: 3 }}>
<Grid container justifyContent="space-between">
<Grid item>
<Button
sx={{
backgroundColor: "white",
color: "#666",
fontFamily: "Poppins, sans-serif",
fontWeight: 700,
borderRadius: 2,
textTransform: "none",
}}
onClick={() => {
closeDialog();
}}
>
Cancel
</Button>
</Grid>
<Grid item>
<Button
sx={{
fontFamily: "Poppins, sans-serif",
fontWeight: 700,
borderRadius: 2,
textTransform: "none",
px: 3,
}}
>
Create Ticket
</Button>
</Grid>
</Grid>
</DialogActions>
</MUIDialog>
);
};

86
packages/ui/components/List.tsx Normal file
View file

@ -0,0 +1,86 @@
"use client";
import { FC } from "react";
import { Grid, Box } from "@mui/material";
import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
import { typography } from "../styles/theme";
interface ListProps {
title: string;
rows: any;
columns: GridColDef<any>[];
onRowClick: (id: string) => void;
buttons?: React.ReactNode;
}
export const List: FC<ListProps> = ({ title, rows, columns, onRowClick, buttons }) => {
const { h3 } = typography;
return (
<Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
<Grid container direction="column">
<Grid item container direction="row" justifyContent="space-between">
<Grid item>
<Box sx={h3}>{title}</Box>
</Grid>
<Grid item>
{buttons}
</Grid>
</Grid>
<Grid item>
<Box
sx={{
backgroundColor: "#ddd",
border: 0,
width: "100%",
height: "100vh",
".MuiDataGrid-row": {
cursor: "pointer",
"&:hover": {
backgroundColor: "#1982fc33 !important",
fontWeight: "bold",
},
},
".MuiDataGrid-row:nth-of-type(1n)": {
backgroundColor: "#f3f3f3",
},
".MuiDataGrid-row:nth-of-type(2n)": {
backgroundColor: "#fff",
},
".MuiDataGrid-columnHeaderTitle": {
color: "#333",
fontWeight: "bold",
fontSize: 11,
margin: "0 auto",
},
".MuiDataGrid-columnHeader": {
backgroundColor: "#ccc",
border: 0,
borderBottom: "3px solid #ddd",
},
}}
>
<DataGridPro
rows={rows}
columns={columns}
density="compact"
pagination
initialState={{
pagination: { paginationModel: { pageSize: 25 } },
}}
pageSizeOptions={[5, 10, 25]}
paginationMode="client"
sx={{ height: "100vh" }}
rowBuffer={30}
rowHeight={46}
scrollbarSize={0}
disableVirtualization
disableColumnMenu
onRowClick={(row: any) => onRowClick(row.id)}
/>
</Box>
</Grid>
</Grid>
</Box>
);
};

350
packages/ui/components/Sidebar.tsx Normal file
View file

@ -0,0 +1,350 @@
"use client";
import { FC } from "react";
import {
Box,
Grid,
Typography,
List,
ListItemButton,
ListItemIcon,
ListItemText,
ListItemSecondaryAction,
Drawer,
} from "@mui/material";
import {
ExpandCircleDown as ExpandCircleDownIcon,
AccountCircle as AccountCircleIcon,
Chat as ChatIcon,
PermPhoneMsg as PhoneIcon,
WhatsApp as WhatsAppIcon,
Facebook as FacebookIcon,
} from "@mui/icons-material";
import { usePathname } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { fonts } from "../styles/theme";
// import LinkLogo from "@/public/link-logo-small.png";
// import { useSession, signOut } from "next-auth/react";
const openWidth = 270;
const closedWidth = 100;
const MenuItem = ({
name,
href,
Icon,
iconSize,
inset = false,
selected = false,
open = true,
badge,
target = "_self",
}: any) => (
<Link href={href} target={target}>
<ListItemButton
sx={{
p: 0,
mb: 1,
bl: iconSize === 0 ? "1px solid white" : "inherit",
}}
selected={selected}
>
{iconSize > 0 ? (
<ListItemIcon
sx={{
color: `white`,
minWidth: 0,
mr: 2,
textAlign: "center",
margin: open ? "0 8 0 0" : "0 auto",
}}
>
<Box
sx={{
width: iconSize,
height: iconSize,
mr: 0.5,
mt: "-4px",
}}
>
<Icon />
</Box>
</ListItemIcon>
) : (
<Box
sx={{
width: 30,
height: "28px",
position: "relative",
ml: "9px",
mr: "1px",
}}
>
<Box
sx={{
width: "1px",
height: "56px",
backgroundColor: "white",
position: "absolute",
left: "3px",
top: "-10px",
}}
/>
<Box
sx={{
width: "42px",
height: "42px",
position: "absolute",
top: "-27px",
left: "3px",
border: "solid 1px #fff",
borderColor: "transparent transparent transparent #fff",
borderRadius: "60px",
rotate: "-35deg",
}}
/>
</Box>
)}
{open && (
<ListItemText
inset={inset}
primary={
<Typography
variant="body1"
sx={{
fontSize: 16,
fontWeight: "bold",
border: 0,
textAlign: "left",
color: "white",
}}
>
{name}
</Typography>
}
/>
)}
{badge && badge > 0 ? (
<ListItemSecondaryAction>
<Typography
color="textSecondary"
variant="body1"
className="badge"
sx={{
backgroundColor: "#FFB620",
color: "black !important",
borderRadius: 10,
px: 1,
fontSize: 12,
fontWeight: "bold",
}}
>
{badge}
</Typography>
</ListItemSecondaryAction>
) : null}
</ListItemButton>
</Link>
);
interface SidebarProps {
open: boolean;
setOpen: (open: boolean) => void;
}
export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
const pathname = usePathname();
const { poppins } = fonts;
// const { data: session } = useSession();
// const username = session?.user?.name || "User";
// const logout = () => {
// signOut({ callbackUrl: "/login" });
// };
return (
<Drawer
sx={{ width: open ? openWidth : closedWidth, flexShrink: 0 }}
variant="permanent"
anchor="left"
open={open}
PaperProps={{
sx: {
width: open ? openWidth : closedWidth,
border: 0,
overflow: "visible",
},
}}
>
<Box
sx={{
position: "absolute",
top: 20,
right: open ? -8 : -16,
color: "#1C75FD",
rotate: open ? "90deg" : "-90deg",
}}
onClick={() => {
setOpen!(!open);
}}
>
<ExpandCircleDownIcon
sx={{
width: 30,
height: 30,
background: "white",
borderRadius: 500,
}}
/>
</Box>
<Grid
container
direction="column"
justifyContent="space-between"
wrap="nowrap"
spacing={0}
sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
>
<Grid item container>
<Grid item sx={{ width: open ? "40px" : "100%" }}>
<Box
sx={{
width: "40px",
height: "40px",
margin: open ? "0" : "0 auto",
}}
>
<Image
src={"" /* LinkLogo */}
alt="Link logo"
width={40}
height={40}
style={{
objectFit: "cover",
filter: "grayscale(100) brightness(100)",
}}
/>
</Box>
.
</Grid>
{open && (
<Grid item>
<Typography
variant="h2"
sx={{
fontSize: 26,
color: "white",
fontWeight: 700,
mt: 1,
ml: 0.5,
fontFamily: poppins.style.fontFamily,
}}
>
Metamigo
</Typography>
</Grid>
)}
</Grid>
<Grid item>
<Box
sx={{
height: "0.5px",
width: "100%",
backgroundColor: "#666",
mb: 1,
}}
/>
</Grid>
<Grid
item
container
direction="column"
sx={{
mt: "6px",
overflow: "scroll",
scrollbarWidth: "none",
msOverflowStyle: "none",
"&::-webkit-scrollbar": { display: "none" },
}}
flexGrow={1}
>
<List
component="nav"
sx={{
a: {
textDecoration: "none",
".MuiListItemButton-root": {
p: 1,
borderRadius: 2,
"&:hover": {
background: "#555",
},
".MuiTypography-root": {
p: {
color: "#999 !important",
fontSize: 16,
},
},
".badge": {
p: { fontSize: 12, color: "black !important" },
},
},
".Mui-selected": {
background: "#444",
color: "#fff !important",
".MuiTypography-root": {
p: {
color: "#fff !important",
fontSize: 16,
},
},
".badge": {
p: { fontSize: 12, color: "black !important" },
},
},
},
}}
>
<MenuItem
name="Whatsapp"
href="/whatsapp"
selected={pathname.endsWith("/whatsapp")}
Icon={WhatsAppIcon}
iconSize={20}
/>
<MenuItem
name="Signal"
href="/signal"
selected={pathname.startsWith("/signal")}
Icon={ChatIcon}
iconSize={20}
/>
<MenuItem
name="Facebook"
href="/facebook"
selected={pathname.startsWith("/facebook")}
Icon={FacebookIcon}
iconSize={20}
/>
<MenuItem
name="Voice"
href="/voice"
selected={pathname.startsWith("/voice")}
Icon={PhoneIcon}
iconSize={20}
/>
<MenuItem
name="Users"
href="/users"
selected={pathname.startsWith("/users")}
Icon={AccountCircleIcon}
iconSize={20}
/>
</List>
</Grid>
</Grid>
</Drawer>
);
};

135
packages/ui/components/SidebarItem.tsx Normal file
View file

@ -0,0 +1,135 @@
"use client";
import { FC } from "react";
import {
Box,
Typography,
ListItemButton,
ListItemIcon,
ListItemText,
ListItemSecondaryAction,
} from "@mui/material";
import Link from "next/link";
import Image from "next/image";
import { fonts } from "../styles/theme";
const openWidth = 270;
const closedWidth = 100;
export const SidebarItem: FC = ({
name,
href,
Icon,
iconSize,
inset = false,
selected = false,
open = true,
badge,
target = "_self",
}: any) => (
<Link href={href} target={target}>
<ListItemButton
sx={{
p: 0,
mb: 1,
bl: iconSize === 0 ? "1px solid white" : "inherit",
}}
selected={selected}
>
{iconSize > 0 ? (
<ListItemIcon
sx={{
color: `white`,
minWidth: 0,
mr: 2,
textAlign: "center",
margin: open ? "0 8 0 0" : "0 auto",
}}
>
<Box
sx={{
width: iconSize,
height: iconSize,
mr: 0.5,
mt: "-4px",
}}
>
<Icon />
</Box>
</ListItemIcon>
) : (
<Box
sx={{
width: 30,
height: "28px",
position: "relative",
ml: "9px",
mr: "1px",
}}
>
<Box
sx={{
width: "1px",
height: "56px",
backgroundColor: "white",
position: "absolute",
left: "3px",
top: "-10px",
}}
/>
<Box
sx={{
width: "42px",
height: "42px",
position: "absolute",
top: "-27px",
left: "3px",
border: "solid 1px #fff",
borderColor: "transparent transparent transparent #fff",
borderRadius: "60px",
rotate: "-35deg",
}}
/>
</Box>
)}
{open && (
<ListItemText
inset={inset}
primary={
<Typography
variant="body1"
sx={{
fontSize: 16,
fontWeight: "bold",
border: 0,
textAlign: "left",
color: "white",
}}
>
{name}
</Typography>
}
/>
)}
{badge && badge > 0 ? (
<ListItemSecondaryAction>
<Typography
color="textSecondary"
variant="body1"
className="badge"
sx={{
backgroundColor: "#FFB620",
color: "black !important",
borderRadius: 10,
px: 1,
fontSize: 12,
fontWeight: "bold",
}}
>
{badge}
</Typography>
</ListItemSecondaryAction>
) : null}
</ListItemButton>
</Link>
);

2
packages/ui/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { List } from "./components/List";
export { fonts, typography, colors } from "./styles/theme";

25
packages/ui/package.json Normal file
View file

@ -0,0 +1,25 @@
{
"name": "ui",
"version": "1.0.0",
"description": "",
"scripts": {
"build": "tsc -p tsconfig.json"
},
"author": "",
"license": "ISC",
"dependencies": {
"@mui/icons-material": "^5",
"@mui/lab": "^5.0.0-alpha.168",
"@mui/material": "^5",
"@mui/x-data-grid-pro": "^6.19.6",
"@mui/x-date-pickers-pro": "^6.19.7",
"next": "14.1.3",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@types/node": "^20.11.28",
"@types/react": "18.2.66",
"typescript": "^5.4.2"
}
}

112
packages/ui/styles/theme.ts Normal file
View file

@ -0,0 +1,112 @@
import { Roboto, Playfair_Display, Poppins } from "next/font/google";
const roboto = Roboto({
weight: ["400"],
subsets: ["latin"],
display: "swap",
});
const playfair = Playfair_Display({
weight: ["900"],
subsets: ["latin"],
display: "swap",
});
const poppins = Poppins({
weight: ["400", "700"],
subsets: ["latin"],
display: "swap",
});
export const fonts = {
roboto,
playfair,
poppins,
};
export const colors: any = {
lightGray: "#ededf0",
mediumGray: "#e3e5e5",
darkGray: "#33302f",
mediumBlue: "#4285f4",
green: "#349d7b",
lavender: "#a5a6f6",
darkLavender: "#5d5fef",
pink: "#fcddec",
cdrLinkOrange: "#ff7115",
coreYellow: "#fac942",
helpYellow: "#fff4d5",
dwcDarkBlue: "#191847",
hazyMint: "#ecf7f8",
leafcutterElectricBlue: "#4d6aff",
leafcutterLightBlue: "#fafbfd",
waterbearElectricPurple: "#332c83",
waterbearLightSmokePurple: "#eff3f8",
bumpedPurple: "#212058",
mutedPurple: "#373669",
warningPink: "#ef5da8",
lightPink: "#fff0f7",
lightGreen: "#f0fff3",
lightOrange: "#fff5f0",
beige: "#f6f2f1",
almostBlack: "#33302f",
white: "#ffffff",
};
export const typography: any = {
h1: {
fontFamily: playfair.style.fontFamily,
fontSize: 45,
fontWeight: 700,
lineHeight: 1.1,
margin: 0,
},
h2: {
fontFamily: poppins.style.fontFamily,
fontSize: 35,
fontWeight: 700,
lineHeight: 1.1,
margin: 0,
},
h3: {
fontFamily: poppins.style.fontFamily,
fontWeight: 400,
fontSize: 27,
lineHeight: 1.1,
margin: 0,
},
h4: {
fontFamily: poppins.style.fontFamily,
fontWeight: 700,
fontSize: 18,
},
h5: {
fontFamily: roboto.style.fontFamily,
fontWeight: 700,
fontSize: 16,
lineHeight: "24px",
textTransform: "uppercase",
textAlign: "center",
margin: 1,
},
h6: {
fontFamily: roboto.style.fontFamily,
fontWeight: 400,
fontSize: 14,
textAlign: "center",
},
p: {
fontFamily: roboto.style.fontFamily,
fontSize: 17,
lineHeight: "26.35px",
fontWeight: 400,
margin: 0,
},
small: {
fontFamily: roboto.style.fontFamily,
fontSize: 13,
lineHeight: "18px",
fontWeight: 400,
margin: 0,
},
};

29
packages/ui/tsconfig.json Normal file
View file

@ -0,0 +1,29 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": ".",
"paths": {
"@/*": ["./*", "../../node_modules/*"]
},
"plugins": [
{
"name": "next"
}
]
},
"include": ["**.d.ts", "**/*.ts", "**/*.tsx", "**/*.png, **/*.svg"],
"exclude": ["node_modules", "babel__core"]
}

1
packages/ui/tsconfig.tsbuildinfo Normal file
View file

File diff suppressed because one or more lines are too long