@onehat/ui 0.1.3 → 0.2.0

package/src/Components/Filter/NumberRange.js

@@ -0,0 +1,96 @@
+import React, { useState, useEffect, } from 'react';
+import {
+	Row,
+	Text,
+} from 'native-base';
+import Number from '../Form/Field/Number';
+import withTooltip from '../Hoc/withTooltip';
+import withValue from '../Hoc/withValue';
+import _ from 'lodash';
+
+	const
+		NumberRange = (props) => {
+			const {
+					value = {
+						low: null,
+						high: null,
+					},
+					setValue,
+					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}
+					>
+						<Number
+							value={low}
+							onChangeValue={onChangeLow}
+							startingValue={null}
+							minValue={minValue}
+							maxValue={maxValue}
+							tooltip={(tooltip ? tooltip + ' ' : '') + 'Low'}
+						/>
+						<Text px={2} userSelect="none">to</Text>
+						<Number
+							value={high}
+							onChangeValue={onChangeHigh}
+							startingValue={null}
+							minValue={minValue}
+							maxValue={maxValue}
+							tooltip={(tooltip ? tooltip + ' ' : '') + 'High'}
+						/>
+					</Row>;
+		},
+		NumberRangeField = withValue(NumberRange);
+
+export default NumberRangeField;
+
+// Tooltip needs us to forwardRef
+// export default withTooltip(React.forwardRef((props, ref) => {
+// 	return <NumberRangeField {...props} outerRef={ref} />;
+// }));

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

@@ -0,0 +1,62 @@
+import React, { useState, useEffect, useRef, } from 'react';
+import {
+	Row,
+} from 'native-base';
+import {
+	AUTO_SUBMIT_DELAY,
+} from '../../../../Constants/Input';
+import Editor from 'ckeditor5-custom-build/build/ckeditor'; // built using https://ckeditor.com/ckeditor-5/online-builder/
+import { CKEditor } from '@ckeditor/ckeditor5-react'; // https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html
+import withValue from '../../../Hoc/withValue';
+import withTooltip from '../../../Hoc/withTooltip';
+import './styles.css';
+
+const
+	CKEditorElement = (props) => {
+		const {
+				value,
+				setValue,
+				h = 150,
+			} = props,
+			debouncedSetValueRef = useRef(),
+			[editor, setEditor] = useState(null),
+			config = {
+			};
+		
+		
+		useEffect(() => {
+			// Set up debounce fn
+			// Have to do this because otherwise, lodash tries to create a debounced version of the fn from only this render
+			debouncedSetValueRef.current = _.debounce(setValue, AUTO_SUBMIT_DELAY);
+		}, [setValue]);
+
+		return <Row h={h} flex={1} ref={props.outerRef} {...props}>
+					<CKEditor
+						editor={Editor}
+						config={config}
+						data={value}
+						onReady={(editor) => {
+							setEditor(editor);
+						}}
+						onChange={(event, editor) => {
+							const value = editor.getData();
+							debouncedSetValueRef.current(value);
+						}}
+						// onBlur={(event, editor) => {
+						// 	console.log( 'Blur.', editor);
+						// }}
+						// onFocus={(event, editor) => {
+						// 	console.log( 'Focus.', editor);
+						// }}
+					/>
+				</Row>;
+	},
+	CKEditorField = withValue(CKEditorElement);
+	
+
+export default CKEditorField;
+
+// // Tooltip needs us to forwardRef
+// export default withTooltip(React.forwardRef((props, ref) => {
+// 	return <CKEditorField {...props} outerRef={ref} />;
+// }));

package/src/Components/Form/Field/CKEditor/styles.css

