Merge pull request #134 from linked-planet/dev

Dev

Author: marcus-wishes

library/src/layouting/AppLayout.tsx

@@ -69,13 +69,12 @@ function Container({
 	children,
 	className,
 	style,
-	testId,
 	useBanner = false,
+	...props
 }: {
 	children: React.ReactNode
 	className?: string
 	style?: React.CSSProperties
-	testId?: string
 	useBanner?: boolean
 }) {
 	return (
@@ -85,7 +84,6 @@ function Container({
 				className,
 			)}
 			data-layout-container="true"
-			data-testid={testId}
 			style={{
 				gridTemplateAreas: useBanner
 					? `
@@ -107,6 +105,7 @@ function Container({
 					: `calc(100dvh - var(${bannerHeightVar}, 0px))`,
 				...style,
 			}}
+			{...props}
 		>
 			{children}
 		</div>
@@ -120,11 +119,10 @@ function Banner({
 	children,
 	className,
 	style,
-	testId,
 	sticky,
 	height,
+	...props
 }: React.ComponentPropsWithRef<"div"> & {
-	testId?: string
 	sticky?: boolean
 	height?: number | string
 }) {
@@ -152,7 +150,6 @@ function Banner({
 				className,
 			)}
 			data-layout-banner="true"
-			data-testid={testId}
 			style={{
 				height: `var(${bannerHeightVar}, min-content)`,
 				gridArea: "banner",
@@ -165,6 +162,7 @@ function Banner({
 					: undefined,*/
 				...style,
 			}}
+			{...props}
 		>
 			{children}
 		</div>
@@ -178,11 +176,10 @@ function TopNavigation({
 	children,
 	className,
 	style,
-	testId,
 	height,
 	sticky,
+	...props
 }: React.ComponentPropsWithRef<"header"> & {
-	testId?: string
 	height?: number | string
 	sticky?: boolean
 }) {
@@ -194,15 +191,18 @@ function TopNavigation({
 			const heightVal =
 				typeof height === "number" ? `${height}px` : height
 			root.style.setProperty(topNavigationHeightVar, heightVal)
-			//root.style.setProperty("--_topNavigationHeight", heightVal)
-		} else {
-			const h = localRef.current?.clientHeight
-			if (h) {
-				root.style.setProperty(topNavigationHeightVar, `${h}px`)
-			}
 		}
 	}, [height])
 
+	// set the height to the local ref height if it is not already set, this is to prevent the height from being set to 0
+	const root = document.documentElement
+	const h = localRef.current?.clientHeight
+	const currVal = root.style.getPropertyValue(topNavigationHeightVar)
+	if (h && currVal !== `${h}px`) {
+		root.style.setProperty(topNavigationHeightVar, `${h}px`)
+	}
+	//
+
 	return (
 		<header
 			ref={localRef}
@@ -211,7 +211,6 @@ function TopNavigation({
 				className,
 			)}
 			data-layout-top-navigation="true"
-			data-testid={testId}
 			style={{
 				height: `var(${topNavigationHeightVar}, min-content)`,
 				gridArea: "top-navigation",
@@ -221,6 +220,7 @@ function TopNavigation({
 				insetInlineStart: "var(--leftPanelWidth, auto)",*/
 				...style,
 			}}
+			{...props}
 		>
 			{children}
 		</header>
@@ -236,6 +236,7 @@ function LeftPanel({
 	style,
 	sticky,
 	width = 128,
+	...props
 }: React.ComponentPropsWithRef<"aside"> & {
 	sticky?: boolean
 	width?: number
@@ -257,6 +258,7 @@ function LeftPanel({
 				gridArea: "left-panel",
 				...style,
 			}}
+			{...props}
 		>
 			{children}
 		</aside>
@@ -270,11 +272,10 @@ function RightPanel({
 	children,
 	className,
 	style,
-	testId,
 	sticky,
 	width = 128,
+	...props
 }: React.ComponentPropsWithRef<"aside"> & {
-	testId?: string
 	sticky?: boolean
 	width?: number
 }) {
@@ -290,12 +291,12 @@ function RightPanel({
 				className,
 			)}
 			data-layout-right-panel="true"
-			data-testid={testId}
 			style={{
 				width: `var(${rightPanelWidthVar}, 0px)`,
 				gridArea: "right-panel",
 				...style,
 			}}
+			{...props}
 		>
 			{children}
 		</aside>
@@ -306,24 +307,22 @@ function Content({
 	children,
 	className,
 	style,
-	testId,
-}: React.ComponentPropsWithRef<"section"> & {
-	testId?: string
-}) {
+	...props
+}: React.ComponentPropsWithRef<"section">) {
 	return (
 		<section
 			className={twMerge(
 				"relative grid size-full min-h-0 overflow-hidden",
 				className,
 			)}
 			data-layout-content="true"
-			data-testid={testId}
 			style={{
 				gridArea: "content",
 				gridTemplateAreas: '"left-sidebar main right-sidebar"',
 				gridTemplateColumns: "auto 1fr auto",
 				...style,
 			}}
+			{...props}
 		>
 			{children}
 		</section>
@@ -334,10 +333,9 @@ function Main({
 	children,
 	className,
 	style,
-	testId,
 	fixedHeight,
+	...props
 }: React.ComponentPropsWithRef<"main"> & {
-	testId?: string
 	fixedHeight?: boolean
 }) {
 	return (
@@ -347,7 +345,6 @@ function Main({
 				className,
 			)}
 			data-layout-main="true"
-			data-testid={testId}
 			style={{
 				gridArea: "main",
 				height: fixedHeight
@@ -356,6 +353,7 @@ function Main({
 				overflow: fixedHeight ? "hidden" : undefined,
 				...style,
 			}}
+			{...props}
 		>
 			{children}
 		</main>

library/src/GlobalState.tsx renamed to library/src/utils/GlobalState.tsx

@@ -20,3 +20,5 @@ export { isTimeType, isDateTimeType, isDateType }
 export * as DateUtils from "./DateUtils"
 
 export * from "./ErrorHandler"
+
+export * from "./GlobalState"

library/src/utils/index.ts

@@ -103,7 +103,7 @@
 		"highlight.js": "^11.11.1",
 		"intl-messageformat": "^10.7.14",
 		"lowlight": "^3.3.0",
-		"lucide-react": "^0.482.0",
+		"lucide-react": "^0.483.0",
 		"mime-types": "^2.1.35",
 		"motion": "^12.5.0",
 		"react-awesome-slider": "^4.1.0",
@@ -130,7 +130,7 @@
 		"@hello-pangea/dnd": "^18.0.1",
 		"@monaco-editor/react": "^4.7.0",
 		"@tailwindcss/vite": "^4.0.14",
-		"@tanstack/react-query": "^5.68.0",
+		"@tanstack/react-query": "^5.69.0",
 		"@total-typescript/ts-reset": "^0.6.1",
 		"@types/node": "^22.13.10",
 		"@types/react": "^18.3.18",

package-lock.json

@@ -1,7 +1,7 @@
 import ShowcaseWrapperItem, {
 	type ShowcaseProps,
 } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
-import { useGlobalState } from "@linked-planet/ui-kit-ts/GlobalState"
+import { useGlobalState } from "@linked-planet/ui-kit-ts"
 import { Input, Label } from "@linked-planet/ui-kit-ts"
 
 //#region global-state
@@ -99,7 +99,7 @@ export default function GlobalStateShowcase(props: ShowcaseProps) {
 			packages={[
 				{
 					name: "@linked-planet/ui-kit-ts",
-					url: "https://linked-planet.github.io/ui-kit-ts/single?component=GlobalState",
+					url: "/ui-kit-ts/single?component=GlobalState",
 				},
 			]}
 			examples={[