Merge pull request #86 from AndyOooh/ED1-72-migrate-to-PNPM

Ed1 72 migrate to pnpm

.eslintrc.js

@@ -1,10 +1,20 @@
+// This configuration only applies to the package manager root.
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
-  root: true,
-  // This tells ESLint to load the config from the package `eslint-config-custom`
-  extends: ["custom"],
-  settings: {
-    next: {
-      rootDir: ["apps/*/"],
-    },
+  /* OLD */
+  // extends: ["custom"],
+  // root: true,
+  // settings: {
+  //   next: {
+  //     rootDir: ["apps/*/"],
+  //   },
+  // },
+
+  /* NEW */
+  ignorePatterns: ["apps/**", "packages/**"],
+  extends: ["@repo/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
   },
-};
+};

.github/workflows/push-any-build-1-job.yaml

@@ -38,12 +38,16 @@ jobs:
           path: |
             **/node_modules
           # Adding node version as cache key
-          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/yarn.lock') }}-${{ steps.node.outputs.node_version }}
+          key: ${{ runner.os }}-node_modules-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ steps.node.outputs.node_version }}
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 9
 
       - name: Install TurboRepo CLI
-        run: yarn global add turbo
+        run: pnpm i turbo --global
       - name: Install dependencies
-        run: yarn
+        run: pnpm i
       - name: Lint, Build, Test
         # run: turbo run lint --filter="...[HEAD^1]"
         run: |

.gitignore

@@ -64,3 +64,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+
+# isolate-package output
+isolate

.prettierrc.yaml

@@ -0,0 +1,6 @@
+# .prettierrc or .prettierrc.yaml
+trailingComma: 'es5'
+tabWidth: 2
+semi: true
+singleQuote: true
+printWidth: 100

README.md

