github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/StarredResourceBar.stories.tsx (about)

     1  import { Story } from "@storybook/react"
     2  import React from "react"
     3  import StarredResourceBar, { ResourceNameAndStatus } from "./StarredResourceBar"
     4  import { Color } from "./style-helpers"
     5  import { ResourceStatus } from "./types"
     6  
     7  export default {
     8    title: "New UI/Shared/StarredResourceBar",
     9    decorators: [
    10      // make the pane bg black so that the menu bg stands out
    11      (Story: any) => (
    12        <div style={{ backgroundColor: Color.black, height: "300px" }}>
    13          <Story />
    14        </div>
    15      ),
    16    ],
    17  }
    18  
    19  type StoryProps = {
    20    resources: ResourceNameAndStatus[]
    21    selectedResource?: string
    22  }
    23  const Template: Story<StoryProps> = (args) => (
    24    <StarredResourceBar
    25      resources={args.resources}
    26      unstar={(n) => {}}
    27      selectedResource={args.selectedResource}
    28    />
    29  )
    30  
    31  export const OneItem = Template.bind({})
    32  OneItem.args = {
    33    resources: [{ name: "foo", status: ResourceStatus.Healthy }],
    34  }
    35  
    36  export const ThreeItems = Template.bind({})
    37  ThreeItems.args = {
    38    resources: Array(3).fill({ name: "foo", status: ResourceStatus.Healthy }),
    39  }
    40  
    41  export const TwentyItems = Template.bind({})
    42  TwentyItems.args = {
    43    resources: Array(20).fill({ name: "foobar", status: ResourceStatus.Healthy }),
    44  }
    45  
    46  export const LongName = Template.bind({})
    47  LongName.args = {
    48    resources: [
    49      {
    50        name: "supercalifragilisticexpialidocious",
    51        status: ResourceStatus.Unhealthy,
    52      },
    53    ],
    54  }
    55  
    56  export const MixedNames = Template.bind({})
    57  MixedNames.args = {
    58    resources: [
    59      { name: "max-object-detected-name", status: ResourceStatus.Healthy },
    60      { name: "muxer", status: ResourceStatus.Unhealthy },
    61      { name: "benchmark-muxer", status: ResourceStatus.Healthy },
    62      { name: "benchmark-all", status: ResourceStatus.Healthy },
    63      { name: "recompile-storage", status: ResourceStatus.Unhealthy },
    64      { name: "benchmark-rectangle-test", status: ResourceStatus.Healthy },
    65      { name: "benchmark-storage", status: ResourceStatus.Healthy },
    66      { name: "(Tiltfile)", status: ResourceStatus.Pending },
    67      { name: "recompile-rectangle-test", status: ResourceStatus.Unhealthy },
    68      { name: "SillyOne test", status: ResourceStatus.Unhealthy },
    69      { name: "AttackOfTheSilly test", status: ResourceStatus.Unhealthy },
    70    ],
    71    selectedResource: "benchmark-muxer",
    72  }
    73  
    74  export const PendingActive = Template.bind({})
    75  PendingActive.args = {
    76    resources: [{ name: "foo", status: ResourceStatus.Pending }],
    77    selectedResource: "foo",
    78  }
    79  
    80  export const BuildingActive = Template.bind({})
    81  BuildingActive.args = {
    82    resources: [{ name: "foo", status: ResourceStatus.Building }],
    83    selectedResource: "foo",
    84  }