@balena/ui-shared-components 0.10.0 → 0.11.0

package/dist/components/Form/FieldTemplates/ObjectFieldTemplate.d.ts

@@ -0,0 +1,2 @@
+import { ObjectFieldTemplateProps, RJSFSchema } from '@rjsf/utils';
+export declare const ObjectFieldTemplate: <T = any, S extends import("json-schema").JSONSchema7 = RJSFSchema, F extends import("@rjsf/utils").GenericObjectType = any>(props: ObjectFieldTemplateProps<T, S, F>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/FieldTemplates/ObjectFieldTemplate.js

@@ -0,0 +1,26 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Grid from '@mui/material/Grid';
+import { canExpand, descriptionId, getTemplate, getUiOptions, titleId, } from '@rjsf/utils';
+export var ObjectFieldTemplate = function (props) {
+    var _a, _b;
+    var description = props.description, title = props.title, properties = props.properties, required = props.required, disabled = props.disabled, readonly = props.readonly, uiSchema = props.uiSchema, idSchema = props.idSchema, schema = props.schema, formData = props.formData, onAddClick = props.onAddClick, registry = props.registry;
+    var uiOptions = getUiOptions(uiSchema);
+    var TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, uiOptions);
+    var DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
+    var AddButton = registry.templates.ButtonTemplates.AddButton;
+    return (_jsxs(_Fragment, { children: [title && (_jsx(TitleFieldTemplate, { id: titleId(idSchema), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry })), description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(idSchema), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsxs(Grid, __assign({ container: true, spacing: 2, style: { marginTop: '10px' } }, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:grid']) === null || _a === void 0 ? void 0 : _a.container) !== null && _b !== void 0 ? _b : {}), { children: [properties.map(function (element, index) {
+                        var _a, _b;
+                        return element.hidden ? (element.content) : (_jsx(Grid, __assign({ item: true, xs: 12, style: { marginBottom: '10px' } }, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:grid']) === null || _a === void 0 ? void 0 : _a.item) !== null && _b !== void 0 ? _b : {}), { children: element.content }), index));
+                    }), canExpand(schema, uiSchema, formData) && (_jsx(Grid, __assign({ container: true, justifyContent: "flex-end" }, { children: _jsx(Grid, __assign({ item: true }, { children: _jsx(AddButton, { className: "object-property-expand", onClick: onAddClick(schema), disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }) })) })))] }))] }));
+};

package/dist/components/Form/Form.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("react").PropsWithChildren<import(".").RJSFormProps>>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Form/Form.stories.js

@@ -0,0 +1,95 @@
+import { RJSForm } from '.';
+var meta = {
+    title: 'Other/RJSForm',
+    component: RJSForm,
+    tags: ['autodocs'],
+};
+export default meta;
+export var Default = {
+    args: {
+        schema: {
+            title: 'A registration form',
+            description: 'A simple form example.',
+            type: 'object',
+            required: ['firstName', 'lastName'],
+            properties: {
+                firstName: {
+                    type: 'string',
+                    title: 'First name',
+                    default: 'Chuck',
+                },
+                lastName: {
+                    type: 'string',
+                    title: 'Last name',
+                },
+                age: {
+                    type: 'integer',
+                    title: 'Age',
+                },
+                bio: {
+                    type: 'string',
+                    title: 'Bio',
+                },
+                password: {
+                    type: 'string',
+                    title: 'Password',
+                    minLength: 3,
+                },
+                passwordStrength: {
+                    type: 'string',
+                    title: 'Password make it strong',
+                    minLength: 3,
+                },
+                telephone: {
+                    type: 'string',
+                    title: 'Telephone',
+                    minLength: 10,
+                },
+            },
+        },
+        uiSchema: {
+            firstName: {
+                'ui:autofocus': true,
+                'ui:emptyValue': '',
+                'ui:placeholder': 'ui:emptyValue causes this field to always be valid despite being required',
+                'ui:autocomplete': 'family-name',
+                'ui:enableMarkdownInDescription': true,
+                'ui:description': 'Make text **bold** or *italic*. Take a look at other options [here](https://probablyup.com/markdown-to-jsx/).',
+            },
+            lastName: {
+                'ui:autocomplete': 'given-name',
+                'ui:enableMarkdownInDescription': true,
+                'ui:description': 'Make things **bold** or *italic*. Embed snippets of `code`. <small>And this is a small texts.</small> ',
+            },
+            age: {
+                'ui:widget': 'updown',
+                'ui:title': 'Age of person',
+                'ui:description': '(earth year)',
+            },
+            bio: {
+                'ui:widget': 'textarea',
+            },
+            password: {
+                'ui:widget': 'password',
+            },
+            passwordStrength: {
+                'ui:widget': 'password',
+                'ui:help': 'Hint: Make it strong!',
+                'ui:options': {
+                    showPasswordStrengthMeter: true,
+                },
+            },
+            telephone: {
+                'ui:options': {
+                    inputType: 'tel',
+                },
+            },
+        },
+        submitButtonProps: {
+            sx: {
+                display: 'flex',
+                alignSelf: 'flex-end',
+            },
+        },
+    },
+};

