@aws-amplify/amplify-util-uibuilder 1.5.0-studio-forms.0 → 1.5.0

package/src/commands/utils/codegenResources.ts

@@ -10,19 +10,14 @@ import {
   RenderTextComponentResponse,
   GenericDataSchema,
   getGenericFromDataStore,
-  StudioForm,
-  StudioSchema,
 } from '@aws-amplify/codegen-ui';
 import {
   AmplifyRenderer,
-  AmplifyFormRenderer,
   ReactThemeStudioTemplateRenderer,
   ReactIndexStudioTemplateRenderer,
   ModuleKind,
   ScriptTarget,
   ScriptKind,
-  UtilTemplateType,
-  ReactUtilsStudioTemplateRenderer,
 } from '@aws-amplify/codegen-ui-react';
 import { printer } from 'amplify-prompts';
 import {
@@ -88,46 +83,15 @@ export const createUiBuilderTheme = (context: $TSContext, schema: StudioTheme):
   }
 };
 
-/**
- * Writes form file to the work space
- */
-export const createUiBuilderForm = (context: $TSContext, schema: StudioForm, dataSchema?: GenericDataSchema): StudioForm => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (form: StudioForm) => (new AmplifyFormRenderer(form, dataSchema, config) as unknown) as StudioTemplateRenderer<
-        unknown,
-        StudioForm,
-        FrameworkOutputManager<unknown>,
-        RenderTextComponentResponse
-      >,
-  );
-
-  const outputPathDir = uiBuilderComponentsPath;
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, {
-    outputPathDir,
-  });
-
-  try {
-    rendererManager.renderSchemaToTemplate(schema);
-    return schema;
-  } catch (e) {
-    printer.debug(e);
-    printer.debug('Skipping invalid form with schema');
-    printer.debug(JSON.stringify(schema, null, 2));
-    throw e;
-  }
-};
-
 /**
  * Writes index file to the work space
  */
