@lowentry/mui 1.0.1

package/.github/workflows/on-push-to-master.yaml

@@ -0,0 +1,30 @@
+name: on push to master
+
+on:
+  push:
+    branches: [ master ]
+
+concurrency:
+  group: ${{ github.event_name }}
+
+jobs:
+  deploy:
+    name: "Increase version and deploy"
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          registry-url: 'https://registry.npmjs.org'
+      #- run: npm ci
+      - run: npm test
+      - run: git config --global user.name "github-actions[bot]"
+      - run: git config --global user.email "github-actions[bot]@users.noreply.github.com"
+      - run: npm version patch -m "Upgrade to %s [skip ci]"
+      - run: git push && git push --tags
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/LeMuiUtils.js

@@ -0,0 +1,52 @@
+import {LeUtils, STRING, INT_LAX} from '@lowentry/utils';
+
+
+const HIDDEN_CHAR = '\u200B';
+
+
+export const LeMuiUtils = {
+	onSelectEnsureMinimumOffset:
+		(charactersCount) =>
+		{
+			charactersCount = Math.max(0, INT_LAX(charactersCount));
+			if(charactersCount <= 0)
+			{
+				return () =>
+				{
+				};
+			}
+			
+			return (event) =>
+			{
+				if(event && event.target)
+				{
+					if(event.target.selectionEnd < charactersCount)
+					{
+						event.target.setSelectionRange(charactersCount, charactersCount);
+					}
+					else if(event.target.selectionStart < charactersCount)
+					{
+						event.target.setSelectionRange(charactersCount, event.target.selectionEnd);
+					}
+				}
+			};
+		},
+	
+	prependHiddenChar:
+		(string) =>
+		{
+			string = STRING(string);
+			if(string.startsWith(HIDDEN_CHAR))
+			{
+				return string;
+			}
+			return HIDDEN_CHAR + string;
+		},
+	
+	purgePrependedHiddenChar:
+		(string) =>
+		{
+			string = STRING(string);
+			return LeUtils.trimStart(string, ['\u200B', ' ', '\t', '\r', '\n']);
+		},
+};

package/README.md

@@ -0,0 +1,22 @@
+# @lowentry/firebase
+
+Simplifies the use of Material UI in your React project.
+
+
+## Description
+
+This plugin adds utility classes to make it easier to build user interfaces with Material UI.
+
+Think about things such as:
+
+- numeric textfields (that automatically format the input as a number, without the constrictions that type="number" has)
+- removable textfields (textfields that call a onRemove() callback when the user presses the backspace key while the textfield is empty)
+- loading spinners (that maintain their rotation through state changes, including when the component is unmounted and remounted, or hidden/shown)
+- etc.
+
+This just makes it easier to build consistent and user-friendly interfaces.
+
+
+## Final words
+
+I hope this plugin will be useful to you. If you have any questions or suggestions, please feel free to get in touch at [LowEntry.com](https://lowentry.com/).

package/index.js

@@ -0,0 +1,10 @@
+export {DatePicker} from './widgets/DatePicker.jsx';
+export {Dialog} from './widgets/Dialog.jsx';
+export {LoadingSpinner} from './widgets/LoadingSpinner.jsx';
+export {MenuButton} from './widgets/MenuButton.jsx';
+export {MuiRoot} from './widgets/MuiRoot.jsx';
+export {NumericTextField} from './widgets/NumericTextField.jsx';
+export {RemovableNumericTextField} from './widgets/RemovableNumericTextField.jsx';
+export {RemovableTextField} from './widgets/RemovableTextField.jsx';
+export {Submittable} from './widgets/Submittable.jsx';
+export {TextField} from './widgets/TextField.jsx';

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@lowentry/mui",
+  "version": "1.0.1",
+  "private": false,
+  "type": "module",
+  "description": "Provides utilities for Material UI.",
+  "author": "Low Entry",
+  "license": "MIT",
+  "keywords": [
+    "materialui",
+    "mui",
+    "plugin",
+    "utility",
+    "utilities"
+  ],
+  "homepage": "https://github.com/LowEntry/lowentry-js-mui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LowEntry/lowentry-js-mui.git"
+  },
+  "scripts": {
+    "test": "node --check index.js"
+  },
+  "dependencies": {
+    "@emotion/react": "*",
+    "@emotion/styled": "*",
+    "@lowentry/react-redux": "^1",
+    "@mui/icons-material": "*",
+    "@mui/lab": "*",
+    "@mui/material": "^5",
+    "@mui/x-date-pickers": "^7",
+    "dayjs": "^1"
+  }
+}

