Enhance project structure with new configuration options and UI components

.npmrc

@@ -1,5 +1,6 @@
 auto-install-peers = true
+enable-pre-post-scripts=true # Enable pre/post scripts (for postui:add)
 public-hoist-pattern[]=*prisma*
 public-hoist-pattern[]=*eslint-plugin-*
 public-hoist-pattern[]=@typescript-eslint/eslint-plugin
-public-hoist-pattern[]=next*
+public-hoist-pattern[]=next*

apps/homepage2/.eslintrc.js

@@ -1,11 +1,18 @@
+/* eslint-disable */
+
 module.exports = {
-  extends: ['custom', 'next'],
+  root: true,
+  extends: ['@repo/eslint-config-custom'],
+  parser: '@typescript-eslint/parser',
   rules: {
     '@next/next/no-html-link-for-pages': 'off',
+    '@next/next/no-sync-scripts': 'off',
   },
   env: {
     browser: true,
     es2021: true,
     jquery: true,
+    commonjs: true,
+    node: true,
   },
 };

apps/homepage2/package.json

@@ -14,7 +14,7 @@
     "@faker-js/faker": "^8.0.2",
     "@jsonresume/theme-papirus": "workspace:*",
     "@jsonresume/theme-stackoverflow": "workspace:*",
-    "@jsonresume/ui": "workspace:*",
+    "@repo/ui": "workspace:*",
     "@pinecone-database/pinecone": "^0.1.6",
     "@prisma/client": "^4.15.0",
     "@supabase/supabase-js": "^2.39.6",
@@ -57,7 +57,7 @@
     "@types/node": "^20.10.0",
     "caniuse-lite": "^1.0.30001566",
     "eslint": "^8.55.0",
-    "eslint-config-custom": "workspace:*",
+    "@repo/eslint-config-custom": "workspace:*",
     "eslint-config-next": "^14.2.5",
     "typescript": "^5.3.2"
   }

apps/registry/app/[username]/ProfileLayout.js

@@ -7,6 +7,7 @@ import Link from 'next/link';
 import { ProfileProvider } from './ProfileContext';
 import gravatar from 'gravatar';
 import { MapPin } from 'lucide-react';
