feat: implemented accounts-ui

packages/accounts-ui/package.json

@@ -22,10 +22,8 @@
   },
   "peerDependencies": {
     "@emotion/styled": "^11.11.0",
-    "next-auth": "^4.24.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "zustand": "^4.4.7"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@emotion/styled": "^11.11.0",
@@ -39,11 +37,9 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "next-auth": "^4.24.5",
     "prettier": "^2.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^5.3.3",
-    "zustand": "^4.4.7"
+    "typescript": "^5.3.3"
   }
 }

packages/accounts-ui/src/LoginModal.tsx

@@ -1,27 +1,11 @@
-/* eslint-disable no-undef */
-
 'use client'
 
 import styled from '@emotion/styled'
-import { create } from 'zustand'
-import { MouseEventHandler, useCallback, useRef } from 'react'
-import { signIn } from 'next-auth/react'
+import { MouseEventHandler, useRef } from 'react'
 import Modal from './Modal'
 import ModalPortal from './ModalPortal'
 import Button from './Button'
 
-type LoginModalStore = {
-  isOpen: boolean
-  open: () => void
-  close: () => void
-}
-
-export const useLoginModalStore = create<LoginModalStore>((set) => ({
-  isOpen: false,
-  open: () => set(() => ({ isOpen: true })),
-  close: () => set(() => ({ isOpen: false })),
-}))
-
 const CustomModal = styled(Modal.Container)`
   width: 350px;
   display: flex;
@@ -36,23 +20,18 @@ const ModalTitle = styled.h2`
   font-size: 18px;
 `
 
-export default function LoginModal() {
-  const { isOpen, close } = useLoginModalStore()
+interface Props {
+  isOpen?: boolean
+  onClickGoogleLogin?: () => Promise<void>
+  onClickBackground?: MouseEventHandler<HTMLDivElement>
+}
 
+export default function LoginModal({
+  isOpen = false,
+  onClickGoogleLogin,
+  onClickBackground,
+}: Props) {
   const modalBackgroundRef = useRef<HTMLDivElement>(null)
-  const onClickBackground = useCallback<MouseEventHandler<HTMLDivElement>>(
-    (e) => {
-      if (modalBackgroundRef.current?.isEqualNode(e.target as Node)) {
-        close()
-      }
-    },
-    []
-  )
-
-  const onClickGoogleLogin = useCallback(async () => {
-    await signIn('google')
-  }, [])
-
   return (
     isOpen && (
       <ModalPortal>

packages/store-client/components/Header.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { signOut, useSession } from 'next-auth/react'
 import { useCallback } from 'react'
 import Button from './Button'
-import { useLoginModalStore } from './LoginModal'
+import { useLoginModalStore } from '@/stores/loginModalStore'
 
 const Container = styled.div`
   width: 100%;

packages/store-client/components/LayoutWrapper.tsx

@@ -3,11 +3,12 @@
 import { PropsWithChildren } from 'react'
 import styled from '@emotion/styled'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { SessionProvider } from 'next-auth/react'
+import { SessionProvider, signIn } from 'next-auth/react'
 import { Session } from 'next-auth/types'
+import { LoginModal } from '@coldsurfers/accounts-ui'
 import Header from './Header'
 import Footer from './Footer'
-import LoginModal from './LoginModal'
+import { useLoginModalStore } from '@/stores/loginModalStore'
 
 const Container = styled.div`
   display: flex;
@@ -24,20 +25,26 @@ const ChildrenWrapper = styled.div`
 
 export const queryClient = new QueryClient({})
 
