alchemy 0.2.5 → 0.3.1

package/src/web/shadcn.ts

@@ -0,0 +1,219 @@
+import { exec } from "child_process";
+import path from "path";
+import { promisify } from "util";
+import type { Context } from "../context";
+import { Folder, StaticJsonFile } from "../fs";
+import { StaticTypeScriptFile } from "../fs/static-typescript-file";
+import { Resource } from "../resource";
+import { ShadcnComponent } from "./shadcn-component";
+
+const execAsync = promisify(exec);
+
+/**
+ * Properties for initializing Shadcn UI
+ */
+export interface ShadcnUIProps {
+  /**
+   * The working directory where Shadcn UI should be installed
+   */
+  cwd: string;
+
+  /**
+   * The base color to use
+   * @default "neutral"
+   */
+  baseColor?: "neutral" | "gray" | "zinc" | "stone" | "slate";
+
+  /**
+   * Use default configuration
+   * @default false
+   */
+  defaults?: boolean;
+
+  /**
+   * Force overwrite of existing configuration
+   * @default false
+   */
+  force?: boolean;
+
+  /**
+   * Mute output
+   * @default false
+   */
+  silent?: boolean;
+
+  /**
+   * Use the src directory when creating a new project
+   * @default true
+   */
+  srcDir?: boolean;
+
+  /**
+   * Use css variables for theming
+   * @default true
+   */
+  cssVariables?: boolean;
+
+  /**
+   * The components to add
+   */
+  components?: string[];
+
+  /**
+   * Whether tailwind is already installed and configured.
+   * Shadcn UI requires Tailwind CSS to be installed and configured.
+   * @default false
+   */
+  tailwind?: boolean;
+
+  /**
+   * Whether react is already installed
+   * @default false
+   */
+  react?: boolean;
+}
+
+/**
+ * Shadcn UI resource
+ */
+export interface ShadcnUI extends ShadcnUIProps, Resource<"project::ShadcnUI"> {
+  /**
+   * The working directory where Shadcn UI is installed
+   */
+  cwd: string;
+
+  /**
+   * The ui directory
+   */
+  ui: Folder;
+
+  /**
+   * The lib directory
+   */
+  lib: Folder;
+}
+
+/**
+ * Initializes Shadcn UI in a project directory
+ *
+ * @example
+ * // Initialize Shadcn UI with default settings
+ * const shadcn = await ShadcnUI("my-shadcn", {
+ *   cwd: "my-project",
+ *   tailwind: true,  // Tailwind must be installed separately
+ *   react: true     // React must be installed separately
+ * });
+ *
+ * @example
+ * // Initialize Shadcn UI with custom settings and components
+ * const shadcn = await ShadcnUI("custom-shadcn", {
+ *   cwd: "my-project",
+ *   baseColor: "zinc",
+ *   force: true,
+ *   components: ["button", "card", "input"],
+ *   tailwind: true,  // Tailwind must be installed separately
+ *   react: true     // React must be installed separately
+ * });
+ */
+export const ShadcnUI = Resource(
+  "project::ShadcnUI",
+  async function (
+    this: Context<ShadcnUI>,
+    id: string,
+    props: ShadcnUIProps,
+  ): Promise<ShadcnUI> {
+    if (this.phase === "delete") {
+      // For a delete phase, we don't perform any action
+      // as removing Shadcn UI would require removing many files
+      // which could be destructive to the project
+      console.log(
+        "Note: ShadcnUI delete phase does not remove installed components",
+      );
+
+      return this.destroy();
+    }
+
+    // Setup execAsync with the correct cwd
+    const exec = (command: string) => execAsync(command, { cwd: props.cwd });
+
+    // Ensure React is installed if not already
+    if (!props.react) {
+      await exec(`bun add react react-dom`);
+    }
+
+    // Install shadcn dependencies
+    await exec(`bun add -D @types/node`);
+
+    // Create components.json directly instead of running shadcn init
+    await StaticJsonFile(path.join(props.cwd, "components.json"), {
+      $schema: "https://ui.shadcn.com/schema.json",
+      style: props.cssVariables !== false ? "default" : "new-york",
+      tsx: true,
+      rsc: false,
+      tailwind: {
+        config: "tailwind.config.js",
+        css:
+          props.srcDir !== false
+            ? "src/styles/globals.css"
+            : "styles/globals.css",
+        baseColor: props.baseColor || "neutral",
+        cssVariables: props.cssVariables !== false,
+      },
+      aliases: {
+        components: props.srcDir !== false ? "@/components" : "./components",
+        utils: props.srcDir !== false ? "@/lib/utils" : "./lib/utils",
+      },
+    });
+
+    // Ensure ui components directory exists
+    const ui = await Folder(
+      path.join(
+        props.cwd,
+        props.srcDir !== false ? "src" : "",
+        "components",
+        "ui",
+      ),
+    );
+
+    // Create lib directory
+    const libPath = path.join(
+      props.cwd,
+      props.srcDir !== false ? "src" : "",
+      "lib",
+    );
+    const lib = await Folder(libPath);
+
+    // Create utils.ts file
+    const utilsContent = `
+      import { type ClassValue, clsx } from "clsx";
+      import { twMerge } from "tailwind-merge";
+       
+      export function cn(...inputs: ClassValue[]) {
+        return twMerge(clsx(inputs));
+      }
+    `;
+
+    await StaticTypeScriptFile(path.join(libPath, "utils.ts"), utilsContent);
+
+    // Install clsx and tailwind-merge
+    await exec(`bun add clsx tailwind-merge`);
+
+    // Install requested components
+    if (props.components && props.components.length > 0) {
+      for (const componentName of props.components) {
+        await ShadcnComponent(`shadcn-component-${componentName}`, {
+          name: componentName,
+          cwd: props.cwd,
+          force: props.force,
+          silent: props.silent,
+        });
+      }
+    }
+
+    return this({
+      ...props,
+      ui,
+      lib,
+    });
+  },
+);

