From e464fcbbb238b9960c64da13f9781c7452a0338a Mon Sep 17 00:00:00 2001 From: notmd Date: Mon, 16 Jan 2023 17:54:21 +0700 Subject: [PATCH] migrate `formik` to `react-hook-form` --- website/package-lock.json | 99 +------------------- website/package.json | 1 - website/src/pages/admin/manage_user/[id].tsx | 85 ++++++----------- website/src/styles/Theme/components/Card.ts | 27 ++++++ website/src/styles/Theme/index.ts | 2 + 5 files changed, 63 insertions(+), 151 deletions(-) create mode 100644 website/src/styles/Theme/components/Card.ts diff --git a/website/package-lock.json b/website/package-lock.json index a531a0a6..1fa3d14d 100644 --- a/website/package-lock.json +++ b/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", diff --git a/website/package.json b/website/package.json index ed2da87e..580d0be3 100644 --- a/website/package.json +++ b/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", diff --git a/website/src/pages/admin/manage_user/[id].tsx b/website/src/pages/admin/manage_user/[id].tsx index e69fcd20..88bfced4 100644 --- a/website/src/pages/admin/manage_user/[id].tsx +++ b/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({ + const { register, handleSubmit } = useForm({ defaultValues: user, }); @@ -77,55 +76,31 @@ const ManageUser = ({ user }: InferGetServerSidePropsType - - { - trigger(values); - }} - > -
- - - - - {({ field }) => ( - - Display Name - - - )} - - - {({ field }) => ( - - Role - - - )} - - - {({ field }) => ( - - Notes - - - )} - - - -
-
- - - - - Display Name - - -
+ + + +
trigger(data))}> + + + + + Display Name + + + + Role + + + + Notes + + + +
+ + @@ -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: { diff --git a/website/src/styles/Theme/components/Card.ts b/website/src/styles/Theme/components/Card.ts new file mode 100644 index 00000000..8cd66031 --- /dev/null +++ b/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", + }, + }), + }, +}); diff --git a/website/src/styles/Theme/index.ts b/website/src/styles/Theme/index.ts index 718eab7f..37ca424d 100644 --- a/website/src/styles/Theme/index.ts +++ b/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 = {