refactor: move components to seprate package (#1336)

* refactor: move components to separate lib

* chore: add ts-config path

* fix: lint

* chore: update docker file

apps/admin-panel/.storybook/preview.tsx

@@ -3,7 +3,7 @@ import type { Preview } from "@storybook/react"
 import { MockedProvider } from "@apollo/client/testing"
 import "../app/globals.css"
 import { AppSidebar } from "../components/app-sidebar"
-import { SidebarInset, SidebarProvider } from "../ui/sidebar"
+import { SidebarInset, SidebarProvider } from "@lana/web/ui/sidebar"
 import {
   AvatarDocument,
   GetRealtimePriceUpdatesDocument,

apps/admin-panel/Dockerfile

@@ -5,8 +5,18 @@ FROM base AS builder
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 RUN corepack enable pnpm
-COPY apps/admin-panel .
+
+COPY pnpm-workspace.yaml pnpm-lock.yaml ./
+
+COPY apps/admin-panel/package.json ./apps/admin-panel/
+COPY lib/js/shared-web/package.json ./lib/js/shared-web/
+
+COPY lib/js/shared-web ./lib/js/shared-web
+COPY apps/admin-panel ./apps/admin-panel
+
 RUN pnpm install --frozen-lockfile
+
+WORKDIR /app/apps/admin-panel
 RUN pnpm run build
 
 FROM base AS runner
@@ -16,16 +26,14 @@ ENV NODE_ENV production
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
-COPY --from=builder /app/public ./public
+COPY --from=builder /app/apps/admin-panel/public ./public
 
 # Set the correct permission for prerender cache
 RUN mkdir .next
 RUN chown nextjs:nodejs .next
 
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/apps/admin-panel/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/apps/admin-panel/.next/static ./.next/static
 
 USER nextjs
 

apps/admin-panel/app/actions/approve.tsx

@@ -1,15 +1,15 @@
 import React from "react"
 import { gql, useApolloClient } from "@apollo/client"
 import { toast } from "sonner"
-
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/ui/dialog"
-import { Button } from "@/ui/button"
+} from "@lana/web/ui/dialog"
+import { Button } from "@lana/web/ui/button"
+
 import {
   ApprovalProcessType,
   GetCreditFacilityBasicDetailsDocument,

apps/admin-panel/app/actions/deny.tsx

@@ -8,8 +8,11 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/ui/dialog"
-import { Button } from "@/ui/button"
+} from "@lana/web/ui/dialog"
+import { Button } from "@lana/web/ui/button"
+
+import { Textarea } from "@lana/web/ui/textarea"
+
 import {
   ApprovalProcessType,
   GetCreditFacilityBasicDetailsDocument,
@@ -20,7 +23,6 @@ import {
 } from "@/lib/graphql/generated"
 import { DetailItem, DetailsGroup } from "@/components/details"
 import { formatDate, formatProcessType } from "@/lib/utils"
-import { Textarea } from "@/ui/textarea"
 
 gql`
   mutation ApprovalProcessDeny($input: ApprovalProcessDenyInput!, $reason: String!) {

apps/admin-panel/app/actions/list.tsx

@@ -4,15 +4,23 @@ import Link from "next/link"
 import { gql } from "@apollo/client"
 import { HiCheckCircle } from "react-icons/hi"
 
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/ui/card"
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@lana/web/ui/card"
+
+import { Skeleton } from "@lana/web/ui/skeleton"
+
 import {
   ApprovalProcessStatus,
   ApprovalProcessType,
   useAllActionsQuery,
 } from "@/lib/graphql/generated"
 import { formatDate, formatProcessType } from "@/lib/utils"
 import DataTable, { Column } from "@/components/data-table"
-import { Skeleton } from "@/ui/skeleton"
 
 const NUMBER_OF_ITEMS_IN_DASHBOARD = 3
 

apps/admin-panel/app/app-layout.tsx

@@ -1,12 +1,13 @@
 "use client"
 
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@lana/web/ui/sidebar"
+
 import { CommandMenu } from "./command-menu"
 import CreateButton, { CreateContextProvider } from "./create"
 import { DynamicBreadcrumb } from "./dynamic-breadcrumb"
 
 import { AppSidebar } from "@/components/app-sidebar"
 import { RealtimePriceUpdates } from "@/components/realtime-price"
-import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/ui/sidebar"
 
 import { env } from "@/env"
 

apps/admin-panel/app/audit/page.tsx

@@ -1,7 +1,13 @@
 "use client"
-import AuditLogsList from "./list"
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@lana/web/ui/card"
 
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/ui/card"
+import AuditLogsList from "./list"
 
 const AuditLogs: React.FC = () => (
   <>

apps/admin-panel/app/auth/error/page.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link"
 
-import { Button } from "@/ui/button"
+import { Button } from "@lana/web/ui/button"
 
 const Error: React.FC = () => (
   <>

apps/admin-panel/app/auth/login/page.tsx

@@ -3,10 +3,11 @@
 import { useState } from "react"
 import { useRouter } from "next/navigation"
 
+import { Button } from "@lana/web/ui/button"
+
 import { loginUser } from "../ory"
 
 import { Input } from "@/components/input"
-import { Button } from "@/ui/button"
 
 const Login: React.FC = () => {
   const router = useRouter()

apps/admin-panel/app/auth/verify/page.tsx

@@ -3,9 +3,10 @@
 import React, { useState, Suspense, useEffect } from "react"
 import { useRouter, useSearchParams } from "next/navigation"
 
+import { Button } from "@lana/web/ui/button"
+
 import { loginUserWithOtp } from "../ory"
 
-import { Button } from "@/ui/button"
 import { Input } from "@/components/input"
 
 const Verify: React.FC = () => {

apps/admin-panel/app/balance-sheet/account.tsx

@@ -3,9 +3,10 @@ import { useState } from "react"
 
 import { IoCaretDownSharp, IoCaretForwardSharp } from "react-icons/io5"
 
+import { TableCell, TableRow } from "@lana/web/ui/table"
+
 import { AccountSetSubAccount, usePnlAccountSetQuery } from "@/lib/graphql/generated"
 import Balance, { Currency } from "@/components/balance/balance"
-import { TableCell, TableRow } from "@/ui/table"
 import { DateRange } from "@/components/date-range-picker"
 
 export const Account = ({

apps/admin-panel/app/balance-sheet/page.tsx

@@ -2,6 +2,18 @@
 import { gql } from "@apollo/client"
 import { useState, useCallback, useMemo } from "react"
 
+import { Table, TableBody, TableCell, TableRow } from "@lana/web/ui/table"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@lana/web/ui/card"
+
+import { Skeleton } from "@lana/web/ui/skeleton"
+
 import { Account } from "./account"
 
 import {
@@ -10,15 +22,13 @@ import {
   useBalanceSheetQuery,
 } from "@/lib/graphql/generated"
 import Balance, { Currency } from "@/components/balance/balance"
-import { Table, TableBody, TableCell, TableRow } from "@/ui/table"
 import { CurrencyLayerSelection } from "@/components/financial/currency-layer-selection"
 import {
   DateRange,
   DateRangeSelector,
   getInitialDateRange,
 } from "@/components/date-range-picker"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/ui/card"
-import { Skeleton } from "@/ui/skeleton"
+
 import { Satoshis, SignedSatoshis, SignedUsdCents, UsdCents } from "@/types"
 
 gql`

apps/admin-panel/app/chart-of-accounts/accounts.tsx

@@ -4,12 +4,13 @@ import React from "react"
 import { gql } from "@apollo/client"
 import { IoCaretDownSharp, IoCaretForwardSharp } from "react-icons/io5"
 
+import { TableCell, TableRow } from "@lana/web/ui/table"
+
 import {
   AccountAmountsByCurrency,
   AccountSetSubAccount,
   useChartOfAccountsAccountSetQuery,
 } from "@/lib/graphql/generated"
-import { TableCell, TableRow } from "@/ui/table"
 import { DateRange } from "@/components/date-range-picker"
 
 gql`

apps/admin-panel/app/chart-of-accounts/page.tsx

@@ -5,19 +5,34 @@ import { ApolloError, gql } from "@apollo/client"
 
 import { IoCaretDownSharp, IoCaretForwardSharp } from "react-icons/io5"
 
-import { Skeleton } from "@/ui/skeleton"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/ui/table"
-import { Tabs, TabsList, TabsContent, TabsTrigger } from "@/ui/tab"
+import { Skeleton } from "@lana/web/ui/skeleton"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@lana/web/ui/table"
+import { Tabs, TabsList, TabsContent, TabsTrigger } from "@lana/web/ui/tab"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@lana/web/ui/card"
+
+import { Badge } from "@lana/web/ui/badge"
+
 import {
   ChartCategory,
   ChartOfAccountsQuery,
   OffBalanceSheetChartOfAccountsQuery,
   useChartOfAccountsQuery,
   useOffBalanceSheetChartOfAccountsQuery,
 } from "@/lib/graphql/generated"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/ui/card"
-
-import { Badge } from "@/ui/badge"
 
 gql`
   fragment ControlSubAccountFields on ChartControlSubAccount {

apps/admin-panel/app/command-menu.tsx

@@ -16,6 +16,17 @@ import {
   XSquare,
 } from "lucide-react"
 
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@lana/web/ui/command"
+
 import { CreateCustomerDialog } from "./customers/create"
 import { CreateDepositDialog } from "./deposits/create"
 import { WithdrawalInitiateDialog } from "./withdrawals/initiate"
@@ -38,16 +49,6 @@ import { WithdrawalCancelDialog } from "./withdrawals/[withdrawal-id]/cancel"
 import CommitteeAssignmentDialog from "./policies/[policy-id]/assign-to-committee"
 import AddUserCommitteeDialog from "./committees/add-user"
 
-import {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@/ui/command"
 import {
   ApprovalProcessStatus,
   CreditFacilityStatus,

apps/admin-panel/app/committees/[committee-id]/details.tsx

@@ -2,11 +2,12 @@
 
 import React from "react"
 
+import { Button } from "@lana/web/ui/button"
+
 import { AddUserCommitteeDialog } from "../add-user"
 
 import { DetailsCard, DetailItemProps } from "@/components/details"
 import { GetCommitteeDetailsQuery } from "@/lib/graphql/generated"
-import { Button } from "@/ui/button"
 import { formatDate } from "@/lib/utils"
 
 type CommitteeDetailsProps = {

apps/admin-panel/app/committees/[committee-id]/users.tsx

@@ -2,12 +2,15 @@
 import React, { useState } from "react"
 import { IoTrashOutline } from "react-icons/io5"
 
+import { Button } from "@lana/web/ui/button"
+
+import { Badge } from "@lana/web/ui/badge"
+
 import { RemoveUserCommitteeDialog } from "../remove-user"
 
 import { GetCommitteeDetailsQuery } from "@/lib/graphql/generated"
-import { Button } from "@/ui/button"
 import { formatRole } from "@/lib/utils"
-import { Badge } from "@/ui/badge"
+
 import DataTable, { Column } from "@/components/data-table"
 import CardWrapper from "@/components/card-wrapper"
 

apps/admin-panel/app/committees/add-user.tsx

@@ -9,15 +9,16 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/ui/dialog"
-import { Button } from "@/ui/button"
+} from "@lana/web/ui/dialog"
+import { Button } from "@lana/web/ui/button"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/ui/select"
+} from "@lana/web/ui/select"
+
 import { useCommitteeAddUserMutation, useUsersQuery } from "@/lib/graphql/generated"
 import { formatRole } from "@/lib/utils"
 

apps/admin-panel/app/committees/create.tsx

@@ -10,11 +10,13 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/ui/dialog"
+} from "@lana/web/ui/dialog"
+
+import { Input } from "@lana/web/ui/input"
+import { Button } from "@lana/web/ui/button"
+import { Label } from "@lana/web/ui/label"
+
 import { useCreateCommitteeMutation } from "@/lib/graphql/generated"
-import { Input } from "@/ui/input"
-import { Button } from "@/ui/button"
-import { Label } from "@/ui/label"
 
 import { useModalNavigation } from "@/hooks/use-modal-navigation"