waveterm/backup
0
0
Fork 0
mirror of https://github.com/wavetermdev/backup.git synced 2026-08-05 13:57:07 -07:00
Code Issues Packages Projects Releases Wiki Activity

Fix Storybook for TileLayout (#81)

Browse Source 
Fix typing of memoized TileLayout component, fix broken Vite config,
upgrade Storybook to latest.
This commit is contained in:
Evan Simkowitz
2024-06-26 12:22:27 -07:00
committed by GitHub
parent 0a8c97858c
commit 638883eef9
7 changed files with 408 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.storybook/main.ts
+1 -3
View File
@@ -12,9 +12,7 @@ const config: StorybookConfig = {
"@storybook/addon-interactions",
],
core: {
builder: "@storybook/builder-vite",
},
core: {},
framework: {
name: "@storybook/react-vite",
.storybook/preview.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ const preview: Preview = {
),
],
tags: ["autodocs"]
tags: ["autodocs", "autodocs"]
};
export default preview;
electron.vite.config.ts
+5 -6
View File
@@ -5,7 +5,6 @@ import react from "@vitejs/plugin-react";
import { defineConfig } from "electron-vite";
import { viteStaticCopy } from "vite-plugin-static-copy";
import tsconfigPaths from "vite-tsconfig-paths";
import path from "path";
export default defineConfig({
main: {
@@ -19,11 +18,11 @@ export default defineConfig({
outDir: "dist/main",
},
plugins: [tsconfigPaths()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./frontend"),
},
}
resolve: {
alias: {
"@": "frontend",
},
},
},
preload: {
root: ".",
frontend/faraday/lib/TileLayout.stories.tsx
+19 -13
View File
@@ -8,7 +8,7 @@ import { TileLayout } from "./TileLayout.jsx";
import { useState } from "react";
import { newLayoutTreeStateAtom, useLayoutTreeStateReducerAtom } from "./layoutAtom.js";
import { newLayoutNode } from "./layoutNode.js";
import { LayoutTreeActionType, LayoutTreeInsertNodeAction } from "./model.js";
import { LayoutTreeActionType, LayoutTreeInsertNodeAction, WritableLayoutTreeStateAtom } from "./model.js";
import "./tilelayout.stories.less";
import { FlexDirection } from "./utils.js";
@@ -26,17 +26,20 @@ const meta = {
name: "Hello world!",
})
),
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,
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
@@ -114,7 +117,10 @@ export const AddNode: Story = {
<div>
<button onClick={dispatchAddNode}>Add node</button>
</div>
<TileLayout layoutTreeStateAtom={addNodeAtom} renderContent={renderTestData} />
<TileLayout
layoutTreeStateAtom={addNodeAtom as WritableLayoutTreeStateAtom<TestData>}
contents={meta.args.contents}
/>
</div>
);
},
frontend/faraday/lib/TileLayout.tsx
+5 -3
View File
@@ -63,7 +63,7 @@ export interface TileLayoutContents<T> {
/**
* tabId this TileLayout is associated with
*/
tabId: string;
tabId?: string;
}
export interface TileLayoutProps<T> {
@@ -87,7 +87,7 @@ export interface TileLayoutProps<T> {
const DragPreviewWidth = 300;
const DragPreviewHeight = 300;
export const TileLayout = React.memo(<T,>({ layoutTreeStateAtom, contents, getCursorPoint }: TileLayoutProps<T>) => {
function TileLayoutComponent<T>({ layoutTreeStateAtom, contents, getCursorPoint }: TileLayoutProps<T>) {
const overlayContainerRef = useRef<HTMLDivElement>(null);
const displayContainerRef = useRef<HTMLDivElement>(null);
@@ -293,7 +293,9 @@ export const TileLayout = React.memo(<T,>({ layoutTreeStateAtom, contents, getCu
</div>
</Suspense>
);
});
}
export const TileLayout = React.memo(TileLayoutComponent) as typeof TileLayoutComponent;
interface DisplayNodesWrapperProps<T> {
/**
package.json
+85 -85
View File
@@ -1,87 +1,87 @@
{
"name": "thenextwave",
"private": true,
"version": "0.0.0",
"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"
},
"devDependencies": {
"@chromatic-com/storybook": "^1.5.0",
"@eslint/js": "^9.2.0",
"@storybook/addon-essentials": "^8.1.9",
"@storybook/addon-interactions": "^8.1.9",
"@storybook/addon-links": "^8.1.9",
"@storybook/blocks": "^8.1.9",
"@storybook/react": "^8.1.9",
"@storybook/react-vite": "^8.1.9",
"@storybook/test": "^8.1.9",
"@types/node": "^20.12.12",
"@types/papaparse": "^5",
"@types/react": "^18.3.2",
"@types/throttle-debounce": "^5",
"@types/uuid": "^9.0.8",
"@vitejs/plugin-react": "^4.3.0",
"@vitest/coverage-istanbul": "^1.6.0",
"electron-vite": "^2.2.0",
"eslint": "^9.2.0",
"eslint-config-prettier": "^9.1.0",
"less": "^4.2.0",
"prettier": "^3.2.5",
"prettier-plugin-jsdoc": "^1.3.0",
"prettier-plugin-organize-imports": "^3.2.4",
"storybook": "^8.1.9",
"ts-node": "^10.9.2",
"tslib": "^2.6.2",
"tsx": "^4.15.4",
"typescript": "^5.4.5",
"typescript-eslint": "^7.8.0",
"vite": "^5.0.0",
"vite-plugin-static-copy": "^1.0.5",
"vite-tsconfig-paths": "^4.3.2",
"vitest": "^1.6.0"
},
"dependencies": {
"@monaco-editor/loader": "^1.4.0",
"@monaco-editor/react": "^4.6.0",
"@observablehq/plot": "^0.6.14",
"@react-hook/resize-observer": "^2.0.1",
"@table-nav/core": "^0.0.7",
"@table-nav/react": "^0.0.7",
"@tanstack/react-table": "^8.17.3",
"@xterm/addon-fit": "^0.10.0",
"@xterm/addon-serialize": "^0.13.0",
"@xterm/xterm": "^5.5.0",
"base64-js": "^1.5.1",
"clsx": "^2.1.1",
"dayjs": "^1.11.11",
"electron": "^30.1.0",
"html-to-image": "^1.11.11",
"immer": "^10.1.1",
"jotai": "^2.8.0",
"monaco-editor": "^0.49.0",
"overlayscrollbars": "^2.8.3",
"papaparse": "^5.4.1",
"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",
"remark-gfm": "^4.0.0",
"rxjs": "^7.8.1",
"throttle-debounce": "^5.0.0",
"use-device-pixel-ratio": "^1.1.2",
"uuid": "^9.0.1"
},
"packageManager": "yarn@4.3.0"
"name": "thenextwave",
"private": true,
"version": "0.0.0",
"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"
},
"devDependencies": {
"@chromatic-com/storybook": "^1.5.0",
"@eslint/js": "^9.2.0",
"@storybook/addon-essentials": "^8.1.10",
"@storybook/addon-interactions": "^8.1.10",
"@storybook/addon-links": "^8.1.10",
"@storybook/blocks": "^8.1.10",
"@storybook/react": "^8.1.10",
"@storybook/react-vite": "^8.1.10",
"@storybook/test": "^8.1.10",
"@types/node": "^20.12.12",
"@types/papaparse": "^5",
"@types/react": "^18.3.2",
"@types/throttle-debounce": "^5",
"@types/uuid": "^9.0.8",
"@vitejs/plugin-react": "^4.3.0",
"@vitest/coverage-istanbul": "^1.6.0",
"electron-vite": "^2.2.0",
"eslint": "^9.2.0",
"eslint-config-prettier": "^9.1.0",
"less": "^4.2.0",
"prettier": "^3.2.5",
"prettier-plugin-jsdoc": "^1.3.0",
"prettier-plugin-organize-imports": "^3.2.4",
"storybook": "^8.1.10",
"ts-node": "^10.9.2",
"tslib": "^2.6.2",
"tsx": "^4.15.4",
"typescript": "^5.4.5",
"typescript-eslint": "^7.8.0",
"vite": "^5.0.0",
"vite-plugin-static-copy": "^1.0.5",
"vite-tsconfig-paths": "^4.3.2",
"vitest": "^1.6.0"
},
"dependencies": {
"@monaco-editor/loader": "^1.4.0",
"@monaco-editor/react": "^4.6.0",
"@observablehq/plot": "^0.6.14",
"@react-hook/resize-observer": "^2.0.1",
"@table-nav/core": "^0.0.7",
"@table-nav/react": "^0.0.7",
"@tanstack/react-table": "^8.17.3",
"@xterm/addon-fit": "^0.10.0",
"@xterm/addon-serialize": "^0.13.0",
"@xterm/xterm": "^5.5.0",
"base64-js": "^1.5.1",
"clsx": "^2.1.1",
"dayjs": "^1.11.11",
"electron": "^30.1.0",
"html-to-image": "^1.11.11",
"immer": "^10.1.1",
"jotai": "^2.8.0",
"monaco-editor": "^0.49.0",
"overlayscrollbars": "^2.8.3",
"papaparse": "^5.4.1",
"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",
"remark-gfm": "^4.0.0",
"rxjs": "^7.8.1",
"throttle-debounce": "^5.0.0",
"use-device-pixel-ratio": "^1.1.2",
"uuid": "^9.0.1"
},
"packageManager": "yarn@4.3.0"
}
yarn.lock
+292 -292
View File
File diff suppressed because it is too large Load Diff