@onehat/ui 0.3.381 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.381",
+	"version": "0.4.0",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
@@ -25,25 +25,53 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@gluestack-style/animation-resolver": "^1.0.4",
-		"@gluestack-style/react": "^1.0.56",
-		"@gluestack-ui/config": "^1.1.18",
-		"@gluestack-ui/themed": "^1.1.26",
+		"@gluestack-ui/accordion": "^1.0.8",
+		"@gluestack-ui/actionsheet": "^0.2.46",
+		"@gluestack-ui/alert": "^0.1.16",
+		"@gluestack-ui/alert-dialog": "^0.1.32",
+		"@gluestack-ui/avatar": "^0.1.18",
+		"@gluestack-ui/button": "^1.0.8",
+		"@gluestack-ui/checkbox": "^0.1.33",
+		"@gluestack-ui/divider": "^0.1.10",
+		"@gluestack-ui/fab": "^0.1.22",
+		"@gluestack-ui/form-control": "^0.1.19",
+		"@gluestack-ui/icon": "^0.1.23",
+		"@gluestack-ui/image": "^0.1.11",
+		"@gluestack-ui/input": "^0.1.32",
+		"@gluestack-ui/link": "^0.1.23",
+		"@gluestack-ui/menu": "^0.2.37",
+		"@gluestack-ui/modal": "^0.1.35",
+		"@gluestack-ui/nativewind-utils": "^1.0.25",
+		"@gluestack-ui/overlay": "^0.1.15",
+		"@gluestack-ui/popover": "^0.1.42",
+		"@gluestack-ui/pressable": "^0.1.17",
+		"@gluestack-ui/progress": "^0.1.18",
+		"@gluestack-ui/radio": "^0.1.34",
+		"@gluestack-ui/select": "^0.1.30",
+		"@gluestack-ui/slider": "^0.1.26",
+		"@gluestack-ui/spinner": "^0.1.15",
+		"@gluestack-ui/switch": "^0.1.23",
+		"@gluestack-ui/textarea": "^0.1.24",
+		"@gluestack-ui/toast": "^1.0.8",
+		"@gluestack-ui/tooltip": "^0.1.35",
 		"@hookform/resolvers": "^3.3.1",
 		"@k-renwick/colour-mixer": "^1.2.1",
-		"@onehat/data": "^1.21.18",
+		"@onehat/data": "^1.21.19",
+		"nativewind": "4.0.36",
+		"normalize-css-color": "^1.0.2",
 		"@react-native-community/slider": "^4.5.2",
-		"@reduxjs/toolkit": "^1.9.5",
+		"@reduxjs/toolkit": "^2.2.3",
+		"decimal.js": "^10.4.3",
 		"inflector-js": "^1.0.1",
 		"js-cookie": "^3.0.5",
 		"native-base": "^3.4.28",
 		"react-hook-form": "^7.49.2",
-		"react-redux": "^8.1.2",
+		"tailwindcss": "^3.4.13",
 		"yup": "^1.2.0"
 	},
 	"peerDependencies": {
+		"@ckeditor/ckeditor5-react": "^6.3.0",
 		"@files-ui/react": "^1.0.8",
-		"ckeditor5-custom-build": "file:ckeditor5",
 		"locutus": "^2.0.16",
 		"react": "*",
 		"react-color": "^2.19.3",

package/src/Components/Accordion/Accordion.js

@@ -1,12 +1,11 @@
 import { useState, useEffect, useRef, } from 'react';
 import {
-	Box,
-	Column,
-	Pressable,
-	Row,
+	HStack,
 	ScrollView,
-	Text,
-} from 'native-base';
+	Pressable,
+	VStack,
+	VStackNative,
+} from '../Gluestack';
 import inArray from '../../Functions/inArray.js';
 import emptyFn from '../../Functions/emptyFn.js';
 import _ from 'lodash';
@@ -73,7 +72,7 @@ export default function Accordion(props) {
 				rowProps.overflow = 'hidden'; // otherwise some elements mistakenly show
 			}
 
