@apia/cli 4.0.20 → 4.0.24

package/cli/cli.cjs

@@ -1,6 +1,6 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
-const { program } = require('commander');
+const { program, Command } = require('commander');
 const { spawn } = require('child_process');
 const path = require('path');
 const fs = require('fs');
@@ -32,14 +32,19 @@ function componentFolderResolver(componentName) {
   return path.resolve(process.cwd(), 'components', componentName)
 }
 
+program
+  .description("The Apia command line is intended to help on new projects development.\n\nIt offers utilities related to create and compile custom components.")
+  .version('1.0.0');
+
 /**
  * Starts webpack on the given component.
  * 
  * - If --watch flag is passed, run webpack in development mode.
  */
-program
-  .version('1.0.0')
-  .command('compile')
+const compile = new Command('compile')
+  .description('Base command for compiling Apia development elements');
+
+compile.command('component')
   .argument('<component_name>', 'The name of the component to be compiled.')
   .description('Compiles the component into the OUT_DIR declared in the .env file.')
   .option('--watch', 'Starts the compiler in watch mode.')
@@ -73,27 +78,37 @@ program
     } else {
       throw new Error("Cannot find .env file");
     }
-  });
+  })
+
 
 /**
  * Makes a component inside ./<component_name>/index.tsx
  * 
  * - If the component exists, warn the user and do nothing.
  */
-program
-  .command('create')
+const create = new Command('create').description("Base command for creating Apia development elements")
+create
+  .command('component')
   .argument('<component_name>', 'The name of the component to be created.')
   .description('Creates the boilerplate for the given component name.')
-  .option('--extended', 'Creates a more advanced boilerplate that can be used as a tutorial like one.')
-  .action((componentName, { extended }) => {
+  .option('--extended', 'Creates a plans selector that can be used as an example of how to manage multiple attributes, properties and events.')
+  .option('--uploader', 'Creates an uploader component that can be used as an example of how to upload files using custom components.')
+  .action((componentName, { extended, uploader }) => {
     const parsedName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
     const snakeName = parsedName.split(/([A-Z][a-z0-9_-]+)/).filter(Boolean).map(c => c.toLowerCase()).join('_');
 
     const destinationDir = componentFolderResolver(parsedName);
     const destinationReact = path.resolve(destinationDir, 'index.tsx');
     const destinationJava = path.resolve(destinationDir, 'component.java');
-    const reactComponent = path.resolve(__dirname, 'templates', extended ? 'component_extended.tsx' : 'component_base.tsx');
-    const javaComponent = path.resolve(__dirname, 'templates', extended ? 'component_extended.java' : 'component_base.java');
+
+    if ([extended, uploader].filter(Boolean).length > 1) {
+      throw new Error("Cannot use multiple example components as base. You must choose one.")
+    }
+
+    let strBase = extended ? 'extended' : uploader ? 'uploader' : 'base';
+
+    const reactComponent = path.resolve(__dirname, 'templates', `component_${strBase}.tsx`);
+    const javaComponent = path.resolve(__dirname, 'templates', `component_${strBase}.java`);
 
     if (fs.existsSync(destinationReact)) {
       logger.error(`Already exists component with name "${parsedName}" in ${destinationReact}`);
@@ -122,7 +137,10 @@ program
 
       logger.success(`Plugin created at: ${destinationDir}`);
     }
-  });
+  })
+
+program.addCommand(compile);
+program.addCommand(create);
 
 
 program.parse(process.argv);

package/cli/templates/component_base.java

@@ -31,8 +31,9 @@ public class __COMPONENT_NAME__ extends AbstractCustomComponent {
 	}
 
 	@Override
-	public void setValue(SetValuePayload payload) throws BusClassException {
-		super.setValue(payload);
+	public Xml setValue(SetValuePayload payload) throws BusClassException {
+		Xml result = super.setValue(payload);
 		onChange.fire();
+		return result;
 	}
 }

package/cli/templates/component_base.tsx

@@ -19,16 +19,27 @@ class __COMPONENT_NAME__ extends AbstractCustomComponent {
     makeObservable(this, { state: observable });
   }
 
