migrate formik to react-hook-form

website/package-lock.json

@@ -29,7 +29,6 @@
         "eslint-config-next": "13.0.6",
         "eslint-plugin-simple-import-sort": "^8.0.0",
         "focus-visible": "^5.2.0",
-        "formik": "^2.2.9",
         "framer-motion": "^6.5.1",
         "install": "^0.13.0",
         "next": "13.0.6",
@@ -20305,47 +20304,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/formik": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
-      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://opencollective.com/formik"
-        }
-      ],
-      "dependencies": {
-        "deepmerge": "^2.1.1",
-        "hoist-non-react-statics": "^3.3.0",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "react-fast-compare": "^2.0.1",
-        "tiny-warning": "^1.0.2",
-        "tslib": "^1.10.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/formik/node_modules/deepmerge": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/formik/node_modules/react-fast-compare": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
-      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
-    },
-    "node_modules/formik/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -26444,12 +26402,8 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
-    "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -35502,11 +35456,6 @@
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
       "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
     },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "node_modules/tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -52945,37 +52894,6 @@
         "mime-types": "^2.1.12"
       }
     },
-    "formik": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
-      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
-      "requires": {
-        "deepmerge": "^2.1.1",
-        "hoist-non-react-statics": "^3.3.0",
-        "lodash": "^4.17.21",
-        "lodash-es": "^4.17.21",
-        "react-fast-compare": "^2.0.1",
-        "tiny-warning": "^1.0.2",
-        "tslib": "^1.10.0"
-      },
-      "dependencies": {
-        "deepmerge": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
-        },
-        "react-fast-compare": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
-          "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
-        },
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -57590,12 +57508,8 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
-    "lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -64287,11 +64201,6 @@
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
       "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
     },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",

website/package.json

@@ -46,7 +46,6 @@
     "eslint-config-next": "13.0.6",
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "focus-visible": "^5.2.0",
-    "formik": "^2.2.9",
     "framer-motion": "^6.5.1",
     "install": "^0.13.0",
     "next": "13.0.6",

website/src/pages/admin/manage_user/[id].tsx

@@ -1,5 +1,4 @@
-import { Button, Container, FormControl, FormLabel, Input, Stack, useToast } from "@chakra-ui/react";
-import { Field, Form, Formik } from "formik";
+import { Button, Card, CardBody, Container, FormControl, FormLabel, Input, Stack, useToast } from "@chakra-ui/react";
 import { InferGetServerSidePropsType } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
@@ -7,7 +6,7 @@ import { useSession } from "next-auth/react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { getAdminLayout } from "src/components/Layout";
-import { RoleSelect } from "src/components/RoleSelect";
+import { Role, RoleSelect } from "src/components/RoleSelect";
 import { UserMessagesCell } from "src/components/UserMessagesCell";
 import { post } from "src/lib/api";
 import { oasstApiClient } from "src/lib/oasst_api_client";
@@ -19,7 +18,7 @@ interface UserForm {
   id: string;
   auth_method: string;
   display_name: string;
-  role: string;
+  role: Role;
   notes: string;
 }
 
@@ -63,7 +62,7 @@ const ManageUser = ({ user }: InferGetServerSidePropsType<typeof getServerSidePr
     },
   });
 
-  const { register } = useForm<UserForm>({
+  const { register, handleSubmit } = useForm<UserForm>({
     defaultValues: user,
   });
 
@@ -77,55 +76,31 @@ const ManageUser = ({ user }: InferGetServerSidePropsType<typeof getServerSidePr
         />
       </Head>
       <Stack gap="4">
-        <Container className="oa-basic-theme">
-          <Formik
-            initialValues={user}
-            onSubmit={(values) => {
-              trigger(values);
-            }}
-          >
-            <Form>
-              <Field name="user_id" type="hidden" />
-              <Field name="id" type="hidden" />
-              <Field name="auth_method" type="hidden" />
-              <Field name="display_name">
-                {({ field }) => (
-                  <FormControl>
-                    <FormLabel>Display Name</FormLabel>
-                    <Input {...field} isDisabled />
-                  </FormControl>
-                )}
-              </Field>
-              <Field name="role">
-                {({ field }) => (
-                  <FormControl>
-                    <FormLabel>Role</FormLabel>
-                    <RoleSelect {...field}></RoleSelect>
-                  </FormControl>
-                )}
-              </Field>
-              <Field name="notes">
-                {({ field }) => (
-                  <FormControl>
-                    <FormLabel>Notes</FormLabel>
-                    <Input {...field} />
-                  </FormControl>
-                )}
-              </Field>
-              <Button mt={4} type="submit">
-                Update
-              </Button>
-            </Form>
-          </Formik>
-          <form>
-            <input type="hidden" readOnly {...register("user_id")}></input>
-            <input type="hidden" readOnly {...register("id")}></input>
-            <input type="hidden" readOnly {...register("auth_method")}></input>
-            <FormControl>
-              <FormLabel>Display Name</FormLabel>
-              <Input {...register("display_name")} isDisabled />
-            </FormControl>
-          </form>
+        <Container>
+          <Card>
+            <CardBody>
+              <form onSubmit={handleSubmit((data) => trigger(data))}>
+                <input type="hidden" {...register("user_id")}></input>
+                <input type="hidden" {...register("id")}></input>
+                <input type="hidden" {...register("auth_method")}></input>
+                <FormControl>
+                  <FormLabel>Display Name</FormLabel>
+                  <Input {...register("display_name")} isDisabled />
+                </FormControl>
+                <FormControl>
+                  <FormLabel>Role</FormLabel>
+                  <RoleSelect {...register("role")}></RoleSelect>
+                </FormControl>
+                <FormControl>
+                  <FormLabel>Notes</FormLabel>
+                  <Input {...register("notes")} />
+                </FormControl>
+                <Button mt={4} type="submit">
+                  Update
+                </Button>
+              </form>
+            </CardBody>
+          </Card>
         </Container>
         <UserMessagesCell path={`/api/admin/user_messages?user=${user.user_id}`} />
       </Stack>
@@ -146,7 +121,7 @@ export async function getServerSideProps({ query }) {
   });
   const user = {
     ...backend_user,
-    role: local_user?.role || "general",
+    role: (local_user?.role || "general") as Role,
   };
   return {
     props: {

website/src/styles/Theme/components/Card.ts

@@ -0,0 +1,27 @@
+import { cardAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(cardAnatomy.keys);
+
+export const cardTheme = defineMultiStyleConfig({
+  baseStyle: definePartsStyle(({ colorMode }) => {
+    const isLightMode = colorMode === "light";
+    return {
+      container: {
+        backgroundColor: isLightMode ? "white" : "gray.700",
+      },
+      header: {},
+      body: {
+        padding: 6,
+      },
+      footer: {},
+    };
+  }),
+  variants: {
+    elevated: definePartsStyle({
+      container: {
+        borderRadius: "xl",
+      },
+    }),
+  },
+});

website/src/styles/Theme/index.ts

@@ -2,6 +2,7 @@ import { type ThemeConfig, extendTheme } from "@chakra-ui/react";
 import { Styles } from "@chakra-ui/theme-tools";
 
 import { colors } from "./colors";
+import { cardTheme } from "./components/Card";
 import { containerTheme } from "./components/Container";
 
 const config: ThemeConfig = {
@@ -12,6 +13,7 @@ const config: ThemeConfig = {
 
 const components = {
   Container: containerTheme,
+  Card: cardTheme,
 };
 
 const breakpoints = {