Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

disable TileLayout story for now

Browse Source
This commit is contained in:
Evan Simkowitz 2024-09-16 13:14:06 -07:00
parent 9873b27977
commit 47995c12ad
No known key found for this signature in database
1 changed files with 119 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
frontend/layout/lib/TileLayout.stories.tsx
View File

@ -1,126 +1,132 @@
// Copyright 2024, Command Line Inc. // // Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0 // // SPDX-License-Identifier: Apache-2.0
import type { Meta, StoryObj } from "@storybook/react"; // import type { Meta, StoryObj } from "@storybook/react";
import { TileLayout } from "./TileLayout.jsx"; // import { TileLayout } from "./TileLayout.jsx";
import { useState } from "react"; // import { atom } from "jotai";
import { newLayoutTreeStateAtom, useLayoutTreeStateReducerAtom } from "./layoutAtom.js"; // import { useState } from "react";
import { newLayoutNode } from "./layoutNode.js"; // import { newLayoutNode } from "./layoutNode.js";
import "./tilelayout.stories.less"; // import "./tilelayout.stories.less";
import { LayoutTreeActionType, LayoutTreeInsertNodeAction, WritableLayoutTreeStateAtom } from "./types.js"; // import {
// LayoutNode,
// LayoutTreeActionType,
// LayoutTreeInsertNodeAction,
// LayoutTreeState,
// NodeModel,
// WritableLayoutTreeStateAtom,
// } from "./types.js";
interface TestData { // const renderTestData = (data: string) => <div>{data}</div>;
name: string;
}
const renderTestData = (data: TestData) => <div>{data.name}</div>; // function newLayoutTreeStateAtom(node: LayoutNode): WritableLayoutTreeStateAtom {
// return atom({ rootNode: node } as LayoutTreeState);
// }
const meta = { // function renderContent(nodeModel: NodeModel) {
title: "TileLayout", // return (
args: { // <div ref={nodeModel.dragHandleRef} className="test-content" style={{ width: "100%", height: "100%" }}>
layoutTreeStateAtom: newLayoutTreeStateAtom<TestData>( // {renderTestData(nodeModel.blockId)}
newLayoutNode(undefined, undefined, undefined, { // </div>
name: "Hello world!", // );
}) // }
),
contents: {
renderContent: (
data: TestData,
_ready: boolean,
_onClose: () => void,
dragHandleRef: React.RefObject<HTMLDivElement>
) => (
<div ref={dragHandleRef} className="test-content" style={{ width: "100%", height: "100%" }}>
{renderTestData(data)}
</div>
),
renderPreview: renderTestData,
tabId: "",
},
},
component: TileLayout<TestData>,
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
tags: ["autodocs"],
} satisfies Meta<typeof TileLayout<TestData>>;
export default meta; // const meta = {
type Story = StoryObj<typeof meta>; // title: "TileLayout",
// args: {
// layoutTreeStateAtom: newLayoutTreeStateAtom(
// newLayoutNode(undefined, undefined, undefined, {
// blockId: "Hello world!",
// })
// ),
// contents: {
// renderContent,
// renderPreview: renderContent,
// tabId: "",
// },
// },
// component: TileLayout,
// // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
// tags: ["autodocs"],
// } satisfies Meta<typeof TileLayout>;
export const Basic: Story = { // export default meta;
args: { // type Story = StoryObj<typeof meta>;
layoutTreeStateAtom: newLayoutTreeStateAtom<TestData>(
newLayoutNode(undefined, undefined, undefined, { name: "Hello world!" })
),
},
};
export const More: Story = { // export const Basic: Story = {
args: { // args: {
layoutTreeStateAtom: newLayoutTreeStateAtom<TestData>( // layoutTreeStateAtom: newLayoutTreeStateAtom(
newLayoutNode(undefined, undefined, [ // newLayoutNode(undefined, undefined, undefined, { blockId: "Hello world!" })
newLayoutNode(undefined, undefined, undefined, { name: "Hello world1!" }), // ),
newLayoutNode(undefined, undefined, undefined, { name: "Hello world2!" }), // },
newLayoutNode(undefined, undefined, [ // };
newLayoutNode(undefined, undefined, undefined, { name: "Hello world3!" }),
newLayoutNode(undefined, undefined, undefined, { name: "Hello world4!" }),
]),
])
),
},
};
const evenMoreRootNode = newLayoutNode<TestData>(undefined, undefined, [ // export const More: Story = {
newLayoutNode(undefined, undefined, undefined, { name: "Hello world1!" }), // args: {
newLayoutNode(undefined, undefined, [ // layoutTreeStateAtom: newLayoutTreeStateAtom<TestData>(
newLayoutNode(undefined, undefined, undefined, { name: "Hello world2!" }), // newLayoutNode(undefined, undefined, [
newLayoutNode(undefined, undefined, undefined, { name: "Hello world3!" }), // newLayoutNode(undefined, undefined, undefined, { name: "Hello world1!" }),
]), // newLayoutNode(undefined, undefined, undefined, { name: "Hello world2!" }),
newLayoutNode(undefined, undefined, [ // newLayoutNode(undefined, undefined, [
newLayoutNode(undefined, undefined, undefined, { name: "Hello world4!" }), // newLayoutNode(undefined, undefined, undefined, { name: "Hello world3!" }),
newLayoutNode(undefined, undefined, undefined, { name: "Hello world5!" }), // newLayoutNode(undefined, undefined, undefined, { name: "Hello world4!" }),
newLayoutNode(undefined, undefined, [ // ]),
newLayoutNode(undefined, undefined, undefined, { name: "Hello world6!" }), // ])
newLayoutNode(undefined, undefined, undefined, { name: "Hello world7!" }), // ),
newLayoutNode(undefined, undefined, undefined, { name: "Hello world8!" }), // },
]), // };
]),
]);
export const EvenMore: Story = { // const evenMoreRootNode = newLayoutNode<TestData>(undefined, undefined, [
args: { // newLayoutNode(undefined, undefined, undefined, { name: "Hello world1!" }),
layoutTreeStateAtom: newLayoutTreeStateAtom<TestData>(evenMoreRootNode), // newLayoutNode(undefined, undefined, [
}, // newLayoutNode(undefined, undefined, undefined, { name: "Hello world2!" }),
}; // newLayoutNode(undefined, undefined, undefined, { name: "Hello world3!" }),
// ]),
// newLayoutNode(undefined, undefined, [
// newLayoutNode(undefined, undefined, undefined, { name: "Hello world4!" }),
// newLayoutNode(undefined, undefined, undefined, { name: "Hello world5!" }),
// newLayoutNode(undefined, undefined, [
// newLayoutNode(undefined, undefined, undefined, { name: "Hello world6!" }),
// newLayoutNode(undefined, undefined, undefined, { name: "Hello world7!" }),
// newLayoutNode(undefined, undefined, undefined, { name: "Hello world8!" }),
// ]),
// ]),
// ]);
const addNodeAtom = newLayoutTreeStateAtom(evenMoreRootNode); // export const EvenMore: Story = {
// args: {
// layoutTreeStateAtom: newLayoutTreeStateAtom<TestData>(evenMoreRootNode),
// },
// };
export const AddNode: Story = { // const addNodeAtom = newLayoutTreeStateAtom(evenMoreRootNode);
render: () => {
const [, dispatch] = useLayoutTreeStateReducerAtom(addNodeAtom); // export const AddNode: Story = {
const [numAddedNodes, setNumAddedNodes] = useState(0); // render: () => {
const dispatchAddNode = () => { // const [, dispatch] = useLayoutTreeStateReducerAtom(addNodeAtom);
const newNode = newLayoutNode(undefined, undefined, undefined, { // const [numAddedNodes, setNumAddedNodes] = useState(0);
name: "New Node" + numAddedNodes, // const dispatchAddNode = () => {
}); // const newNode = newLayoutNode(undefined, undefined, undefined, {
const insertNodeAction: LayoutTreeInsertNodeAction<TestData> = { // name: "New Node" + numAddedNodes,
type: LayoutTreeActionType.InsertNode, // });
node: newNode, // const insertNodeAction: LayoutTreeInsertNodeAction<TestData> = {
}; // type: LayoutTreeActionType.InsertNode,
dispatch(insertNodeAction); // node: newNode,
setNumAddedNodes(numAddedNodes + 1); // };
}; // dispatch(insertNodeAction);
return ( // setNumAddedNodes(numAddedNodes + 1);
<div style={{ display: "flex", flexDirection: "column", width: "100%", height: "100%" }}> // };
<div> // return (
<button onClick={dispatchAddNode}>Add node</button> // <div style={{ display: "flex", flexDirection: "column", width: "100%", height: "100%" }}>
</div> // <div>
<TileLayout // <button onClick={dispatchAddNode}>Add node</button>
layoutTreeStateAtom={addNodeAtom as WritableLayoutTreeStateAtom<TestData>} // </div>
contents={meta.args.contents} // <TileLayout
/> // layoutTreeStateAtom={addNodeAtom as WritableLayoutTreeStateAtom<TestData>}
</div> // contents={meta.args.contents}
); // />
}, // </div>
}; // );
// },
// };