Add form cli

.changeset/smart-jokes-fetch.md

@@ -0,0 +1,9 @@
+---
+'@aws-amplify/deployed-backend-client': minor
+'@aws-amplify/backend-output-schemas': minor
+'@aws-amplify/client-config': minor
+'@aws-amplify/sandbox': minor
+'@aws-amplify/backend-cli': minor
+---
+
+Create a new deployed-backend-client package that provides a convenient interface for retrieving stack outputs

examples/simple_react/.gitignore

@@ -24,3 +24,6 @@ yarn-error.log*
 
 cdk.out
 src/amplifyconfiguration.js
+src/ui-components/
+src/graphql/
+

examples/simple_react/package.json

@@ -22,7 +22,8 @@
     "@aws-amplify/backend": "file:../../packages/backend",
     "@aws-amplify/backend-auth": "file:../../packages/backend-auth",
     "@aws-amplify/backend-graphql": "file:../../packages/backend-graphql",
-    "@aws-amplify/cli": "file:../../packages/cli"
+    "@aws-amplify/cli": "file:../../packages/cli",
+    "@aws-amplify/api": "*"
   },
   "scripts": {
     "start": "react-scripts start",

examples/simple_react/src/components/todos/index.tsx

@@ -11,9 +11,14 @@ import {
   Divider,
   TextField,
 } from '@aws-amplify/ui-react';
+import { GraphQLQuery } from '@aws-amplify/api';
 import { BiTrash } from 'react-icons/bi';
 import { Todo } from '../../models';
 import style from './style';
+import { listTodos } from '../../graphql/queries';
+import { API } from 'aws-amplify';
+import { deleteTodo } from '../../graphql/mutations';
+import { TodoCreateForm } from '../../ui-components';
 
 const initialState = { name: '', description: '' };
 
@@ -26,8 +31,14 @@ function TodoView() {
 
   const fetchTodos = async () => {
     try {
-      const todos = await DataStore.query(Todo);
-      setTodos(todos);
+      const {
+        data: {
+          listTodos: { items },
+        },
+      } = await API.graphql<GraphQLQuery<any>>({
+        query: listTodos,
+      });
+      setTodos(items);
     } catch (error) {
       console.log('error fetching todos:', error);
     }
@@ -51,10 +62,7 @@ function TodoView() {
 
   const removeTodo = async (id: string) => {
     try {
-      const toDelete = await DataStore.query(Todo, id);
-      if (toDelete) {
-        await DataStore.delete(toDelete);
-      }
+      await API.graphql({ query: deleteTodo, variables: { input: { id } } });
       fetchTodos();
     } catch (error) {
       console.log('error removing todo:', error);
@@ -87,27 +95,7 @@ function TodoView() {
           </Card>
         )}
       </Collection>
-      <View style={style.form}>
-        <TextField
-          labelHidden
-          label="Name"
-          placeholder="Name"
-          style={style.form.textInput}
-          value={formState.name}
-          onChange={(event) => setInput('name', event.target.value)}
-        />
-        <TextField
-          labelHidden
-          label="Description"
-          placeholder="Description"
-          style={style.form.textInput}
-          value={formState.description}
-          onChange={(event) => setInput('description', event.target.value)}
-        />
-      </View>
-      <Button variation="primary" onClick={addTodo}>
-        Create Todo
-      </Button>
+      <TodoCreateForm onSuccess={() => fetchTodos()} />
     </Card>
   );
 }

packages/cli/package.json

@@ -27,6 +27,9 @@
   },
   "homepage": "https://github.com/aws-amplify/cli#readme",
   "dependencies": {
+    "@aws-amplify/deployed-backend-client": "^0.1.0",
+    "@aws-amplify/form-generator": "^0.1.1-alpha.0",
+    "@aws-amplify/model-generator": "^0.2.0-alpha.1",
     "@aws-sdk/credential-providers": "^3.360.0",
     "@inquirer/prompts": "^3.0.0",
     "execa": "^7.2.0",

packages/cli/src/commands/generate/config/client_config_generator_adapter.ts

@@ -1,9 +1,9 @@
 import {
-  BackendIdentifier,
   ClientConfig,
   generateClientConfig,
   generateClientConfigToFile,
 } from '@aws-amplify/client-config';
+import { BackendIdentifier } from '@aws-amplify/deployed-backend-client';
 import { AwsCredentialIdentityProvider } from '@aws-sdk/types';
 
 /**
@@ -27,6 +27,7 @@ export class ClientConfigGeneratorAdapter {
 
   /**
    * Calls generateClientConfigToFile from @aws-amplify/client-config.
+   * @deprecated
    * @see generateClientConfigToFile for more information.
    */
   generateClientConfigToFile = async (

packages/cli/src/commands/generate/config/generate_config_command.ts

@@ -1,8 +1,8 @@
 import { ArgumentsCamelCase, Argv, CommandModule } from 'yargs';
 import path from 'path';
-import { BackendIdentifier } from '@aws-amplify/client-config';
 import { AppNameResolver } from '../../../local_app_name_resolver.js';
 import { ClientConfigGeneratorAdapter } from './client_config_generator_adapter.js';
+import { BackendIdentifier } from '@aws-amplify/deployed-backend-client';
 
 export const formatChoices = ['js', 'json', 'ts'] as const;
 export const configFileName = 'amplifyconfiguration';

packages/cli/src/commands/generate/forms/form_generation_handler.ts

@@ -0,0 +1,50 @@
+import path from 'path';
+import { createLocalGraphqlFormGenerator } from '@aws-amplify/form-generator';
+import { createGraphqlDocumentGenerator } from '@aws-amplify/model-generator';
+
+type FormGenerationHandlerOptions = {
+  appId: string;
+  modelOutPath: string;
+  formsOutPath: string;
+  apiUrl: string;
+  apiId: string;
+};
+/**
+ * Creates a handler for FormGeneration
+ */
+export class FormGenerationHandler {
+  /**
+   * Instantiates the handler
+   */
+  constructor(private formGenParams: FormGenerationHandlerOptions) {}
+  private log = (message: unknown) => {
+    /* eslint-disable-next-line no-console */
+    console.log('[Codegen]\t', message);
+  };
+  generate = async () => {
+    const {
+      appId,
+      modelOutPath: modelsOut,
+      formsOutPath: uiOut,
+      apiUrl,
+      apiId,
+    } = this.formGenParams;
+    this.log(`Generating code for App: ${appId}`);
+    const graphqlClientGenerator = createGraphqlDocumentGenerator({ apiId });
+    this.log(`Generating GraphQL Client in ${modelsOut}`);
+    const modelsResult = await graphqlClientGenerator.generateModels({
+      language: 'typescript',
+    });
+    modelsResult.writeToDirectory(modelsOut);
+    this.log('GraphQL client successfully generated');
+    this.log(`Generating React forms in ${uiOut}`);
+    const relativePath = path.relative(uiOut, modelsOut);
+    const localFormGenerator = createLocalGraphqlFormGenerator({
+      introspectionSchemaUrl: apiUrl,
+      graphqlModelDirectoryPath: relativePath,
+    });
+    const result = await localFormGenerator.generateForms();
+    await result.writeToDirectory(uiOut);
+    this.log('React forms successfully generated');
+  };
+}