feat: clean up components and update pubkey-ui

pubkeyapp · Jan 9, 2024 · 2540279 · 2540279
1 parent 11f174a
commit 2540279
Show file tree

Hide file tree

Showing 14 changed files with 114 additions and 110 deletions.
diff --git a/libs/tools/src/lib/web/files/feature/lib/admin-__modelFileName__-create.feature.tsx.template b/libs/tools/src/lib/web/files/feature/lib/admin-__modelFileName__-create.feature.tsx.template
@@ -1,4 +1,3 @@
-import { Button, Group } from '@mantine/core'
 import { AdminCreate<%= modelClassName %>Input } from '@<%= npmScope %>/sdk'
 import { useAdminFindMany<%= modelClassName %> } from '@<%= npmScope %>/<%= app %>-<%= modelFileName %>-data-access'
 import { Admin<%= modelClassName %>UiCreateForm } from '@<%= npmScope %>/<%= app %>-<%= modelFileName %>-ui'
@@ -26,11 +25,7 @@ export function Admin<%= modelClassName %>CreateFeature() {
   return (
     <UiPage leftAction={<UiBack />} title="Create <%= modelClassName %>">
       <UiCard>
-        <Admin<%= modelClassName %>UiCreateForm submit={submit}>
-          <Group justify="right">
-            <Button type="submit">Create</Button>
-          </Group>
-        </Admin<%= modelClassName %>UiCreateForm>
+        <Admin<%= modelClassName %>UiCreateForm submit={submit} />
       </UiCard>
     </UiPage>
   )

diff --git a/libs/tools/src/lib/web/files/feature/lib/admin-__modelFileName__-detail.feature.tsx.template b/libs/tools/src/lib/web/files/feature/lib/admin-__modelFileName__-detail.feature.tsx.template
@@ -29,14 +29,14 @@ export function Admin<%= modelClassName %>DetailFeature() {
       <UiTabRoutes
         tabs={[
           {
-            value: 'overview',
+            path: 'overview',
             label: 'Overview',
-            component: <Admin<%= modelClassName %>DetailOverviewTab <%= modelPropertyName %>Id={<%= modelPropertyName %>Id} />,
+            element: <Admin<%= modelClassName %>DetailOverviewTab <%= modelPropertyName %>Id={<%= modelPropertyName %>Id} />,
           },
           {
-            value: 'settings',
+            path: 'settings',
             label: 'Settings',
-            component: <Admin<%= modelClassName %>DetailSettingsTab <%= modelPropertyName %>Id={<%= modelPropertyName %>Id} />,
+            element: <Admin<%= modelClassName %>DetailSettingsTab <%= modelPropertyName %>Id={<%= modelPropertyName %>Id} />,
           },
         ]}
       />

diff --git a/libs/tools/src/lib/web/files/ui/lib/admin-__modelFileName__-ui-create-form.tsx.template b/libs/tools/src/lib/web/files/ui/lib/admin-__modelFileName__-ui-create-form.tsx.template
@@ -1,14 +1,9 @@
+import { Button, Group } from '@mantine/core'
 import { AdminCreate<%= modelClassName %>Input } from '@<%= npmScope %>/sdk'
 import { formFieldText, UiForm, UiFormField } from '@pubkey-ui/core'
 import { ReactNode } from 'react'
 
-export function Admin<%= modelClassName %>UiCreateForm({
-  children,
-  submit,
-}: {
-  children?: ReactNode
-  submit: (res: AdminCreate<%= modelClassName %>Input) => Promise<boolean>
-}) {
+export function Admin<%= modelClassName %>UiCreateForm({ submit }: { submit: (res: AdminCreate<%= modelClassName %>Input) => Promise<boolean> }) {
   const model: AdminCreate<%= modelClassName %>Input = {
     <%= label %>: '',
   }
@@ -18,7 +13,9 @@ export function Admin<%= modelClassName %>UiCreateForm({
   ]
   return (
     <UiForm model={model} fields={fields} submit={(res) => submit(res as AdminCreate<%= modelClassName %>Input)}>
-      {children}
+      <Group justify="right">
+        <Button type="submit">Create</Button>
+      </Group>
     </UiForm>
   )
 }
diff --git a/libs/web/dev/feature/src/lib/dev-admin-routes.tsx b/libs/web/dev/feature/src/lib/dev-admin-routes.tsx
@@ -8,8 +8,8 @@ export default function DevAdminRoutes() {
       <UiTabRoutes
         grow={false}
         tabs={[
-          { value: 'new', label: 'New', component: <DevNew /> },
-          { value: 'identity-wizard', label: 'Identity Wizard', component: <DevIdentityWizard /> },
+          { path: 'new', label: 'New', element: <DevNew /> },
+          { path: 'identity-wizard', label: 'Identity Wizard', element: <DevIdentityWizard /> },
         ]}
       />
     </UiContainer>

diff --git a/libs/web/solana/feature/src/lib/solana-feature.tsx b/libs/web/solana/feature/src/lib/solana-feature.tsx
@@ -1,48 +1,18 @@
-import { Grid, NavLink } from '@mantine/core'
-import { UiNotFound } from '@pubkey-ui/core'
-import { lazy, ReactNode } from 'react'
-import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom'
+import { type UiGridRoute, UiGridRoutes } from '@pubkey-ui/core'
+import { IconNumber, IconServer, IconWallet } from '@tabler/icons-react'
+import { lazy } from 'react'
 
 export const AccountListFeature = lazy(() => import('./account/account-list-feature'))
 export const AccountDetailFeature = lazy(() => import('./account/account-detail-feature'))
 export const ClusterFeature = lazy(() => import('./cluster/cluster-feature'))
 export const CounterFeature = lazy(() => import('./counter/counter-feature'))
 
 export default function SolanaFeature() {
-  return <SolanaLayout />
-}
-export function SolanaLayout() {
-  const { pathname } = useLocation()
-  const demos: {
-    path: string
-    label?: string
-    element: ReactNode
-  }[] = [
-    { path: 'accounts', label: 'Accounts', element: <AccountListFeature /> },
+  const routes: UiGridRoute[] = [
+    { path: 'accounts', label: 'Accounts', element: <AccountListFeature />, leftSection: <IconWallet size={20} /> },
     { path: 'accounts/:address', element: <AccountDetailFeature /> },
-    { path: 'clusters', label: 'Clusters', element: <ClusterFeature /> },
-    { path: 'counter', label: 'Counter', element: <CounterFeature /> },
+    { path: 'clusters', label: 'Clusters', element: <ClusterFeature />, leftSection: <IconServer size={20} /> },
+    { path: 'counter', label: 'Counter', element: <CounterFeature />, leftSection: <IconNumber size={20} /> },
   ]
-
-  const routes = useRoutes([
-    { index: true, element: <Navigate to={demos[0].path} replace /> },
-    ...demos.map((demo) => ({ path: `${demo.path}/*`, element: demo.element })),
-    { path: '*', element: <UiNotFound to="/demo" /> },
-  ])
-
-  return (
-    <Grid>
-      <Grid.Col span={{ base: 12, sm: 2 }}>
-        {demos
-          .filter((demo) => demo.label)
-          .map((demo) => {
-            const to = `/solana/${demo.path}`
-            return (
-              <NavLink active={pathname.startsWith(to)} component={Link} key={demo.path} label={demo.label} to={to} />
-            )
-          })}
-      </Grid.Col>
-      <Grid.Col span={{ base: 12, sm: 10 }}>{routes}</Grid.Col>
-    </Grid>
-  )
+  return <UiGridRoutes basePath={`/solana`} routes={routes} />
 }
diff --git a/libs/web/solana/ui/src/lib/solana-ui-account-tokens.tsx b/libs/web/solana/ui/src/lib/solana-ui-account-tokens.tsx
@@ -6,9 +6,9 @@ import { PublicKey } from '@solana/web3.js'
 import { IconRefresh } from '@tabler/icons-react'
 import { useQueryClient } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
+import { SolanaUiAccountTokenBalance } from './solana-ui-account-token-balance'
 
 import { SolanaUiExplorerLink } from './solana-ui-explorer-link'
-import { SolanaUiAccountTokenBalance } from './solana-ui-account-token-balance'
 
 export function SolanaUiAccountTokens({ address }: { address: PublicKey }) {
   const [showAll, setShowAll] = useState(false)
@@ -61,27 +61,33 @@ export function SolanaUiAccountTokens({ address }: { address: PublicKey }) {
                   </Table.Tr>
                 </Table.Thead>
                 <Table.Tbody>
-                  {items?.map(({ account, pubkey }) => (
-                    <Table.Tr key={pubkey.toString()}>
-                      <Table.Td>
-                        <SolanaUiExplorerLink
-                          ff="monospace"
-                          label={ellipsify(pubkey.toString())}
-                          path={`account/${pubkey.toString()}`}
-                        />
-                      </Table.Td>
-                      <Table.Td>
-                        <SolanaUiExplorerLink
-                          ff="monospace"
-                          label={ellipsify(account.data.parsed.info.mint)}
-                          path={`account/${account.data.parsed.info.mint.toString()}`}
-                        />
-                      </Table.Td>
-                      <Table.Td align="right">
-                        <SolanaUiAccountTokenBalance ff="monospace" address={pubkey} />
-                      </Table.Td>
-                    </Table.Tr>
-                  ))}
+                  {items
+                    ?.sort(
+                      (a, b) =>
+                        b.account.data.parsed.info.tokenAmount.uiAmount -
+                        a.account.data.parsed.info.tokenAmount.uiAmount,
+                    )
+                    .map(({ account, pubkey }) => (
+                      <Table.Tr key={pubkey.toString()}>
+                        <Table.Td>
+                          <SolanaUiExplorerLink
+                            ff="monospace"
+                            label={ellipsify(pubkey.toString())}
+                            path={`account/${pubkey.toString()}`}
+                          />
+                        </Table.Td>
+                        <Table.Td>
+                          <SolanaUiExplorerLink
+                            ff="monospace"
+                            label={ellipsify(account.data.parsed.info.mint)}
+                            path={`account/${account.data.parsed.info.mint.toString()}`}
+                          />
+                        </Table.Td>
+                        <Table.Td align="right">
+                          <SolanaUiAccountTokenBalance ff="monospace" address={pubkey} />
+                        </Table.Td>
+                      </Table.Tr>
+                    ))}
 
                   {(query.data?.length ?? 0) > 5 && (
                     <Table.Tr>

diff --git a/libs/web/ui/core/src/index.ts b/libs/web/ui/core/src/index.ts
@@ -1,4 +1,5 @@
+export * from './lib/ui-grid'
 export * from './lib/ui-header-profile'
+export * from './lib/ui-modal-button'
 export * from './lib/ui-page-limit'
 export * from './lib/ui-search-field'
-export * from './lib/ui-grid'
diff --git a/libs/web/ui/core/src/lib/ui-header-profile.tsx b/libs/web/ui/core/src/lib/ui-header-profile.tsx
@@ -1,4 +1,4 @@
-import { Button, Group, Menu } from '@mantine/core'
+import { Button, Menu } from '@mantine/core'
 import { UserRole } from '@pubkey-stack/sdk'
 import { useAuth } from '@pubkey-stack/web-auth-data-access'
 import { UserUiAvatar } from '@pubkey-stack/web-user-ui'
@@ -27,9 +27,7 @@ export function UiHeaderProfile() {
     >
       <Menu.Target>
         <Button p={0} variant={open ? 'light' : 'default'} radius="xl">
-          <Group gap={4} p={0}>
-            <UserUiAvatar user={user} alt={user?.username ?? 'User Avatar'} radius={100} size={34} />
-          </Group>
+          <UserUiAvatar user={user} alt={user?.username ?? 'User Avatar'} radius={100} size={34} />
         </Button>
       </Menu.Target>
       <Menu.Dropdown>

diff --git a/libs/web/ui/core/src/lib/ui-modal-button.tsx b/libs/web/ui/core/src/lib/ui-modal-button.tsx
@@ -0,0 +1,33 @@
+import { ActionIcon, Button, Modal } from '@mantine/core'
+import { useDisclosure } from '@mantine/hooks'
+import { UiStack } from '@pubkey-ui/core'
+import type { ComponentType, ReactNode } from 'react'
+
+export function UiModalButton({
+  icon: Icon,
+  children,
+  label,
+  title,
+}: {
+  icon?: ComponentType<{ size: number }>
+  children: ReactNode
+  label?: ReactNode
+  title?: ReactNode
+}) {
+  const [opened, { close, open }] = useDisclosure(false)
+
+  return (
+    <>
+      <Modal opened={opened} onClose={close} title={title}>
+        <UiStack>{children}</UiStack>
+      </Modal>
+      {Icon ? (
+        <ActionIcon color="brand" variant="light" size="sm" onClick={open}>
+          <Icon size={16} />
+        </ActionIcon>
+      ) : (
+        <Button onClick={open}>{label ?? 'Open'}</Button>
+      )}
+    </>
+  )
+}
diff --git a/libs/web/ui/core/src/lib/ui-page-limit.tsx b/libs/web/ui/core/src/lib/ui-page-limit.tsx
@@ -1,10 +1,21 @@
-import { Select } from '@mantine/core'
+import { Select, SelectProps } from '@mantine/core'
 
 export function UiPageLimit({
+  data = [
+    { value: '5', label: '5' },
+    { value: '10', label: '10' },
+    { value: '20', label: '20' },
+    { value: '50', label: '50' },
+    { value: '100', label: '100' },
+    { value: '200', label: '200' },
+    { value: '500', label: '500' },
+    { value: '1000', label: '1000' },
+  ],
   setPage,
   setLimit,
   limit,
 }: {
+  data?: SelectProps['data']
   setPage: (page: number) => void
   setLimit: (limit: number) => void
   limit: number
@@ -17,16 +28,7 @@ export function UiPageLimit({
         setPage(1)
         setLimit(parseInt(value ?? '10'))
       }}
-      data={[
-        { value: '5', label: '5' },
-        { value: '10', label: '10' },
-        { value: '20', label: '20' },
-        { value: '50', label: '50' },
-        { value: '100', label: '100' },
-        { value: '200', label: '200' },
-        { value: '500', label: '500' },
-        { value: '1000', label: '1000' },
-      ]}
+      data={data}
     />
   )
 }
diff --git a/libs/web/ui/core/src/lib/ui-search-field.tsx b/libs/web/ui/core/src/lib/ui-search-field.tsx
@@ -5,6 +5,7 @@ export function UiSearchField({
   placeholder = 'Search...',
   setSearch,
   searchValue = '',
+  ...props
 }: TextInputProps & {
   setSearch: (query: string) => void
   searchValue?: string
@@ -22,6 +23,7 @@ export function UiSearchField({
           setSearch(value.trim())
         }
       }}
+      {...props}
     />
   )
 }
diff --git a/libs/web/user/feature/src/lib/admin-user-detail-feature.tsx b/libs/web/user/feature/src/lib/admin-user-detail-feature.tsx
@@ -35,14 +35,14 @@ export function AdminUserDetailFeature() {
         <UiTabRoutes
           tabs={[
             {
-              value: 'settings',
+              path: 'settings',
               label: 'Settings',
-              component: <AdminUserDetailFeatureSettings userId={userId} />,
+              element: <AdminUserDetailFeatureSettings userId={userId} />,
             },
             {
-              value: 'identities',
+              path: 'identities',
               label: 'Identities',
-              component: <AdminUserDetailFeatureIdentities userId={userId} />,
+              element: <AdminUserDetailFeatureIdentities userId={userId} />,
             },
           ]}
         />

diff --git a/package.json b/package.json
@@ -51,8 +51,8 @@
     "@nestjs/serve-static": "^4.0.0",
     "@nx/devkit": "17.2.8",
     "@prisma/client": "5.7.1",
-    "@pubkey-ui/core": "^1.1.0",
-    "@pubkey-ui/generators": "^1.1.0",
+    "@pubkey-ui/core": "^1.3.1",
+    "@pubkey-ui/generators": "^1.3.1",
     "@pubkeyapp/solana-verify-wallet": "^1.3.3",
     "@pubkeyapp/wallet-adapter-mantine-ui": "^2.3.0",
     "@solana/spl-token": "^0.3.10",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml