@onehat/ui 0.1.3 → 0.2.0

package/package.json

@@ -1,16 +1,11 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.1.3",
+	"version": "0.2.0",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
 	"scripts": {
-		"test": "npx cypress open --config-file ../cypress.json",
-		"docs": "jsdoc -c ./jsdoc.json -t ./node_modules/ink-docstrap/template -R README.md"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/OneHatRepo/ui.git"
+		"test": "npx cypress open --config-file ../cypress.json"
 	},
 	"keywords": [
 		"onehat",
@@ -22,34 +17,35 @@
 		"company": "OneHat Technologies, LLC",
 		"url": "https://onehat.com"
 	},
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/OneHatRepo/ui/issues"
-	},
-	"homepage": "https://github.com/OneHatRepo/ui#readme",
+	"license": "UNLICENSED",
 	"dependencies": {
-		"@onehat/data": "^1.8.27",
-		"@sencha/sencha-grid": "^2.0.3",
+		"@ckeditor/ckeditor5-react": "^5.0.6",
+		"@onehat/data": "^1.13.6",
+		"browser-or-node": "^2.1.1",
+		"ckeditor5-custom-build": "file:ckeditor5",
 		"js-cookie": "^3.0.1",
 		"native-base": "^3.4.25",
-		"react-hook-form": "^7.40.0"
+		"react-hook-form": "^7.43.1"
 	},
 	"peerDependencies": {
 	  "react": "*",
+	  "react-color": "^2.19.3",
+	  "react-datetime": "^3.2.0",
+	  "react-draggable": "^4.4.5",
 	  "react-dom": "*",
 	  "react-native": "*"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.20.5",
-		"@babel/node": "^7.20.5",
+		"@babel/core": "^7.21.0",
+		"@babel/node": "^7.20.7",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/plugin-transform-runtime": "^7.19.6",
+		"@babel/plugin-transform-runtime": "^7.21.0",
 		"@babel/preset-env": "^7.20.2",
-		"@babel/register": "^7.18.9",
-		"@babel/runtime": "^7.20.6",
-		"@cypress/webpack-preprocessor": "^5.15.7",
-		"babel-loader": "^9.1.0",
-		"cypress": "^12.1.0",
+		"@babel/register": "^7.21.0",
+		"@babel/runtime": "^7.21.0",
+		"@cypress/webpack-preprocessor": "^5.17.0",
+		"babel-loader": "^9.1.2",
+		"cypress": "^12.6.0",
 		"webpack": "^5.75.0"
 	}
 }

package/src/Components/Accordion/Accordion.js

