bundle ui lib using tsup; add shared libs with configs

apps/remix/app/root.tsx

@@ -8,11 +8,13 @@ import {
   Scripts,
   ScrollRestoration,
 } from '@remix-run/react'
+import uiStyles from '@repo/ui/styles.css'
 
-import tailwindStylesheet from '~/styles/tailwind.css'
+import tailwindStyles from '~/styles/tailwind.css'
 
 export const links: LinksFunction = () => [
-  { rel: 'stylesheet', href: tailwindStylesheet },
+  { rel: 'stylesheet', href: tailwindStyles },
+  { rel: 'stylesheet', href: uiStyles },
   ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
 ]
 

apps/remix/app/routes/_index.tsx

@@ -1,6 +1,6 @@
-import { Button, sayHi } from '@company/ui'
 import { json, type MetaFunction } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
+import { Card } from '@repo/ui/components/card'
 
 import { catsApi } from '~/api/cats.api'
 
@@ -24,17 +24,16 @@ export const loader = async () => {
 export default function Index() {
   const { cats } = useLoaderData<typeof loader>()
 
-  sayHi()
-
   return (
-    <div className="text-prose m-4">
+    <div className="m-4">
       <h1>PNPM MONOREPO</h1>
       <hr />
       <h2>Cats fetched from NestJS</h2>
       <pre>{JSON.stringify(cats, null, 2)}</pre>
-      <p>Test 2</p>
 
-      <Button onClick={() => alert('Hello!')}>Button from @company/ui</Button>
+      <Card title="Card component" href="#components">
+        Imported from internal @repo/ui package
+      </Card>
     </div>
   )
 }

apps/remix/package.json

@@ -9,11 +9,11 @@
     "start": "remix-serve ./build/index.js"
   },
   "dependencies": {
-    "@company/ui": "workspace:^",
     "@remix-run/css-bundle": "^2.3.1",
     "@remix-run/node": "^2.3.1",
     "@remix-run/react": "^2.3.1",
     "@remix-run/serve": "^2.3.1",
+    "@repo/ui": "workspace:^",
     "axios": "^1.6.2",
     "isbot": "^3.6.8",
     "react": "^18.2.0",
@@ -24,6 +24,7 @@
     "@company/types": "workspace:*",
     "@remix-run/dev": "^2.3.1",
     "@remix-run/eslint-config": "^2.3.1",
+    "@repo/tailwind-config": "workspace:^",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",

apps/remix/remix.config.js

@@ -3,7 +3,7 @@ export default {
   ignoredRouteFiles: ['**/.*'],
 
   // Bundle UI lib, so that it's not necessary to include build step within the lib itself.
-  serverDependenciesToBundle: ['@company/ui'],
+  // serverDependenciesToBundle: ['@repo/ui'],
   // Restart server when UI lib changes
   watchPaths: ['../../libs/ui/**/*'],
 }

apps/remix/tailwind.config.ts

@@ -1,24 +1,9 @@
-import aspectRatioPlugin from '@tailwindcss/aspect-ratio'
-import containerQueriesPlugin from '@tailwindcss/container-queries'
-import formsPlugin from '@tailwindcss/forms'
-import typographyPlugin from '@tailwindcss/typography'
+import sharedConfig from '@repo/tailwind-config/tailwind.config'
 import type { Config } from 'tailwindcss'
-import tailwindColors from 'tailwindcss/colors'
 
-export default {
-  content: ['./app/**/*.{js,jsx,ts,tsx}', '../../libs/ui/**/*.{js,jsx,ts,tsx}'],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        gray: tailwindColors.zinc,
-      },
-    },
-  },
-  plugins: [
-    typographyPlugin,
-    formsPlugin,
-    aspectRatioPlugin,
-    containerQueriesPlugin,
-  ],
-} satisfies Config
+const config: Config = {
+  content: ['./app/**/*.{js,jsx,ts,tsx}'],
+  presets: [sharedConfig],
+}
+
+export default config

apps/remix/tsconfig.json

@@ -15,5 +15,6 @@
 
     // Remix takes care of building everything in `remix build`.
     "noEmit": true
-  }
+  },
+  "exclude": ["node_modules", "build", "dist"]
 }

libs/tailwind-config/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@repo/tailwind-config",
+  "main": "index.ts",
+  "types": "index.ts",
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "tailwindcss": "^3.3.5"
+  }
+}

libs/tailwind-config/tailwind.config.ts

@@ -0,0 +1,22 @@
+import typographyPlugin from '@tailwindcss/typography'
+import formsPlugin from '@tailwindcss/forms'
+import type { Config } from 'tailwindcss'
+
+import tailwindColors from 'tailwindcss/colors'
+
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        gray: tailwindColors.zinc,
+      },
+      backgroundImage: {
+        'glow-conic':
+          'conic-gradient(from 180deg at 50% 50%, #2a8af6 0deg, #a853ba 180deg, #e92a67 360deg)',
+      },
+    },
+  },
+  plugins: [typographyPlugin, formsPlugin],
+} satisfies Config

libs/tsconfig/base.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "strictNullChecks": true
+  },
+  "exclude": ["node_modules"]
+}

libs/tsconfig/nextjs.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Next.js",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "plugins": [{ "name": "next" }],
+    "allowJs": true,
+    "declaration": false,
+    "declarationMap": false,
+    "incremental": true,
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "strict": false,
+    "target": "es5"
+  },
+  "include": ["src", "next-env.d.ts"],
+  "exclude": ["node_modules"]
+}

libs/tsconfig/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "@repo/tsconfig"
+}

libs/tsconfig/react-library.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "React Library",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "lib": ["ES2015", "DOM"],
+    "module": "ESNext",
+    "target": "ES6",
+    "jsx": "react-jsx",
+    "noEmit": true
+  }
+}

libs/tsconfig/remix.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Remix",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": "."
+  }
+}

libs/ui/.eslintrc.js

@@ -1,4 +1,3 @@
-/** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ['@company/eslint-config/base', '@company/eslint-config/react', 'plugin:storybook/recommended'],
-}
+  extends: ["custom/react"],
+};