package/dist/components/Form/Widgets/PasswordWidget.d.ts

@@ -0,0 +1,5 @@
+import { WidgetProps } from '@rjsf/utils';
+export interface PasswordStrengthProps {
+    password?: string;
+}
+export declare const PasswordWidget: ({ id, label, value, disabled, name, placeholder, onBlur, onChange, onFocus, options, required, }: WidgetProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/Widgets/PasswordWidget.js

@@ -0,0 +1,86 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControl, IconButton, InputAdornment, TextField, Typography, } from '@mui/material';
+import * as React from 'react';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import zxcvbn from 'zxcvbn';
+var STRENGTH_TITLES = ['Very weak', 'Weak', 'Good', 'Strong', 'Very strong'];
+var STRENGTH_STYLES = [
+    { width: 0 },
+    { width: '25%', backgroundColor: 'orange' },
+    { width: '50%', backgroundColor: 'yellow' },
+    { width: '75%', backgroundColor: 'green' },
+    { width: '100%', backgroundColor: 'darkgreen' },
+];
+var PasswordStrength = function (_a) {
+    var password = _a.password;
+    var _b = __read(React.useState(), 2), strengthScore = _b[0], setStrengthScore = _b[1];
+    React.useEffect(function () {
+        if (password) {
+            try {
+                var score = zxcvbn(password).score;
+                setStrengthScore(score);
+            }
+            catch (_a) {
+                // Ignore any errors, as we only want to show the strength meter if it is available.
+            }
+        }
+    }, [password]);
+    if (!password || strengthScore === undefined) {
+        return null;
+    }
+    return (_jsxs(Box, { children: [_jsxs(Typography, { children: ["Password strength: ", _jsx("em", { children: STRENGTH_TITLES[strengthScore] })] }), _jsx(Box, { sx: [
+                    STRENGTH_STYLES[strengthScore],
+                    { height: '4px', transition: 'all ease-out 150ms' },
+                ] })] }));
+};
+export var PasswordWidget = function (_a) {
+    var id = _a.id, label = _a.label, value = _a.value, disabled = _a.disabled, name = _a.name, placeholder = _a.placeholder, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, options = _a.options, required = _a.required;
+    var _b = __read(React.useState(false), 2), showPassword = _b[0], setShowPassword = _b[1];
+    var change = function (_a) {
+        var value = _a.target.value;
+        return onChange(value === '' ? options.emptyValue : value);
+    };
+    return (_jsxs(FormControl, { children: [_jsx(TextField, __assign({ label: label, required: required, id: id, type: showPassword ? 'text' : 'password' }, {
+                value: value,
+                disabled: disabled,
+                name: name,
+                placeholder: placeholder,
+            }, { onChange: change, onBlur: onBlur &&
+                    (function (event) {
+                        return onBlur(id, event.target.value);
+                    }), onFocus: onFocus &&
+                    (function (event) {
+                        return onFocus(id, event.target.value);
+                    }), InputProps: {
+                    endAdornment: (_jsx(InputAdornment, __assign({ position: "end" }, { children: _jsx(IconButton, __assign({ onClick: function () { return setShowPassword(function (show) { return !show; }); }, onMouseDown: function (event) {
+                                event.preventDefault();
+                            }, edge: "end" }, { children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) })) }))),
+                } })), options.showPasswordStrengthMeter && (_jsx(PasswordStrength, { password: value }))] }));
+};

package/dist/components/Form/Widgets/SelectWidget.d.ts