package/widgets/DatePicker.css

@@ -0,0 +1,32 @@
+.lowentry-mui--date-picker
+{
+    padding: 0.5rem;
+}
+
+.lowentry-mui--date-picker .lowentry-mui--date-picker--arrow-button
+{
+    min-width: 0;
+    padding:   6px 12px;
+}
+
+.lowentry-mui--date-picker .lowentry-mui--date-picker--textfield
+{
+    max-width: 150px;
+    cursor:    pointer !important;
+}
+
+.lowentry-mui--date-picker .lowentry-mui--date-picker--textfield .MuiInputBase-input
+{
+    text-align: center;
+    padding:    10px 0;
+}
+
+.lowentry-mui--date-picker .lowentry-mui--date-picker--textfield .MuiOutlinedInput-notchedOutline
+{
+    border: 0 !important;
+}
+
+.lowentry-mui--date-picker .lowentry-mui--date-picker--textfield *
+{
+    cursor: pointer !important;
+}

package/widgets/DatePicker.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import {IS_ARRAY} from '@lowentry/utils';
+import Dayjs from 'dayjs';
+import {Button, Stack} from '@mui/material';
+import {DatePicker as MuiDatePicker} from '@mui/x-date-pickers';
+import {TextField} from './TextField.jsx';
+import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import './DatePicker.css';
+
+
+const DatePickerTextField = LeRed.memo((props) =>
+{
+	const onClick = LeRed.useCallback(() =>
+	{
+		if(props?.ownerState?.open)
+		{
+			return null;
+		}
+		let propsLoop = props?.InputProps?.endAdornment?.props;
+		while(propsLoop)
+		{
+			if(propsLoop.onClick)
+			{
+				return propsLoop.onClick;
+			}
+			if(propsLoop?.children)
+			{
+				propsLoop = propsLoop.children;
+				continue;
+			}
+			if(IS_ARRAY(propsLoop))
+			{
+				let continueLoop = false;
+				for(const propsLoopItem of propsLoop)
+				{
+					if(propsLoopItem?.props)
+					{
+						propsLoop = propsLoopItem.props;
+						continueLoop = true;
+					}
+				}
+				if(continueLoop)
+				{
+					continue;
+				}
+			}
+			propsLoop = propsLoop?.props;
+		}
+		return null;
+	}, [props?.ownerState?.open, props?.InputProps?.endAdornment?.props]);
+	
+	
+	const onSelect = LeRed.useCallback((event) =>
+	{
+		event.target.selectionStart = event.target.selectionEnd;
+		event.preventDefault();
+	}, []);
+	
+	
+	return (<>
+		<Button variant="outlined" onClick={onClick}>
+			<TextField {...props} className={'lowentry-mui--date-picker--textfield ' + (props.className ?? '')} variant="outlined" value={Dayjs(props.value).format(props?.dateFormat)} InputProps={{...(props.InputProps ?? {}), readOnly:true, endAdornment:null, onSelect:onSelect, onSelectCapture:onSelect, onMouseDown:onSelect, onTouchStart:onSelect, onTouchMove:onSelect}}/>
+		</Button>
+	</>);
+});
+
+
+export const DatePicker = LeRed.memo(({value, dateFormat, onChange, className, children, ...props}) =>
+{
+	if(!dateFormat)
+	{
+		dateFormat = 'ddd, D MMM YYYY';
+	}
+	
+	const [datepickerOpen, openDatepicker, closeDatepicker] = LeRed.useHistoryState(false);
+	
+	
+	const onChanged = LeRed.useCallback((...args) =>
+	{
+		if(onChange)
+		{
+			onChange(...args);
+		}
+	}, [onChange]);
+	
+	
+	return (<>
+		<Stack className={'lowentry-mui--date-picker ' + (className ?? '')} direction="row" justifyContent="space-between" spacing={1} {...props}>
+			<Button className="lowentry-mui--date-picker--arrow-button" variant="text" color="primary" onClick={() => onChanged(Dayjs(value).subtract(1, 'day'))}><ArrowBackIosNewIcon/></Button>
+			<MuiDatePicker
+				open={datepickerOpen}
+				onOpen={openDatepicker}
+				onClose={closeDatepicker}
+				showDaysOutsideCurrentMonth={true}
+				views={['day']}
+				format="YYYY-MM-DD"
+				label=""
+				isRequired={true}
+				value={value}
+				onChange={onChanged}
+				slots={{
+					textField:(props) => LeRed.createElement(DatePickerTextField, {dateFormat, ...props}),
+					toolbar:  (props) => null,
+				}}
+			/>
+			<Button className="lowentry-mui--date-picker--arrow-button" variant="text" color="primary" onClick={() => onChanged(Dayjs(value).add(1, 'day'))}><ArrowForwardIosIcon/></Button>
+		</Stack>
+	</>);
+});

