@onehat/ui 0.2.57 → 0.2.59

package/cypress/plugins/index.js

@@ -0,0 +1,2 @@
+module.exports = (on) => {
+}

package/cypress/support/commands.js

@@ -0,0 +1,2 @@
+// https://on.cypress.io/custom-commands
+

package/cypress/support/e2e.js

@@ -0,0 +1,2 @@
+// https://on.cypress.io/configuration
+import './commands.js';

package/cypress.config.js

@@ -0,0 +1,41 @@
+import { defineConfig } from "cypress";
+import webpackPreprocessor from "@cypress/webpack-preprocessor";
+
+export default defineConfig({
+	e2e: {
+		experimentalRunAllSpecs: true,
+		chromeWebSecurity: false,
+		setupNodeEvents(on) {
+			const options = webpackPreprocessor.defaultOptions;
+			if (!options.module) {
+				options.module = {
+					rules: [],
+				}
+			}
+			if (!options.module.rules) {
+				options.module.rules = [];
+			}
+			options.module.rules.push({
+				test: /\.(js|jsx|mjs)$/,
+				exclude: [/node_modules\/(?!(@onehat)\/).*/],
+				use: [{
+					loader: 'babel-loader',
+					options: {
+						cacheDirectory: false,
+						presets: [
+							'@babel/preset-env'
+						],
+						plugins: [
+							'@babel/plugin-transform-class-properties',
+							'@babel/plugin-transform-runtime'
+						],
+						sourceType: 'unambiguous',
+					},
+				}],
+
+			});
+
+			on('file:preprocessor', webpackPreprocessor(options));
+		},
+	}
+});

package/package.json

@@ -1,11 +1,17 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.2.57",
+	"version": "0.2.59",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",
 	"scripts": {
-		"test": "npx cypress open --config-file ../cypress.json"
+		"test": "npx cypress open",
+		"test2": "DEBUG=cypress:* npx cypress open",
+		"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"
 	},
 	"keywords": [
 		"onehat",
@@ -19,35 +25,38 @@
 	},
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@onehat/data": "^1.17.0",
-		"@hookform/resolvers": "^2.9.11",
+		"@onehat/data": "^1.17.3",
+		"@hookform/resolvers": "^3.1.0",
 		"@k-renwick/colour-mixer": "^1.2.1",
-		"ckeditor5-custom-build": "file:ckeditor5",
-		"js-cookie": "^3.0.1",
-		"native-base": "^3.4.25",
-		"react-hook-form": "^7.43.1"
+		"js-cookie": "^3.0.5",
+		"native-base": "^3.4.28",
+		"react-hook-form": "^7.44.3",
+		"yup": "^1.2.0"
 	},
 	"peerDependencies": {
-	  "@ckeditor/ckeditor5-react": "^5.0.6",
-	  "react": "*",
-	  "react-color": "^2.19.3",
-	  "react-datetime": "^3.2.0",
-	  "react-draggable": "^4.4.5",
-	  "react-native-draggable": "^3.3.0",
-	  "react-dom": "*",
-	  "react-native": "*"
+		"ckeditor5-custom-build": "file:ckeditor5",
+		"react": "*",
+		"react-color": "^2.19.3",
+		"react-datetime": "^3.2.0",
+		"react-draggable": "^4.4.5",
+		"react-native-draggable": "^3.3.0",
+		"react-dom": "*",
+		"react-native": "*"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.21.0",
-		"@babel/node": "^7.20.7",
-		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/plugin-transform-runtime": "^7.21.0",
-		"@babel/preset-env": "^7.20.2",
+		"@babel/core": "^7.22.1",
+		"@babel/node": "^7.22.1",
+		"@babel/plugin-transform-class-properties": "^7.22.3",
+		"@babel/plugin-transform-runtime": "^7.22.4",
+		"@babel/preset-env": "^7.22.4",
 		"@babel/register": "^7.21.0",
-		"@babel/runtime": "^7.21.0",
-		"@cypress/webpack-preprocessor": "^5.17.0",
+		"@babel/runtime": "^7.22.3",
+		"@ckeditor/ckeditor5-react": "^5.0.6",
+		"@cypress/webpack-preprocessor": "^5.17.1",
 		"babel-loader": "^9.1.2",
-		"cypress": "^12.6.0",
-		"webpack": "^5.75.0"
+		"cypress": "12.13.0",
+		"ink-docstrap": "^1.3.2",
+		"jsdoc": "^4.0.2",
+		"webpack": "^5.85.0"
 	}
 }

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

