github.com/tilt-dev/tilt@v0.36.0/web/src/ApiButton.stories.tsx (about)

     1  import React from "react"
     2  import { MemoryRouter } from "react-router"
     3  import styled from "styled-components"
     4  import { ApiButton } from "./ApiButton"
     5  import { OverviewButtonMixin } from "./OverviewButton"
     6  import { TiltSnackbarProvider } from "./Snackbar"
     7  import {
     8    oneUIButton,
     9    textFieldForUIButton,
    10    boolFieldForUIButton,
    11  } from "./testdata"
    12  import { UIInputSpec } from "./types"
    13  
    14  export default {
    15    title: "New UI/Shared/ApiButton",
    16    decorators: [
    17      (Story: any) => (
    18        <MemoryRouter initialEntries={["/"]}>
    19          <TiltSnackbarProvider>
    20            <Story />
    21          </TiltSnackbarProvider>
    22        </MemoryRouter>
    23      ),
    24    ],
    25  }
    26  
    27  const StyledButton = styled(ApiButton)`
    28    button {
    29      ${OverviewButtonMixin};
    30    }
    31  `
    32  
    33  export const SimpleButton = () => {
    34    const button = oneUIButton({})
    35    return <StyledButton uiButton={button} />
    36  }
    37  
    38  export const RequiresConfirmation = () => {
    39    const button = oneUIButton({ requiresConfirmation: true })
    40    return <StyledButton uiButton={button} />
    41  }
    42  
    43  export const ThreeTextInputs = () => {
    44    const inputs: UIInputSpec[] = [1, 2, 3].map((i) =>
    45      textFieldForUIButton(`text${i}`)
    46    )
    47    const button = oneUIButton({ inputSpecs: inputs })
    48    return <StyledButton uiButton={button} />
    49  }
    50  
    51  export const TextInputOptions = () => {
    52    const button = oneUIButton({
    53      inputSpecs: [
    54        textFieldForUIButton("text1", undefined, "placeholder"),
    55        textFieldForUIButton("text2", "default value"),
    56      ],
    57    })
    58    return <StyledButton uiButton={button} />
    59  }
    60  
    61  export const ButtonWithModal = () => {
    62    const button = oneUIButton({
    63      buttonText: "Deploy with Modal",
    64      inputSpecs: [
    65        textFieldForUIButton("environment", "dev", "dev, staging, prod"),
    66        textFieldForUIButton("replicas", "1", "1-10"),
    67      ],
    68    })
    69    return <StyledButton uiButton={button} />
    70  }
    71  
    72  export const ModalWithManyInputs = () => {
    73    const button = oneUIButton({
    74      buttonText: "Deploy Complex App",
    75      inputSpecs: [
    76        textFieldForUIButton(
    77          "environment",
    78          "dev",
    79          "Environment (dev/staging/prod)"
    80        ),
    81        textFieldForUIButton("replicas", "3", "Number of replicas"),
    82        textFieldForUIButton("version", "latest", "Image version"),
    83        textFieldForUIButton("namespace", "default", "Kubernetes namespace"),
    84        boolFieldForUIButton("enable_debug", false),
    85      ],
    86    })
    87    return <StyledButton uiButton={button} />
    88  }
    89  
    90  export const ModalWithConfirmation = () => {
    91    const button = oneUIButton({
    92      buttonText: "Delete Resources",
    93      requiresConfirmation: true,
    94      inputSpecs: [textFieldForUIButton("reason", "", "Reason for deletion")],
    95    })
    96    return <StyledButton uiButton={button} />
    97  }