package/widgets/Dialog.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {STRING} from '@lowentry/utils';
+import {Dialog} from '@mui/material';
+
+
+export const Dialog = LeRed.memo(({onClose, children, ...props}) =>
+{
+	const onClosed = LeRed.useCallback((event, reason) =>
+	{
+		if(!STRING(reason).toLowerCase().includes('escape'))
+		{
+			// prevent closing when clicking on the backdrop, only allow escape-key closing
+			return;
+		}
+		
+		if(onClose)
+		{
+			onClose(event, reason);
+		}
+	}, [onClose]);
+	
+	
+	return (<>
+		<Dialog onClose={onClosed} {...props}>
+			{children}
+		</Dialog>
+	</>);
+});

package/widgets/LoadingSpinner.css

@@ -0,0 +1,9 @@
+.lowentry-mui--loading-spinner
+{
+    color: rgba(255, 255, 255, 0.04);
+}
+
+.lowentry-mui--loading-spinner.lowentry-mui--loading-spinner--transparent
+{
+    background: rgba(0, 0, 0, 0);
+}

package/widgets/LoadingSpinner.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {LeRed} from '@lowentry/react-redux';
+import {Backdrop, CircularProgress} from '@mui/material';
+import './LoadingSpinner.css';
+
+
+let loadingSpinnerCount = {};
+let loadingSpinnerCountNonTransparent = 0;
+
+const LoadingSpinnerGrab = ({type}) =>
+{
+	loadingSpinnerCount[type] = (loadingSpinnerCount[type] || 0) + 1;
+	if(loadingSpinnerCount[type] === 1)
+	{
+		LeRed.trigger('lowentry-mui--loading-spinner--' + type);
+	}
+};
+
+const LoadingSpinnerRelease = ({type}) =>
+{
+	loadingSpinnerCount[type] = (loadingSpinnerCount[type] || 1) - 1;
+	if(loadingSpinnerCount[type] === 0)
+	{
+		LeRed.trigger('lowentry-mui--loading-spinner--' + type);
+	}
+};
+
+
+export const LoadingSpinner = LeRed.memo(({type}) =>
+{
+	LeRed.useEffect(() =>
+	{
+		LoadingSpinnerGrab({type});
+		return () => LoadingSpinnerRelease({type});
+	}, []);
+	
+	return null;
+});
+
+
+export const LoadingSpinnerWidget = LeRed.memo(({type, className, sx, children, ...props}) =>
+{
+	LeRed.useTriggerable('lowentry-mui--loading-spinner--' + type);
+	
+	return (<>
+		<Backdrop className={'lowentry-mui--loading-spinner lowentry-mui--loading-spinner--' + type + ' ' + (className ?? '')} sx={{zIndex:(theme) => theme.zIndex.drawer + 1, ...(sx ?? {})}} open={(loadingSpinnerCount[type] || 0) > 0} {...props}>
+			<CircularProgress color="inherit" size="min(120px,30vw)"/>
+		</Backdrop>
+	</>);
+});

