github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/dashboards/layout/Container/index.stories.tsx (about)

     1  import Container from "./index";
     2  import { PanelStoryDecorator } from "../../../../utils/storybook";
     3  
     4  const story = {
     5    title: "Layout/Container",
     6    component: Container,
     7  };
     8  
     9  export default story;
    10  
    11  const Template = (args) => (
    12    <PanelStoryDecorator
    13      definition={args.definition}
    14      panels={args.panels}
    15      panelType="container"
    16    />
    17  );
    18  
    19  export const Empty = Template.bind({});
    20  // @ts-ignore
    21  Empty.args = {
    22    definition: {},
    23  };
    24  
    25  export const Basic = Template.bind({});
    26  const textPanel = {
    27    name: "text.markdown",
    28    panel_type: "text",
    29    properties: { value: "## Basic Dashboard" },
    30    status: "complete",
    31  };
    32  // @ts-ignore
    33  Basic.args = {
    34    definition: {
    35      children: [textPanel],
    36      panel_type: "container",
    37      title: "Basic Container",
    38    },
    39    panels: {
    40      [textPanel.name]: textPanel,
    41    },
    42  };
    43  
    44  export const TwoColumn = Template.bind({});
    45  const leftContainer = {
    46    name: "container.left",
    47    panel_type: "container",
    48    width: 6,
    49  };
    50  const rightContainer = {
    51    name: "container.right",
    52    panel_type: "container",
    53    width: 6,
    54  };
    55  const leftTopTextPanel = {
    56    name: "left.top.text.markdown",
    57    panel_type: "text",
    58    properties: { value: "## Column 1 Top" },
    59    status: "complete",
    60  };
    61  const leftBottomTextPanel = {
    62    name: "left.bottom.text.markdown",
    63    panel_type: "text",
    64    properties: { value: "## Column 1 Bottom" },
    65    status: "complete",
    66  };
    67  const rightTopTextPanel = {
    68    name: "right.top.text.markdown",
    69    panel_type: "text",
    70    properties: { value: "## Column 2 Top" },
    71    status: "complete",
    72  };
    73  const rightBottomTextPanel = {
    74    name: "right.bottom.text.markdown",
    75    panel_type: "text",
    76    properties: { value: "## Column 2 Bottom" },
    77    status: "complete",
    78  };
    79  // @ts-ignore
    80  TwoColumn.args = {
    81    definition: {
    82      children: [
    83        {
    84          ...leftContainer,
    85          children: [leftTopTextPanel, leftBottomTextPanel],
    86        },
    87        {
    88          ...rightContainer,
    89          children: [rightTopTextPanel, rightBottomTextPanel],
    90        },
    91      ],
    92    },
    93    panels: {
    94      [leftContainer.name]: leftContainer,
    95      [rightContainer.name]: rightContainer,
    96      [leftTopTextPanel.name]: leftTopTextPanel,
    97      [leftBottomTextPanel.name]: leftBottomTextPanel,
    98      [rightTopTextPanel.name]: rightTopTextPanel,
    99      [rightBottomTextPanel.name]: rightBottomTextPanel,
   100    },
   101  };