Add CreateGroupPage stories

BrunoQuaresma · BrunoQuaresma · commit 20670f1cae6c · 2022-10-06T14:16:18.000Z
diff --git a/site/src/pages/GroupsPage/CreateGroupPage.tsx b/site/src/pages/GroupsPage/CreateGroupPage.tsx
@@ -1,22 +1,11 @@
-import TextField from "@material-ui/core/TextField"
 import { useMachine } from "@xstate/react"
-import { CreateGroupRequest } from "api/typesGenerated"
-import { FormFooter } from "components/FormFooter/FormFooter"
-import { FullPageForm } from "components/FullPageForm/FullPageForm"
-import { Margins } from "components/Margins/Margins"
-import { useFormik } from "formik"
 import { useOrganizationId } from "hooks/useOrganizationId"
 import React from "react"
 import { Helmet } from "react-helmet-async"
 import { useNavigate } from "react-router-dom"
-import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
 import { pageTitle } from "util/page"
 import { createGroupMachine } from "xServices/groups/createGroupXService"
-import * as Yup from "yup"
-
-const validationSchema = Yup.object({
-  name: nameValidator("Name"),
-})
+import CreateGroupPageView from "./CreateGroupPageView"
 
 export const CreateGroupPage: React.FC = () => {
   const navigate = useNavigate()
@@ -32,42 +21,22 @@ export const CreateGroupPage: React.FC = () => {
     },
   })
   const { createGroupFormErrors } = createState.context
-  const form = useFormik<CreateGroupRequest>({
-    initialValues: {
-      name: "",
-    },
-    validationSchema,
-    onSubmit: (data) => {
-      sendCreateEvent({
-        type: "CREATE",
-        data,
-      })
-    },
-  })
-  const getFieldHelpers = getFormHelpers<CreateGroupRequest>(form, createGroupFormErrors)
-  const onCancel = () => navigate("/groups")
 
   return (
     <>
       <Helmet>
         <title>{pageTitle("Create Group")}</title>
       </Helmet>
-      <Margins>
-        <FullPageForm title="Create group" onCancel={onCancel}>
-          <form onSubmit={form.handleSubmit}>
-            <TextField
-              {...getFieldHelpers("name")}
-              onChange={onChangeTrimmed(form)}
-              autoComplete="name"
-              autoFocus
-              fullWidth
-              label="Name"
-              variant="outlined"
-            />
-            <FormFooter onCancel={onCancel} isLoading={createState.matches("creatingGroup")} />
-          </form>
-        </FullPageForm>
-      </Margins>
+      <CreateGroupPageView
+        onSubmit={(data) => {
+          sendCreateEvent({
+            type: "CREATE",
+            data,
+          })
+        }}
+        formErrors={createGroupFormErrors}
+        isLoading={createState.matches("creatingGroup")}
+      />
     </>
   )
 }
diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.stories.tsx
@@ -0,0 +1,14 @@
+import { Story } from "@storybook/react"
+import { CreateGroupPageView, CreateGroupPageViewProps } from "./CreateGroupPageView"
+
+export default {
+  title: "pages/CreateGroupPageView",
+  component: CreateGroupPageView,
+}
+
+const Template: Story<CreateGroupPageViewProps> = (args: CreateGroupPageViewProps) => (
+  <CreateGroupPageView {...args} />
+)
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/pages/GroupsPage/CreateGroupPageView.tsx b/site/src/pages/GroupsPage/CreateGroupPageView.tsx
@@ -0,0 +1,57 @@
+import TextField from "@material-ui/core/TextField"
+import { CreateGroupRequest } from "api/typesGenerated"
+import { FormFooter } from "components/FormFooter/FormFooter"
+import { FullPageForm } from "components/FullPageForm/FullPageForm"
+import { Margins } from "components/Margins/Margins"
+import { useFormik } from "formik"
+import React from "react"
+import { useNavigate } from "react-router-dom"
+import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
+import * as Yup from "yup"
+
+const validationSchema = Yup.object({
+  name: nameValidator("Name"),
+})
+
+export type CreateGroupPageViewProps = {
+  onSubmit: (data: CreateGroupRequest) => void
+  formErrors: unknown | undefined
+  isLoading: boolean
+}
+
+export const CreateGroupPageView: React.FC<CreateGroupPageViewProps> = ({
+  onSubmit,
+  formErrors,
+  isLoading,
+}) => {
+  const navigate = useNavigate()
+  const form = useFormik<CreateGroupRequest>({
+    initialValues: {
+      name: "",
+    },
+    validationSchema,
+    onSubmit,
+  })
+  const getFieldHelpers = getFormHelpers<CreateGroupRequest>(form, formErrors)
+  const onCancel = () => navigate("/groups")
+
+  return (
+    <Margins>
+      <FullPageForm title="Create group" onCancel={onCancel}>
+        <form onSubmit={form.handleSubmit}>
+          <TextField
+            {...getFieldHelpers("name")}
+            onChange={onChangeTrimmed(form)}
+            autoComplete="name"
+            autoFocus
+            fullWidth
+            label="Name"
+            variant="outlined"
+          />
+          <FormFooter onCancel={onCancel} isLoading={isLoading} />
+        </form>
+      </FullPageForm>
+    </Margins>
+  )
+}
+export default CreateGroupPageView
