Merge pull request #18 from tonik/feat/add-readme-to-cli

feat(cli-readme): add readme to cli package
tonik · Oct 30, 2024 · e1d270e · e1d270e
2 parents 08441f2 + 0279510
commit e1d270e
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,12 @@
 # Stapler CLI 🖇️
 
-**Stapler** is a CLI tool that scaffolds an entire fullstack app using a monorepo structure. It integrates **Next.js**, **Supabase**, **Payload CMS**, **Vercel**, and more, leveraging **Turbo** and **pnpm** to optimize your development workflow.
+This is a monorepo for our **Stapler** [CLI tool](https://www.npmjs.com/package/@tonik/create-stapler-app) that scaffolds an entire fullstack app using a monorepo structure. It integrates **Next.js**, **Supabase**, **Payload CMS**, **Vercel**, and more, leveraging **Turbo** and **pnpm** to optimize your development workflow.
 
 ## Requirements
+
 - node.js
 - npx
+- pnpm
 
 ## Features
 
@@ -43,18 +45,58 @@ cd packages/cli
 npm link
 ```
 
-### Running the CLI
-
 Once the CLI is linked, you can use it to create a new fullstack project by running:
 
 ```bash
-create-stapler-app
+@tonik/create-stapler-app
 ```
 
 This will scaffold a new project in the directory you're currently in.
 
+### Versioning
+
+We use [Changesets](https://github.com/changesets/changesets) for versioning.
+Currently, we're developing the alpha version of the CLI, so the versioning is not yet stable.
+
+#### Creating a New Version
+
+When you're ready to create a new version, run the following command:
+
+```bash
+pnpm changeset
+```
+
+This will run a guided process to create a new version.
+In the process you would be asked to select the type of the change (patch, minor, major) and write a summary of the changes.
+The next step is to run the following command:
+
+```bash
+pnpm changeset version
+```
+
+This will create the neccessary changeset files and update the version in the `package.json` files.
+When those changes will be pushed to the repository and merged to the `main` branch, the CI will automatically publish the new version to the npm registry.
+
 ## Project Structure
 
+```bash
+── ARCHITECTURE.md # Detailed overview of the scaffolded project structure
+├── README.md
+├── package.json # Main package.json for the monorepo
+├── packages # Monorepo packages
+│   ├── cli # Main CLI package
+│   └── core # Core package with installation logic
+│       ├── CHANGELOG.md
+│       ├── templates # Templates for the scaffolded project
+│       └── utils # Core functions
+├── pnpm-lock.yaml
+├── pnpm-workspace.yaml
+├── tsconfig.json
+└── turbo.json
+```
+
+## Scaffolded Project Structure
+
 Refer to the [ARCHITECTURE](ARCHITECTURE.md) document for an in-depth overview of the scaffolded project structure.
 
 ## Troubleshooting

diff --git a/packages/cli/README.md b/packages/cli/README.md
@@ -0,0 +1,109 @@
+# Create Stapler App 🖇️
+
+**Stapler** is a CLI tool that scaffolds an entire fullstack app.
+It integrates **Next.js**, **Supabase**, **Vercel**, and more, just by running a single command.
+The CLI guides you through the setup process and helps you create a new project in minutes.
+You don't have to be an expert to get started with Stapler.
+This amazing tool is brought to you by awesome [**Tonik**](https://www.tonik.com/) engineer team.
+
+## Requirements
+
+### System
+
+- node.js
+- pnpm (for managing the monorepo in scaffolded project)
+- gh cli (will be installed automatically if not found)
+- vercel cli (will be installed automatically if not found)
+- docker (optional), if you want to use Supabase locally
+
+### Accounts
+
+- supabase account (https://supabase.com/)
+- vercel account (https://vercel.com/)
+
+## Key Features:
+
+- Scaffolds a fullstack monorepo with the latest packages.
+- Integrates Next.js, Supabase, Payload CMS, and Vercel.
+- Provides a guided setup process for Supabase, GitHub, and Vercel.
+
+## Getting Started
+
+To create a new project, run the following command:
+
+```bash
+npx @tonik/create-stapler-app
+```
+
+This command will guide you through the setup process and create a new project in the current directory.
+
+## Project Structure
+
+```bash
+/my-stapled-app
+.
+├── .env  # Contains all the environment variables.
+├── README.md  # Main project documentation file explaining overall usage and features.
+├── apps       # Contains all the main application code (frontend or backend).
+│   ├── docs   # Documentation app, possibly a Next.js site or documentation tool.
+│   │   ├── README.md           # Documentation for the `docs` app itself.
+│   │   ├── app                 # Main Next.js `app` directory.
+│   │   ├── next-env.d.ts       # TypeScript definitions for Next.js.
+│   │   ├── next.config.mjs     # Configuration for the Next.js app.
+│   │   ├── package.json        # Dependencies and scripts for the `docs` app.
+│   │   ├── public              # Public static files (e.g., images, icons) for the `docs` app.
+│   │   └── tsconfig.json       # TypeScript configuration for the `docs` app.
+│   └── web    # The main web app of the project, likely built with Next.js and Payload CMS.
+│       ├── README.md           # Documentation specific to the `web` app.
+│       ├── app                 # Main directory for the `web` app.
+│       │   ├── (app)           # Main directory for the Next.js app.
+│       │   ├── (payload)       # Main directory for the Payload CMS app.
+│       │   └── my-route        # Example route created by Payload.
+│       ├── collections         # Payload CMS collections for managing database entities.
+│       ├── next-env.d.ts       # TypeScript definitions for Next.js.
+│       ├── next.config.mjs     # Configuration for the Next.js `web` app.
+│       ├── package.json        # Dependencies and scripts for the `web` app.
+│       ├── payload-types.ts    # Auto-generated TypeScript types based on Payload CMS collections.
+│       ├── payload.config.ts   # Payload CMS configuration file.
+│       ├── public              # Public static files (e.g., images, fonts) for the `web` app.
+│       └── tsconfig.json       # TypeScript configuration for the `web` app.
+├── package.json  # Root project dependencies and scripts (workspace-wide or shared).
+├── packages      # Reusable packages or configurations shared across apps.
+│   ├── eslint-config          # ESLint configuration for linting the project.
+│   │   ├── README.md           # Documentation for the ESLint configuration package.
+│   │   ├── library.js          # ESLint rules for JavaScript libraries.
+│   │   ├── next.js             # ESLint rules for Next.js apps.
+│   │   ├── package.json        # Dependencies for the ESLint configuration package.
+│   │   └── react-internal.js   # ESLint rules for React-related code.
+│   ├── typescript-config      # Shared TypeScript configuration across different apps.
+│   │   ├── base.json           # Base TypeScript configuration.
+│   │   ├── nextjs.json         # TypeScript configuration specific to Next.js.
+│   │   ├── package.json        # Package.json for the TypeScript configuration package.
+│   │   └── react-library.json  # TypeScript configuration for React libraries.
+│   └── ui                     # Reusable UI components or shared UI library.
+│       ├── package.json        # Dependencies for the `ui` package.
+│       ├── src                 # Source code for shared UI components.
+│       ├── tsconfig.json       # TypeScript configuration for the `ui` package.
+│       ├── tsconfig.lint.json  # TypeScript configuration for linting purposes.
+│       └── turbo               # Turbo configuration for optimizing builds in the `ui` package.
+├── pnpm-lock.yaml              # Lock file for pnpm, ensures consistency across installations.
+├── pnpm-workspace.yaml         # Configuration file for managing the pnpm workspace.
+├── supabase                    # Contains code and configuration for the Supabase backend.
+│   ├── config.toml             # Supabase configuration file.
+│   ├── package.json            # Dependencies and scripts for the Supabase backend.
+│   ├── seed.sql                # SQL seed file for initializing the database.
+│   └── src                     # Source code for Supabase-related server and client logic.
+│       ├── client.ts           # Supabase client setup.
+│       ├── index.ts            # Main entry point for Supabase backend.
+│       ├── middleware.ts       # Middleware logic for handling requests.
+│       ├── server.ts           # Server-side logic for Supabase.
+│       └── types.ts            # TypeScript types for Supabase-related entities.
+└── turbo.json                  # Turbo configuration for managing and optimizing monorepo tasks.
+
+```
+
+## Key Libraries
+
+- [Next.js](https://nextjs.org/)
+- [Supabase](https://supabase.io/)
+- [Payload CMS](https://payloadcms.com/)