@aws-amplify/amplify-util-uibuilder 1.1.3-beta.6 → 1.2.3-beta.0

package/src/__tests__/syncAmplifyUiComponents.test.ts

@@ -0,0 +1,150 @@
+import { $TSContext } from 'amplify-cli-core';
+import {
+  generateUiBuilderComponents,
+  getEnvName,
+  getAppId,
+  listUiBuilderComponents,
+  listUiBuilderThemes,
+  getAmplifyUIBuilderService,
+  resolveAppId,
+  generateUiBuilderThemes,
+} from '../commands/utils/syncAmplifyUiBuilderComponents';
+import aws from 'aws-sdk';
+import * as CLICore from 'amplify-cli-core';
+import * as createUiBuilderComponentDependency from '../commands/utils/createUiBuilderComponent';
+const aws_mock = aws as any;
+const createUiBuilderComponentDependency_mock = createUiBuilderComponentDependency as any;
+describe('should sync amplify ui builder components', () => {
+  let context: $TSContext | any;
+  beforeEach(() => {
+    CLICore.FeatureFlags.getBoolean = () => false;
+    CLICore.FeatureFlags.getNumber = () => 0;
+    context = {
+      exeInfo: {
+        projectConfig: {
+          javascript: {
+            config: {
+              SourceDir: 'src',
+            },
+          },
+        },
+      },
+      amplify: {
+        invokePluginMethod: () => ({}),
+      },
+      parameters: {
+        argv: [],
+      },
+      input: {
+        options: {
+          appId: 'testAppId',
+          envName: 'testEnvName',
+        },
+      },
+    };
+
+    aws_mock.AmplifyUIBuilder = jest.fn(() => ({
+      exportComponents: jest.fn(() => ({
+        promise: jest.fn(() => ({
+          entities: [
+            {
+              appId: 'd37nrm8rzt3oek',
+              bindingProperties: {},
+              componentType: 'Box',
+              environmentName: 'staging',
+              id: 's-s4mU579Ycf6JGHwhqT',
+              name: 'aawwdd',
+              overrides: {},
+              properties: {},
+              variants: [],
+            },
+          ],
+        })),
+      })),
+      exportThemes: jest.fn(() => ({
+        promise: jest.fn(() => ({
+          entities: [{}],
+        })),
+      })),
+    }));
+
+    createUiBuilderComponentDependency_mock.createUiBuilderComponent = jest.fn();
+    createUiBuilderComponentDependency_mock.createUiBuilderTheme = jest.fn();
+  });
+
+  it('pulls components from aws-sdk and passes them to createUiBuilderComponent', () => {
+    generateUiBuilderComponents(context, []);
+  });
+
+  it('does not throw an error when createUiBuilderComponent fails', () => {
+    createUiBuilderComponentDependency_mock.createUiBuilderComponent = jest.fn(() => {
+      throw new Error('ahhh!');
+    });
+    expect(async () => generateUiBuilderComponents(context, [])).not.toThrow();
+  });
+
+  it('does not throw an error when createUiBuilderThemes fails', () => {
+    createUiBuilderComponentDependency_mock.createUiBuilderComponent = jest.fn(() => {
+      throw new Error('ahhh!');
+    });
+    expect(async () => generateUiBuilderThemes(context, [])).not.toThrow();
+  });
+
+  it('can getAmplifyUIBuilderService', async () => {
+    process.env.UI_BUILDER_ENDPOINT = 'https://mock-endpoint.com';
+    process.env.UI_BUILDER_REGION = 'mock-region';
+    const service = await getAmplifyUIBuilderService(context, 'testEnv', 'testAppId');
+    expect(Object.keys(service)).toContain('exportComponents');
+    expect(Object.keys(service)).toContain('exportThemes');
+  });
+  it('can listUiBuilderThemes', async () => {
+    const themes = await listUiBuilderThemes(context, 'testEnv');
+    expect(themes.entities).toHaveLength(1);
+  });
+  it('can listUiBuilderComponents', async () => {
+    const components = await listUiBuilderComponents(context, 'testEnv');
+    expect(components.entities).toHaveLength(1);
+  });
+  it('can getAppId', async () => {
+    const appId = await getAppId(context);
+    expect(appId).toBe('testAppId');
+  });
+  it('can getEnvName', () => {
+    const envName = getEnvName(context);
+    expect(envName).toBe('testEnvName');
+  });
+  it('can resolveAppId', async () => {
+    context.amplify.invokePluginMethod = () => 'testAppId';
+    const appId = await resolveAppId(context);
+    expect(appId).toBe('testAppId');
+  });
+  it('can throw on getAppId', async () => {
+    context.input.options.appId = null;
+    context.amplify.invokePluginMethod = () => null;
+    expect(async () => await getAppId(context)).rejects.toThrowError();
+  });
+  it('can generate ui builder components', async () => {
+    createUiBuilderComponentDependency_mock.createUiBuilderComponent = jest.fn().mockImplementation(() => ({}));
+    const components = generateUiBuilderComponents(context, [{}, {}]);
+    expect(components.every(component => component.resultType === 'SUCCESS')).toBeTruthy();
+  });
+  it('can handle failed generation generate ui builder components', async () => {
+    createUiBuilderComponentDependency_mock.createUiBuilderComponent = jest.fn().mockImplementation(() => {
+      throw new Error('ahh!');
+    });
+    const components = generateUiBuilderComponents(context, [{}, {}]);
+    expect(components.every(component => component.resultType === 'FAILURE')).toBeTruthy();
+  });
+  it('can generate ui builder themes', async () => {
+    createUiBuilderComponentDependency_mock.createUiBuilderTheme = jest.fn().mockImplementation(() => ({}));
+    const themes = generateUiBuilderThemes(context, [{}, {}]);
+    expect(themes.every(theme => theme.resultType === 'SUCCESS')).toBeTruthy();
+  });
+  it('can handle failed generation generate ui builder themes', async () => {
+    createUiBuilderComponentDependency_mock.createUiBuilderTheme = jest.fn().mockImplementation(() => {
+      throw new Error('ahh!');
+    });
+    const themes = generateUiBuilderThemes(context, [{}, {}]);
+    expect(themes.every(theme => theme.resultType === 'FAILURE')).toBeTruthy();
+  });
+});

