@arquimedes.co/eureka-forms 1.7.8 → 1.8.0-test

package/dist/FormComponents/Step/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.js

@@ -24,6 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Incident.module.css';
 import StepComponent from '../../../../Step';
 import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import TextAreaStep from '../../../../TextAreaStep/TextAreaStep';
 function IncidentComponent(_a) {
     var step = _a.step, form = _a.form, level = _a.level, incident = _a.incident, formStyle = _a.formStyle, handleDelete = _a.handleDelete, others = __rest(_a, ["step", "form", "level", "incident", "formStyle", "handleDelete"]);
     var spaceStep = form.steps[incident.idSpaceStep];
@@ -43,6 +44,6 @@ function IncidentComponent(_a) {
                         if (others.editable && !others.postview) {
                             handleDelete();
                         }
-                    } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsx(StepComponent, __assign({}, others, { formStyle: formStyle, form: form, step: spaceStep, handleSizeChange: function () { }, level: level + 1 }), void 0), _jsx(StepComponent, __assign({}, others, { form: form, formStyle: formStyle, step: elementStep, handleSizeChange: function () { }, level: level + 1 }), void 0), _jsx(StepComponent, __assign({}, others, { form: form, formStyle: formStyle, step: commentStep, handleSizeChange: function () { }, level: level + 1 }), void 0)] }), void 0) }), void 0));
+                    } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }, void 0) }), void 0), _jsx(StepComponent, __assign({}, others, { formStyle: formStyle, form: form, step: spaceStep, handleSizeChange: function () { }, level: level + 1 }), void 0), _jsx(StepComponent, __assign({}, others, { form: form, formStyle: formStyle, step: elementStep, handleSizeChange: function () { }, level: level + 1 }), void 0), _jsx(TextAreaStep, __assign({}, others, { form: form, backgroundColor: 'transparent', formStyle: formStyle, step: commentStep, maxLength: 200, handleSizeChange: function () { }, level: level + 1 }), void 0)] }), void 0) }), void 0));
 }
 export default IncidentComponent;

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.d.ts

@@ -3,7 +3,7 @@ import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 import './DraftEditor.css';
 import { RawDraftContentState } from 'draft-js';
 import { TextAreaStepProps } from '../TextAreaStep';
-declare function TextAreaStep({ step, errors, control, editable, postview, formStyle, originalValues, }: TextAreaStepProps): JSX.Element;
+declare function TextAreaStep({ step, errors, control, editable, postview, formStyle, maxLength, originalValues, backgroundColor, }: TextAreaStepProps): JSX.Element;
 export default TextAreaStep;
 export declare function stringToDraft(text: string): RawDraftContentState;
 export declare const getRawText: (draft?: RawDraftContentState | undefined, text?: string | undefined) => RawDraftContentState;

package/dist/FormComponents/Step/TextAreaStep/MaterialTextAreaStep/MaterialTextAreaStep.js

@@ -20,24 +20,30 @@ import { convertFromRaw, EditorState } from 'draft-js';
 import { useState } from 'react';
 import { ClickAwayListener } from '@material-ui/core';
 function TextAreaStep(_a) {
-    var step = _a.step, errors = _a.errors, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, originalValues = _a.originalValues;
+    var step = _a.step, errors = _a.errors, control = _a.control, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, maxLength = _a.maxLength, originalValues = _a.originalValues, backgroundColor = _a.backgroundColor;
     var _b = useState(false), hovering = _b[0], setHovering = _b[1];
     var _c = useState(false), focus = _c[0], setFocus = _c[1];
     var calcStyle = function () {
+        var backgroundColor = formStyle.stepBackgroundColor;
         if (focus) {
             return {
                 border: '2px solid ' + formStyle.primaryColor,
                 marginTop: -1,
                 marginLeft: -1,
                 marginBottom: 0,
+                backgroundColor: backgroundColor,
             };
         }
         else if (hovering) {
-            return { border: '1px solid ' + formStyle.primaryColor };
+            return {
+                border: '1px solid ' + formStyle.primaryColor,
+                backgroundColor: backgroundColor,
+            };
         }
         else {
             return {
                 border: '1px solid ' + formStyle.outlineColor,
+                backgroundColor: backgroundColor,
             };
         }
     };
@@ -149,7 +155,7 @@ function TextAreaStep(_a) {
                 }, shouldUnregister: true, render: function (_a) {
                     var _b;
                     var field = _a.field;
-                    return (_jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, label: step.label, inputRef: field.ref, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: 4, maxRows: 6, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
+                    return (_jsx(RoundedTextField, __assign({}, field, { "data-testid": step.id, maxLength: maxLength, label: step.label, inputRef: field.ref, required: step.required, cantEdit: !canEdit, fontWeight: 400, multiline: true, minRows: 4, maxRows: 6, focusColor: formStyle.primaryColor, outlineColor: formStyle.outlineColor, textColor: formStyle.textColor, errorColor: formStyle.errorColor, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : formStyle.backgroundColor, innerBackgroundColor: formStyle.stepBackgroundColor, helperTextColor: formStyle.descriptionTextColor, helperText: errors[step.id]
                             ? errors[step.id].message
                             : (_b = step.description) !== null && _b !== void 0 ? _b : (step.required ? ' ' : null), error: !!errors[step.id] }), void 0));
                 } }, void 0) }), void 0));

