Merge pull request #23 from coldsurfers/feature/hotsurf

feat: implemented nx

.gitignore

@@ -1 +1,3 @@
-node_modules/
+node_modules/
+
+.nx/cache

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged -v

.prettierignore

@@ -0,0 +1,5 @@
+node_modules/
+.next/
+.vercel/
+.gitignore
+dist/

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": true
+}

lint-staged.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    '*.{ts,tsx}': (filenames) => [
+        // "bash -c 'yarn validate'"
+    ],
+}

nx.json

@@ -0,0 +1,5 @@
+{
+  "affected": {
+    "defaultBase": "main"
+  }
+}

package.json

@@ -9,14 +9,29 @@
       "**/billets-admin-server",
       "**/billets-admin-server/**",
       "**/billets-server",
-      "**/billets-server/**"
+      "**/billets-server/**",
+      "**/react-native",
+      "**/react-native/**"
     ]
   },
   "scripts": {
     "super-install": "yarn install --immutable --force || yarn install --immutable --force",
-    "super-remove": "rm -rf ./packages/*/node_modules && rm -rf ./node_modules"
+    "super-remove": "rm -rf ./packages/*/node_modules && rm -rf ./node_modules",
+    "prettier": "prettier \"packages/**/*.{ts,tsx,js,json}\"",
+    "format:check": "yarn prettier --check",
+    "format:write": "yarn prettier --write",
+    "lint": "yarn nx run-many --target=lint",
+    "tsc": "yarn nx run-many --target=tsc",
+    "prepare": "husky install",
+    "prevalidate": "yarn format:write",
+    "validate": "run-p lint tsc format:check"
   },
   "devDependencies": {
-    "typescript": "^5.3.3"
+    "husky": "^8.0.0",
+    "lint-staged": "^15.2.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.2.4",
+    "typescript": "^5.3.3",
+    "nx": "17.3.0"
   }
 }

packages/accounts-kit/.prettierrc.json

@@ -1,6 +1,6 @@
 {
-    "trailingComma": "es5",
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true
-}
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

packages/accounts-kit/tsconfig.json

@@ -1,6 +1,3 @@
 {
-    "extends": [
-        "../../tsconfig.paths.json",
-        "../../tsconfig.utils.json"
-    ]
-}
+  "extends": ["../../tsconfig.paths.json", "../../tsconfig.utils.json"],
+}

packages/accounts-schema/.prettierrc.json

@@ -1,6 +1,6 @@
 {
-    "trailingComma": "es5",
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true
-}
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

packages/accounts-schema/tsconfig.json

@@ -1,6 +1,3 @@
 {
-    "extends": [
-        "../../tsconfig.paths.json",
-        "../../tsconfig.utils.json"
-    ]
-}
+  "extends": ["../../tsconfig.paths.json", "../../tsconfig.utils.json"],
+}

packages/accounts-server/.prettierrc.json

@@ -1,6 +1,6 @@
 {
-    "trailingComma": "es5",
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true
-}
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

packages/accounts-server/src/config/config.example.json

@@ -1,13 +1,13 @@
 {
-    "port": "",
-    "secrets": {
-        "jwt": "",
-        "AWS_S3_BUCKET": "",
-        "AWS_S3_REGION": "",
-        "AWS_S3_ACCESS_KEY_ID": "",
-        "AWS_S3_SECRET_ACCESS_KEY": "",
-        "MAILER_EMAIL_APP_PASSWORD": ""
-    },
-    "MAILER_EMAIL_ADDRESS": "",
-    "MAILER_SERVICE": ""
-}
+  "port": "",
+  "secrets": {
+    "jwt": "",
+    "AWS_S3_BUCKET": "",
+    "AWS_S3_REGION": "",
+    "AWS_S3_ACCESS_KEY_ID": "",
+    "AWS_S3_SECRET_ACCESS_KEY": "",
+    "MAILER_EMAIL_APP_PASSWORD": ""
+  },
+  "MAILER_EMAIL_ADDRESS": "",
+  "MAILER_SERVICE": ""
+}

packages/accounts-server/tsconfig.json

@@ -1,6 +1,3 @@
 {
-  "extends": [
-    "../../tsconfig.paths.json",
-    "../../tsconfig.server.json"
-  ]
+  "extends": ["../../tsconfig.paths.json", "../../tsconfig.server.json"],
 }

packages/accounts-ui/.eslintrc