-export default async function LayoutWrapper({
+export default function LayoutWrapper({
   children,
   session,
 }: PropsWithChildren<{
   session?: Session | null
 }>) {
+  const { isOpen, close } = useLoginModalStore()
   return (
     <SessionProvider session={session}>
       <QueryClientProvider client={queryClient}>
         <Container>
           <Header />
           <ChildrenWrapper>{children}</ChildrenWrapper>
           <Footer />
-          <LoginModal />
+          <LoginModal
+            isOpen={isOpen}
+            onClickBackground={close}
+            // eslint-disable-next-line no-void
+            onClickGoogleLogin={async () => void (await signIn('google'))}
+          />
         </Container>
       </QueryClientProvider>
     </SessionProvider>

packages/store-client/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "prebuild": "yarn workspace @coldsurfers/notion-utils build",
+    "prebuild": "yarn workspace @coldsurfers/notion-utils build && yarn workspace @coldsurfers/accounts-ui build",
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
@@ -16,6 +16,7 @@
     ]
   },
   "dependencies": {
+    "@coldsurfers/accounts-ui": "1.0.0",
     "@coldsurfers/notion-utils": "1.0.1-rc.10",
     "@coldsurfers/ocean-road": "1.5.1-rc.4",
     "@emotion/react": "^11.11.1",

packages/store-client/stores/loginModalStore.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand'
+
+type LoginModalStore = {
+  isOpen: boolean
+  open: () => void
+  close: () => void
+}
+
+export const useLoginModalStore = create<LoginModalStore>((set) => ({
+  isOpen: false,
+  open: () => set(() => ({ isOpen: true })),
+  close: () => set(() => ({ isOpen: false })),
+}))

yarn.lock

@@ -669,7 +669,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2":
   version "7.23.8"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz"
   integrity sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==
@@ -1558,7 +1558,7 @@
     "@opencensus/core" "^0.0.8"
     uuid "^3.2.1"
 
-"@panva/hkdf@^1.0.2", "@panva/hkdf@^1.1.1":
+"@panva/hkdf@^1.1.1":
   version "1.1.1"
   resolved "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.1.1.tgz"
   integrity sha512-dhPeilub1NuIG0X5Kvhh9lH4iW3ZsHlnzwgwbOlgwQ2wG1IqFzsgHqmKPk3WzsdWAeaxKJxgM0+W433RmN45GA==
@@ -5714,11 +5714,6 @@ iterator.prototype@^1.1.2:
     reflect.getprototypeof "^1.0.4"
     set-function-name "^2.0.1"
 
-jose@^4.11.4, jose@^4.15.4:
-  version "4.15.4"
-  resolved "https://registry.npmjs.org/jose/-/jose-4.15.4.tgz"
-  integrity sha512-W+oqK4H+r5sITxfxpSU+MMdr/YSWGvgZMQDIsNoBDGGy4i7GBPTtvFKibQzW06n3U3TqHjhvBJsirShsEJ6eeQ==
-
 jose@^5.1.0:
   version "5.2.0"
   resolved "https://registry.npmjs.org/jose/-/jose-5.2.0.tgz"
@@ -6175,21 +6170,6 @@ [email protected]:
   dependencies:
     type-fest "^2.5.1"
 
-next-auth@^4.24.5:
-  version "4.24.5"
-  resolved "https://registry.npmjs.org/next-auth/-/next-auth-4.24.5.tgz"
-  integrity sha512-3RafV3XbfIKk6rF6GlLE4/KxjTcuMCifqrmD+98ejFq73SRoj2rmzoca8u764977lH/Q7jo6Xu6yM+Re1Mz/Og==
-  dependencies:
-    "@babel/runtime" "^7.20.13"
-    "@panva/hkdf" "^1.0.2"
-    cookie "^0.5.0"
-    jose "^4.11.4"
-    oauth "^0.9.15"
-    openid-client "^5.4.0"
-    preact "^10.6.3"
-    preact-render-to-string "^5.1.19"
-    uuid "^8.3.2"
-
 next-auth@^5.0.0-beta.4:
   version "5.0.0-beta.4"
   resolved "https://registry.npmjs.org/next-auth/-/next-auth-5.0.0-beta.4.tgz"
@@ -6428,21 +6408,11 @@ oauth4webapi@^2.3.0:
   resolved "https://registry.npmjs.org/oauth4webapi/-/oauth4webapi-2.6.0.tgz"
   integrity sha512-4P43og0d8fQ61RMQEl9L7zwGVduuYbLED7uP99MkFSGuOUvJL1Fs52/D3tRtKoFtiSwKblScTYJI+utQn3SUDg==
 
-oauth@^0.9.15:
-  version "0.9.15"
-  resolved "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz"
-  integrity sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==
-
 object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
-object-hash@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz"
-  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
-
 object-inspect@^1.13.1, object-inspect@^1.9.0:
   version "1.13.1"
   resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz"
@@ -6513,11 +6483,6 @@ obliterator@^2.0.1:
   resolved "https://registry.npmjs.org/obliterator/-/obliterator-2.0.4.tgz"
   integrity sha512-lgHwxlxV1qIg1Eap7LgIeoBWIMFibOjbrYPIPJZcI1mmGAI2m3lNYpK12Y+GBdPQ0U1hRwSord7GIaawz962qQ==
 
-oidc-token-hash@^5.0.3:
-  version "5.0.3"
-  resolved "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.3.tgz"
-  integrity sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==
-
 on-exit-leak-free@^2.1.0:
   version "2.1.2"
   resolved "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz"
@@ -6559,16 +6524,6 @@ [email protected]:
     is-inside-container "^1.0.0"
     is-wsl "^2.2.0"
 
-openid-client@^5.4.0:
-  version "5.6.4"
-  resolved "https://registry.npmjs.org/openid-client/-/openid-client-5.6.4.tgz"
-  integrity sha512-T1h3B10BRPKfcObdBklX639tVz+xh34O7GjofqrqiAQdm7eHsQ00ih18x6wuJ/E6FxdtS2u3FmUGPDeEcMwzNA==
-  dependencies:
-    jose "^4.15.4"
-    lru-cache "^6.0.0"
-    object-hash "^2.2.0"
-    oidc-token-hash "^5.0.3"
-
 optionator@^0.9.1, optionator@^0.9.3:
   version "0.9.3"
   resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz"
@@ -6915,23 +6870,11 @@ [email protected]:
   dependencies:
     pretty-format "^3.8.0"
 
-preact-render-to-string@^5.1.19:
-  version "5.2.6"
-  resolved "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz"
-  integrity sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==
-  dependencies:
-    pretty-format "^3.8.0"
-
 [email protected]:
   version "10.11.3"
   resolved "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz"
   integrity sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==
 
-preact@^10.6.3:
-  version "10.19.3"
-  resolved "https://registry.npmjs.org/preact/-/preact-10.19.3.tgz"
-  integrity sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"