@onehat/ui 0.4.102 → 0.4.104

package/.github/copilot-instructions.md.bak.20260307094051

@@ -0,0 +1,65 @@
+# Copilot Instructions
+
+## General Principles
+- Be direct, concise, and critical. Do not apologize, agree blindly, be sycophantic, or use flattery.
+- If a request is inefficient or flawed, point it out and suggest a better, more secure, or more idiomatic approach.
+- Use "Uncle Bob's Clean Code" principles as a baseline for code quality.
+- Prioritize clarity over cleverness.
+- Avoid unnecessary abstractions.
+- Prefer explicit code over magic.
+- Follow the project's existing coding style and conventions.
+- Do not introduce new dependencies unless absolutely necessary.
+- Always consider security implications and best practices.
+- Aim for full test coverage of new code, and suggest tests for existing code when appropriate.
+
+<!-- ## Coding Standards
+
+### Naming
+- Use descriptive variable and function names.
+- Do not abbreviate unless universally understood.
+- Use camelCase for JavaScript variables and functions.
+- Use PascalCase for React components.
+- Use snake_case for database columns.
+
+### Comments
+- Do not write obvious comments.
+- Only comment non-obvious business logic.
+- Prefer self-documenting code.
+
+## Error Handling
+- Always handle errors explicitly.
+- Do not swallow exceptions.
+- Return meaningful error messages.
+
+## Security
+- Never expose secrets or API keys.
+- Validate and sanitize all user input.
+- Use prepared statements for database queries.
+
+## Project-Specific Notes
+
+### Backend (PHP / CakePHP)
+- Follow PSR-12 formatting.
+- Use dependency injection where appropriate.
+- Do not use deprecated framework methods.
+- Prefer modern APIs over legacy helpers.
+
+### Frontend (React / Expo)
+- Use functional components only.
+- Prefer hooks over class components.
+- Avoid inline styles unless necessary.
+- Keep components under 200 lines.
+
+## Testing
+- Suggest unit tests for new logic.
+- Mock external dependencies.
+- Keep tests deterministic.
+
+## Performance
+- Avoid unnecessary loops.
+- Do not perform database queries inside loops.
+- Prefer memoization when appropriate.
+
+## Output Expectations
+- Produce production-ready code.
+- Avoid TODO comments unless necessary. -->

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.102",
+	"version": "0.4.104",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Accordion/Accordion.js