@@ -0,0 +1,144 @@
+import { useState, useEffect, useRef, } from 'react';
+import {
+	Box,
+	Column,
+	Pressable,
+	Row,
+	ScrollView,
+	Text,
+} from 'native-base';
+import inArray from '../../Functions/inArray';
+import emptyFn from '../../Functions/emptyFn';
+import _ from 'lodash';
+
+// The Accordion has two modes.
+// In the first (onlyOne), only one section can be expanded at a time.
+// Otherwise, any section can be expanded—multiple at a time.
+// In the first, the section which is newly expanded will scroll to the top,
+// and extra padding down below will be added. In the other mode,
+// no auto scrolling will take place
+//
+// If you want to scroll in the second mode…
+// Every time I expand or collapse a section, get the new height of each section.
+// That way you can still calculate the top position for any sections scrolling
+// Might be able to do a delta since last calsulation.
+
+export default function Accordion(props) {
+	const {
+			sections = [],
+			activeSections = [],
+			setActiveSections = emptyFn,
+			renderHeader = emptyFn,
+			renderContent = emptyFn,
+			onAnimationEnd = emptyFn,
+			onLayout,
+			onlyOne = true,
+			...propsToPass
+		} = props,
+		scrollViewRef = useRef(),
+		refs = {},
+		[isRendered, setIsRendered] = useState(false),
+		[containerInitialHeight, setContainerInitialHeight] = useState(0),
+		sectionHeight = containerInitialHeight / (sections?.length || 1), // protect against divide by zero
+		calculateExtraPadding = () => {
+			// this adds extra padding to the bottom, depending on what's active
+			// so that scrollTo can scroll the active header all the way downto the top
+			let extraPadding = 0;
+			const activeIx = activeSections[0];
+			if (isRendered && activeIx) {
+				// when the first section is active, we don't need to add any padding.
+				// For each subsequent section, we need to add more and more padding
+				// until when the last section is active, we need to add padding equal to
+				// the container height
+				extraPadding = (activeIx +2) * sectionHeight;
+			}
+			return extraPadding;
+		},
+		items = _.map(sections, (section, ix) => {
+
+			const itemVar = 'item' + ix;
+			refs[itemVar] = useRef(); // so we have refs for each section - e.g. refs.item0
+
+			const
+				isActive = inArray(ix, activeSections),
+				header = renderHeader(section, ix, isActive),
+				content = renderContent(section, ix, isActive, refs[itemVar]),
+				rowProps = {};
+
+			// TODO: Animate height. Possible help here: https://stackoverflow.com/a/57333550 and https://stackoverflow.com/a/64797961
+			if (isActive) {
+				rowProps.flex = 1;
+			} else {
+				rowProps.h = 0;
+				rowProps.overflow = 'hidden'; // otherwise some elements mistakenly show
+			}
+
+			return <Column key={ix}>
+						<Pressable
+							onPress={(e) => {
+								let newActiveSections = [];
+								if (onlyOne) {
+									if (!isActive) {
+										newActiveSections = [ix];
+									}
+								} else {
+									if (isActive) {
+										newActiveSections = _.without(activeSections, ix);
+									} else {
+										newActiveSections = _.clone(activeSections);
+										newActiveSections.push(ix);
+									}
+								}
+								setActiveSections(newActiveSections);
+							}}
+						>
+							{header}
+						</Pressable>
+						<Row {...rowProps} bg="#f00">
+							{content}
+						</Row>
+					</Column>;
+		});
+
+	useEffect(() => {
+		if (!isRendered) {
+			return () => {};
+		}
+		if (!onlyOne) {
+			return () => {}; // Don't animate if !onlyOne
+		}
+
+		const
+			scrollView = scrollViewRef.current,
+			activeIx = activeSections[0];
+			
+		let scrollTo = 0;
+		if (activeSections?.length && sections?.length) {
+			scrollTo = sectionHeight * activeIx;
+		}
+		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
+					{...propsToPass}
+					pb={(onlyOne ? calculateExtraPadding() : 0) + 'px'}
+					onLayout={(e) => {
+						if (!containerInitialHeight) {
+							const { height } = e.nativeEvent.layout;
+							setContainerInitialHeight(height);
+							console.log('height', height);
+						}
+						if (onLayout) {
+							onLayout(e);
+						}
+						setIsRendered(true);
+					}}
+				>
+					{items}
+				</Column>
+			</ScrollView>;
+}

package/src/Components/Blank.js

@@ -0,0 +1,14 @@
+import {
+	Box,
+} from 'native-base';
+import _ from 'lodash';
+
+export default function Blank(props) {
+	const {
+			children,
+			...propsToPass
+		} = props;
+	return <Box {...propsToPass}>
+				{children}
+			</Box>;
+}

package/src/Components/Buttons/BackButton.js

@@ -0,0 +1,16 @@
+import {
+	Icon,
+	Pressable,
+	Text,
+} from 'native-base';
+import AngleLeft from '../Icons/AngleLeft';
+import { goBack } from '../../RootNavigation'; 
+import testProps from '../../Functions/testProps';
+
+export default function BackButton(props) {
+	return <Pressable onPress={props.goBack || goBack} flexDirection="row" justifyContent="flex-start" alignItems="center" pr={5} {...testProps('backBtn')}>
+				<Icon as={AngleLeft} color="#2563eb" size="sm" />
+				<Text fontSize={20} color="#2563eb" left={-1}>Back</Text>
+			</Pressable>;
+}
+

package/src/Components/Buttons/CartButtonWithBadge.js

@@ -0,0 +1,25 @@
+import {
+	Badge,
+	Icon,
+	Pressable,
+	Text,
+} from 'native-base';
+import {
+	Ionicons,
+} from '@expo/vector-icons';
+import testProps from '../../Functions/testProps';
+
+export default function CartButtonWithBadge(props) {
+	const {
+			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} />
+				{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>}
+			</Pressable>
+}
+

package/src/Components/Buttons/IconButton.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+	Icon,
+	Pressable,
+	Spinner,
+	Tooltip,
+} from 'native-base';
+
+const IconButton = React.forwardRef((props, ref) => {
+	const {
+			// _icon, // props for the icon component
+			// icon, // The actual icon component to use
+			_spinner,
+			isLoading = false,
+			tooltip,
+			tooltipPlacement = 'bottom',
+		} = props;
+	const propsIcon = props._icon || {};
+	let icon = props.icon || <Icon {...propsIcon} />;
+	if (isLoading) {
+		icon = <Spinner {..._spinner} />;
+	}
+	const pressable = <Pressable
+							ref={ref}
+							borderRadius="md"
+							colorScheme="primary"
+							flexDirection="row"
+							justifyContent="center"
+							alignItems="center"
+							p={2}
+							{...props}
+						>
+							{icon}
+						</Pressable>;
+	let ret = pressable;
+	if (tooltip) {
+		ret = <Tooltip label={tooltip} placement={tooltipPlacement}>{pressable}</Tooltip>;
+	}
+	return ret;
+});
+
+export default IconButton;

package/src/Components/Container/Container.js

@@ -0,0 +1,178 @@
+import React, { useState, } from 'react';
+import {
+	Column,
+	Row,
+} from 'native-base';
+import {
+	HORIZONTAL,
+	VERTICAL,
+} from '../../Constants/Directions';
+import Splitter from './Splitter';
+
+export default function Container(props) {
+	const {
+			center,
+			north,
+			south,
+			east,
+			west,
+
+			isNorthCollapsed,
+			setIsNorthCollapsed,
+			isSouthCollapsed,
+			setIsSouthCollapsed,
+			isEastCollapsed,
+			setIsEastCollapsed,
+			isWestCollapsed,
+			setIsWestCollapsed,
+		} = props,
+		[localIsNorthCollapsed, setLocalIsNorthCollapsed] = useState(north ? north.props.startsCollapsed : false),
+		[localIsSouthCollapsed, setLocalIsSouthCollapsed] = useState(south ? south.props.startsCollapsed : false),
+		[localIsEastCollapsed, setLocalIsEastCollapsed] = useState(east ? east.props.startsCollapsed : false),
+		[localIsWestCollapsed, setLocalIsWestCollapsed] = useState(west ? west.props.startsCollapsed : false),
+		[northHeight, setNorthHeight] = useState(north ? north.props.h : 0),
+		[southHeight, setSouthHeight] = useState(south ? south.props.h : 0),
+		[eastWidth, setEastWidth] = useState(east ? east.props.w : 0),
+		[westWidth, setWestWidth] = useState(west ? west.props.w : 0),
+		onNorthResize = (delta) => {
+			const newHeight = northHeight + delta;
+			setNorthHeight(newHeight);
+		},
+		onSouthResize = (delta) => {
+			const newHeight = southHeight - delta; // minus
+			setSouthHeight(newHeight);
+		},
+		onEastResize = (delta) => {
+			const newWidth = eastWidth - delta; // minus
+			setEastWidth(newWidth);
+		},
+		onWestResize = (delta) => {
+			const newWidth = westWidth + delta;
+			setWestWidth(newWidth);
+		};
+		
+	let componentProps = {},
+		centerComponent = null,
+		northComponent = null,
+		northSplitter = null,
+		southComponent = null,
+		southSplitter = null,
+		eastComponent = null,
+		eastSplitter = null,
+		westComponent = null,
+		westSplitter = null;
+
+	centerComponent = React.cloneElement(center, { isCollapsible: false, });
+	if (north) {
+		componentProps.collapseDirection = VERTICAL;
+		if (!north.props.h && !north.props.flex) {
+			componentProps.flex = 50;
+		}
+		if (north.props.isResizable) {
+			if (northHeight) {
+				componentProps.h = northHeight;
+				componentProps.flex = null;
+			}
+			componentProps.w = '100%';
+			componentProps.isCollapsed = setIsNorthCollapsed ? isNorthCollapsed : localIsNorthCollapsed;
+			componentProps.setIsCollapsed = setIsNorthCollapsed || setLocalIsNorthCollapsed;
+			componentProps.onLayout = (e) => {
+				const height = parseFloat(e.nativeEvent.layout.height);
+				if (height !== northHeight) {
+					setNorthHeight(height);
+				}
+			};
+			northSplitter = <Splitter mode={VERTICAL} onDragStop={onNorthResize} />;
+		}
+		northComponent = React.cloneElement(north, { ...componentProps, w: '100%', });
+		componentProps = {};
+	}
+	if (south) {
+		componentProps.collapseDirection = VERTICAL;
+		if (!south.props.h && !south.props.flex) {
+			componentProps.flex = 50;
+		}
+		if (south.props.isResizable) {
+			if (southHeight) {
+				componentProps.h = southHeight;
+				componentProps.flex = null;
+			}
+			componentProps.w = '100%';
+			componentProps.isCollapsed = setIsSouthCollapsed ? isSouthCollapsed : localIsSouthCollapsed;
+			componentProps.setIsCollapsed = setIsSouthCollapsed || setLocalIsSouthCollapsed;
+			componentProps.onLayout = (e) => {
+				const height = parseFloat(e.nativeEvent.layout.height);
+				if (height !== southHeight) {
+					setSouthHeight(height);
+				}
+			};
+			southSplitter = <Splitter mode={VERTICAL} onDragStop={onSouthResize} />;
+		}
+		southComponent = React.cloneElement(south, { ...componentProps, w: '100%', });
+		componentProps = {};
+	}
+	if (east) {
+		componentProps.collapseDirection = HORIZONTAL;
+		if (!east.props.h && !east.props.flex) {
+			componentProps.flex = 50;
+		}
+		if (east.props.isResizable) {
+			if (eastWidth) {
+				componentProps.w = eastWidth;
+				componentProps.flex = null;
+			}
+			componentProps.h = '100%';
+			componentProps.isCollapsed = setIsEastCollapsed ? isEastCollapsed : localIsEastCollapsed;
+			componentProps.setIsCollapsed = setIsEastCollapsed || setLocalIsEastCollapsed;
+			componentProps.onLayout = (e) => {
+				const width = parseFloat(e.nativeEvent.layout.width);
+				if (width !== eastWidth) {
+					setEastWidth(width);
+				}
+			};
+			eastSplitter = <Splitter mode={HORIZONTAL} onDragStop={onEastResize} />;
+		}
+		eastComponent = React.cloneElement(east, { ...componentProps, h: '100%', });
+		componentProps = {};
+	}
+	if (west) {
+		componentProps.collapseDirection = HORIZONTAL;
+		if (!west.props.h && !west.props.flex) {
+			componentProps.flex = 50;
+		}
+		if (west.props.isResizable) {
+			if (westWidth) {
+				componentProps.w = westWidth;
+				componentProps.flex = null;
+			}
+			componentProps.h = '100%';
+			componentProps.isCollapsed = setIsWestCollapsed ? isWestCollapsed : localIsWestCollapsed;
+			componentProps.setIsCollapsed = setIsWestCollapsed || setLocalIsWestCollapsed;
+			componentProps.onLayout = (e) => {
+				const width = parseFloat(e.nativeEvent.layout.width);
+				if (width !== westWidth) {
+					setWestWidth(width);
+				}
+			};
+			westSplitter = <Splitter mode={HORIZONTAL} onDragStop={onWestResize} />;
+		}
+		westComponent = React.cloneElement(west, { ...componentProps, h: '100%', });
+		componentProps = {};
+	}
+	
+	return <Column w="100%" flex={1}>
+				{northComponent}
+				{(!isNorthCollapsed && !localIsNorthCollapsed) && northSplitter}
+				<Row w="100%" flex={100}>
+					{westComponent}
+					{(!isWestCollapsed && !localIsWestCollapsed) && westSplitter}
+					<Column h="100%" flex={100}>
+						{centerComponent}
+					</Column>
+					{(!isEastCollapsed && !localIsEastCollapsed) && eastSplitter}
+					{eastComponent}
+				</Row>
+				{(!isSouthCollapsed && !localIsSouthCollapsed) && southSplitter}
+				{southComponent}
+			</Column>;
+}

package/src/Components/Container/Splitter.js

@@ -0,0 +1,61 @@
+import {
+	Column,
+	Row,
+	Text,
+} from 'native-base';
+import {
+	HORIZONTAL,
+	VERTICAL,
+} from '../../Constants/Directions';
+import styles from '../../Styles/StyleSheets';
+import withDraggable from '../Hoc/withDraggable';
+
+// Note on modes:
+// HORIZONTAL means the Splitter moves along the X axis.
+// VERTICAL means the Splitter moves along the Y axis.
+
+function Splitter(props) {
+	const {
+			mode = HORIZONTAL, // HORIZONTAL, VERTICAL
+			isDragging,
+		} = props;
+
+	if (mode === VERTICAL) {
+		return <Row
+					testID="Splitter"
+					bg={isDragging ? 'secondary.600' : 'primary.600'}
+					h="3px"
+					w="100%"
+					alignItems="center"
+					justifyContent="center"
+				>
+					<Row testID="handle" h="2px" w="10%" bg="#ccc"></Row>
+				</Row>;
+	}
+	return <Column
+				testID="Splitter"
+				bg={isDragging ? 'secondary.600' : 'primary.600'}
+				h="100%"
+				w="3px"
+				alignItems="center"
+				justifyContent="center"
+				style={styles.ewResize}
+			>
+				<Column testID="handle" w="2px" h="10%" bg="#ccc"></Column>
+			</Column>;
+}
+
+// Need a hoc to specifically deliver the 'getParentNode' prop
+function withParentNode(WrappedComponent) {
+	return (props) => {
+		const {
+				getParentNode = (node) => node.parentElement.parentElement,
+			} = props;
+		return <WrappedComponent
+			getParentNode={getParentNode}
+			{...props}
+		/>;
+	};
+}
+
+export default withParentNode(withDraggable(Splitter));

package/src/Components/Filter/DateRange.js

@@ -0,0 +1,99 @@
+import { useState, useEffect } from 'react';
+import {
+	Row,
+	Text,
+} from 'native-base';
+import Date from '../Form/Field/Date';
+import withTooltip from '../Hoc/withTooltip';
+import withValue from '../Hoc/withValue';
+import _ from 'lodash';
+
+const
+	DateRange = (props) => {
+		const {
+				value = {
+					low: null,
+					high: null,
+				},
+				setValue,
+				mode,
+				tooltip = '',
+
+				minValue = 0,
+				maxValue,
+			} = props,
+			[low, setLow] = useState(''),
+			[high, setHigh] = useState(''),
+			onChangeLow = (value) => {
+				setLow(value);
+				const newValue = {
+					low: value,
+					high,
+				};
+				setValue(newValue);
+			},
+			onChangeHigh = (value) => {
+				setHigh(value);
+				const newValue = {
+					low,
+					high: value,
+				};
+				setValue(newValue);
+			};
+		
+		useEffect(() => {
+
+			// Initialize format of value - needs to be JSON object with combination of two values
+			if (value === null || typeof value === 'undefined') {
+				setValue({
+					low: null,
+					high: null,
+				});
+				return () => {};
+			}
+
+			// Make local value conform to externally changed value
+			if (value.low !== low) {
+				setLow(value.low);
+			}
+			if (value.high !== high) {
+				setHigh(value.high);
+			}
+
+		}, [value]);
+
+		return <Row
+					justifyContent="center"
+					alignItems="center"
+					flex={1}
+					px={1}
+				>
+					<Date
+						value={low}
+						onChangeValue={onChangeLow}
+						mode={mode}
+						startingValue={null}
+						// minValue={minValue}
+						// maxValue={maxValue}
+						tooltip={(tooltip ? tooltip + ' ' : '') + 'Low'}
+					/>
+					<Text px={2} userSelect="none">to</Text>
+					<Date
+						value={high}
+						onChangeValue={onChangeHigh}
+						mode={mode}
+						startingValue={null}
+						// minValue={minValue}
+						// maxValue={maxValue}
+						tooltip={(tooltip ? tooltip + ' ' : '') + 'High'}
+					/>
+				</Row>;
+	},
+	DateRangeField = withValue(DateRange);
+
+export default DateRangeField;
+
+// Tooltip needs us to forwardRef
+// export default withTooltip(React.forwardRef((props, ref) => {
+// 	return <DateField {...props} outerRef={ref} />;
+// }));