Merge pull request #28 from linked-planet/dev

Dev

Author: marcus-wishes

biome.json

@@ -12,7 +12,12 @@
 	"organizeImports": { "enabled": true },
 	"linter": {
 		"enabled": true,
-		"rules": { "recommended": true },
+		"rules": { 
+			"recommended": true, 
+			"complexity": {
+				"noForEach": "off"
+			}
+		},
 		"ignore": [
 			"node_modules",
 			"dist",
@@ -30,7 +35,6 @@
 		"formatter": {
 			"jsxQuoteStyle": "double",
 			"quoteProperties": "asNeeded",
-			"trailingComma": "all",
 			"semicolons": "asNeeded",
 			"arrowParentheses": "always",
 			"bracketSpacing": true,

library/src/components/Button.tsx

@@ -56,6 +56,8 @@ export type ButtonProps = {
 	| "onTouchCancel"
 	| "title"
 	| "aria-label"
+	| "tabIndex"
+	| "aria-disabled"
 >
 
 const ButtonStyles: { [style in ButtonAppearance]: string } = {

library/src/components/Flag.tsx

@@ -20,10 +20,11 @@ export type FlagProps = {
 	title: string
 	description: string | JSX.Element
 	appearance?: FlagAppearance
-	inverted?: boolean
+	type?: "default" | "inverted" | "pale"
 	icon?: JSX.Element
 	actions?: FlagActionType[]
 	style?: CSSProperties
+	className?: string
 	id?: string
 	testId?: string
 }
@@ -36,7 +37,7 @@ export type FlagActionType = {
 	testId?: string | undefined
 }
 
-const defaultStyle = "bg-text text-text-inverse"
+const defaultStyle = "bg-neutral-full text-text-inverse"
 const warningStyle = "bg-warning-bold text-text-inverse"
 const errorStyle = "bg-danger-bold text-text-inverse"
 const successStyle = "bg-success-bold text-text-inverse"
@@ -65,11 +66,28 @@ export const FlagInvertedStyles: {
 	information: informationInvertedStyle,
 } as const
 
-const defaultIconStyle = "text-text"
-const warningIconStyle = "text-warning-bold"
-const errorIconStyle = "text-danger-bold"
-const successIconStyle = "text-success-bold"
-const informationIconStyle = "text-information-bold"
+const paleDefaultStyle = "bg-neutral text-text border-border"
+const paleWarningStyle = "bg-warning text-warning-text border-warning-border"
+const paleErrorStyle = "bg-danger text-danger-text border-danger-border"
+const paleSuccessStyle = "bg-success text-success-text border-success-border"
+const paleInformationStyle =
+	"bg-information text-information-text border-information-border"
+
+export const FlagPaleStyles: {
+	[style in FlagAppearance]: string
+} = {
+	default: paleDefaultStyle,
+	warning: paleWarningStyle,
+	error: paleErrorStyle,
+	success: paleSuccessStyle,
+	information: paleInformationStyle,
+} as const
+
+const defaultIconStyle = "text-icon"
+const warningIconStyle = "text-warning-icon"
+const errorIconStyle = "text-danger-icon"
+const successIconStyle = "text-success-icon"
+const informationIconStyle = "text-information-icon"
 
 const IconStyles: { [style in FlagAppearance]: string } = {
 	default: defaultIconStyle,
@@ -80,10 +98,10 @@ const IconStyles: { [style in FlagAppearance]: string } = {
 } as const
 
 const defaultIconInvertedStyle = "text-text"
-const warningIconInvertedStyle = "text-warning-bold-hovered"
-const errorIconInvertedStyle = "text-danger-bold-hovered"
-const successIconInvertedStyle = "text-success-bold-hovered"
-const informationIconInvertedStyle = "text-information-bold-hovered"
+const warningIconInvertedStyle = "text-warning-icon"
+const errorIconInvertedStyle = "text-danger-icon"
+const successIconInvertedStyle = "text-success-icon"
+const informationIconInvertedStyle = "text-information-icon"
 
 const IconInvertedStyles: { [style in FlagAppearance]: string } = {
 	default: defaultIconInvertedStyle,
@@ -95,14 +113,15 @@ const IconInvertedStyles: { [style in FlagAppearance]: string } = {
 
 function FlagIcon({
 	appearance = "default",
-	invert,
+	type,
 }: {
 	appearance?: FlagAppearance
-	invert: boolean
+	type: "default" | "inverted" | "pale"
 }) {
-	const iconStyle = invert
-		? IconStyles[appearance]
-		: IconInvertedStyles[appearance]
+	const iconStyle =
+		type === "default" || type === "pale"
+			? IconStyles[appearance]
+			: IconInvertedStyles[appearance]
 
 	switch (appearance) {
 		case "default": {
@@ -146,18 +165,22 @@ export function Flag({
 	description,
 	icon,
 	appearance = "default",
-	inverted = false,
+	type = "default",
 	actions,
 	style,
+	className,
 	id,
 	testId,
 }: FlagProps) {
-	const appStyle = inverted
-		? FlagInvertedStyles[appearance]
-		: FlagStyles[appearance]
+	const appStyle =
+		type === "default"
+			? FlagStyles[appearance]
+			: type === "inverted"
+				? FlagInvertedStyles[appearance]
+				: FlagPaleStyles[appearance]
 
 	if (!icon) {
-		icon = <FlagIcon appearance={appearance} invert={inverted} />
+		icon = <FlagIcon appearance={appearance} type={type} />
 	}
 
 	return (
@@ -169,8 +192,9 @@ export function Flag({
 			className={twMerge(
 				appStyle,
 				`grid gap-4 rounded-sm p-4 shadow-md ${
-					inverted ? "border" : ""
+					type === "inverted" || type === "pale" ? "border" : ""
 				}`,
+				className,
 			)}
 			id={id}
 			data-testid={testId}

library/src/components/Pagination.tsx

@@ -89,6 +89,8 @@ function PaginationPageHandler<P extends string | number>({
 	className,
 	style,
 	pageLabel,
+	pageButtonClassName,
+	pageButtonStyle,
 }: {
 	pages: P[]
 	currentPage?: P
@@ -104,6 +106,8 @@ function PaginationPageHandler<P extends string | number>({
 	pageLabel?: string
 	className?: string
 	style?: React.CSSProperties
+	pageButtonClassName?: string
+	pageButtonStyle?: React.CSSProperties
 }) {
 	const [_currentPage, setCurrentPage] = useState(
 		currentPage ?? defaultPage ?? pages[0],
@@ -185,11 +189,14 @@ function PaginationPageHandler<P extends string | number>({
 				<li>
 					<button
 						disabled={currentIdx <= 0}
-						className={`flex h-8 w-8 select-none items-center justify-center rounded p-1.5 ${
-							currentIdx > 0
-								? "hover:bg-neutral-hovered active:bg-neutral-pressed text-text"
-								: "text-disabled-text"
-						}`}
+						className={twMerge(
+							`flex h-8 w-8 select-none items-center justify-center rounded p-1.5 ${
+								currentIdx > 0
+									? "hover:bg-neutral-hovered active:bg-neutral-pressed text-text"
+									: "text-disabled-text"
+							}`,
+							pageButtonClassName,
+						)}
 						onClick={() => {
 							const currentIndex = pages.indexOf(_currentPage)
 							setCurrentPage(pages[currentIndex - 1])
@@ -212,9 +219,9 @@ function PaginationPageHandler<P extends string | number>({
 							<button
 								className={twMerge(
 									"flex h-8 min-w-8 select-none items-center justify-center rounded p-1.5",
-									page === _currentPage
-										? "bg-selected text-selected-text-inverse"
-										: "hover:bg-neutral-hovered active:bg-neutral-pressed",
+									"data-[current=true]:bg-selected data-[current=true]:text-selected-text-inverse",
+									"hover:bg-neutral-hovered active:bg-neutral-pressed",
+									pageButtonClassName,
 								)}
 								onClick={() => {
 									const currentIndex = pages.indexOf(
@@ -239,6 +246,8 @@ function PaginationPageHandler<P extends string | number>({
 								aria-current={
 									page === _currentPage ? "page" : undefined
 								}
+								style={pageButtonStyle}
+								data-current={page === _currentPage}
 							>
 								{page}
 							</button>
@@ -254,11 +263,14 @@ function PaginationPageHandler<P extends string | number>({
 					</li>
 				))}
 				<button
-					className={`flex h-8 w-8 select-none items-center justify-center rounded p-1.5 ${
-						currentIdx < pages.length - 1
-							? "hover:bg-neutral-hovered active:bg-neutral-pressed text-text"
-							: "text-disabled-text"
-					}`}
+					className={twMerge(
+						`flex h-8 w-8 select-none items-center justify-center rounded p-1.5 ${
+							currentIdx < pages.length - 1
+								? "hover:bg-neutral-hovered active:bg-neutral-pressed text-text"
+								: "text-disabled-text"
+						}`,
+						pageButtonClassName,
+					)}
 					onClick={() => {
 						const _currentIndex = pages.indexOf(_currentPage)
 						setCurrentPage(pages[_currentIndex + 1])
@@ -270,6 +282,7 @@ function PaginationPageHandler<P extends string | number>({
 					aria-label={nextLabel}
 					aria-disabled={currentIdx >= pages.length - 1}
 					type="button"
+					style={pageButtonStyle}
 				>
 					<IconSizeHelper>
 						<ChevronRightLargeIcon size="medium" label="" />
@@ -301,6 +314,8 @@ export function Pagination<P extends string | number>({
 	previousLabel = "Previous Page",
 	nextLabel = "Next Page",
 	pageLabel = "",
+	pageButtonClassName,
+	pageButtonStyle,
 	...pageSizeSelectorProps
 }: {
 	totalPages?: number
@@ -326,6 +341,8 @@ export function Pagination<P extends string | number>({
 	pageLabel?: string
 	className?: string
 	style?: React.CSSProperties
+	pageButtonClassName?: string
+	pageButtonStyle?: React.CSSProperties
 }) {
 	const _pages = useMemo(() => {
 		if (pages) return pages
@@ -359,6 +376,8 @@ export function Pagination<P extends string | number>({
 					nextLabel={nextLabel}
 					label={label}
 					pageLabel={pageLabel}
+					pageButtonClassName={pageButtonClassName}
+					pageButtonStyle={pageButtonStyle}
 				/>
 			</div>
 			{!hidePageSize && (

library/src/components/ToastFlag.tsx

@@ -15,11 +15,13 @@ import {
 	type FlagActionType,
 	type FlagAppearance,
 	FlagInvertedStyles,
+	FlagPaleStyles,
 	type FlagProps,
 	FlagStyles,
 } from "./Flag"
 
-type ToastFlagProps = FlagProps & ToastOptions
+type ToastFlagProps = Omit<FlagProps, "type"> &
+	Omit<ToastOptions, "type"> & { flagType?: FlagProps["type"] }
 
 const defaultSettings: ToastOptions = {
 	position: "bottom-right",
@@ -84,20 +86,33 @@ function CloseButton({
 	)
 }
 
-export function ToastFlagContainer(props: ToastContainerProps) {
+export function ToastFlagContainer(
+	props: ToastContainerProps & { toastWidth?: number | string },
+) {
+	if (props.toastWidth) {
+		// get ":root"
+		const root = document.documentElement
+		root.style.setProperty(
+			"--toastify-toast-width",
+			props.toastWidth.toString(),
+		)
+	}
+
 	const portalNode = getPortal(portalDivId)
 	return <>{createPortal(<ToastContainer {...props} />, portalNode)}</>
 }
 
 export function showFlagExtended({
 	style,
 	appearance = "default",
-	inverted = false,
+	className: _className,
+	flagType = "inverted",
 	...props
 }: ToastFlagProps) {
-	const progressClassName = inverted
-		? progressInvertedStyles[appearance]
-		: progressStyles[appearance]
+	const progressClassName =
+		flagType === "inverted" || flagType === "pale"
+			? progressInvertedStyles[appearance]
+			: progressStyles[appearance]
 
 	const flagStyle: CSSProperties = {
 		boxShadow: "unset",
@@ -107,22 +122,31 @@ export function showFlagExtended({
 		fontFamily: "unset",
 	}
 
-	const className = inverted
-		? FlagInvertedStyles[appearance]
-		: FlagStyles[appearance]
+	const className = twMerge(
+		flagType === "inverted"
+			? FlagInvertedStyles[appearance]
+			: flagType === "pale"
+				? FlagPaleStyles[appearance]
+				: FlagStyles[appearance],
+		_className,
+	)
 
 	toast(
 		<Flag
 			icon={props.icon}
 			appearance={appearance}
-			inverted={inverted}
+			type={flagType}
 			style={flagStyle}
+			className="bottom-0 bg-transparent p-0 shadow-none"
 			{...props}
 		/>,
 		{
 			...defaultSettings,
 			closeButton: (p: CloseButtonProps) => (
-				<CloseButton inverted={inverted} {...p} />
+				<CloseButton
+					inverted={flagType === "inverted" || flagType === "pale"}
+					{...p}
+				/>
 			),
 			...props,
 			style,
@@ -131,7 +155,12 @@ export function showFlagExtended({
 				"--toastify-color-progress-light": "invalid",
 			} as CSSProperties,
 			progressClassName: progressClassName,
-			className: twMerge(className, inverted ? "border" : undefined),
+			className: twMerge(
+				className,
+				flagType === "inverted" || flagType === "pale"
+					? "border border-solid"
+					: undefined,
+			),
 		},
 	)
 }
@@ -146,12 +175,12 @@ type SimpleFlagProps = {
 	autoClose?: false | number
 	position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
 	actions?: FlagActionType[]
+	flagType?: FlagProps["type"]
 }
 
 export function showFlag(props: SimpleFlagProps) {
 	showFlagExtended({
 		...props,
-		inverted: true,
 	})
 }