refactor: direct communicate between repos

@api/package.json

@@ -2,15 +2,6 @@
   "name": "@dinstack/api",
   "version": "0.0.0",
   "private": true,
-  "exports": {
-    "./*": {
-      "import": [
-        "./build/*.js",
-        "./build/*.jsx"
-      ],
-      "types": "./build/*.d.ts"
-    }
-  },
   "scripts": {
     "dev": "wrangler dev --env local --port 8000",
     "build": "tsc --build && tsc-alias",
@@ -27,18 +18,18 @@
     "arctic": "^0.3.6",
     "drizzle-orm": "^0.29.1",
     "lodash-es": "^4.17.21",
-    "oslo": "^0.23.2",
+    "oslo": "^0.23.5",
     "superjson": "^2.2.1",
     "ts-expect": "^1.3.0",
     "ts-md5": "^1.3.1",
-    "ts-pattern": "^5.0.5",
+    "ts-pattern": "^5.0.6",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@dinstack/tsconfig": "workspace:^",
     "@types/lodash-es": "^4.17.12",
     "drizzle-kit": "^0.20.6",
     "postgres": "^3.4.3",
-    "tsx": "^4.6.1"
+    "tsx": "^4.6.2"
   }
 }

@ui/package.json

@@ -2,32 +2,6 @@
   "name": "@dinstack/ui",
   "version": "0.0.0",
   "private": true,