package/src/__tests__/version.test.ts

@@ -0,0 +1,10 @@
+import { printer } from 'amplify-prompts';
+import { run } from '../commands/version';
+jest.mock('amplify-prompts');
+printer.info = jest.fn();
+describe('can run version script', () => {
+  it('runs version script', async () => {
+    await run();
+    expect(printer.info).toBeCalledTimes(1);
+  });
+});

package/src/commands/cloneComponentsFromEnv.ts

@@ -0,0 +1,72 @@
+import aws from 'aws-sdk';
+import { extractArgs } from './utils/extractArgs';
+import { listUiBuilderComponents } from './utils/syncAmplifyUiBuilderComponents';
+import { printer } from 'amplify-prompts';
+import { $TSAny, $TSContext } from 'amplify-cli-core';
+
+export async function run(context: $TSContext) {
+  printer.debug('Running create components command in amplify-util-uibuilder');
+  const args = extractArgs(context);
+  const sourceEnvName = args.sourceEnvName ? args.sourceEnvName : context.exeInfo.sourceEnvName;
+  const newEnvName = args.newEnvName ? args.newEnvName : context.exeInfo.localEnvInfo.envName;
+
+  const existingComponents = await listUiBuilderComponents(context, sourceEnvName);
+  if (existingComponents.entities.length === 0) {
+    printer.debug(`${existingComponents.entities.length} components exist in source env. Skipping creation of local components.`);
+    return;
+  }
+  const existingComponentsNewEnv = await listUiBuilderComponents(context, newEnvName);
+
+  if (existingComponentsNewEnv.entities.length > 0) {
+    printer.debug(
+      `${existingComponentsNewEnv.entities.length} components already exist in new env. Skipping creation of local components.`,
+    );
+    return;
+  }
+
+  const environmentName = args.environmentName ?? context.exeInfo.localEnvInfo.envName;
+  const appId = args.appId ?? context.exeInfo.teamProviderInfo[environmentName].awscloudformation.AmplifyAppId;
+  const awsConfigInfo = (await context.amplify.invokePluginMethod(context, 'awscloudformation', undefined, 'loadConfigurationForEnv', [
+    context,
+    newEnvName,
+    appId,
+  ])) as $TSAny;
+
+  if (process.env.UI_BUILDER_ENDPOINT) {
+    awsConfigInfo.endpoint = process.env.UI_BUILDER_ENDPOINT;
+  }
+
+  if (process.env.UI_BUILDER_REGION) {
+    awsConfigInfo.region = process.env.UI_BUILDER_REGION;
+  }
+
+  const amplifyUIBuilder = new aws.AmplifyUIBuilder(awsConfigInfo);
+  const components = existingComponents.entities;
+  if (!components.length) {
+    printer.debug(`No UIBuilder components found in app ${appId} from env ${sourceEnvName}. Skipping component clone process.`);
+    return;
+  }
+  const promises = components.map(async (component: any) => {
+    return await amplifyUIBuilder
+      .createComponent({
+        appId,
+        environmentName,
+        componentToCreate: {
+          bindingProperties: component.bindingProperties,
+          children: component.children,
+          componentType: component.componentType,
+          name: component.name,
+          overrides: component.overrides,
+          properties: component.properties,
+          sourceId: component.sourceId,
+          variants: component.variants,
+        },
+      })
+      .promise();
+  });
+  await Promise.all(promises);
+
+  printer.info(
+    `Successfully cloned ${components.length} UIBuilder components in app ${appId} from env ${sourceEnvName} to env ${newEnvName}.`,
+  );
+}

