Integrated common/ChatWidget from PR #7

Removed esbuild step and single entry point
Minor cleanup in tsconfig

pkgs/luxdefi-ui/common/chat-widget.tsx

@@ -1,10 +1,9 @@
 'use client'
-
 import React from 'react'
 
 import { MessageCircleMore, X } from 'lucide-react'
 
-import { Button, Card, cn } from '..'
+import { Button, Card } from '../primitives'
 
 const ChatWidget: React.FC<{
   title: string,
@@ -15,33 +14,39 @@ const ChatWidget: React.FC<{
   chatbotUrl,
   question
 }) => {
-    const [showChatbot, setShowChatbot] = React.useState(false)
-
-    return (
-      <>
-        <div className={cn('fixed bottom-0 sm:bottom-20 right-0 w-full sm:max-w-[400px] h-full sm:max-h-[550px] sm:px-4 z-[1001]', showChatbot ? 'opacity-100 flex' : 'opacity-0 hidden')}>
-          <Card className='flex flex-col h-full w-full'>
-            <div className='flex px-4 py-2 h-12 bg-level-0 items-center justify-between'>
-              <h3 className='font-semibold font-heading'>{title}</h3>
-              <Button onClick={() => setShowChatbot(!showChatbot)} variant='link' size='icon' className='w-fit sm:hidden'>
-                <X />
-              </Button>
-            </div>
-            <iframe src={`${chatbotUrl}${question ? `?question=${question}` : ''}`} className='h-full' />
-          </Card>
-        </div>
 
-        <Button
-          variant='outline'
-          size='link'
-          onClick={() => setShowChatbot(!showChatbot)}
-          className='fixed bottom-4 right-0 h-12 w-12 mx-4 rounded-full'
-        >
-          {showChatbot ? <X /> : <MessageCircleMore />}
-        </Button>
-      </>
-    )
-  }
+  const [showChatbot, setShowChatbot] = React.useState<boolean>(false)
 
-export default ChatWidget
+  const onClick = () => { setShowChatbot(!showChatbot) }
+
+  const iframeSrc = chatbotUrl + (question ? `?question=${question}` : '')
 
+  return (<>
+    <div className={
+      'fixed bottom-0 sm:bottom-20 right-0 w-full h-full ' + 
+      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-[1001] ' +  
+      (showChatbot ? 'flex' : 'hidden')
+    }>
+      <Card className='flex flex-col h-full w-full'>
+        <div className='flex px-4 py-2 h-12 bg-level-0 items-center justify-between'>
+          <h3 className='font-semibold font-heading'>{title}</h3>
+          <Button onClick={onClick} variant='link' size='icon' className='w-fit sm:hidden'>
+            <X />
+          </Button>
+        </div>
+        <iframe src={iframeSrc} className='h-full' />
+      </Card>
+    </div>
+
+    <Button
+      variant='outline'
+      size='link'
+      onClick={onClick}
+      className='fixed bottom-4 right-0 h-12 w-12 mx-4 rounded-full'
+    >
+      {showChatbot ? <X /> : <MessageCircleMore />}
+    </Button>
+  </>)
+}
+
+export default ChatWidget

pkgs/luxdefi-ui/common/index.ts

@@ -1,14 +1,16 @@
-export * as Icons from './icons'
+export { default as ChatWidget } from './chat-widget'
 export { default as ContactDialog } from './contact-dialog'
-export { default as Logo } from './logo'
-export { default as Main } from './main'
+export { default as Copyright} from './copyright'
+export { default as DrawerMenu } from './drawer-menu'
 export { default as Footer } from './footer'
 export { default as Header } from './header'
-export { default as DrawerMenu } from './drawer-menu'
+export { 
+  default as HeadMetadata, 
+  getTitleFromTemplateString, 
+  TwitterComponent
+} from './head-metadata'
+export * as Icons from './icons'
+export { default as Logo } from './logo'
+export { default as Main } from './main'
 export { default as MiniChart } from './mini-chart'
-export { default as Copyright} from './copyright'
-export { default as HeadMetadata, getTitleFromTemplateString, TwitterComponent} from './head-metadata'
 export { default as NavItems} from './nav-items'
-
-
-

pkgs/luxdefi-ui/package.json

@@ -36,8 +36,8 @@
     "luxdefi"
   ],
   "scripts": {
-    "build": "rm -rf dist && node ./esbuild.mjs",
-    "tc": "tsc --noEmit --emitDeclarationOnly false",
+    "build": "tsc",
+    "tc": "tsc",
     "clean": "rm -rf dist && rm -rf node_modules"
   },
   "dependencies": {
@@ -82,8 +82,6 @@
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "autoprefixer": "^10.4.16",
-    "esbuild": "^0.17.19",
-    "esbuild-style-plugin": "^1.6.3",
     "path": "^0.12.7",
     "postcss": "^8.4.33",
     "postcss-import": "^16.0.0",

pkgs/luxdefi-ui/tsconfig.base.json

@@ -1,15 +1,17 @@
 { // https://esbuild.github.io/content-types/#tsconfig-json
   "compilerOptions": {
+    "target": "es2020",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "incremental": true,
-    "esModuleInterop": true,
+    "incremental": false,
     "module": "esnext",
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
+    "esModuleInterop": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
   }

pkgs/luxdefi-ui/tsconfig.json

@@ -8,24 +8,9 @@
     "node_modules",
     "./dist",
   ],
-  "plugins": [
-    {
-      "name": "next"
-    }
-  ],
-  // re emit settings: https://www.simonboisset.com/en/blog/publish-npm-library-with-esbuild
-  // https://esbuild.github.io/content-types/#tsconfig-json
+  "plugins": [{ "name": "next"}],
   "compilerOptions": {
-    "target": "es2020",
-    "declaration": true,
-    "declarationMap": true,
-    "verbatimModuleSyntax": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "outDir": "./dist",
-    "lib": [
-      "dom",
-      "es2015"
-    ]
+    "declaration": false,
+    "noEmit": true
   }
 }