@@ -7,7 +7,7 @@ import {
 } from '../../../../Constants/Input.js';
 import { CKEditor } from '@ckeditor/ckeditor5-react'; // https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
 import './ckeditor.css';
-import Editor from 'ckeditor5-custom-build/build/ckeditor.js'; // built using https://ckeditor.com/ckeditor-5/online-builder/
+import Editor from '../../../../../ckeditor5/build/ckeditor.js'; // built using https://ckeditor.com/ckeditor-5/online-builder/
 import withValue from '../../../Hoc/withValue.js';
 import withTooltip from '../../../Hoc/withTooltip.js';
 import _ from 'lodash';

package/src/Components/Form/Form.js

@@ -388,7 +388,7 @@ function Form(props) {
 								if (defaults?.labelWidth) {
 									labelProps.w = defaults.labelWidth;
 								}
-								element = <Row w="100%">
+								element = <Row w="100%" py={1}>
 												<Label {...labelProps}>{label}</Label>
 												{element}
 											</Row>;

package/src/Components/Grid/Grid.js

@@ -143,7 +143,7 @@ export function Grid(props) {
 				onChangeColumnsConfig(config);
 			}
 		},
-		onRowClick = (item, rowIndex, e) => {
+		onRowClick = (item, e) => {
 			const
 				{
 					shiftKey,
@@ -276,19 +276,22 @@ export function Grid(props) {
 			return <Pressable
 						// {...testProps(Repository ? Repository.schema.name + '-' + item.id : item.id)}
 						onPress={(e) => {
+							if (e.preventDefault && e.cancelable) {
+								e.preventDefault();
+							}
 							if (isHeaderRow || isReorderMode) {
 								return
 							}
 							switch (e.detail) {
 								case 1: // single click
-									onRowClick(item, index, e); // sets selection
+									onRowClick(item, e); // sets selection
 									if (onEditorRowClick) {
 										onEditorRowClick(item, index, e);
 									}
 									break;
 								case 2: // double click
 									if (!isSelected) { // If a row was already selected when double-clicked, the first click will deselect it,
-										onRowClick(item, index, e); // so reselect it
+										onRowClick(item, e); // so reselect it
 									}
 									if (onEdit) {
 										onEdit();
@@ -300,9 +303,13 @@ export function Grid(props) {
 							}
 						}}
 						onLongPress={(e) => {
+							if (e.preventDefault && e.cancelable) {
+								e.preventDefault();
+							}
 							if (isHeaderRow || isReorderMode) {
 								return
 							}
+							
 							// context menu
 							const selection = [item];
 							setSelection(selection);
@@ -310,7 +317,7 @@ export function Grid(props) {
 								onEditorRowClick(item, index, e);
 							}
 							if (onContextMenu) {
-								onContextMenu(item, index, e, selection, setSelection);
+								onContextMenu(item, e, selection, setSelection);
 							}
 						}}
 						flexDirection="row"
@@ -737,7 +744,7 @@ export function Grid(props) {
 			Repository.off('changeFilters', onChangeFilters);
 			Repository.off('changeSorters', onChangeSorters);
 		};
-	}, [deselectAll]);
+	}, []);
 
 	useEffect(() => {
 		if (!Repository) {

package/src/Components/Grid/GridHeaderRow.js

@@ -319,6 +319,9 @@ export default function GridHeaderRow(props) {
 					return <Pressable
 								key={ix}
 								onPress={(e) => {
+									if (e.preventDefault) {
+										e.preventDefault();
+									}
 									if (isBlocked.current) { // withDraggable initiates block
 										return;
 									}
@@ -369,8 +372,8 @@ export default function GridHeaderRow(props) {
 									textOverflow="ellipsis"
 									flex={1}
 									h="100%"
-									px={2}
-									py={2}
+									px={styles.GRID_HEADER_CELL_PX}
+									py={styles.GRID_HEADER_CELL_PY}
 									alignItems="center"
 									justifyContent="center"
 									numberOfLines={1}

package/src/Components/Grid/GridRow.js

@@ -100,6 +100,8 @@ export default function GridRow(props) {
 									alignSelf="center"
 									style={{ userSelect: 'none', }}
 									fontSize={styles.GRID_CELL_FONTSIZE}
+									px={styles.GRID_CELL_PX}
+									py={styles.GRID_CELL_PY}
 									numberOfLines={1}
 									ellipsizeMode="head"
 									{...propsToPass}

package/src/Components/Hoc/withContextMenu.js

@@ -30,7 +30,7 @@ export default function withContextMenu(WrappedComponent) {
 			[contextMenuX, setContextMenuX] = useState(0),
 			[contextMenuY, setContextMenuY] = useState(0),
 			[contextMenuItemComponents, setContextMenuItemComponents] = useState([]),
-			onContextMenu = (entity, rowIx, e, selection, setSelection) => {
+			onContextMenu = (entity, e, selection, setSelection) => {
 				if (disableContextMenu) {
 					return;
 				}

package/src/Components/Icons/BarsStaggered.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      <Path d="M0 96c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm64 160c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H96c-17.7 0-32-14.3-32-32zm384 160c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h384c17.7 0 32 14.3 32 32z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/Circle.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      <Path d="M256 512a256 256 0 100-512 256 256 0 100 512z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/Folder.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      <Path d="M64 480h384c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8l-19.2-25.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/FolderClosed.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      <Path d="M448 480H64c-35.3 0-64-28.7-64-64V192h512v224c0 35.3-28.7 64-64 64zm64-320H0V96c0-35.3 28.7-64 64-64h128c20.1 0 39.1 9.5 51.2 25.6l19.2 25.6c6 8.1 15.5 12.8 25.6 12.8h160c35.3 0 64 28.7 64 64z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/FolderOpen.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" {...props}>
+      <Path d="M384 480h48c11.4 0 21.9-6 27.6-15.9l112-192c5.8-9.9 5.8-22.1.1-32.1s-16.2-16-27.7-16H144c-11.4 0-21.9 6-27.6 15.9L48 357.1V96c0-8.8 7.2-16 16-16h117.5c4.2 0 8.3 1.7 11.3 4.7l26.5 26.5c21 21 49.5 32.8 79.2 32.8H416c8.8 0 16 7.2 16 16v32h48v-32c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7l-26.5-26.6c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h320z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/FolderTree.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" {...props}>
+      <Path d="M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32v352c0 35.3 28.7 64 64 64h192v-64H64V160h192V96H64V32zm224 160c0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32h-98.7c-8.5 0-16.6-3.4-22.6-9.4L409.4 9.4c-6-6-14.1-9.4-22.6-9.4H320c-17.7 0-32 14.3-32 32v160zm0 288c0 17.7 14.3 32 32 32h224c17.7 0 32-14.3 32-32V352c0-17.7-14.3-32-32-32h-98.7c-8.5 0-16.6-3.4-22.6-9.4l-13.3-13.3c-6-6-14.1-9.4-22.6-9.4H320c-17.7 0-32 14.3-32 32V480z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/Leaf.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      <Path d="M272 96c-78.6 0-145.1 51.5-167.7 122.5 33.6-17 71.5-26.5 111.7-26.5h88c8.8 0 16 7.2 16 16s-7.2 16-16 16h-88c-16.6 0-32.7 1.9-48.2 5.4-25.9 5.9-50 16.4-71.4 30.7C38.3 298.8 0 364.9 0 440v16c0 13.3 10.7 24 24 24s24-10.7 24-24v-16c0-48.7 20.7-92.5 53.8-123.2C121.6 392.3 190.3 448 272 448h1c132.1-.7 239-130.9 239-291.4 0-42.6-7.5-83.1-21.1-119.6-2.6-6.9-12.7-6.6-16.2-.1C455.9 72.1 418.7 96 376 96H272z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/MagnifyingGlass.js

@@ -0,0 +1,14 @@
+// Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
+      <Path d="M416 208c0 45.9-14.9 88.3-40 122.7l126.6 126.7c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208zM208 352a144 144 0 100-288 144 144 0 100 288z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent

package/src/Components/Icons/collapse.js

@@ -0,0 +1,17 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+import { Icon } from 'native-base';
+
+function SvgComponent(props) {
+  return (
+    <Icon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 384.15 488.05"
+      {...props}
+    >
+      <Path d="M214.77 214.78l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-137.4 137.3L54.68 9.38c-12.5-12.51-32.81-12.51-45.31 0-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0l.1.1zM374.68 433.37l-160-160c-12.5-12.5-32.8-12.5-45.3 0l-160.01 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l137.4-137.4 137.4 137.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-.1.1z" />
+    </Icon>
+  )
+}
+
+export default SvgComponent