@@ -0,0 +1,2 @@
+import { WidgetProps } from '@rjsf/utils';
+export declare const SelectWidget: ({ id, label, value, disabled, name, placeholder, onChange, multiple, options, required, }: WidgetProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Form/Widgets/SelectWidget.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, Autocomplete, TextField, InputLabel, } from '@mui/material';
+export var SelectWidget = function (_a) {
+    var id = _a.id, label = _a.label, value = _a.value, disabled = _a.disabled, name = _a.name, placeholder = _a.placeholder, onChange = _a.onChange, multiple = _a.multiple, options = _a.options, required = _a.required;
+    var change = function (_a) {
+        var value = _a.target.value;
+        return onChange(value === '' ? options.emptyValue : value);
+    };
+    var enumOptions = options.enumOptions, enumDisabled = options.enumDisabled;
+    if (!Array.isArray(enumOptions)) {
+        return null;
+    }
+    var sanitizedEnumDisabled = Array.isArray(enumDisabled)
+        ? enumDisabled
+        : null;
+    var selectOptions = enumOptions.map(function (option) {
+        return __assign(__assign({}, option), { disabled: sanitizedEnumDisabled != null &&
+                sanitizedEnumDisabled.includes(option.value) });
+    });
+    return (_jsxs(FormControl, { children: [_jsx(InputLabel, __assign({ htmlFor: id, required: required }, { children: label })), _jsx(Autocomplete, __assign({ fullWidth: true, id: id, value: value !== undefined
+                    ? selectOptions.find(function (option) { return option.value === value; })
+                    : undefined }, {
+                name: name,
+                placeholder: placeholder,
+                multiple: multiple,
+            }, { disabled: disabled, options: selectOptions, isOptionEqualToValue: function (option, value) { return option.value === value.value; }, getOptionLabel: function (option) { return option.label; }, getOptionDisabled: function (option) { return option.disabled; }, renderInput: function (params) { return _jsx(TextField, __assign({}, params)); }, onChange: change, disableClearable: true }))] }));
+};

package/dist/components/Form/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FormProps as RjsFormProps } from '@rjsf/core';
+import { BoxProps, ButtonProps } from '@mui/material';
+export interface RJSFormProps extends Omit<RjsFormProps, 'validator' | 'onFocus' | 'onBlur'>, Pick<BoxProps, 'sx' | 'onFocus' | 'onBlur'>, Partial<Pick<RjsFormProps, 'validator'>> {
+    /** If true, do not display the form submit button */
+    hideSubmitButton?: boolean;
+    /** Properties that are passed to the submit button, these are the same props used for the [`Button`](#button) component */
+    submitButtonProps?: ButtonProps;
+    /** If passed, it will show a secondary button, these are the same props used for the [`Button`](#button) component */
+    actionButtons?: ButtonProps[];
+}
+export declare const RJSForm: React.FC<React.PropsWithChildren<RJSFormProps>>;

package/dist/components/Form/index.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Form from '@rjsf/mui';
+import ajvValidator from '@rjsf/validator-ajv8';
+import { Box, Button } from '@mui/material';
+import { PasswordWidget } from './Widgets/PasswordWidget';
+import { SelectWidget } from './Widgets/SelectWidget';
+import { Fragment } from 'react';
+import { ObjectFieldTemplate } from './FieldTemplates/ObjectFieldTemplate';
+var internalWidgets = {
+    PasswordWidget: PasswordWidget,
+    SelectWidget: SelectWidget,
+};
+export var RJSForm = function (_a) {
+    var hideSubmitButton = _a.hideSubmitButton, submitButtonProps = _a.submitButtonProps, actionButtons = _a.actionButtons, _b = _a.validator, validator = _b === void 0 ? ajvValidator : _b, widgets = _a.widgets, fields = _a.fields, children = _a.children, ref = _a.ref, sx = _a.sx, onFocus = _a.onFocus, onBlur = _a.onBlur, templates = _a.templates, otherProps = __rest(_a, ["hideSubmitButton", "submitButtonProps", "actionButtons", "validator", "widgets", "fields", "children", "ref", "sx", "onFocus", "onBlur", "templates"]);
+    return (_jsx(Box, __assign({ sx: sx, onFocus: onFocus, onBlur: onBlur }, { children: _jsxs(Form, __assign({ ref: ref, validator: validator, showErrorList: false, widgets: __assign(__assign({}, internalWidgets), (widgets || {})), templates: __assign({ ObjectFieldTemplate: ObjectFieldTemplate }, templates) }, otherProps, { children: [hideSubmitButton && _jsx(Fragment, {}), actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.map(function (buttonProps) { return (_jsx(Button, __assign({}, buttonProps))); }), !hideSubmitButton && (_jsx(Button, __assign({ children: 'Submit', 
+                    // TODO: remove once we migrate buttons
+                    disableRipple: true }, submitButtonProps, { color: "customBlue", variant: "contained", type: "submit" }))), children] })) })));
+};

package/dist/index.d.ts

@@ -5,6 +5,8 @@ export type { ButtonWithTrackingProps } from './components/ButtonWithTracking';
 export { ButtonWithTracking } from './components/ButtonWithTracking';
 export { Code } from './components/Code';
 export type { CookiesBannerProps, Cookie } from './components/CookiesBanner';
