starling-devex 0.1.2

Starling: a local dev orchestrator with a central daemon, shared named-URL proxy, and a k9s-style TUI (a Rust port of Tilt + portless)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

import { Story } from "@storybook/react"
import React from "react"
import StarredResourceBar, { ResourceNameAndStatus } from "./StarredResourceBar"
import { Color } from "./style-helpers"
import { ResourceStatus } from "./types"

export default {
  title: "New UI/Shared/StarredResourceBar",
  decorators: [
    // make the pane bg black so that the menu bg stands out
    (Story: any) => (
      <div style={{ backgroundColor: Color.black, height: "300px" }}>
        <Story />
      </div>
    ),
  ],
}

type StoryProps = {
  resources: ResourceNameAndStatus[]
  selectedResource?: string
}
const Template: Story<StoryProps> = (args) => (
  <StarredResourceBar
    resources={args.resources}
    unstar={(n) => {}}
    selectedResource={args.selectedResource}
  />
)

export const OneItem = Template.bind({})
OneItem.args = {
  resources: [{ name: "foo", status: ResourceStatus.Healthy }],
}

export const ThreeItems = Template.bind({})
ThreeItems.args = {
  resources: Array(3).fill({ name: "foo", status: ResourceStatus.Healthy }),
}

export const TwentyItems = Template.bind({})
TwentyItems.args = {
  resources: Array(20).fill({ name: "foobar", status: ResourceStatus.Healthy }),
}

export const LongName = Template.bind({})
LongName.args = {
  resources: [
    {
      name: "supercalifragilisticexpialidocious",
      status: ResourceStatus.Unhealthy,
    },
  ],
}

export const MixedNames = Template.bind({})
MixedNames.args = {
  resources: [
    { name: "max-object-detected-name", status: ResourceStatus.Healthy },
    { name: "muxer", status: ResourceStatus.Unhealthy },
    { name: "benchmark-muxer", status: ResourceStatus.Healthy },
    { name: "benchmark-all", status: ResourceStatus.Healthy },
    { name: "recompile-storage", status: ResourceStatus.Unhealthy },
    { name: "benchmark-rectangle-test", status: ResourceStatus.Healthy },
    { name: "benchmark-storage", status: ResourceStatus.Healthy },
    { name: "(Tiltfile)", status: ResourceStatus.Pending },
    { name: "recompile-rectangle-test", status: ResourceStatus.Unhealthy },
    { name: "SillyOne test", status: ResourceStatus.Unhealthy },
    { name: "AttackOfTheSilly test", status: ResourceStatus.Unhealthy },
  ],
  selectedResource: "benchmark-muxer",
}

export const PendingActive = Template.bind({})
PendingActive.args = {
  resources: [{ name: "foo", status: ResourceStatus.Pending }],
  selectedResource: "foo",
}

export const BuildingActive = Template.bind({})
BuildingActive.args = {
  resources: [{ name: "foo", status: ResourceStatus.Building }],
  selectedResource: "foo",
}