Merge pull request #33 from harold-padilla/jetstream-v3-support

Upgrading to Jetstream V3

Author: ozziexsh

package-lock.json

@@ -19,7 +19,8 @@
   "dependencies": {
     "@oclif/core": "^1.6.4",
     "@oclif/plugin-help": "^5.1.12",
-    "fs-extra": "^10.0.1"
+    "fs-extra": "^10.0.1",
+    "glob": "^8.1.0"
   },
   "devDependencies": {
     "@oclif/test": "^2.1.0",

package.json

@@ -3,6 +3,7 @@ import { execSync } from 'child_process';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as fse from 'fs-extra';
+import { glob } from 'glob';
 
 export default class Install extends Command {
   static description = 'Replaces vue with react in a fresh installation';
@@ -18,6 +19,7 @@ export default class Install extends Command {
     teams: Flags.boolean({ default: false }),
     ssr: Flags.boolean({ default: false }),
     force: Flags.boolean({ default: false }),
+    dark: Flags.boolean({ default: false }),
   };
 
   static args = [];
@@ -30,21 +32,20 @@ export default class Install extends Command {
     '@types/react': '^18.0.25',
     '@types/react-dom': '^18.0.8',
     '@types/ziggy-js': '^1.3.0',
-    '@vitejs/plugin-react': '^2.0.0',
+    '@vitejs/plugin-react': '^2.2.0',
     autoprefixer: '^10.4.7',
-    'laravel-vite-plugin': '^0.5.0',
+    'laravel-vite-plugin': '^0.5.4',
     postcss: '^8.4.14',
-    prettier: '^2.6.2',
-    tailwindcss: '^3.1.0',
+    prettier: '^2.8.4',
+    tailwindcss: '^3.2.7',
     typescript: '^4.6.3',
     vite: '^3.0.0',
   };
 
   private deps = {
-    '@headlessui/react': '^1.5.0',
-    '@inertiajs/inertia': '^0.11.1',
-    '@inertiajs/inertia-react': '^0.8.1',
-    '@inertiajs/progress': '^0.2.7',
+    '@headlessui/react': '^1.7.11',
+    '@inertiajs/core': '^1.0.2',
+    '@inertiajs/react': '^1.0.2',
     axios: '^0.26.1',
     classnames: '^2.3.1',
     lodash: '^4.17.21',
@@ -54,10 +55,8 @@ export default class Install extends Command {
   };
 
   private oldDeps = [
-    '@inertiajs/inertia',
-    '@inertiajs/inertia-vue3',
-    '@inertiajs/progress',
-    '@inertiajs/server',
+    '@inertiajs/core',
+    '@inertiajs/vue3',
     '@vitejs/plugin-vue',
     'laravel-vite-plugin',
     'vite',
@@ -161,6 +160,10 @@ export default class Install extends Command {
       fs.rmSync(path.join(process.cwd(), 'resources', 'js', 'ssr.tsx'));
     }
 
+    if (!flags.dark) {
+      this.removeDarkMode();
+    }
+
     this.log('Replacing app.blade.php');
     this.moveStub(
       'resources/views/app.blade.php',
@@ -187,4 +190,20 @@ export default class Install extends Command {
       .map(([key, value]) => `"${key}@${value}"`)
       .join(' ');
   }
+
+  private removeDarkMode() {
+    const paths = glob.sync(path.join(process.cwd(), 'resources/js/**/*.tsx'));
+    for (const path of paths) {
+      if (path.endsWith('Pages/Welcome.tsx')) {
+        continue;
+      }
+
+      const contents = fs.readFileSync(path);
+
+      fs.writeFileSync(
+        path,
+        contents.toString().replace(/\sdark:[^\s"']+/g, ''),
+      );
+    }
+  }
 }

src/commands/install.ts

@@ -19,7 +19,9 @@ export default function ActionMessage({
         leave-from-class="opacity-100"
         leaveTo="opacity-0"
       >
-        <div className="text-sm text-gray-600">{children}</div>
+        <div className="text-sm text-gray-600 dark:text-gray-400">
+          {children}
+        </div>
       </Transition>
     </div>
   );

src/stubs/resources/js/Components/ActionMessage.tsx

@@ -16,7 +16,7 @@ export default function ActionSection({
       <SectionTitle title={title} description={description} />
 
       <div className="mt-5 md:mt-0 md:col-span-2">
-        <div className="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-lg">
+        <div className="px-4 py-5 sm:p-6 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
           {children}
         </div>
       </div>

src/stubs/resources/js/Components/ActionSection.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 
-export default function ApplicationLogo({
-  className,
-}: {
-  className?: string;
-}) {
+export default function ApplicationLogo({ className }: { className?: string }) {
   return (
     <svg
       viewBox="0 0 317 48"
@@ -14,7 +10,7 @@ export default function ApplicationLogo({
     >
       <path
         d="M74.09 30.04V13h-4.14v21H82.1v-3.96h-8.01zM95.379 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM106.628 21.58V19h-3.87v15h3.87v-7.17c0-3.15 2.55-4.05 4.56-3.81V18.7c-1.89 0-3.78.84-4.56 2.88zM124.295 19v1.77c-1.08-1.35-2.7-2.19-4.89-2.19-3.99 0-7.29 3.45-7.29 7.92s3.3 7.92 7.29 7.92c2.19 0 3.81-.84 4.89-2.19V34h3.87V19h-3.87zm-4.17 11.73c-2.37 0-4.14-1.71-4.14-4.23 0-2.52 1.77-4.23 4.14-4.23 2.4 0 4.17 1.71 4.17 4.23 0 2.52-1.77 4.23-4.17 4.23zM141.544 19l-3.66 10.5-3.63-10.5h-4.26l5.7 15h4.41l5.7-15h-4.26zM150.354 28.09h11.31c.09-.51.15-1.02.15-1.59 0-4.41-3.15-7.92-7.59-7.92-4.71 0-7.92 3.45-7.92 7.92s3.18 7.92 8.22 7.92c2.88 0 5.13-1.17 6.54-3.21l-3.12-1.8c-.66.87-1.86 1.5-3.36 1.5-2.04 0-3.69-.84-4.23-2.82zm-.06-3c.45-1.92 1.86-3.03 3.93-3.03 1.62 0 3.24.87 3.72 3.03h-7.65zM164.516 34h3.87V12.1h-3.87V34zM185.248 34.36c3.69 0 6.9-2.01 6.9-6.3V13h-2.1v15.06c0 3.03-2.07 4.26-4.8 4.26-2.19 0-3.93-.78-4.62-2.61l-1.77 1.05c1.05 2.43 3.57 3.6 6.39 3.6zM203.124 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM221.224 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM225.176 22.93c0-1.62 1.59-2.37 3.15-2.37 1.44 0 2.97.57 3.6 2.1l1.65-.96c-.87-1.86-2.79-3.06-5.25-3.06-3 0-5.13 1.89-5.13 4.29 0 5.52 8.76 3.39 8.76 7.11 0 1.77-1.68 2.4-3.45 2.4-2.01 0-3.57-.99-4.11-2.52l-1.68.99c.75 1.92 2.79 3.45 5.79 3.45 3.21 0 5.43-1.77 5.43-4.32 0-5.52-8.76-3.39-8.76-7.11zM244.603 20.92V19h-4.32v-4.2l-1.98.6V19h-3.15v1.92h3.15v9.09c0 3.6 2.25 4.59 6.3 3.99v-1.74c-2.91.12-4.32.33-4.32-2.25v-9.09h4.32zM249.883 21.49V19h-1.98v15h1.98v-8.34c0-3.72 2.34-4.98 4.74-4.98v-1.92c-1.92 0-3.69.63-4.74 2.73zM263.358 18.64c-4.65 0-7.83 3.45-7.83 7.86 0 4.53 3.24 7.86 7.98 7.86 3.03 0 5.34-1.41 6.6-3.45l-1.74-1.02c-.81 1.44-2.46 2.55-4.83 2.55-3.18 0-5.55-1.89-5.97-4.95h13.17c.03-.3.06-.63.06-.93 0-4.11-2.85-7.92-7.44-7.92zm0 1.92c2.58 0 4.98 1.71 5.4 5.01h-11.19c.39-2.94 2.64-5.01 5.79-5.01zM286.848 19v2.94c-1.26-2.01-3.39-3.3-6.06-3.3-4.23 0-7.74 3.42-7.74 7.86s3.51 7.86 7.74 7.86c2.67 0 4.8-1.29 6.06-3.3V34h1.98V19h-1.98zm-5.91 13.44c-3.33 0-5.91-2.61-5.91-5.94 0-3.33 2.58-5.94 5.91-5.94s5.91 2.61 5.91 5.94c0 3.33-2.58 5.94-5.91 5.94zM309.01 18.64c-1.92 0-3.75.87-4.86 2.73-.84-1.74-2.46-2.73-4.56-2.73-1.8 0-3.42.72-4.59 2.55V19h-1.98v15H295v-8.31c0-3.72 2.16-5.13 4.32-5.13 2.13 0 3.51 1.41 3.51 4.08V34h1.98v-8.31c0-3.72 1.86-5.13 4.17-5.13 2.13 0 3.66 1.41 3.66 4.08V34h1.98v-9.36c0-3.75-2.31-6-5.61-6z"
-        fill="#000"
+        fill="fill-black dark:fill-white"
       />
       <path
         d="M11.395 44.428C4.557 40.198 0 32.632 0 24 0 10.745 10.745 0 24 0a23.891 23.891 0 0113.997 4.502c-.2 17.907-11.097 33.245-26.602 39.926z"

src/stubs/resources/js/Components/ApplicationLogo.tsx

@@ -5,12 +5,12 @@ export default function AuthenticationCard({
   children,
 }: PropsWithChildren<Record<string, unknown>>) {
   return (
-    <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
+    <div className="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
       <div>
         <AuthenticationCardLogo />
       </div>
 
-      <div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+      <div className="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
         {children}
       </div>
     </div>

src/stubs/resources/js/Components/AuthenticationCard.tsx

@@ -1,9 +1,9 @@
-import { InertiaLink } from '@inertiajs/inertia-react';
+import { Link } from '@inertiajs/react';
 import React from 'react';
 
 export default function AuthenticationCardLogo() {
   return (
-    <InertiaLink href="/">
+    <Link href="/">
       <svg
         className="w-16 h-16"
         viewBox="0 0 48 48"
@@ -19,6 +19,6 @@ export default function AuthenticationCardLogo() {
           fill="#6875F5"
         />
       </svg>
-    </InertiaLink>
+    </Link>
   );
 }

src/stubs/resources/js/Components/AuthenticationCardLogo.tsx

@@ -1,11 +1,10 @@
-import { Page } from '@inertiajs/inertia';
-import { usePage } from '@inertiajs/inertia-react';
-import classNames from 'classnames';
 import React, { useState } from 'react';
+import classNames from 'classnames';
+import useTypedPage from '@/Hooks/useTypedPage';
 
 export default function Banner() {
   const [show, setShow] = useState(true);
-  const { props } = usePage<Page<{ jetstream: any }>>();
+  const { props } = useTypedPage();
   const style = props.jetstream.flash?.bannerStyle || 'success';
   const message = props.jetstream.flash?.banner || '';
 

src/stubs/resources/js/Components/Banner.tsx

@@ -12,7 +12,7 @@ export default function Checkbox(
       type="checkbox"
       {...props}
       className={classNames(
-        'rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50',
+        'rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800',
         props.className,
       )}
     />