feat: add tailwind starting page (#30)

Co-authored-by: Martin Chełminiak <[email protected]>

packages/core/installMachine/index.ts

@@ -15,6 +15,8 @@ import { createDocFiles } from './installSteps/docs/create';
 import { pushToGitHub } from './installSteps/github/repositoryManager';
 import { InstallMachineContext, StepsCompleted } from '../types';
 import { saveStateToRcFile } from '../utils/rcFileManager';
+import { installTailwind } from './installSteps/tailwind/install';
+import { modifyHomepage } from './installSteps/homepage/install';
 
 const isStepCompleted = (stepName: keyof StepsCompleted) => {
   return ({ context }: { context: InstallMachineContext; event: AnyEventObject }) => {
@@ -58,12 +60,40 @@ const createInstallMachine = (initialContext: InstallMachineContext) => {
           always: [
             {
               guard: isStepCompleted('initializeProject'),
-              target: 'installSupabase',
+              target: 'installTailwind',
             },
           ],
           invoke: {
             src: 'initializeProjectActor',
             input: ({ context }) => context,
+            onDone: 'installTailwind',
+            onError: 'failed',
+          },
+        },
+        installTailwind: {
+          always: [
+            {
+              guard: isStepCompleted('installTailwind'),
+              target: 'modifyHomepage',
+            },
+          ],
+          invoke: {
+            src: 'installTailwindActor',
+            input: ({ context }) => context,
+            onDone: 'modifyHomepage',
+            onError: 'failed',
+          },
+        },
+        modifyHomepage: {
+          always: [
+            {
+              guard: isStepCompleted('modifyHomepage'),
+              target: 'installSupabase',
+            },
+          ],
+          invoke: {
+            src: 'modifyHomepageActor',
+            input: ({ context }) => context,
             onDone: 'installSupabase',
             onError: 'failed',
           },
@@ -273,6 +303,30 @@ const createInstallMachine = (initialContext: InstallMachineContext) => {
             }
           }),
         ),
+        installTailwindActor: createStepMachine(
+          fromPromise<void, InstallMachineContext, AnyEventObject>(async ({ input }) => {
+            try {
+              installTailwind(input.projectDir);
+              input.stateData.stepsCompleted.installTailwind = true;
+              saveStateToRcFile(input.stateData, input.projectDir);
+            } catch (error) {
+              console.error('Error in installTailwindActor:', error);
+              throw error;
+            }
+          }),
+        ),
+        modifyHomepageActor: createStepMachine(
+          fromPromise<void, InstallMachineContext, AnyEventObject>(async ({ input }) => {
+            try {
+              modifyHomepage(input.projectDir);
+              input.stateData.stepsCompleted.modifyHomepage = true;
+              saveStateToRcFile(input.stateData, input.projectDir);
+            } catch (error) {
+              console.error('Error in modifyHomepageActor:', error);
+              throw error;
+            }
+          }),
+        ),
         installSupabaseActor: createStepMachine(
           fromPromise<void, InstallMachineContext, AnyEventObject>(async ({ input }) => {
             try {

packages/core/installMachine/installSteps/homepage/install.ts

@@ -0,0 +1,16 @@
+import { homepageFiles } from '../../../templates/homepage/installConfig';
+import { templateGenerator } from '../../../utils/generator/generator';
+import { getTemplateDirectory } from '../../../utils/getTemplateDirectory';
+import { logger } from '../../../utils/logger';
+
+export const modifyHomepage = async (destinationDirectory: string) => {
+  await logger.withSpinner('tailwind', 'Setting up your welcome homepage...', async (spinner) => {
+    try {
+      const templateDirectory = getTemplateDirectory(`/templates/homepage/files/`);
+      templateGenerator(homepageFiles, templateDirectory, destinationDirectory);
+    } catch (error) {
+      spinner.fail('Tailwind installation failed');
+      console.error('Error during tailwind installation:', error);
+    }
+  });
+};

packages/core/installMachine/installSteps/tailwind/install.ts

@@ -0,0 +1,36 @@
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import { tailwindFiles } from '../../../templates/tailwind/installConfig';
+import { templateGenerator } from '../../../utils/generator/generator';
+import { getTemplateDirectory } from '../../../utils/getTemplateDirectory';
+import { logger } from '../../../utils/logger';
+
+export const installTailwind = async (destinationDirectory: string) => {
+  await logger.withSpinner('tailwind', 'Adding Tailwind...', async (spinner) => {
+    try {
+      installTailwindPackage(destinationDirectory);
+      copyTailwindFiles(destinationDirectory);
+      spinner.succeed('Tailwind installed.');
+    } catch (error) {
+      spinner.fail('Tailwind installation failed');
+      console.error('Error during tailwind installation:', error);
+    }
+  });
+};
+
+const copyTailwindFiles = (destinationDirectory: string) => {
+  const templateDirectory = getTemplateDirectory(`/templates/tailwind/files/`);
+  templateGenerator(tailwindFiles, templateDirectory, destinationDirectory);
+};
+
+const installTailwindPackage = async (destinationDirectory: string) => {
+  const packageJsonPath = path.join(destinationDirectory, 'apps/web/package.json');
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+  delete packageJson.dependencies['@repo/ui'];
+  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+  process.chdir(path.join(destinationDirectory, 'apps/web'));
+  execSync('pnpm add -D tailwindcss postcss autoprefixer', { stdio: 'inherit' });
+  process.chdir(destinationDirectory);
+  execSync('pnpm install', { stdio: 'inherit' });
+};

packages/core/templates/homepage/files/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/core/templates/homepage/files/layout.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from 'next';
+import { Roboto, Playfair_Display } from 'next/font/google';
+import './globals.css';
+
+const roboto = Roboto({
+  subsets: ['latin'],
+  weight: ['400', '700'],
+  variable: '--font-roboto',
+});
+
+const playfair = Playfair_Display({
+  subsets: ['latin'],
+  variable: '--font-playfair',
+});
+
+export const metadata: Metadata = {
+  title: 'Welcome to Stapler',
+  description: 'Experience the future of organization with Stapler',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={`${roboto.variable} ${playfair.variable}`}>
+      <body className="font-sans">{children}</body>
+    </html>
+  );
+}