@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/ContextualSaveBar.stories.js

@@ -0,0 +1,938 @@
+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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+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);
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import ContextualSaveBar from "../components/ContextualSaveBar.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import TextField from "../components/TextField.js";
+import Page from "../components/Page.js";
+import Frame from "../components/Frame.js";
+import AppProvider from "../components/AppProvider.js";
+import VerticalStack from "../components/VerticalStack.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+import Box from "../components/Box.js";
+import { transformStorySource } from "../utilities/transformers.js";
+export default {
+    title: "Litho/ContextualSaveBar",
+    component: ContextualSaveBar,
+    parameters: {
+        layout: "fullscreen",
+        docs: {
+            description: {
+                component: "A ContextualSaveBar component that manages a global save bar state. It doesn't render anything itself but controls the visibility and configuration of a contextual save bar through the FormContext. This component is typically used in forms to provide save/discard actions when there are unsaved changes."
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    decorators: [
+        function(Story) {
+            return /*#__PURE__*/ _jsx(AppProvider, {
+                darkModeAvailable: true,
+                darkModeStorageKey: "storybook-dark-mode",
+                children: /*#__PURE__*/ _jsx(Frame, {
+                    children: /*#__PURE__*/ _jsx(Box, {
+                        padding: "4",
+                        children: /*#__PURE__*/ _jsx(Story, {})
+                    })
+                })
+            });
+        }
+    ],
+    argTypes: {
+        saveAction: {
+            control: "object",
+            description: "Action configuration for the save button"
+        },
+        discardAction: {
+            control: "object",
+            description: "Action configuration for the discard button"
+        },
+        message: {
+            control: "text",
+            description: "Message to display in the contextual save bar"
+        }
+    }
+};
+export var Default = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(false), 2), showSaveBar = _useState[0], setShowSaveBar = _useState[1];
+        var _useState1 = _sliced_to_array(useState({
+            title: "Product Title",
+            description: "Product description"
+        }), 2), formData = _useState1[0], setFormData = _useState1[1];
+        var _useState2 = _sliced_to_array(useState({
+            title: "Product Title",
+            description: "Product description"
+        }), 2), originalData = _useState2[0], setOriginalData = _useState2[1];
+        var _useState3 = _sliced_to_array(useState(false), 2), saving = _useState3[0], setSaving = _useState3[1];
+        var hasChanges = JSON.stringify(formData) !== JSON.stringify(originalData);
+        var handleSave = function() {
+            return _async_to_generator(function() {
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setSaving(true);
+                            // Simulate API call
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 1500);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            setOriginalData(_object_spread({}, formData));
+                            setSaving(false);
+                            setShowSaveBar(false);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        var handleDiscard = function() {
+            setFormData(_object_spread({}, originalData));
+            setShowSaveBar(false);
+        };
+        var handleFieldChange = function(field, value) {
+            setFormData(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, field, value));
+            });
+            if (!showSaveBar && !hasChanges) {
+                setShowSaveBar(true);
+            }
+        };
+        return /*#__PURE__*/ _jsxs(Page, {
+            title: "Product Management",
+            children: [
+                showSaveBar && hasChanges && /*#__PURE__*/ _jsx(ContextualSaveBar, {
+                    message: "You have unsaved changes",
+                    saveAction: {
+                        accessibilityLabel: "Save changes",
+                        content: "Save changes",
+                        onAction: handleSave,
+                        loading: saving,
+                        disabled: saving
+                    },
+                    discardAction: {
+                        onAction: handleDiscard,
+                        disabled: saving
+                    }
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Product Information",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "6",
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Product Title",
+                                value: formData.title,
+                                onChange: function(value) {
+                                    return handleFieldChange("title", value);
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Description",
+                                value: formData.description,
+                                onChange: function(value) {
+                                    return handleFieldChange("description", value);
+                                },
+                                multiline: 3
+                            }),
+                            /*#__PURE__*/ _jsxs(Box, {
+                                padding: "4",
+                                background: "subdued",
+                                borderRadius: "default",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingSm",
+                                        children: "Instructions"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        paddingBlockStart: "2",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            variant: "bodySm",
+                                            children: "Make changes to the fields above to see the contextual save bar appear. The save bar will show when there are unsaved changes and hide when changes are saved or discarded."
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            },
+            description: {
+                story: "Basic contextual save bar that appears when form data changes."
+            }
+        }
+    }
+};
+export var CustomMessages = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(null), 2), activeForm = _useState[0], setActiveForm = _useState[1];
+        var _useState1 = _sliced_to_array(useState({
+            name: "John Doe",
+            email: "john@example.com"
+        }), 2), profileData = _useState1[0], setProfileData = _useState1[1];
+        var _useState2 = _sliced_to_array(useState({
+            notifications: true,
+            theme: "light"
+        }), 2), settingsData = _useState2[0], setSettingsData = _useState2[1];
+        var scenarios = [
+            {
+                key: "profile",
+                title: "Profile Form",
+                message: "Your profile changes haven't been saved",
+                data: profileData,
+                setData: setProfileData,
+                fields: [
+                    {
+                        key: "name",
+                        label: "Full Name",
+                        type: "text"
+                    },
+                    {
+                        key: "email",
+                        label: "Email Address",
+                        type: "email"
+                    }
+                ]
+            },
+            {
+                key: "settings",
+                title: "Settings Form",
+                message: "Settings modifications are pending",
+                data: settingsData,
+                setData: setSettingsData,
+                fields: [
+                    {
+                        key: "notifications",
+                        label: "Enable Notifications",
+                        type: "checkbox"
+                    },
+                    {
+                        key: "theme",
+                        label: "Theme",
+                        type: "select",
+                        options: [
+                            "light",
+                            "dark"
+                        ]
+                    }
+                ]
+            }
+        ];
+        var handleSave = function(formKey) {
+            return _async_to_generator(function() {
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 1000);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            setActiveForm(null);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        var handleDiscard = function(formKey) {
+            setActiveForm(null);
+        // Reset to original values in real implementation
+        };
+        var activateForm = function(formKey) {
+            setActiveForm(formKey);
+        };
+        var activeScenario = scenarios.find(function(s) {
+            return s.key === activeForm;
+        });
+        return /*#__PURE__*/ _jsxs(Page, {
+            title: "Multiple Forms Demo",
+            children: [
+                activeScenario && /*#__PURE__*/ _jsx(ContextualSaveBar, {
+                    message: activeScenario.message,
+                    saveAction: {
+                        onAction: function() {
+                            return handleSave(activeForm);
+                        },
+                        accessibilityLabel: "Save changes",
+                        content: "Save changes"
+                    },
+                    discardAction: {
+                        onAction: function() {
+                            return handleDiscard(activeForm);
+                        },
+                        accessibilityLabel: "Discard changes",
+                        content: "Discard changes"
+                    }
+                }),
+                /*#__PURE__*/ _jsx(VerticalStack, {
+                    gap: "8",
+                    children: scenarios.map(function(scenario) {
+                        return /*#__PURE__*/ _jsxs(Card, {
+                            title: scenario.title,
+                            padded: true,
+                            children: [
+                                /*#__PURE__*/ _jsx(VerticalStack, {
+                                    gap: "4",
+                                    children: scenario.fields.map(function(field) {
+                                        return /*#__PURE__*/ _jsx(Box, {
+                                            children: field.type === "checkbox" ? /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                                gap: "2",
+                                                blockAlign: "center",
+                                                as: "label",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("input", {
+                                                        type: "checkbox",
+                                                        checked: scenario.data[field.key],
+                                                        onChange: function(e) {
+                                                            scenario.setData(function(prev) {
+                                                                return _object_spread_props(_object_spread({}, prev), _define_property({}, field.key, e.target.checked));
+                                                            });
+                                                            activateForm(scenario.key);
+                                                        }
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        children: field.label
+                                                    })
+                                                ]
+                                            }) : field.type === "select" ? /*#__PURE__*/ _jsxs(Box, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Box, {
+                                                        paddingBlockEnd: "2",
+                                                        children: /*#__PURE__*/ _jsx(Text, {
+                                                            variant: "bodySm",
+                                                            children: field.label
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("select", {
+                                                        value: scenario.data[field.key],
+                                                        onChange: function(e) {
+                                                            scenario.setData(function(prev) {
+                                                                return _object_spread_props(_object_spread({}, prev), _define_property({}, field.key, e.target.value));
+                                                            });
+                                                            activateForm(scenario.key);
+                                                        },
+                                                        style: {
+                                                            padding: "0.5rem",
+                                                            borderRadius: "4px",
+                                                            border: "1px solid #ccc"
+                                                        },
+                                                        children: field.options.map(function(option) {
+                                                            return /*#__PURE__*/ _jsx("option", {
+                                                                value: option,
+                                                                children: option.charAt(0).toUpperCase() + option.slice(1)
+                                                            }, option);
+                                                        })
+                                                    })
+                                                ]
+                                            }) : /*#__PURE__*/ _jsx(TextField, {
+                                                label: field.label,
+                                                type: field.type,
+                                                value: scenario.data[field.key],
+                                                onChange: function(value) {
+                                                    scenario.setData(function(prev) {
+                                                        return _object_spread_props(_object_spread({}, prev), _define_property({}, field.key, value));
+                                                    });
+                                                    activateForm(scenario.key);
+                                                }
+                                            })
+                                        }, field.key);
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    paddingBlockStart: "4",
+                                    children: /*#__PURE__*/ _jsxs(Text, {
+                                        variant: "bodySm",
+                                        tone: "subdued",
+                                        children: [
+                                            'Make changes to see: "',
+                                            scenario.message,
+                                            '"'
+                                        ]
+                                    })
+                                })
+                            ]
+                        }, scenario.key);
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            },
+            description: {
+                story: "Different contextual save bars with custom messages for various forms."
+            }
+        }
+    }
+};
+export var LoadingStates = {
+    render: function() {
+        var _useState = _sliced_to_array(useState({
+            content: "Some content here"
+        }), 2), formData = _useState[0], setFormData = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), saving = _useState1[0], setSaving = _useState1[1];
+        var _useState2 = _sliced_to_array(useState(false), 2), discarding = _useState2[0], setDiscarding = _useState2[1];
+        var _useState3 = _sliced_to_array(useState(false), 2), showSaveBar = _useState3[0], setShowSaveBar = _useState3[1];
+        var handleSave = function() {
+            return _async_to_generator(function() {
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setSaving(true);
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 2000);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            setSaving(false);
+                            setShowSaveBar(false);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        var handleDiscard = function() {
+            return _async_to_generator(function() {
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            setDiscarding(true);
+                            return [
+                                4,
+                                new Promise(function(resolve) {
+                                    return setTimeout(resolve, 1000);
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            setDiscarding(false);
+                            setFormData({
+                                content: "Some content here"
+                            });
+                            setShowSaveBar(false);
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+        return /*#__PURE__*/ _jsxs(Page, {
+            title: "Loading States Demo",
+            children: [
+                showSaveBar && /*#__PURE__*/ _jsx(ContextualSaveBar, {
+                    message: saving ? "Saving changes..." : discarding ? "Discarding changes..." : "Unsaved changes",
+                    saveAction: {
+                        onAction: handleSave,
+                        loading: saving,
+                        disabled: saving || discarding,
+                        accessibilityLabel: saving ? "Saving in progress" : "Save changes",
+                        content: saving ? "Saving..." : "Save changes"
+                    },
+                    discardAction: {
+                        onAction: handleDiscard,
+                        loading: discarding,
+                        disabled: saving || discarding,
+                        accessibilityLabel: discarding ? "Discarding in progress" : "Discard changes",
+                        content: discarding ? "Discarding..." : "Discard changes"
+                    }
+                }),
+                /*#__PURE__*/ _jsxs(Card, {
+                    title: "Document Editor",
+                    padded: true,
+                    children: [
+                        /*#__PURE__*/ _jsx(TextField, {
+                            label: "Content",
+                            value: formData.content,
+                            onChange: function(value) {
+                                setFormData({
+                                    content: value
+                                });
+                                setShowSaveBar(true);
+                            },
+                            multiline: 5
+                        }),
+                        /*#__PURE__*/ _jsxs(Box, {
+                            paddingBlockStart: "8",
+                            padding: "4",
+                            background: "subdued",
+                            borderRadius: "default",
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    variant: "headingSm",
+                                    children: "Demo Controls"
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    paddingBlockStart: "2",
+                                    children: /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                        gap: "4",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                onClick: function() {
+                                                    return setShowSaveBar(true);
+                                                },
+                                                disabled: showSaveBar,
+                                                size: "slim",
+                                                children: "Show Save Bar"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                onClick: function() {
+                                                    return setShowSaveBar(false);
+                                                },
+                                                disabled: !showSaveBar,
+                                                size: "slim",
+                                                children: "Hide Save Bar"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    paddingBlockStart: "4",
+                                    children: /*#__PURE__*/ _jsxs(Text, {
+                                        variant: "bodySm",
+                                        children: [
+                                            "Status:",
+                                            " ",
+                                            saving ? "Saving..." : discarding ? "Discarding..." : showSaveBar ? "Changes pending" : "No changes"
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            },
+            description: {
+                story: "Contextual save bar with loading states for save and discard actions."
+            }
+        }
+    }
+};
+export var DisabledActions = {
+    render: function() {
+        var _useState = _sliced_to_array(useState({
+            title: "",
+            content: "",
+            category: ""
+        }), 2), formData = _useState[0], setFormData = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), showSaveBar = _useState1[0], setShowSaveBar = _useState1[1];
+        var isFormValid = formData.title.trim() && formData.content.trim() && formData.category;
+        var handleSave = function() {
+            if (isFormValid) {
+                alert("Form saved successfully!");
+                setShowSaveBar(false);
+            }
+        };
+        var handleDiscard = function() {
+            setFormData({
+                title: "",
+                content: "",
+                category: ""
+            });
+            setShowSaveBar(false);
+        };
+        var handleFieldChange = function(field, value) {
+            setFormData(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), _define_property({}, field, value));
+            });
+            setShowSaveBar(true);
+        };
+        return /*#__PURE__*/ _jsxs(Page, {
+            title: "Form Validation Demo",
+            children: [
+                showSaveBar && /*#__PURE__*/ _jsx(ContextualSaveBar, {
+                    message: isFormValid ? "Ready to save changes" : "Please complete all required fields before saving",
+                    saveAction: {
+                        onAction: handleSave,
+                        disabled: !isFormValid,
+                        accessibilityLabel: isFormValid ? "Save form" : "Cannot save - form incomplete",
+                        content: isFormValid ? "Save form" : "Cannot save - form incomplete"
+                    },
+                    discardAction: {
+                        onAction: handleDiscard,
+                        accessibilityLabel: "Discard all changes",
+                        content: "Discard all changes"
+                    }
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Article Creation",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "6",
+                        children: [
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Title *",
+                                value: formData.title,
+                                onChange: function(value) {
+                                    return handleFieldChange("title", value);
+                                },
+                                error: showSaveBar && !formData.title.trim(),
+                                placeholder: "Enter article title"
+                            }),
+                            /*#__PURE__*/ _jsxs(Box, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        paddingBlockEnd: "2",
+                                        children: /*#__PURE__*/ _jsx(Text, {
+                                            variant: "bodySm",
+                                            children: "Category *"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs("select", {
+                                        value: formData.category,
+                                        onChange: function(e) {
+                                            return handleFieldChange("category", e.target.value);
+                                        },
+                                        style: {
+                                            width: "100%",
+                                            padding: "0.75rem",
+                                            borderRadius: "4px",
+                                            border: showSaveBar && !formData.category ? "1px solid #e74c3c" : "1px solid #ccc"
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx("option", {
+                                                value: "",
+                                                children: "Select a category"
+                                            }),
+                                            /*#__PURE__*/ _jsx("option", {
+                                                value: "technology",
+                                                children: "Technology"
+                                            }),
+                                            /*#__PURE__*/ _jsx("option", {
+                                                value: "business",
+                                                children: "Business"
+                                            }),
+                                            /*#__PURE__*/ _jsx("option", {
+                                                value: "lifestyle",
+                                                children: "Lifestyle"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(TextField, {
+                                label: "Content *",
+                                value: formData.content,
+                                onChange: function(value) {
+                                    return handleFieldChange("content", value);
+                                },
+                                error: showSaveBar && !formData.content.trim(),
+                                multiline: 4,
+                                placeholder: "Write your article content here..."
+                            }),
+                            /*#__PURE__*/ _jsxs(Box, {
+                                padding: "4",
+                                background: "subdued",
+                                borderRadius: "default",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "headingSm",
+                                        children: "Validation Status"
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Box, {
+                                        paddingBlockStart: "2",
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(Text, {
+                                                variant: "bodySm",
+                                                style: {
+                                                    color: formData.title.trim() ? "#27ae60" : "#e74c3c"
+                                                },
+                                                children: [
+                                                    "Title: ",
+                                                    formData.title.trim() ? "✓ Valid" : "✗ Required"
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(Text, {
+                                                variant: "bodySm",
+                                                style: {
+                                                    color: formData.category ? "#27ae60" : "#e74c3c"
+                                                },
+                                                children: [
+                                                    "Category: ",
+                                                    formData.category ? "✓ Selected" : "✗ Required"
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs(Text, {
+                                                variant: "bodySm",
+                                                style: {
+                                                    color: formData.content.trim() ? "#27ae60" : "#e74c3c"
+                                                },
+                                                children: [
+                                                    "Content: ",
+                                                    formData.content.trim() ? "✓ Valid" : "✗ Required"
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            source: {
+                transform: transformStorySource
+            },
+            description: {
+                story: "Contextual save bar with disabled save action based on form validation."
+            }
+        }
+    }
+};