-export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas: StudioSchema[]): void => {
+export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas: StudioComponent[]): RenderTextComponentResponse => {
   const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
   const rendererFactory = new StudioTemplateRendererFactory(
-    (schema: StudioSchema[]) => (new ReactIndexStudioTemplateRenderer(schema, config) as unknown) as StudioTemplateRenderer<
+    (component: StudioComponent[]) => (new ReactIndexStudioTemplateRenderer(component, config) as unknown) as StudioTemplateRenderer<
         unknown,
-        StudioSchema[],
+        StudioComponent[],
         FrameworkOutputManager<unknown>,
         RenderTextComponentResponse
       >,
@@ -140,50 +104,7 @@ export const generateAmplifyUiBuilderIndexFile = (context: $TSContext, schemas:
   });
 
   try {
-    rendererManager.renderSchemaToTemplate(schemas);
-  } catch (e) {
-    printer.debug(e);
-    printer.debug('Failed to generate component index file');
-    throw e;
-  }
-};
-
-type UtilFileChecks = {
-  hasForms: boolean;
-  hasViews: boolean;
-};
-
-/**
- * Writes utils file to the work space
- */
-export const generateAmplifyUiBuilderUtilFile = (context: $TSContext, { hasForms, hasViews }: UtilFileChecks): void => {
-  const uiBuilderComponentsPath = getUiBuilderComponentsPath(context);
-  const rendererFactory = new StudioTemplateRendererFactory(
-    (utils: UtilTemplateType[]) => (new ReactUtilsStudioTemplateRenderer(utils, config)),
-  );
-
-  const outputPathDir = uiBuilderComponentsPath;
-
-  const rendererManager = new StudioTemplateRendererManager(rendererFactory, {
-    outputPathDir,
-  });
-
-  const utils = new Set<UtilTemplateType>();
-
-  if (hasForms) {
-    utils.add('validation');
-    utils.add('formatter');
-    utils.add('fetchByPath');
-  }
-
-  if (hasViews) {
-    utils.add('formatter');
-  }
-
-  try {
-    if (utils.size) {
-      rendererManager.renderSchemaToTemplate([...utils]);
-    }
+    return rendererManager.renderSchemaToTemplate(schemas);
   } catch (e) {
     printer.debug(e);
     printer.debug('Failed to generate component index file');
@@ -198,9 +119,6 @@ export const generateAmplifyUiBuilderUtilFile = (context: $TSContext, { hasForms
 export const getAmplifyDataSchema = async (
   studioClient: AmplifyStudioClient,
 ): Promise<GenericDataSchema | undefined> => {
-  if (!studioClient.isSupportedGraphQL) {
-    return undefined;
-  }
   try {
     const meta = stateManager.getMeta();
     const resourceName = Object.entries(meta[AmplifyCategories.API]).find(
@@ -220,25 +138,3 @@ export const getAmplifyDataSchema = async (
     return undefined;
   }
 };
-
-/**
- * generates base create/update froms from names
- */
-export const generateBaseForms = (modelMap: {[model: string]: Set<'create' | 'update'>}): StudioForm[] => {
-  const getSchema = (name: string, type: 'create' | 'update') : StudioForm => ({
-    name: `${name}${type === 'create' ? 'CreateForm' : 'UpdateForm'}`,
-    formActionType: type,
-    dataType: { dataSourceType: 'DataStore', dataTypeName: name },
-    fields: {},
-    sectionalElements: {},
-    style: {},
-    cta: {},
-  });
-
-  const schemas : StudioForm[] = [];
-
-  Object.entries(modelMap).forEach(([name, set]) => {
-    set.forEach(type => schemas.push(getSchema(name, type)));
-  });
-  return schemas;
-};

package/src/commands/utils/getUiBuilderComponentsPath.ts

@@ -1,19 +1,14 @@
 import path from 'path';
 import fs from 'fs-extra';
-import { $TSContext } from 'amplify-cli-core';
 import { extractArgs } from './extractArgs';
+import { $TSContext } from 'amplify-cli-core';
 
-/**
- *
- * locates components path directory
- */
-export const getUiBuilderComponentsPath = (context: $TSContext): string => {
+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'));
 
   if (!fs.existsSync(uiBuilderComponentsPath)) {
-    // eslint-disable-next-line spellcheck/spell-checker
     fs.mkdirpSync(uiBuilderComponentsPath);
   }
 

package/src/commands/utils/syncAmplifyUiBuilderComponents.ts

@@ -1,41 +1,30 @@
 import { printer } from 'amplify-prompts';
 import { $TSContext } from 'amplify-cli-core';
 import {
-  StudioComponent, StudioTheme, GenericDataSchema, StudioForm, StudioSchema,checkIsSupportedAsForm
+  StudioComponent, StudioTheme, GenericDataSchema,
 } from '@aws-amplify/codegen-ui';
-import {
-  createUiBuilderComponent,
-  createUiBuilderForm,
-  createUiBuilderTheme,
-  generateBaseForms,
-} from './codegenResources';
+import { createUiBuilderComponent, createUiBuilderTheme } from './codegenResources';
 import { getUiBuilderComponentsPath } from './getUiBuilderComponentsPath';
 
-type CodegenResponse<T extends StudioSchema> =
-  | {
-      resultType: 'SUCCESS';
-      schema: T;
-      schemaName?: string;
-    }
-  | {
-      resultType: 'FAILURE';
-      schemaName: string;
-      error: Error;
-      schema?: T;
-    };
-
 /**
  * Returns instances of StudioComponent from the component schemas
  */
-export const generateUiBuilderComponents = (
-  context: $TSContext,
-  componentSchemas: any[], // eslint-disable-line @typescript-eslint/no-explicit-any
-  dataSchema?: GenericDataSchema,
-): CodegenResponse<StudioComponent>[] => {
-  const componentResults = componentSchemas.map<CodegenResponse<StudioComponent>>(schema => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const generateUiBuilderComponents = (context: $TSContext, componentSchemas: any[], dataSchema?: GenericDataSchema): ({
+  resultType: string;
+  component: StudioComponent;
+  schemaName?: undefined;
+  error?: undefined;
+} | {
+  resultType: string;
+  schemaName: string;
+  error: Error;
+  component?: undefined;
+})[] => {
+  const componentResults = componentSchemas.map(schema => {
     try {
       const component = createUiBuilderComponent(context, schema, dataSchema);
-      return { resultType: 'SUCCESS', schema: component };
+      return { resultType: 'SUCCESS', component };
     } catch (e) {
       printer.debug(`Failure caught processing ${schema.name}`);
       printer.debug(e);
@@ -55,11 +44,21 @@ export const generateUiBuilderComponents = (
  * Returns instances of StudioTheme from theme schemas
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const generateUiBuilderThemes = (context: $TSContext, themeSchemas: any[]): CodegenResponse<StudioTheme>[] => {
-  const themeResults = themeSchemas.map<CodegenResponse<StudioTheme>>(schema => {
+export const generateUiBuilderThemes = (context: $TSContext, themeSchemas: any[]): ({
+  resultType: string;
+  theme: StudioTheme;
+  schemaName?: undefined;
+  error?: undefined;
+} | {
+  resultType: string;
+  schemaName: string;
+  error: Error;
+  theme?: undefined;
+})[] => {
+  const themeResults = themeSchemas.map(schema => {
     try {
       const theme = createUiBuilderTheme(context, schema);
-      return { resultType: 'SUCCESS', schema: theme };
+      return { resultType: 'SUCCESS', theme };
     } catch (e) {
       printer.debug(`Failure caught processing ${schema.name}`);
       printer.debug(e);
@@ -72,47 +71,3 @@ export const generateUiBuilderThemes = (context: $TSContext, themeSchemas: any[]
   );
   return themeResults;
 };
-
-/**
- * Returns instances of StudioForm from form schemas
- */
-export const generateUiBuilderForms = (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  context: $TSContext,
-  formSchemas: any[],
-  dataSchema?: GenericDataSchema,
-  autoGenerateForms?: boolean,
-): CodegenResponse<StudioForm>[] => {
-  const modelMap: { [model: string]: Set<'create' | 'update'> } = {};
-  if (dataSchema?.dataSourceType === 'DataStore' && autoGenerateForms) {
-    Object.entries(dataSchema.models).forEach(([name, model]) => {
-      if(checkIsSupportedAsForm(model) && !model.isJoinTable) {
-        modelMap[name] = new Set(['create', 'update']);
-      }
-    });
-  }
-  const codegenForm = (schema: StudioForm): CodegenResponse<StudioForm> => {
-    try {
-      const form = createUiBuilderForm(context, schema, dataSchema);
-      return { resultType: 'SUCCESS', schema: form };
-    } catch (e) {
-      printer.debug(`Failure caught processing ${schema.name}`);
-      printer.debug(e);
-      return { resultType: 'FAILURE', schemaName: schema.name, error: e };
-    }
-  };
-  const formResults = formSchemas.map((schema: StudioForm) => {
-    if (schema?.dataType && schema.dataType?.dataSourceType === 'DataStore') {
-      modelMap[schema.dataType.dataTypeName]?.delete(schema.formActionType);
-    }
-    return codegenForm(schema);
-  });
-
-  // append remaining models
-  formResults.push(...generateBaseForms(modelMap).map(codegenForm));
-
-  printer.debug(
-    `Generated ${formResults.filter(result => result.resultType === 'SUCCESS').length} forms in ${getUiBuilderComponentsPath(context)}`,
-  );
-  return formResults;
-};

package/src/commands/version.ts

@@ -1,9 +1,6 @@
 import { printer } from 'amplify-prompts';
 import path from 'path';
 
-/**
- * runs version command
- */
-export const run = async (): Promise<void> => {
+export async function run() {
   printer.info((await import(path.join(__dirname, '..', '..', 'package.json'))).version);
-};
+}

package/src/event-handlers/handle-PostEnvAdd.ts

@@ -1,16 +1,14 @@
 import { $TSContext } from 'amplify-cli-core';
 import { printer } from 'amplify-prompts';
-import { run as cloneComponentsFromEnv } from '../commands/cloneComponentsFromEnv';
 
-/**
- *
- * runs after adding an environment
- */
-export const run = async (context: $TSContext): Promise<void> => {
+export async function run(context: $TSContext) {
   try {
-    await cloneComponentsFromEnv(context);
+    await context.amplify.invokePluginMethod(context, 'ui-builder', undefined, 'executeAmplifyCommand', [
+      context,
+      'cloneComponentsFromEnv',
+    ]);
   } catch (e) {
     // Swallow all errors from the uibuilder plugin
     printer.debug(e);
   }
-};
+}

package/src/event-handlers/handle-PostPull.ts

@@ -1,15 +1,11 @@
 import { $TSContext } from 'amplify-cli-core';
 import { printer } from 'amplify-prompts';
-import { run as generateComponents } from '../commands/generateComponents';
 
-/**
- * The code to run after a pull.
- */
-export const run = async (context: $TSContext): Promise<void> => {
+export async function run(context: $TSContext) {
   try {
-    await generateComponents(context);
+    await context.amplify.invokePluginMethod(context, 'ui-builder', undefined, 'executeAmplifyCommand', [context, 'generateComponents']);
   } catch (e) {
     // Swallow all errors from the uibuilder plugin
     printer.debug(e);
   }
-};
+}