feat: merged SDK CLI to the original CLI

Author: skirianov

packages/cli/package.json

@@ -34,7 +34,8 @@
     "os-locale": "^5.0.0",
     "picocolors": "^1.0.0",
     "reasonable-filename": "^1.2.0",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "ts-morph": "^18.0.0"
   },
   "devDependencies": {
     "@types/i18next-fs-backend": "^1.1.2",

packages/cli/src/commands/add/endpoint.ts

@@ -0,0 +1,38 @@
+import { Command } from '@oclif/core';
+import { existsDirectory } from '../../utils';
+import { makeMethod } from '../../domains/add/endpoint';
+import { endpointName } from '../../domains/add/endpoint/helpers';
+import { note } from '@clack/prompts';
+
+export default class AddEndpoint extends Command {
+  static override description = 'Create new endpoint boilerplate code';
+  static override examples = ['<%= config.bin %> <%= command.id %>'];
+  static override flags = {};
+  static override args = [
+    {
+      name: 'name',
+      description: 'Name of the endpoint',
+    }
+  ];
+
+  async run(): Promise<void> {
+    const { args } = await this.parse(AddEndpoint);
+    let { name } = args;
+
+    if (!name) {
+      name = await endpointName();
+    }
+
+    // check if folder packages and playground exists in the current directory
+    const isPackagesDirExists = await existsDirectory('packages');
+    const isPlaygroundDirExists = await existsDirectory('playground');
+
+    if (isPackagesDirExists && isPlaygroundDirExists) {
+      await makeMethod(name);
+    } else {
+      note('Please run this command in the root directory of the SDK Integration Boilerplate!');
+    }
+
+    process.exit(0);
+  }
+}

packages/cli/src/commands/add/index.ts

@@ -0,0 +1,49 @@
+import { Command } from '@oclif/core';
+import AddEndpoint from './endpoint';
+import { checkCommandAndSuggest, log } from '../../utils';
+import picocolors from 'picocolors';
+
+const EXISTING_COMMANDS = [
+  {
+    command: 'endpoint',
+    Func: AddEndpoint
+  }
+];
+
+export default class Add extends Command {
+  static override description = 'Create new endpoint boilerplate code';
+  static override examples = ['@vue-storefront/cli add <command> <endpoint>'];
+  static override flags = {};
+  static override args = [
+    {
+      name: 'commandArg',
+      description: 'Name of the command'
+    },
+    {
+      name: 'endpoint',
+      description: 'Name of the endpoint'
+    }
+  ];
+
+  async run(): Promise<void> {
+    const { args } = await this.parse(Add);
+    const { commandArg, endpoint } = args;
+
+    await checkCommandAndSuggest({
+      commands: EXISTING_COMMANDS,
+      commandArg,
+      endpoint,
+      self: this
+    });
+
+    log(
+      `Command ${picocolors.green(
+        'add'
+      )} require additional arguments. Please run ${picocolors.green(
+        '@vue-storefront/cli add --help'
+      )} to see available options.\n`
+    );
+
+    process.exit(0);
+  }
+}

packages/cli/src/commands/create/index.ts

@@ -0,0 +1,47 @@
+import { Command, Flags } from '@oclif/core';
+import { checkCommandAndQuit, log } from '../../utils';
+import picocolors from 'picocolors';
+
+const EXISTING_COMMANDS = ['integration'];
+
+export default class Create extends Command {
+  static override description = 'Generate integration boilerplate';
+  static override examples = ['<%= config.bin %> <%= command.id %>'];
+  static override flags = {
+    framework: Flags.string({
+      char: 't',
+      description: 'Framework to use',
+      options: ['nuxt', 'next'],
+      aliases: ['template']
+    })
+  };
+
+  static override args = [
+    {
+      name: 'commandName'
+    },
+    {
+      name: 'integrationName'
+    }
+  ];
+
+  async run(): Promise<void> {
+    const { args } = await this.parse(Create);
+    const { commandName } = args;
+
+    checkCommandAndQuit({
+      commands: EXISTING_COMMANDS,
+      commandName
+    });
+
+    log(
+      `Command ${picocolors.green(
+        'create'
+      )} require additional arguments. Please run ${picocolors.green(
+        '@vue-storefront/cli create --help'
+      )} to see available options.\n`
+    );
+
+    process.exit(0);
+  }
+}

packages/cli/src/commands/create/integration.ts

@@ -0,0 +1,76 @@
+import { Command, Flags } from '@oclif/core';
+import { createIntegrationBoilerplate } from '../../domains/create/integration';
+import { getPkgManager, log } from '../../utils';
+import {
+  handleDirectoryName,
+  handleFrameworkName,
+  installAppSdkDependencies,
+  cleanUpRepositories
+} from '../../domains/create/integration/helpers';
+
+import { intro, spinner } from '@clack/prompts';
+import execa from 'execa';
+import picocolors from 'picocolors';
+
+export default class GenerateSDK extends Command {
+  static override description = 'Generate integration boilerplate';
+  static override examples = ['<%= config.bin %> <%= command.id %>'];
+  static override flags = {
+    framework: Flags.string({
+      char: 't',
+      description: 'Framework to use',
+      options: ['nuxt', 'next'],
+      aliases: ['template']
+    })
+  };
+
+  static override args = [
+    {
+      name: 'name'
+    }
+  ];
+
+  async run(): Promise<void> {
+    let projectDir = '';
+    let framework = '';
+    const sp = spinner();
+
+    const { flags } = await this.parse(GenerateSDK);
+    if (flags.framework) {
+      framework = flags.framework;
+    }
+    const { args } = await this.parse(GenerateSDK);
+    // eslint-disable-next-line dot-notation
+    if (args['name']) {
+      // eslint-disable-next-line dot-notation
+      projectDir = args['name'];
+    }
+    // greet the user
+    intro('Welcome to Vue Storefront SDK Integration Boilerplate Generator!');
+
+    projectDir = await handleDirectoryName(projectDir);
+    framework = await handleFrameworkName(framework);
+    const packageManager = await getPkgManager();
+
+    await createIntegrationBoilerplate({ projectDir, framework });
+    await installAppSdkDependencies(projectDir, packageManager);
+
+    // build the boilerplate
+    sp.start('Building the boilerplate');
+    await execa(packageManager, ['run', 'build'], { cwd: projectDir });
+    sp.stop('Boilerplate has been built successfully!');
+    // clean up the git repository
+    await cleanUpRepositories(projectDir);
+
+    // exit the generator
+    log('SDK integration boilerplate has been generated successfully!');
+    log('To start the development, run the following commands:');
+    log(picocolors.green(`cd ${projectDir}`));
+    log(
+      picocolors.green(
+        `${packageManager === 'yarn' ? 'yarn dev' : 'npm run dev'}`
+      )
+    );
+    process.exit(0);
+  }
+}

packages/cli/src/commands/index.ts

@@ -0,0 +1 @@
+export { run } from '@oclif/core';

packages/cli/src/commands/init.ts

@@ -0,0 +1,21 @@
+import fs from 'fs'
+import { existsDirectory } from '../../../../../utils';
+import { getNextPageCode } from '..';
+
+export const writeNextPageMethod = async (endpoint: string) => {
+  const nextPagesPath = './playground/app/src/pages/methods';
+
+  const folderExists = await existsDirectory(nextPagesPath);
+
+  if (!folderExists) {
+    fs.mkdirSync(nextPagesPath, { recursive: true });
+  }
+
+  const ifPageExists = fs.existsSync(`${nextPagesPath}/${endpoint}.tsx`);
+
+  if (ifPageExists) {
+    fs.rmSync(`${nextPagesPath}/${endpoint}.tsx`, { recursive: true });
+  }
+
+  fs.writeFileSync(`${nextPagesPath}/${endpoint}.tsx`, getNextPageCode(endpoint));
+};

packages/cli/src/domains/add/endpoint/helpers/frameworkPages/next-page.ts

@@ -0,0 +1,21 @@
+import fs from 'fs'
+import { existsDirectory } from '../../../../../utils';
+import { getNuxtPageCode } from '..';
+
+export const writeNuxtPageMethod = async (endpoint: string) => {
+  const nuxtPagesPath = './playground/app/pages';
+
+  const folderExists = await existsDirectory(nuxtPagesPath);
+
+  if (!folderExists) {
+    fs.mkdirSync(nuxtPagesPath, { recursive: true });
+  }
+
+  const ifPageExists = fs.existsSync(`${nuxtPagesPath}/${endpoint}.tsx`);
+
+  if (ifPageExists) {
+    fs.rmSync(`${nuxtPagesPath}/${endpoint}.tsx`, { recursive: true });
+  }
+
+  fs.writeFileSync(`${nuxtPagesPath}/${endpoint}.vue`, getNuxtPageCode(endpoint));
+};

packages/cli/src/domains/add/endpoint/helpers/frameworkPages/nuxt-page.ts

@@ -0,0 +1,11 @@
+export const getApiMethodCode = (endpoint: string) => `import { Endpoints } from '../../types';
+
+export const ${endpoint}: Endpoints['${endpoint}'] = async (
+  context,
+  params
+) => {
+  console.log('${endpoint} has been called');
+
+  return { data: 'Hello from ${endpoint} endpoint!' };
+};
+`

packages/cli/src/domains/add/endpoint/helpers/getCode/getApiMethodCode.ts

@@ -0,0 +1,32 @@
+import { capitalizeFirst } from '../../../../../utils/capitalizeFirst';
+
+export const getNextPageCode = (endpoint: string) => `import { useState } from 'react';
+import { sdk } from '@/pages/_app';
+import { SfButton } from '@storefront-ui/react';
+import { RenderJson } from '@/components/RenderJson';
+
+export default function Page${capitalizeFirst(endpoint)}() {
+  const [data, setData] = useState<null | Object>(null);
+
+  const hitExampleMethodApi = async () => {
+    const data = await sdk.boilerplate.${endpoint}('test');
+
+    setData(data);
+  };
+
+  return (
+    <>
+      <main className="flex flex-col items-center py-24 gap-12  text-white">
+        <SfButton type="button" onClick={hitExampleMethodApi}>
+          Call ${endpoint}
+        </SfButton>
+
+        <div className="w-[500px] h-min-12 h-auto p-4 bg-gray-900 rounded-md flex items-center justify-center">
+          {!data ? 'Click the button' : <RenderJson json={data} />}
+        </div>
+      </main>
+    </>
+  );
+}
+
+`

packages/cli/src/domains/add/endpoint/helpers/getCode/getNextPageCode.ts

@@ -0,0 +1,45 @@
+export const getNuxtPageCode = (endpoint: string) => `
+<template>
+  <div class="flex justify-center items-center h-screen">
+    <div class="p-5 w-96">
+      <p class="typography-text-xs md:typography-text-sm font-bold tracking-widest text-neutral-500 uppercase">
+        Let's go
+      </p>
+      <h1 class="typography-headline-2 md:typography-headline-1 md:leading-[67.5px] font-bold mt-2 mb-4">
+        Build something amazing
+      </h1>
+      <p>
+       ${endpoint}()
+      </p>
+      <div class="box">
+        <!-- <JsonViewer :value="jsonData" copyable boxed sort theme="light"  @onKeyClick="keyClick"/> -->
+        <h4>Response</h4>
+        <JsonViewer class="min-h-[800px] min-w-[500px]" :value="res" expandDepth="5" expanded copyable boxed sort
+          theme="dark" />
+      </div>
+      <div class="flex flex-col md:flex-row gap-4 mt-6">
+        <SfButton @click="callEndpoint" size="lg"> call </SfButton>
+        <SfButton @click="reset" size="lg" variant="secondary" class="bg-white"> reset </SfButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { SfButton } from '@storefront-ui/vue';
+import { sdk } from '~/sdk.config';
+import { JsonViewer } from "vue3-json-viewer"
+import "vue3-json-viewer/dist/index.css";
+
+const res = useState('waiting to call ${endpoint}() ...');
+
+async function callEndpoint() {
+  const { data } = await sdk.boilerplate.${endpoint}('test');
+  res.value = data
+}
+
+function reset() {
+  res.value = 'waiting to call ${endpoint}() ...'
+}
+</script>
+`