package/src/web/tailwind.ts

@@ -0,0 +1,167 @@
+import { exec } from "child_process";
+import path from "path";
+import { promisify } from "util";
+import type { Context } from "../context";
+import { Folder, StaticTextFile } from "../fs";
+import { Resource } from "../resource";
+
+const execAsync = promisify(exec);
+
+/**
+ * Framework types supported by the Tailwind resource
+ */
+export type TailwindFramework = "vite" | "astro" | "next" | "standalone";
+
+/**
+ * Properties for Tailwind configuration
+ */
+export interface TailwindConfigProps {
+  /**
+   * The working directory where Tailwind should be installed
+   */
+  cwd: string;
+
+  /**
+   * The framework being used (determines which dependencies to install)
+   * @default "standalone"
+   */
+  framework?: TailwindFramework;
+
+  /**
+   * The path to the CSS file where Tailwind directives should be added
+   * If not provided, a new file will be created at src/styles/base.css
+   */
+  cssPath?: string;
+
+  /**
+   * Custom additional packages to install with Tailwind
+   */
+  additionalPackages?: string[];
+}
+
+/**
+ * Tailwind configuration resource
+ */
+export interface TailwindConfig
+  extends TailwindConfigProps,
+    Resource<"config::TailwindConfig"> {
+  /**
+   * The working directory where Tailwind is installed
+   */
+  cwd: string;
+}
+
+/**
+ * Installs and configures Tailwind CSS for a project
+ *
+ * @example
+ * // Install Tailwind for a Vite project
+ * const tailwind = await TailwindConfig("vite-tailwind", {
+ *   cwd: "my-vite-app",
+ *   framework: "vite"
+ * });
+ *
+ * @example
+ * // Install Tailwind for an Astro project
+ * const tailwind = await TailwindConfig("astro-tailwind", {
+ *   cwd: "my-astro-app",
+ *   framework: "astro"
+ * });
+ *
+ * @example
+ * // Install Tailwind as standalone with a custom CSS path
+ * const tailwind = await TailwindConfig("custom-tailwind", {
+ *   cwd: "my-project",
+ *   cssPath: "src/css/main.css",
+ *   additionalPackages: ["@tailwindcss/typography", "@tailwindcss/forms"]
+ * });
+ */
+export const TailwindConfig = Resource(
+  "config::TailwindConfig",
+  async function (
+    this: Context<TailwindConfig>,
+    id: string,
+    props: TailwindConfigProps,
+  ): Promise<TailwindConfig> {
+    if (this.phase === "delete") {
+      // Nothing to clean up specifically for Tailwind
+      return this.destroy();
+    }
+
+    const framework = props.framework || "standalone";
+
+    // Setup execAsync with the correct cwd
+    const exec = (command: string) => execAsync(command, { cwd: props.cwd });
+
+    // Install Tailwind and framework-specific dependencies
+    await installTailwindDependencies(framework);
+
+    // Create CSS file with Tailwind directives
+    await createTailwindCssFile();
+
+    return this({
+      ...props,
+      framework: framework,
+    });
+
+    /**
+     * Install Tailwind and framework-specific dependencies
+     */
+    async function installTailwindDependencies(framework: TailwindFramework) {
+      const basePackages = ["tailwindcss", "postcss", "autoprefixer"];
+
+      // Add framework-specific packages
+      const frameworkPackages = getFrameworkPackages(framework);
+
+      // Add custom additional packages
+      const additionalPackages = props.additionalPackages || [];
+
+      // Combine all packages
+      const allPackages = [
+        ...basePackages,
+        ...frameworkPackages,
+        ...additionalPackages,
+      ];
+
+      // Install all packages
+      await exec(`bun add -D ${allPackages.join(" ")}`);
+    }
+
+    /**
+     * Get framework-specific packages for Tailwind
+     */
+    function getFrameworkPackages(framework: TailwindFramework): string[] {
+      switch (framework) {
+        case "vite":
+          return ["@tailwindcss/vite"];
+        case "astro":
+          return ["@astrojs/tailwind"];
+        case "next":
+          return [];
+        case "standalone":
+        default:
+          return [];
+      }
+    }
+
+    /**
+     * Create or update CSS file with Tailwind directives
+     */
+    async function createTailwindCssFile() {
+      const tailwindDirectives = `@import 'tailwindcss';`;
+
+      // Determine CSS file path
+      const cssPath =
+        props.cssPath || path.join(props.cwd, "src", "styles", "global.css");
+
+      // Create directory structure if needed
+      const cssDir = path.dirname(cssPath);
+      await Folder(path.join(id, "css-dir"), {
+        path: cssDir,
+      });
+
+      // Create CSS file with Tailwind directives
+      await StaticTextFile(cssPath, tailwindDirectives);
+    }
+  },
+);