package/{commands/generateComponents.js → src/commands/generateComponents.ts}

@@ -1,16 +1,18 @@
-const { notifyMissingPackages } = require('./utils/notifyMissingPackages');
-const { shouldRenderComponents } = require('./utils/shouldRenderComponents');
-const {
+import { notifyMissingPackages } from './utils/notifyMissingPackages';
+import { shouldRenderComponents } from './utils/shouldRenderComponents';
+import {
   listUiBuilderComponents,
   listUiBuilderThemes,
   generateUiBuilderComponents,
   generateUiBuilderThemes,
-} = require('./utils/syncAmplifyUiBuilderComponents');
-const { generateAmplifyUiBuilderIndexFile } = require('./utils/createUiBuilderComponent');
-const logger = require('./utils/logger');
-const ora = require('ora');
-async function run(context) {
-  logger.info('Running generate components command in amplify-util-uibuilder');
+} from './utils/syncAmplifyUiBuilderComponents';
+import { generateAmplifyUiBuilderIndexFile } from './utils/createUiBuilderComponent';
+import { printer } from 'amplify-prompts';
+import ora from 'ora';
+import { $TSContext } from 'amplify-cli-core';
+
+export async function run(context: $TSContext) {
+  printer.debug('Running generate components command in amplify-util-uibuilder');
   if (!(await shouldRenderComponents(context))) {
     return;
   }
@@ -18,7 +20,7 @@ async function run(context) {
   try {
     const [componentSchemas, themeSchemas] = await Promise.all([listUiBuilderComponents(context), listUiBuilderThemes(context)]);
     if (componentSchemas.entities.length === 0 && themeSchemas.entities.length === 0) {
-      logger.info('Skipping UI component generation since none are found.');
+      printer.debug('Skipping UI component generation since none are found.');
       return;
     }
 
@@ -42,13 +44,9 @@ async function run(context) {
       spinner.succeed('Synced UI components.');
     }
   } catch (e) {
-    logger.error(e);
+    printer.debug(e);
     spinner.fail('Failed to sync UI components');
   }
 
   notifyMissingPackages(context);
 }
-
-module.exports = {
-  run,
-};

package/src/commands/help.ts

@@ -0,0 +1,5 @@
+import { printer } from 'amplify-prompts';
+
+export async function run() {
+  printer.info('Supported commands: generateComponents, cloneComponentsFromEnv');
+}

package/src/commands/utils/createUiBuilderComponent.ts

@@ -0,0 +1,75 @@
+import { StudioTemplateRendererManager, StudioTemplateRendererFactory, StudioComponent } from '@aws-amplify/codegen-ui';
+import {
+  AmplifyRenderer,
+  ReactThemeStudioTemplateRenderer,
+  ReactIndexStudioTemplateRenderer,
+  ModuleKind,
+  ScriptTarget,
+  ScriptKind,
+} from '@aws-amplify/codegen-ui-react';
+import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
+import { printer } from 'amplify-prompts';
+import { $TSContext } from 'amplify-cli-core';
+const config = {
+  module: ModuleKind.ES2020,
+  target: ScriptTarget.ES2020,
+  script: ScriptKind.JSX,
+  renderTypeDeclarations: true,
+};
+
+export const createUiBuilderComponent = (context: $TSContext, schema: any) => {
+  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
+  const rendererFactory = new StudioTemplateRendererFactory((component: StudioComponent) => new AmplifyRenderer(component, config));
+
+  const outputPathDir = uiBuilderComponentsPath;
+  const outputConfig = {
+    outputPathDir,
+  };
+
+  const rendererManager = new StudioTemplateRendererManager(rendererFactory, outputConfig);
+
+  rendererManager.renderSchemaToTemplate(schema);
+  return schema;
+};
+
+export const createUiBuilderTheme = (context: $TSContext, schema: any) => {
+  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
+  const rendererFactory = new StudioTemplateRendererFactory((component: any) => new ReactThemeStudioTemplateRenderer(component, config));
+
+  const outputPathDir = uiBuilderComponentsPath;
+  const outputConfig = {
+    outputPathDir,
+  };
+
+  const rendererManager = new StudioTemplateRendererManager(rendererFactory, outputConfig);
+
+  try {
+    rendererManager.renderSchemaToTemplate(schema);
+    return schema;
+  } catch (e) {
+    printer.debug(e);
+    printer.debug('Skipping invalid theme with schema');
+    printer.debug(JSON.stringify(schema, null, 2));
+    throw e;
+  }
+};
+
+export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas: any[]) => {
+  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
+  const rendererFactory = new StudioTemplateRendererFactory((component: any) => new ReactIndexStudioTemplateRenderer(component, config));
+
+  const outputPathDir = uiBuilderComponentsPath;
+  const outputConfig = {
+    outputPathDir,
+  };
+
+  const rendererManager = new StudioTemplateRendererManager(rendererFactory, outputConfig);
+
+  try {
+    return rendererManager.renderSchemaToTemplate(schemas);
+  } catch (e) {
+    printer.debug(e);
+    printer.debug('Failed to generate component index file');
+    throw e;
+  }
+};

package/{commands/utils/extractArgs.js → src/commands/utils/extractArgs.ts}

@@ -1,4 +1,6 @@
-const extractArgs = context => {
+import { $TSContext } from 'amplify-cli-core';
+
+export const extractArgs = (context: $TSContext) => {
   if (!context.input.options) {
     context.input.options = {};
   }
@@ -21,7 +23,3 @@ const extractArgs = context => {
     newEnvName,
   };
 };
-
-module.exports = {
-  extractArgs,
-};

package/{commands/utils/getUiBuilderComponentsPath.js → src/commands/utils/getUiBuilderComponentsPath.ts}

@@ -1,8 +1,9 @@
-const path = require('path');
-const fs = require('fs-extra');
-const { extractArgs } = require('./extractArgs');
+import path from 'path';
+import fs from 'fs-extra';
+import { extractArgs } from './extractArgs';
+import { $TSContext } from 'amplify-cli-core';
 
-const getUiBuilderComponentsPath = context => {
+export const getUiBuilderComponentsPath = (context: $TSContext) => {
   const args = extractArgs(context);
   const srcDir = args.srcDir ? args.srcDir : context.exeInfo.projectConfig.javascript.config.SourceDir;
   const uiBuilderComponentsPath = path.resolve(path.join('.', srcDir, 'ui-components'));
@@ -13,7 +14,3 @@ const getUiBuilderComponentsPath = context => {
 
   return uiBuilderComponentsPath;
 };
-
-module.exports = {
-  getUiBuilderComponentsPath,
-};

package/src/commands/utils/notifyMissingPackages.ts

@@ -0,0 +1,40 @@
+import { pathManager, JSONUtilities, $TSContext, $TSAny } from 'amplify-cli-core';
+import { printer } from 'amplify-prompts';
+import fs from 'fs-extra';
+import path from 'path';
+import { extractArgs } from './extractArgs';
+const REQUIRED_PACKAGES: { [key: string]: string } = { '@aws-amplify/ui-react': '1.2.0', 'aws-amplify': '*' };
+
+export const notifyMissingPackages = (context: $TSContext) => {
+  const args = extractArgs(context);
+  const localEnvFilePath = args.localEnvFilePath ?? pathManager.getLocalEnvFilePath();
+  if (!fs.existsSync(localEnvFilePath)) {
+    printer.debug('localEnvFilePath could not be determined - skipping dependency notification.');
+    return;
+  }
+  const localEnvJson = JSONUtilities.readJson(localEnvFilePath);
+  const packageJsonPath = path.join((localEnvJson as $TSAny).projectPath, 'package.json');
+  if (!fs.existsSync(packageJsonPath)) {
+    printer.debug('package.json file not found - skipping dependency notification.');
+    return;
+  }
+  const packageJson = JSONUtilities.readJson(packageJsonPath) as { dependencies: { [key: string]: string } };
+  Object.keys(REQUIRED_PACKAGES).forEach(packageName => {
+    const packageIsInstalled = Object.keys(packageJson.dependencies).includes(packageName);
+    if (!packageIsInstalled) {
+      printer.warn(`UIBuilder components required "${packageName}" that is not in your package.json. Run \`npm install ${packageName}\``);
+    } else if (!packageVersionMatches(REQUIRED_PACKAGES[packageName], packageJson.dependencies[packageName])) {
+      printer.warn(
+        `UIBuilder components requires version "${REQUIRED_PACKAGES[packageName]}" of "${packageName}". You currently are on version "${packageJson.dependencies[packageName]}".`,
+      );
+    }
+  });
+};
+
+const packageVersionMatches = (requiredVersion: string, existingVersion: string) => {
+  if (requiredVersion === '*') {
+    return true;
+  }
+
+  return requiredVersion === existingVersion;
+};

package/src/commands/utils/shouldRenderComponents.ts

@@ -0,0 +1,34 @@
+import { $TSContext } from 'amplify-cli-core';
+import { printer } from 'amplify-prompts';
+export async function shouldRenderComponents(context: $TSContext) {
+  if (process.env.FORCE_RENDER) {
+    printer.debug('Forcing component render since environment variable flag is set.');
+    return true;
+  }
+  if (context?.input?.options?.['no-codegen']) {
+    printer.debug('Not pulling components because --no-codegen flag is set');
+    return false;
+  }
+
+  if (!context?.exeInfo?.projectConfig) {
+    printer.debug('Not pulling components because there is no projectConfig set for this project');
+    return false;
+  }
+
+  if (!context.exeInfo.projectConfig.providers.includes('awscloudformation')) {
+    printer.debug('Not pulling components because there is no "awscloudformation" provider');
+    return false;
+  }
+
+  if (context.exeInfo.projectConfig.frontend !== 'javascript') {
+    printer.debug('Not pulling components because this project is not configured as a javascript frontend');
+    return false;
+  }
+
+  if (context.exeInfo.projectConfig['javascript'].framework !== 'react') {
+    printer.debug('Not pulling components because this project is not configured with the "react" framework');
+    return false;
+  }
+
+  return true;
+}

package/{commands/utils/syncAmplifyUiBuilderComponents.js → src/commands/utils/syncAmplifyUiBuilderComponents.ts}

@@ -1,26 +1,32 @@
-const aws = require('aws-sdk');
-const { createUiBuilderComponent, createUiBuilderTheme } = require('./createUiBuilderComponent');
-const { getUiBuilderComponentsPath } = require('./getUiBuilderComponentsPath');
-const logger = require('./logger');
-const { extractArgs } = require('./extractArgs');
-const { mockUiBuilderComponents, mockUiBuilderThemes } = require('./mockUiBuilderData');
-
-const getEnvName = (context, envName) => {
+import aws from 'aws-sdk';
+import { printer } from 'amplify-prompts';
+import { createUiBuilderComponent, createUiBuilderTheme } from './createUiBuilderComponent';
+import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
+import { extractArgs } from './extractArgs';
+import { $TSAny, $TSContext } from 'amplify-cli-core';
+export const getEnvName = (context: $TSContext, envName?: string) => {
   const args = extractArgs(context);
   return envName ? envName : args.environmentName ? args.environmentName : context.exeInfo.localEnvInfo.envName;
 };
 
-const getAppId = (context, environmentName) => {
-  return extractArgs(context).appId || context.exeInfo.teamProviderInfo[environmentName].awscloudformation.AmplifyAppId;
+export const resolveAppId = async (context: $TSContext) => {
+  return await context.amplify.invokePluginMethod(context, 'awscloudformation', undefined, 'resolveAppId', [context]);
 };
 
-async function listUiBuilderComponents(context, envName) {
-  if (process.env.MOCK_UI_BUILDER_BACKEND) {
-    return mockUiBuilderComponents;
+export const getAppId = async (context: $TSContext) => {
+  const appId = extractArgs(context).appId || (await resolveAppId(context));
+
+  if (!appId) {
+    throw new Error(
+      'Unable to sync Studio components since appId could not be determined. This can happen when you hit the soft limit of number of apps that you can have in Amplify console.',
+    );
   }
+  return appId;
+};
 
+export async function listUiBuilderComponents(context: $TSContext, envName?: string) {
   const environmentName = getEnvName(context, envName);
-  const appId = getAppId(context, environmentName);
+  const appId = await getAppId(context);
 
   try {
     const amplifyUIBuilder = await getAmplifyUIBuilderService(context, environmentName, appId);
@@ -30,21 +36,17 @@ async function listUiBuilderComponents(context, envName) {
         environmentName,
       })
       .promise();
-    logger.info(JSON.stringify(uiBuilderComponents, null, 2));
+    printer.debug(JSON.stringify(uiBuilderComponents, null, 2));
     return uiBuilderComponents;
   } catch (e) {
-    logger.error(e);
+    printer.debug(e);
     throw e;
   }
 }
 
-async function listUiBuilderThemes(context, envName) {
-  if (process.env.MOCK_UI_BUILDER_BACKEND) {
-    return mockUiBuilderThemes;
-  }
-
+export async function listUiBuilderThemes(context: $TSContext, envName?: string) {
   const environmentName = getEnvName(context, envName);
-  const appId = getAppId(context, environmentName);
+  const appId = await getAppId(context);
 
   try {
     const amplifyUIBuilder = await getAmplifyUIBuilderService(context, environmentName, appId);
@@ -54,27 +56,27 @@ async function listUiBuilderThemes(context, envName) {
         environmentName,
       })
       .promise();
-    logger.info(JSON.stringify(uiBuilderThemes, null, 2));
+    printer.debug(JSON.stringify(uiBuilderThemes, null, 2));
     return uiBuilderThemes;
   } catch (e) {
-    logger.error(e);
+    printer.debug(e);
     throw e;
   }
 }
 
-function generateUiBuilderComponents(context, componentSchemas) {
+export function generateUiBuilderComponents(context: $TSContext, componentSchemas: any[]) {
   const componentResults = componentSchemas.map(schema => {
     try {
       const component = createUiBuilderComponent(context, schema);
       return { resultType: 'SUCCESS', component };
     } catch (e) {
-      logger.error(`Failure caught processing ${schema.name}`);
-      logger.error(e);
+      printer.debug(`Failure caught processing ${schema.name}`);
+      printer.debug(e);
       return { resultType: 'FAILURE', schemaName: schema.name, error: e };
     }
   });
 
-  logger.info(
+  printer.debug(
     `Generated ${componentResults.filter(result => result.resultType === 'SUCCESS').length} components in ${getUiBuilderComponentsPath(
       context,
     )}`,
@@ -82,30 +84,30 @@ function generateUiBuilderComponents(context, componentSchemas) {
   return componentResults;
 }
 
-function generateUiBuilderThemes(context, themeSchemas) {
+export function generateUiBuilderThemes(context: $TSContext, themeSchemas: any[]) {
   const themeResults = themeSchemas.map(schema => {
     try {
       const theme = createUiBuilderTheme(context, schema);
       return { resultType: 'SUCCESS', theme };
     } catch (e) {
-      logger.error(`Failure caught processing ${schema.name}`);
-      logger.error(e);
+      printer.debug(`Failure caught processing ${schema.name}`);
+      printer.debug(e);
       return { resultType: 'FAILURE', schemaName: schema.name, error: e };
     }
   });
 
-  logger.info(
+  printer.debug(
     `Generated ${themeResults.filter(result => result.resultType === 'SUCCESS').length} themes in ${getUiBuilderComponentsPath(context)}`,
   );
   return themeResults;
 }
 
-const getAmplifyUIBuilderService = async (context, environmentName, appId) => {
-  const awsConfigInfo = await context.amplify.invokePluginMethod(context, 'awscloudformation', undefined, 'loadConfigurationForEnv', [
+export const getAmplifyUIBuilderService = async (context: $TSContext, environmentName: string, appId: string) => {
+  const awsConfigInfo = (await context.amplify.invokePluginMethod(context, 'awscloudformation', undefined, 'loadConfigurationForEnv', [
     context,
     environmentName,
     appId,
-  ]);
+  ])) as $TSAny;
 
   if (process.env.UI_BUILDER_ENDPOINT) {
     awsConfigInfo.endpoint = process.env.UI_BUILDER_ENDPOINT;
@@ -117,11 +119,3 @@ const getAmplifyUIBuilderService = async (context, environmentName, appId) => {
 
   return new aws.AmplifyUIBuilder(awsConfigInfo);
 };
-
-module.exports = {
-  getAmplifyUIBuilderService,
-  generateUiBuilderComponents,
-  generateUiBuilderThemes,
-  listUiBuilderComponents,
-  listUiBuilderThemes,
-};

package/src/commands/version.ts

@@ -0,0 +1,6 @@
+import { printer } from 'amplify-prompts';
+import path from 'path';
+
+export async function run() {
+  printer.info((await import(path.join(__dirname, '..', '..', 'package.json'))).version);
+}

package/{event-handlers/handle-PostEnvAdd.js → src/event-handlers/handle-PostEnvAdd.ts}

@@ -1,6 +1,7 @@
-const logger = require('../commands/utils/logger');
+import { $TSContext } from 'amplify-cli-core';
+import { printer } from 'amplify-prompts';
 
-async function run(context) {
+export async function run(context: $TSContext) {
   try {
     await context.amplify.invokePluginMethod(context, 'ui-builder', undefined, 'executeAmplifyCommand', [
       context,
@@ -8,10 +9,6 @@ async function run(context) {
     ]);
   } catch (e) {
     // Swallow all errors from the uibuilder plugin
-    logger.error(e);
+    printer.debug(e);
   }
 }
-
-module.exports = {
-  run,
-};