// 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) =>
{data}
; function newLayoutTreeStateAtom(node: LayoutNode): WritableLayoutTreeStateAtom { return atom({ rootNode: node } as LayoutTreeState); } function renderContent(nodeModel: NodeModel) { return (
{renderTestData(nodeModel.blockId)}
); } 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; export default meta; type Story = StoryObj; export const Basic: Story = { args: { layoutTreeStateAtom: newLayoutTreeStateAtom( newLayoutNode(undefined, undefined, undefined, { blockId: "Hello world!" }) ), }, }; export const More: Story = { args: { layoutTreeStateAtom: newLayoutTreeStateAtom( 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(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(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 = { type: LayoutTreeActionType.InsertNode, node: newNode, }; dispatch(insertNodeAction); setNumAddedNodes(numAddedNodes + 1); }; return (
} contents={meta.args.contents} />
); }, };