@netless/telebox-insider 0.2.25 → 1.0.0-alpha.2

package/dist/TeleBoxReact/index.d.ts

@@ -1,17 +0,0 @@
-import { FC } from "react";
-import { TeleBoxConfig, TeleBoxState } from "../TeleBox/typings";
-export declare type TeleBoxReactProps = TeleBoxConfig & {
-    onResize?: (event: {
-        width: number;
-        height: number;
-    }) => void;
-    onMove?: (event: {
-        x: number;
-        y: number;
-    }) => void;
-    onClose?: () => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    onStateChanged?: (state: TeleBoxState) => void;
-};
-export declare const TeleBoxReact: FC<TeleBoxReactProps>;

package/dist/TeleBoxReact/utils.d.ts

@@ -1,2 +0,0 @@
-import { useEffect } from "react";
-export declare const useUpdateEffect: typeof useEffect;

package/dist/TeleTitleBar/DefaultTitleBar/DefaultTitleBar.stories.d.ts

@@ -1,4 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-declare const storyMeta: Meta;
-export default storyMeta;
-export declare const LongTitle: Story;

package/src/TeleBoxCollector/TeleBoxCollector.stories.tsx

@@ -1,23 +0,0 @@
-import React, { useState } from "react";
-import { Meta, Story } from "@storybook/react";
-import { TeleBoxCollector, TeleBoxCollectorConfig } from ".";
-
-const storyMeta: Meta = {
-    title: "TeleBoxCollector",
-};
-
-export default storyMeta;
-
-export const Overview: Story<TeleBoxCollectorConfig> = (args) => {
-    const [collector] = useState(() => new TeleBoxCollector(args));
-    return <div ref={(dom) => dom && dom.appendChild(collector.render())} />;
-};
-
-Overview.args = {
-    visible: true,
-    readonly: false,
-};
-
-Overview.argTypes = {
-    onClick: { action: "onClick" },
-};

package/src/TeleBoxManager/MaxTitleBar/MaxTitleBar.stories.tsx

@@ -1,66 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import faker from "faker";
-import { TELE_BOX_STATE } from "../../TeleBox/constants";
-import { MaxTitleBarReact, MaxTitleBarReactProps } from "./MaxTitleBarReact";
-
-const storyMeta: Meta = {
-    title: "MaxTitleBar",
-    component: MaxTitleBarReact,
-};
-
-export default storyMeta;
-
-const containerRect = {
-    x: 0,
-    y: 0,
-    width: window.innerWidth,
-    height: window.innerHeight,
-};
-
-export const Overview: Story<MaxTitleBarReactProps> = (props) => (
-    <MaxTitleBarReact {...props} />
-);
-Overview.args = {
-    state: TELE_BOX_STATE.Maximized,
-    boxes: Array(3)
-        .fill(0)
-        .map((_, i) => ({
-            id: `${i + 1}`,
-            title: `tab ${i + 1}`,
-            readonly: faker.datatype.boolean(),
-        })),
-    containerRect,
-};
-Overview.args.focusedBox = Overview.args.boxes![1];
-
-export const SingleBox: Story<MaxTitleBarReactProps> = (props) => (
-    <MaxTitleBarReact {...props} />
-);
-SingleBox.args = {
-    state: TELE_BOX_STATE.Maximized,
-    boxes: [
-        {
-            id: `1`,
-            title: faker.commerce.productName(),
-            readonly: faker.datatype.boolean(),
-        },
-    ],
-    containerRect,
-};
-
-export const BoxOverflows: Story<MaxTitleBarReactProps> = (props) => (
-    <MaxTitleBarReact {...props} />
-);
-BoxOverflows.args = {
-    state: TELE_BOX_STATE.Maximized,
-    boxes: Array(50)
-        .fill(0)
-        .map((_, i) => ({
-            id: `${i + 1}`,
-            title: `tab ${i + 1}`,
-            readonly: faker.datatype.boolean(),
-        })),
-    containerRect,
-};
-BoxOverflows.args.focusedBox = BoxOverflows.args.boxes![3];

package/src/TeleBoxManager/MaxTitleBar/MaxTitleBarReact.tsx

@@ -1,34 +0,0 @@
-import React, { FC, useEffect, useState } from "react";
-import { MaxTitleBar, MaxTitleBarConfig } from ".";
-
-export type MaxTitleBarReactProps = MaxTitleBarConfig;
-
-export const MaxTitleBarReact: FC<MaxTitleBarConfig> = (props) => {
-    const [maxTitleBar] = useState(() => new MaxTitleBar(props));
-
-    useEffect(() => {
-        if (props.state != null) {
-            maxTitleBar.setState(props.state);
-        }
-    }, [maxTitleBar, props.state]);
-
-    useEffect(() => {
-        if (props.boxes != null) {
-            maxTitleBar.setBoxes(props.boxes);
-        }
-    }, [maxTitleBar, props.boxes]);
-
-    useEffect(() => {
-        if (props.containerRect != null) {
-            maxTitleBar.setContainerRect(props.containerRect);
-        }
-    }, [maxTitleBar, props.containerRect]);
-
-    useEffect(() => {
-        maxTitleBar.focusBox(props.focusedBox);
-    }, [maxTitleBar, props.focusedBox]);
-
-    return (
-        <div ref={(node) => node && node.appendChild(maxTitleBar.render())} />
-    );
-};

