@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/InlineError.stories.js

@@ -0,0 +1,666 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { transformStorySource } from "../utilities/transformers.js";
+import InlineError from "../components/InlineError.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import TextField from "../components/TextField.js";
+import Button from "../components/Button.js";
+import { HorizontalStack, VerticalStack, Box } from "../dist/esm/index.js";
+import { AlertMinor, InfoMinor } from "@shopify/polaris-icons";
+import { useState } from "react";
+export default {
+    title: 'Litho/InlineError',
+    component: InlineError,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "An InlineError component that displays error messages with an icon. It's typically used alongside form fields to show validation errors or other important messages."
+            }
+        }
+    },
+    args: {
+        message: 'This field is required',
+        fieldID: 'example-field'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        message: {
+            control: 'text',
+            description: 'The error message to display'
+        },
+        fieldID: {
+            control: 'text',
+            description: 'ID of the associated field for accessibility'
+        },
+        icon: {
+            control: false,
+            description: 'Icon to display with the error message'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsx(InlineError, _object_spread({}, args));
+    }
+};
+export var DifferentMessages = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsx(InlineError, {
+                    message: "This field is required",
+                    fieldID: "field1"
+                }),
+                /*#__PURE__*/ _jsx(InlineError, {
+                    message: "Password must be at least 8 characters",
+                    fieldID: "field2"
+                }),
+                /*#__PURE__*/ _jsx(InlineError, {
+                    message: "Email format is invalid",
+                    fieldID: "field3"
+                }),
+                /*#__PURE__*/ _jsx(InlineError, {
+                    message: "Username is already taken",
+                    fieldID: "field4"
+                }),
+                /*#__PURE__*/ _jsx(InlineError, {
+                    message: "File size must be less than 10MB",
+                    fieldID: "field5"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Different types of error messages.'
+            }
+        }
+    }
+};
+export var CustomIcons = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "4",
+            children: [
+                /*#__PURE__*/ _jsx(InlineError, {
+                    message: "This is a critical error",
+                    fieldID: "field1"
+                }),
+                /*#__PURE__*/ _jsx(InlineError, {
+                    message: "This is a warning message",
+                    fieldID: "field2",
+                    icon: AlertMinor
+                }),
+                /*#__PURE__*/ _jsx(InlineError, {
+                    message: "This is an informational message",
+                    fieldID: "field3",
+                    icon: InfoMinor
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Error messages with different icon types.'
+            }
+        }
+    }
+};
+export var WithFormField = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "2",
+            children: [
+                /*#__PURE__*/ _jsx(TextField, {
+                    label: "Email Address",
+                    placeholder: "Enter your email",
+                    error: true
+                }),
+                /*#__PURE__*/ _jsx(InlineError, {
+                    message: "Please enter a valid email address",
+                    fieldID: "email-field"
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Inline error displayed below a form field.'
+            }
+        }
+    }
+};
+export var FormValidation = {
+    render: function() {
+        var _useState = _sliced_to_array(useState({
+            name: '',
+            email: '',
+            password: '',
+            confirmPassword: ''
+        }), 2), formData = _useState[0], setFormData = _useState[1];
+        var _useState1 = _sliced_to_array(useState({}), 2), errors = _useState1[0], setErrors = _useState1[1];
+        var _useState2 = _sliced_to_array(useState({}), 2), touched = _useState2[0], setTouched = _useState2[1];
+        var validateField = function(field, value) {
+            switch(field){
+                case 'name':
+                    return value.length < 2 ? 'Name must be at least 2 characters' : '';
+                case 'email':
+                    return !/\S+@\S+\.\S+/.test(value) ? 'Please enter a valid email address' : '';
+                case 'password':
+                    return value.length < 8 ? 'Password must be at least 8 characters' : '';
+                case 'confirmPassword':
+                    return value !== formData.password ? 'Passwords do not match' : '';
+                default:
+                    return '';
+            }
+        };
+        var handleChange = function(field, value) {
+            setFormData(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, field, value));
+            });
+            if (touched[field]) {
+                var error = validateField(field, value);
+                setErrors(function(prev) {
+                    return _object_spread_props(_object_spread({}, prev), _define_property({}, field, error));
+                });
+            }
+        };
+        var handleBlur = function(field) {
+            setTouched(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, field, true));
+            });
+            var error = validateField(field, formData[field]);
+            setErrors(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, field, error));
+            });
+        };
+        var handleSubmit = function(e) {
+            e.preventDefault();
+            var newErrors = {};
+            Object.keys(formData).forEach(function(field) {
+                var error = validateField(field, formData[field]);
+                if (error) newErrors[field] = error;
+            });
+            setErrors(newErrors);
+            setTouched({
+                name: true,
+                email: true,
+                password: true,
+                confirmPassword: true
+            });
+            if (Object.keys(newErrors).length === 0) {
+                alert('Form submitted successfully!');
+            }
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Create Account",
+            padded: true,
+            children: /*#__PURE__*/ _jsx("form", {
+                onSubmit: handleSubmit,
+                children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "6",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: "Full Name",
+                                    value: formData.name,
+                                    onChange: function(value) {
+                                        return handleChange('name', value);
+                                    },
+                                    onBlur: function() {
+                                        return handleBlur('name');
+                                    },
+                                    error: !!errors.name,
+                                    placeholder: "Enter your full name"
+                                }),
+                                errors.name && /*#__PURE__*/ _jsx(Box, {
+                                    paddingBlockStart: "2",
+                                    children: /*#__PURE__*/ _jsx(InlineError, {
+                                        message: errors.name,
+                                        fieldID: "name-field"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: "Email Address",
+                                    type: "email",
+                                    value: formData.email,
+                                    onChange: function(value) {
+                                        return handleChange('email', value);
+                                    },
+                                    onBlur: function() {
+                                        return handleBlur('email');
+                                    },
+                                    error: !!errors.email,
+                                    placeholder: "Enter your email"
+                                }),
+                                errors.email && /*#__PURE__*/ _jsx(Box, {
+                                    paddingBlockStart: "2",
+                                    children: /*#__PURE__*/ _jsx(InlineError, {
+                                        message: errors.email,
+                                        fieldID: "email-field"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: "Password",
+                                    type: "password",
+                                    value: formData.password,
+                                    onChange: function(value) {
+                                        return handleChange('password', value);
+                                    },
+                                    onBlur: function() {
+                                        return handleBlur('password');
+                                    },
+                                    error: !!errors.password,
+                                    placeholder: "Create a password"
+                                }),
+                                errors.password && /*#__PURE__*/ _jsx(Box, {
+                                    paddingBlockStart: "2",
+                                    children: /*#__PURE__*/ _jsx(InlineError, {
+                                        message: errors.password,
+                                        fieldID: "password-field"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    label: "Confirm Password",
+                                    type: "password",
+                                    value: formData.confirmPassword,
+                                    onChange: function(value) {
+                                        return handleChange('confirmPassword', value);
+                                    },
+                                    onBlur: function() {
+                                        return handleBlur('confirmPassword');
+                                    },
+                                    error: !!errors.confirmPassword,
+                                    placeholder: "Confirm your password"
+                                }),
+                                errors.confirmPassword && /*#__PURE__*/ _jsx(Box, {
+                                    paddingBlockStart: "2",
+                                    children: /*#__PURE__*/ _jsx(InlineError, {
+                                        message: errors.confirmPassword,
+                                        fieldID: "confirm-password-field"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Button, {
+                            primary: true,
+                            submit: true,
+                            children: "Create Account"
+                        })
+                    ]
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Complete form validation example with inline errors.'
+            }
+        }
+    }
+};
+export var MultipleErrors = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "File Upload",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "6",
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Upload Files",
+                        placeholder: "Select files to upload",
+                        error: true
+                    }),
+                    /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ _jsx(InlineError, {
+                                message: "File size must be less than 10MB",
+                                fieldID: "file-upload"
+                            }),
+                            /*#__PURE__*/ _jsx(InlineError, {
+                                message: "Only JPG, PNG, and GIF files are allowed",
+                                fieldID: "file-upload"
+                            }),
+                            /*#__PURE__*/ _jsx(InlineError, {
+                                message: "Maximum 5 files can be uploaded at once",
+                                fieldID: "file-upload"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(HorizontalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                children: "Choose Files"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                primary: true,
+                                disabled: true,
+                                children: "Upload"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Multiple inline errors for a single field with complex validation.'
+            }
+        }
+    }
+};
+export var DifferentContexts = {
+    render: function() {
+        return /*#__PURE__*/ _jsxs(VerticalStack, {
+            gap: "8",
+            children: [
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Login Form",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Username",
+                                error: true,
+                                placeholder: "Enter username"
+                            }),
+                            /*#__PURE__*/ _jsx(InlineError, {
+                                message: "Username not found",
+                                fieldID: "username"
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Password",
+                                type: "password",
+                                error: true,
+                                placeholder: "Enter password"
+                            }),
+                            /*#__PURE__*/ _jsx(InlineError, {
+                                message: "Incorrect password",
+                                fieldID: "password"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Payment Information",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Card Number",
+                                error: true,
+                                placeholder: "1234 5678 9012 3456"
+                            }),
+                            /*#__PURE__*/ _jsx(InlineError, {
+                                message: "Invalid card number",
+                                fieldID: "card-number"
+                            }),
+                            /*#__PURE__*/ _jsxs(Grid, {
+                                columns: 2,
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TextField, {
+                                                label: "Expiry Date",
+                                                error: true,
+                                                placeholder: "MM/YY"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Box, {
+                                                paddingBlockStart: "2",
+                                                children: /*#__PURE__*/ _jsx(InlineError, {
+                                                    message: "Card has expired",
+                                                    fieldID: "expiry"
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TextField, {
+                                                label: "CVV",
+                                                error: true,
+                                                placeholder: "123"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Box, {
+                                                paddingBlockStart: "2",
+                                                children: /*#__PURE__*/ _jsx(InlineError, {
+                                                    message: "Invalid CVV",
+                                                    fieldID: "cvv"
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Settings",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "API Endpoint",
+                                error: true,
+                                placeholder: "https://api.example.com"
+                            }),
+                            /*#__PURE__*/ _jsx(InlineError, {
+                                message: "Unable to connect to this endpoint",
+                                fieldID: "api-endpoint"
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Timeout (seconds)",
+                                error: true,
+                                placeholder: "30"
+                            }),
+                            /*#__PURE__*/ _jsx(InlineError, {
+                                message: "Timeout must be between 1 and 300 seconds",
+                                fieldID: "timeout"
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Inline errors in different contexts - login, payment, and settings forms.'
+            }
+        }
+    }
+};
+export var AccessibilityExample = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Accessibility Features",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "6",
+                children: [
+                    /*#__PURE__*/ _jsx(Text, {
+                        variant: "headingSm",
+                        children: "Each inline error is properly associated with its field using aria-describedby"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Username",
+                                error: true,
+                                placeholder: "Enter username",
+                                "aria-describedby": "username-fieldError"
+                            }),
+                            /*#__PURE__*/ _jsx(Box, {
+                                paddingBlockStart: "2",
+                                children: /*#__PURE__*/ _jsx(InlineError, {
+                                    message: "Username must be at least 3 characters long",
+                                    fieldID: "username-field"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Email",
+                                type: "email",
+                                error: true,
+                                placeholder: "Enter email",
+                                "aria-describedby": "email-fieldError"
+                            }),
+                            /*#__PURE__*/ _jsx(Box, {
+                                paddingBlockStart: "2",
+                                children: /*#__PURE__*/ _jsx(InlineError, {
+                                    message: "Please enter a valid email address",
+                                    fieldID: "email-field"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        color: "subdued",
+                        variant: "bodySm",
+                        children: "Screen readers will announce the error messages when users focus on the corresponding fields."
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Demonstrates proper accessibility implementation with aria-describedby.'
+            }
+        }
+    }
+};