-			return <Column key={ix}>
+			return <VStack key={ix}>
 						<Pressable
 							onPress={(e) => {
 								let newActiveSections = [];
@@ -94,10 +93,10 @@ export default function Accordion(props) {
 						>
 							{header}
 						</Pressable>
-						<Row {...rowProps} bg="#f00">
+						<HStack {...rowProps} className="bg-[#f00]">
 							{content}
-						</Row>
-					</Column>;
+						</HStack>
+					</VStack>;
 		});
 
 	useEffect(() => {
@@ -116,16 +115,21 @@ export default function Accordion(props) {
 		if (activeSections?.length && sections?.length) {
 			scrollTo = sectionHeight * activeIx;
 		}
-		setTimeout(()=> {
-			scrollView.scrollTo({ x: 0, y: scrollTo, animated: true });
-		}, 10); // delay so render can finish
+		if (scrollView) {
+			setTimeout(()=> {
+				scrollView.scrollTo({ x: 0, y: scrollTo, animated: true });
+			}, 10); // delay so render can finish
+		}
 
 	}, [activeSections, isRendered]);
 	
-	return <ScrollView ref={scrollViewRef} keyboardShouldPersistTaps="always" flex={1} w="100%">
-				<Column
+	return <ScrollView
+				ref={scrollViewRef}
+				keyboardShouldPersistTaps="always"
+				className="flex-1 w-full"
+			>
+				<VStackNative
 					{...propsToPass}
-					pb={(onlyOne ? calculateExtraPadding() : 0) + 'px'}
 					onLayout={(e) => {
 						if (!containerInitialHeight) {
 							const { height } = e.nativeEvent.layout;
@@ -136,8 +140,9 @@ export default function Accordion(props) {
 						}
 						setIsRendered(true);
 					}}
+					className={` pb-${(onlyOne ? calculateExtraPadding() : 0) + 'px'} `}
 				>
 					{items}
-				</Column>
+				</VStackNative>
 			</ScrollView>;
 }

package/src/Components/Blank.js

@@ -1,6 +1,4 @@
-import {
-	Box,
-} from 'native-base';
+import { Box } from './Gluestack';
 import _ from 'lodash';
 
 export default function Blank(props) {

package/src/Components/Buttons/BackButton.js

@@ -1,18 +1,27 @@
+import { forwardRef } from 'react';
 import {
 	Icon,
-	Pressable,
-	Text,
-} from 'native-base';
+} from '../Gluestack';
+import Button from './Button';
 import AngleLeft from '../Icons/AngleLeft.js';
 
-export default function BackButton(props) {
+const BackButton = forwardRef((props, ref) => {
 	const {
-		color = '',
-		...propsToPass
-	} = props;
-	return <Pressable flexDirection="row" justifyContent="flex-start" alignItems="center" pr={5} {...propsToPass}>
-				<Icon as={AngleLeft} color={color} size="sm" mr={1} />
-				<Text fontSize={18} color={color} left={-1}>Back</Text>
-			</Pressable>;
-}
+			color = 'grey-500',
+			...propsToPass
+		} = props,
+		icon = <Icon as={AngleLeft} className={`text-${color} mr-1`} />;
 
+	return <Button
+				{...propsToPass}
+				ref={ref}
+				icon={icon}
+				text="Back"
+				_text={{
+					className: `text-${color} text-[18px] -left-1`,
+				}}
+				className="flex-row justify-start items-center pr-[5px]"
+			/>;
+});
+
+export default BackButton;

package/src/Components/Buttons/Button.js

@@ -1,25 +1,77 @@
-import { useRef, } from 'react';
+import { cloneElement, forwardRef, isValidElement, useRef } from 'react';
 import {
 	Button,
-} from 'native-base';
+	ButtonText,
+	ButtonSpinner,
+	ButtonIcon,
+	ButtonGroup,
+	Tooltip,
+} from '../Gluestack';
 import withComponent from '../Hoc/withComponent.js';
+import withTooltip from '../Hoc/withTooltip.js';
+import _ from 'lodash';
 
