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

Create/detail updates

Browse source
This commit is contained in:
Darren Clarke 2024-04-24 21:44:05 +02:00
parent b0fb643b6a
commit 0997e449bb
26 changed files with 684 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

85
packages/ui/components/Button.tsx Normal file
View file

@ -0,0 +1,85 @@
"use client";
import { FC } from "react";
import Link from "next/link";
import { Button as MUIButton } from "@mui/material";
import { colors } from "../styles/theme";
interface InternalButtonProps {
text: string;
color?: string;
kind?: "primary" | "secondary" | "destructive";
type?: string;
onClick?: any;
}
const buttonColors = {
primary: colors.mediumBlue,
secondary: colors.darkMediumGray,
destructive: colors.brightRed,
};
export const InternalButton: FC<InternalButtonProps> = ({
text,
color,
kind,
type = "button",
onClick,
}) => (
<MUIButton
variant="contained"
disableElevation
onClick={onClick}
type={type}
href=""
sx={{
fontFamily: "Poppins, sans-serif",
fontWeight: 700,
borderRadius: 2,
backgroundColor: color ?? buttonColors[kind ?? "secondary"],
padding: "6px 30px",
margin: 0,
whiteSpace: "nowrap",
textTransform: "none",
}}
>
{text}
</MUIButton>
);
interface ButtonProps {
text: string;
color?: string;
kind?: "primary" | "secondary" | "destructive";
type?: string;
href?: string;
onClick?: any;
}
export const Button: FC<ButtonProps> = ({
text,
color,
type,
kind,
href,
onClick,
}) =>
href ? (
<Link href={href} passHref>
<InternalButton
text={text}
color={color}
kind={kind}
type={type}
onClick={onClick}
/>
</Link>
) : (
<InternalButton
text={text}
color={color}
kind={kind}
type={type}
onClick={onClick}
/>
);

121
packages/ui/components/Dialog.tsx
View file

@ -2,66 +2,93 @@
import { FC } from "react";
import {
Grid,
Button,
Dialog as MUIDialog,
Box,
Dialog as InternalDialog,
DialogActions,
DialogContent,
TextField,
Autocomplete,
DialogTitle,
} from "@mui/material";
import { typography } from "../styles/theme";
import { typography, colors } from "../styles/theme";
interface DialogProps {
type DialogDetailsProps = {
title: string;
children: React.ReactNode;
buttons?: React.ReactNode;
};
const DialogDetails: FC<DialogDetailsProps> = ({
title,
children,
buttons,
}) => {
const { h3 } = typography;
const { mediumGray, darkMediumGray } = colors;
return (
<>
<DialogTitle
sx={{
backgroundColor: mediumGray,
p: 3,
}}
>
<Box
sx={{
...h3,
borderBottom: `1px solid ${darkMediumGray}`,
pb: 1.5,
}}
>
{title}
</Box>
</DialogTitle>
<DialogContent sx={{ backgroundColor: mediumGray, p: 3, pb: 4 }}>
{children}
</DialogContent>
{buttons && (
<DialogActions sx={{ backgroundColor: mediumGray, p: 3 }}>
{buttons}
</DialogActions>
)}
</>
);
};
type DialogProps = {
title: string;
open: boolean;
closeDialog: () => void;
onClose: Function;
formAction?: any;
buttons?: React.ReactNode;
children?: any;
}
};
export const Dialog: FC<DialogProps> = ({
title,
open,
closeDialog,
onClose,
formAction,
buttons,
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>
<InternalDialog
open={open}
onClose={onClose as any}
fullWidth
maxWidth="md"
>
{formAction ? (
<form action={formAction}>
<DialogDetails title={title} buttons={buttons}>
{children}
</DialogDetails>
</form>
) : (
<DialogDetails title={title} buttons={buttons}>
{children}
</DialogDetails>
)}
</InternalDialog>
);
};

77
packages/ui/components/DisplayTextField.tsx Normal file
View file

@ -0,0 +1,77 @@
import { FC } from "react";
import {
TextField as InternalTextField,
InputAdornment,
IconButton,
} from "@mui/material";
import { ContentCopy as ContentCopyIcon } from "@mui/icons-material";
import { colors } from "../styles/theme";
type DisplayTextFieldProps = {
name: string;
label: string;
value: string | number | null;
lines?: number;
helperText?: string;
copyable?: boolean;
};
export const DisplayTextField: FC<DisplayTextFieldProps> = ({
name,
label,
value,
lines = 1,
helperText,
copyable = false,
}) => {
const { almostBlack, darkGray, darkMediumGray } = colors;
const copyToClipboard = (value: any) => {
navigator?.clipboard?.writeText(value.toString());
};
return (
<InternalTextField
variant="standard"
name={name}
label={label}
size="medium"
multiline={lines > 1}
rows={lines}
defaultValue={value === "" ? " " : value}
disabled
helperText={helperText}
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: almostBlack,
},
"& .MuiFormLabel-root": {
fontSize: 20,
color: darkGray,
minWidth: 0,
},
}}
InputProps={{
endAdornment: copyable ? (
<InputAdornment position="start">
<IconButton
onClick={() => copyToClipboard(value)}
size="small"
color="primary"
sx={{ p: 0, color: darkMediumGray }}
>
<ContentCopyIcon />
</IconButton>
</InputAdornment>
) : null,
disableUnderline: true,
sx: {
minWidth: 0,
fontSize: 18,
backgroundColor: "transparent",
pt: "1px",
},
}}
/>
);
};