+  protected init() {
+    /**
+     * En general este método se utiliza para leer estados adicionales,
+     * generados con el método getAdditionalState() en el server.
+     */
+  }
+
   protected Component: FC = observer(() => {
     return (
       <Box className="__COMPONENT_NAME_SNAKE__" sx={__COMPONENT_NAME__Styles}>
         <SimpleButton
           disabled={this.isLoading}
           onClick={() => {
-            this.setValue('count', this.getValue('count') + 1, 0);
+            this.handler.setValue(
+              'count',
+              this.handler.getValue('count') + 1,
+              0,
+            );
           }}
         >
-          {this.getValue('count', 0)}
+          {this.handler.getValue('count', 0)}
         </SimpleButton>
       </Box>
     );

package/cli/templates/component_extended.java

@@ -95,8 +95,8 @@ public class __COMPONENT_NAME__ extends AbstractCustomComponent {
 	}
 
 	@Override
-	public void setValue(SetValuePayload payload) throws BusClassException {
-		super.setValue(payload);
+	public Xml setValue(SetValuePayload payload) throws BusClassException {
+		Xml result = super.setValue(payload);
 
 		/**
 		 * Solo se dispara el evento onChange si se setea el plan seleccionado.
@@ -106,6 +106,8 @@ public class __COMPONENT_NAME__ extends AbstractCustomComponent {
 		if ("selectedPlan".equals(payload.getAttName())) {
 			onChange.schedule();
 		}
+		
+		return result;
 	}
 
 	@Override

package/cli/templates/component_extended.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { AbstractCustomComponent, Plugin } from '@apia/execution-react';
-import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import {
   Box,
@@ -65,50 +64,52 @@ const __COMPONENT_NAME__Styles: ThemeUICSSObject = {
 };
 
 class __COMPONENT_NAME__ extends AbstractCustomComponent {
-  state = {
-    count: 0,
-  };
-
-  constructor() {
-    super();
-    makeObservable(this, { state: observable });
+  protected init() {
+    /**
+     * En general este método se utiliza para leer estados adicionales,
+     * generados con el método getAdditionalState() en el server.
+     */
   }
 
   protected Component: FC = observer(() => {
-    console.log(this.getStringValue('selectedPlan'));
+    console.log(this.handler.getStringValue('selectedPlan'));
     return (
       <Box className="__COMPONENT_NAME_SNAKE__" sx={__COMPONENT_NAME__Styles}>
         <Heading as="h3">Selecciona un plan</Heading>
         <Label>
           <Checkbox
             native
-            checked={this.getProperty('toggleAdvancedInfo')}
+            checked={this.handler.getProperty('toggleAdvancedInfo')}
             onChange={(ev) => {
-              this.setProperty('toggleAdvancedInfo', ev.target.checked);
+              this.handler.setProperty('toggleAdvancedInfo', ev.target.checked);
             }}
           />
           {getLabel('toggleAdvancedInfo').text}
         </Label>
         <Box className="plans">
-          {this.getAdditional<{
-            instances: {
-              name: string;
-              description: string;
-              monthlyPrice: string;
-            }[];
-          }>().instances.map((c) => (
-            <Box
-              className={`plan ${this.getStringValue('selectedPlan') === c.name ? 'selected' : ''}`}
-              key={c.name}
-              onClick={() => {
-                this.setStringValue('selectedPlan', c.name);
-              }}
-            >
-              <strong>{c.name}</strong>
-              {this.getProperty('toggleAdvancedInfo') && <p>{c.description}</p>}
-              <small>{c.monthlyPrice}</small>
-            </Box>
-          ))}
+          {this.handler
+            .getAdditional<{
+              instances: {
+                name: string;
+                description: string;
+                monthlyPrice: string;
+              }[];
+            }>()
+            .instances.map((c) => (
+              <Box
+                className={`plan ${this.handler.getStringValue('selectedPlan') === c.name ? 'selected' : ''}`}
+                key={c.name}
+                onClick={() => {
+                  this.handler.setStringValue('selectedPlan', c.name);
+                }}
+              >
+                <strong>{c.name}</strong>
+                {this.handler.getProperty('toggleAdvancedInfo') && (
+                  <p>{c.description}</p>
+                )}
+                <small>{c.monthlyPrice}</small>
+              </Box>
+            ))}
         </Box>
         <Heading as="h3">Deja un comentario</Heading>
         <Textarea

package/cli/templates/component_uploader.java

@@ -0,0 +1,18 @@
+package test;
+
+import com.dogma.busClass.customComponent.AbstractCustomComponent;
+import com.dogma.busClass.customComponent.CustomComponentAttribute;
+import com.dogma.busClass.customComponent.CustomComponentData;
+
+@CustomComponentData(
+		name = "__COMPONENT_NAME__",
+		title = "Files uploader",
+		description = "Componente de demo que permite la carga de archivos.")
+public class __COMPONENT_NAME__ extends AbstractCustomComponent {
+	@CustomComponentAttribute(
+			name = "uploaded",
+			title = "Archivos subidos",
+			description = "Este atributo esetá marcado con isDocument=true, lo que permite al server tratarlo diferente por conveniencia para el cliente.",
+			isDocument = true)
+	public Attribute uploaded;
+}

package/cli/templates/component_uploader.tsx

@@ -0,0 +1,76 @@
+import { FC } from 'react';
+import { AbstractCustomComponent, Plugin } from '@apia/execution-react';
+import { Box, ThemeUICSSObject } from '@apia/theme';
+import {
+  UploadHandler,
+  Uploader as ExternalUploaderComponent,
+} from '@apia/components';
+
+const __COMPONENT_NAME__Styles: ThemeUICSSObject = {
+  '&.__COMPONENT_NAME_SNAKE__': {},
+};
+
+type UploaderState = { name: string; index: number }[];
+
+class __COMPONENT_NAME__ extends AbstractCustomComponent {
+  /**
+   * El uploader handler es una clase utilitaria que se usa para gestionar la vista de upload.
+   *
+   * La ventaja más específica que tiene es que se mapea directamente con el componente Uploader
+   * de @apia/components, lo cual permite un manejo muy sencillo del upload de archivos.
+   */
+  uploadHandler = new UploadHandler({
+    initialFiles: [],
+    isMultiple: true,
+    onDelete: async (_file) => {
+      /**
+       * El método onDelete del uploadHandler se mapea directamente con el método removeIndex del CustomComponent::Handler
+       */
+      const result = await this.handler.removeIndex(
+        'uploaded',
+        _file.id as number,
+      );
+
+      return result || 'Something went wrong when deleting the file';
+    },
+    onUpload: async (file) => {
+      /**
+       * El método onUpload del uploadHandler se mapea directamente con el método upload del CustomComponent::Handler
+       */
+      const result = await this.handler.upload('uploaded', file.file, {
+        signal: file.abortController?.signal,
+        onUploadProgress: (p) => (file.progress = p),
+      });
+
+      if (result?.success) {
+        /**
+         * Si todo salió bien obtenemos el índice donde fue colocado el archivo y el nombre del mismo, que coincide
+         * con el nombre original del archivo.
+         */
+        return { id: result.index, name: result.fileName };
+      }
+
+      return 'Something went wrong when uploading the file';
+    },
+  });
+
+  protected init() {
+    /**
+     * Cuando el atributo se marca con isDocument=true, el server responde con el tipo UploaderState,
+     * que podemos usarlo para mapear el estado inicial del uploader.
+     */
+    this.uploadHandler.state.uploadedFiles = (
+      this.handler.getValues('uploaded') as UploaderState
+    ).map((c) => ({ id: c.index, name: c.name }));
+  }
+
+  protected Component: FC = () => {
+    return (
+      <Box className="__COMPONENT_NAME_SNAKE__" sx={__COMPONENT_NAME__Styles}>
+        <ExternalUploaderComponent handler={this.uploadHandler} />
+      </Box>
+    );
+  };
+}
+
+new Plugin('__COMPONENT_NAME__', __COMPONENT_NAME__);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apia/cli",
-  "version": "4.0.20",
+  "version": "4.0.24",
   "sideEffects": true,
   "author": "Alexis Leite <alexisleite@live.com>",
   "bin": {
@@ -14,7 +14,7 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "dabff9ca7bf9d14298fe7a661d73607a35a4df2a",
+  "gitHead": "0c34ed891f366be27e3fb8d291b6c7c9d90eb201",
   "devDependencies": {
     "ts-loader": "^9.5.2",
     "wrapper-webpack-plugin": "^2.2.2"