@ouroboros/mouth-mui 1.3.1 → 2.1.0

package/lib/components/pages/Locales.d.ts

@@ -10,7 +10,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { responseErrorStruct } from '@ouroboros/body';
 export type LocalesProps = {
-    mobile: boolean;
     onError: (error: responseErrorStruct) => void;
     onSuccess: (type: string) => void;
 };
@@ -24,10 +23,9 @@ export type LocalesProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-declare function Locales(props: LocalesProps): React.JSX.Element;
+declare function Locales({ onError, onSuccess }: LocalesProps): React.JSX.Element;
 declare namespace Locales {
     var propTypes: {
-        mobile: PropTypes.Validator<boolean>;
         onError: PropTypes.Validator<(...args: any[]) => any>;
         onSuccess: PropTypes.Validator<(...args: any[]) => any>;
     };

package/lib/components/pages/Locales.js

@@ -8,11 +8,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
 import PropTypes from 'prop-types';
@@ -25,7 +24,16 @@ import Tooltip from '@mui/material/Tooltip';
 // Local modules
 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' } }
+});
 /**
  * Locales
  *
@@ -36,7 +44,7 @@ const LocaleTree = new Tree(LocaleDef);
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Locales(props) {
+export default function Locales({ onError, onSuccess }) {
     // State
     const [create, createSet] = useState(false);
     const [records, recordsSet] = useState([]);
@@ -65,13 +73,12 @@ export default function Locales(props) {
                 // If we were successful
                 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
                     locales.set(lRecords);
@@ -86,8 +93,8 @@ export default function Locales(props) {
                     reject(error.msg);
                 }
                 else {
-                    if (props.onError) {
-                        props.onError(error);
+                    if (onError) {
+                        onError(error);
                     }
                     else {
                         throw new Error(JSON.stringify(error));
@@ -103,13 +110,14 @@ export default function Locales(props) {
             // If it was successful
             if (data) {
                 // Notify the parent
-                props.onSuccess('delete');
+                onSuccess('delete');
                 // Look for the record
                 const i = afindi(records, '_id', key);
                 // 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);
                     // Send the clone to the locales
@@ -117,8 +125,8 @@ export default function Locales(props) {
                 }
             }
         }, (error) => {
-            if (props.onError) {
-                props.onError(error);
+            if (onError) {
+                onError(error);
             }
             else {
                 throw new Error(JSON.stringify(error));
@@ -136,13 +144,14 @@ export default function Locales(props) {
                 // If we were successful
                 if (data) {
                     // Notify the parent
-                    props.onSuccess('update');
+                    onSuccess('update');
                     // Look for the record
                     const i = afindi(records, '_id', key);
                     // 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);
                         // Send the clone to the locales
@@ -156,8 +165,8 @@ export default function Locales(props) {
                     reject(error.msg);
                 }
                 else {
-                    if (props.onError) {
-                        props.onError(error);
+                    if (onError) {
+                        onError(error);
                     }
                     else {
                         throw new Error(JSON.stringify(error));
@@ -174,7 +183,8 @@ export default function Locales(props) {
                 React.createElement(Box, { className: "flexStatic" },
                     React.createElement(Tooltip, { title: "Create new Locale", className: "page_action", onClick: () => createSet(b => !b) },
                         React.createElement(IconButton, null,
-                            React.createElement("i", { className: 'fa-solid fa-plus' + (create ? ' open' : '') }))))),
+                            React.createElement("i", { className: 'fa-solid fa-plus' +
+                                    (create ? ' open' : '') }))))),
         create &&
             React.createElement(Paper, { className: "padding" },
                 React.createElement(Form, { onCancel: () => createSet(false), onSubmit: createSubmit, tree: LocaleTree, type: "create" })),
@@ -182,7 +192,6 @@ export default function Locales(props) {
 }
 // Valid props
 Locales.propTypes = {
-    mobile: PropTypes.bool.isRequired,
     onError: PropTypes.func.isRequired,
     onSuccess: PropTypes.func.isRequired
 };

package/lib/components/pages/Templates/Create.d.ts

@@ -25,7 +25,7 @@ export interface CreateProps {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-declare function Create(props: CreateProps): React.JSX.Element;
+declare function Create({ onCancel, onCreated, onError }: CreateProps): React.JSX.Element;
 declare namespace Create {
     var propTypes: {
         onCancel: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -7,11 +7,10 @@
  * @created 2023-01-20
  */
 // 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';
 import React, { useRef, useState } from 'react';
