feat: add create-rainbowkit (#444)

.changeset/cold-kings-burn.md

@@ -0,0 +1,5 @@
+---
+'@rainbow-me/create-rainbowkit': patch
+---
+
+Initial beta release

.eslintignore

@@ -1,3 +1,4 @@
 coverage
 .next
-dist
+dist
+*-app

.github/CONTRIBUTING.md

@@ -57,6 +57,44 @@ If snapshot tests fail, you can run the following command to update the snapshot
 pnpm test:update
 ```
 
+## Working on create-rainbowkit
+
+### Template
+
+To run the Next.js app template directly without any scaffolding:
+
+```bash
+pnpm dev:template:next-app
+```
+
+If you make any template changes, please be sure to commit the result of running the CLI test script. This keeps the lock file is up to date since the scaffolded test app is part of the monorepo.
+
+```bash
+pnpm test:cli:dev
+```
+
+### CLI
+
+To build the CLI in watch mode:
+
+```bash
+pnpm dev:cli
+```
+
+To scaffold a template with the CLI and start a local dev server:
+
+```bash
+pnpm test:cli:dev
+```
+
+### Linking CLI globally
+
+You can also link the create-rainbowkit command globally. This allows you to try out create-rainbowkit elsewhere on your machine. Note that it will install the latest version of RainbowKit from npm so it's possible the template will be using APIs that haven't been released yet. This is most useful for seeing what the CLI looks like for a typical consumer.
+
+```bash
+pnpm link:cli
+```
+
 ## Release notes
 
 RainbowKit uses [Changesets](https://github.com/changesets/changesets) to manage versioning and publishing.

.github/workflows/ci.yml

@@ -30,8 +30,8 @@ jobs:
       - name: Install dependencies
         run: pnpm install
       - name: Build packages
-        run: pnpm --recursive build
+        run: pnpm build
       - name: Lint and format
         run: pnpm lint
       - name: Run tests
-        run: pnpm test
+        run: pnpm test && pnpm test:cli

.pnpmfile.cjs

@@ -0,0 +1,51 @@
+function readPackage(pkg) {
+  // Filter dependencies in app templates that are present in the root package.json.
+  // This allows us to provide complete package.json files for all app templates.
+  if (/-app$/.test(pkg.name)) {
+    pkg.dependencies = omitRootDependencies(pkg.name, pkg.dependencies);
+    pkg.devDependencies = omitRootDependencies(pkg.name, pkg.devDependencies);
+  }
+
+  return pkg;
+}
+
+module.exports = {
+  hooks: {
+    readPackage,
+  },
+};
+
+function omitRootDependencies(packageName, dependencies) {
+  const packageJson = require('./package.json');
+  const rootDependencies = {
+    ...packageJson.dependencies,
+    ...packageJson.devDependencies,
+  };
+
+  const filteredDependencies = {};
+  const allowedDuplicatePackages = [
+    // We're on an older version of eslint due to eslint-config-rainbow
+    // so we need to allow multiple versions for now.
+    'eslint',
+  ];
+
+  Object.keys(dependencies).forEach(dep => {
+    if (!rootDependencies[dep] || allowedDuplicatePackages.includes(dep)) {
+      // Keep the dependency in the app template's package.json since it's not in the
+      // root package.json (or in the list of allowed duplicate packages).
+      filteredDependencies[dep] = dependencies[dep];
+    } else if (rootDependencies[dep] !== dependencies[dep]) {
+      throw new Error(
+        [
+          `Dependency ${dep} has different version in root package.json. Root: ${rootDependencies[dep]}, ${packageName}: ${dependencies[dep]}`,
+          packageName === 'generated-test-app' &&
+            'You might have stale files left over from a past create-rainbowkit run. Try running "pnpm test:cli:clean" and then "pnpm test:cli:dev" after install to regenerate test app.',
+        ]
+          .filter(Boolean)
+          .join('\n')
+      );
+    }
+  });
+
+  return filteredDependencies;
+}

.prettierignore

@@ -3,4 +3,5 @@ coverage
 dist
 packages/*/CHANGELOG.md
 site/CHANGELOG.md
-.contentlayer
+.contentlayer
+generated-test-app

package.json

@@ -5,20 +5,28 @@
   "type": "module",
   "scripts": {
     "postinstall": "husky install",
-    "dev": "pnpm --recursive --parallel dev",
+    "dev": "pnpm --recursive --parallel --filter \"!*-app\" dev",
     "dev:lib": "pnpm --filter @rainbow-me/rainbowkit dev",
     "dev:example": "pnpm dev:lib & pnpm --filter example dev",
     "dev:site": "pnpm dev:lib & pnpm --filter site dev",
+    "dev:cli": "pnpm --filter @rainbow-me/create-rainbowkit dev",
+    "dev:template:next-app": "pnpm --filter rainbowkit-next-app dev",
+    "build": "pnpm --recursive --parallel --filter \"!*-app\" build",
     "start": "pnpm dev",
     "lint": "eslint . --ext=js,jsx,mjs,ts,cjs,tsx && pnpm format:check && pnpm --recursive typecheck",
     "lint:fix": "eslint . --ext=js,jsx,mjs,ts,cjs,tsx --fix && pnpm format:fix",
     "format:check": "prettier --check \"./**/*.{ts,js,jsx,mjs,cjs,md,mdx,tsx}\"",
     "format:fix": "prettier --write \"./**/*.{ts,js,jsx,mjs,cjs,md,mdx,tsx}\"",
-    "test": "vitest",
+    "link:cli": "cd packages/create-rainbowkit && pnpm link --global",
+    "test": "pnpm test:unit",
+    "test:unit": "vitest",
     "test:update": "vitest --update",
     "test:watch": "vitest --watch",
+    "test:cli": "pnpm --filter @rainbow-me/create-rainbowkit test:build",
+    "test:cli:dev": "pnpm --filter @rainbow-me/create-rainbowkit test:dev",
+    "test:cli:clean": "rm -rf ./packages/create-rainbowkit/generated-test-app",
     "changeset": "changeset",
-    "clean": "rm -rf ./packages/rainbowkit/dist && rm -rf ./packages/rainbowkit/node_modules && pnpm install",
+    "clean": "rm -rf ./packages/rainbowkit/dist && rm -rf ./packages/rainbowkit/node_modules && rm -rf ./packages/create-rainbowkit/dist && pnpm install",
     "release": "pnpm release:verify-git && pnpm release:build && changeset publish",
     "release:verify-git": "git diff --exit-code && git rev-parse --abbrev-ref HEAD | grep \"main\"",
     "release:build": "pnpm clean && pnpm lint && pnpm test && MINIFY_CSS=true pnpm --recursive build && cp README.md packages/rainbowkit/README.md",
@@ -42,30 +50,30 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@lavamoat/preinstall-always-fail": "^1.0.0",
     "@rushstack/eslint-patch": "^1.1.0",
-    "@types/node": "^16.11.11",
-    "@types/react": "^18.0.5",
+    "@types/node": "^17.0.35",
+    "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.1",
     "@typescript-eslint/eslint-plugin": "^5.5.0",
     "@typescript-eslint/parser": "^5.5.0",
     "@vanilla-extract/esbuild-plugin": "^2.0.0",
     "@vanilla-extract/vite-plugin": "^3.1.2",
     "@wagmi/core": "^0.3.2",
     "autoprefixer": "^10.4.0",
-    "esbuild": "^0.14.1",
+    "esbuild": "^0.14.39",
     "eslint": "7.32.0",
     "eslint-config-rainbow": "^3.0.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eventemitter3": "^4.0.7",
     "husky": "^7.0.4",
-    "next": "^12.0.4",
+    "next": "^12.1.6",
     "postcss": "^8.4.6",
     "postcss-prefix-selector": "^1.15.0",
     "prettier": "^2.5.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-query": "4.0.0-beta.5",
     "recursive-readdir-files": "^2.0.7",
-    "typescript": "~4.5.2",
+    "typescript": "^4.7.2",
     "vitest": "^0.5.0",
     "wagmi": "^0.4.2"
   },

packages/create-rainbowkit/README.md

@@ -0,0 +1,17 @@
+# 🌈🚀 create-rainbowkit
+
+Scaffold a new RainbowKit project.
+
+```bash
+npm init @rainbow-me/rainbowkit
+# or
+yarn create @rainbow-me/rainbowkit
+# or
+pnpm create @rainbow-me/rainbowkit
+```
+
+## License
+
+Licensed under the MIT License, Copyright © 2022-present [Rainbow](https://rainbow.me).
+
+See [LICENSE](./LICENSE) for more information.

packages/create-rainbowkit/build.js

@@ -0,0 +1,39 @@
+/* eslint-disable no-console, import/no-extraneous-dependencies */
+import * as esbuild from 'esbuild';
+
+const isWatching = process.argv.includes('--watch');
+
+esbuild
+  .build({
+    bundle: true,
+    entryPoints: ['./src/cli.ts'],
+    format: 'esm',
+    outdir: 'dist',
+    platform: 'node',
+    plugins: [
+      {
+        name: 'make-all-packages-external',
+        setup(build) {
+          let filter = /^[^./]|^\.[^./]|^\.\.[^/]/; // Must not start with "/" or "./" or "../"
+          build.onResolve({ filter }, args => ({
+            external: true,
+            path: args.path,
+          }));
+        },
+      },
+    ],
+    watch: isWatching
+      ? {
+          onRebuild(error, result) {
+            if (error) console.error('watch build failed:', error);
+            else console.log('watch build succeeded:', result);
+          },
+        }
+      : undefined,
+  })
+  .then(() => {
+    if (isWatching) {
+      console.log('watching...');
+    }
+  })
+  .catch(() => process.exit(1));

packages/create-rainbowkit/generated-test-app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

packages/create-rainbowkit/generated-test-app/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

packages/create-rainbowkit/generated-test-app/.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies = false

packages/create-rainbowkit/generated-test-app/README.md

@@ -0,0 +1,29 @@
+This is a [RainbowKit](https://rainbowkit.com) + [wagmi](https://wagmi.sh) + [Next.js](https://nextjs.org/) project bootstrapped with [`create-rainbowkit`](https://github.com/rainbow-me/rainbowkit/tree/main/packages/create-rainbowkit).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about this stack, take a look at the following resources:
+
+- [RainbowKit Documentation](https://rainbowkit.com) - Learn how to customize your wallet connection flow.
+- [wagmi Documentation](https://wagmi.sh) - Learn how to interact with Ethereum.
+- [Next.js Documentation](https://nextjs.org/docs) - Learn how to build a Next.js application.
+
+You can check out [the RainbowKit GitHub repository](https://github.com/rainbow-me/rainbowkit) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

packages/create-rainbowkit/generated-test-app/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/create-rainbowkit/generated-test-app/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

packages/create-rainbowkit/generated-test-app/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "generated-test-app",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@rainbow-me/rainbowkit": "workspace:*",
+    "ethers": "^5.6.8",
+    "next": "^12.1.6",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "wagmi": "^0.4.2"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.35",
+    "@types/react": "^18.0.9",
+    "eslint": "^8.15.0",
+    "eslint-config-next": "^12.1.6",
+    "typescript": "^4.7.2"
+  }
+}