@wener/console/lib/window/Window.stories.js

Base console UI toolkit

import React, { useEffect, useRef } from "react";
import { PiAppleLogo, PiWindowsLogo } from "react-icons/pi";
import { useStore } from "zustand";
import { ComponentProvider } from "../components/index.js";
import { useRootWindow } from "./ReactWindow.js";
import { WindowFrame } from "./WindowFrame.js";
import { WindowHost } from "./WindowHost.js";
import { getWindowStyleStore } from "./WindowStyleStore.js";
import { WindowTest } from "./WindowTest.js";
var meta = {
    title: "window",
    parameters: {
        layout: "fullscreen"
    }
};
export default meta;
export var Windows = function () {
    var store = getWindowStyleStore();
    var _useStore;
    var theme = (_useStore = useStore(store, function (s) {
        return s.theme;
    })) !== null && _useStore !== void 0 ? _useStore : "system";
    var ref = useRef(null);
    useEffect(function () {
        if (!ref.current) {
            return;
        }
        if (theme === "system") {
            ref.current.indeterminate = true;
        }
        else {
            ref.current.checked = theme !== "macos";
        }
    }, [
        ref.current,
        theme
    ]);
    return /*#__PURE__*/ React.createElement("div", {
        className: "flex flex-col gap-4"
    }, /*#__PURE__*/ React.createElement("label", {
        className: "flex items-center gap-1"
    }, /*#__PURE__*/ React.createElement(PiAppleLogo, null), /*#__PURE__*/ React.createElement("input", {
        ref: ref,
        type: "checkbox",
        className: "toggle toggle-xs",
        onChange: function (e) {
            var loop = [
                "macos",
                "system",
                "windows"
            ];
            var next = loop[(loop.indexOf(theme) + 1) % loop.length];
            store.setState({
                theme: next
            });
        }
    }), /*#__PURE__*/ React.createElement(PiWindowsLogo, null)), /*#__PURE__*/ React.createElement(WindowFrame, {
        title: "My Windows Application"
    }, "Hello"));
};
export var Demo = function () {
    var win = useRootWindow();
    return /*#__PURE__*/ React.createElement(ComponentProvider, {
        components: []
    }, /*#__PURE__*/ React.createElement("div", {
        className: "h-full w-full"
    }, /*#__PURE__*/ React.createElement("div", {
        className: "flex"
    }, /*#__PURE__*/ React.createElement("button", {
        type: "button",
        className: "btn btn-ghost",
        onClick: function () {
            win.open({
                title: "Test Title",
                render: function () {
                    return /*#__PURE__*/ React.createElement(WindowTest, null);
                }
            });
        }
    }, "\u6253\u5F00\u7A97\u53E3"), /*#__PURE__*/ React.createElement("input", {
        type: "text",
        placeholder: "Can input here, the window will not trap the focus"
    })), /*#__PURE__*/ React.createElement(WindowHost, null)));
};