Moved tabler compoments into this project for more control

Author: jc21

frontend/package.json

@@ -16,6 +16,7 @@
 		"@typescript-eslint/eslint-plugin": "^4.28.1",
 		"@typescript-eslint/parser": "^4.28.1",
 		"babel-eslint": "^10.1.0",
+		"classnames": "^2.3.1",
 		"date-fns": "2.22.1",
 		"eslint": "^7.30.0",
 		"eslint-config-prettier": "^8.3.0",
@@ -46,8 +47,6 @@
 		"rooks": "5.0.2",
 		"styled-components": "5.3.0",
 		"tabler-icons-react": "^1.35.0",
-		"tabler-react": "^2.0.0-alpha.1",
-		"tabler-react-typescript": "0.0.5",
 		"typescript": "^4.3.5"
 	},
 	"scripts": {

frontend/src/components/Alert/Alert.tsx

@@ -0,0 +1,130 @@
+import React, { ReactNode, useState } from "react";
+
+import cn from "classnames";
+
+import { AlertLink } from "./AlertLink";
+
+export interface AlertProps {
+	/**
+	 * Child elements within
+	 */
+	children?: ReactNode;
+	/**
+	 * Additional Class
+	 */
+	className?: string;
+	/**
+	 * The type of this Alert, changes it's color
+	 */
+	type?: "info" | "success" | "warning" | "danger";
+	/**
+	 * Alert Title
+	 */
+	title?: string;
+	/**
+	 * An Icon to be displayed on the right hand side of the Alert
+	 */
+	icon?: ReactNode;
+	/**
+	 * Display an Avatar on the left hand side of this Alert
+	 */
+	avatar?: ReactNode;
+	/**
+	 *
+	 */
+	important?: boolean;
+	/**
+	 * Adds an 'X' to the right side of the Alert that dismisses the Alert
+	 */
+	dismissable?: boolean;
+	/**
+	 * Event to call after dissmissing
+	 */
+	onDismissClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export const Alert: React.FC<AlertProps> = ({
+	children,
+	className,
+	type = "info",
+	title,
+	icon,
+	avatar,
+	important = false,
+	dismissable = false,
+	onDismissClick,
+}) => {
+	const [dismissed, setDismissed] = useState(false);
+
+	const classes = {
+		"alert-dismissible": dismissable,
+		"alert-important": important,
+	};
+
+	const handleDismissed = (
+		e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+	) => {
+		setDismissed(true);
+		onDismissClick && onDismissClick(e);
+	};
+
+	const wrappedTitle = title ? <h4 className="alert-title">{title}</h4> : null;
+	const wrappedChildren =
+		children && !important ? (
+			<div className="text-muted">{children}</div>
+		) : (
+			children
+		);
+
+	const wrapIfIcon = (): ReactNode => {
+		if (avatar) {
+			return (
+				<div className="d-flex">
+					<div>
+						<span className="float-start me-3">{avatar}</span>
+					</div>
+					<div>{wrappedChildren}</div>
+				</div>
+			);
+		}
+		if (icon) {
+			return (
+				<div className="d-flex">
+					<div>
+						<span className="alert-icon">{icon}</span>
+					</div>
+					<div>
+						{wrappedTitle}
+						{wrappedChildren}
+					</div>
+				</div>
+			);
+		}
+		return (
+			<>
+				{wrappedTitle}
+				{wrappedChildren}
+			</>
+		);
+	};
+
+	if (!dismissed) {
+		return (
+			<div
+				className={cn("alert", `alert-${type}`, classes, className)}
+				role="alert">
+				{wrapIfIcon()}
+				{dismissable ? (
+					<button
+						className="btn-close"
+						data-bs-dismiss="alert"
+						aria-label="close"
+						onClick={handleDismissed}
+					/>
+				) : null}
+			</div>
+		);
+	}
+	return null;
+};
+
+Alert.Link = AlertLink;

frontend/src/components/Alert/AlertLink.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode } from "react";
+
+import cn from "classnames";
+
+export interface AlertLinkProps {
+	/**
+	 * Child elements within
+	 */
+	children?: ReactNode;
+	/**
+	 * Additional Class
+	 */
+	className?: string;
+	/**
+	 * Href
+	 */
+	href?: string;
+	/**
+	 * onClick handler
+	 */
+	onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+}
+export const AlertLink: React.FC<AlertLinkProps> = ({
+	children,
+	className,
+	href,
+	onClick,
+}) => {
+	return (
+		<a className={cn("alert-link", className)} href={href} onClick={onClick}>
+			{children}
+		</a>
+	);
+};

frontend/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export * from "./Alert";

frontend/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,73 @@
+import React, { ReactNode } from "react";
+
+import cn from "classnames";
+
+import { Badge } from "../Badge";
+
+export interface AvatarProps {
+	/**
+	 * Child elements within
+	 */
+	children?: ReactNode;
+	/**
+	 * Additional Class
+	 */
+	className?: string;
+	/**
+	 * Color only when using Initials
+	 */
+	color?: string;
+	/**
+	 * Full or data url of an avatar image
+	 */
+	url?: string;
+	/**
+	 * Initials to use instead of an image
+	 */
+	initials?: string;
+	/**
+	 * Size of the avatar
+	 */
+	size?: string;
+	/**
+	 * Display a status color
+	 */
+	status?: "info" | "success" | "warning" | "danger";
+	/**
+	 * Shape of the avatar
+	 */
+	shape?: "rounded" | "rounded-circle" | "rounded-0" | "rounded-lg";
+	/**
+	 * Icon instead of Image or Initials
+	 */
+	icon?: ReactNode;
+}
+export const Avatar: React.FC<AvatarProps> = ({
+	children,
+	className,
+	color,
+	url,
+	initials,
+	size,
+	shape,
+	status,
+	icon,
+}) => {
+	const styles = {
+		backgroundImage: "url('" + url + "')",
+	};
+
+	const classes = [];
+	color && classes.push("bg-" + color);
+	size && classes.push("avatar-" + size);
+	shape && classes.push(shape);
+
+	return (
+		<span style={styles} className={cn("avatar", classes, className)}>
+			{initials && !url ? initials.toUpperCase() : null}
+			{!initials && !url ? children : null}
+			{icon && <span className="avatar-icon">{icon}</span>}
+			{status ? <Badge color={status} /> : null}
+		</span>
+	);
+};

frontend/src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export * from "./Avatar";

frontend/src/components/AvatarList/AvatarList.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode } from "react";
+
+import cn from "classnames";
+
+export interface AvatarListProps {
+	/**
+	 * Child elements within
+	 */
+	children?: ReactNode;
+	/**
+	 * Additional Class
+	 */
+	className?: string;
+	/**
+	 * Displays stacked avatars
+	 */
+	stacked?: boolean;
+}
+export const AvatarList: React.FC<AvatarListProps> = ({
+	children,
+	className,
+	stacked,
+}) => {
+	return (
+		<div
+			className={cn(
+				"avatar-list",
+				stacked && "avatar-list-stacked",
+				className,
+			)}>
+			{children}
+		</div>
+	);
+};

frontend/src/components/AvatarList/index.ts

@@ -0,0 +1 @@
+export * from "./AvatarList";

frontend/src/components/Badge/Badge.tsx

@@ -0,0 +1,36 @@
+import React, { ReactNode } from "react";
+
+import cn from "classnames";
+
+export interface BadgeProps {
+	/**
+	 * Child elements within
+	 */
+	children?: ReactNode;
+	/**
+	 * Additional Class
+	 */
+	className?: string;
+	/**
+	 * Color of the Badge
+	 */
+	color?: string;
+	/**
+	 * Type of Badge
+	 */
+	type?: "pill" | "soft";
+}
+export const Badge: React.FC<BadgeProps> = ({
+	children,
+	className,
+	color,
+	type,
+}) => {
+	let modifier = "";
+
+	type === "soft" && (modifier = "-lt");
+	const classes = ["badge", "bg-" + (color || "blue") + modifier];
+	type === "pill" && classes.push("badge-pill");
+
+	return <span className={cn(classes, className)}>{children}</span>;
+};

frontend/src/components/Badge/index.ts

@@ -0,0 +1 @@
+export * from "./Badge";