@@ -1,14 +1,21 @@
 import { useState, useEffect, useRef, } from 'react';
 import {
+	Box,
 	HStack,
-	ScrollView,
+	Icon,
 	Pressable,
+	ScrollView,
+	Text,
+	TextNative,
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
 import clsx from 'clsx';
+import Plus from '../Icons/Plus.js';
+import Minus from '../Icons/Minus.js';
 import inArray from '../../Functions/inArray.js';
 import emptyFn from '../../Functions/emptyFn.js';
+import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
 // The Accordion has two modes.
@@ -25,11 +32,61 @@ import _ from 'lodash';
 
 export default function Accordion(props) {
 	const {
+			styles = UiGlobals.styles,
 			sections = [],
 			activeSections = [],
 			setActiveSections = emptyFn,
-			renderHeader = emptyFn,
-			renderContent = emptyFn,
+			renderHeader = (section, ix, isActive) => {
+				return <HStack
+							className={clsx(
+								'Header',
+								'bg-grey-300',
+								'items-center',
+								'justify-start',
+								'py-1',
+								'px-2',
+								'border-b-grey-400',
+								'border-b-1',
+								styles.PANEL_HEADER_BG,
+							)}
+						>
+							{/* <Text className="text-white flex-1">{section.header}</Text> */}
+							
+							<TextNative
+								numberOfLines={1}
+								ellipsizeMode="head"
+								className={clsx(
+									'Header-TextNative1',
+									'flex-1',
+									'font-bold',
+									styles.PANEL_HEADER_TEXT_CLASSNAME,
+								)}>{section.header}</TextNative>
+							<Icon
+								as={isActive ? Minus : Plus} 
+								className={clsx(
+									'text-black',
+								)}
+							/>
+						</HStack>;
+			},
+			unmountInactiveContent = true,
+			renderContent = (section, ix, isActive, ref) => {
+				if (unmountInactiveContent) {
+					if (!isActive) {
+						return null;
+					}
+					return section.content;
+				}
+
+				// This keeps all content rendered, just hidden (zero height) if it's inActive
+				let className = 'w-full overflow-hidden';
+				if (!isActive) {
+					className += ' h-[0px]';
+				}
+				return <Box className={className}>
+							{section.content}
+						</Box>;
+			},
 			onAnimationEnd = emptyFn,
 			onLayout,
 			onlyOne = true,
@@ -67,7 +124,9 @@ export default function Accordion(props) {
 
 			// TODO: Animate height. Possible help here: https://stackoverflow.com/a/57333550 and https://stackoverflow.com/a/64797961
 			if (isActive) {
-				rowProps.flex = 1;
+				if (onlyOne) {
+					rowProps.flex = 1;
+				}
 			} else {
 				rowProps.h = 0;
 				rowProps.overflow = 'hidden'; // otherwise some elements mistakenly show
@@ -94,7 +153,7 @@ export default function Accordion(props) {
 						>
 							{header}
 						</Pressable>
-						<HStack {...rowProps} className="bg-[#f00]">
+						<HStack {...rowProps}>
 							{content}
 						</HStack>
 					</VStack>;
@@ -129,7 +188,7 @@ export default function Accordion(props) {
 				keyboardShouldPersistTaps="always"
 				className="Accordion-ScrollView flex-1 w-full"
 				contentContainerStyle={{
-					height: '100%',
+					height: onlyOne ? '100%' : undefined,
 				}}
 			>
 				<VStackNative

package/src/Components/Container/Container.js

@@ -125,16 +125,20 @@ function Container(props) {
 		localSouthIsCollapsedRef = useRef(southInitialIsCollapsed),
 		localEastIsCollapsedRef = useRef(eastInitialIsCollapsed),
 		localWestIsCollapsedRef = useRef(westInitialIsCollapsed),
+		isSplitterDraggingRef = useRef(false),
 		onLayout = async (e) => {
-			console.log('Container onLayout', e.nativeEvent.layout.width);
+			if (isSplitterDraggingRef.current) {
+				return;
+			}
 			if (id) {
 				// save prevScreenSize if changed
 				const
-					height = parseFloat(e.nativeEvent.layout.height),
-					width = parseFloat(e.nativeEvent.layout.width),
+					height = windowSize?.height ?? parseFloat(e.nativeEvent.layout.height),
+					width = windowSize?.width ?? parseFloat(e.nativeEvent.layout.width),
 					key = id + '-prevScreenSize',
 					prevScreenSize = await getSaved(key);
-				if (!prevScreenSize || prevScreenSize.width !== width || prevScreenSize.height !== height) {
+				const hasChanged = !prevScreenSize || Math.abs((prevScreenSize.width ?? 0) - width) > 1 || Math.abs((prevScreenSize.height ?? 0) - height) > 1;
+				if (hasChanged) {
 					await setSaved(key, {
 						height,
 						width,
@@ -300,10 +304,12 @@ function Container(props) {
 			}
 		},
 		onSplitterDragStart = () => {
+			isSplitterDraggingRef.current = true;
 			setIsComponentsDisabled(true);
 		},
 		onSplitterDragStop = (delta, which) => {
 			setIsComponentsDisabled(false);
+			isSplitterDraggingRef.current = false;
 			switch(which) {
 				case 'north':
 					onNorthResize(delta);

package/src/Components/Form/Field/Combo/Combo.js

@@ -90,6 +90,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 			isInTag = false,
 			minimizeForRow = false,
 			reloadOnTrigger = false,
+			loadAfterRender = false,
 			searchHasInitialPercent = false,
 			menuHeight,
 			placeholder,
@@ -585,11 +586,16 @@ export const ComboComponent = forwardRef((props, ref) => {
 		};
 
 	useEffect(() => {
-		// on render, focus the input
 		if (!isRendered) {
 			return () => {};
 		}
+		
+		if (loadAfterRender) {
+			Repository?.reload();
+		}
+		
 		if (autoFocus && !inputRef.current.isFocused()) {
+			// on render, focus the input
 			inputRef.current.focus();
 		}
 
@@ -599,7 +605,7 @@ export const ComboComponent = forwardRef((props, ref) => {
 			}
 		};
 
-	}, [isRendered]);
+	}, [isRendered, loadAfterRender, Repository]);
 
 	useEffect(() => {
 		(async () => {

package/src/Components/Form/Form.js

@@ -253,8 +253,9 @@ function Form(props) {
 					'border-r-grey-200',
 					'px-1',
 					styles.INLINE_EDITOR_MIN_WIDTH,
-				);
-			_.each(columnsConfig, (config, ix) => {
+				),
+				validColumnsConfig = _.filter(columnsConfig, (config) => !!config); // filter out any null/undefined configs
+			_.each(validColumnsConfig, (config, ix) => {
 				let {
 						fieldName,
 						isEditable = false,
@@ -273,7 +274,7 @@ function Form(props) {
 					type,
 					editorTypeProps = {},
 					viewerTypeProps = {};
-				
+			
 				if (isHidden) {
 					return;
 				}
@@ -965,9 +966,11 @@ function Form(props) {
 					/>;
 		},
 		buildAncillary = () => {
-			const components = [];
+			const
+				validAncillaryItems = _.filter(ancillaryItems, (item) => !!item), // filter out any null/undefined items
+				components = [];
 			setAncillaryButtons([]);
-			if (ancillaryItems.length) {
+			if (validAncillaryItems.length) {
 
 				// add the "scroll to top" button
 				getAncillaryButtons().push({
@@ -978,7 +981,7 @@ function Form(props) {
 					tooltip: 'Scroll to top',
 				});
 
-				_.each(ancillaryItems, (item, ix) => {
+				_.each(validAncillaryItems, (item, ix) => {
 					let {
 							type,
 							title = null,
@@ -1213,6 +1216,10 @@ function Form(props) {
 		style.maxHeight = maxHeight;
 	}
 
+	const
+		// allow horizontal layouts only if there are top-level columns, and screen is wide enough
+		hasTopLevelColumns = _.some(items, (item) => item?.type === 'Column'),
+		shouldUseHorizontalFormLayout = !isItemsCustomLayout && hasTopLevelColumns && containerWidth >= styles.FORM_ONE_COLUMN_THRESHOLD;
 	let modeHeader = null,
 		formButtons = null,
 		scrollButtons = null,
@@ -1246,8 +1253,8 @@ function Form(props) {
 			formComponents = buildFromItems();
 			const formAncillaryComponents = buildAncillary();
 			editor = <>
-						{containerWidth >= styles.FORM_ONE_COLUMN_THRESHOLD && !isItemsCustomLayout ? <HStack className="Form-formComponents-HStack p-4 gap-4 justify-center">{formComponents}</HStack> : null}
-						{containerWidth < styles.FORM_ONE_COLUMN_THRESHOLD || isItemsCustomLayout ? <VStack className="Form-formComponents-VStack p-4">{formComponents}</VStack> : null}
+						{shouldUseHorizontalFormLayout ? <HStack className="Form-formComponents-HStack w-full min-w-0 p-4 gap-4 justify-start items-stretch">{formComponents}</HStack> : null}
+						{!shouldUseHorizontalFormLayout ? <VStack className="Form-formComponents-VStack p-4">{formComponents}</VStack> : null}
 						{formAncillaryComponents.length ? <VStack className="Form-AncillaryComponents m-2 pt-4 px-2">{formAncillaryComponents}</VStack> : null}
 					</>;
 
@@ -1532,7 +1539,8 @@ function Form(props) {
 							onScroll={onScroll}
 							scrollEventThrottle={16 /* ms */}
 							contentContainerStyle={{
-								// height: '100%',
+								width: '100%',
+								minWidth: '100%',
 							}}
 						>
 							{scrollToTopAnchor}