-  "exports": {
-    "./*": {
-      "import": [
-        "./build/ui/*.js",
-        "./build/ui/*.jsx"
-      ],
-      "types": "./build/ui/*.d.ts"
-    },
-    "./icons/*": {
-      "import": [
-        "./build/icons/*.js",
-        "./build/icons/*.jsx"
-      ],
-      "types": "./build/icons/*.d.ts"
-    },
-    "./lib/*": {
-      "import": "./build/lib/*.js",
-      "types": "./build/lib/*.d.ts"
-    },
-    "./hooks/*": {
-      "import": "./build/hooks/*.js",
-      "types": "./build/hooks/*.d.ts"
-    },
-    "./configs/tailwind.config": "./configs/tailwind.config.ts",
-    "./styles/globals.css": "./styles/globals.css"
-  },
   "scripts": {
     "build": "tsc --build && tsc-alias",
     "ui:add": "pnpm dlx shadcn-ui@latest add -y",

@web/app/(authed)/_components/navbar.tsx

@@ -1,9 +1,5 @@
 'use client'
 
-import { Button } from '@dinstack/ui/button'
-import { DropdownMenuTrigger } from '@dinstack/ui/dropdown-menu'
-import { ScrollArea } from '@dinstack/ui/scroll-area'
-import { Skeleton } from '@dinstack/ui/skeleton'
 import { CaretDownIcon, DashboardIcon } from '@radix-ui/react-icons'
 import { useAuthedAtom } from '@web/atoms/auth'
 import { ProfileDropdownMenu } from '@web/components/profile-dropdown-menu'
@@ -12,6 +8,10 @@ import { api } from '@web/lib/api'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { match } from 'ts-pattern'
+import { Button } from '@ui/ui/button'
+import { DropdownMenuTrigger } from '@ui/ui/dropdown-menu'
+import { ScrollArea } from '@ui/ui/scroll-area'
+import { Skeleton } from '@ui/ui/skeleton'
 
 type Props = {
   onNavigate?: () => void

@web/app/(authed)/dash/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { ScrollArea } from '@dinstack/ui/scroll-area'
+import { ScrollArea } from '@ui/ui/scroll-area'
 
 export default function Page() {
   return (

@web/app/(authed)/dash2/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { ScrollArea } from '@dinstack/ui/scroll-area'
+import { ScrollArea } from '@ui/ui/scroll-area'
 
 export default function Page() {
   return (

@web/app/(authed)/layout.tsx

@@ -1,14 +1,14 @@
 'use client'
 
-import { Button } from '@dinstack/ui/button'
-import { Sheet, SheetContent, SheetTrigger } from '@dinstack/ui/sheet'
-import { Skeleton } from '@dinstack/ui/skeleton'
 import { CaretLeftIcon, CaretRightIcon, HamburgerMenuIcon } from '@radix-ui/react-icons'
 import { sidebarSizeHistoryAtom } from '@web/atoms/history'
 import { motion } from 'framer-motion'
 import { useAtom } from 'jotai'
 import { useState } from 'react'
 import { match } from 'ts-pattern'
+import { Button } from '@ui/ui/button'
+import { Sheet, SheetContent, SheetTrigger } from '@ui/ui/sheet'
+import { Skeleton } from '@ui/ui/skeleton'
 import { Navbar } from './_components/navbar'
 import { RequireAuthedWrapper } from './_wrappers/require-authed'
 

@web/app/_providers/query.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useToast } from '@dinstack/ui/use-toast'
 import { MutationCache, QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { TRPCClientError, httpBatchLink } from '@trpc/client'
 import { authAtom } from '@web/atoms/auth'
@@ -9,6 +8,7 @@ import { api } from '@web/lib/api'
 import { RESET } from 'jotai/utils'
 import { useState } from 'react'
 import SuperJSON from 'superjson'
+import { useToast } from '@ui/ui/use-toast'
 import { store } from './jotai'
 
 export function QueryProvider({ children }: { children: React.ReactNode }) {

@web/app/auth/github/page.tsx

@@ -1,13 +1,13 @@
 'use client'
 
-import { useIsRendered } from '@dinstack/ui/hooks/use-is-rendered'
 import { authAtom, stateAtom } from '@web/atoms/auth'
 import { LoginScreen } from '@web/components/login-screen'
 import { api } from '@web/lib/api'
 import { useAtom } from 'jotai'
 import { RESET } from 'jotai/utils'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect } from 'react'
+import { useIsRendered } from '@ui/hooks/use-is-rendered'
 
 export default function Page() {
   const router = useRouter()

@web/app/auth/google/page.tsx

@@ -1,13 +1,13 @@
 'use client'
 
-import { useIsRendered } from '@dinstack/ui/hooks/use-is-rendered'
 import { authAtom, codeVerifierAtom, stateAtom } from '@web/atoms/auth'
 import { LoginScreen } from '@web/components/login-screen'
 import { api } from '@web/lib/api'
 import { useAtom } from 'jotai'
 import { RESET } from 'jotai/utils'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect } from 'react'
+import { useIsRendered } from '@ui/hooks/use-is-rendered'
 
 export default function Page() {
   const router = useRouter()

@web/app/error.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { Button } from '@dinstack/ui/button'
 import Link from 'next/link'
 import { useEffect } from 'react'
+import { Button } from '@ui/ui/button'
 
 export default function PageError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   useEffect(() => {

@web/app/layout.tsx

@@ -1,8 +1,8 @@
-import { ScrollArea } from '@dinstack/ui/scroll-area'
-import '@dinstack/ui/styles/globals.css'
-import { Toaster } from '@dinstack/ui/toaster'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+import '@ui/styles/globals.css'
+import { ScrollArea } from '@ui/ui/scroll-area'
+import { Toaster } from '@ui/ui/toaster'
 import JotaiProvider from './_providers/jotai'
 import { QueryProvider } from './_providers/query'
 import { ThemeProvider } from './_providers/theme'

@web/app/not-found.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { Button } from '@dinstack/ui/button'
 import Link from 'next/link'
+import { Button } from '@ui/ui/button'
 
 export default function PageNotFound() {
   return (

@web/app/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { Button } from '@dinstack/ui/button'
 import { api } from '@web/lib/api'
+import { Button } from '@ui/ui/button'
 
 export default function Home() {
   const { status, data } = api.ping.useQuery()

@web/atoms/_helpers.ts

@@ -1,7 +1,7 @@
 import { atom } from 'jotai'
 import { RESET } from 'jotai/utils'
 import SuperJSON from 'superjson'
-import { z } from 'zod'
+import type { z } from 'zod'
 
 type SetStateActionClosureWithReset<V> = (prev: V) => V | typeof RESET
 type SetStateActionWithReset<V> = V | typeof RESET | SetStateActionClosureWithReset<V>

@web/components/login-screen.tsx

@@ -1,9 +1,5 @@
 'use client'
 
-import { Button } from '@dinstack/ui/button'
-import { GoogleLogoIcon } from '@dinstack/ui/icons/google-logo'
-import { Input } from '@dinstack/ui/input'
-import { Label } from '@dinstack/ui/label'
 import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon, GitHubLogoIcon } from '@radix-ui/react-icons'
 import { authAtom, codeVerifierAtom, stateAtom } from '@web/atoms/auth'
 import { loginWithEmailHistoryAtom } from '@web/atoms/history'
@@ -16,6 +12,10 @@ import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useId, useState } from 'react'
 import OTPInput from 'react-otp-input'
 import { match } from 'ts-pattern'
+import { GoogleLogoIcon } from '@ui/icons/google-logo'
+import { Button } from '@ui/ui/button'
+import { Input } from '@ui/ui/input'
+import { Label } from '@ui/ui/label'
 
 type Props = {
   isLoadingGoogle?: boolean
@@ -45,8 +45,6 @@ export function LoginScreen(props: Props) {
 
     setEmail(history.previousLoginEmail)
     setStep('validate-otp')
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [history])
 
   return (

@web/components/organization-create-sheet.tsx

@@ -1,11 +1,11 @@
-import { Button } from '@dinstack/ui/button'
-import { Input } from '@dinstack/ui/input'
-import { Label } from '@dinstack/ui/label'
-import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@dinstack/ui/sheet'
 import { ReloadIcon } from '@radix-ui/react-icons'
 import type { ApiOutputs } from '@web/lib/api'
 import { api } from '@web/lib/api'
 import { useId, useRef } from 'react'
+import { Button } from '@ui/ui/button'
+import { Input } from '@ui/ui/input'
+import { Label } from '@ui/ui/label'
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@ui/ui/sheet'
 
 type Props = React.ComponentPropsWithoutRef<typeof Sheet> & {
   onSuccess?: (result: ApiOutputs['organization']['create']) => void

@web/components/profile-dropdown-menu.tsx

@@ -1,4 +1,10 @@
-import { Button } from '@dinstack/ui/button'
+import { ReloadIcon } from '@radix-ui/react-icons'
+import { useAuthedAtom } from '@web/atoms/auth'
+import { api } from '@web/lib/api'
+import { RESET } from 'jotai/utils'
+import { useEffect, useState } from 'react'
+import { match } from 'ts-pattern'
+import { Button } from '@ui/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,17 +17,11 @@ import {
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-} from '@dinstack/ui/dropdown-menu'
-import { ScrollArea } from '@dinstack/ui/scroll-area'
-import { SheetTrigger } from '@dinstack/ui/sheet'
-import { Skeleton } from '@dinstack/ui/skeleton'
-import { ViewportBlock } from '@dinstack/ui/viewport-block'
-import { ReloadIcon } from '@radix-ui/react-icons'
-import { useAuthedAtom } from '@web/atoms/auth'
-import { api } from '@web/lib/api'
-import { RESET } from 'jotai/utils'
-import { useEffect, useState } from 'react'
-import { match } from 'ts-pattern'
+} from '@ui/ui/dropdown-menu'
+import { ScrollArea } from '@ui/ui/scroll-area'
+import { SheetTrigger } from '@ui/ui/sheet'
+import { Skeleton } from '@ui/ui/skeleton'
+import { ViewportBlock } from '@ui/ui/viewport-block'
 import { OrganizationCreateSheet } from './organization-create-sheet'
 
 type Props = React.ComponentPropsWithoutRef<typeof DropdownMenu>

@web/components/theme-toggle.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { Button } from '@dinstack/ui/button'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@dinstack/ui/dropdown-menu'
 import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
 import { useTheme } from 'next-themes'
+import { Button } from '@ui/ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@ui/ui/dropdown-menu'
 
 export function ThemeToggle() {
   const { setTheme } = useTheme()

@web/lib/api.ts

@@ -1,4 +1,4 @@
-import type { AppRouter, AppRouterInputs, AppRouterOutputs } from '@dinstack/api/router'
+import type { AppRouter, AppRouterInputs, AppRouterOutputs } from '@api/router'
 import { createTRPCReact } from '@trpc/react-query'
 
 export const api = createTRPCReact<AppRouter>({

@web/package.json

@@ -13,31 +13,31 @@
     "@dinstack/ui": "workspace:^",
     "@radix-ui/react-icons": "^1.3.0",
     "@t3-oss/env-nextjs": "^0.7.1",
-    "@tanstack/react-query": "4",
+    "@tanstack/react-query": "^4.36.1",
     "@trpc/client": "^10.44.1",
     "@trpc/react-query": "^10.44.1",
     "framer-motion": "^10.16.16",
     "jotai": "^2.6.0",
     "next": "14.0.3",
     "next-themes": "^0.2.1",
-    "oslo": "^0.23.2",
+    "oslo": "^0.23.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-otp-input": "^3.1.0",
     "superjson": "^2.2.1",
-    "ts-pattern": "^5.0.5",
+    "ts-pattern": "^5.0.6",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@dinstack/api": "workspace:^",
     "@dinstack/tsconfig": "workspace:^",
     "@swc-jotai/react-refresh": "^0.1.0",
-    "@types/node": "^20.10.1",
-    "@types/react": "^18.2.39",
+    "@types/node": "^20.10.4",
+    "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.5",
-    "typescript": "^5.3.2"
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "typescript": "^5.3.3"
   }
 }

@web/tailwind.config.ts

@@ -1,6 +1,6 @@
-import baseConfig from '@dinstack/ui/configs/tailwind.config'
 import type { Config } from 'tailwindcss'
 import defaultTheme from 'tailwindcss/defaultTheme'
+import baseConfig from '../@ui/configs/tailwind.config'
 
 export default {
   ...baseConfig,

@web/tsconfig.json

@@ -10,15 +10,21 @@
       }
     ],
     "paths": {
-      "@web/*": ["./*"]
+      "@web/*": ["./*"],
+      "@api/*": ["../@api/*"],
+      "@ui/*": ["../@ui/*"],
+      "@ui/_/../ui/*": ["../@ui/ui/*"]
     },
     "noEmit": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules", ".next"],
+  "exclude": ["node_modules", ".next", "tailwind.config.ts"],
   "references": [
     {
       "path": "../@api/tsconfig.json"
+    },
+    {
+      "path": "../@ui/tsconfig.json"
     }
   ]
 }

package.json

@@ -11,7 +11,7 @@
     "typecheck": "turbo run typecheck",
     "deploy:preview": "turbo run deploy:preview",
     "deploy:production": "turbo run deploy:production",
-    "ui:add": "pnpm --filter @dinstack/ui run ui:add"
+    "ui:add": "pnpm --filter @ui/ui run ui:add"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",