@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/stories/Layout.stories.js

@@ -0,0 +1,649 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { transformStorySource } from "../utilities/transformers.js";
+import Stack from "../components/Stack.js";
+import Layout from "../components/Layout.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 Checkbox from "../components/Checkbox.js";
+import Box from "../components/Box.js";
+import Grid from "../components/Grid.js";
+export default {
+    title: 'Litho/Layout',
+    component: Layout,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: "A Layout component that provides flexible and responsive layout structure. It includes Section and AnnotatedSection subcomponents for organizing content with titles and descriptions."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        children: {
+            control: false,
+            description: 'Content to render inside the layout'
+        }
+    }
+};
+export var Default = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Box, {
+            padding: "8",
+            children: /*#__PURE__*/ _jsx(Layout, {
+                children: /*#__PURE__*/ _jsx(Card, {
+                    title: "Default Layout",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "This content is automatically wrapped in a Layout.Section when no explicit sections are provided."
+                    })
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Default layout that automatically wraps content in a section.'
+            }
+        }
+    }
+};
+export var WithSections = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Box, {
+            padding: "8",
+            children: /*#__PURE__*/ _jsxs(Layout, {
+                children: [
+                    /*#__PURE__*/ _jsx(Layout.Section, {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "First Section",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                children: "This is the first section of content."
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.Section, {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "Second Section",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                children: "This is the second section of content."
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.Section, {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "Third Section",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                children: "This is the third section of content."
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Layout with multiple explicit sections.'
+            }
+        }
+    }
+};
+export var AnnotatedSections = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Box, {
+            padding: "8",
+            children: /*#__PURE__*/ _jsxs(Layout, {
+                children: [
+                    /*#__PURE__*/ _jsx(Layout.AnnotatedSection, {
+                        title: "Account Settings",
+                        description: "Manage your account information and preferences",
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Full Name",
+                                        placeholder: "Enter your full name"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Email",
+                                        type: "email",
+                                        placeholder: "Enter your email"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Phone",
+                                        type: "tel",
+                                        placeholder: "Enter your phone number"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        primary: true,
+                                        children: "Save Changes"
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.AnnotatedSection, {
+                        title: "Notification Preferences",
+                        description: "Choose how you want to receive notifications",
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                        label: "Email notifications"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                        label: "SMS notifications"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                        label: "Push notifications"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                        label: "Marketing emails"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        primary: true,
+                                        children: "Update Preferences"
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.AnnotatedSection, {
+                        title: "Security Settings",
+                        description: "Manage your account security and privacy",
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Change Password"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Enable Two-Factor Authentication"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Download Account Data"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        destructive: true,
+                                        children: "Delete Account"
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Layout with annotated sections that include titles and descriptions.'
+            }
+        }
+    }
+};
+export var MixedSections = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Box, {
+            padding: "8",
+            children: /*#__PURE__*/ _jsxs(Layout, {
+                children: [
+                    /*#__PURE__*/ _jsx(Layout.Section, {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "Dashboard Overview",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                children: "Welcome to your dashboard. Here's a quick overview of your account."
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.AnnotatedSection, {
+                        title: "Profile Information",
+                        description: "Your personal details and contact information",
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Name",
+                                        value: "John Doe"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Email",
+                                        value: "john@example.com"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Company",
+                                        value: "Acme Corp"
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.Section, {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "Recent Activity",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                children: "Your recent account activity will be displayed here."
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.AnnotatedSection, {
+                        title: "Billing Information",
+                        description: "Manage your subscription and payment methods",
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "Current Plan: Professional ($29/month)"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: "Next Billing Date: March 15, 2024"
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        horizontal: true,
+                                        gap: "md",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                children: "Upgrade Plan"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                children: "Update Payment Method"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Layout mixing regular sections and annotated sections.'
+            }
+        }
+    }
+};
+export var SettingsPage = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Box, {
+            padding: "8",
+            children: /*#__PURE__*/ _jsxs(Layout, {
+                children: [
+                    /*#__PURE__*/ _jsx(Layout.AnnotatedSection, {
+                        title: "General Settings",
+                        description: "Basic settings for your account and application preferences",
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Application Name",
+                                        value: "My Application"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Default Language",
+                                        value: "English"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Time Zone",
+                                        value: "UTC-8 (Pacific Time)"
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        gap: "sm",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                label: "Enable dark mode"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                label: "Show advanced features"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                label: "Enable beta features"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.AnnotatedSection, {
+                        title: "Privacy & Security",
+                        description: "Control who can see your information and how your data is used",
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        gap: "sm",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                label: "Make profile public"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                label: "Allow search engines to index profile"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                label: "Show online status"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        horizontal: true,
+                                        gap: "md",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                children: "Change Password"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                children: "Setup 2FA"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.AnnotatedSection, {
+                        title: "Notifications",
+                        description: "Choose what notifications you want to receive and how",
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Box, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Box, {
+                                                paddingBlockEnd: "2",
+                                                children: /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "headingSm",
+                                                    children: "Email Notifications"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                gap: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                                        label: "Account updates"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                                        label: "Security alerts"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                                        label: "Product updates"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                                        label: "Marketing emails"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Box, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Box, {
+                                                paddingBlockEnd: "2",
+                                                children: /*#__PURE__*/ _jsx(Text, {
+                                                    variant: "headingSm",
+                                                    children: "Push Notifications"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsxs(Stack, {
+                                                gap: "sm",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                                        label: "New messages"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                                        label: "Team updates"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Checkbox, {
+                                                        label: "System alerts"
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.AnnotatedSection, {
+                        title: "Danger Zone",
+                        description: "Irreversible and destructive actions",
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        color: "subdued",
+                                        children: "These actions cannot be undone. Please proceed with caution."
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        gap: "sm",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                destructive: true,
+                                                children: "Reset All Settings"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                destructive: true,
+                                                children: "Delete All Data"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                destructive: true,
+                                                children: "Close Account"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Complete settings page example with multiple annotated sections.'
+            }
+        }
+    }
+};
+export var ProductManagement = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Box, {
+            padding: "8",
+            children: /*#__PURE__*/ _jsxs(Layout, {
+                children: [
+                    /*#__PURE__*/ _jsx(Layout.Section, {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            title: "Product Overview",
+                            padded: true,
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                children: "Manage your product catalog, inventory, and pricing from this dashboard."
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.AnnotatedSection, {
+                        title: "Basic Information",
+                        description: "Essential details about your product",
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Product Name",
+                                        placeholder: "Enter product name"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "SKU",
+                                        placeholder: "Product SKU"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Description",
+                                        multiline: 4,
+                                        placeholder: "Product description"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Category",
+                                        placeholder: "Product category"
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.AnnotatedSection, {
+                        title: "Pricing & Inventory",
+                        description: "Set pricing and manage stock levels",
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(Grid, {
+                                columns: {
+                                    xs: 1,
+                                    sm: 2,
+                                    lg: 4
+                                },
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Price",
+                                        placeholder: "$0.00"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Compare Price",
+                                        placeholder: "$0.00"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Cost per Item",
+                                        placeholder: "$0.00"
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Stock Quantity",
+                                        placeholder: "0"
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.AnnotatedSection, {
+                        title: "Shipping & Delivery",
+                        description: "Configure shipping options and delivery settings",
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Grid, {
+                                        columns: {
+                                            xs: 1,
+                                            sm: 2,
+                                            lg: 4
+                                        },
+                                        gap: "4",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TextField, {
+                                                label: "Weight",
+                                                placeholder: "0.0 kg"
+                                            }),
+                                            /*#__PURE__*/ _jsx(TextField, {
+                                                label: "Length",
+                                                placeholder: "0.0 cm"
+                                            }),
+                                            /*#__PURE__*/ _jsx(TextField, {
+                                                label: "Width",
+                                                placeholder: "0.0 cm"
+                                            }),
+                                            /*#__PURE__*/ _jsx(TextField, {
+                                                label: "Height",
+                                                placeholder: "0.0 cm"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Stack, {
+                                        gap: "sm",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                label: "This is a physical product"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                label: "Requires shipping"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Checkbox, {
+                                                label: "Fragile item"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Layout.Section, {
+                        children: /*#__PURE__*/ _jsx(Card, {
+                            padded: true,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                gap: "md",
+                                align: "end",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Save as Draft"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        children: "Preview"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        primary: true,
+                                        children: "Publish Product"
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Product management form using layout with annotated sections for organization.'
+            }
+        }
+    }
+};