feat(cli): CATALYST-246 create-catalyst login, create env, scaffold p…

…roject

.github/workflows/cli-integration.yml

@@ -0,0 +1,55 @@
+name: Create Catalyst CLI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    types: [opened, synchronize]
+  merge_group:
+    types: [checks_requested]
+
+jobs:
+  integration-tests:
+    name: Integration Tests
+
+    runs-on: ubuntu-latest
+
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+      TURBO_REMOTE_CACHE_SIGNATURE_KEY: ${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
+      BIGCOMMERCE_STORE_HASH: ${{ secrets.BIGCOMMERCE_STORE_HASH }}
+      BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN: ${{ secrets.BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@main
+        with:
+          fetch-depth: 2
+
+      - uses: pnpm/action-setup@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@main
+        with:
+          node-version-file: ".nvmrc"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build CLI
+        run: pnpm build
+        working-directory: packages/create-catalyst
+
+      - name: Run CLI
+        run: |
+          node dist/index.js \
+          --ghRef ${{ github.ref}} \
+          --projectDir ${{ runner.temp }} \
+          --projectName catalyst-integration-test \
+          --channelId 1 \
+          --accessToken some_access_token \
+          --storeHash ${{ secrets.BIGCOMMERCE_STORE_HASH }} \
+          --customerImpersonationToken ${{ secrets.BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN }}
+        working-directory: packages/create-catalyst

.github/workflows/cli-unit.yml

@@ -0,0 +1,43 @@
+name: Create Catalyst CLI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    types: [opened, synchronize]
+  merge_group:
+    types: [checks_requested]
+
+jobs:
+  unit-tests:
+    name: Unit Tests
+
+    runs-on: ubuntu-latest
+
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+      TURBO_REMOTE_CACHE_SIGNATURE_KEY: ${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
+      BIGCOMMERCE_STORE_HASH: ${{ secrets.BIGCOMMERCE_STORE_HASH }}
+      BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN: ${{ secrets.BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@main
+        with:
+          fetch-depth: 2
+
+      - uses: pnpm/action-setup@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@main
+        with:
+          node-version-file: ".nvmrc"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Tests
+        run: pnpm test
+        working-directory: packages/create-catalyst

packages/create-catalyst/.eslintrc.cjs

@@ -6,6 +6,8 @@ const config = {
   extends: ['@bigcommerce/catalyst/base', '@bigcommerce/catalyst/prettier'],
   rules: {
     'no-console': 'off',
+    'import/no-named-as-default': 'off',
+    '@typescript-eslint/naming-convention': 'off',
   },
   ignorePatterns: ['/dist/**'],
 };

packages/create-catalyst/.swcrc

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "sourceMaps": true,
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "decorators": true,
+      "dynamicImport": true
+    },
+    "transform": {
+      "legacyDecorator": true,
+      "decoratorMetadata": true
+    },
+    "baseUrl": "./"
+  },
+  "minify": false
+}

packages/create-catalyst/README.md

@@ -1,55 +1,22 @@
-# packages/create-catalyst
+# create-catalyst
 
-> [!WARNING]
-> The create-catalyst package is in development and not published to the NPM registry
+Create a new Catalyst project, optionally connect the project to a BigCommerce store. Also supports "switching" the store that Catalyst is connected to by running `init`.
 
-Scaffolding for Catalyst storefront projects.
-
-## Usage
-
-**NPM:**
-
-```sh
-npm create @bigcommerce/catalyst@latest my-catalyst-store
-```
-
-**PNPM:**
+## NPM
 
 ```sh
-pnpm create @bigcommerce/catalyst@latest my-catalyst-store
+npm create catalyst-storefront@latest --storeHash your_store_hash --accessToken your_access_token
 ```
 
-**Yarn:**
+## PNPM
 
 ```sh
-yarn create @bigcommerce/catalyst@latest my-catalyst-store
+pnpm create catalyst-storefront@latest --storeHash your_store_hash --accessToken your_access_token
 ```
 
-## Contributing
-
-**Prerequisites:**
-
-- Node `>=18.16`
-- [Verdaccio](https://verdaccio.org/) `>=5`
-
-**Developing Locally:**
-
-While developing `create-catalyst` locally, it's essential to test your changes before publishing them to NPM. To achieve this, we utilize Verdaccio, a lightweight private npm proxy registry that you can run in your local environment. By publishing `create-catalyst` to Verdaccio during local development, we can point `[yarn|npm|pnpm] create @bigcommerce/catalyst` at the Verdaccio registry URL and observe how our changes will behave once they are published to NPM.
-
-1. Install Verdaccio: https://verdaccio.org/docs/installation
-2. Run Verdaccio: `verdaccio --listen 4873`
-3. Add an NPM user with `@bigcommerce` scope to Verdaccio: `npm adduser --scope=@bigcommerce --registry=http://localhost:4873`
-
-> ⚠️ **IMPORTANT:** NPM registry data is immutable, meaning once published, a package cannot change. Be careful to ensure that you do not run commands such as `publish` against the default NPM registry if your work is not ready to be published. Always explicitly pass `--registry=http://localhost:<VERDACCIO_PORT>` with commands that modify the registry (such as `publish`) to ensure you only publish to Verdaccio when working locally.
-
-4. If necessary, run `pnpm build` and `pnpm publish --registry=http://localhost:4873` in each Catalyst-scoped package required by relevant examples listed in `apps/` (e.g., Catalyst `core` examples require `@bigcommerce/components`, `@bigcommerce/eslint-config-catalyst`, `@bigcommerce/catalyst-client`)
-5. Run `pnpm build` and `pnpm publish --registry=http://localhost:4873` in the `@bigcommerce/create-catalyst` package
-6. Confirm published packages are listed in Verdaccio: http://localhost:4873
-
-In order to point `npm create`, `pnpm create`, and/or `yarn create` to the Verdaccio registry, run one or more of the following commands against the package manager's global configuration:
-
-- **NPM:** `npm config set @bigcommerce:registry http://localhost:4873`
-- **PNPM:** `pnpm config set @bigcommerce:registry http://localhost:4873`
-- **Yarn:** `yarn config set npmScopes.bigcommerce.npmRegistryServer "http://localhost:4873" -H` and then `yarn config set unsafeHttpWhitelist "localhost" -H`
+# To Do
 
-7. Finally, navigate to the directory in which you'd like to create a new Catalyst storefront, and run `[yarn|npm|pnpm] create @bigcommerce/catalyst name-of-your-catalyst-storefront`
+- [ ] Channel Site Routes
+- [ ] Check Active Storeront Limit
+- [ ] Prompt Sample Data API for New Channels
+- [ ] Yarn module resolution bug

packages/create-catalyst/flow.mermaid

@@ -0,0 +1,30 @@
+flowchart TD
+    A[npm/pnpm/yarn create @bigcommerce/catalyst@latest] --> B[Login to BigCommerce Store]
+    A --> C[Use Sample Data]
+    C --> D[@todo]
+    B --> E[Check Active Storefront Limit for Store]
+    E -->|User Allowed to Create Channel| F[Create New Channel]
+    E -->|User Unable to Create Channel| G[Use Existing Channel]
+    F -->|YES| H[Enter a Name for Your New Channel]
+    F -->|NO| G
+    G --> M
+    H --> I[Channel Name Already Taken]
+    I --> H
+    H --> J[Channel Created Successfully]
+    J --> K[Do you want create Sample Data for your New Channel?]
+    K -->|YES| L[Hit Cloudflare Worker to Seed New Channel]
+    K -->|NO| M[Create Channel Site URL]
+    L --> M
+    M --> N[Create Channel Site Checkout URL]
+    N --> O[Create Channel Routes]
+    O --> P[Create Customer Impersonation Token]
+    P --> Q[Generate JWT Signing Secret for NextAuth]
+    Q --> R[Create Required Environment Variables to run Catalyst Next.js App]
+    R --> S[Clone Catalyst Template from GitHub]
+    S --> T[Copy Catalyst Components from GitHub]
+    T --> U[Reconcile Configuration Files - Tailwind, TsConfig, Package.json]
+    U --> V[Write Configuration Files and Environment Variable File]
+    V --> W[Install Dependencies]
+    W --> X[Run GraphQL Codegen]
+    X --> Y[Lint to Validate Types]
+    Y --> Z[Successfully Created Catalyst Project]

packages/create-catalyst/jest.config.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  extensionsToTreatAsEsm: ['.ts'],
+  transform: {
+    '^.+\\.(t|j)s?$': '@swc/jest',
+  },
+  transformIgnorePatterns: [],
+  // moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
+  testEnvironment: 'node',
+};

packages/create-catalyst/package.json

@@ -7,17 +7,44 @@
     "dist"
   ],
   "scripts": {
+    "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "lint": "eslint . --max-warnings 0",
-    "test": "jest"
+    "test": "jest",
+    "build": "tsup"
   },
   "engines": {
     "node": ">=18.16"
   },
+  "dependencies": {
+    "@inquirer/prompts": "^3.3.0",
+    "chalk": "^5.3.0",
+    "commander": "^11.1.0",
+    "fs-extra": "^11.2.0",
+    "giget": "^1.2.1",
+    "lodash.kebabcase": "^4.1.1",
+    "lodash.merge": "^4.6.2",
+    "lodash.set": "^4.3.2",
+    "lodash.unset": "^4.5.2",
+    "msw": "^2.1.7",
+    "nypm": "^0.3.6",
+    "ora": "^8.0.1",
+    "zod": "^3.22.4",
+    "zod-validation-error": "^3.0.0"
+  },
   "devDependencies": {
     "@bigcommerce/eslint-config": "^2.7.0",
     "@bigcommerce/eslint-config-catalyst": "workspace:^",
+    "@swc/core": "^1.3.107",
+    "@swc/jest": "^0.2.34",
+    "@types/fs-extra": "^11.0.4",
+    "@types/jest": "^29.5.11",
+    "@types/lodash.kebabcase": "^4.1.9",
+    "@types/lodash.merge": "^4.6.9",
+    "@types/lodash.set": "^4.3.9",
+    "@types/lodash.unset": "^4.5.9",
     "@types/node": "^18.17.12",
+    "@types/prompts": "^2.4.9",
     "eslint": "^8.55.0",
     "jest": "^29.7.0",
     "prettier": "^3.1.1",