package/widgets/MenuButton.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {LeUtils, ARRAY} from '@lowentry/utils';
+import {Button, Menu} from '@mui/material';
+
+
+export const MenuButton = LeRed.memo(({icon, className, ref, onClick, onClose, children, ...props}) =>
+{
+	const buttonRef = LeRed.useRef();
+	const [open, setOpen] = LeRed.useState(false);
+	
+	
+	const onClicked = LeRed.useCallback((event) =>
+	{
+		setOpen(true);
+		
+		if(onClick)
+		{
+			onClick(event);
+		}
+	}, [onClick]);
+	
+	
+	const onClosed = LeRed.useCallback((event) =>
+	{
+		setOpen(false);
+		
+		if(onClose)
+		{
+			onClose(event);
+		}
+	}, [onClose]);
+	
+	
+	return (<>
+		<Button ref={LeRed.mergeRefs(buttonRef, ref)} className={'lowentry-mui--menu-button allow-mobile-hover ' + (className ?? '')} variant="text" color="primary" onClick={onClicked} {...props}>{icon}</Button>
+		<Menu anchorEl={buttonRef.current} open={open} onClose={onClosed}>
+			{LeUtils.mapToArray(ARRAY(children), (child, index) => !!child && LeRed.cloneElement(child, {
+				key:     index,
+				onClick: () =>
+				         {
+					         setOpen(false);
+					         if(child?.props?.onClick)
+					         {
+						         child.props.onClick();
+					         }
+				         },
+				disabled:(typeof child?.props?.disabled !== 'undefined') ? child.props.disabled : !child?.props?.onClick,
+			}))}
+		</Menu>
+	</>);
+});

package/widgets/MuiRoot.css

@@ -0,0 +1,13 @@
+.lowentry-mui--mui-root
+{
+    width:      100%;
+    min-height: 100dvh;
+}
+
+@media not (hover: hover), not (pointer: fine)
+{
+    .lowentry-mui--mui-root .MuiButtonBase-root:not(.allow-mobile-hover):hover
+    {
+        background-color: rgba(255, 255, 255, 0) !important;
+    }
+}

package/widgets/MuiRoot.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {LeRed} from '@lowentry/react-redux';
+import {CssBaseline, ThemeProvider} from '@mui/material';
+import {LocalizationProvider} from '@mui/x-date-pickers';
+import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
+import './MuiRoot.css';
+
+
+export const MuiRoot = LeRed.memo(({theme, className, children, ...props}) =>
+{
+	return (<>
+		<CssBaseline/>
+		<ThemeProvider theme={theme}>
+			<LocalizationProvider dateAdapter={AdapterDayjs}>
+				<div className={'lowentry-mui--mui-root ' + (className ?? '')} {...props}>
+					{children}
+				</div>
+			</LocalizationProvider>
+		</ThemeProvider>
+	</>);
+});

