mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-02-08 00:21:23 +01:00
Upgrade Storybook and disable TileLayout story for now
This commit is contained in:
Evan Simkowitz
parent
47995c12ad
commit
f6362a3a15
@ -1,132 +0,0 @@
|
|||||||
// // Copyright 2024, Command Line Inc.
|
|
||||||
// // SPDX-License-Identifier: Apache-2.0
|
|
||||||
|
|
||||||
// import type { Meta, StoryObj } from "@storybook/react";
|
|
||||||
|
|
||||||
// import { TileLayout } from "./TileLayout.jsx";
|
|
||||||
|
|
||||||
// import { atom } from "jotai";
|
|
||||||
// import { useState } from "react";
|
|
||||||
// import { newLayoutNode } from "./layoutNode.js";
|
|
||||||
// import "./tilelayout.stories.less";
|
|
||||||
// import {
|
|
||||||
// LayoutNode,
|
|
||||||
// LayoutTreeActionType,
|
|
||||||
// LayoutTreeInsertNodeAction,
|
|
||||||
// LayoutTreeState,
|
|
||||||
// NodeModel,
|
|
||||||
// WritableLayoutTreeStateAtom,
|
|
||||||
// } from "./types.js";
|
|
||||||
|
|
||||||
// const renderTestData = (data: string) => <div>{data}</div>;
|
|
||||||
|
|
||||||
// function newLayoutTreeStateAtom(node: LayoutNode): WritableLayoutTreeStateAtom {
|
|
||||||
// return atom({ rootNode: node } as LayoutTreeState);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// function renderContent(nodeModel: NodeModel) {
|
|
||||||
// return (
|
|
||||||
// <div ref={nodeModel.dragHandleRef} className="test-content" style={{ width: "100%", height: "100%" }}>
|
|
||||||
// {renderTestData(nodeModel.blockId)}
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const 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 default meta;
|
|
||||||
// type Story = StoryObj<typeof meta>;
|
|
||||||
|
|
||||||
// export const Basic: Story = {
|
|
||||||
// args: {
|
|
||||||
// layoutTreeStateAtom: newLayoutTreeStateAtom(
|
|
||||||
// newLayoutNode(undefined, undefined, undefined, { blockId: "Hello world!" })
|
|
||||||
// ),
|
|
||||||
// },
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export const More: Story = {
|
|
||||||
// args: {
|
|
||||||
// layoutTreeStateAtom: newLayoutTreeStateAtom<TestData>(
|
|
||||||
// newLayoutNode(undefined, undefined, [
|
|
||||||
// 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, [
|
|
||||||
// newLayoutNode(undefined, undefined, undefined, { name: "Hello world1!" }),
|
|
||||||
// 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!" }),
|
|
||||||
// ]),
|
|
||||||
// ]),
|
|
||||||
// ]);
|
|
||||||
|
|
||||||
// export const EvenMore: Story = {
|
|
||||||
// args: {
|
|
||||||
// layoutTreeStateAtom: newLayoutTreeStateAtom<TestData>(evenMoreRootNode),
|
|
||||||
// },
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const addNodeAtom = newLayoutTreeStateAtom(evenMoreRootNode);
|
|
||||||
|
|
||||||
// export const AddNode: Story = {
|
|
||||||
// render: () => {
|
|
||||||
// const [, dispatch] = useLayoutTreeStateReducerAtom(addNodeAtom);
|
|
||||||
// const [numAddedNodes, setNumAddedNodes] = useState(0);
|
|
||||||
// const dispatchAddNode = () => {
|
|
||||||
// const newNode = newLayoutNode(undefined, undefined, undefined, {
|
|
||||||
// name: "New Node" + numAddedNodes,
|
|
||||||
// });
|
|
||||||
// const insertNodeAction: LayoutTreeInsertNodeAction<TestData> = {
|
|
||||||
// type: LayoutTreeActionType.InsertNode,
|
|
||||||
// node: newNode,
|
|
||||||
// };
|
|
||||||
// dispatch(insertNodeAction);
|
|
||||||
// setNumAddedNodes(numAddedNodes + 1);
|
|
||||||
// };
|
|
||||||
// return (
|
|
||||||
// <div style={{ display: "flex", flexDirection: "column", width: "100%", height: "100%" }}>
|
|
||||||
// <div>
|
|
||||||
// <button onClick={dispatchAddNode}>Add node</button>
|
|
||||||
// </div>
|
|
||||||
// <TileLayout
|
|
||||||
// layoutTreeStateAtom={addNodeAtom as WritableLayoutTreeStateAtom<TestData>}
|
|
||||||
// contents={meta.args.contents}
|
|
||||||
// />
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// },
|
|
||||||
// };
|
|
||||||
132
frontend/layout/lib/TileLayout.stories.tsx.archive
Normal file
132
frontend/layout/lib/TileLayout.stories.tsx.archive
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
// Copyright 2024, Command Line Inc.
|
||||||
|
// SPDX-License-Identifier: Apache-2.0
|
||||||
|
|
||||||
|
import type { Meta, StoryObj } from "@storybook/react";
|
||||||
|
|
||||||
|
import { TileLayout } from "./TileLayout.jsx";
|
||||||
|
|
||||||
|
import { atom } from "jotai";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { newLayoutNode } from "./layoutNode.js";
|
||||||
|
import "./tilelayout.stories.less";
|
||||||
|
import {
|
||||||
|
LayoutNode,
|
||||||
|
LayoutTreeActionType,
|
||||||
|
LayoutTreeInsertNodeAction,
|
||||||
|
LayoutTreeState,
|
||||||
|
NodeModel,
|
||||||
|
WritableLayoutTreeStateAtom,
|
||||||
|
} from "./types.js";
|
||||||
|
|
||||||
|
const renderTestData = (data: string) => <div>{data}</div>;
|
||||||
|
|
||||||
|
function newLayoutTreeStateAtom(node: LayoutNode): WritableLayoutTreeStateAtom {
|
||||||
|
return atom({ rootNode: node } as LayoutTreeState);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderContent(nodeModel: NodeModel) {
|
||||||
|
return (
|
||||||
|
<div ref={nodeModel.dragHandleRef} className="test-content" style={{ width: "100%", height: "100%" }}>
|
||||||
|
{renderTestData(nodeModel.blockId)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const 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 default meta;
|
||||||
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
|
export const Basic: Story = {
|
||||||
|
args: {
|
||||||
|
layoutTreeStateAtom: newLayoutTreeStateAtom(
|
||||||
|
newLayoutNode(undefined, undefined, undefined, { blockId: "Hello world!" })
|
||||||
|
),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const More: Story = {
|
||||||
|
args: {
|
||||||
|
layoutTreeStateAtom: newLayoutTreeStateAtom<TestData>(
|
||||||
|
newLayoutNode(undefined, undefined, [
|
||||||
|
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, [
|
||||||
|
newLayoutNode(undefined, undefined, undefined, { name: "Hello world1!" }),
|
||||||
|
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!" }),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export const EvenMore: Story = {
|
||||||
|
args: {
|
||||||
|
layoutTreeStateAtom: newLayoutTreeStateAtom<TestData>(evenMoreRootNode),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const addNodeAtom = newLayoutTreeStateAtom(evenMoreRootNode);
|
||||||
|
|
||||||
|
export const AddNode: Story = {
|
||||||
|
render: () => {
|
||||||
|
const [, dispatch] = useLayoutTreeStateReducerAtom(addNodeAtom);
|
||||||
|
const [numAddedNodes, setNumAddedNodes] = useState(0);
|
||||||
|
const dispatchAddNode = () => {
|
||||||
|
const newNode = newLayoutNode(undefined, undefined, undefined, {
|
||||||
|
name: "New Node" + numAddedNodes,
|
||||||
|
});
|
||||||
|
const insertNodeAction: LayoutTreeInsertNodeAction<TestData> = {
|
||||||
|
type: LayoutTreeActionType.InsertNode,
|
||||||
|
node: newNode,
|
||||||
|
};
|
||||||
|
dispatch(insertNodeAction);
|
||||||
|
setNumAddedNodes(numAddedNodes + 1);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div style={{ display: "flex", flexDirection: "column", width: "100%", height: "100%" }}>
|
||||||
|
<div>
|
||||||
|
<button onClick={dispatchAddNode}>Add node</button>
|
||||||
|
</div>
|
||||||
|
<TileLayout
|
||||||
|
layoutTreeStateAtom={addNodeAtom as WritableLayoutTreeStateAtom<TestData>}
|
||||||
|
contents={meta.args.contents}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
18
package.json
18
package.json
@ -27,16 +27,16 @@
|
|||||||
"postinstall": "electron-builder install-app-deps"
|
"postinstall": "electron-builder install-app-deps"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@chromatic-com/storybook": "^1.9.0",
|
"@chromatic-com/storybook": "^2.0.2",
|
||||||
"@eslint/js": "^9.10.0",
|
"@eslint/js": "^9.10.0",
|
||||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||||
"@storybook/addon-essentials": "^8.2.9",
|
"@storybook/addon-essentials": "^8.3.0",
|
||||||
"@storybook/addon-interactions": "^8.2.9",
|
"@storybook/addon-interactions": "^8.3.0",
|
||||||
"@storybook/addon-links": "^8.2.9",
|
"@storybook/addon-links": "^8.3.0",
|
||||||
"@storybook/blocks": "^8.2.9",
|
"@storybook/blocks": "^8.3.0",
|
||||||
"@storybook/react": "^8.2.9",
|
"@storybook/react": "^8.3.0",
|
||||||
"@storybook/react-vite": "^8.2.9",
|
"@storybook/react-vite": "^8.3.0",
|
||||||
"@storybook/test": "^8.2.9",
|
"@storybook/test": "^8.3.0",
|
||||||
"@types/css-tree": "^2",
|
"@types/css-tree": "^2",
|
||||||
"@types/debug": "^4",
|
"@types/debug": "^4",
|
||||||
"@types/electron": "^1.6.10",
|
"@types/electron": "^1.6.10",
|
||||||
@ -62,7 +62,7 @@
|
|||||||
"prettier-plugin-jsdoc": "^1.3.0",
|
"prettier-plugin-jsdoc": "^1.3.0",
|
||||||
"prettier-plugin-organize-imports": "^4.0.0",
|
"prettier-plugin-organize-imports": "^4.0.0",
|
||||||
"rollup-plugin-flow": "^1.1.1",
|
"rollup-plugin-flow": "^1.1.1",
|
||||||
"storybook": "^8.2.9",
|
"storybook": "^8.3.0",
|
||||||
"ts-node": "^10.9.2",
|
"ts-node": "^10.9.2",
|
||||||
"tslib": "^2.6.3",
|
"tslib": "^2.6.3",
|
||||||
"tsx": "^4.19.1",
|
"tsx": "^4.19.1",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user