@@ -34,7 +33,7 @@ const oNameNode = new Node(TemplateDef.name);
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Create(props) {
+export default function Create({ onCancel, onCreated, onError }) {
     // State
     const [record, recordSet] = useState({
         name: '',
@@ -43,12 +42,10 @@ export default function Create(props) {
     // Refs
     const refName = useRef(null);
     // Called when record changes
-    function change(field, value) {
+    function change(field, val) {
         // Set the new record
         recordSet((o) => {
-            const oRecord = clone(o);
-            oRecord[field] = value;
-            return oRecord;
+            return { ...o, [field]: val };
         });
     }
     // Called to create the template
@@ -58,14 +55,14 @@ export default function Create(props) {
             // Add the ID to the record
             record._id = data;
             // Let the parent know
-            props.onCreated(clone(record));
+            onCreated({ ...record });
         }, (error) => {
             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));
@@ -80,14 +77,14 @@ export default function Create(props) {
             React.createElement(Grid, { item: true, lg: 6, md: 12, className: "field" },
                 React.createElement(Typography, null,
                     React.createElement("strong", null, "Name")),
-                React.createElement(DefineNode, { label: "none", name: "name", node: oNameNode, onChange: value => change('name', value), onEnterPressed: create, ref: refName, type: "create", value: record.name || null })),
+                React.createElement(DefineNode, { label: "none", name: "name", node: oNameNode, onChange: val => change('name', val), onEnterPressed: create, ref: refName, type: "create", value: record.name || null })),
             React.createElement(Grid, { item: true, lg: 6, md: 12 },
                 React.createElement(Typography, null,
                     React.createElement("strong", null, "Variables")),
-                React.createElement(Variables, { onChange: value => change('variables', value), value: record.variables || {} })),
+                React.createElement(Variables, { onChange: val => change('variables', val), value: record.variables || {} })),
             React.createElement(Grid, { item: true, xs: 12, className: "actions" },
-                props.onCancel &&
-                    React.createElement(Button, { variant: "contained", color: "secondary", onClick: props.onCancel }, "Cancel"),
+                onCancel &&
+                    React.createElement(Button, { variant: "contained", color: "secondary", onClick: onCancel }, "Cancel"),
                 React.createElement(Button, { variant: "contained", color: "primary", onClick: create }, "Create Template")))));
 }
 // Valid props

package/lib/components/pages/Templates/Template/Content/Create/Email.d.ts