+import { Button } from '@repo/ui/components/ui/button';
 
 export default function Layout({ children, resume, username, session }) {
   const router = useRouter();
@@ -47,32 +48,28 @@ export default function Layout({ children, resume, username, session }) {
                 {resume.basics.label}
               </p>
               <div className="flex items-center mb-2 text-sm text-gray-500">
-                <MapPin className="w-4 h-4 mr-1 text-secondary-500" />
+                <MapPin className="w-4 h-4 mr-1 text-primary" />
                 <span>
                   {resume.basics.location.countryCode ||
                     'Location not available'}
                 </span>
               </div>
               <a
                 href={`mailto:${resume.basics.email}`}
-                className="mb-4 text-sm text-secondary-500 hover:underline"
+                className="mb-4 text-sm text-primary hover:underline"
               >
                 {resume.basics.email}
               </a>
               <div className="flex flex-col items-center mt-4 space-y-2">
                 <a href={`/${username}`} target="_blank">
-                  <button className="bg-secondary-100 text-secondary-800 py-2 px-4 rounded hover:bg-secondary-200 transition-colors duration-200">
-                    View Resume
-                  </button>
+                  <Button>View Resume</Button>
                 </a>
               </div>
+              <br />
               {session && (
-                <button
-                  onClick={() => router.push('/editor')}
-                  className="mt-4 bg-secondary-500 text-white py-2 px-4 rounded hover:bg-secondary-700 transition-colors duration-200"
-                >
+                <Button onClick={() => router.push('/editor')}>
                   Edit Resume
-                </button>
+                </Button>
               )}
             </div>
           </div>
@@ -84,8 +81,8 @@ export default function Layout({ children, resume, username, session }) {
                 <span
                   className={`text-gray-700 hover:text-gray-900 py-2 px-4 rounded-full ${
                     pathname === link.href
-                      ? 'bg-secondary-500 text-white'
-                      : 'bg-secondary-100 hover:bg-secondary-200'
+                      ? 'bg-primary text-white'
+                      : 'bg-secondary-light hover:bg-secondary'
                   } transition-colors duration-200`}
                 >
                   {link.label}

apps/registry/app/components/ResumeEditor.js

@@ -5,7 +5,7 @@ import { useRef, useEffect, useState } from 'react';
 // import { render } from '../../../../themes/stackoverflow/dist';
 import { render } from '../../../../packages/jsonresume-theme-professional';
 import Button from './Button/Button';
-import Link from '@jsonresume/ui/Link';
+import Link from 'next/link';
 import schema from './schema';
 
 const HtmlIframe = ({ htmlString }) => {

apps/registry/app/components/SignIn.js

@@ -1,6 +1,7 @@
 import { Github } from 'lucide-react';
 import { signIn } from '../../auth';
 import { track } from '@vercel/analytics/server';
+import { Button } from '@repo/ui/components/ui/button';
 export default function SignIn() {
   return (
     <div className="text-lg m-8 w-[400px] mx-auto p-8 bg-white rounded-lg shadow-md">
@@ -25,12 +26,9 @@ export default function SignIn() {
           await signIn('github');
         }}
       >
-        <button
-          type="submit"
-          className="w-full py-3 px-4 bg-secondary-600 text-white rounded-md flex items-center justify-center hover:bg-secondary-700 transition-colors duration-200"
-        >
+        <Button type="submit">
           <Github size={20} className="mr-2" /> Sign in with GitHub
-        </button>
+        </Button>
       </form>
       <div className="mt-8 text-gray-500">
         <h3 className="text-gray-800 mb-3 text-xl">Upcoming Features</h3>

apps/registry/app/layout.js

@@ -3,7 +3,7 @@ import { Analytics } from '@vercel/analytics/react';
 
 import Menu from './components/Menu';
 import { auth } from '../auth';
-import './global.css';
+import '@repo/ui/globals.css';
 export const metadata = {
   title: 'JSON Resume Registry',
 };

apps/registry/lib/formatters/template.js

@@ -1,7 +1,7 @@
 import * as standard from 'jsonresume-theme-standard';
 import * as cv from 'jsonresume-theme-cv';
 import * as professional from 'jsonresume-theme-professional';
-import * as tailwind from 'jsonresume-theme-tailwind';
+// import * as tailwind from 'jsonresume-theme-tailwind';
 import * as full from 'jsonresume-theme-full';
 import * as onepage from 'jsonresume-theme-onepage';
 import * as onepageplus from 'jsonresume-theme-onepage-plus';
@@ -17,7 +17,7 @@ export const THEMES = {
   cora: require('jsonresume-theme-cora'),
   cv,
   professional,
-  tailwind,
+  // tailwind,
   elegant: require('jsonresume-theme-elegant'),
   full,
   flat,

apps/registry/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/registry/next.config.js → apps/registry/next.config.mjs

@@ -1,6 +1,6 @@
-module.exports = {
+const nextConfig = {
   reactStrictMode: true,
-  transpilePackages: ['ui'],
+  transpilePackages: ['@repo/ui'],
   async rewrites() {
     return [
       {
@@ -9,27 +9,6 @@ module.exports = {
       },
     ];
   },
-  //     {
-  //       source: '/:payload/interview',
-  //       destination: '/interview',
-  //     },
-  //     {
-  //       source: '/:payload/jobs',
-  //       destination: '/jobs',
-  //     },
-  //     {
-  //       source: '/:payload/letter',
-  //       destination: '/letter',
-  //     },
-  //     {
-  //       source: '/:payload/suggestions',
-  //       destination: '/suggestions',
-  //     },
-  //   ];
-  // },
-  compiler: {
-    styledComponents: true,
-  },
   images: {
     remotePatterns: [
       {
@@ -62,3 +41,5 @@ module.exports = {
     },
   },
 };
+
+export default nextConfig;

apps/registry/package.json

@@ -17,10 +17,10 @@
     "@jsonresume/schema": "^1.2.0",
     "@jsonresume/theme-papirus": "workspace:*",
     "@jsonresume/theme-stackoverflow": "workspace:*",
-    "@jsonresume/ui": "workspace:*",
     "@monaco-editor/react": "^4.6.0",
     "@pinecone-database/pinecone": "^0.1.6",
     "@prisma/client": "^4.15.0",
+    "@repo/ui": "workspace:*",
     "@supabase/supabase-js": "^2.39.6",
     "@tailwindcss/typography": "^0.5.13",
     "@vercel/analytics": "^1.3.1",
@@ -103,18 +103,20 @@
     "react-markdown": "^8.0.7",
     "react-speech-recognition": "^3.10.0",
     "resume-schema": "^1.0.0",
+    "sonner": "^1.5.0",
     "styled-components": "6.1.11",
     "tailwindcss": "^3.4.3",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.40.0",
+    "@repo/eslint-config-custom": "workspace:*",
     "@types/node": "^20.10.0",
     "caniuse-lite": "^1.0.30001566",
     "eslint": "^8.55.0",
-    "eslint-config-custom": "workspace:*",
     "eslint-config-next": "^14.2.5",
     "playwright": "^1.40.0",
+    "tsconfig": "workspace:*",
     "typescript": "^5.3.2"
   }
 }

apps/registry/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from '@repo/ui/postcss.config';

apps/registry/tailwind.config.ts

@@ -0,0 +1 @@
+export * from '@repo/ui/tailwind.config';

apps/registry/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "extends": "tsconfig/nextjs.json",
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "~/*": [
+        "./*"
+      ]
+    },
+    "strictNullChecks": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "next.config.mjs",
+    "postcss.config.mjs",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package.json

@@ -6,11 +6,12 @@
     "lint": "turbo run lint",
     "format": "prettier -w .",
     "prettier": "prettier -c .",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "ui:add": "pnpm --filter @repo/ui ui:add"
   },
   "devDependencies": {
     "eslint": "^8",
-    "eslint-config-custom": "workspace:*",
+    "@repo/eslint-config-custom": "workspace:*",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
     "prettier": "^2.8.0",

packages/eslint-config-custom/index.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['eslint:recommended', 'turbo', 'prettier'],
+  extends: ['eslint:recommended', 'turbo', 'prettier', 'next'],
   env: {
     es6: true,
   },