nextjs-chakra

web/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

web/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

web/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "with-chakra-ui",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@chakra-ui/core": "^0.5.2",
+    "@emotion/core": "^10.0.27",
+    "@emotion/styled": "^10.0.27",
+    "emotion-theming": "^10.0.27",
+    "formik": "^2.1.5",
+    "next": "^9.1.7",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "devDependencies": {
+    "@types/node": "^14.0.27",
+    "typescript": "^3.9.7"
+  }
+}

web/src/components/InputField.tsx

@@ -0,0 +1,31 @@
+import React, { InputHTMLAttributes } from "react";
+import { useField } from "formik";
+import {
+  FormControl,
+  FormLabel,
+  Input,
+  FormErrorMessage,
+} from "@chakra-ui/core";
+
+type InputFieldProps = InputHTMLAttributes<HTMLInputElement> & {
+  label: string;
+  name: string;
+};
+
+// '' => false
+// 'error message stuff' => true
+
+export const InputField: React.FC<InputFieldProps> = ({
+  label,
+  size: _,
+  ...props
+}) => {
+  const [field, { error }] = useField(props);
+  return (
+    <FormControl isInvalid={!!error}>
+      <FormLabel htmlFor={field.name}>{label}</FormLabel>
+      <Input {...field} {...props} id={field.name} />
+      {error ? <FormErrorMessage>{error}</FormErrorMessage> : null}
+    </FormControl>
+  );
+};

web/src/components/Wrapper.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Box } from "@chakra-ui/core";
+
+interface WrapperProps {
+  variant?: "small" | "regular";
+}
+
+export const Wrapper: React.FC<WrapperProps> = ({
+  children,
+  variant = "regular",
+}) => {
+  return (
+    <Box
+      mt={8}
+      mx="auto"
+      maxW={variant === "regular" ? "800px" : "400px"}
+      w="100%"
+    >
+      {children}
+    </Box>
+  );
+};

web/src/pages/_app.tsx

@@ -0,0 +1,16 @@
+import { ThemeProvider, CSSReset, ColorModeProvider } from '@chakra-ui/core'
+
+import theme from '../theme'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <ColorModeProvider>
+        <CSSReset />
+        <Component {...pageProps} />
+      </ColorModeProvider>
+    </ThemeProvider>
+  )
+}
+
+export default MyApp

web/src/pages/index.tsx

@@ -0,0 +1,3 @@
+const Index = () => <div>hello world</div>;
+
+export default Index;

web/src/pages/register.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Formik, Form } from "formik";
+import {
+  FormControl,
+  FormLabel,
+  Input,
+  FormErrorMessage,
+  Box,
+  Button,
+} from "@chakra-ui/core";
+import { Wrapper } from "../components/Wrapper";
+import { InputField } from "../components/InputField";
+
+interface registerProps {}
+
+const Register: React.FC<registerProps> = ({}) => {
+  return (
+    <Wrapper variant="small">
+      <Formik
+        initialValues={{ username: "", password: "" }}
+        onSubmit={(values) => {
+          console.log(values);
+        }}
+      >
+        {({ isSubmitting }) => (
+          <Form>
+            <InputField
+              name="username"
+              placeholder="username"
+              label="Username"
+            />
+            <Box mt={4}>
+              <InputField
+                name="password"
+                placeholder="password"
+                label="Password"
+                type="password"
+              />
+            </Box>
+            <Button
+              mt={4}
+              type="submit"
+              isLoading={isSubmitting}
+              variantColor="teal"
+            >
+              register
+            </Button>
+          </Form>
+        )}
+      </Formik>
+    </Wrapper>
+  );
+};
+
+export default Register;

web/src/theme.tsx

@@ -0,0 +1,38 @@
+import { theme as chakraTheme } from '@chakra-ui/core'
+
+const fonts = { ...chakraTheme.fonts, mono: `'Menlo', monospace` }
+
+const breakpoints = ['40em', '52em', '64em']
+
+const theme = {
+  ...chakraTheme,
+  colors: {
+    ...chakraTheme.colors,
+    black: '#16161D',
+  },
+  fonts,
+  breakpoints,
+  icons: {
+    ...chakraTheme.icons,
+    logo: {
+      path: (
+        <svg
+          width="3000"
+          height="3163"
+          viewBox="0 0 3000 3163"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect width="3000" height="3162.95" fill="none" />
+          <path
+            d="M1470.89 1448.81L2170 2488.19H820V706.392H2170L1470.89 1448.81ZM1408.21 1515.37L909.196 2045.3V2393.46H1998.84L1408.21 1515.37Z"
+            fill="currentColor"
+          />
+        </svg>
+      ),
+      viewBox: '0 0 3000 3163',
+    },
+  },
+}
+
+export default theme

web/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}