@@ -0,0 +1,503 @@
+/**
+ * @license Copyright (c) 2014-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * This file is licensed under the terms of the MIT License (see LICENSE.md).
+ */
+
+ /* SKOTE MOD */
+.ck-editor__editable {
+	min-height: 10px !important;
+	padding: 10px !important;
+}
+/* END SKOTE MOD */
+
+:root {
+	--ck-sample-base-spacing: 2em;
+	--ck-sample-color-white: #fff;
+	--ck-sample-color-green: #279863;
+	--ck-sample-color-blue: #1a9aef;
+	--ck-sample-container-width: 1285px;
+	--ck-sample-sidebar-width: 350px;
+	--ck-sample-editor-min-height: 400px;
+	--ck-sample-editor-z-index: 10;
+}
+
+/* --------- EDITOR STYLES  ---------------------------------------------------------------------------------------- */
+
+.editor__editable,
+/* Classic build. */
+main .ck-editor[role='application'] .ck.ck-content,
+/* Decoupled document build. */
+.ck.editor__editable[role='textbox'],
+.ck.ck-editor__editable[role='textbox'],
+/* Inline & Balloon build. */
+.ck.editor[role='textbox'] {
+	width: 100%;
+	background: #fff;
+	font-size: 1em;
+	line-height: 1.6em;
+	min-height: var(--ck-sample-editor-min-height);
+	padding: 1.5em 2em;
+}
+
+.ck.ck-editor__editable {
+	background: #fff;
+	border: 1px solid hsl(0, 0%, 70%);
+	width: 100%;
+}
+
+/* Because of sidebar `position: relative`, Edge is overriding the outline of a focused editor. */
+.ck.ck-editor__editable {
+	position: relative;
+	z-index: var(--ck-sample-editor-z-index);
+}
+
+.editor-container {
+	display: flex;
+	flex-direction: row;
+    flex-wrap: nowrap;
+    position: relative;
+	width: 100%;
+	justify-content: center;
+}
+
+/* --------- DECOUPLED (DOCUMENT) BUILD. ---------------------------------------------*/
+body[data-editor='DecoupledDocumentEditor'] .document-editor__toolbar {
+	width: 100%;
+}
+
+body[data-editor='DecoupledDocumentEditor'] .collaboration-demo__editable,
+body[data-editor='DecoupledDocumentEditor'] .row-editor .editor {
+	/* A pixel is added for each of the border. */
+	width: calc(21cm + 2px);
+	min-height: calc(29.7cm + 2px);
+	/* To avoid having extra scrolls inside the editor container. */
+	height: fit-content;
+	padding: 2cm 1.2cm;
+	margin: 2.5rem;
+	border: 1px hsl( 0, 0%, 82.7% ) solid;
+	background-color: var(--ck-sample-color-white);
+	box-shadow: 0 0 5px hsla( 0, 0%, 0%, .1 );
+	box-sizing: border-box;
+}
+
+body[data-editor='DecoupledDocumentEditor'] .row-editor {
+	display: flex;
+	position: relative;
+	justify-content: center;
+	overflow-y: auto;
+	background-color: #f2f2f2;
+	border: 1px solid hsl(0, 0%, 77%);
+	/* Limit the max-height of the editor to avoid scrolling from bottom to top to see the toolbar. */
+	max-height: 700px;
+}
+
+body[data-editor='DecoupledDocumentEditor'] .sidebar {
+	background: transparent;
+	border: 0;
+	box-shadow: none;
+}
+
+/* --------- COMMENTS & TRACK CHANGES FEATURE ---------------------------------------------------------------------- */
+.sidebar {
+	padding: 0 15px;
+	position: relative;
+	min-width: var(--ck-sample-sidebar-width);
+	max-width: var(--ck-sample-sidebar-width);
+	font-size: 20px;
+	border: 1px solid hsl(0, 0%, 77%);
+	background: hsl(0, 0%, 98%);
+	border-left: 0;
+	overflow: hidden;
+	min-height: 100%;
+	flex-grow: 1;
+}
+
+/* Do not inherit styles related to the editable editor content. See line 25.*/
+.sidebar .ck-content[role='textbox'],
+.ck.ck-annotation-wrapper .ck-content[role='textbox'] {
+	min-height: unset;
+	width: unset;
+	padding: 0;
+	background: transparent;
+}
+
+.sidebar.narrow {
+	min-width: 60px;
+	flex-grow: 0;
+}
+
+.sidebar.hidden {
+	display: none !important;
+}
+
+#sidebar-display-toggle {
+	position: absolute;
+	z-index: 1;
+	width: 30px;
+	height: 30px;
+	text-align: center;
+	left: 15px;
+	top: 30px;
+	border: 0;
+	padding: 0;
+	color: hsl( 0, 0%, 50% );
+	transition: 250ms ease color;
+	background-color: transparent;
+}
+
+#sidebar-display-toggle:hover {
+	color: hsl( 0, 0%, 30% );
+	cursor: pointer;
+}
+
+#sidebar-display-toggle:focus,
+#sidebar-display-toggle:active {
+	outline: none;
+	border: 1px solid #a9d29d;
+}
+
+#sidebar-display-toggle svg {
+	fill: currentColor;
+}
+
+/* --------- COLLABORATION FEATURES (USERS) ------------------------------------------------------------------------ */
+.row-presence {
+	width: 100%;
+	border: 1px solid hsl(0, 0%, 77%);
+	border-bottom: 0;
+	background: hsl(0, 0%, 98%);
+	padding: var(--ck-spacing-small);
+
+	/* Make `border-bottom` as `box-shadow` to not overlap with the editor border. */
+	box-shadow: 0 1px 0 0 hsl(0, 0%, 77%);
+
+	/* Make `z-index` bigger than `.editor` to properly display tooltips. */
+	z-index: 20;
+}
+
+.ck.ck-presence-list {
+    flex: 1;
+    padding: 1.25rem .75rem;
+}
+
+.presence .ck.ck-presence-list__counter {
+	order: 2;
+	margin-left: var(--ck-spacing-large)
+}
+
+/* --------- REAL TIME COLLABORATION FEATURES (SHARE TOPBAR CONTAINER) --------------------------------------------- */
+.collaboration-demo__row {
+	display: flex;
+	position: relative;
+	justify-content: center;
+	overflow-y: auto;
+	background-color: #f2f2f2;
+	border: 1px solid hsl(0, 0%, 77%);
+}
+
+body[data-editor='InlineEditor'] .collaboration-demo__row {
+	border: 0;
+}
+
+.collaboration-demo__container {
+	max-width: var(--ck-sample-container-width);
+	margin: 0 auto;
+	padding: 1.25rem;
+}
+
+.presence, .collaboration-demo__row {
+	transition: .2s opacity;
+}
+
+.collaboration-demo__topbar {
+	background: #fff;
+	border: 1px solid var(--ck-color-toolbar-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 0;
+    border-radius: 4px 4px 0 0;
+}
+
+.collaboration-demo__topbar .btn {
+	margin-right: 1em;
+	outline-offset: 2px;
+	outline-width: 2px;
+	background-color: var( --ck-sample-color-blue );
+}
+
+.collaboration-demo__topbar .btn:focus,
+.collaboration-demo__topbar .btn:hover {
+	border-color: var( --ck-sample-color-blue );
+}
+
+.collaboration-demo__share {
+	display: flex;
+	align-items: center;
+	padding: 1.25rem .75rem
+}
+
+.collaboration-demo__share-description p {
+	margin: 0;
+	font-weight: bold;
+	font-size: 0.9em;
+}
+
+.collaboration-demo__share input {
+	height: auto;
+	font-size: 0.9em;
+	min-width: 220px;
+	margin: 0 10px;
+	border-radius: 4px;
+	border: 1px solid var(--ck-color-toolbar-border)
+}
+
+.collaboration-demo__share button,
+.collaboration-demo__share input {
+	height: 40px;
+	padding: 5px 10px;
+}
+
+.collaboration-demo__share button {
+	position: relative;
+}
+
+.collaboration-demo__share button:focus {
+	outline: none;
+}
+
+.collaboration-demo__share button[data-tooltip]::before,
+.collaboration-demo__share button[data-tooltip]::after {
+	position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition: all .15s cubic-bezier(.5,1,.25,1);
+	z-index: 1;
+}
+
+.collaboration-demo__share button[data-tooltip]::before {
+	content: attr(data-tooltip);
+    padding: 5px 15px;
+    border-radius: 3px;
+    background: #111;
+    color: #fff;
+    text-align: center;
+    font-size: 11px;
+	top: 100%;
+    left: 50%;
+    margin-top: 5px;
+    transform: translateX(-50%);
+}
+
+.collaboration-demo__share button[data-tooltip]::after {
+    content: '';
+	border: 5px solid transparent;
+    width: 0;
+    font-size: 0;
+    line-height: 0;
+	top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom: 5px solid #111;
+	border-top: none;
+}
+
+.collaboration-demo__share button[data-tooltip]:hover:before,
+.collaboration-demo__share button[data-tooltip]:hover:after {
+	visibility: visible;
+    opacity: 1;
+}
+
+.collaboration-demo--ready {
+	overflow: visible;
+	height: auto;
+}
+
+.collaboration-demo--ready .presence,
+.collaboration-demo--ready .collaboration-demo__row {
+	opacity: 1;
+}
+
+/* --------- PAGINATION FEATURE ------------------------------------------------------------------------------------ */
+
+/* Pagination view line must be stacked at least at the same level as the editor,
+   otherwise it will be hidden underneath. */
+.ck.ck-pagination-view-line {
+	z-index: var(--ck-sample-editor-z-index);
+}
+
+/* --------- REVISION HISTORY FEATURE ------------------------------------------------------------------------------ */
+
+.revision-viewer-container {
+    display: none;
+}
+
+.revision-viewer-sidebar {
+    position: relative;
+    min-width: 310px;
+    overflow: hidden;
+    background: var(--ck-color-toolbar-background);
+    border: 1px solid var(--ck-color-toolbar-border);
+    margin-left: -1px;
+}
+
+/* A case when Pagination and Revision History features are enabled in the editor. */
+/* Move the square with page number from the Pagination plugin to the left side, so that it does not cover the RH sidebar. */
+body[data-revision-history='true'] .ck.ck-pagination-view-line::after {
+	transform: translateX(-100%) !important;
+	left: -1px !important;
+	right: unset !important;
+}
+
+/* --------- SAMPLE GENERIC STYLES (not related to CKEditor) ------------------------------------------------------- */
+body, html {
+	padding: 0;
+	margin: 0;
+
+	font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	font-size: 16px;
+	line-height: 1.5;
+}
+
+body {
+	height: 100%;
+	color: #2D3A4A;
+}
+
+body * {
+	box-sizing: border-box;
+}
+
+a {
+	color: #38A5EE;
+}
+
+header .centered {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	align-items: center;
+	min-height: 8em;
+}
+
+header h1 a {
+	font-size: 20px;
+	display: flex;
+	align-items: center;
+	color: #2D3A4A;
+	text-decoration: none;
+}
+
+header h1 img {
+	display: block;
+	height: 64px;
+}
+
+header nav ul {
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+}
+
+header nav ul li {
+	display: inline-block;
+}
+
+header nav ul li + li {
+	margin-left: 1em;
+}
+
+header nav ul li a {
+	font-weight: bold;
+	text-decoration: none;
+	color: #2D3A4A;
+}
+
+header nav ul li a:hover {
+	text-decoration: underline;
+}
+
+main .message {
+	padding: 0 0 var(--ck-sample-base-spacing);
+	background: var(--ck-sample-color-green);
+	color: var(--ck-sample-color-white);
+}
+
+main .message::after {
+	content: "";
+	z-index: -1;
+	display: block;
+	height: 10em;
+	width: 100%;
+	background: var(--ck-sample-color-green);
+	position: absolute;
+	left: 0;
+}
+
+main .message h2 {
+	position: relative;
+	padding-top: 1em;
+	font-size: 2em;
+}
+
+.centered {
+	/* Hide overlapping comments. */
+	overflow: hidden;
+	max-width: var(--ck-sample-container-width);
+	margin: 0 auto;
+	padding: 0 var(--ck-sample-base-spacing);
+}
+
+.row {
+	display: flex;
+	position: relative;
+}
+
+.btn {
+	cursor: pointer;
+	padding: 8px 16px;
+	font-size: 1rem;
+	user-select: none;
+	border-radius: 4px;
+	transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,opacity .2s ease-in-out;
+	background-color: var(--ck-sample-color-button-blue);
+	border-color: var(--ck-sample-color-button-blue);
+	color: var(--ck-sample-color-white);
+	display: inline-block;
+}
+
+.btn--tiny {
+	padding: 6px 12px;
+	font-size: .8rem;
+}
+
+footer {
+	margin: calc(2*var(--ck-sample-base-spacing)) var(--ck-sample-base-spacing);
+	font-size: .8em;
+	text-align: center;
+	color: rgba(0,0,0,.4);
+}
+
+/* --------- RWD --------------------------------------------------------------------------------------------------- */
+@media screen and ( max-width: 800px ) {
+	:root {
+		--ck-sample-base-spacing: 1em;
+	}
+
+	header h1 {
+		width: 100%;
+	}
+
+	header h1 img {
+		height: 40px;
+	}
+
+	header nav ul {
+		text-align: right;
+	}
+
+	main .message h2 {
+		font-size: 1.5em;
+	}
+}

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

@@ -0,0 +1,12 @@
+import {
+	Box,
+} from 'native-base';
+import _ from 'lodash';
+
+export default function CKEditor(props) {
+
+	// See ExtJS compatible OneBuild implementation for ideas.
+	// Also see es6 folder in Venpal
+
+	throw new Error('not yet implemented');
+}

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

@@ -0,0 +1,13 @@
+import CheckboxGroup from './CheckboxGroup';
+
+// This is a building block for other CheckboxGroups,
+// which store their data as a JSON array, not a data repository.
+// Need to supply data prop from outer component.
+export default function ArrayCheckboxGroup(props) {
+	return <CheckboxGroup
+				idField="id"
+				displayField="value"
+				fields={['id', 'value']}
+				{...props}
+			/>;
+}