Merge pull request #48 from linked-planet/dev

Dev

Author: marcus-wishes

library/src/components/dnd/DnDList.tsx

@@ -0,0 +1,61 @@
+import { DragDropContext, Droppable, type DropResult } from "@hello-pangea/dnd"
+import { useCallback } from "react"
+
+export type DnDListProps<T> = {
+	items?: Array<T>
+	onOrderChanged?: (items: Array<T>) => void
+	onIndexChanged?: (oldIndex: number, newIndex: number) => void
+
+	children: JSX.Element[]
+}
+
+export function DnDList<T>({
+	items,
+	onOrderChanged,
+	onIndexChanged,
+	children,
+}: DnDListProps<T>) {
+	const onDragEnd = useCallback(
+		(result: DropResult) => {
+			// dropped outside the list
+			if (!result.destination) {
+				return
+			}
+			if (onIndexChanged) {
+				onIndexChanged(result.source.index, result.destination.index)
+			}
+			if (items && onOrderChanged) {
+				const [removed] = items.splice(result.source.index, 1)
+				const newOrder = items.slice()
+				newOrder.splice(result.destination.index, 0, removed)
+				onOrderChanged(newOrder)
+			}
+		},
+		[items, onIndexChanged, onOrderChanged],
+	)
+
+	return (
+		<div
+			className={`${
+				children.length > 0
+					? "block border-border hover:border-border-bold"
+					: "opacity-0 border-transparent"
+			} box-border border`}
+		>
+			<DragDropContext onDragEnd={onDragEnd}>
+				<Droppable droppableId="droppable">
+					{(provided) => (
+						<div
+							{...provided.droppableProps}
+							ref={provided.innerRef}
+							className="flex flex-col w-full"
+						>
+							{children}
+							{provided.placeholder}
+						</div>
+					)}
+				</Droppable>
+			</DragDropContext>
+		</div>
+	)
+}

library/src/components/dnd/DragItem.tsx

@@ -0,0 +1,61 @@
+import React from "react"
+import { twMerge } from "tailwind-merge"
+import { Draggable } from "@hello-pangea/dnd"
+import { MoreVerticalIcon } from "lucide-react"
+
+export type DragItemProps = {
+	draggableId: string
+	index: number
+	children: React.ReactNode
+	thin?: boolean
+	className?: string
+	style?: React.CSSProperties
+}
+
+export function DragItem({
+	draggableId,
+	index,
+	children,
+	className,
+	style,
+	thin = false,
+}: DragItemProps) {
+	const draggableRef = React.useRef(null)
+	return (
+		<Draggable draggableId={draggableId} index={index}>
+			{({ innerRef, draggableProps, dragHandleProps }) => {
+				// offset bug workaround:  https://github.com/atlassian/react-beautiful-dnd/issues/1881
+				const dragStyle = {
+					...style,
+					...draggableProps.style,
+					top: "auto",
+					left: "auto",
+				}
+				//
+				return (
+					<div ref={draggableRef}>
+						<div
+							{...draggableProps}
+							style={dragStyle}
+							className={twMerge(
+								"flex h-full w-full bg-surface border-border border rounded-sm",
+								className,
+							)}
+							ref={innerRef}
+						>
+							<div
+								className={`flex-none ${thin ? "p-0" : "p-2"} flex justify-center items-center border-r border-border bg-surface-raised hover:bg-surface-raised-hovered active:bg-surface-raised-pressed`}
+								{...dragHandleProps}
+							>
+								<MoreVerticalIcon area-label="Drag Handle" />
+							</div>
+							<div className={`flex-1 ${thin ? "pl-2" : "p-2"}`}>
+								{children}
+							</div>
+						</div>
+					</div>
+				)
+			}}
+		</Draggable>
+	)
+}

library/src/components/dnd/index.ts

@@ -0,0 +1,12 @@
+import { DnDList, type DnDListProps as DnDListPropsType } from "./DnDList"
+import { DragItem, type DragItemProps as DragItemPropsType } from "./DragItem"
+
+export const DnD = {
+	List: DnDList,
+	DragItem,
+}
+
+export namespace DnD {
+	export type DnDListProps<T> = DnDListPropsType<T>
+	export type DragItemProps = DragItemPropsType
+}

library/src/components/index.ts

@@ -33,3 +33,4 @@ export * from "./Blanket"
 export * from "./Breadcrumbs"
 export * from "./SectionMessage"
 export * from "./codeblock"
+export * from "./dnd"

library/src/localization/LocaleContext.tsx

@@ -29,7 +29,10 @@ const translationsPath = "./translations-compiled"
 	"./translations-compiled/de.json"
 )*/
 const messageTranslations: Record<string, Record<string, string>> = {}
-export const defaultLanguage = navigator?.language.substring(0, 2) ?? "en"
+export const defaultLanguage =
+	typeof navigator !== "undefined"
+		? (navigator?.language.substring(0, 2) ?? "en")
+		: "en"
 // this would load all the message translations immediatly, but we simply use dynamic imports
 /*;(async function main() {
 	const loadMessages = async (language: string) => {