Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-21 21:32:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade Storybook and disable TileLayout story for now

Browse Source
This commit is contained in:
Evan Simkowitz 2024-09-16 13:16:04 -07:00
parent 47995c12ad
commit f6362a3a15
No known key found for this signature in database
4 changed files with 610 additions and 2762 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
View 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>
);
},
};

258
package.json
View File

@ -1,131 +1,131 @@
{
"name": "thenextwave",
"author": {
"name": "Command Line Inc",
"email": "info@commandline.dev"
},
"productName": "TheNextWave",
"description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
"license": "Apache-2.0",
"version": "0.1.12",
"homepage": "https://waveterm.dev",
"build": {
"appId": "dev.commandline.thenextwave"
},
"private": true,
"main": "./dist/main/index.js",
"type": "module",
"scripts": {
"dev": "electron-vite dev",
"start": "electron-vite preview",
"build:dev": "electron-vite build --mode development",
"build:prod": "electron-vite build --mode production",
"storybook": "storybook dev -p 6006 --no-open",
"build-storybook": "storybook build",
"coverage": "vitest run --coverage",
"test": "vitest",
"postinstall": "electron-builder install-app-deps"
},
"devDependencies": {
"@chromatic-com/storybook": "^1.9.0",
"@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",
"@types/css-tree": "^2",
"@types/debug": "^4",
"@types/electron": "^1.6.10",
"@types/node": "^22.5.4",
"@types/papaparse": "^5",
"@types/pngjs": "^6.0.5",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@types/shell-quote": "^1",
"@types/sprintf-js": "^1",
"@types/throttle-debounce": "^5",
"@types/tinycolor2": "^1",
"@types/uuid": "^10.0.0",
"@vitejs/plugin-react-swc": "^3.7.0",
"@vitest/coverage-istanbul": "^2.1.1",
"electron": "^32.1.0",
"electron-builder": "^25.0.5",
"electron-vite": "^2.3.0",
"eslint": "^9.10.0",
"eslint-config-prettier": "^9.1.0",
"less": "^4.2.0",
"prettier": "^3.3.3",
"prettier-plugin-jsdoc": "^1.3.0",
"prettier-plugin-organize-imports": "^4.0.0",
"rollup-plugin-flow": "^1.1.1",
"storybook": "^8.2.9",
"ts-node": "^10.9.2",
"tslib": "^2.6.3",
"tsx": "^4.19.1",
"typescript": "^5.6.2",
"typescript-eslint": "^8.5.0",
"vite": "^5.4.5",
"vite-plugin-image-optimizer": "^1.1.8",
"vite-plugin-static-copy": "^1.0.6",
"vite-plugin-svgr": "^4.2.0",
"vite-tsconfig-paths": "^5.0.1",
"vitest": "^2.1.1"
},
"dependencies": {
"@monaco-editor/loader": "^1.4.0",
"@monaco-editor/react": "^4.6.0",
"@observablehq/plot": "^0.6.16",
"@react-hook/resize-observer": "^2.0.2",
"@table-nav/core": "^0.0.7",
"@table-nav/react": "^0.0.7",
"@tanstack/react-table": "^8.20.5",
"@types/color": "^3.0.6",
"@xterm/addon-fit": "^0.10.0",
"@xterm/addon-serialize": "^0.13.0",
"@xterm/addon-web-links": "^0.11.0",
"@xterm/addon-webgl": "^0.18.0",
"@xterm/xterm": "^5.5.0",
"base64-js": "^1.5.1",
"clsx": "^2.1.1",
"color": "^4.2.3",
"css-tree": "^2.3.1",
"dayjs": "^1.11.13",
"debug": "^4.3.7",
"electron-updater": "6.3.4",
"fast-average-color": "^9.4.0",
"htl": "^0.3.1",
"html-to-image": "^1.11.11",
"immer": "^10.1.1",
"jotai": "^2.9.3",
"monaco-editor": "^0.51.0",
"overlayscrollbars": "^2.10.0",
"overlayscrollbars-react": "^0.5.6",
"papaparse": "^5.4.1",
"pngjs": "^7.0.0",
"react": "^18.3.1",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.3.1",
"react-frame-component": "^5.2.7",
"react-gauge-chart": "^0.5.1",
"react-markdown": "^9.0.1",
"rehype-highlight": "^7.0.0",
"rehype-raw": "^7.0.0",
"rehype-sanitize": "^6.0.0",
"rehype-slug": "^6.0.0",
"remark-flexible-toc": "^1.1.1",
"remark-gfm": "^4.0.0",
"rxjs": "^7.8.1",
"shell-quote": "^1.8.1",
"sprintf-js": "^1.1.3",
"throttle-debounce": "^5.0.2",
"tinycolor2": "^1.6.0",
"use-device-pixel-ratio": "^1.1.2",
"winston": "^3.14.2"
},
"packageManager": "yarn@4.4.1"
"name": "thenextwave",
"author": {
"name": "Command Line Inc",
"email": "info@commandline.dev"
},
"productName": "TheNextWave",
"description": "An Open-Source, AI-Native, Terminal Built for Seamless Workflows",
"license": "Apache-2.0",
"version": "0.1.12",
"homepage": "https://waveterm.dev",
"build": {
"appId": "dev.commandline.thenextwave"
},
"private": true,
"main": "./dist/main/index.js",
"type": "module",
"scripts": {
"dev": "electron-vite dev",
"start": "electron-vite preview",
"build:dev": "electron-vite build --mode development",
"build:prod": "electron-vite build --mode production",
"storybook": "storybook dev -p 6006 --no-open",
"build-storybook": "storybook build",
"coverage": "vitest run --coverage",
"test": "vitest",
"postinstall": "electron-builder install-app-deps"
},
"devDependencies": {
"@chromatic-com/storybook": "^2.0.2",
"@eslint/js": "^9.10.0",
"@rollup/plugin-node-resolve": "^15.2.3",
"@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",
"@types/node": "^22.5.4",
"@types/papaparse": "^5",
"@types/pngjs": "^6.0.5",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@types/shell-quote": "^1",
"@types/sprintf-js": "^1",
"@types/throttle-debounce": "^5",
"@types/tinycolor2": "^1",
"@types/uuid": "^10.0.0",
"@vitejs/plugin-react-swc": "^3.7.0",
"@vitest/coverage-istanbul": "^2.1.1",
"electron": "^32.1.0",
"electron-builder": "^25.0.5",
"electron-vite": "^2.3.0",
"eslint": "^9.10.0",
"eslint-config-prettier": "^9.1.0",
"less": "^4.2.0",
"prettier": "^3.3.3",
"prettier-plugin-jsdoc": "^1.3.0",
"prettier-plugin-organize-imports": "^4.0.0",
"rollup-plugin-flow": "^1.1.1",
"storybook": "^8.3.0",
"ts-node": "^10.9.2",
"tslib": "^2.6.3",
"tsx": "^4.19.1",
"typescript": "^5.6.2",
"typescript-eslint": "^8.5.0",
"vite": "^5.4.5",
"vite-plugin-image-optimizer": "^1.1.8",
"vite-plugin-static-copy": "^1.0.6",
"vite-plugin-svgr": "^4.2.0",
"vite-tsconfig-paths": "^5.0.1",
"vitest": "^2.1.1"
},
"dependencies": {
"@monaco-editor/loader": "^1.4.0",
"@monaco-editor/react": "^4.6.0",
"@observablehq/plot": "^0.6.16",
"@react-hook/resize-observer": "^2.0.2",
"@table-nav/core": "^0.0.7",
"@table-nav/react": "^0.0.7",
"@tanstack/react-table": "^8.20.5",
"@types/color": "^3.0.6",
"@xterm/addon-fit": "^0.10.0",
"@xterm/addon-serialize": "^0.13.0",
"@xterm/addon-web-links": "^0.11.0",
"@xterm/addon-webgl": "^0.18.0",
"@xterm/xterm": "^5.5.0",
"base64-js": "^1.5.1",
"clsx": "^2.1.1",
"color": "^4.2.3",
"css-tree": "^2.3.1",
"dayjs": "^1.11.13",
"debug": "^4.3.7",
"electron-updater": "6.3.4",
"fast-average-color": "^9.4.0",
"htl": "^0.3.1",
"html-to-image": "^1.11.11",
"immer": "^10.1.1",
"jotai": "^2.9.3",
"monaco-editor": "^0.51.0",
"overlayscrollbars": "^2.10.0",
"overlayscrollbars-react": "^0.5.6",
"papaparse": "^5.4.1",
"pngjs": "^7.0.0",
"react": "^18.3.1",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^18.3.1",
"react-frame-component": "^5.2.7",
"react-gauge-chart": "^0.5.1",
"react-markdown": "^9.0.1",
"rehype-highlight": "^7.0.0",
"rehype-raw": "^7.0.0",
"rehype-sanitize": "^6.0.0",
"rehype-slug": "^6.0.0",
"remark-flexible-toc": "^1.1.1",
"remark-gfm": "^4.0.0",
"rxjs": "^7.8.1",
"shell-quote": "^1.8.1",
"sprintf-js": "^1.1.3",
"throttle-debounce": "^5.0.2",
"tinycolor2": "^1.6.0",
"use-device-pixel-ratio": "^1.1.2",
"winston": "^3.14.2"
},
"packageManager": "yarn@4.4.1"
}

2850
yarn.lock
View File

File diff suppressed because it is too large Load Diff