package/src/TeleBoxReact/TeleBox.stories.tsx

@@ -1,74 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import faker from "faker";
-import { TeleBoxReact, TeleBoxReactProps } from ".";
-import { TELE_BOX_STATE } from "../TeleBox/constants";
-
-const storyMeta: Meta<TeleBoxReactProps> = {
-    title: "TeleBox",
-    component: TeleBoxReact,
-    args: {
-        title: faker.commerce.productName(),
-        width: 0.5,
-        height: 0.5,
-        minWidth: 0.05,
-        minHeight: 0.05,
-        x: 0.1,
-        y: 0.1,
-        state: TELE_BOX_STATE.Normal,
-        readonly: false,
-        draggable: true,
-        resizable: true,
-    },
-    argTypes: {
-        width: { control: { type: "range", min: 0, max: 1, step: 0.01 } },
-        height: { control: { type: "range", min: 0, max: 1, step: 0.01 } },
-        minWidth: { control: { type: "range", min: 0, max: 1, step: 0.01 } },
-        minHeight: { control: { type: "range", min: 0, max: 1, step: 0.01 } },
-        x: { control: { type: "range", min: 0, max: 1, step: 0.01 } },
-        y: { control: { type: "range", min: 0, max: 1, step: 0.01 } },
-        fixRatio: { control: { type: "number" } },
-    },
-};
-
-export default storyMeta;
-
-export const Overview: Story<TeleBoxReactProps> = (args) => {
-    return <TeleBoxReact {...args} />;
-};
-
-export const Resizable: Story<TeleBoxReactProps> = (args) => {
-    return <TeleBoxReact {...args} />;
-};
-
-Resizable.args = {
-    title: "No Resize",
-    resizable: false,
-};
-
-export const Draggable: Story<TeleBoxReactProps> = (args) => {
-    return <TeleBoxReact {...args} />;
-};
-
-Draggable.args = {
-    title: "No Drag",
-    draggable: false,
-};
-
-export const FixRatio: Story<TeleBoxReactProps> = (args) => {
-    return <TeleBoxReact {...args} />;
-};
-
-FixRatio.args = {
-    title: "Fix Ratio",
-    fixRatio: true,
-};
-
-export const Readonly: Story<TeleBoxReactProps> = (args) => {
-    return <TeleBoxReact {...args} />;
-};
-
-Readonly.args = {
-    title: "Readonly",
-    readonly: true,
-};

package/src/TeleBoxReact/index.tsx

