refactor: Add components for styling forms (coder#1169)

presleyp · web-flow · commit 23a1a4dc400a · 2022-04-26T19:45:48.000-04:00
* Add FormFooter

* Add FullPageForm

* Lint

* Make detail optional

* Use Language
diff --git a/site/src/components/FormFooter/FormFooter.stories.tsx b/site/src/components/FormFooter/FormFooter.stories.tsx
@@ -0,0 +1,29 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { FormFooter, FormFooterProps } from "./FormFooter"
+
+export default {
+  title: "components/FormFooter",
+  component: FormFooter,
+  argTypes: {
+    onCancel: { action: "cancel" },
+  },
+} as ComponentMeta<typeof FormFooter>
+
+const Template: Story<FormFooterProps> = (args) => <FormFooter {...args} />
+
+export const Ready = Template.bind({})
+Ready.args = {
+  isLoading: false,
+}
+
+export const Custom = Template.bind({})
+Custom.args = {
+  isLoading: false,
+  submitLabel: "Create",
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+  isLoading: true,
+}
diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
@@ -0,0 +1,46 @@
+import Button from "@material-ui/core/Button"
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import { LoadingButton } from "../LoadingButton/LoadingButton"
+
+const Language = {
+  cancelLabel: "Cancel",
+  defaultSubmitLabel: "Submit",
+}
+
+export interface FormFooterProps {
+  onCancel: () => void
+  isLoading: boolean
+  submitLabel?: string
+}
+
+const useStyles = makeStyles(() => ({
+  footer: {
+    display: "flex",
+    flex: "0",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  button: {
+    margin: "1em",
+  },
+}))
+
+export const FormFooter: React.FC<FormFooterProps> = ({
+  onCancel,
+  isLoading,
+  submitLabel = Language.defaultSubmitLabel,
+}) => {
+  const styles = useStyles()
+  return (
+    <div className={styles.footer}>
+      <Button className={styles.button} onClick={onCancel} variant="outlined">
+        {Language.cancelLabel}
+      </Button>
+      <LoadingButton loading={isLoading} className={styles.button} variant="contained" color="primary" type="submit">
+        {submitLabel}
+      </LoadingButton>
+    </div>
+  )
+}
diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx
@@ -0,0 +1,35 @@
+import TextField from "@material-ui/core/TextField"
+import { action } from "@storybook/addon-actions"
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { FormFooter } from "../FormFooter/FormFooter"
+import { Stack } from "../Stack/Stack"
+import { FullPageForm, FullPageFormProps } from "./FullPageForm"
+
+export default {
+  title: "components/FullPageForm",
+  component: FullPageForm,
+} as ComponentMeta<typeof FullPageForm>
+
+const Template: Story<FullPageFormProps> = (args) => (
+  <FullPageForm {...args}>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+      }}
+    >
+      <Stack>
+        <TextField fullWidth variant="outlined" label="Field 1" name="field1" />
+        <TextField fullWidth variant="outlined" label="Field 2" name="field2" />
+        <FormFooter isLoading={false} onCancel={action("cancel")} />
+      </Stack>
+    </form>
+  </FullPageForm>
+)
+
+export const Example = Template.bind({})
+Example.args = {
+  title: "My Form",
+  detail: "Lorem ipsum dolor",
+  onCancel: action("cancel"),
+}
diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/site/src/components/FullPageForm/FullPageForm.tsx
@@ -0,0 +1,32 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import { FormCloseButton } from "../FormCloseButton/FormCloseButton"
+import { FormTitle } from "../FormTitle/FormTitle"
+
+export interface FullPageFormProps {
+  title: string
+  detail?: React.ReactNode
+  onCancel: () => void
+}
+
+const useStyles = makeStyles(() => ({
+  root: {
+    maxWidth: "1380px",
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+}))
+
+export const FullPageForm: React.FC<FullPageFormProps> = ({ title, detail, onCancel, children }) => {
+  const styles = useStyles()
+  return (
+    <main className={styles.root}>
+      <FormTitle title={title} detail={detail} />
+      <FormCloseButton onClose={onCancel} />
+
+      {children}
+    </main>
+  )
+}