@@ -24,7 +24,7 @@ export type EmailProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-declare function Email(props: EmailProps): React.JSX.Element;
+declare function Email({ errors, onChanged, value }: EmailProps): React.JSX.Element;
 declare namespace Email {
     var propTypes: {
         errors: PropTypes.Validator<object>;

package/lib/components/pages/Templates/Template/Content/Create/Email.js

@@ -7,18 +7,14 @@
  * @created 2023-01-22
  */
 // 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';
 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';
 /**
  * Email
  *
@@ -29,15 +25,15 @@ const oHtmlNode = new Node(TemplateEmail.html);
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Email(props) {
+export default function Email({ errors, onChanged, value }) {
     // Render
     return (React.createElement(Grid, { container: true, className: "content_create_email", spacing: 1 },
         React.createElement(Grid, { item: true, xs: 12, className: "field" },
-            React.createElement(DefineNode, { error: props.errors.subject || false, label: "placeholder", name: "subject", node: oSubjectNode, onChange: val => props.onChanged('subject', val), type: "create", value: props.value.subject })),
+            React.createElement(DefineNode, { error: errors.subject || false, label: "placeholder", name: "subject", node: EmailTree.get('subject'), onChange: val => onChanged('subject', val), type: "create", value: value.subject })),
         React.createElement(Grid, { item: true, xs: 12, lg: 6, className: "field" },
-            React.createElement(DefineNode, { error: props.errors.text || false, label: "placeholder", name: "text", node: oTextNode, onChange: val => props.onChanged('text', val), type: "create", value: props.value.text })),
+            React.createElement(DefineNode, { error: errors.text || false, label: "placeholder", name: "text", node: EmailTree.get('text'), onChange: val => onChanged('text', val), type: "create", value: value.text })),
         React.createElement(Grid, { item: true, xs: 12, lg: 6, className: "field" },
-            React.createElement(DefineNode, { error: props.errors.html || false, label: "placeholder", name: "html", node: oHtmlNode, onChange: val => props.onChanged('html', val), type: "create", value: props.value.html }))));
+            React.createElement(DefineNode, { error: errors.html || false, label: "placeholder", name: "html", node: EmailTree.get('html'), onChange: val => onChanged('html', val), type: "create", value: value.html }))));
 }
 // Valid props
 Email.propTypes = {

package/lib/components/pages/Templates/Template/Content/Create/SMS.d.ts

@@ -24,7 +24,7 @@ export type SMSProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-declare function SMS(props: SMSProps): React.JSX.Element;
+declare function SMS({ errors, onChanged, value }: SMSProps): React.JSX.Element;
 declare namespace SMS {
     var propTypes: {
         errors: PropTypes.Validator<object>;

package/lib/components/pages/Templates/Template/Content/Create/SMS.js

@@ -7,16 +7,14 @@
  * @created 2023-01-22
  */
 // 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';
 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';
 /**
  * SMS
  *
@@ -27,10 +25,10 @@ const oContentNode = new Node(TemplateSMS.content);
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function SMS(props) {
+export default function SMS({ errors, onChanged, value }) {
     // Render
     return (React.createElement(Box, { className: "content_create_sms field" },
-        React.createElement(DefineNode, { error: props.errors.content || false, label: "placeholder", name: "content", node: oContentNode, onChange: val => props.onChanged('content', val), type: "create", value: props.value.content })));
+        React.createElement(DefineNode, { error: errors.content || false, label: "placeholder", name: "content", node: SmsTree.get('content'), onChange: val => onChanged('content', val), type: "create", value: value.content })));
 }
 // Valid props
 SMS.propTypes = {

package/lib/components/pages/Templates/Template/Content/Create/index.d.ts

@@ -12,7 +12,6 @@ import { contentStruct } 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;
@@ -27,13 +26,12 @@ export type TemplateContentCreateProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-declare function Create(props: TemplateContentCreateProps): React.JSX.Element;
+declare function Create({ locales, onCreated, onError, template }: TemplateContentCreateProps): React.JSX.Element;
 declare namespace Create {
     var propTypes: {
         locales: PropTypes.Validator<{
             [x: string]: string | null | undefined;
         }>;
-        mobile: PropTypes.Validator<boolean>;
         onCreated: PropTypes.Validator<(...args: any[]) => any>;
         onError: PropTypes.Requireable<(...args: any[]) => any>;
         template: PropTypes.Validator<string>;

package/lib/components/pages/Templates/Template/Content/Create/index.js

@@ -7,7 +7,6 @@
  * @created 2023-01-22
  */
 // 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,13 +35,13 @@ import SMS from './SMS';
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Create(props) {
+export default function Create({ locales, onCreated, onError, template }) {
     // State
     const [fieldErrors, fieldErrorsSet] = useState({});
     const [preview, previewSet] = useState(false);
     const [record, recordSet] = useState({
-        locale: Object.keys(props.locales)[0],
-        template: props.template,
+        locale: Object.keys(locales)[0],
+        template,
         subject: '',
         text: '',
         html: ''
@@ -55,7 +54,7 @@ export default function Create(props) {
             // Add the type and ID
             const oRecord = { ...record, type, _id: data };
             // Tell the parent about the new record
-            props.onCreated(oRecord);
+            onCreated(oRecord);
         }, (error) => {
             if (error.code === errors.body.DATA_FIELDS) {
                 fieldErrorsSet(errorTree(error.msg));
@@ -81,12 +80,12 @@ export default function Create(props) {
                     lLines.push('The following variables are invalid: ' + oLines.variables.join(', '));
                 }
                 // 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);
             }
         });
     }
@@ -94,21 +93,17 @@ export default function Create(props) {
     function recordChanged(field, value) {
         // 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) {
         // Clone the current record
-        const oRecord = clone(record);
+        const oRecord = { ...record };
         // If the new type is email
         if (value === 'email') {
             // Store the content in the text field and remove it
@@ -147,7 +142,7 @@ export default function Create(props) {
         React.createElement(Grid, { item: true, xs: 12, md: 6, className: "field" },
             React.createElement(FormControl, { variant: "outlined", error: 'locale' in fieldErrors ? true : false },
                 React.createElement(InputLabel, { id: "content_create_locale" }, "Locale"),
-                React.createElement(Select, { label: "Locale", labelId: "content_create_locale", native: true, onChange: ev => recordChanged('locale', ev.target.value), value: record.locale }, omap(props.locales, (v, k) => React.createElement("option", { key: k, value: k }, v))),
+                React.createElement(Select, { label: "Locale", labelId: "content_create_locale", native: true, onChange: ev => recordChanged('locale', ev.target.value), value: record.locale }, omap(locales, (v, k) => React.createElement("option", { key: k, value: k }, v))),
                 fieldErrors.locale &&
                     React.createElement(FormHelperText, null, fieldErrors.locale))),
         React.createElement(Grid, { item: true, xs: 12 }, (type === 'email' &&
@@ -157,12 +152,12 @@ export default function Create(props) {
             React.createElement(Button, { color: "info", onClick: () => previewSet(true), variant: "contained" }, "Preview"),
             React.createElement(Button, { color: "primary", onClick: create, variant: "contained" }, "Add Content"),
             preview &&
-                React.createElement(Preview, { mobile: props.mobile, onClose: () => previewSet(false), onError: (error) => {
+                React.createElement(Preview, { onClose: () => previewSet(false), onError: (error) => {
                         if (error.code === errors.body.DATA_FIELDS) {
                             fieldErrorsSet(errorTree(error.msg));
                         }
                         else {
-                            props.onError(error);
+                            onError(error);
                         }
                         previewSet(false);
                     }, value: { ...record, type } }))));
@@ -170,7 +165,6 @@ export default function Create(props) {
 // 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

package/lib/components/pages/Templates/Template/Content/Preview/Email.d.ts

@@ -10,7 +10,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { contentStruct } from '../..';
 export type EmailProps = {
-    mobile: boolean;
     value: contentStruct;
 };
 /**
@@ -23,10 +22,9 @@ export type EmailProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-declare function Email(props: EmailProps): React.JSX.Element;
+declare function Email({ value }: EmailProps): React.JSX.Element;
 declare namespace Email {
     var propTypes: {
-        mobile: PropTypes.Validator<boolean>;
         value: PropTypes.Requireable<PropTypes.InferProps<{
             subject: PropTypes.Requireable<string>;
             text: PropTypes.Requireable<string>;

package/lib/components/pages/Templates/Template/Content/Preview/Email.js

@@ -22,27 +22,26 @@ import Typography from '@mui/material/Typography';
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Email(props) {
+export default function Email({ value }) {
     // Render
     return (React.createElement(Grid, { container: true, spacing: 2 },
         React.createElement(Grid, { item: true, xs: 12, md: 4, lg: 2, xl: 1 },
             React.createElement(Typography, null,
                 React.createElement("strong", null, "Subject"))),
-        React.createElement(Grid, { item: true, xs: 12, md: 8, lg: 10, xl: 11 }, props.value.subject),
+        React.createElement(Grid, { item: true, xs: 12, md: 8, lg: 10, xl: 11 }, value.subject),
         React.createElement(Grid, { item: true, xs: 12, md: 4, lg: 2, xl: 1 },
             React.createElement(Typography, null,
                 React.createElement("strong", null, "Text"))),
-        React.createElement(Grid, { item: true, xs: 12, md: 8, lg: 10, xl: 11 }, props.value.text &&
-            React.createElement(Typography, { style: { whiteSpace: 'pre-wrap' } }, props.value.text)),
+        React.createElement(Grid, { item: true, xs: 12, md: 8, lg: 10, xl: 11 }, value.text &&
+            React.createElement(Typography, { style: { whiteSpace: 'pre-wrap' } }, value.text)),
         React.createElement(Grid, { item: true, xs: 12, md: 4, lg: 2, xl: 1 },
             React.createElement(Typography, null,
                 React.createElement("strong", null, "HTML"))),
-        React.createElement(Grid, { item: true, xs: 12, md: 8, lg: 10, xl: 11 }, props.value.html &&
-            React.createElement("div", { dangerouslySetInnerHTML: { __html: props.value.html } }))));
+        React.createElement(Grid, { item: true, xs: 12, md: 8, lg: 10, xl: 11 }, value.html &&
+            React.createElement("div", { dangerouslySetInnerHTML: { __html: value.html } }))));
 }
 // Valid props
 Email.propTypes = {
-    mobile: PropTypes.bool.isRequired,
     value: PropTypes.shape({
         subject: PropTypes.string,
         text: PropTypes.string,

package/lib/components/pages/Templates/Template/Content/Preview/SMS.d.ts

@@ -9,7 +9,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 export type SMSProps = {
-    mobile: boolean;
     value: string;
 };
 /**
@@ -22,10 +21,9 @@ export type SMSProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-declare function SMS(props: SMSProps): React.JSX.Element;
+declare function SMS({ value }: SMSProps): React.JSX.Element;
 declare namespace SMS {
     var propTypes: {
-        mobile: PropTypes.Validator<boolean>;
         value: PropTypes.Validator<string>;
     };
 }

package/lib/components/pages/Templates/Template/Content/Preview/SMS.js

@@ -22,17 +22,16 @@ import Typography from '@mui/material/Typography';
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function SMS(props) {
+export default function SMS({ value }) {
     // Render
     return (React.createElement(Grid, { container: true, spacing: 2 },
         React.createElement(Grid, { item: true, xs: 12, md: 4, lg: 2, xl: 1 },
             React.createElement(Typography, null,
                 React.createElement("strong", null, "Content"))),
-        React.createElement(Grid, { item: true, xs: 12, md: 8, lg: 10, xl: 11 }, props.value &&
-            React.createElement(Typography, { style: { whiteSpace: 'pre-wrap' } }, props.value))));
+        React.createElement(Grid, { item: true, xs: 12, md: 8, lg: 10, xl: 11 }, value &&
+            React.createElement(Typography, { style: { whiteSpace: 'pre-wrap' } }, value))));
 }
 // Valid props
 SMS.propTypes = {
-    mobile: PropTypes.bool.isRequired,
     value: PropTypes.string.isRequired
 };

package/lib/components/pages/Templates/Template/Content/Preview/index.d.ts

@@ -11,7 +11,6 @@ import React from 'react';
 import { contentStruct } from '../..';
 import { responseErrorStruct } from '@ouroboros/body';
 export type PreviewProps = {
-    mobile: boolean;
     onClose: () => void;
     onError: (error: responseErrorStruct) => void;
     value: contentStruct;
@@ -26,10 +25,9 @@ export type PreviewProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-declare function Preview(props: PreviewProps): React.JSX.Element;
+declare function Preview({ onClose, onError, value }: PreviewProps): React.JSX.Element;
 declare namespace Preview {
     var propTypes: {
-        mobile: PropTypes.Validator<boolean>;
         onClose: PropTypes.Validator<(...args: any[]) => any>;
         onError: PropTypes.Validator<(...args: any[]) => any>;
         value: PropTypes.Requireable<PropTypes.InferProps<{

package/lib/components/pages/Templates/Template/Content/Preview/index.js

@@ -28,9 +28,7 @@ import SMS from './SMS';
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-export default function Preview(props) {
-    // Props
-    const { mobile, onClose, onError, value } = props;
+export default function Preview({ onClose, onError, value }) {
     // State
     const [preview, previewSet] = useState(false);
     // Value effect
@@ -47,12 +45,11 @@ export default function Preview(props) {
         React.createElement(DialogContent, { dividers: true, className: "content_preview" }, preview === false ?
             React.createElement(Typography, null, "Loading...")
             : (value.type === 'email' &&
-                React.createElement(Email, { key: value.template + '_' + value.locale + '_email', mobile: mobile, value: preview })) || (value.type === 'sms' &&
-                React.createElement(SMS, { key: value.template + '_' + value.locale + '_sms', mobile: mobile, value: preview })))));
+                React.createElement(Email, { key: value.template + '_' + value.locale + '_email', value: preview })) || (value.type === 'sms' &&
+                React.createElement(SMS, { key: value.template + '_' + value.locale + '_sms', value: preview })))));
 }
 // Valid props
 Preview.propTypes = {
-    mobile: PropTypes.bool.isRequired,
     onClose: PropTypes.func.isRequired,
     onError: PropTypes.func.isRequired,
     value: PropTypes.shape({

package/lib/components/pages/Templates/Template/Content/Update/Email.d.ts

@@ -24,7 +24,7 @@ export type EmailProps = {
  * @param Object props Properties passed to the component
  * @returns React.Component
  */
-declare function Email(props: EmailProps): React.JSX.Element;
+declare function Email({ errors, onChanged, value }: EmailProps): React.JSX.Element;
 declare namespace Email {
     var propTypes: {
         errors: PropTypes.Validator<object>;