@@ -1,175 +0,0 @@
-import React, { FC, useState, useEffect } from "react";
-import { TeleBox } from "../TeleBox";
-import { TeleBoxConfig, TeleBoxState } from "../TeleBox/typings";
-import { TELE_BOX_EVENT } from "../TeleBox/constants";
-import { useUpdateEffect } from "./utils";
-
-export type TeleBoxReactProps = TeleBoxConfig & {
-    onResize?: (event: { width: number; height: number }) => void;
-    onMove?: (event: { x: number; y: number }) => void;
-    onClose?: () => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    onStateChanged?: (state: TeleBoxState) => void;
-};
-
-export const TeleBoxReact: FC<TeleBoxReactProps> = (props) => {
-    const [teleBox] = useState(() => new TeleBox(props));
-
-    useUpdateEffect(() => {
-        if (props.prefersColorScheme != null) {
-            teleBox.setPrefersColorScheme(props.prefersColorScheme);
-        }
-    }, [teleBox, props.prefersColorScheme]);
-
-    useUpdateEffect(() => {
-        if (props.minWidth != null) {
-            teleBox.setMinWidth(props.minWidth);
-        }
-    }, [teleBox, props.minWidth]);
-
-    useUpdateEffect(() => {
-        if (props.minHeight != null) {
-            teleBox.setMinHeight(props.minHeight);
-        }
-    }, [teleBox, props.minHeight]);
-
-    useUpdateEffect(() => {
-        teleBox.resize(
-            props.width ?? teleBox.width,
-            props.height ?? teleBox.height,
-            true
-        );
-    }, [teleBox, props.width, props.height]);
-
-    useUpdateEffect(() => {
-        teleBox.move(props.x ?? teleBox.x, props.y ?? teleBox.y, true);
-    }, [teleBox, props.x, props.y]);
-
-    useUpdateEffect(() => {
-        if (props.title != null) {
-            teleBox.setTitle(props.title);
-        }
-    }, [teleBox, props.title]);
-
-    useUpdateEffect(() => {
-        if (props.visible != null) {
-            teleBox.setVisible(props.visible);
-        }
-    }, [teleBox, props.visible]);
-
-    useUpdateEffect(() => {
-        if (props.minimized != null) {
-            teleBox.setMinimized(props.minimized, true);
-        }
-    }, [teleBox, props.minimized]);
-
-    useUpdateEffect(() => {
-        if (props.maximized != null) {
-            teleBox.setMaximized(props.maximized, true);
-        }
-    }, [teleBox, props.maximized]);
-
-    useUpdateEffect(() => {
-        if (props.state != null) {
-            teleBox.setState(props.state, true);
-        }
-    }, [teleBox, props.state]);
-
-    useUpdateEffect(() => {
-        if (props.draggable != null) {
-            teleBox.setDraggable(props.draggable);
-        }
-    }, [teleBox, props.draggable]);
-
-    useUpdateEffect(() => {
-        if (props.resizable != null) {
-            teleBox.setResizable(props.resizable);
-        }
-    }, [teleBox, props.resizable]);
-
-    useUpdateEffect(() => {
-        if (props.fence != null) {
-            teleBox.setFence(props.fence);
-        }
-    }, [teleBox, props.fence]);
-
-    useUpdateEffect(() => {
-        if (props.containerRect != null) {
-            teleBox.setContainerRect(props.containerRect);
-        }
-    }, [teleBox, props.containerRect]);
-
-    useUpdateEffect(() => {
-        if (props.fixRatio != null) {
-            teleBox.setFixRatio(props.fixRatio);
-        }
-    }, [teleBox, props.fixRatio]);
-
-    useEffect(() => {
-        if (props.onResize) {
-            teleBox.events.on(TELE_BOX_EVENT.Resize, props.onResize);
-            return () => {
-                teleBox.events.off(TELE_BOX_EVENT.Resize, props.onResize);
-            };
-        }
-        return;
-    }, [teleBox, props.onResize]);
-
-    useEffect(() => {
-        if (props.onMove) {
-            teleBox.events.on(TELE_BOX_EVENT.Move, props.onMove);
-            return () => {
-                teleBox.events.off(TELE_BOX_EVENT.Move, props.onMove);
-            };
-        }
-        return;
-    }, [teleBox, props.onMove]);
-
-    useEffect(() => {
-        if (props.onClose) {
-            teleBox.events.on(TELE_BOX_EVENT.Close, props.onClose);
-            return () => {
-                teleBox.events.off(TELE_BOX_EVENT.Close, props.onClose);
-            };
-        }
-        return;
-    }, [teleBox, props.onClose]);
-
-    useEffect(() => {
-        if (props.onFocus) {
-            teleBox.events.on(TELE_BOX_EVENT.Focus, props.onFocus);
-            return () => {
-                teleBox.events.off(TELE_BOX_EVENT.Focus, props.onFocus);
-            };
-        }
-        return;
-    }, [teleBox, props.onFocus]);
-
-    useEffect(() => {
-        if (props.onBlur) {
-            teleBox.events.on(TELE_BOX_EVENT.Blur, props.onBlur);
-            return () => {
-                teleBox.events.off(TELE_BOX_EVENT.Blur, props.onBlur);
-            };
-        }
-        return;
-    }, [teleBox, props.onBlur]);
-
-    useEffect(() => {
-        if (props.onStateChanged) {
-            teleBox.events.on(TELE_BOX_EVENT.State, props.onStateChanged);
-            return () => {
-                teleBox.events.off(TELE_BOX_EVENT.State, props.onStateChanged);
-            };
-        }
-        return;
-    }, [teleBox, props.onStateChanged]);
-
-    return (
-        <div
-            ref={(node) => node && teleBox.render(node)}
-            className={teleBox.wrapClassName("box")}
-        />
-    );
-};

package/src/TeleBoxReact/utils.ts

@@ -1,14 +0,0 @@
-import { useEffect, useRef } from "react";
-
-export const useUpdateEffect: typeof useEffect = (effect, deps) => {
-    const isFirst = useRef(true);
-
-    useEffect(() => {
-        if (isFirst.current) {
-            isFirst.current = false;
-            return;
-        }
-        return effect();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-};

package/src/TeleTitleBar/DefaultTitleBar/DefaultTitleBar.stories.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import faker from "faker";
-import { TeleBoxReact } from "../../TeleBoxReact";
-
-const storyMeta: Meta = {
-    title: "DefaultTitleBar",
-    component: TeleBoxReact,
-};
-
-export default storyMeta;
-
-export const LongTitle: Story = () => (
-    <TeleBoxReact title={faker.lorem.words(50)} />
-);