@onehat/ui 0.4.70 → 0.4.71

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.70",
+	"version": "0.4.71",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -58,6 +58,7 @@
 		"@k-renwick/colour-mixer": "^1.2.1",
 		"@legendapp/motion": "^2.4.0",
 		"@onehat/data": "^1.22.0",
+		"clsx": "^2.1.1",
 		"nativewind": "4.1.23",
 		"normalize-css-color": "^1.0.2",
 		"@react-native-community/slider": "^4.5.2",

package/src/Components/Accordion/Accordion.js

@@ -6,6 +6,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import inArray from '../../Functions/inArray.js';
 import emptyFn from '../../Functions/emptyFn.js';
 import _ from 'lodash';

package/src/Components/Blank.js

@@ -1,4 +1,5 @@
 import { Box } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import _ from 'lodash';
 
 export default function Blank(props) {

package/src/Components/Buttons/BackButton.js

@@ -2,6 +2,7 @@ import { forwardRef } from 'react';
 import {
 	Icon,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Button from './Button';
 import AngleLeft from '../Icons/AngleLeft.js';
 

package/src/Components/Buttons/Button.js

@@ -6,6 +6,7 @@ import {
 	ButtonIcon,
 	ButtonGroup,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import withComponent from '../Hoc/withComponent.js';
 import withTooltip from '../Hoc/withTooltip.js';
 import _ from 'lodash';
@@ -51,10 +52,10 @@ const ButtonComponent = forwardRef((props, ref) => {
 		self.ref = ref.current;
 	}
 
-	let className = `
-		Button
-		flex
-	`;
+	let className = clsx(
+		'Button',
+		'flex',
+	);
 	if (propsToPass.className) {
 		className += ' ' + propsToPass.className;
 	}

package/src/Components/Buttons/CartButtonWithBadge.js

@@ -4,6 +4,7 @@ import {
 	Pressable,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	Ionicons,
 } from '@expo/vector-icons';

package/src/Components/Buttons/IconButton.js

@@ -1,4 +1,5 @@
 import { forwardRef } from 'react';
+import clsx from 'clsx';
 import Button from './Button';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
@@ -12,14 +13,14 @@ const IconButtonElement = forwardRef((props, ref) => {
 		throw Error('IconButton requires an icon prop');
 	}
 
-	let buttonClassName = `
-		IconButton
-		rounded-md
-		self-center
-		px-[10px]
-		py-[10px]
-		${styles.ICON_BUTTON_CLASSNAME}
-	`;
+	let buttonClassName = clsx(
+		'IconButton',
+		'rounded-md',
+		'self-center',
+		'px-[10px]',
+		'py-[10px]',
+		styles.ICON_BUTTON_CLASSNAME,
+	);
 	if (props.className) {
 		buttonClassName += ' ' + props.className;
 	}

package/src/Components/Buttons/PlusMinusButton.js

@@ -3,6 +3,7 @@ import {
 	HStack,
 	HStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import IconButton from './IconButton.js';
 import Plus from '../Icons/Plus.js';
 import Minus from '../Icons/Minus.js';
@@ -22,10 +23,10 @@ const PlusMinusButton = React.forwardRef((props, ref) => {
 			className: 'text-black',
 		};
 
-		let className = `
-			PlusMinusButton-HStack
-			items-center
-		`;
+		let className = clsx(
+			'PlusMinusButton-HStack',
+			'items-center',
+		);
 		if (props.className) {
 			className += ' ' + props.className
 		}

package/src/Components/Buttons/SquareButton.js

@@ -1,4 +1,5 @@
 import IconButton from './IconButton.js';
+import clsx from 'clsx';
 
 // This component is used to create a square button with an icon and text
 // For example, the Gingerich app uses this for EqStatusesSwitch and WoPrioritiesSwitch
@@ -23,20 +24,20 @@ export default function SquareButton(props) {
 		throw Error('text missing. If you want to hide the text, use showText={false}');
 	}
 
-	let className = `
-		SquareButton
-		rounded-md
-		p-2
-		h-[100px]
-		w-[100px]
-		flex
-		flex-col
-		justify-center
-		items-center
-		bg-grey-200
-		hover:bg-grey-400
-		disabled:bg-grey-100
-	`;
+	let className = clsx(
+		'SquareButton',
+		'rounded-md',
+		'p-2',
+		'h-[100px]',
+		'w-[100px]',
+		'flex',
+		'flex-col',
+		'justify-center',
+		'items-center',
+		'bg-grey-200',
+		'hover:bg-grey-400',
+		'disabled:bg-grey-100',
+	);
 	if (isActive && activeClassName) {
 		className += ' ' + activeClassName;
 	}
@@ -47,10 +48,10 @@ export default function SquareButton(props) {
 					// backgroundColor: bg,
 				}}
 				_icon={{
-					className: `
-						h-[40px]
-						w-[40px]
-					`,
+					className: clsx(
+						'h-[40px]',
+						'w-[40px]',
+					),
 					style: {
 						color,
 					}

package/src/Components/Container/Container.js

@@ -3,6 +3,7 @@ import {
 	HStack,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	HORIZONTAL,
 	VERTICAL,

package/src/Components/Container/ContainerColumn.js

@@ -1,6 +1,7 @@
 import {
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import _ from 'lodash';
 
 // This component allows us to stack multiple children in a Container slot (e.g. east)
@@ -8,9 +9,9 @@ import _ from 'lodash';
 // which the Container will translate into classNames for the VStack component.
 
 export default function ContainerColumn(props) {
-	let className = `
-		ContainerColumn
-	`;
+	let className = clsx(
+		'ContainerColumn'
+	);
 	if (props.className) {
 		className += ` ${props.className}`;
 	}

package/src/Components/Container/ScreenContainer.js

@@ -9,6 +9,7 @@ import {
 	VStack,
 	VStackNative,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import withComponent from '../Hoc/withComponent.js';
 // import { useHeaderHeight } from '@react-navigation/elements';
 // import testProps from '../OneHat/functions/testProps';
@@ -16,9 +17,7 @@ import withComponent from '../Hoc/withComponent.js';
 function ScreenContainer(props) {
 	const {
 			screenName = 'ScreenContainer',
-			p = 0,
 			safeArea = false,
-			bg = '#fff',
 			scrollEnabled = false,
 			keyboardAvoiding = false,
 			subtractHeaderHeight = true,
@@ -35,21 +34,22 @@ function ScreenContainer(props) {
 	if (safeArea !== false) {
 		safeAreaProps.safeArea = true;
 	}
+	let className = clsx(
+		screenName,
+		'items-center',
+		'justify-start',
+		'flex-1',
+		'w-full',
+		'overflow-visible'
+	);
+	if (props.className) {
+		className += ` ${props.className}`;
+	}
 
 	const column = <VStackNative
 						onLayout={onLayout}
 						{...safeAreaProps}
-						className={`
-							items-center
-							justify-start
-							flex-1
-							w-full
-							overflow-visible
-						`}
-						style={{
-							padding: p,
-							backgroundColor: bg,
-						}}
+						className={className}
 					>
 						{props.children}
 					</VStackNative>;

package/src/Components/Container/Splitter.js

@@ -2,6 +2,7 @@ import {
 	HStack,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import {
 	HORIZONTAL,
 	VERTICAL,
@@ -21,40 +22,44 @@ function Splitter(props) {
 
 	if (mode === VERTICAL) {
 		return <HStack
-					className={`
-						Splitter
-						h-[3px]
-						w-full
-						items-center
-						justify-center
-						${isDragging ? "bg-secondary-600" : "bg-primary-600"}
-					`}
+					className={clsx(
+						'Splitter',
+						'h-[3px]',
+						'w-full',
+						'items-center',
+						'justify-center',
+						isDragging ? 'bg-secondary-600' : 'bg-primary-600'
+					)}
 				>
-					<HStack className={`
-						handle
-						h-[2px]
-						w-[10%]
-						bg-[#ccc]
-					`}></HStack>
+					<HStack
+						className={clsx(
+							'handle',
+							'h-[2px]',
+							'w-[10%]',
+							'bg-[#ccc]'
+						)}
+					/>
 				</HStack>;
 	}
 	return <VStack
 				style={styles.ewResize}
-				className={`
-					Splitter
-					h-full
-					w-[3px]
-					items-center
-					justify-center
-					${isDragging ? "bg-secondary-600" : "bg-primary-600"}
-				`}
+				className={clsx(
+					'Splitter',
+					'h-full',
+					'w-[3px]',
+					'items-center',
+					'justify-center',
+					isDragging ? 'bg-secondary-600' : 'bg-primary-600',
+				)}
 			>
-				<VStack className={`
-					handle
-					w-[2px]
-					h-[10%]
-					bg-[#ccc]
-				`}></VStack>
+				<VStack
+					className={clsx(
+						'handle',
+						'h-[2px]',
+						'w-[10%]',
+						'bg-[#ccc]'
+					)}
+				/>
 			</VStack>;
 }
 

package/src/Components/Editor/InlineEditor.js

@@ -3,6 +3,7 @@ import {
 	Box,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import withComponent from '../Hoc/withComponent.js';
 import {
 	UI_MODE_WEB,
@@ -112,29 +113,30 @@ function InlineEditor(props) {
 							onEditorCancel();
 						}
 					}}
-					className={`
-						InlineEditor-mask
-						fixed
-						w-screen
-						h-screen
-						top-0
-						left-0
-						bg-black
-						opacity-30 z-0
-					`} 
+					className={clsx(
+						'InlineEditor-mask',
+						'fixed',
+						'w-screen',
+						'h-screen',
+						'top-0',
+						'left-0',
+						'bg-black',
+						'opacity-30',
+						'z-0',
+					)}
 				/>
 				<VStack
 					ref={inlineEditorRef}
 					{...testProps('inlineEditor')}
-					className={`
-						InlineEditor-VStack
-						absolute
-						z-10
-						min-w-full
-						inline-block
-						max-h-[100px]
-						${isEditorShown ? "h-[100px]" : "h-[0px]"}
-					`}
+					className={clsx(
+						'InlineEditor-VStack',
+						'absolute',
+						'z-10',
+						'min-w-full',
+						'inline-block',
+						'max-h-[100px]',
+						isEditorShown ? 'h-[100px]' : 'h-[0px]',
+					)}
 				>
 					<Form
 						editorType={EDITOR_TYPE__INLINE}
@@ -149,17 +151,17 @@ function InlineEditor(props) {
 						onClose={onEditorClose}
 						parent={self}
 						reference="form"
-						className={`
-							InlineEditor-Form
-							flex-1
-							bg-white
-							px-0
-							py-1
-							border-t-4
-							border-b-4
-							border-t-primary-100
-							border-b-primary-100
-						`}
+						className={clsx(
+							'InlineEditor-Form',
+							'flex-1',
+							'bg-white',
+							'px-0',
+							'py-1',
+							'border-t-4',
+							'border-b-4',
+							'border-t-primary-100',
+							'border-b-primary-100',
+						)}
 					/>
 				</VStack>
 			</>;

package/src/Components/Fab/DynamicFab.js

@@ -4,6 +4,7 @@ import {
 	Fab, FabIcon, FabLabel,
 	VStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import IconButton from '../Buttons/IconButton.js';
 import FabWithTooltip from './FabWithTooltip.js';
 import EllipsisVertical from '../Icons/EllipsisVertical.js';
@@ -31,13 +32,13 @@ export default function DynamicFab(props) {
 		verticalOffset = 50; // to shift the entire expanded group up
 
 
-	let className = `
-		DynamicFab
-		fixed
-		pb-[20px]
-		bottom-4
-		right-4
-	`;
+	let className = clsx(
+		'DynamicFab',
+		'fixed',
+		'pb-[20px]',
+		'bottom-4',
+		'right-4',
+	);
 	if (props.className) {
 		className += ` ${props.className}`;
 	}
@@ -67,12 +68,12 @@ export default function DynamicFab(props) {
 									}}
 								>
 									<IconButton
-										className={`
-											bg-primary-600
-											text-white
-											hover:bg-primary-700
-											active:bg-primary-800
-										`}
+										className={clsx(
+											'bg-primary-600',
+											'text-white',
+											'hover:bg-primary-700',
+											'active:bg-primary-800',
+										)}
 										tooltipPlacement={tooltipPlacement}
 										onPress={() => {
 											onPress();

package/src/Components/Fab/FabWithTooltip.js

@@ -1,6 +1,7 @@
 import {
 	Fab,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import withTooltip from '../Hoc/withTooltip.js';
 
 export default withTooltip(Fab);

package/src/Components/Filter/DateRange.js

@@ -4,6 +4,7 @@ import {
 	HStackNative,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Date from '../Form/Field/Date.js';
 import testProps from '../../Functions/testProps.js';
 import withValue from '../Hoc/withValue.js';
@@ -80,13 +81,13 @@ const
 			return null;
 		}
 
-		let className = `
-			flex-1
-			justify-center
-			items-center
-			px-1
-			py-[2px]
-		`;
+		let className = clsx(
+			'flex-1',
+			'justify-center',
+			'items-center',
+			'px-1',
+			'py-[2px]',
+		);
 		if (props.className) {
 			className += ' ' + props.className;
 		}

package/src/Components/Filter/NumberRange.js

@@ -3,6 +3,7 @@ import {
 	HStack,
 	Text,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import Number from '../Form/Field/Number.js';
 import withTooltip from '../Hoc/withTooltip.js';
 import withValue from '../Hoc/withValue.js';
@@ -63,13 +64,13 @@ const
 
 		}, [value]);
 
-		let className = `
-			flex-1
-			justify-center
-			items-center
-			px-1
-			py-[2px]
-		`;
+		let className = clsx(
+			'flex-1',
+			'justify-center',
+			'items-center',
+			'px-1',
+			'py-[2px]',
+		);
 		if (props.className) {
 			className += ' ' + props.className;
 		}

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, } from 'react';
 import {
 	HStack,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import UiGlobals from '../../../../UiGlobals.js';
 import { CKEditor } from '@ckeditor/ckeditor5-react'; // https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
 import './ckeditor.css';

package/src/Components/Form/Field/Checkbox/CheckboxGroup.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, } from 'react';
 import {
 	Checkbox, CheckboxGroup,
 } from '@project-components/Gluestack';
+import clsx from 'clsx';
 import testProps from '../../../../Functions/testProps.js';
 import withData from '../../../Hoc/withData.js';
 import withValue from '../../../Hoc/withValue.js';