-const ButtonComponent = function(props) {
-	const {
+const ButtonComponent = forwardRef((props, ref) => {
+	let {
 			self,
-			text,
-		} = props,
-		buttonRef = useRef();
+			text, // the text to display on the button
+			isLoading = false, // show a spinner?
+			icon = null, // an actual icon element
+			rightIcon = null, // an actual icon element
+			_spinner = {}, // props for ButtonSpinner
+			_icon, // props for icon
+			_rightIcon, // props for rightIcon
+			_text = {}, // props for ButtonText
+			tooltip,
+			...propsToPass
+		} = props;
+	
+	if (icon) {
+		if (isValidElement(icon)) {
+			if (_icon) {
+				icon = cloneElement(icon, {..._icon});
+			}
+		} else {
+			icon = <ButtonIcon as={icon} {..._icon} />;
+		}
+	}
+	if (rightIcon) {
+		if (isValidElement(rightIcon)) {
+			if (_rightIcon) {
+				rightIcon = cloneElement(rightIcon, {..._rightIcon});
+			}
+		} else {
+			rightIcon = <ButtonIcon as={rightIcon} {..._rightIcon} />;
+		}
+	}
+	
+	if (!ref) {
+		ref = useRef();
+	}
 	
 	if (self) {
-		self.ref = buttonRef.current;
+		self.ref = ref.current;
 	}
 
-	if (text) {
-		return <Button ref={buttonRef} {...props}>{text}</Button>;
+	let className = `
+		Button
+		flex
+	`;
+	if (propsToPass.className) {
+		className += ' ' + propsToPass.className;
+	}
+	
+	let button = <Button {...propsToPass} className={className} ref={ref}>
+					{isLoading && <ButtonSpinner {..._spinner} />}
+					{icon}
+					{text && <ButtonText {..._text}>{text}</ButtonText>}
+					{rightIcon}
+				</Button>;
+	if (tooltip) {
+		button = <Tooltip text={tooltip}>{button}</Tooltip>;
 	}
+	return button;
 
-	return <Button ref={buttonRef} {...props} />;
-}
+});
 
-export default withComponent(ButtonComponent);
+export default withComponent(withTooltip(ButtonComponent));

package/src/Components/Buttons/CartButtonWithBadge.js

@@ -3,7 +3,7 @@ import {
 	Icon,
 	Pressable,
 	Text,
-} from 'native-base';
+} from '../Gluestack';
 import {
 	Ionicons,
 } from '@expo/vector-icons';
@@ -14,12 +14,20 @@ export default function CartButtonWithBadge(props) {
 			badgeMsg,
 			onPress,
 		} = props;
-	return <Pressable onPress={onPress} flexDirection="row" justifyContent="center" pr={5} {...testProps('cartBtn')}>
-				<Icon as={Ionicons} name="cart" color="primary.800" size="xl" pb={1} />
+	return <Pressable
+				onPress={onPress}
+				{...testProps('cartBtn')}
+				className="flex-row justify-center pr-[5px]"
+			>
+				<Icon as={Ionicons} name="cart" size="xl" className="text-primary-800 pb-1" />
 				{badgeMsg > 0 && 
-					<Badge position="absolute" right={2} top={-10} colorScheme="danger" rounded="20px" variant="solid" {...testProps('cartBadge')}>
-						<Text fontSize={12} fontWeight="bold" color="lightText">{badgeMsg}</Text>
+					<Badge
+						colorScheme="danger"
+						variant="solid"
+						{...testProps('cartBadge')}
+						className="absolute right-2 -top-10 rounded-[20px]">
+						<Text className="text-[12px] font-bold text-lightText">{badgeMsg}</Text>
 					</Badge>}
-			</Pressable>
+			</Pressable>;
 }
 

package/src/Components/Buttons/IconButton.js

@@ -1,81 +1,38 @@
-import React, { useRef, } from 'react';
-import {
-	Icon,
-	Pressable,
-	Spinner,
-	Tooltip,
-} from 'native-base';
-import withComponent from '../Hoc/withComponent.js';
+import { forwardRef } from 'react';
+import Button from './Button';
 import UiGlobals from '../../UiGlobals.js';
 import _ from 'lodash';
 