+export { RJSForm } from './components/Form';
+export type { RJSFormProps } from './components/Form';
 export { CookiesBanner } from './components/CookiesBanner';
 export type { CollapsedListProps } from './components/CollapsedList';
 export { CollapsedList } from './components/CollapsedList';

package/dist/index.js

@@ -2,6 +2,7 @@ export { theme } from './theme';
 export { AnimatedText } from './components/AnimatedText';
 export { ButtonWithTracking } from './components/ButtonWithTracking';
 export { Code } from './components/Code';
+export { RJSForm } from './components/Form';
 export { CookiesBanner } from './components/CookiesBanner';
 export { CollapsedList } from './components/CollapsedList';
 export { CustomHelmet } from './components/CustomHelmet';

package/dist/theme.js

@@ -66,7 +66,7 @@ export var theme = createTheme({
     palette: {
         secondary: {
             light: '#8F9297',
-            main: '#3C3E42',
+            main: '#fff',
             dark: '#0C0C0C',
             contrastText: '#F4F4F4',
         },
@@ -75,6 +75,7 @@ export var theme = createTheme({
             light: '#CAF0FF',
             main: '#00AEEF',
             dark: '#2A506F',
+            contrastText: '#FFFFFF',
         },
         customYellow: {
             xlight: '#F8DD88',
@@ -99,7 +100,7 @@ export var theme = createTheme({
         },
         text: {
             primary: '#2A506F',
-            secondary: '#3C3E42',
+            secondary: '#527699',
             tertiary: '#8F9297',
         },
     },
@@ -251,11 +252,19 @@ export var theme = createTheme({
         },
         MuiButton: {
             styleOverrides: {
-                root: {
-                    boxShadow: 'none',
-                    borderRadius: '24px',
-                    paddingLeft: '32px',
-                    paddingRight: '32px',
+                root: function (_a) {
+                    var theme = _a.theme;
+                    return ({
+                        boxShadow: 'none',
+                        borderRadius: '24px',
+                        paddingLeft: '20px',
+                        paddingRight: '20px',
+                        fontSize: theme.typography.body1.fontSize,
+                        // TODO: remove once we migrate buttons
+                        '&:hover': {
+                            boxShadow: 'none',
+                        },
+                    });
                 },
                 outlined: {
                     textTransform: 'none',
@@ -272,6 +281,14 @@ export var theme = createTheme({
                 },
             },
         },
+        // This is needed for RJSForm. If it gives any problem, we can remove this rule and override the behavior using the ArrayField field.
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    boxShadow: 'none',
+                },
+            },
+        },
         MuiTooltip: {
             styleOverrides: {
                 tooltip: {
@@ -282,5 +299,36 @@ export var theme = createTheme({
                 },
             },
         },
+        MuiFormControl: {
+            defaultProps: {
+                variant: 'outlined',
+            },
+        },
+        MuiOutlinedInput: {
+            defaultProps: {
+                notched: false,
+            },
+            styleOverrides: {
+                root: {
+                    legend: {
+                        // We should be able to remove this but there is a css override somewhere that
+                        // set the fieldset > legend max-width to 100%, and this invalidate the notched: false rule for some inputs.
+                        maxWidth: 0,
+                    },
+                },
+            },
+        },
+        MuiInputLabel: {
+            defaultProps: {
+                shrink: true,
+            },
+            styleOverrides: {
+                root: {
+                    fontSize: 12,
+                    transform: 'none',
+                    position: 'relative',
+                },
+            },
+        },
     },
 });

package/dist_esm5/components/Form/FieldTemplates/ObjectFieldTemplate.d.ts

@@ -0,0 +1,2 @@
+import { ObjectFieldTemplateProps, RJSFSchema } from '@rjsf/utils';
+export declare const ObjectFieldTemplate: <T = any, S extends import("json-schema").JSONSchema7 = RJSFSchema, F extends import("@rjsf/utils").GenericObjectType = any>(props: ObjectFieldTemplateProps<T, S, F>) => import("react/jsx-runtime").JSX.Element;

package/dist_esm5/components/Form/FieldTemplates/ObjectFieldTemplate.js

@@ -0,0 +1,16 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Grid from '@mui/material/Grid';
+import { canExpand, descriptionId, getTemplate, getUiOptions, titleId, } from '@rjsf/utils';
+export var ObjectFieldTemplate = function (props) {
+    var _a, _b;
+    var description = props.description, title = props.title, properties = props.properties, required = props.required, disabled = props.disabled, readonly = props.readonly, uiSchema = props.uiSchema, idSchema = props.idSchema, schema = props.schema, formData = props.formData, onAddClick = props.onAddClick, registry = props.registry;
+    var uiOptions = getUiOptions(uiSchema);
+    var TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, uiOptions);
+    var DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
+    var AddButton = registry.templates.ButtonTemplates.AddButton;
+    return (_jsxs(_Fragment, { children: [title && (_jsx(TitleFieldTemplate, { id: titleId(idSchema), title: title, required: required, schema: schema, uiSchema: uiSchema, registry: registry })), description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(idSchema), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsxs(Grid, __assign({ container: true, spacing: 2, style: { marginTop: '10px' } }, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:grid']) === null || _a === void 0 ? void 0 : _a.container) !== null && _b !== void 0 ? _b : {}), { children: [properties.map(function (element, index) {
+                        var _a, _b;
+                        return element.hidden ? (element.content) : (_jsx(Grid, __assign({ item: true, xs: 12, style: { marginBottom: '10px' } }, ((_b = (_a = uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:grid']) === null || _a === void 0 ? void 0 : _a.item) !== null && _b !== void 0 ? _b : {}), { children: element.content }), index));
+                    }), canExpand(schema, uiSchema, formData) && (_jsx(Grid, __assign({ container: true, justifyContent: "flex-end" }, { children: _jsx(Grid, __assign({ item: true }, { children: _jsx(AddButton, { className: "object-property-expand", onClick: onAddClick(schema), disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }) })) })))] }))] }));
+};

package/dist_esm5/components/Form/Form.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("react").PropsWithChildren<import(".").RJSFormProps>>;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist_esm5/components/Form/Form.stories.js

@@ -0,0 +1,95 @@
+import { RJSForm } from '.';
+var meta = {
+    title: 'Other/RJSForm',
+    component: RJSForm,
+    tags: ['autodocs'],
+};
+export default meta;
+export var Default = {
+    args: {
+        schema: {
+            title: 'A registration form',
+            description: 'A simple form example.',
+            type: 'object',
+            required: ['firstName', 'lastName'],
+            properties: {
+                firstName: {
+                    type: 'string',
+                    title: 'First name',
+                    default: 'Chuck',
+                },
+                lastName: {
+                    type: 'string',
+                    title: 'Last name',
+                },
+                age: {
+                    type: 'integer',
+                    title: 'Age',
+                },
+                bio: {
+                    type: 'string',
+                    title: 'Bio',
+                },
+                password: {
+                    type: 'string',
+                    title: 'Password',
+                    minLength: 3,
+                },
+                passwordStrength: {
+                    type: 'string',
+                    title: 'Password make it strong',
+                    minLength: 3,
+                },
+                telephone: {
+                    type: 'string',
+                    title: 'Telephone',
+                    minLength: 10,
+                },
+            },
+        },
+        uiSchema: {
+            firstName: {
+                'ui:autofocus': true,
+                'ui:emptyValue': '',
+                'ui:placeholder': 'ui:emptyValue causes this field to always be valid despite being required',
+                'ui:autocomplete': 'family-name',
+                'ui:enableMarkdownInDescription': true,
+                'ui:description': 'Make text **bold** or *italic*. Take a look at other options [here](https://probablyup.com/markdown-to-jsx/).',
+            },
+            lastName: {
+                'ui:autocomplete': 'given-name',
+                'ui:enableMarkdownInDescription': true,
+                'ui:description': 'Make things **bold** or *italic*. Embed snippets of `code`. <small>And this is a small texts.</small> ',
+            },
+            age: {
+                'ui:widget': 'updown',
+                'ui:title': 'Age of person',
+                'ui:description': '(earth year)',
+            },
+            bio: {
+                'ui:widget': 'textarea',
+            },
+            password: {
+                'ui:widget': 'password',
+            },
+            passwordStrength: {
+                'ui:widget': 'password',
+                'ui:help': 'Hint: Make it strong!',
+                'ui:options': {
+                    showPasswordStrengthMeter: true,
+                },
+            },
+            telephone: {
+                'ui:options': {
+                    inputType: 'tel',
+                },
+            },
+        },
+        submitButtonProps: {
+            sx: {
+                display: 'flex',
+                alignSelf: 'flex-end',
+            },
+        },
+    },
+};

package/dist_esm5/components/Form/Widgets/PasswordWidget.d.ts

@@ -0,0 +1,5 @@
+import { WidgetProps } from '@rjsf/utils';
+export interface PasswordStrengthProps {
+    password?: string;
+}
+export declare const PasswordWidget: ({ id, label, value, disabled, name, placeholder, onBlur, onChange, onFocus, options, required, }: WidgetProps) => import("react/jsx-runtime").JSX.Element;

package/dist_esm5/components/Form/Widgets/PasswordWidget.js

@@ -0,0 +1,60 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, FormControl, IconButton, InputAdornment, TextField, Typography, } from '@mui/material';
+import * as React from 'react';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import zxcvbn from 'zxcvbn';
+var STRENGTH_TITLES = ['Very weak', 'Weak', 'Good', 'Strong', 'Very strong'];
+var STRENGTH_STYLES = [
+    { width: 0 },
+    { width: '25%', backgroundColor: 'orange' },
+    { width: '50%', backgroundColor: 'yellow' },
+    { width: '75%', backgroundColor: 'green' },
+    { width: '100%', backgroundColor: 'darkgreen' },
+];
+var PasswordStrength = function (_a) {
+    var password = _a.password;
+    var _b = __read(React.useState(), 2), strengthScore = _b[0], setStrengthScore = _b[1];
+    React.useEffect(function () {
+        if (password) {
+            try {
+                var score = zxcvbn(password).score;
+                setStrengthScore(score);
+            }
+            catch (_a) {
+                // Ignore any errors, as we only want to show the strength meter if it is available.
+            }
+        }
+    }, [password]);
+    if (!password || strengthScore === undefined) {
+        return null;
+    }
+    return (_jsxs(Box, { children: [_jsxs(Typography, { children: ["Password strength: ", _jsx("em", { children: STRENGTH_TITLES[strengthScore] })] }), _jsx(Box, { sx: [
+                    STRENGTH_STYLES[strengthScore],
+                    { height: '4px', transition: 'all ease-out 150ms' },
+                ] })] }));
+};
+export var PasswordWidget = function (_a) {
+    var id = _a.id, label = _a.label, value = _a.value, disabled = _a.disabled, name = _a.name, placeholder = _a.placeholder, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, options = _a.options, required = _a.required;
+    var _b = __read(React.useState(false), 2), showPassword = _b[0], setShowPassword = _b[1];
+    var change = function (_a) {
+        var value = _a.target.value;
+        return onChange(value === '' ? options.emptyValue : value);
+    };
+    return (_jsxs(FormControl, { children: [_jsx(TextField, __assign({ label: label, required: required, id: id, type: showPassword ? 'text' : 'password' }, {
+                value: value,
+                disabled: disabled,
+                name: name,
+                placeholder: placeholder,
+            }, { onChange: change, onBlur: onBlur &&
+                    (function (event) {
+                        return onBlur(id, event.target.value);
+                    }), onFocus: onFocus &&
+                    (function (event) {
+                        return onFocus(id, event.target.value);
+                    }), InputProps: {
+                    endAdornment: (_jsx(InputAdornment, __assign({ position: "end" }, { children: _jsx(IconButton, __assign({ onClick: function () { return setShowPassword(function (show) { return !show; }); }, onMouseDown: function (event) {
+                                event.preventDefault();
+                            }, edge: "end" }, { children: showPassword ? _jsx(VisibilityOff, {}) : _jsx(Visibility, {}) })) }))),
+                } })), options.showPasswordStrengthMeter && (_jsx(PasswordStrength, { password: value }))] }));
+};

package/dist_esm5/components/Form/Widgets/SelectWidget.d.ts

@@ -0,0 +1,2 @@
+import { WidgetProps } from '@rjsf/utils';
+export declare const SelectWidget: ({ id, label, value, disabled, name, placeholder, onChange, multiple, options, required, }: WidgetProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist_esm5/components/Form/Widgets/SelectWidget.js

@@ -0,0 +1,28 @@
+import { __assign } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, Autocomplete, TextField, InputLabel, } from '@mui/material';
+export var SelectWidget = function (_a) {
+    var id = _a.id, label = _a.label, value = _a.value, disabled = _a.disabled, name = _a.name, placeholder = _a.placeholder, onChange = _a.onChange, multiple = _a.multiple, options = _a.options, required = _a.required;
+    var change = function (_a) {
+        var value = _a.target.value;
+        return onChange(value === '' ? options.emptyValue : value);
+    };
+    var enumOptions = options.enumOptions, enumDisabled = options.enumDisabled;
+    if (!Array.isArray(enumOptions)) {
+        return null;
+    }
+    var sanitizedEnumDisabled = Array.isArray(enumDisabled)
+        ? enumDisabled
+        : null;
+    var selectOptions = enumOptions.map(function (option) {
+        return __assign(__assign({}, option), { disabled: sanitizedEnumDisabled != null &&
+                sanitizedEnumDisabled.includes(option.value) });
+    });
+    return (_jsxs(FormControl, { children: [_jsx(InputLabel, __assign({ htmlFor: id, required: required }, { children: label })), _jsx(Autocomplete, __assign({ fullWidth: true, id: id, value: value !== undefined
+                    ? selectOptions.find(function (option) { return option.value === value; })
+                    : undefined }, {
+                name: name,
+                placeholder: placeholder,
+                multiple: multiple,
+            }, { disabled: disabled, options: selectOptions, isOptionEqualToValue: function (option, value) { return option.value === value.value; }, getOptionLabel: function (option) { return option.label; }, getOptionDisabled: function (option) { return option.disabled; }, renderInput: function (params) { return _jsx(TextField, __assign({}, params)); }, onChange: change, disableClearable: true }))] }));
+};

package/dist_esm5/components/Form/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FormProps as RjsFormProps } from '@rjsf/core';
+import { BoxProps, ButtonProps } from '@mui/material';
+export interface RJSFormProps extends Omit<RjsFormProps, 'validator' | 'onFocus' | 'onBlur'>, Pick<BoxProps, 'sx' | 'onFocus' | 'onBlur'>, Partial<Pick<RjsFormProps, 'validator'>> {
+    /** If true, do not display the form submit button */
+    hideSubmitButton?: boolean;
+    /** Properties that are passed to the submit button, these are the same props used for the [`Button`](#button) component */
+    submitButtonProps?: ButtonProps;
+    /** If passed, it will show a secondary button, these are the same props used for the [`Button`](#button) component */
+    actionButtons?: ButtonProps[];
+}
+export declare const RJSForm: React.FC<React.PropsWithChildren<RJSFormProps>>;

package/dist_esm5/components/Form/index.js

@@ -0,0 +1,19 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Form from '@rjsf/mui';
+import ajvValidator from '@rjsf/validator-ajv8';
+import { Box, Button } from '@mui/material';
+import { PasswordWidget } from './Widgets/PasswordWidget';
+import { SelectWidget } from './Widgets/SelectWidget';
+import { Fragment } from 'react';
+import { ObjectFieldTemplate } from './FieldTemplates/ObjectFieldTemplate';
+var internalWidgets = {
+    PasswordWidget: PasswordWidget,
+    SelectWidget: SelectWidget,
+};
+export var RJSForm = function (_a) {
+    var hideSubmitButton = _a.hideSubmitButton, submitButtonProps = _a.submitButtonProps, actionButtons = _a.actionButtons, _b = _a.validator, validator = _b === void 0 ? ajvValidator : _b, widgets = _a.widgets, fields = _a.fields, children = _a.children, ref = _a.ref, sx = _a.sx, onFocus = _a.onFocus, onBlur = _a.onBlur, templates = _a.templates, otherProps = __rest(_a, ["hideSubmitButton", "submitButtonProps", "actionButtons", "validator", "widgets", "fields", "children", "ref", "sx", "onFocus", "onBlur", "templates"]);
+    return (_jsx(Box, __assign({ sx: sx, onFocus: onFocus, onBlur: onBlur }, { children: _jsxs(Form, __assign({ ref: ref, validator: validator, showErrorList: false, widgets: __assign(__assign({}, internalWidgets), (widgets || {})), templates: __assign({ ObjectFieldTemplate: ObjectFieldTemplate }, templates) }, otherProps, { children: [hideSubmitButton && _jsx(Fragment, {}), actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.map(function (buttonProps) { return (_jsx(Button, __assign({}, buttonProps))); }), !hideSubmitButton && (_jsx(Button, __assign({ children: 'Submit', 
+                    // TODO: remove once we migrate buttons
+                    disableRipple: true }, submitButtonProps, { color: "customBlue", variant: "contained", type: "submit" }))), children] })) })));
+};

package/dist_esm5/index.d.ts

@@ -5,6 +5,8 @@ export type { ButtonWithTrackingProps } from './components/ButtonWithTracking';
 export { ButtonWithTracking } from './components/ButtonWithTracking';
 export { Code } from './components/Code';
 export type { CookiesBannerProps, Cookie } from './components/CookiesBanner';
+export { RJSForm } from './components/Form';
+export type { RJSFormProps } from './components/Form';
 export { CookiesBanner } from './components/CookiesBanner';
 export type { CollapsedListProps } from './components/CollapsedList';
 export { CollapsedList } from './components/CollapsedList';

package/dist_esm5/index.js

@@ -2,6 +2,7 @@ export { theme } from './theme';
 export { AnimatedText } from './components/AnimatedText';
 export { ButtonWithTracking } from './components/ButtonWithTracking';
 export { Code } from './components/Code';
+export { RJSForm } from './components/Form';
 export { CookiesBanner } from './components/CookiesBanner';
 export { CollapsedList } from './components/CollapsedList';
 export { CustomHelmet } from './components/CustomHelmet';

package/dist_esm5/theme.js

@@ -66,7 +66,7 @@ export var theme = createTheme({
     palette: {
         secondary: {
             light: '#8F9297',
-            main: '#3C3E42',
+            main: '#fff',
             dark: '#0C0C0C',
             contrastText: '#F4F4F4',
         },
@@ -75,6 +75,7 @@ export var theme = createTheme({
             light: '#CAF0FF',
             main: '#00AEEF',
             dark: '#2A506F',
+            contrastText: '#FFFFFF',
         },
         customYellow: {
             xlight: '#F8DD88',
@@ -99,7 +100,7 @@ export var theme = createTheme({
         },
         text: {
             primary: '#2A506F',
-            secondary: '#3C3E42',
+            secondary: '#527699',
             tertiary: '#8F9297',
         },
     },
@@ -251,11 +252,19 @@ export var theme = createTheme({
         },
         MuiButton: {
             styleOverrides: {
-                root: {
-                    boxShadow: 'none',
-                    borderRadius: '24px',
-                    paddingLeft: '32px',
-                    paddingRight: '32px',
+                root: function (_a) {
+                    var theme = _a.theme;
+                    return ({
+                        boxShadow: 'none',
+                        borderRadius: '24px',
+                        paddingLeft: '20px',
+                        paddingRight: '20px',
+                        fontSize: theme.typography.body1.fontSize,
+                        // TODO: remove once we migrate buttons
+                        '&:hover': {
+                            boxShadow: 'none',
+                        },
+                    });
                 },
                 outlined: {
                     textTransform: 'none',
@@ -272,6 +281,14 @@ export var theme = createTheme({
                 },
             },
         },
+        // This is needed for RJSForm. If it gives any problem, we can remove this rule and override the behavior using the ArrayField field.
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    boxShadow: 'none',
+                },
+            },
+        },
         MuiTooltip: {
             styleOverrides: {
                 tooltip: {
@@ -282,5 +299,36 @@ export var theme = createTheme({
                 },
             },
         },
+        MuiFormControl: {
+            defaultProps: {
+                variant: 'outlined',
+            },
+        },
+        MuiOutlinedInput: {
+            defaultProps: {
+                notched: false,
+            },
+            styleOverrides: {
+                root: {
+                    legend: {
+                        // We should be able to remove this but there is a css override somewhere that
+                        // set the fieldset > legend max-width to 100%, and this invalidate the notched: false rule for some inputs.
+                        maxWidth: 0,
+                    },
+                },
+            },
+        },
+        MuiInputLabel: {
+            defaultProps: {
+                shrink: true,
+            },
+            styleOverrides: {
+                root: {
+                    fontSize: 12,
+                    transform: 'none',
+                    position: 'relative',
+                },
+            },
+        },
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balena/ui-shared-components",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "main": "./dist/index.js",
   "module": "./dist_esm5/index.js",
   "sideEffects": false,
@@ -17,6 +17,10 @@
     "@mui/material": "^5.12.0",
     "@mui/styled-engine-sc": "^5.12.0",
     "@react-google-maps/api": "^2.18.1",
+    "@rjsf/core": "^5.13.0",
+    "@rjsf/mui": "^5.13.0",
+    "@rjsf/utils": "^5.13.0",
+    "@rjsf/validator-ajv8": "^5.13.4",
     "@types/node": "^18.15.11",
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
@@ -34,7 +38,8 @@
     "remark-gfm": "^3.0.1",
     "rimraf": "^5.0.0",
     "typescript": "^4.9.5",
-    "virtua": "^0.13.0"
+    "virtua": "^0.13.0",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@balena/lint": "^6.2.2",
@@ -47,6 +52,7 @@
     "@storybook/react": "^7.3.2",
     "@storybook/react-webpack5": "^7.3.2",
     "@storybook/testing-library": "^0.2.0",
+    "@types/zxcvbn": "^4.4.2",
     "babel-plugin-named-exports-order": "^0.0.2",
     "eslint-plugin-storybook": "^0.6.13",
     "husky": "^8.0.3",
@@ -102,6 +108,6 @@
   },
   "homepage": "https://github.com/balena-io/ui-shared-components#readme",
   "versionist": {
-    "publishedAt": "2023-11-07T15:57:15.858Z"
+    "publishedAt": "2023-11-08T18:09:30.687Z"
   }
 }