package/widgets/NumericTextField.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import {LeRed} from '@lowentry/react-redux';
+import {LeUtils, FLOAT_LAX, INT_LAX_ANY} from '@lowentry/utils';
+import {TextField} from './TextField.jsx';
+import {LeMuiUtils} from '../LeMuiUtils.js';
+
+
+export const NumericTextField = LeRed.memo(({decimals, allowZero, allowNegative, value, onChange, onRenderValue, className, inputProps, children, ...props}) =>
+{
+	if(typeof allowZero === 'undefined')
+	{
+		allowZero = true;
+	}
+	if(typeof allowNegative === 'undefined')
+	{
+		allowNegative = true;
+	}
+	decimals = INT_LAX_ANY(decimals, 2);
+	
+	
+	const getVisualValue = (value) =>
+	{
+		let text = FLOAT_LAX(LeMuiUtils.purgePrependedHiddenChar(value));
+		if(!allowNegative)
+		{
+			text = Math.abs(text);
+		}
+		
+		text = text.toFixed(decimals); // rounds it
+		text = LeUtils.trimEnd(LeUtils.trimEnd(text, '0'), '.');
+		if(!allowZero && (text === '0'))
+		{
+			text = '';
+		}
+		return text;
+	};
+	
+	
+	const [visualValue, setVisualValue] = LeRed.useState(getVisualValue(value));
+	
+	LeRed.useEffect(() =>
+	{
+		setVisualValue(getVisualValue(value));
+	}, [value]);
+	
+	
+	const onChanged = LeRed.useCallback((event) =>
+	{
+		const originalTargetValue = event.target.value;
+		const targetValue = LeMuiUtils.purgePrependedHiddenChar(originalTargetValue);
+		
+		let text = targetValue;
+		let val = 0;
+		
+		{// visual >>
+			const minus = text.includes('-');
+			text = text.replace(',', '.').replace(/[^0-9.]/g, '');
+			if(text !== '')
+			{
+				val = Math.abs(FLOAT_LAX(text));
+				if(allowNegative && minus)
+				{
+					val = -val;
+				}
+				
+				let stringVal = val.toFixed(decimals + 1); // prevents rounding (by adding an extra digit and then cutting it off)
+				stringVal = stringVal.substring(0, stringVal.length - 1);
+				
+				if(!text.includes('.') || (decimals <= 0))
+				{
+					text = stringVal.split('.')[0];
+				}
+				else if(text.endsWith('.'))
+				{
+					text = stringVal.split('.')[0] + '.';
+				}
+				else
+				{
+					text = stringVal.substring(0, stringVal.length - Math.max(0, decimals - text.split('.')[1].length));
+				}
+				setVisualValue(text);
+			}
+		}// visual <<
+		
+		if(onChange)
+		{
+			if(val !== 0)
+			{
+				if(decimals > 0)
+				{
+					val = Math.round(val * Math.pow(10, decimals)) / Math.pow(10, decimals);
+				}
+				else
+				{
+					val = Math.round(val);
+				}
+			}
+			
+			const newEvent = {
+				...event,
+				target:{
+					...event.target,
+					value:    val,
+					valueText:text,
+					valueRaw: originalTargetValue,
+				},
+			};
+			onChange(newEvent);
+		}
+	}, [onChange]);
+	
+	
+	return (<>
+		<TextField className={'lowentry-mui--numeric-textfield ' + (className ?? '')} type="text" inputProps={{inputMode:'decimal', ...(inputProps ?? {})}} value={!!onRenderValue ? onRenderValue(visualValue) : visualValue} onChange={onChanged} {...props}>{children}</TextField>
+	</>);
+});