@@ -1,7 +1,8 @@
 {
     "extends": [
       "coldsurfers", // for nodejs-typescript, or 'coldsurfers/nodejs-typescript'
-      "coldsurfers/react-typescript" // for react-typescript
+      "coldsurfers/react-typescript", // for react-typescript
+      "plugin:react-hooks/recommended"
     ],
     "plugins": ["@tanstack/query"],
     "rules": {

packages/accounts-ui/.prettierrc.json

@@ -1,6 +1,6 @@
 {
-    "trailingComma": "es5",
-    "tabWidth": 2,
-    "semi": false,
-    "singleQuote": true
-}
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

packages/accounts-ui/package.json

@@ -18,17 +18,21 @@
   "scripts": {
     "prebuild": "yarn workspace @coldsurfers/surfers-ui build",
     "build": "rm -rf dist && tsc",
-    "lint": "eslint --cache \"src/**/*.{js,jsx,ts,tsx}\"",
+    "lint": "eslint --cache \"src/**/*.{js,jsx,ts,tsx}\" --fix",
     "lint:fix": "yarn lint --fix"
   },
   "peerDependencies": {
     "@coldsurfers/surfers-ui": "1.0.0",
+    "@coldsurfers/hotsurf": ">= 0.2.6",
     "@emotion/styled": "^11.11.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-native": ">= 0.69.0",
+    "react-spinners": "^0.13.8"
   },
   "devDependencies": {
     "@coldsurfers/surfers-ui": "1.0.0",
+    "@coldsurfers/hotsurf": "0.2.6",
     "@emotion/styled": "^11.11.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
@@ -40,9 +44,10 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.8.1",
+    "prettier": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "react-spinners": "^0.13.8"
   }
 }

packages/accounts-ui/src/LoginForm.tsx

@@ -0,0 +1,96 @@
+import { Button, palette, Text, TextInput, Toast } from '@coldsurfers/hotsurf'
+import { memo, useState } from 'react'
+import styled from '@emotion/styled'
+import Loader from './LoginFormLoader'
+
+const Wrapper = styled.section`
+  position: absolute;
+  top: 50%; /* position the top  edge of the element at the middle of the parent */
+  left: 50%; /* position the left edge of the element at the middle of the parent */
+
+  transform: translate(-50%, -50%);
+
+  padding: 1rem;
+  border-radius: 3px;
+
+  display: flex;
+  flex-direction: column;
+
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+`
+
+const ToastWrapper = styled.div`
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+`
+
+interface Props {
+  onClickLoginButton: () => void
+  isLoading?: boolean
+  withRequestButtonUI?: boolean
+  onClickRequestButtonUI?: () => void
+  errorMessage?: string
+}
+
+const LoginForm = ({
+  onClickLoginButton,
+  isLoading,
+  withRequestButtonUI,
+  onClickRequestButtonUI,
+  errorMessage,
+}: Props) => {
+  const [email, setEmail] = useState<string>('')
+  const [password, setPassword] = useState<string>('')
+
+  return (
+    <>
+      <Wrapper>
+        <Text
+          weight="bold"
+          style={{
+            fontSize: 18,
+            marginBottom: 14,
+          }}
+        >
+          Billets 어드민
+        </Text>
+        <TextInput
+          value={email}
+          onChangeText={(text) => setEmail(text)}
+          placeholder="이메일"
+          style={{ width: 300 }}
+        />
+        <TextInput
+          value={password}
+          onChangeText={(text) => setPassword(text)}
+          placeholder="패스워드"
+          secureTextEntry
+          style={{ width: 300, marginTop: 14 }}
+        />
+        <Button
+          text="로그인"
+          onPress={onClickLoginButton}
+          style={{ marginTop: 14 }}
+        />
+        {withRequestButtonUI && (
+          <Button
+            text="가입 요청하기"
+            onPress={onClickRequestButtonUI}
+            style={{ marginTop: 14, backgroundColor: palette.black }}
+          />
+        )}
+      </Wrapper>
+      {!!errorMessage && (
+        <ToastWrapper>
+          <Toast type="error" message={errorMessage} />
+        </ToastWrapper>
+      )}
+      {isLoading && <Loader />}
+    </>
+  )
+}
+
+export default memo(LoginForm)

packages/accounts-ui/src/LoginFormLoader.tsx

@@ -0,0 +1,30 @@
+import { palette } from '@coldsurfers/hotsurf'
+import { PulseLoader } from 'react-spinners'
+import styled from '@emotion/styled'
+
+const Background = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+`
+
+const Pulse = styled(PulseLoader)`
+  z-index: 2;
+  position: absolute;
+  top: 50%; /* position the top  edge of the element at the middle of the parent */
+  left: 50%; /* position the left edge of the element at the middle of the parent */
+
+  transform: translate(-50%, -50%);
+`
+
+const Loader = () => (
+  <Background>
+    <Pulse color={palette.pink} />
+  </Background>
+)
+
+export default Loader

packages/accounts-ui/src/index.ts

@@ -1 +1,2 @@
 export { default as LoginModal } from './LoginModal'
+export { default as LoginForm } from './LoginForm'

packages/accounts-ui/tsconfig.json

@@ -1,6 +1,3 @@
 {
-  "extends": [
-    "../../tsconfig.paths.json",
-    "../../tsconfig.ui.json"
-  ]
+  "extends": ["../../tsconfig.paths.json", "../../tsconfig.ui.json"],
 }

packages/billets-admin-client/.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
-}
+}

packages/billets-admin-client/app/concert/[id]/page.tsx

@@ -314,7 +314,9 @@ const Thumbnail = styled.img`
   border-radius: 8px;
   margin-top: 12px;
   object-fit: contain;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 `
 
@@ -347,7 +349,9 @@ const SectionList = styled.div`
 const SectionCard = styled.div`
   margin-top: 6px;
   margin-bottom: 12px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.24);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   background-color: ${palette.white};
   padding: 16px;