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

package/commands/cloneComponentsFromEnv.js

@@ -1,79 +0,0 @@
-const aws = require('aws-sdk');
-const logger = require('./utils/logger');
-const { extractArgs } = require('./utils/extractArgs');
-const { listUiBuilderComponents } = require('./utils/syncAmplifyUiBuilderComponents');
-
-async function run(context) {
-  logger.info('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) {
-    `${existingComponents.entities.length} components exist in source env. Skipping creation of local components.`;
-  }
-  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.`);
-    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 awsConfigInfo = await context.amplify.invokePluginMethod(context, 'awscloudformation', undefined, 'loadConfigurationForEnv', [
-      context,
-      newEnvName,
-      appId,
-    ]);
-
-    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) {
-      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);
-
-    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);
-  }
-}
-
-module.exports = {
-  run,
-};

package/commands/help.js

@@ -1,7 +0,0 @@
-async function run(context) {
-  context.print.info('Supported commands: generateComponents, cloneComponentsFromEnv');
-}
-
-module.exports = {
-  run,
-};

package/commands/utils/__tests__/createUiComponents.test.js

@@ -1,46 +0,0 @@
-const context = {
-  exeInfo: {
-    projectConfig: {
-      providers: ['awscloudformation'],
-      frontend: 'javascript',
-      javascript: {
-        framework: 'react',
-        config: {
-          SourceDir: 'src',
-        },
-      },
-    },
-  },
-  parameters: {
-    argv: [],
-  },
-  input: {},
-};
-const schema = {
-  appId: 'd37nrm8rzt3oek',
-  bindingProperties: {},
-  componentType: 'Box',
-  environmentName: 'staging',
-  id: 's-s4mU579Ycf6JGHwhqT',
-  name: 'aawwdd',
-  overrides: {},
-  properties: {},
-  variants: [],
-};
-
-describe('should create ui builder components', () => {
-  let codegen;
-  beforeEach(() => {
-    jest.mock('@aws-amplify/codegen-ui');
-    codegen = require('@aws-amplify/codegen-ui');
-    const renderSchemaToTemplateMock = jest.fn();
-    codegen.StudioTemplateRendererManager.mockImplementation(() => ({
-      renderSchemaToTemplate: renderSchemaToTemplateMock,
-    }));
-  });
-  it('calls the renderManager', async () => {
-    const { createUiBuilderComponent } = require('../createUiBuilderComponent');
-    await createUiBuilderComponent(context, schema);
-    expect(new codegen.StudioTemplateRendererManager().renderSchemaToTemplate).toBeCalled();
-  });
-});

package/commands/utils/__tests__/syncAmplifyUiComponents.test.js

@@ -1,67 +0,0 @@
-const aws = require('aws-sdk');
-const { FeatureFlags } = require('amplify-cli-core');
-FeatureFlags.getBoolean = () => false;
-FeatureFlags.getNumber = () => 0;
-const sc = require('../createUiBuilderComponent');
-const context = {
-  exeInfo: {
-    projectConfig: {
-      javascript: {
-        config: {
-          SourceDir: 'src',
-        },
-      },
-    },
-  },
-  amplify: {
-    invokePluginMethod: () => ({}),
-  },
-  parameters: {
-    argv: [],
-  },
-  input: {},
-};
-
-describe('should sync amplify ui builder components', () => {
-  beforeEach(() => {
-    aws.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: [],
-        })),
-      })),
-    }));
-
-    sc.createUiBuilderComponent = jest.fn();
-  });
-
-  it('pulls components from aws-sdk and passes them to createUiBuilderComponent', () => {
-    const { generateUiBuilderComponents } = require('../syncAmplifyUiBuilderComponents');
-    generateUiBuilderComponents(context, []);
-  });
-
-  it('does not throw an error when createUiBuilderComponent fails', () => {
-    sc.createUiBuilderComponent = jest.fn(() => {
-      throw new Error('ahhh!');
-    });
-    const { generateUiBuilderComponents } = require('../syncAmplifyUiBuilderComponents');
-    expect(async () => generateUiBuilderComponents(context, [])).not.toThrow();
-  });
-});

package/commands/utils/createUiBuilderComponent.js

@@ -1,85 +0,0 @@
-const { StudioTemplateRendererManager, StudioTemplateRendererFactory } = require('@aws-amplify/codegen-ui');
-const {
-  AmplifyRenderer,
-  ReactThemeStudioTemplateRenderer,
-  ReactIndexStudioTemplateRenderer,
-  ModuleKind,
-  ScriptTarget,
-  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 createUiBuilderComponent = (context, schema) => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(component => new AmplifyRenderer(component, config));
-
-  const outputPathDir = uiBuilderComponentsPath;
-  const outputConfig = {
-    outputPathDir,
-  };
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, outputConfig);
-
-  rendererManager.renderSchemaToTemplate(schema);
-  return schema;
-};
-
-const createUiBuilderTheme = (context, schema) => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    component => new ReactThemeStudioTemplateRenderer(component, config),
-  );
-
-  const outputPathDir = uiBuilderComponentsPath;
-  const outputConfig = {
-    outputPathDir,
-  };
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, outputConfig);
-
-  try {
-    rendererManager.renderSchemaToTemplate(schema);
-    return schema;
-  } catch (e) {
-    logger.error(e);
-    logger.info({ 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 outputPathDir = uiBuilderComponentsPath;
-  const outputConfig = {
-    outputPathDir,
-  };
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, outputConfig);
-
-  try {
-    rendererManager.renderSchemaToTemplate(schemas);
-  } catch (e) {
-    logger.error(e);
-    logger.info({ msg: 'Failed to generate component index file' });
-    throw e;
-  }
-};
-
-module.exports = {
-  createUiBuilderComponent,
-  createUiBuilderTheme,
-  generateAmplifyUiBuilderIndexFile,
-};

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,
-};

package/commands/utils/notifyMissingPackages.js

@@ -1,27 +0,0 @@
-const fs = require('fs-extra');
-const path = require('path');
-const { extractArgs } = require('./extractArgs');
-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 packageJsonPath = path.join(localEnvJson.projectPath, 'package.json');
-  if (!fs.existsSync(packageJsonPath)) {
-    return;
-  }
-  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath).toString());
-  REQUIRED_PACKAGES.forEach(packageName => {
-    const packageIsInstalled = Object.keys(packageJson.dependencies).includes(packageName);
-    if (!packageIsInstalled) {
-      console.warn(
-        `UIBuilder components required "${packageName}" that is not in your package.json. Please run \`npm install ${packageName}\``,
-      );
-    }
-  });
-};
-
-module.exports = {
-  notifyMissingPackages,
-};

package/commands/utils/shouldRenderComponents.js

@@ -1,38 +0,0 @@
-const logger = require('./logger');
-
-async function shouldRenderComponents(context) {
-  if (process.env.FORCE_RENDER) {
-    logger.info('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');
-    return false;
-  }
-
-  if (!context.exeInfo || !context.exeInfo.projectConfig) {
-    logger.warn('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');
-    return false;
-  }
-
-  if (context.exeInfo.projectConfig.frontend !== 'javascript') {
-    logger.warn('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');
-    return false;
-  }
-
-  return true;
-}
-
-module.exports = {
-  shouldRenderComponents,
-};

package/commands/version.js

@@ -1,10 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-async function run(context) {
-  context.print.info(require(path.join(__dirname, '..', 'package.json')).version);
-}
-
-module.exports = {
-  run,
-};