mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-02-01 23:21:59 +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"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@chromatic-com/storybook": "^1.9.0",
|
||||
"@chromatic-com/storybook": "^2.0.2",
|
||||
"@eslint/js": "^9.10.0",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@storybook/addon-essentials": "^8.2.9",
|
||||
"@storybook/addon-interactions": "^8.2.9",
|
||||
"@storybook/addon-links": "^8.2.9",
|
||||
"@storybook/blocks": "^8.2.9",
|
||||
"@storybook/react": "^8.2.9",
|
||||
"@storybook/react-vite": "^8.2.9",
|
||||
"@storybook/test": "^8.2.9",
|
||||
"@storybook/addon-essentials": "^8.3.0",
|
||||
"@storybook/addon-interactions": "^8.3.0",
|
||||
"@storybook/addon-links": "^8.3.0",
|
||||
"@storybook/blocks": "^8.3.0",
|
||||
"@storybook/react": "^8.3.0",
|
||||
"@storybook/react-vite": "^8.3.0",
|
||||
"@storybook/test": "^8.3.0",
|
||||
"@types/css-tree": "^2",
|
||||
"@types/debug": "^4",
|
||||
"@types/electron": "^1.6.10",
|
||||
@ -62,7 +62,7 @@
|
||||
"prettier-plugin-jsdoc": "^1.3.0",
|
||||
"prettier-plugin-organize-imports": "^4.0.0",
|
||||
"rollup-plugin-flow": "^1.1.1",
|
||||
"storybook": "^8.2.9",
|
||||
"storybook": "^8.3.0",
|
||||
"ts-node": "^10.9.2",
|
||||
"tslib": "^2.6.3",
|
||||
"tsx": "^4.19.1",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user