package/dist/FormComponents/Step/TextAreaStep/TextAreaStep.d.ts

@@ -4,6 +4,8 @@ import { StepProps } from '../Step';
 export interface TextAreaStepProps extends StepProps {
     /** The TextAreaStep to display */
     step: TextArea;
+    maxLength?: number;
+    backgroundColor?: string;
 }
 declare function TextAreaStep(props: TextAreaStepProps): JSX.Element;
 export default TextAreaStep;

package/dist/shared/RoundedSelect/RoundedSelect.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { SelectProps } from '@material-ui/core/Select';
-interface ColorProps {
-    /** The color of the helper text when not error */
-    helperTextColor?: string;
+interface StyleProps {
     /** The color of the outline when selected and hovered on */
     focusColor?: string;
     /** The color of the outline when it is not selected */
     outlineColor?: string;
+    /** The color of the background  */
+    backgroundColor?: string;
     /** The color of the error to display */
     errorColor?: string;
     /** If the style should change on hover */
@@ -15,10 +15,20 @@ interface ColorProps {
     height?: string;
     /** The color of the text in the form */
     color?: string;
+    /** The fontsize of the content */
+    fontSize?: string;
+    /** The color of the inner input */
+    innerBackgroundColor?: string;
+    /** If input is readOnly */
+    readOnly?: boolean;
+    /** The color of the helper text when not error */
+    helperTextColor?: string;
+    /** The borderRadius of the input */
+    borderRadius?: number;
     /** If custom iconComponent exists */
     showIcon?: boolean;
 }
-interface RoundedSelectProps extends Omit<SelectProps, 'color'>, ColorProps {
+interface RoundedSelectProps extends Omit<SelectProps, 'color'>, StyleProps {
     /** children to display in the options */
     children?: any;
     /** Currently selected value */
@@ -42,6 +52,8 @@ interface RoundedSelectProps extends Omit<SelectProps, 'color'>, ColorProps {
     containerMargin?: string;
     /** The icon to display */
     iconComponent?: any;
+    /** The color of the inner input */
+    innerBackgroundColor?: string;
 }
 /**
  * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library

package/dist/shared/RoundedSelect/RoundedSelect.js

@@ -61,8 +61,14 @@ var useOutlinedInputStyles = function (props) {
         root: {
             cursor: props.cantEdit ? 'default' : 'default',
             height: props.height,
+            borderRadius: props.borderRadius,
+            backgroundColor: props.innerBackgroundColor,
+            fontSize: props.fontSize,
             '& $notchedOutline': {
                 borderColor: props.outlineColor,
+                '& legend': {
+                    fontSize: 'calc(' + props.fontSize + ' * 0.75)',
+                },
             },
             '&:hover $notchedOutline': {
                 borderColor: props.cantEdit
@@ -88,7 +94,6 @@ var useOutlinedInputStyles = function (props) {
             '& .EF-MuiSelect-iconOpen': {
                 transform: props.showIcon ? 'none' : 'rotate(180deg)',
             },
-            borderRadius: 10,
             color: props.color,
         },
         focused: {},
@@ -130,43 +135,33 @@ var useHelperTextStyles = function (props) {
     }); });
 };
 function CustomSelect(_a) {
-    var children = _a.children, value = _a.value, handleUpdate = _a.handleUpdate, label = _a.label, minWidth = _a.minWidth, helperText = _a.helperText, _b = _a.color, color = _b === void 0 ? '#293241' : _b, _c = _a.errorColor, errorColor = _c === void 0 ? '#cc2936' : _c, _d = _a.focusColor, focusColor = _d === void 0 ? '#3d5a7f' : _d, _e = _a.outlineColor, outlineColor = _e === void 0 ? '#0000003b' : _e, _f = _a.helperTextColor, helperTextColor = _f === void 0 ? '#989898' : _f, _g = _a.cantEdit, cantEdit = _g === void 0 ? false : _g, _h = _a.showIcon, showIcon = _h === void 0 ? true : _h, _j = _a.containerMargin, containerMargin = _j === void 0 ? '8px' : _j, _k = _a.height, height = _k === void 0 ? '40px' : _k, required = _a.required, iconComponent = _a.iconComponent, error = _a.error, others = __rest(_a, ["children", "value", "handleUpdate", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "outlineColor", "helperTextColor", "cantEdit", "showIcon", "containerMargin", "height", "required", "iconComponent", "error"]);
-    var classes = useStyles();
-    var outlinedInputClasses = useOutlinedInputStyles({
-        helperTextColor: helperTextColor,
-        outlineColor: outlineColor,
-        errorColor: errorColor,
-        focusColor: focusColor,
-        cantEdit: cantEdit,
-        height: height,
+    var children = _a.children, value = _a.value, handleUpdate = _a.handleUpdate, label = _a.label, minWidth = _a.minWidth, helperText = _a.helperText, _b = _a.color, color = _b === void 0 ? '#293241' : _b, _c = _a.errorColor, errorColor = _c === void 0 ? '#cc2936' : _c, _d = _a.focusColor, focusColor = _d === void 0 ? '#3d5a7f' : _d, _e = _a.fontSize, fontSize = _e === void 0 ? '1rem' : _e, _f = _a.outlineColor, outlineColor = _f === void 0 ? '#0000003b' : _f, _g = _a.helperTextColor, helperTextColor = _g === void 0 ? '#989898' : _g, _h = _a.backgroundColor, backgroundColor = _h === void 0 ? '#ffffff' : _h, _j = _a.readOnly, readOnly = _j === void 0 ? false : _j, _k = _a.borderRadius, borderRadius = _k === void 0 ? 10 : _k, innerBackgroundColor = _a.innerBackgroundColor, _l = _a.cantEdit, cantEdit = _l === void 0 ? false : _l, _m = _a.showIcon, showIcon = _m === void 0 ? true : _m, _o = _a.containerMargin, containerMargin = _o === void 0 ? '8px' : _o, _p = _a.height, height = _p === void 0 ? '40px' : _p, required = _a.required, iconComponent = _a.iconComponent, error = _a.error, others = __rest(_a, ["children", "value", "handleUpdate", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "fontSize", "outlineColor", "helperTextColor", "backgroundColor", "readOnly", "borderRadius", "innerBackgroundColor", "cantEdit", "showIcon", "containerMargin", "height", "required", "iconComponent", "error"]);
+    var props = {
         color: color,
-        showIcon: showIcon && iconComponent !== undefined,
-    })();
-    var labelClasses = useLabelInputStyles({
-        helperTextColor: helperTextColor,
-        outlineColor: outlineColor,
-        errorColor: errorColor,
-        focusColor: focusColor,
-        cantEdit: cantEdit,
         height: height,
-        color: color,
-    })();
-    var helperTextClasses = useHelperTextStyles({
-        helperTextColor: helperTextColor,
-        outlineColor: outlineColor,
         errorColor: errorColor,
         focusColor: focusColor,
+        outlineColor: outlineColor,
+        innerBackgroundColor: innerBackgroundColor !== null && innerBackgroundColor !== void 0 ? innerBackgroundColor : backgroundColor,
+        helperTextColor: helperTextColor,
+        backgroundColor: backgroundColor,
+        borderRadius: borderRadius,
+        readOnly: readOnly,
+        fontSize: fontSize,
         cantEdit: cantEdit,
-        height: height,
-        color: color,
-    })();
+        showIcon: showIcon && iconComponent !== undefined,
+    };
+    var classes = useStyles();
+    var outlinedInputClasses = useOutlinedInputStyles(props)();
+    var labelClasses = useLabelInputStyles(props)();
+    var helperTextClasses = useHelperTextStyles(props)();
     return (_jsxs(FormControl, __assign({ variant: "outlined", className: classes.formControl, size: "small", style: minWidth !== undefined
             ? { minWidth: minWidth, outlineColor: outlineColor, margin: containerMargin }
             : {
                 margin: containerMargin,
-            }, fullWidth: true, required: required, error: error }, { children: [_jsx(InputLabel, __assign({ classes: labelClasses }, { children: label }), void 0), _jsx(Select, __assign({}, others, { value: value, onChange: handleUpdate }, (showIcon && iconComponent
+            }, fullWidth: true, required: required, error: error }, { children: [label && _jsx(InputLabel, __assign({ classes: labelClasses }, { children: label }), void 0), _jsx(Select, __assign({}, others, { value: value, onChange: handleUpdate }, (showIcon && iconComponent
                 ? { IconComponent: iconComponent }
-                : {}), { input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label + (required ? ' *' : ''), classes: outlinedInputClasses }, void 0) }, { children: children }), void 0), helperText !== undefined && (_jsx(FormHelperText, __assign({ classes: helperTextClasses }, { children: helperText }), void 0))] }), void 0));
+                : {}), { input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label ? label + (required ? ' *' : '') : undefined, classes: outlinedInputClasses }, void 0) }, { children: children }), void 0), helperText !== undefined && (_jsx(FormHelperText, __assign({ classes: helperTextClasses }, { children: helperText }), void 0))] }), void 0));
 }
 /**
  * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library

package/dist/shared/RoundedSmartSelect/RoundedSmartSelect.js

@@ -173,6 +173,6 @@ export default function RoundedSmartSelect(_a) {
     else {
         return (_jsxs(RoundedSelect, __assign({ onBlur: onBlur, inputRef: inputRef, name: name, fullWidth: true, handleUpdate: handleUpdate, onOpen: function () {
                 //Show loading icon if loading
-            }, value: value, color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, outlineColor: outlineColor, cantEdit: cantEdit, label: label, required: required, readOnly: readOnly, helperText: helperText, containerMargin: containerMargin, height: height, error: error, iconComponent: iconComponent, showIcon: showIcon }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), options.map(function (option) { return (_jsx(MenuItem, __assign({ value: option.value, style: { whiteSpace: 'normal' } }, { children: option.label }), option.value)); })] }), void 0));
+            }, value: value, color: color, errorColor: errorColor, focusColor: focusColor, helperTextColor: helperTextColor, innerBackgroundColor: innerBackgroundColor, outlineColor: outlineColor, cantEdit: cantEdit, label: label, required: required, readOnly: readOnly, helperText: helperText, containerMargin: containerMargin, height: height, error: error, iconComponent: iconComponent, showIcon: showIcon }, { children: [_jsx(MenuItem, __assign({ value: '', style: { whiteSpace: 'normal' } }, { children: _jsx("em", { children: "Sin Seleccionar" }, void 0) }), 'EMPTY'), options.map(function (option) { return (_jsx(MenuItem, __assign({ value: option.value, style: { whiteSpace: 'normal' } }, { children: option.label }), option.value)); })] }), void 0));
     }
 }

package/dist/shared/RoundedTextField/RoundedTextField.d.ts

@@ -31,8 +31,12 @@ interface StyleProps {
     helperTextColor?: string;
     /** The icon to display */
     icon?: React.ReactNode;
+    /** The max length of the string */
+    maxLength?: number;
 }
 interface RoundedTextFieldProps extends StyleProps {
+    /** The value of the textfield */
+    value?: any;
 }
 /**
  * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library

package/dist/shared/RoundedTextField/RoundedTextField.js

@@ -35,7 +35,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
@@ -82,6 +82,9 @@ var useTextfieldStyles = function (props) {
                 },
                 '& .EF-MuiOutlinedInput-notchedOutline': {
                     borderColor: props.outlineColor,
+                    '& legend': {
+                        fontSize: 'calc(' + props.fontSize + ' * 0.75)',
+                    },
                 },
             },
             '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {
@@ -100,12 +103,17 @@ var useTextfieldStyles = function (props) {
             },
             '& .EF-MuiFormHelperText-root': {
                 color: props.helperTextColor,
+                marginRight: props.maxLength ? 40 : 14,
+            },
+            '& .EF-MuiOutlinedInput-multiline': {
+                padding: props.padding,
+                backgroundColor: props.innerBackgroundColor,
             },
         },
     }); });
 };
 function CustomTextfield(_a) {
-    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.helperTextColor, helperTextColor = _c === void 0 ? '#989898' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'white' : _e, innerBackgroundColor = _a.innerBackgroundColor, _f = _a.textColor, textColor = _f === void 0 ? '#293241' : _f, _g = _a.readOnly, readOnly = _g === void 0 ? false : _g, _h = _a.borderRadius, borderRadius = _h === void 0 ? 10 : _h, _j = _a.padding, padding = _j === void 0 ? '6px 12px' : _j, _k = _a.fontSize, fontSize = _k === void 0 ? '1rem' : _k, _l = _a.errorColor, errorColor = _l === void 0 ? '#cc2936' : _l, _m = _a.fontWeight, fontWeight = _m === void 0 ? '300' : _m, _o = _a.multiline, multiline = _o === void 0 ? false : _o, _p = _a.cantEdit, cantEdit = _p === void 0 ? false : _p, inputProps = _a.inputProps, value = _a.value, icon = _a.icon, others = __rest(_a, ["focusColor", "helperTextColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "readOnly", "borderRadius", "padding", "fontSize", "errorColor", "fontWeight", "multiline", "cantEdit", "inputProps", "value", "icon"]);
+    var _b = _a.focusColor, focusColor = _b === void 0 ? '#3d5a7f' : _b, _c = _a.helperTextColor, helperTextColor = _c === void 0 ? '#989898' : _c, _d = _a.outlineColor, outlineColor = _d === void 0 ? '#0000003b' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? 'transparent' : _e, _f = _a.innerBackgroundColor, innerBackgroundColor = _f === void 0 ? 'white' : _f, _g = _a.textColor, textColor = _g === void 0 ? '#293241' : _g, _h = _a.readOnly, readOnly = _h === void 0 ? false : _h, _j = _a.borderRadius, borderRadius = _j === void 0 ? 10 : _j, _k = _a.padding, padding = _k === void 0 ? '6px 12px' : _k, _l = _a.fontSize, fontSize = _l === void 0 ? '1rem' : _l, _m = _a.errorColor, errorColor = _m === void 0 ? '#cc2936' : _m, _o = _a.fontWeight, fontWeight = _o === void 0 ? '300' : _o, _p = _a.multiline, multiline = _p === void 0 ? false : _p, _q = _a.cantEdit, cantEdit = _q === void 0 ? false : _q, maxLength = _a.maxLength, value = _a.value, icon = _a.icon, others = __rest(_a, ["focusColor", "helperTextColor", "outlineColor", "backgroundColor", "innerBackgroundColor", "textColor", "readOnly", "borderRadius", "padding", "fontSize", "errorColor", "fontWeight", "multiline", "cantEdit", "maxLength", "value", "icon"]);
     var classes = useTextfieldStyles({
         padding: padding,
         textColor: textColor,
@@ -121,13 +129,33 @@ function CustomTextfield(_a) {
         fontWeight: fontWeight,
         multiline: multiline,
         cantEdit: cantEdit,
+        maxLength: maxLength,
     })();
-    return (_jsx(TextField, __assign({ classes: classes }, others, { value: value !== null && value !== void 0 ? value : '', multiline: multiline, variant: "outlined", size: "small", fullWidth: true, InputProps: {
-            readOnly: readOnly,
-            disabled: cantEdit,
-            inputProps: inputProps,
-            endAdornment: icon,
-        } }), void 0));
+    var length = maxLength ? value.length : null;
+    var inputProps = {
+        readOnly: readOnly,
+        disabled: cantEdit,
+        endAdornment: icon,
+    };
+    if (maxLength) {
+        inputProps.inputProps = { maxLength: maxLength };
+    }
+    return (_jsxs("div", __assign({ style: { position: 'relative', width: '100%', maxWidth: '100%' } }, { children: [_jsx(TextField, __assign({ classes: classes }, others, { value: value !== null && value !== void 0 ? value : '', multiline: multiline, variant: "outlined", size: "small", fullWidth: true, InputProps: inputProps }), void 0), length !== null && (_jsxs("div", __assign({ style: others.helperText
+                    ? {
+                        position: 'absolute',
+                        bottom: '3px',
+                        right: '8px',
+                        fontSize: '12px',
+                        color: helperTextColor,
+                    }
+                    : {
+                        fontSize: '12px',
+                        color: helperTextColor,
+                        textAlign: 'right',
+                        paddingRight: '8px',
+                        paddingTop: '2px',
+                        paddingBottom: '2px',
+                    } }, { children: [length, "/", maxLength] }), void 0))] }), void 0));
 }
 /**
  * Generic textfield with apps designs. Is class do to the use in the react-hook-forms library

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "1.7.8",
+    "version":"1.8.0-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",