@@ -91,11 +91,11 @@ This project is bootstrapped as a monorepo with [turborepo](https://turbo.build/
 
 It also includes five **packages** for shared configurations, types and UI components:
 
-- eslint-config-custom
-- tsconfig
-- tailwind-config
-- event-dee-types
-- ui (React component library)
+- @repo/eslint-config
+- @repo/tsconfig
+- @repo/tailwind-config
+- @repo/types
+- @repo/ui (React component library)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

apps/app/.eslintrc.js

@@ -1,6 +1,11 @@
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ['custom'],
+  extends: ['@repo/eslint-config/next.js'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: true,
+  },
   rules: {
     'react-hooks/exhaustive-deps': [
       'warn',

apps/app/next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  transpilePackages: ['ui'],
+  transpilePackages: ['@repo/ui'],
   experimental: {
     optimizePackageImports: [
       'react-icons/*',
@@ -16,7 +16,7 @@ const nextConfig = {
       'react-spinners',
       'recoil',
       'server-only',
-      'ui',
+      '@repo/ui',
       'use-places-autocomplete',
       'usehooks-ts',
       'yup',

apps/app/package.json

@@ -15,21 +15,19 @@
     "@react-google-maps/api": "^2.19.2",
     "date-fns": "2",
     "firebase": "^10.7.1",
-    "lodash": "^4.17.21",
     "react-firebase-hooks": "^5.1.1",
     "react-hook-form": "7.48.2",
-    "react-spinners": "^0.13.8",
     "recoil": "^0.7.7",
     "server-only": "^0.0.1",
-    "ui": "*",
+    "@repo/ui": "workspace:*",
     "use-places-autocomplete": "^4.0.1",
     "usehooks-ts": "^2.9.1",
     "yup": "1.3.2"
   },
   "devDependencies": {
-    "eslint-config-custom": "*",
-    "event-dee-types": "*",
     "@hookform/devtools": "^4.3.1",
-    "tsconfig": "*"
+    "@repo/eslint-config": "workspace:*",
+    "@repo/types": "workspace:*",
+    "@repo/tsconfig": "workspace:*"
   }
 }

apps/app/src/app/(combo)/(checksidebar)/LayoutProvider.tsx

@@ -3,10 +3,10 @@
 
 import React from 'react';
 import { useAuthState } from 'react-firebase-hooks/auth';
-import { LoaderSpinner } from '__components/ui/LoaderSpinner';
 import { auth } from '__firebase/clientApp';
 import { PageWithAuthCard } from '__components/PageWithAuthCard';
 import { CurrentUserProvider } from 'app/(protected)/components/Providers/CurrentUserProvider';
+import { LoaderSpinner } from '__components/ui/LoaderSpinner';
 
 type Props = {
   privatePage: React.ReactNode;
@@ -24,7 +24,7 @@ export const ComboSidebarLayoutProvider = ({ privatePage, publicPage, sideBar }:
   ) : user ? (
     // Most of this is copy/paste from (protected)/page.tsx and layout.tsx.
     // Create a component?
-    <section className='flex'>
+    <section className="flex">
       <CurrentUserProvider>
         {sideBar}
         <PageWithAuthCard>{privatePage}</PageWithAuthCard>

apps/app/src/app/(combo)/(checksidebar)/freelancers/[username]/components/FreelancerPrivate/FreelancerLeft/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FreelancerCard } from './components/FreelancerCard';
-import { ColoredDiv } from 'ui';
+import { ColoredDiv } from '@repo/ui';
 import { FreelancerStatsCard } from './components/FreelancerStatsCard';
 
 type Props = {};
@@ -14,11 +14,11 @@ export const FreelancerLeft = (props: Props) => {
   ];
 
   return (
-    <div className='flex flex-col gap-10 w-1/3 relative -top-28 p-4'>
+    <div className="flex flex-col gap-10 w-1/3 relative -top-28 p-4">
       <FreelancerCard />
-      {sections.map(section => (
-        <div key={section.title} className='flex flex-col gap-2'>
-          <h2 className='text-xl pl-4'>{section.title}</h2>
+      {sections.map((section) => (
+        <div key={section.title} className="flex flex-col gap-2">
+          <h2 className="text-xl pl-4">{section.title}</h2>
           {section.element}
         </div>
       ))}

apps/app/src/app/(combo)/(checksidebar)/freelancers/[username]/components/FreelancerPrivate/FreelancerPrivate.tsx

@@ -1,16 +1,16 @@
-import { ColoredDiv } from 'ui';
+import { ColoredDiv } from '@repo/ui';
 import { FreelancerLeft } from './FreelancerLeft';
 import { FreelancerRight } from './FreelancerRight';
 import { UserProvider } from 'app/(protected)/components/Providers/UserProvider';
 
 export const FreelancerPrivate = () => {
   return (
     <UserProvider>
-      <div className='w-full'>
-        <div className='relative mx-auto'>
-          <ColoredDiv color='green' direction='right' height={10.5} className='z-10 -top-10' />
+      <div className="w-full">
+        <div className="relative mx-auto">
+          <ColoredDiv color="green" direction="right" height={10.5} className="z-10 -top-10" />
         </div>
-        <div className='flex gap-8 static'>
+        <div className="flex gap-8 static">
           <FreelancerLeft />
           <FreelancerRight />
         </div>

apps/app/src/app/(combo)/(checksidebar)/freelancers/[username]/components/FreelancerPrivate/FreelancerRight/index.tsx

@@ -3,7 +3,7 @@
 // import { CurrUserContext } from 'app/(protected)/components/Providers/userProvider';
 import { UserContext } from 'app/(protected)/components/Providers/UserProvider';
 import React, { useContext } from 'react';
-import { ColoredDiv } from 'ui';
+import { ColoredDiv } from '@repo/ui';
 
 type Props = {};
 
@@ -34,12 +34,12 @@ export const FreelancerRight = (props: Props) => {
     // },
   ];
   return (
-    <div className='flex flex-1 flex-col gap-4 mt-4'>
-      {sections.map(section => (
-        <div key={section.title} className='flex flex-col gap-2'>
-          <h2 className='text-xl pl-4'>{section.title}</h2>
-          <div className='card bg-base-100'>
-            <div className='card-body'>{section.element}</div>
+    <div className="flex flex-1 flex-col gap-4 mt-4">
+      {sections.map((section) => (
+        <div key={section.title} className="flex flex-col gap-2">
+          <h2 className="text-xl pl-4">{section.title}</h2>
+          <div className="card bg-base-100">
+            <div className="card-body">{section.element}</div>
           </div>
         </div>
       ))}

apps/app/src/app/(protected)/components/HomeMain/referralAd/ReferralAd.tsx

@@ -1,37 +1,37 @@
 import React from 'react';
-import { ColoredDiv } from 'ui';
+import { ColoredDiv } from '@repo/ui';
 
 type Props = {};
 
 export const ReferralAd = (props: Props) => {
   return (
-    <div className='card w-full bg-warning/30 shadow-xl overflow-hidden'>
+    <div className="card w-full bg-warning/30 shadow-xl overflow-hidden">
       {/* <figure>
         <img src='/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg' alt='Shoes' />
       </figure> */}
       <ColoredDiv
-        color='orange'
-        direction='top'
+        color="orange"
+        direction="top"
         height={12}
         width={28}
         rotateZ={45}
-        className='absolute z-10 -right-12'
+        className="absolute z-10 -right-12"
       />
       <ColoredDiv
-        color='orange'
-        direction='bottom'
+        color="orange"
+        direction="bottom"
         height={10}
         width={10}
         // rotateZ={45}
-        className='absolute z-10 left-16 bottom-1/2 rounded-full'
+        className="absolute z-10 left-16 bottom-1/2 rounded-full"
       />
-      <div className='card-body'>
-        <h2 className='card-title'>Refer a company and earn rewards!</h2>
+      <div className="card-body">
+        <h2 className="card-title">Refer a company and earn rewards!</h2>
         <p>If a dog chews shoes whose shoes does he choose?</p>
         <p>If a dog chews shoes whose shoes does he choose?</p>
         <p>If a dog chews shoes whose shoes does he choose?</p>
-        <div className='card-actions justify-end'>
-          <button className='btn btn-warning'>Read the guide</button>
+        <div className="card-actions justify-end">
+          <button className="btn btn-warning">Read the guide</button>
         </div>
       </div>
     </div>

apps/app/src/app/(protected)/components/HomeMain/stats/Stats.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Stat } from 'ui';
+import { Stat } from '@repo/ui';
 
 export const Stats = () => {
   const statsData = [
@@ -31,8 +31,8 @@ export const Stats = () => {
 
   return (
     <div>
-      <div className='grid grid-cols-4 gap-2'>
-        {statsData.map(stat => (
+      <div className="grid grid-cols-4 gap-2">
+        {statsData.map((stat) => (
           <div key={stat.title}>
             <Stat stat={stat} />
           </div>