package/src/{vite → web}/vite.ts

@@ -1,11 +1,12 @@
 import { exec } from "child_process";
-import fs from "fs/promises";
 import path from "path";
 import { promisify } from "util";
 import type { Context } from "../context";
+import { Folder, StaticJsonFile, StaticTypeScriptFile } from "../fs";
 import { Resource } from "../resource";
-import { ShadcnComponent } from "../shadcn/component";
 import { rm } from "../util/rm";
+import { ShadcnComponent } from "./shadcn-component";
+import { TailwindConfig } from "./tailwind";
 
 const execAsync = promisify(exec);
 
@@ -113,6 +114,11 @@ export interface ViteProjectProps {
    * @default false
    */
   overwrite?: boolean;
+  /**
+   * Whether to delete the project folder during the delete phase
+   * @default true
+   */
+  delete?: boolean;
 }
 
 export interface ViteProject extends ViteProjectProps, Resource {
@@ -135,9 +141,8 @@ export const ViteProject = Resource(
     const phase = this.phase;
     if (this.phase === "delete") {
       try {
-        if (await fs.exists(props.name)) {
-          // TODO: OS agnostic - fs.rm is slow to delete node_modules/
-          await execAsync("rm -rf " + props.name);
+        if (props.delete !== false) {
+          await execAsync(`rm -rf ${props.name}`);
         }
       } catch (error) {
         console.error(`Error deleting project ${id}:`, error);
@@ -174,6 +179,12 @@ export const ViteProject = Resource(
 
       const cwd = path.resolve(process.cwd(), props.name);
 
+      // Create folder for project
+      await Folder("project-dir", {
+        path: props.name,
+        delete: props.delete,
+      });
+
       const exec = (command: string) => execAsync(command, { cwd });
 
       if (phase === "create" || props.overwrite) {
@@ -202,9 +213,12 @@ export const ViteProject = Resource(
       }
 
       async function installTailwind() {
-        await exec(`bun add tailwindcss @tailwindcss/vite`);
+        await TailwindConfig(`${id}-tailwind`, {
+          cwd: props.name,
+          framework: "vite",
+        });
 
-        await fs.writeFile(
+        await StaticTypeScriptFile(
           path.join(props.name, "vite.config.ts"),
           `import path from "path";
 import react from "@vitejs/plugin-react";
@@ -222,16 +236,6 @@ export default defineConfig({
   },
 });`,
         );
-
-        // Add Tailwind CSS import to index.css
-        const indexCssPath = path.join(props.name, "src", "index.css");
-        const currentCss = await fs.readFile(indexCssPath, "utf-8");
-        if (!currentCss.includes('@import "tailwindcss";')) {
-          await fs.writeFile(
-            indexCssPath,
-            '@import "tailwindcss";\n\n' + currentCss,
-          );
-        }
       }
 
       async function installShadcn() {
@@ -273,8 +277,14 @@ export default defineConfig({
 
         const src = path.join(props.name, "src");
         const routes = path.join(src, "routes");
-        await fs.mkdir(routes, { recursive: true });
-        await fs.writeFile(
+
+        // Create routes directory
+        await Folder("routes-dir", {
+          path: routes,
+        });
+
+        // Create root route file
+        await StaticTypeScriptFile(
           path.join(routes, "__root.tsx"),
           `import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
@@ -299,7 +309,8 @@ export const Route = createRootRoute({
 `,
         );
 
-        await fs.writeFile(
+        // Create index route file
+        await StaticTypeScriptFile(
           path.join(routes, "index.tsx"),
           `import { createLazyFileRoute } from '@tanstack/react-router'
 
@@ -316,7 +327,8 @@ function Index() {
 }`,
         );
 
-        await fs.writeFile(
+        // Create about route file
+        await StaticTypeScriptFile(
           path.join(routes, "about.tsx"),
           `import { createLazyFileRoute } from '@tanstack/react-router'
 
@@ -329,7 +341,8 @@ function About() {
 }`,
         );
 
-        await fs.writeFile(
+        // Create main.tsx
+        await StaticTypeScriptFile(
           path.join(src, "main.tsx"),
           `import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
@@ -363,43 +376,28 @@ if (!rootElement.innerHTML) {
       }
 
       async function removeUnnecessaryFiles() {
-        await Promise.all([
-          rm(path.join(props.name, "src", "App.tsx")),
-          rm(path.join(props.name, "src", "App.css")),
-        ]);
+        await rm(path.join(props.name, "src", "App.tsx"));
+        await rm(path.join(props.name, "src", "App.css"));
       }
 
       async function patchTsConfig() {
-        await Promise.all([
-          rm(path.join(props.name, "tsconfig.app.json")),
-          rm(path.join(props.name, "tsconfig.node.json")),
-          fs.writeFile(
-            path.join(props.name, "tsconfig.json"),
-            JSON.stringify(
-              {
-                extends: props.extends,
-                compilerOptions: {
-                  baseUrl: ".",
-                  paths: {
-                    "@/*": ["./src/*"],
-                  },
-                  types: ["@cloudflare/workers-types"],
-                  allowImportingTsExtensions: true,
-                  jsx: "react-jsx",
-                },
-                include: [
-                  "vite/*.ts",
-                  "src/**/*.ts",
-                  "src/**/*.tsx",
-                  "src/env.d.ts",
-                ],
-                references: props.references?.map((path) => ({ path })),
-              },
-              null,
-              2,
-            ),
-          ),
-        ]);
+        await rm(path.join(props.name, "tsconfig.app.json"));
+        await rm(path.join(props.name, "tsconfig.node.json"));
+
+        await StaticJsonFile(path.join(props.name, "tsconfig.json"), {
+          extends: props.extends,
+          compilerOptions: {
+            baseUrl: ".",
+            paths: {
+              "@/*": ["./src/*"],
+            },
+            types: ["@cloudflare/workers-types"],
+            allowImportingTsExtensions: true,
+            jsx: "react-jsx",
+          },
+          include: ["vite/*.ts", "src/**/*.ts", "src/**/*.tsx", "src/env.d.ts"],
+          references: props.references?.map((path) => ({ path })),
+        });
       }
     }
   },

package/src/web/vitepress/config.ts

@@ -0,0 +1,48 @@
+import path from "path";
+import type { DefaultTheme, ThemeOptions } from "vitepress";
+import { StaticTypeScriptFile } from "../../fs/static-typescript-file";
+
+export type VitePressConfigProps = {
+  cwd: string;
+  title?: string;
+  description?: string;
+  theme?: ThemeOptions;
+  themeConfig: DefaultTheme.Config;
+};
+
+export type VitePressConfig = Awaited<ReturnType<typeof VitePressConfig>>;
+
+export function VitePressConfig(props: VitePressConfigProps) {
+  return StaticTypeScriptFile(
+    path.join(props.cwd, ".vitepress", "config.mts"),
+    `import { transformerTwoslash } from "@shikijs/vitepress-twoslash";
+import footnotePlugin from "markdown-it-footnote";
+import { defineConfig } from "vitepress";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: ${JSON.stringify(props.title || "Alchemy")},
+  description: ${JSON.stringify(props.description || "Alchemy Docs")},
+  markdown: {
+    // @ts-ignore
+    codeTransformers: [transformerTwoslash()],
+    theme: ${JSON.stringify(
+      props.theme ?? {
+        light: "light-plus",
+        dark: "dark-plus",
+      }
+    )},
+    config: (md) => md.use(footnotePlugin),
+  },
+  // https://vitepress.dev/reference/default-theme-config
+  themeConfig: ${JSON.stringify({
+    ...props.themeConfig,
+    search: props.themeConfig.search ?? { provider: "local" },
+    nav: props.themeConfig.nav ?? [{ text: "Home", link: "/" }],
+    sidebar: props.themeConfig.sidebar ?? [],
+    socialLinks: props.themeConfig.socialLinks ?? [],
+  })}
+});
+`
+  );
+}