39
packages/ui/components/List.tsx
View file

@ -3,7 +3,7 @@
import { FC } from "react";
import { Grid, Box } from "@mui/material";
import { DataGridPro, GridColDef } from "@mui/x-data-grid-pro";
import { typography } from "../styles/theme";
import { typography, colors } from "../styles/theme";
interface ListProps {
title: string;
@ -11,6 +11,7 @@ interface ListProps {
columns: GridColDef<any>[];
onRowClick?: (id: string) => void;
buttons?: React.ReactNode;
paginate?: boolean;
}
export const List: FC<ListProps> = ({
@ -19,49 +20,59 @@ export const List: FC<ListProps> = ({
columns,
onRowClick,
buttons,
paginate = false,
}) => {
const { h3 } = typography;
const { mediumGray, lightGray, veryLightGray, mediumBlue, white, darkGray } =
colors;
return (
<Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
<Box sx={{ height: "100vh", backgroundColor: lightGray, p: 3 }}>
<Grid container direction="column">
<Grid item container direction="row" justifyContent="space-between">
<Grid item>
<Grid
item
container
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Grid item xs="auto">
<Box sx={h3}>{title}</Box>
</Grid>
<Grid item>{buttons}</Grid>
<Grid item xs="auto">
{buttons}
</Grid>
</Grid>
<Grid item>
<Box
sx={{
mt: 2,
backgroundColor: "#ddd",
backgroundColor: "transparent",
border: 0,
width: "100%",
height: "calc(100vh - 100px)",
".MuiDataGrid-row": {
cursor: "pointer",
"&:hover": {
backgroundColor: "#1982fc33 !important",
backgroundColor: `${mediumBlue}22 !important`,
fontWeight: "bold",
},
},
".MuiDataGrid-row:nth-of-type(1n)": {
backgroundColor: "#f3f3f3",
backgroundColor: white,
},
".MuiDataGrid-row:nth-of-type(2n)": {
backgroundColor: "#fff",
backgroundColor: veryLightGray,
},
".MuiDataGrid-columnHeaderTitle": {
color: "#333",
color: darkGray,
fontWeight: "bold",
fontSize: 11,
margin: "0 auto",
},
".MuiDataGrid-columnHeader": {
backgroundColor: "#ccc",
backgroundColor: mediumGray,
border: 0,
borderBottom: "3px solid #ddd",
},
}}
>
@ -69,7 +80,9 @@ export const List: FC<ListProps> = ({
rows={rows}
columns={columns}
density="compact"
pagination
pagination={paginate}
hideFooterRowCount={!paginate}
hideFooter={!paginate}
initialState={{
pagination: { paginationModel: { pageSize: 25 } },
}}

31
packages/ui/components/Select.tsx Normal file
View file

@ -0,0 +1,31 @@
import { FC } from "react";
import { Select as InternalSelect } from "@mui/material";
type SelectProps = {
name: string;
label: string;
formState: Record<string, any>;
children: React.ReactNode;
};
export const Select: FC<SelectProps> = ({
name,
label,
formState,
children,
}) => (
<InternalSelect
fullWidth
name={name}
label={label}
variant="outlined"
size="small"
inputProps={{ id: name }}
defaultValue={formState.values[name] || ""}
sx={{
backgroundColor: "#fff",
}}
>
{children}
</InternalSelect>
);

38
packages/ui/components/TextField.tsx Normal file
View file

@ -0,0 +1,38 @@
import { FC } from "react";
import { TextField as InternalTextField } from "@mui/material";
type TextFieldProps = {
name: string;
label: string;
formState: Record<string, any>;
required?: boolean;
lines?: number;
helperText?: string;
};
export const TextField: FC<TextFieldProps> = ({
name,
label,
formState,
required = false,
lines = 1,
helperText,
}) => (
<InternalTextField
fullWidth
name={name}
label={label}
size="small"
multiline={lines > 1}
rows={lines}
required={required}
defaultValue={formState.values[name]}
error={Boolean(formState.errors[name])}
helperText={formState.errors[name] ?? helperText}
InputProps={{
sx: {
backgroundColor: "#fff",
},
}}
/>
);

5
packages/ui/index.ts
View file

@ -5,4 +5,9 @@ LicenseInfo.setLicenseKey(
);
export { List } from "./components/List";
export { Button } from "./components/Button";
export { TextField } from "./components/TextField";
export { DisplayTextField } from "./components/DisplayTextField";
export { Select } from "./components/Select";
export { Dialog } from "./components/Dialog";
export { fonts, typography, colors } from "./styles/theme";

4
packages/ui/styles/theme.ts
View file

@ -25,8 +25,10 @@ export const fonts = {
};
export const colors: any = {
veryLightGray: "#f5f5f7",
lightGray: "#ededf0",
mediumGray: "#e3e5e5",
darkMediumGray: "#a3a5a5",
darkGray: "#33302f",
mediumBlue: "#4285f4",
green: "#349d7b",
@ -49,8 +51,10 @@ export const colors: any = {
lightGreen: "#f0fff3",
lightOrange: "#fff5f0",
beige: "#f6f2f1",
brightRed: "#ff0030",
almostBlack: "#33302f",
white: "#ffffff",
black: "#000000",
};
export const typography: any = {

2
packages/ui/tsconfig.tsbuildinfo
View file

File diff suppressed because one or more lines are too long