@ouroboros/mouth-mui 1.3.2 → 2.1.1

package/lib/components/pages/Templates/index.js

@@ -8,9 +8,8 @@
  */
 // Ouroboros modules
 import { useRights } from '@ouroboros/brain-react';
-import clone from '@ouroboros/clone';
 import mouth from '@ouroboros/mouth';
-import { afindi } from '@ouroboros/tools';
+import { arrayFindOverwrite } from '@ouroboros/tools';
 // NPM modules
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
@@ -31,7 +30,7 @@ import Template from './Template';
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Templates(props) {
+export default function Templates({ onError, onSuccess }) {
     // State
     const [create, createSet] = useState(false);
     const [locales, localesSet] = useState({});
@@ -64,29 +63,19 @@ export default function Templates(props) {
     // Called when a template has been created
     function templateCreated(template) {
         // Notify parent
-        props.onSuccess('template_create');
+        onSuccess('template_create');
         // Hide the create form
         createSet(false);
         // Clone the current templates, add the new one to the front, and set
         //	the new templates
-        const lTemplates = clone(templates);
-        lTemplates.unshift(template);
-        templatesSet(lTemplates);
+        templatesSet(l => [template, ...l]);
     }
     // Called when a template has been updated
     function templateUpdated(template) {
         // Notify parent
-        props.onSuccess('template_update');
-        // Look for the template
-        const i = afindi(templates, '_id', template._id);
-        // If we have it
-        if (i > -1) {
-            // Clone the current templates, update the index, and set the new
-            //	templates
-            const lTemplates = clone(templates);
-            lTemplates[i] = template;
-            templatesSet(lTemplates);
-        }
+        onSuccess('template_update');
+        // Work on latest
+        templatesSet(l => arrayFindOverwrite(l, '_id', template._id, template, true));
     }
     // Render
     return (React.createElement(Box, { id: "mouth_templates", className: "flexGrow padding" },
@@ -98,15 +87,14 @@ export default function Templates(props) {
                         React.createElement(IconButton, null,
                             React.createElement("i", { className: 'fa-solid fa-plus' + (create ? ' open' : '') }))))),
         create &&
-            React.createElement(Create, { onCancel: () => createSet(false), onCreated: templateCreated, onError: props.onError }),
-        templates.map((o) => React.createElement(Template, { key: o._id, locales: locales, mobile: props.mobile, onChange: templateUpdated, onContent: type => props.onSuccess(`content_${type}`), onError: props.onError, rights: {
+            React.createElement(Create, { onCancel: () => createSet(false), onCreated: templateCreated, onError: onError }),
+        templates.map((o) => React.createElement(Template, { key: o._id, locales: locales, onChange: templateUpdated, onContent: type => onSuccess(`content_${type}`), onError: onError, rights: {
                 content: rightsContent,
                 template: rightsTemplate
             }, value: o }))));
 }
 // Valid props
 Templates.propTypes = {
-    mobile: PropTypes.bool.isRequired,
     onError: PropTypes.func.isRequired,
     onSuccess: PropTypes.func.isRequired
 };

package/lib/shared.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared
+ *
+ * Holds the Trees used by all the components
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @copyright Ouroboros Coding Inc.
+ * @created 2025-03-11
+ */
+import { Tree } from '@ouroboros/define';
+export declare const EmailTree: Tree;
+export declare const SmsTree: Tree;

package/lib/shared.js

@@ -0,0 +1,25 @@
+/**
+ * Shared
+ *
+ * Holds the Trees used by all the components
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @copyright Ouroboros Coding Inc.
+ * @created 2025-03-11
+ */
+// Ouroboros imports
+import { Tree } from '@ouroboros/define';
+// Mouth definition files
+import TemplateEmailDef from '@ouroboros/mouth/define/template_email.json';
+import TemplateSMSDef from '@ouroboros/mouth/define/template_sms.json';
+// Generate the email Tree
+export const EmailTree = new Tree(TemplateEmailDef, {
+    __name__: 'record',
+    text: { __ui__: { __title__: 'Plain Text', __type__: 'textarea' } },
+    html: { __ui__: { __title__: 'Raw HTML', __type__: 'textarea' } }
+});
+// Generate the sms Tree
+export const SmsTree = new Tree(TemplateSMSDef, {
+    __name__: 'record',
+    content: { __ui__: { __title__: 'Content', __type__: 'textarea' } }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ouroboros/mouth-mui",
-	"version": "1.3.2",
+	"version": "2.1.1",
 	"description": "Components for use with the Mouth service",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",
@@ -34,9 +34,9 @@
 		"typescript": "^4.8.3"
 	},
 	"dependencies": {
-		"@ouroboros/clone": "^1.1.0",
-		"@ouroboros/define": "^1.1.2",
-		"@ouroboros/define-mui": "^1.5.5",
+		"@ouroboros/define": "^1.1.3",
+		"@ouroboros/define-mui": "^1.5.6",
+		"@ouroboros/mouth": "^2.1.1",
 		"@ouroboros/react-radiobuttons-mui": "^1.1.0",
 		"@ouroboros/subscribe": "^1.3.2",
 		"@ouroboros/tools": "^0.7.0",
@@ -46,11 +46,10 @@
 		"@emotion/react": "^11.8.2",
 		"@emotion/styled": "^11.8.1",
 		"@mui/material": "^5.5.1",
-		"@ouroboros/body": "^1.1.2",
-		"@ouroboros/brain-react": "^2.2.0",
+		"@ouroboros/body": "^1.2.0",
+		"@ouroboros/brain-react": "^2.3.1",
 		"@ouroboros/events": "^1.1.0",
-		"@ouroboros/mouth": "^1.2.0",
 		"react": "^17.0.2 || ^18.0.0",
 		"react-dom": "^17.0.2 || ^18.0.0"
 	}
-}
+}

package/src/components/pages/Locales.tsx

@@ -9,11 +9,10 @@
 
 // Ouroboros modules
 import { useRights } from '@ouroboros/brain-react';
-import clone from '@ouroboros/clone';
 import { Tree } from '@ouroboros/define'
 import { Form, Results } from '@ouroboros/define-mui';
 import mouth, { errors } from '@ouroboros/mouth';
-import LocaleDef from '@ouroboros/mouth/definitions/locale.json';
+import LocaleDef from '@ouroboros/mouth/define/locale.json';
 import { afindi, merge } from '@ouroboros/tools';
 
 // NPM modules
@@ -30,12 +29,21 @@ import Tooltip from '@mui/material/Tooltip';
 import locales from '../../locales';
 
 // Generate the user Tree
-const LocaleTree = new Tree(LocaleDef);
+const LocaleTree = new Tree(LocaleDef, {
+	__name__: 'record',
+	__ui__: {
+		__copyPrimary__: false,
+		__create__: [ '_id', 'name' ],
+		__results__: [ '_id', 'name' ],
+		__update__: [ 'name' ]
+	},
+
+	_id: { __ui__: { __title__: 'ISO-639 - ISO-3166' } }
+});
 
 // Types
 import { responseErrorStruct } from '@ouroboros/body';
 export type LocalesProps = {
-	mobile: boolean,
 	onError: (error: responseErrorStruct) => void,
 	onSuccess: (type: string) => void
 }
@@ -50,11 +58,11 @@ export type LocalesProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Locales(props: LocalesProps) {
+export default function Locales({ onError, onSuccess }: LocalesProps) {
 
 	// State
-	const [create, createSet] = useState<boolean>(false);
-	const [records, recordsSet] = useState<any[]>([]);
+	const [ create, createSet ] = useState<boolean>(false);
+	const [ records, recordsSet ] = useState<any[]>([ ]);
 
 	// Hooks
 	const rights = useRights('mouth_locale');
@@ -89,15 +97,14 @@ export default function Locales(props: LocalesProps) {
 				if(data) {
 
 					// Notify the parent
-					props.onSuccess('create');
+					onSuccess('create');
 
 					// Close the create form
 					createSet(false);
 
-					// Clone the records, add the new one to the start, and set the new
-					//	records
-					const lRecords = clone(records);
-					lRecords.unshift(locale);
+					// Clone the records, add the new one to the start, and set
+					//	the new records
+					const lRecords = [ locale, ...records ];
 					recordsSet(lRecords);
 
 					// Send the clone to the locales
@@ -113,8 +120,8 @@ export default function Locales(props: LocalesProps) {
 				} else if(error.code === errors.body.DATA_FIELDS) {
 					reject(error.msg);
 				} else {
-					if(props.onError) {
-						props.onError(error);
+					if(onError) {
+						onError(error);
 					} else {
 						throw new Error(JSON.stringify(error));
 					}
@@ -133,7 +140,7 @@ export default function Locales(props: LocalesProps) {
 			if(data) {
 
 				// Notify the parent
-				props.onSuccess('delete');
+				onSuccess('delete');
 
 				// Look for the record
 				const i = afindi(records, '_id', key);
@@ -141,8 +148,9 @@ export default function Locales(props: LocalesProps) {
 				// If it exists
 				if(i > -1) {
 
-					// Clone the records, delete the index, and set the new records
-					const lRecords = clone(records);
+					// Clone the records, delete the index, and set the new
+					//	records
+					const lRecords = [ ...records ];
 					lRecords.splice(i, 1);
 					recordsSet(lRecords);
 
@@ -151,8 +159,8 @@ export default function Locales(props: LocalesProps) {
 				}
 			}
 		}, (error: responseErrorStruct) => {
-			if(props.onError) {
-				props.onError(error);
+			if(onError) {
+				onError(error);
 			} else {
 				throw new Error(JSON.stringify(error));
 			}
@@ -175,7 +183,7 @@ export default function Locales(props: LocalesProps) {
 				if(data) {
 
 					// Notify the parent
-					props.onSuccess('update');
+					onSuccess('update');
 
 					// Look for the record
 					const i = afindi(records, '_id', key);
@@ -183,8 +191,9 @@ export default function Locales(props: LocalesProps) {
 					// If it exists
 					if(i > -1) {
 
-						// Clone the records, update the index, and set the new records
-						const lRecords = clone(records);
+						// Clone the records, update the index, and set the new
+						//	records
+						const lRecords = [ ...records ];
 						merge(lRecords[i], locale);
 						recordsSet(lRecords);
 
@@ -200,8 +209,8 @@ export default function Locales(props: LocalesProps) {
 				if(error.code === errors.body.DATA_FIELDS) {
 					reject(error.msg);
 				} else {
-					if(props.onError) {
-						props.onError(error);
+					if(onError) {
+						onError(error);
 					} else {
 						throw new Error(JSON.stringify(error));
 					}
@@ -217,9 +226,14 @@ export default function Locales(props: LocalesProps) {
 				<h1 className="flexGrow">Locales</h1>
 				{rights.create &&
 					<Box className="flexStatic">
-						<Tooltip title="Create new Locale" className="page_action" onClick={() => createSet(b => !b)}>
+						<Tooltip
+							title="Create new Locale"
+							className="page_action"
+							onClick={() => createSet(b => !b)}
+						>
 							<IconButton>
-								<i className={'fa-solid fa-plus' + (create ? ' open' : '')} />
+								<i className={'fa-solid fa-plus' +
+									(create ? ' open' : '')} />
 							</IconButton>
 						</Tooltip>
 					</Box>
@@ -248,7 +262,6 @@ export default function Locales(props: LocalesProps) {
 
 // Valid props
 Locales.propTypes = {
-	mobile: PropTypes.bool.isRequired,
 	onError: PropTypes.func.isRequired,
 	onSuccess: PropTypes.func.isRequired
 }

package/src/components/pages/Templates/Create.tsx

@@ -8,11 +8,10 @@
  */
 
 // Ouroboros modules
-import clone from '@ouroboros/clone';
 import { Node } from '@ouroboros/define';
 import { DefineNode } from '@ouroboros/define-mui';
 import mouth, { errors } from '@ouroboros/mouth';
-import TemplateDef from '@ouroboros/mouth/definitions/template.json';
+import TemplateDef from '@ouroboros/mouth/define/template.json';
 
 // NPM modules
 import PropTypes from 'prop-types';
@@ -49,10 +48,10 @@ export interface CreateProps {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Create(props: CreateProps) {
+export default function Create({ onCancel, onCreated, onError }: CreateProps) {
 
 	// State
-	const [record, recordSet] = useState<templateStruct>({
+	const [ record, recordSet ] = useState<templateStruct>({
 		name: '',
 		variables: {}
 	});
@@ -61,13 +60,11 @@ export default function Create(props: CreateProps) {
 	const refName = useRef<DefineNode>(null);
 
 	// Called when record changes
-	function change(field: string, value: any) {
+	function change(field: string, val: any) {
 
 		// Set the new record
 		recordSet((o: templateStruct) => {
-			const oRecord = clone(o);
-			oRecord[field] = value;
-			return oRecord;
+			return { ...o, [field]: val }
 		});
 	}
 
@@ -81,13 +78,13 @@ export default function Create(props: CreateProps) {
 			record._id = data;
 
 			// Let the parent know
-			props.onCreated(clone(record));
+			onCreated({ ...record });
 		}, (error: responseErrorStruct) => {
 			if(error.code === errors.body.DB_DUPLICATE) {
 				refName.current?.error('Duplicate');
 			} else {
-				if(props.onError) {
-					props.onError(error);
+				if(onError) {
+					onError(error);
 				} else {
 					throw new Error(JSON.stringify(error));
 				}
@@ -106,7 +103,7 @@ export default function Create(props: CreateProps) {
 						label="none"
 						name="name"
 						node={oNameNode}
-						onChange={value => change('name', value)}
+						onChange={val => change('name', val)}
 						onEnterPressed={create}
 						ref={refName}
 						type="create"
@@ -116,13 +113,13 @@ export default function Create(props: CreateProps) {
 				<Grid item lg={6} md={12}>
 					<Typography><strong>Variables</strong></Typography>
 					<Variables
-						onChange={value => change('variables', value)}
+						onChange={val => change('variables', val)}
 						value={record.variables || {}}
 					/>
 				</Grid>
 				<Grid item xs={12} className="actions">
-					{props.onCancel &&
-						<Button variant="contained" color="secondary" onClick={props.onCancel}>Cancel</Button>
+					{onCancel &&
+						<Button variant="contained" color="secondary" onClick={onCancel}>Cancel</Button>
 					}
 					<Button variant="contained" color="primary" onClick={create}>Create Template</Button>
 				</Grid>

package/src/components/pages/Templates/Template/Content/Create/Email.tsx

@@ -8,9 +8,7 @@
  */
 
 // Ouroboros modules
-import { Node } from '@ouroboros/define';
 import { DefineNode } from '@ouroboros/define-mui';
-import TemplateEmail from '@ouroboros/mouth/definitions/template_email.json';
 
 // NPM modules
 import PropTypes from 'prop-types';
@@ -19,10 +17,8 @@ import React from 'react';
 // Material UI
 import Grid from '@mui/material/Grid';
 
-// Record Nodes
-const oSubjectNode = new Node(TemplateEmail.subject);
-const oTextNode = new Node(TemplateEmail.text);
-const oHtmlNode = new Node(TemplateEmail.html);
+// Import the shared types
+import { EmailTree } from '../../../../../../shared';
 
 // Types
 import { contentStruct } from '../../';
@@ -42,42 +38,42 @@ export type EmailProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Email(props: EmailProps) {
+export default function Email({ errors, onChanged, value }: EmailProps) {
 
 	// Render
 	return (
 		<Grid container className="content_create_email" spacing={1}>
 			<Grid item xs={12} className="field">
 				<DefineNode
-					error={props.errors.subject || false}
+					error={errors.subject || false}
 					label="placeholder"
 					name="subject"
-					node={oSubjectNode}
-					onChange={val => props.onChanged('subject', val)}
+					node={EmailTree.get('subject') as any}
+					onChange={val => onChanged('subject', val)}
 					type="create"
-					value={props.value.subject}
+					value={value.subject}
 				/>
 			</Grid>
 			<Grid item xs={12} lg={6} className="field">
 				<DefineNode
-					error={props.errors.text || false}
+					error={errors.text || false}
 					label="placeholder"
 					name="text"
-					node={oTextNode}
-					onChange={val => props.onChanged('text', val)}
+					node={EmailTree.get('text') as any}
+					onChange={val => onChanged('text', val)}
 					type="create"
-					value={props.value.text}
+					value={value.text}
 				/>
 			</Grid>
 			<Grid item xs={12} lg={6} className="field">
 				<DefineNode
-					error={props.errors.html || false}
+					error={errors.html || false}
 					label="placeholder"
 					name="html"
-					node={oHtmlNode}
-					onChange={val => props.onChanged('html', val)}
+					node={EmailTree.get('html') as any}
+					onChange={val => onChanged('html', val)}
 					type="create"
-					value={props.value.html}
+					value={value.html}
 				/>
 			</Grid>
 		</Grid>

package/src/components/pages/Templates/Template/Content/Create/SMS.tsx

@@ -8,9 +8,7 @@
  */
 
 // Ouroboros modules
-import { Node } from '@ouroboros/define';
 import { DefineNode } from '@ouroboros/define-mui';
-import TemplateSMS from '@ouroboros/mouth/definitions/template_sms.json';
 
 // NPM modules
 import PropTypes from 'prop-types';
@@ -19,8 +17,8 @@ import React from 'react';
 // Material UI
 import Box from '@mui/material/Box';
 
-// Record Nodes
-const oContentNode = new Node(TemplateSMS.content);
+// Import the shared types
+import { SmsTree } from '../../../../../../shared';
 
 // Types
 import { contentStruct } from '../../';
@@ -40,19 +38,19 @@ export type SMSProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function SMS(props: SMSProps) {
+export default function SMS({ errors, onChanged, value }: SMSProps) {
 
 	// Render
 	return (
 		<Box className="content_create_sms field">
 			<DefineNode
-				error={props.errors.content || false}
+				error={errors.content || false}
 				label="placeholder"
 				name="content"
-				node={oContentNode}
-				onChange={val => props.onChanged('content', val)}
+				node={SmsTree.get('content') as any}
+				onChange={val => onChanged('content', val)}
 				type="create"
-				value={props.value.content}
+				value={value.content}
 			/>
 		</Box>
 	);

package/src/components/pages/Templates/Template/Content/Create/index.tsx

@@ -8,7 +8,6 @@
  */
 
 // Ouroboros modules
-import clone from '@ouroboros/clone';
 import { errorTree } from '@ouroboros/define-mui';
 import mouth, { errors } from '@ouroboros/mouth';
 import RadioButtons from '@ouroboros/react-radiobuttons-mui';
@@ -36,7 +35,6 @@ import { contentStruct, typeOption } from '../../';
 import { responseErrorStruct } from '@ouroboros/body';
 export type TemplateContentCreateProps = {
 	locales: Record<string, string>,
-	mobile: boolean,
 	onCreated: (content: contentStruct) => void,
 	onError: (error: responseErrorStruct) => void,
 	template: string
@@ -52,14 +50,16 @@ export type TemplateContentCreateProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Create(props: TemplateContentCreateProps) {
+export default function Create(
+	{ locales, onCreated, onError, template }: TemplateContentCreateProps
+) {
 
 	// State
 	const [fieldErrors, fieldErrorsSet] = useState<Record<string, any>>({});
 	const [preview, previewSet] = useState(false);
 	const [record, recordSet] = useState<Omit<contentStruct, 'type'>>({
-		locale: Object.keys(props.locales)[0],
-		template: props.template,
+		locale: Object.keys(locales)[0],
+		template,
 		subject: '',
 		text: '',
 		html: ''
@@ -76,7 +76,7 @@ export default function Create(props: TemplateContentCreateProps) {
 			const oRecord = { ...record, type, _id: data }
 
 			// Tell the parent about the new record
-			props.onCreated(oRecord);
+			onCreated(oRecord);
 
 		}, (error: responseErrorStruct) => {
 			if(error.code === errors.body.DATA_FIELDS) {
@@ -101,11 +101,11 @@ export default function Create(props: TemplateContentCreateProps) {
 				}
 
 				// Show the errors
-				if(props.onError) {
-					props.onError({ code: 0, msg: lLines.join('\n') });
+				if(onError) {
+					onError({ code: 0, msg: lLines.join('\n') });
 				}
 			} else {
-				props.onError(error);
+				onError(error);
 			}
 		});
 	}
@@ -115,26 +115,20 @@ export default function Create(props: TemplateContentCreateProps) {
 
 		// Clear error
 		if(field in fieldErrors) {
-			const oErrors = clone(fieldErrors);
+			const oErrors = { ...fieldErrors };
 			delete oErrors[field];
 			fieldErrorsSet(oErrors);
 		}
 
-		// Clone the record
-		const oRecord = clone(record);
-
-		// Update the field
-		oRecord[field] = value;
-
-		// Store the new record
-		recordSet(oRecord);
+		// Set the new record
+		recordSet(o => { return { ...o, [field]: value } });
 	}
 
 	// Called when the type is changed
 	function typeChanged(value: string) {
 
 		// Clone the current record
-		const oRecord = clone(record);
+		const oRecord = { ...record };
 
 		// If the new type is email
 		if(value === 'email') {
@@ -200,7 +194,7 @@ export default function Create(props: TemplateContentCreateProps) {
 						onChange={ev => recordChanged('locale', ev.target.value)}
 						value={record.locale}
 					>
-						{omap(props.locales, (v,k) =>
+						{omap(locales, (v,k) =>
 							<option key={k} value={k}>{v}</option>
 						)}
 					</Select>
@@ -229,13 +223,12 @@ export default function Create(props: TemplateContentCreateProps) {
 				<Button color="primary" onClick={create} variant="contained">Add Content</Button>
 				{preview &&
 					<Preview
-						mobile={props.mobile}
 						onClose={() => previewSet(false)}
 						onError={(error: responseErrorStruct) => {
 							if(error.code === errors.body.DATA_FIELDS) {
 								fieldErrorsSet(errorTree(error.msg));
 							} else {
-								props.onError(error);
+								onError(error);
 							}
 							previewSet(false);
 						}}
@@ -250,7 +243,6 @@ export default function Create(props: TemplateContentCreateProps) {
 // Valid props
 Create.propTypes = {
 	locales: PropTypes.objectOf(PropTypes.string).isRequired,
-	mobile: PropTypes.bool.isRequired,
 	onCreated: PropTypes.func.isRequired,
 	onError: PropTypes.func,
 	template: PropTypes.string.isRequired