-const
-	IconButton = (props) => {
-		const {
-				// _icon, // props for the icon component
-				// icon, // The actual icon component to use
-				_spinner,
-				isLoading = false,
-				tooltip,
-				tooltipPlacement = 'bottom',
-				self,
-			} = props,
-			styles = UiGlobals.styles;
-		let ref = props.outerRef;
 
-		if (!ref) {
-			ref = useRef();
-		}
-		if (self) {
-			self.ref = ref.current;
-		}
+const IconButtonElement = forwardRef((props, ref) => {
+	let icon = props.icon,
+		styles = UiGlobals.styles;
 
-		const propsIcon = props._icon || {};
-		let icon = props.icon,
-			ret;
-		if (isLoading) {
-			icon = <Spinner {..._spinner} />;
-		}
-		if (React.isValidElement(icon)) {
-			if (!_.isEmpty(propsIcon)) {
-				icon = React.cloneElement(icon, {...propsIcon});
-			}
-		} else {
-			icon = <Icon as={icon} {...propsIcon} />;
-		}
-		const pressable = <Pressable
-								ref={ref}
-								borderRadius="md"
-								colorScheme="primary"
-								flexDirection="row"
-								justifyContent="center"
-								alignItems="center"
-								px={styles.ICON_BUTTON_PX}
-								py={styles.ICON_BUTTON_PY}
-								// bg={styles.ICON_BUTTON_BG}
-								_hover={{
-									bg: styles.ICON_BUTTON_BG_HOVER,
-								}}
-								_disabled={{
-									bg: styles.ICON_BUTTON_BG_DISABLED,
-								}}
-								_pressed={{
-									bg: styles.ICON_BUTTON_BG_PRESSED,
-								}}
-								{...props}
-								size={null /* this prop was coming from above and messing things up! */}
-							>
-							{icon}
-							</Pressable>;
-		ret = pressable;
-		if (tooltip) {
-			ret = <Tooltip label={tooltip} placement={tooltipPlacement}>{ret}</Tooltip>;
-		}
-		return ret;
-	},
-	IconButtonComponent = withComponent(IconButton);
+	if (!icon && !props._icon?.as) {
+		throw Error('IconButton requires an icon prop');
+	}
 
-// withComponent needs us to forwardRef
-export default React.forwardRef((props, ref) => {
-	return <IconButtonComponent {...props} outerRef={ref} />;
+	let buttonClassName = `
+		IconButton
+		${styles.ICON_BUTTON_PY}
+		${styles.ICON_BUTTON_PX}
+		${styles.ICON_BUTTON_BG}
+		${styles.ICON_BUTTON_BG_HOVER}
+		${styles.ICON_BUTTON_BG_ACTIVE}
+		${styles.ICON_BUTTON_BG_DISABLED}
+		rounded-md
+		self-center
+	`;
+	if (props.className) {
+		buttonClassName += ' ' + props.className;
+	}
+
+	return <Button
+				ref={ref}
+				{...props}
+				className={buttonClassName}
+				action="none"
+				variant="none"
+			/>;
 });
+export default IconButtonElement;

package/src/Components/Buttons/PlusMinusButton.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import {
-	Row,
-	Text,
-} from 'native-base';
+	HStack,
+	HStackNative,
+} from '../Gluestack';
 import IconButton from './IconButton.js';
 import Plus from '../Icons/Plus.js';
 import Minus from '../Icons/Minus.js';
@@ -15,25 +15,38 @@ const PlusMinusButton = React.forwardRef((props, ref) => {
 			isMinusDisabled = false,
 			plusHandler = () => {},
 			minusHandler = () => {},
-		} = props;
+			plusTooltip,
+			minusTooltip,
+		} = props,
+		_icon = {
+			className: 'text-black',
+		};
 
-		return <Row {...props}>
-					<Row alignItems="center">
-						<IconButton
-							icon={<Minus color="#fff" />}
-							onPress={minusHandler}
-							bg="primary.200"
-							isDisabled={isMinusDisabled}
-						/>
-						<IconButton
-							icon={<Plus color="#fff" />}
-							onPress={plusHandler}
-							bg="primary.200"
-							isDisabled={isPlusDisabled}
-							ml={1}
-						/>
-					</Row>
-				</Row>;
+		let className = `
+			PlusMinusButton-HStack
+			items-center
+		`;
+		if (props.className) {
+			className += ' ' + props.className
+		}
+
+		return <HStack className={className}>
+					<IconButton
+						icon={Minus}
+						_icon={_icon}
+						onPress={minusHandler}
+						isDisabled={isMinusDisabled}
+						tooltip={minusTooltip}
+					/>
+					<IconButton
+						icon={Plus}
+						_icon={_icon}
+						onPress={plusHandler}
+						isDisabled={isPlusDisabled}
+						className="ml-1"
+						tooltip={plusTooltip}
+					/>
+				</HStack>;
 
 });
 

