ENG-0000 fix(portal,1ui): resolve all remaining typescript and build issues (#466)

## Affected Packages

Apps

- [x] portal

Packages

- [x] 1ui
- [ ] api
- [ ] protocol
- [ ] sdk

Tools

- [ ] tools

## Overview

- Stop tsc from checking types of consumed packages
- Fix remaining type errors in portal
- Make 1ui emit types and the have it be a `composite` library so that
the types can be included as references in portal

Source:
microsoft/TypeScript#38538 (comment)

## Screen Captures

If applicable, add screenshots or screen captures of your changes.

## Declaration

- [x] I hereby declare that I have abided by the rules and regulations
as outlined in the
[CONTRIBUTING.md](https://github.com/0xIntuition/intuition-ts/blob/main/CONTRIBUTING.md)

Author: rahulr8

apps/portal/app/components/follow/follow-form.tsx

@@ -105,7 +105,7 @@ export default function FollowForm({
               <div className="w-full bg-neutral-50/5 rounded-lg border border-neutral-300/10 flex-col justify-start items-start inline-flex">
                 <ActivePositionCard
                   value={Number(formatBalance(user_assets, 18, 4))}
-                  claimPosition={`${user_assets > '0' ? 'claimFor' : ''}`}
+                  claimPosition={user_assets > '0' ? 'claimFor' : null}
                 />
               </div>
             </div>

apps/portal/app/components/list/activity.tsx

@@ -202,7 +202,7 @@ function ActivityItem({
             <ClaimRow
               claimsFor={activity.claim.for_num_positions}
               claimsAgainst={activity.claim.against_num_positions}
-              amount={+formatBalance(activity.claim.assets_sum, 18, 4)}
+              tvl={+formatBalance(activity.claim.assets_sum, 18, 4)}
               onClick={() => {
                 if (activity.claim) {
                   navigate(`${PATHS.CLAIM}/${activity.claim.claim_id}`)

apps/portal/app/components/list/list-identity-card-portal.tsx

@@ -3,7 +3,6 @@ import {
   Button,
   CurrencyType,
   Icon,
-  Identity,
   Text,
   TextVariant,
   TextWeight,
@@ -32,7 +31,7 @@ export const ListIdentityCardPortal: React.FC<ListIdentityCardPortalProps> = ({
       style={{ height: '18rem' }}
     >
       <Avatar
-        variant={Identity.nonUser as unknown as number}
+        variant="non-user"
         src={imgSrc}
         name={displayName}
         className="mb-4 w-16 h-16"

apps/portal/app/components/list/save-form.tsx

@@ -123,7 +123,7 @@ export default function SaveForm({
               <div className="w-full bg-neutral-50/5 rounded-lg border border-neutral-300/10 flex-col justify-start items-start inline-flex">
                 <ActivePositionCard
                   value={Number(formatBalance(user_assets, 18, 4))}
-                  claimPosition={`${user_assets > '0' ? 'claimFor' : ''}`}
+                  claimPosition={user_assets > '0' ? 'claimFor' : null}
                 />
               </div>
             </div>

apps/portal/app/components/profile/connections-header.tsx

@@ -22,7 +22,7 @@ interface ConnectionsHeaderProps {
   variant: ConnectionsHeaderVariantType
   subject: IdentityPresenter
   predicate: IdentityPresenter
-  object: IdentityPresenter
+  object: IdentityPresenter | null
   claim_id: string
   totalFollowers: number
   totalStake: string

apps/portal/app/components/tags/tags-modal.tsx

@@ -26,6 +26,7 @@ export default function TagsModal({
       }}
     >
       <DialogContent className="bg-neutral-950 rounded-xl shadow border border-solid border-black/10 h-[550px] overflow-hidden flex flex-col">
+        {/* @ts-ignore TODO: jp - userWallet is a required prop. Where should it come from? */}
         <TagsForm
           identity={identity}
           mode={mode}

apps/portal/app/lib/state/store.ts

@@ -63,6 +63,7 @@ export const addIdentitiesListModalAtom = atom<{
   id: null,
 })
 
+// @ts-ignore TODO: jp - identity is passed as a prop to atom, but it does not exist in the atom definition
 export const saveListModalAtom = atom<{
   isOpen: boolean
   id: string | null

apps/portal/app/lib/utils/quest.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck content-collections folder is not available at build time
 import { QuestCondition } from '@0xintuition/api'
 
 import { allQuests, QuestContentType } from 'content-collections'

apps/portal/app/routes/app+/quest+/index.tsx

@@ -2,11 +2,11 @@ import { Suspense } from 'react'
 
 import {
   formatWalletAddress,
+  ProfileCardHeader,
   Separator,
   Skeleton,
   Text,
 } from '@0xintuition/1ui'
-import { ProfileCardHeader } from '@0xintuition/1ui/src/components/ProfileCard/components'
 import {
   GetUserByWalletResponse,
   QuestNarrative,

apps/portal/package.json

@@ -8,8 +8,7 @@
     "build": "remix vite:build --emptyOutDir",
     "dev": "remix vite:dev",
     "start": "NODE_OPTIONS='--import ./instrumentation.server.mjs' PORT=8080 remix-serve ./build/server/index.js",
-    "lint:fix": "pnpm lint --fix",
-    "typecheck": "tsc --noEmit -p ./tsconfig.json"
+    "lint:fix": "pnpm lint --fix"
   },
   "repository": {
     "type": "git",

apps/portal/project.json

@@ -16,6 +16,13 @@
       "options": {
         "config": "apps/portal/vitest.config.ts"
       }
+    },
+    "typecheck": {
+      "dependsOn": ["^build"],
+      "command": "tsc",
+      "options": {
+        "cwd": "apps/portal"
+      }
     }
   }
 }

apps/portal/tsconfig.json

@@ -22,5 +22,10 @@
     "outDir": "./build"
   },
   "include": ["**/*.ts", "**/*.tsx", "tailwind.config.js"],
-  "exclude": ["node_modules", "dist", "**/packages/**/*"]
+  "exclude": ["node_modules", "build", "./.content-collections"],
+  "references": [
+    {
+      "path": "../../packages/1ui"
+    }
+  ]
 }

nx.json

@@ -7,7 +7,7 @@
   },
   "targetDefaults": {
     "build": {
-      "dependsOn": ["^build"],
+      "dependsOn": ["^build", "typecheck"],
       "outputs": ["{projectRoot}/dist"],
       "cache": true
     },
@@ -22,16 +22,6 @@
     },
     "typecheck": {
       "cache": true
-    },
-    "@nx/js:tsc": {
-      "cache": true,
-      "dependsOn": ["^build"],
-      "inputs": ["default", "^default"]
-    },
-    "@nx/remix:build": {
-      "cache": true,
-      "dependsOn": ["^build"],
-      "inputs": ["default", "^default"]
     }
   },
   "release": {

package.json

@@ -10,11 +10,10 @@
     "1ui:lint": "nx lint @0xintuition/1ui",
     "1ui:test": "nx test @0xintuition/1ui --reporter=verbose",
     "1ui:typecheck": "nx typecheck @0xintuition/1ui",
-    "portal:dev": "nx dev @0xintuition/portal",
-    "portal:start": "nx start @0xintuition/portal",
-    "portal:typecheck": "nx typecheck @0xintuition/portal",
     "api:build": "nx build @0xintuition/api",
     "api:lint": "nx lint @0xintuition/api",
+    "portal:dev": "nx dev @0xintuition/portal",
+    "portal:start": "nx start @0xintuition/portal",
     "portal:build": "nx build @0xintuition/portal",
     "portal:lint": "nx lint @0xintuition/portal",
     "portal:test": "nx test @0xintuition/portal --reporter=verbose",

packages/1ui/package.json

@@ -3,6 +3,7 @@
   "version": "0.3.0",
   "description": "Design system",
   "main": "src/index.js",
+  "types": "src/index.d.ts",
   "scripts": {
     "dev": "tsup --watch",
     "lint:fix": "pnpm lint --fix",

packages/1ui/src/components/ActivePositionCard/ActivePositionCard.tsx

@@ -6,7 +6,7 @@ import { Tag, TagSize, TagVariant, Text, TextVariant } from '..'
 
 export interface ActivePositionCardProps
   extends React.HTMLAttributes<HTMLDivElement> {
-  claimPosition?: ClaimPositionType
+  claimPosition?: ClaimPositionType | null
   value: number
   currency?: CurrencyType
 }

packages/1ui/src/components/ClaimPositionRow/ClaimPositionRow.tsx

@@ -29,14 +29,14 @@ interface CommonProps extends React.HTMLAttributes<HTMLDivElement> {
   feesAccrued: number
   updatedAt?: string
   tags?: TagWithValueProps[]
+  claimsForValue?: number
+  claimsAgainstValue?: number
 }
 
 interface UserVariantProps extends CommonProps {
   variant: 'user'
   claimsFor?: number
   claimsAgainst?: number
-  claimsForValue?: number
-  claimsAgainstValue?: number
   name: string
   avatarSrc: string
   walletAddress: string
@@ -46,8 +46,6 @@ interface ClaimVariantProps extends CommonProps {
   variant: 'claim'
   claimsFor: number
   claimsAgainst: number
-  claimsForValue: number
-  claimsAgainstValue: number
   name?: never
   avatarSrc?: never
   walletAddress?: never

packages/1ui/src/components/ClaimRow/ClaimRow.tsx

@@ -7,8 +7,8 @@ import { CurrencyType } from 'types'
 export interface ClaimRowProps extends React.HTMLAttributes<HTMLDivElement> {
   claimsFor: number
   claimsAgainst: number
-  claimsForValue: number
-  claimsAgainstValue: number
+  claimsForValue?: number
+  claimsAgainstValue?: number
   tvl: number
   currency?: CurrencyType
 }
@@ -17,8 +17,8 @@ const ClaimRow = ({
   claimsFor = 0,
   claimsAgainst = 0,
   tvl,
-  claimsForValue,
-  claimsAgainstValue,
+  claimsForValue = 0,
+  claimsAgainstValue = 0,
   currency,
   children,
   className,

packages/1ui/src/components/ProfileCard/index.ts

@@ -1 +1,2 @@
 export * from './ProfileCard'
+export * from './components'

packages/1ui/src/index.d.ts

@@ -0,0 +1,6 @@
+import './styles/globals.css'
+
+export * from './styles'
+export * from './components'
+export * from './utils'
+export * from './types'

packages/1ui/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "baseUrl": "./src",
-    "outDir": "../../dist/packages/1ui"
+    "outDir": "../../dist/packages/1ui",
+    "composite": true
   },
   "include": ["src"]
 }