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
85
86
87
88
89
90
91
92
93
94
95
96
97

import React from "react"
import { MemoryRouter } from "react-router"
import styled from "styled-components"
import { ApiButton } from "./ApiButton"
import { OverviewButtonMixin } from "./OverviewButton"
import { TiltSnackbarProvider } from "./Snackbar"
import {
  oneUIButton,
  textFieldForUIButton,
  boolFieldForUIButton,
} from "./testdata"
import { UIInputSpec } from "./types"

export default {
  title: "New UI/Shared/ApiButton",
  decorators: [
    (Story: any) => (
      <MemoryRouter initialEntries={["/"]}>
        <TiltSnackbarProvider>
          <Story />
        </TiltSnackbarProvider>
      </MemoryRouter>
    ),
  ],
}

const StyledButton = styled(ApiButton)`
  button {
    ${OverviewButtonMixin};
  }
`

export const SimpleButton = () => {
  const button = oneUIButton({})
  return <StyledButton uiButton={button} />
}

export const RequiresConfirmation = () => {
  const button = oneUIButton({ requiresConfirmation: true })
  return <StyledButton uiButton={button} />
}

export const ThreeTextInputs = () => {
  const inputs: UIInputSpec[] = [1, 2, 3].map((i) =>
    textFieldForUIButton(`text${i}`)
  )
  const button = oneUIButton({ inputSpecs: inputs })
  return <StyledButton uiButton={button} />
}

export const TextInputOptions = () => {
  const button = oneUIButton({
    inputSpecs: [
      textFieldForUIButton("text1", undefined, "placeholder"),
      textFieldForUIButton("text2", "default value"),
    ],
  })
  return <StyledButton uiButton={button} />
}

export const ButtonWithModal = () => {
  const button = oneUIButton({
    buttonText: "Deploy with Modal",
    inputSpecs: [
      textFieldForUIButton("environment", "dev", "dev, staging, prod"),
      textFieldForUIButton("replicas", "1", "1-10"),
    ],
  })
  return <StyledButton uiButton={button} />
}

export const ModalWithManyInputs = () => {
  const button = oneUIButton({
    buttonText: "Deploy Complex App",
    inputSpecs: [
      textFieldForUIButton(
        "environment",
        "dev",
        "Environment (dev/staging/prod)"
      ),
      textFieldForUIButton("replicas", "3", "Number of replicas"),
      textFieldForUIButton("version", "latest", "Image version"),
      textFieldForUIButton("namespace", "default", "Kubernetes namespace"),
      boolFieldForUIButton("enable_debug", false),
    ],
  })
  return <StyledButton uiButton={button} />
}

export const ModalWithConfirmation = () => {
  const button = oneUIButton({
    buttonText: "Delete Resources",
    requiresConfirmation: true,
    inputSpecs: [textFieldForUIButton("reason", "", "Reason for deletion")],
  })
  return <StyledButton uiButton={button} />
}