package/src/Components/Buttons/ReloadButton.js

@@ -1,16 +1,14 @@
-import {
-	Icon,
-} from 'native-base';
 import testProps from '../../Functions/testProps.js';
 import IconButton from './IconButton.js';
 import Rotate from '../Icons/Rotate.js';
 
 export default function ReloadButton(props) {
 	const {
-			iconProps ={},
+			_icon ={},
 			self,
 			Repository,
 			isTree = false,
+			propsToPass,
 		} = props,
 		onPress = () => {
 			if (isTree) {
@@ -26,13 +24,14 @@ export default function ReloadButton(props) {
 
 	return <IconButton
 				{...testProps('reloadBtn')}
-				{...props}
-				reference="reloadBtn"
 				parent={self}
-				icon={<Icon as={Rotate} {...iconProps} color="trueGray.600" />}
+				reference="reloadBtn"
 				onPress={onPress}
+				{...propsToPass}
+				icon={Rotate}
+				_icon={_icon}
+				className="ml-2"
 				tooltip="Reload"
-				ml={2}
 			/>;
 }
 

package/src/Components/Buttons/SquareButton.js

@@ -1,79 +1,65 @@
-import React from 'react';
-import {
-	Icon,
-	Pressable,
-	Text,
-} from 'native-base';
 import IconButton from './IconButton.js';
-import UiGlobals from '../../UiGlobals.js';
+
+// 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
 
 export default function SquareButton(props) {
 	const {
 			text,
 			isActive = false,
-			showText = true,
 			activeColor,
 			invertColorWhenActive = false,
+			showText = true,
 			disableInteractions = false,
 			fontSize = '20px',
 			...propsToPass
 		} = props,
-		styles = UiGlobals.styles,
 		bg = isActive ? activeColor || '#56a6f8' : '#fff',
 		color = invertColorWhenActive && isActive ? '#fff' : '#000';
 
-	const propsIcon = props._icon || {};
-	let icon = props.icon;
-	if (!icon) {
+	if (!props.icon) {
 		throw Error('icon missing');
 	}
 	if (!text) {
-		throw Error('text missing');
+		throw Error('text missing. If you want to hide the text, use showText={false}');
 	}
 
-	const
-		hoverProps = {},
-		pressedProps = {};
-	if (!disableInteractions) {
-		hoverProps.bg = styles.ICON_BUTTON_BG_HOVER;
-		pressedProps.bg = styles.ICON_BUTTON_BG_PRESSED;
-	}
-
-	if (!showText) {
-		return <IconButton
-					icon={icon}
-					borderRadius="md"
-					p={2}
-					_icon={{
-						size: '20px',
+	return <IconButton
+				className={`
+					rounded-md
+					p-2
+					bg-[${bg}]
+					hover:bg-[${bg}]
+					disabled:bg-[${bg}]
+					h-[100px]
+					w-[100px]
+					flex
+					flex-col
+					justify-center
+					items-center
+				`}
+				style={{
+					// backgroundColor: bg,
+				}}
+				_icon={{
+					className: `
+						h-[40px]
+						w-[40px]
+					`,
+					style: {
 						color,
-					}}
-					{...propsToPass}
-					bg={bg}
-				/>;
-	}
-
-	if (React.isValidElement(icon)) {
-		if (!_.isEmpty(propsIcon)) {
-			icon = React.cloneElement(icon, {...propsIcon});
-		}
-	} else {
-		icon = <Icon as={icon} {...propsIcon} />;
-	}
-
-	return <Pressable
-				borderRadius="md"
-				flexDirection="column"
-				justifyContent="center"
-				alignItems="center"
-				p={2}
+					}
+				}}
+				_text={{
+					style: {
+						color,
+						fontSize
+					}
+				}}
+				text={showText ? text : null}
+				isDisabled={disableInteractions}
 				{...propsToPass}
-				bg={bg}
-				// _hover={hoverProps}
-				// _pressed={pressedProps}
-			>
-				<Icon as={icon} color={color} size="xl" />
-				<Text fontSize={fontSize} color={color}>{text}</Text>
-			</Pressable>;
+			/>;
+
 }