@aws-amplify/amplify-util-uibuilder 1.1.2 → 1.2.0-uibuilder-ts.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0-uibuilder-ts.0](https://github.com/aws-amplify/amplify-cli/compare/@aws-amplify/amplify-util-uibuilder@1.1.2...@aws-amplify/amplify-util-uibuilder@1.2.0-uibuilder-ts.0) (2021-12-06)
+
+
+### Features
+
+* add types to uibuilder generated files ([cfff256](https://github.com/aws-amplify/amplify-cli/commit/cfff256e73e9ce0b6001a825f29e152213a355e6))
+
+
+
+
+
 ## [1.1.2](https://github.com/aws-amplify/amplify-cli/compare/@aws-amplify/amplify-util-uibuilder@1.1.1...@aws-amplify/amplify-util-uibuilder@1.1.2) (2021-12-03)
 
 **Note:** Version bump only for package @aws-amplify/amplify-util-uibuilder

package/commands/cloneComponentsFromEnv.js

@@ -1,10 +1,10 @@
 const aws = require('aws-sdk');
-const logger = require('./utils/logger');
 const { extractArgs } = require('./utils/extractArgs');
 const { listUiBuilderComponents } = require('./utils/syncAmplifyUiBuilderComponents');
+const { printer } = require('amplify-prompts');
 
 async function run(context) {
-  logger.info('Running create components command in amplify-util-uibuilder');
+  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;
@@ -15,63 +15,60 @@ async function run(context) {
   }
   const existingComponentsNewEnv = await listUiBuilderComponents(context, newEnvName);
   if (existingComponentsNewEnv.entities.length > 0) {
-    logger.info(`${existingComponentsNewEnv.entities.length} components already exist in new env. Skipping creation of local components.`);
+    printer.debug(
+      `${existingComponentsNewEnv.entities.length} components already exist in new env. Skipping creation of local components.`,
+    );
     return;
   }
 
-  try {
-    const environmentName = args.environmentName ? args.environmentName : context.exeInfo.localEnvInfo.envName;
-
-    const appId = args.appId ? args.appId : context.exeInfo.teamProviderInfo[environmentName].awscloudformation.AmplifyAppId;
+  const environmentName = args.environmentName ? args.environmentName : context.exeInfo.localEnvInfo.envName;
 
-    const awsConfigInfo = await context.amplify.invokePluginMethod(context, 'awscloudformation', undefined, 'loadConfigurationForEnv', [
-      context,
-      newEnvName,
-      appId,
-    ]);
+  const appId = args.appId ? args.appId : context.exeInfo.teamProviderInfo[environmentName].awscloudformation.AmplifyAppId;
 
-    if (process.env.UI_BUILDER_ENDPOINT) {
-      awsConfigInfo.endpoint = process.env.UI_BUILDER_ENDPOINT;
-    }
+  const awsConfigInfo = await context.amplify.invokePluginMethod(context, 'awscloudformation', undefined, 'loadConfigurationForEnv', [
+    context,
+    newEnvName,
+    appId,
+  ]);
 
-    if (process.env.UI_BUILDER_REGION) {
-      awsConfigInfo.region = process.env.UI_BUILDER_REGION;
-    }
+  if (process.env.UI_BUILDER_ENDPOINT) {
+    awsConfigInfo.endpoint = process.env.UI_BUILDER_ENDPOINT;
+  }
 
-    const amplifyUIBuilder = new aws.AmplifyUIBuilder(awsConfigInfo);
+  if (process.env.UI_BUILDER_REGION) {
+    awsConfigInfo.region = process.env.UI_BUILDER_REGION;
+  }
 
-    const components = existingComponents.entities;
-    if (!components.length) {
-      logger.info(`No UIBuilder components found in app ${appId} from env ${sourceEnvName}. Skipping component clone process.`);
-      return;
-    }
-    const promises = components.map(async component => {
-      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);
+  const amplifyUIBuilder = new aws.AmplifyUIBuilder(awsConfigInfo);
 
-    console.log(
-      `Successfully cloned ${components.length} UIBuilder components in app ${appId} from env ${sourceEnvName} to env ${newEnvName}.`,
-    );
-  } catch (e) {
-    logger.warn('This endpoint is broken for now:');
-    logger.error(e);
+  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 => {
+    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);
+
+  console.log(
+    `Successfully cloned ${components.length} UIBuilder components in app ${appId} from env ${sourceEnvName} to env ${newEnvName}.`,
+  );
 }
 
 module.exports = {

package/commands/generateComponents.js

@@ -7,10 +7,10 @@ const {
   generateUiBuilderThemes,
 } = require('./utils/syncAmplifyUiBuilderComponents');
 const { generateAmplifyUiBuilderIndexFile } = require('./utils/createUiBuilderComponent');
-const logger = require('./utils/logger');
+const { printer } = require('amplify-prompts');
 const ora = require('ora');
 async function run(context) {
-  logger.info('Running generate components command in amplify-util-uibuilder');
+  printer.debug('Running generate components command in amplify-util-uibuilder');
   if (!(await shouldRenderComponents(context))) {
     return;
   }
@@ -18,7 +18,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,7 +42,7 @@ async function run(context) {
       spinner.succeed('Synced UI components.');
     }
   } catch (e) {
-    logger.error(e);
+    printer.debug(e);
     spinner.fail('Failed to sync UI components');
   }
 

package/commands/utils/createUiBuilderComponent.js

@@ -8,15 +8,13 @@ const {
   ScriptKind,
 } = require('@aws-amplify/codegen-ui-react');
 const { getUiBuilderComponentsPath } = require('./getUiBuilderComponentsPath');
-const logger = require('./logger');
-const config = process.env.USE_CODEGEN_DEFAULTS
-  ? {}
-  : {
-      module: ModuleKind.ESNext,
-      target: ScriptTarget.ESNext,
-      script: ScriptKind.JSX,
-      renderTypeDeclarations: process.env.RENDER_TYPE_DECLARATIONS ? true : false,
-    };
+const { printer } = require('amplify-prompts');
+const config = {
+  module: ModuleKind.ES2020,
+  target: ScriptTarget.ES2020,
+  script: ScriptKind.JSX,
+  renderTypeDeclarations: true,
+};
 
 const createUiBuilderComponent = (context, schema) => {
   const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
@@ -35,9 +33,7 @@ const createUiBuilderComponent = (context, schema) => {
 
 const createUiBuilderTheme = (context, schema) => {
   const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    component => new ReactThemeStudioTemplateRenderer(component, config),
-  );
+  const rendererFactory = new StudioTemplateRendererFactory(component => new ReactThemeStudioTemplateRenderer(component, config));
 
   const outputPathDir = uiBuilderComponentsPath;
   const outputConfig = {
@@ -50,17 +46,15 @@ const createUiBuilderTheme = (context, schema) => {
     rendererManager.renderSchemaToTemplate(schema);
     return schema;
   } catch (e) {
-    logger.error(e);
-    logger.info({ msg: 'Skipping invalid theme with schema', schema: JSON.stringify(schema, null, 2) });
+    printer.debug(e);
+    printer.debug({ msg: 'Skipping invalid theme with schema', schema: JSON.stringify(schema, null, 2) });
     throw e;
   }
 };
 
 const generateAmplifyUiBuilderIndexFile = (context, schemas) => {
   const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    component => new ReactIndexStudioTemplateRenderer(component, config),
-  );
+  const rendererFactory = new StudioTemplateRendererFactory(component => new ReactIndexStudioTemplateRenderer(component, config));
 
   const outputPathDir = uiBuilderComponentsPath;
   const outputConfig = {
@@ -72,8 +66,8 @@ const generateAmplifyUiBuilderIndexFile = (context, schemas) => {
   try {
     rendererManager.renderSchemaToTemplate(schemas);
   } catch (e) {
-    logger.error(e);
-    logger.info({ msg: 'Failed to generate component index file' });
+    printer.debug(e);
+    printer.debug({ msg: 'Failed to generate component index file' });
     throw e;
   }
 };

package/commands/utils/notifyMissingPackages.js

@@ -1,3 +1,4 @@
+const { pathManager, JSONUtilities } = require('amplify-cli-core');
 const fs = require('fs-extra');
 const path = require('path');
 const { extractArgs } = require('./extractArgs');
@@ -5,8 +6,8 @@ const REQUIRED_PACKAGES = ['@aws-amplify/ui-react', 'aws-amplify'];
 
 const notifyMissingPackages = context => {
   const args = extractArgs(context);
-  const localEnvFilePath = args.localEnvFilePath ? args.localEnvFilePath : context.amplify._pathManager.getLocalEnvFilePath();
-  const localEnvJson = JSON.parse(fs.readFileSync(localEnvFilePath).toString());
+  const localEnvFilePath = args.localEnvFilePath ? args.localEnvFilePath : pathManager.getLocalEnvFilePath();
+  const localEnvJson = JSONUtilities.readJson(localEnvFilePath);
   const packageJsonPath = path.join(localEnvJson.projectPath, 'package.json');
   if (!fs.existsSync(packageJsonPath)) {
     return;

package/commands/utils/shouldRenderComponents.js

@@ -1,32 +1,31 @@
-const logger = require('./logger');
-
+const { printer } = require('amplify-prompts');
 async function shouldRenderComponents(context) {
   if (process.env.FORCE_RENDER) {
-    logger.info('Forcing component render since environment variable flag is set.');
+    printer.debug('Forcing component render since environment variable flag is set.');
     return true;
   }
   if (context.input.options && context.input.options['no-codegen']) {
-    logger.warn('Not pulling components because --no-codegen flag is set');
+    printer.debug('Not pulling components because --no-codegen flag is set');
     return false;
   }
 
   if (!context.exeInfo || !context.exeInfo.projectConfig) {
-    logger.warn('Not pulling components because there is no projectConfig set for this project');
+    printer.debug('Not pulling components because there is no projectConfig set for this project');
     return false;
   }
 
   if (!context.exeInfo.projectConfig.providers.includes('awscloudformation')) {
-    logger.warn('Not pulling components because there is no "awscloudformation" provider');
+    printer.debug('Not pulling components because there is no "awscloudformation" provider');
     return false;
   }
 
   if (context.exeInfo.projectConfig.frontend !== 'javascript') {
-    logger.warn('Not pulling components because this project is not configured as a javascript frontend');
+    printer.debug('Not pulling components because this project is not configured as a javascript frontend');
     return false;
   }
 
   if (context.exeInfo.projectConfig['javascript'].framework !== 'react') {
-    logger.warn('Not pulling components because this project is not configured with the "react" framework');
+    printer.debug('Not pulling components because this project is not configured with the "react" framework');
     return false;
   }
 

package/commands/utils/syncAmplifyUiBuilderComponents.js

@@ -1,24 +1,25 @@
 const aws = require('aws-sdk');
+const { printer } = require('amplify-prompts');
+const { resolveAppId } = require('amplify-provider-awscloudformation');
 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) => {
   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;
+  const appId = extractArgs(context).appId || 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;
 };
 
 async function listUiBuilderComponents(context, envName) {
-  if (process.env.MOCK_UI_BUILDER_BACKEND) {
-    return mockUiBuilderComponents;
-  }
-
   const environmentName = getEnvName(context, envName);
   const appId = getAppId(context, environmentName);
 
@@ -30,19 +31,15 @@ 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;
-  }
-
   const environmentName = getEnvName(context, envName);
   const appId = getAppId(context, environmentName);
 
@@ -54,10 +51,10 @@ 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;
   }
 }
@@ -68,13 +65,13 @@ function generateUiBuilderComponents(context, componentSchemas) {
       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,
     )}`,
@@ -88,13 +85,13 @@ function generateUiBuilderThemes(context, themeSchemas) {
       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;

package/event-handlers/handle-PostEnvAdd.js

@@ -1,4 +1,4 @@
-const logger = require('../commands/utils/logger');
+const { printer } = require('amplify-prompts');
 
 async function run(context) {
   try {
@@ -8,7 +8,7 @@ async function run(context) {
     ]);
   } catch (e) {
     // Swallow all errors from the uibuilder plugin
-    logger.error(e);
+    printer.debug(e);
   }
 }
 

package/event-handlers/handle-PostPull.js

@@ -1,11 +1,11 @@
-const logger = require('../commands/utils/logger');
+const { printer } = require('amplify-prompts');
 
 async function run(context) {
   try {
     await context.amplify.invokePluginMethod(context, 'ui-builder', undefined, 'executeAmplifyCommand', [context, 'generateComponents']);
   } catch (e) {
     // Swallow all errors from the uibuilder plugin
-    logger.error(e);
+    printer.debug(e);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/amplify-util-uibuilder",
-  "version": "1.1.2",
+  "version": "1.2.0-uibuilder-ts.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -12,12 +12,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@aws-amplify/codegen-ui": "^1.0.0",
-    "@aws-amplify/codegen-ui-react": "^1.0.0",
+    "@aws-amplify/codegen-ui": "^1.1.0",
+    "@aws-amplify/codegen-ui-react": "^1.1.0",
+    "amplify-cli-core": "2.4.3",
+    "amplify-prompts": "1.6.0",
+    "amplify-provider-awscloudformation": "5.8.1",
     "aws-sdk": "^2.1042.0"
   },
-  "devDependencies": {
-    "amplify-cli-core": "2.4.1"
-  },
-  "gitHead": "07040c2b2197eeb4ad1fb3fb001ff6ad03b95f0e"
+  "gitHead": "4c441df394ea316130e2e0dff91d359d2c338ef7"
 }

package/commands/utils/logger.js

@@ -1,24 +0,0 @@
-const log = (message, level = 'log') => {
-  if (process.env.VERBOSE_LOGGING) {
-    console[level](message);
-  }
-};
-
-const error = message => {
-  log(message, 'error');
-};
-
-const warn = message => {
-  log(message, 'warn');
-};
-
-const info = message => {
-  log(message, 'info');
-};
-
-module.exports = {
-  log,
-  error,
-  warn,
-  info,
-};

package/commands/utils/mockUiBuilderData.js

@@ -1,149 +0,0 @@
-// This file provides mocks for manual testing
-const mockUiBuilderComponents = {
-  entities: [
-    {
-      appId: 'd2o18y21obnmoz',
-      bindingProperties: {},
-      children: [
-        {
-          children: [],
-          componentType: 'Box',
-          properties: {
-            width: {
-              value: '133px',
-            },
-            padding: {
-              value: '0px 0px 0px 0px',
-            },
-            backgroundColor: {
-              value: 'rgb(255,255,255)',
-            },
-            height: {
-              value: '55px',
-            },
-          },
-        },
-      ],
-      componentType: 'Box',
-      environmentName: 'staging',
-      id: 'c-65Dz5ryFZKFnfNj8Si',
-      name: 'Frame1',
-      overrides: {},
-      properties: {
-        width: {
-          value: '291px',
-        },
-        padding: {
-          value: '0px 0px 0px 0px',
-        },
-        backgroundColor: {
-          value: 'rgb(255,255,0)',
-        },
-        height: {
-          value: '158px',
-        },
-      },
-      variants: [],
-    },
-  ],
-  nextToken: '',
-};
-
-const mockUiBuilderThemes = {
-  entities: [
-    {
-      id: '1234-5678-9010',
-      name: 'MyTheme',
-      values: [
-        {
-          key: 'tokens',
-          value: {
-            children: [
-              {
-                key: 'colors',
-                value: {
-                  children: [
-                    {
-                      key: 'font',
-                      value: {
-                        children: [
-                          {
-                            key: 'primary',
-                            value: {
-                              children: [
-                                {
-                                  key: 'value',
-                                  value: {
-                                    value: '#008080',
-                                  },
-                                },
-                              ],
-                            },
-                          },
-                        ],
-                      },
-                    },
-                  ],
-                },
-              },
-            ],
-          },
-        },
-      ],
-      overrides: [
-        {
-          key: 'colorMode',
-          value: {
-            value: 'dark',
-          },
-        },
-        {
-          key: 'tokens',
-          value: {
-            children: [
-              {
-                key: 'colors',
-                value: {
-                  children: [
-                    {
-                      key: 'black',
-                      value: {
-                        children: [
-                          {
-                            key: 'value',
-                            value: {
-                              value: '#fff',
-                            },
-                          },
-                        ],
-                      },
-                    },
-                    {
-                      key: 'white',
-                      value: {
-                        children: [
-                          {
-                            key: 'value',
-                            value: {
-                              value: '#000',
-                            },
-                          },
-                        ],
-                      },
-                    },
-                  ],
-                },
-              },
-            ],
-          },
-        },
-      ],
-    },
-  ],
-  nextToken: '',
-};
-
-module.exports = {
-  mockUiBuilderComponents,
-  mockUiBuilderThemes,
-};