feat(ui/website): use shared libs configs

apps/website/app/nx-welcome.tsx

@@ -427,7 +427,7 @@ export function NxWelcome({ title }: { title: string }) {
           `,
         }}
       />
-      <div className="wrapper bg-black">
+      <div className="wrapper bg-red-400">
         <div className="container">
           <div id="welcome">
             <h1>

apps/website/app/root.tsx

@@ -1,4 +1,4 @@
-import type { LinksFunction, MetaFunction } from '@remix-run/node'
+import type { LinksFunction } from '@remix-run/node'
 
 import {
   Links,
@@ -7,16 +7,10 @@ import {
   Scripts,
   ScrollRestoration,
 } from '@remix-run/react'
-import twStyles from './tailwind.css'
 
-export const meta: MetaFunction = () => [
-  {
-    title: 'New Remix App',
-  },
-]
+import '@cuhacking/utils/global.css'
 
 export const links: LinksFunction = () => [
-  { rel: 'stylesheet', href: twStyles },
   { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
   {
     rel: 'preconnect',

apps/website/app/routes/_index.tsx

@@ -3,8 +3,8 @@ import NxWelcome from '../nx-welcome'
 
 export const meta: MetaFunction = () => {
   return [
-    { title: 'New Remix App' },
-    { name: 'description', content: 'Welcome to Remix!' },
+    { title: 'cuHacking 2025' },
+    { name: 'description', content: 'Carleton University\'s Official Hackathon.' },
   ]
 }
 

apps/website/tailwind.config.ts

@@ -1,13 +1,17 @@
-import type { Config } from 'tailwindcss'
-import { createGlobPatternsForDependencies } from '@nx/react/tailwind'
+// import type { Config } from 'tailwindcss'
+// import { createGlobPatternsForDependencies } from '@nx/react/tailwind'
 
-export default {
-  content: [
-    './app/**/*.{js,jsx,ts,tsx}',
-    ...createGlobPatternsForDependencies(__dirname),
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-} satisfies Config
+// export default {
+//   content: [
+//     './app/**/*.{js,jsx,ts,tsx}',
+//     ...createGlobPatternsForDependencies(__dirname),
+//   ],
+//   theme: {
+//     extend: {},
+//   },
+//   plugins: [],
+// } satisfies Config
+
+import { buildConfig } from '../../libs/shared/utils/src/tailwind.config'
+
+export default buildConfig(__dirname)

components.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tailwind": {
+    "config": "libs/shared/utils/tailwind.config.js",
+    "css": "libs/shared/utils/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@cuhacking/ui",
+    "utils": "@cuhacking/utils"
+  }
+}

libs/shared/config/tailwind/base.js

@@ -3,7 +3,7 @@ import { createGlobPatternsForDependencies } from '@nx/react/tailwind'
 
 export default {
   content: [
-    './app/**/*.{js,jsx,ts,tsx}',
+    '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}',
     ...createGlobPatternsForDependencies(__dirname),
   ],
   theme: {

libs/shared/ui/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/shared/ui/eslint.config.js

@@ -0,0 +1,37 @@
+// const nx = require("@nx/eslint-plugin");
+// const baseConfig = require("../../eslint.config.js");
+
+// module.exports = [
+//     ...baseConfig,
+//     ...nx.configs["flat/react"],
+//     {
+//         files: [
+//             "**/*.ts",
+//             "**/*.tsx",
+//             "**/*.js",
+//             "**/*.jsx"
+//         ],
+//         // Override or add rules here
+//         rules: {}
+//     }
+// ];
+
+import baseConfigPromise from '../../../eslint.config.js'
+
+export default (async () => {
+  const baseConfig = await baseConfigPromise
+
+  return [
+    ...baseConfig,
+    {
+      files: [
+        '**/*.ts',
+        '**/*.tsx',
+        '**/*.js',
+        '**/*.jsx',
+      ],
+      // Override or add rules here
+      rules: {},
+    },
+  ]
+})()

libs/shared/ui/project.json

@@ -1,9 +1,12 @@
 {
   "name": "ui",
-  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "libs/shared/ui/src",
   "projectType": "library",
   "tags": [],
-  "// targets": "to see all targets run: nx show project ui --web",
-  "targets": {}
+  "targets": {
+    "add-component": {
+      "executor": "@nx-extend/shadcn-ui:add"
+    }
+  }
 }

libs/shared/ui/tsconfig.json

@@ -1,15 +1,14 @@
 {
-  "extends": "../../../tsconfig.base.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "jsx": "react-jsx",
     "allowJs": false,
-    "strict": true,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": false
   },
   "references": [
     {
-      "path": "./tsconfig.storybook.json"
+      "path": "./tsconfig.lib.json"
     }
   ],
   "files": [],

libs/shared/ui/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ],
+    "outDir": "../../../dist/out-tsc"
+  },
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ]
+}

libs/shared/utils/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/shared/utils/README.md

@@ -0,0 +1,7 @@
+# utils
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test utils` to execute the unit tests via [Jest](https://jestjs.io).

libs/shared/utils/eslint.config.js

@@ -0,0 +1,37 @@
+// const nx = require("@nx/eslint-plugin");
+// const baseConfig = require("../../eslint.config.js");
+
+// module.exports = [
+//     ...baseConfig,
+//     ...nx.configs["flat/react"],
+//     {
+//         files: [
+//             "**/*.ts",
+//             "**/*.tsx",
+//             "**/*.js",
+//             "**/*.jsx"
+//         ],
+//         // Override or add rules here
+//         rules: {}
+//     }
+// ];
+
+import baseConfigPromise from '../../../eslint.config.js'
+
+export default (async () => {
+  const baseConfig = await baseConfigPromise
+
+  return [
+    ...baseConfig,
+    {
+      files: [
+        '**/*.ts',
+        '**/*.tsx',
+        '**/*.js',
+        '**/*.jsx',
+      ],
+      // Override or add rules here
+      rules: {},
+    },
+  ]
+})()

libs/shared/utils/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "utils",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/shared/utils/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project utils --web",
+  "targets": {}
+}

libs/shared/utils/src/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}