refactor: update lib build

harp_apps/dashboard/frontend/package.json

@@ -13,17 +13,11 @@
       "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     },
-    "./styles": {
-      "import": "./dist/styles.js",
-      "default":"./dist/styles.js",
-      "require": "./dist/styles.cjs",
-      "types": "./dist/styles.d.ts"
-    },
-    "./pages":{
-      "import": "./dist/pages.js",
-      "default":"./dist/pages.js",
-      "require": "./dist/pages.cjs",
-      "types": "./dist/pages.d.ts"
+    "./hooks": {
+      "import": "./dist/hooks.js",
+      "default":"./dist/hooks.js",
+      "require": "./dist/hooks.cjs",
+      "types": "./dist/hooks.d.ts"
     },
     "./tests/browser":{
       "import": "./dist/browser.js",

harp_apps/dashboard/frontend/src/Components/Layout/Layout.test.tsx

@@ -8,7 +8,7 @@ import { default as Layout } from "./Layout"
 it("renders the title and data when the query is successful", async () => {
   const result = renderWithClient(
     <MemoryRouter>
-      <Layout title="HARP" />
+      <Layout title="Harp EA" />
     </MemoryRouter>,
   )
 

harp_apps/dashboard/frontend/src/Components/index.ts

@@ -0,0 +1,5 @@
+import { Layout } from "./Layout"
+import { PageTitle, Page } from "./Page"
+import { OnQuerySuccess } from "./Utilities/OnQuerySuccess"
+
+export { Layout, PageTitle, Page, OnQuerySuccess }

harp_apps/dashboard/frontend/src/Domain/hooks.ts

@@ -0,0 +1,2 @@
+export { useSetUserFlagMutation } from "./Transactions"
+export { getRequestFromTransactionMessages, getResponseFromTransactionMessages } from "./Transactions/Utils"

harp_apps/dashboard/frontend/src/Models/index.ts

@@ -0,0 +1,2 @@
+export { type Message, type Transaction } from "./Transaction"
+export { type OverviewTransaction, type OverviewTransactionsReport, type OverviewData } from "./Overview"

harp_apps/dashboard/frontend/src/Pages/Transactions/Components/List/TransactionDataTable.tsx

@@ -1,16 +1,16 @@
 import { StarIcon } from "@heroicons/react/24/outline"
 import { formatDistance } from "date-fns"
 import { useState } from "react"
+import { DataTable } from "ui/Components/DataTable"
 
 import { useSetUserFlagMutation } from "Domain/Transactions"
 import { getRequestFromTransactionMessages, getResponseFromTransactionMessages } from "Domain/Transactions/Utils"
 import { Message, Transaction } from "Models/Transaction"
-import { DataTable } from "ui/Components/DataTable"
 
 import { Duration } from "../Duration"
 import { MessageSummary } from "../MessageSummary.tsx"
 
-interface TransactionsDataTableProps {
+export interface TransactionsDataTableProps {
   transactions: Transaction[]
   onSelectionChange?: (selected: Transaction | null) => void
   selected?: Transaction

harp_apps/dashboard/frontend/src/Pages/Transactions/Components/index.ts

@@ -0,0 +1,2 @@
+export { Duration } from "./Duration"
+export { MessageSummary } from "./MessageSummary"

harp_apps/dashboard/frontend/src/Pages/Transactions/TransactionListOnQuerySuccess.tsx

@@ -17,16 +17,18 @@ import {
   PreviousButton,
   VerticalFiltersShowButton,
 } from "./Components/Buttons.tsx"
-import { TransactionDataTable } from "./Components/List"
+import { TransactionsDataTableProps } from "./Components/List/TransactionDataTable.tsx"
 import { FiltersSidebar } from "./Containers"
 import { TransactionDetailOnQuerySuccess } from "./TransactionDetailOnQuerySuccess.tsx"
 
 export function TransactionListOnQuerySuccess({
   query,
   filters,
+  TransactionDataTable,
 }: {
   query: QueryObserverSuccessResult<ItemList<Transaction> & { total: number; pages: number; perPage: number }>
   filters: Filters
+  TransactionDataTable: React.FC<TransactionsDataTableProps>
 }) {
   const location = useLocation()
   const navigate = useNavigate()

harp_apps/dashboard/frontend/src/Pages/Transactions/TransactionListPage.test.tsx

@@ -4,11 +4,12 @@ import { expect, it } from "vitest"
 import { renderWithClient } from "tests/utils"
 
 import TransactionListPage from "./TransactionListPage.tsx"
+import { TransactionDataTable } from "./Components/List/TransactionDataTable.tsx"
 
 it("renders well when the query is successful", async () => {
   const result = renderWithClient(
     <MemoryRouter>
-      <TransactionListPage />
+      <TransactionListPage TransactionDataTable={TransactionDataTable} />
     </MemoryRouter>,
   )
 

harp_apps/dashboard/frontend/src/Pages/Transactions/TransactionListPage.tsx

@@ -15,8 +15,13 @@ import { H1 } from "ui/Components/Typography"
 import { RefreshButton } from "./Components/Buttons.tsx"
 import { OptionalPaginator } from "./Components/OptionalPaginator.tsx"
 import { TransactionListOnQuerySuccess } from "./TransactionListOnQuerySuccess.tsx"
+import { TransactionsDataTableProps } from "./Components/List/TransactionDataTable.tsx"
 
-export default function TransactionListPage() {
+interface TransactionListPageProps {
+  TransactionDataTable: React.FC<TransactionsDataTableProps>
+}
+
+export default function TransactionListPage({ TransactionDataTable }: TransactionListPageProps) {
   const location = useLocation()
 
   const navigate = useNavigate()
@@ -148,7 +153,9 @@ export default function TransactionListPage() {
       </Helmet>
 
       <OnQuerySuccess query={query}>
-        {(query) => <TransactionListOnQuerySuccess query={query} filters={filters} />}
+        {(query) => (
+          <TransactionListOnQuerySuccess query={query} filters={filters} TransactionDataTable={TransactionDataTable} />
+        )}
       </OnQuerySuccess>
     </Page>
   )

harp_apps/dashboard/frontend/src/Pages/pages.tsx → harp_apps/dashboard/frontend/src/Pages/index.ts

@@ -4,3 +4,5 @@ import { default as TransactionDetailPage } from "./Transactions/TransactionDeta
 import { default as TransactionsListPage } from "./Transactions/TransactionListPage.tsx"
 
 export { OverviewPage, SystemPage, TransactionDetailPage, TransactionsListPage }
+
+export { Duration, MessageSummary } from "./Transactions/Components"

harp_apps/dashboard/frontend/src/index.ts

@@ -0,0 +1,11 @@
+// Components
+export { Layout, PageTitle, Page } from "Components"
+export { Duration, MessageSummary, OverviewPage, SystemPage, TransactionDetailPage, TransactionsListPage } from "Pages"
+export {
+  type Message,
+  type Transaction,
+  type OverviewTransaction,
+  type OverviewTransactionsReport,
+  type OverviewData,
+} from "Models"
+export { GlobalStyles } from "Styles"

harp_apps/dashboard/frontend/src/main.tsx

@@ -1,13 +1,16 @@
-import { lazy, StrictMode } from "react"
+import { lazy, StrictMode, Suspense } from "react"
 import { createRoot } from "react-dom/client"
 import { QueryClient, QueryClientProvider } from "react-query"
 import { ReactQueryDevtools } from "react-query/devtools"
 import { createBrowserRouter, RouterProvider } from "react-router-dom"
 
 import { Layout } from "Components/Layout"
+import { TransactionDataTable } from "Pages/Transactions/Components/List"
 import GlobalStyles from "Styles/GlobalStyles"
 import "./index.css"
 
+const TransactionListPage = lazy(() => import("./Pages/Transactions/TransactionListPage"))
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -23,7 +26,11 @@ const router = createBrowserRouter([
       },
       {
         path: "transactions",
-        Component: lazy(() => import("./Pages/Transactions/TransactionListPage")),
+        element: (
+          <Suspense fallback={<div>Loading...</div>}>
+            <TransactionListPage TransactionDataTable={TransactionDataTable} />
+          </Suspense>
+        ),
       },
       {
         path: "system",

harp_apps/dashboard/frontend/src/ui/ui.tsx

@@ -0,0 +1,38 @@
+import { Badge, type BadgeColor } from "./Components/Badge"
+import { Button } from "./Components/Button"
+import { ButtonGroup } from "./Components/ButtonGroup"
+import { DataTable, type Column } from "./Components/DataTable"
+import { Radio, Checkbox } from "./Components/FormWidgets"
+import { Navbar } from "./Components/Navbar"
+import { Paginator } from "./Components/Pagination"
+import { Pane } from "./Components/Pane"
+import { SearchBar } from "./Components/SearchBar"
+import { RangeSlider, type Mark } from "./Components/Slider"
+import { Tab } from "./Components/Tabs"
+import { H1, H2, H3, H4, H5, H6, P, Section } from "./Components/Typography"
+
+export {
+  Badge,
+  BadgeColor,
+  Button,
+  ButtonGroup,
+  DataTable,
+  Column,
+  Radio,
+  Checkbox,
+  Navbar,
+  Paginator,
+  Pane,
+  SearchBar,
+  RangeSlider,
+  Mark,
+  Tab,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  P,
+  Section,
+}

harp_apps/dashboard/frontend/tsconfig.json

@@ -18,7 +18,11 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "baseUrl": "./src"
+    "baseUrl": "./src",
+    "paths": {
+      "ui/*": ["./ui/*"],
+      "Components/*": ["./Components/*"]
+    }
   },
   "include": ["src", "types/**/*.d.ts", "vitest.setup.ts", ".ladle", "vite.config.ts"],
   "references": [

harp_apps/dashboard/frontend/vite.config.ts

@@ -22,9 +22,8 @@ export default defineConfig(({ mode }) => {
       ? {
           lib: {
             entry: [
-              resolve(__dirname, "src/Components/index.tsx"),
-              resolve(__dirname, "src/Styles/styles.tsx"),
-              resolve(__dirname, "src/Pages/pages.tsx"),
+              resolve(__dirname, "src/index.ts"),
+              resolve(__dirname, "src/Domain/hooks.ts"),
               resolve(__dirname, "src/tests/mocks/browser.ts"),
             ],
             name: "harp-dashboard",
@@ -89,7 +88,6 @@ export default defineConfig(({ mode }) => {
       dts({
         insertTypesEntry: true,
         staticImport: true,
-        rollupTypes: true,
       }),
       tsconfigPaths(),
       react({