@wener/console/lib/pages/LoginPage/LoginPage.stories.js

Base console UI toolkit

import React from "react";
import { GrSystem } from "react-icons/gr";
import { Image } from "../../components/index.js";
import { LoginPage } from "./LoginPage.js";
var meta = {
    title: "pages/LoginPage",
    component: LoginPage.Composite,
    parameters: {
        layout: "fullscreen"
    },
    decorators: [
        function (Story) {
            return /*#__PURE__*/ React.createElement("div", {
                className: "h-screen"
            }, /*#__PURE__*/ React.createElement(Story, null));
        }
    ]
};
export default meta;
export var Default = {
    args: {
        title: "\u7CFB\u7EDF\u767B\u5F55",
        subtitle: "\u767B\u5F55\u7CFB\u7EDF",
        onSubmit: function (data) {
            console.log("Login data:", data);
        }
    }
};
export var WithHero = {
    args: {
        title: "\u7CFB\u7EDF\u767B\u5F55",
        subtitle: "\u767B\u5F55\u7CFB\u7EDF",
        hero: /*#__PURE__*/ React.createElement(Image, {
            className: "absolute inset-0 h-full w-full object-cover",
            src: "https://images.unsplash.com/photo-1496917756835-20cb06e75b4e",
            alt: "splash"
        }),
        onSubmit: function (data) {
            console.log("Login data:", data);
        }
    }
};
export var WithOrg = {
    args: {
        title: "\u4F01\u4E1A\u540D\u79F0",
        subtitle: "\u767B\u5F55\u7CFB\u7EDF",
        showOrg: true,
        onSubmit: function (data) {
            console.log("Login data:", data);
        }
    }
};
export var WithSocialLogin = {
    args: {
        title: "\u7CFB\u7EDF\u767B\u5F55",
        subtitle: "\u767B\u5F55\u7CFB\u7EDF",
        socials: [
            {
                name: "Wechat",
                onClick: function () {
                    console.log("Wechat login");
                }
            },
            {
                name: "Wecom",
                onClick: function () {
                    console.log("Wecom login");
                }
            }
        ],
        onSubmit: function (data) {
            console.log("Login data:", data);
        }
    }
};
export var WithFooter = {
    args: {
        title: "\u7CFB\u7EDF\u767B\u5F55",
        subtitle: "\u767B\u5F55\u7CFB\u7EDF",
        footer: {
            policy: {
                text: "\u9690\u79C1\u653F\u7B56",
                url: "https://example.com/policy"
            },
            terms: {
                text: "\u670D\u52A1\u6761\u6B3E",
                url: "https://example.com/terms"
            },
            beian: {
                text: "\u6CAAICP\u5907123456\u53F7",
                url: "https://beian.miit.gov.cn/"
            }
        },
        onSubmit: function (data) {
            console.log("Login data:", data);
        }
    }
};
export var WithRegister = {
    args: {
        title: "\u7CFB\u7EDF\u767B\u5F55",
        subtitle: "\u767B\u5F55\u7CFB\u7EDF",
        onRegister: function () {
            console.log("Register clicked");
        },
        onForgetPassword: function () {
            console.log("Forget password clicked");
        },
        onSubmit: function (data) {
            console.log("Login data:", data);
        }
    }
};
export var FullFeatured = {
    args: {
        title: "\u4F01\u4E1A\u7BA1\u7406\u7CFB\u7EDF",
        subtitle: "\u6B22\u8FCE\u56DE\u6765",
        logo: /*#__PURE__*/ React.createElement(GrSystem, {
            className: "h-10 w-10"
        }),
        showOrg: true,
        socials: [
            {
                name: "Wechat",
                onClick: function () {
                    console.log("Wechat login");
                }
            },
            {
                name: "Wecom",
                onClick: function () {
                    console.log("Wecom login");
                }
            }
        ],
        footer: {
            policy: {
                text: "\u9690\u79C1\u653F\u7B56",
                url: "https://example.com/policy"
            },
            terms: {
                text: "\u670D\u52A1\u6761\u6B3E",
                url: "https://example.com/terms"
            },
            beian: {
                text: "\u6CAAICP\u5907123456\u53F7",
                url: "https://beian.miit.gov.cn/"
            }
        },
        onRegister: function () {
            console.log("Register clicked");
        },
        onForgetPassword: function () {
            console.log("Forget password clicked");
        },
        hero: /*#__PURE__*/ React.createElement(Image, {
            className: "absolute inset-0 h-full w-full object-cover",
            src: "https://images.unsplash.com/photo-1496917756835-20cb06e75b4e",
            alt: "splash"
        }),
        onSubmit: function (data) {
            console.log("Login data:", data);
        }
    }
};
// Stories for individual components
export var LoginFormStory = {
    render: function () {
        return /*#__PURE__*/ React.createElement("div", {
            className: "mx-auto max-w-md p-8"
        }, /*#__PURE__*/ React.createElement(LoginPage.Form, {
            onSubmit: function (data) {
                console.log("Login data:", data);
            }
        }));
    }
};
export var LoginFormWithOrgStory = {
    render: function () {
        return /*#__PURE__*/ React.createElement("div", {
            className: "mx-auto max-w-md p-8"
        }, /*#__PURE__*/ React.createElement(LoginPage.Form, {
            showOrg: true,
            orgValue: "\u4F01\u4E1A\u540D\u79F0",
            onSubmit: function (data) {
                console.log("Login data:", data);
            }
        }));
    }
};
export var HeroStory = {
    render: function () {
        return /*#__PURE__*/ React.createElement("div", {
            className: "h-screen"
        }, /*#__PURE__*/ React.createElement(LoginPage.Hero, null, /*#__PURE__*/ React.createElement(Image, {
            className: "absolute inset-0 h-full w-full object-cover",
            src: "https://images.unsplash.com/photo-1496917756835-20cb06e75b4e",
            alt: "splash"
        })));
    }
};
export var SocialLoginStory = {
    render: function () {
        return /*#__PURE__*/ React.createElement("div", {
            className: "mx-auto max-w-md p-8"
        }, /*#__PURE__*/ React.createElement(LoginPage.SocialLogin, {
            socials: [
                {
                    name: "Wechat",
                    onClick: function () {
                        console.log("Wechat login");
                    }
                },
                {
                    name: "Wecom",
                    onClick: function () {
                        console.log("Wecom login");
                    }
                }
            ]
        }));
    }
};