package/widgets/RemovableNumericTextField.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {LeRed} from '@lowentry/react-redux';
+import {LeMuiUtils} from '../LeMuiUtils';
+import {NumericTextField} from './NumericTextField.jsx';
+
+
+export const RemovableNumericTextField = LeRed.memo(({onRemove, onChange, onSelect, className, children, ...props}) =>
+{
+	const onChanged = LeRed.useCallback((event) =>
+	{
+		if(event.target.valueRaw === '')
+		{
+			if(onRemove)
+			{
+				onRemove(event);
+			}
+			return;
+		}
+		
+		if(onChange)
+		{
+			onChange(event);
+		}
+	}, [onRemove, onChange]);
+	
+	
+	const onSelected = LeRed.useCallback((event) =>
+	{
+		LeMuiUtils.onSelectEnsureMinimumOffset(1)(event);
+		if(onSelect)
+		{
+			onSelect(event);
+		}
+	}, [onSelect]);
+	
+	
+	return (<>
+		<NumericTextField className={'lowentry-mui--removable-textfield lowentry-mui--removable-numeric-textfield ' + (className ?? '')} onRenderValue={LeMuiUtils.prependHiddenChar} onChange={onChanged} onSelect={onSelected}>{children}</NumericTextField>
+	</>);
+});

package/widgets/RemovableTextField.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import {LeRed} from '@lowentry/react-redux';
+import {LeMuiUtils} from '../LeMuiUtils';
+import {TextField} from './TextField.jsx';
+
+
+export const RemovableTextField = LeRed.memo(({className, value, onRemove, onChange, onSelect, children, ...props}) =>
+{
+	const onChanged = LeRed.useCallback((event) =>
+	{
+		if(event.target.value === '')
+		{
+			if(onRemove)
+			{
+				onRemove(event);
+			}
+			return;
+		}
+		
+		if(onChange)
+		{
+			const newEvent = {
+				...event,
+				target:{
+					...event.target,
+					value:LeMuiUtils.purgePrependedHiddenChar(event.target.value),
+				},
+			};
+			onChange(newEvent);
+		}
+	}, [onRemove, onChange]);
+	
+	
+	const onSelected = LeRed.useCallback((event) =>
+	{
+		LeMuiUtils.onSelectEnsureMinimumOffset(1)(event);
+		if(onSelect)
+		{
+			onSelect(event);
+		}
+	}, [onSelect]);
+	
+	
+	return (<>
+		<TextField className={'lowentry-mui--removable-textfield ' + (className ?? '')} value={LeMuiUtils.prependHiddenChar(value)} onChange={onChanged} onSelect={onSelected} {...props}>{children}</TextField>
+	</>);
+});

package/widgets/Submittable.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {Stack} from '@mui/material';
+
+
+export const Submittable = LeRed.memo(({onSubmit, disabled, sx, children, ...props}) =>
+{
+	const handleSubmit = LeRed.useCallback((event) =>
+	{
+		try
+		{
+			event.preventDefault();
+		}
+		catch(e)
+		{
+		}
+		
+		if(disabled)
+		{
+			if(!(typeof disabled === 'function') || disabled())
+			{
+				return;
+			}
+		}
+		
+		if(onSubmit)
+		{
+			onSubmit(event);
+		}
+	}, [onSubmit, disabled]);
+	
+	
+	return (<>
+		<form style={sx ?? {}} onSubmit={handleSubmit}>
+			<Stack {...props}>
+				{children}
+			</Stack>
+		</form>
+	</>);
+});

package/widgets/TextField.css

@@ -0,0 +1,4 @@
+.lowentry-mui--textfield
+{
+    cursor: auto;
+}

package/widgets/TextField.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {LeRed} from '@lowentry/react-redux';
+import {TextField as MuiTextField} from '@mui/material';
+import './TextField.css';
+
+
+export const TextField = LeRed.memo(({className, onClick, children, ...props}) =>
+{
+	const onClicked = LeRed.useCallback((event) =>
+	{
+		try
+		{
+			event.stopPropagation();
+		}
+		catch(e)
+		{
+		}
+		
+		if(onClick)
+		{
+			onClick(event);
+		}
+	}, [onClick]);
+	
+	
+	return (<>
+		<MuiTextField className={'lowentry-mui--textfield ' + (className ?? '')} autoComplete="off" onClick={onClicked} {...props}>{children}</MuiTextField>
+	</>);
+});