feat: setup ui package

package.json

@@ -6,6 +6,9 @@
         "dev": "turbo run dev",
         "build": "turbo run build"
     },
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.es.js",
+    "types": "dist/index.d.ts",
     "dependencies": {
         "@changesets/cli": "^2.27.1",
         "typescript": "^5.3.3"

packages/epic-ui/src/App.tsx

@@ -1,34 +1,11 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
+import Button from './components/Button'
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    <div>
+      <Button>Click me</Button>
+    </div>
   )
 }
 

packages/epic-ui/src/components/Button.tsx

@@ -0,0 +1,5 @@
+const Button = ({children}: {children: React.ReactNode}) => {
+  return <button>{children}</button>;
+}
+
+export default Button;

packages/epic-ui/src/index.ts

@@ -0,0 +1 @@
+export {default as Button} from './components/Button'

packages/epic-ui/vite.config.ts

@@ -1,7 +1,18 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import dts from 'vite-plugin-dts'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), dts()],
+  build: {
+    lib: {
+      entry: './src/main.tsx', 
+      formats: ['cjs', 'es'], 
+      fileName: (format) => `index.${format}.js`
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+    }
+  }
 })