@apia/cli 4.0.16 → 4.0.18

package/cli/cli.cjs

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 const { program } = require('commander');
 const { spawn } = require('child_process');
@@ -42,7 +42,7 @@ program
   .command('compile')
   .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.') // Define the '--y' option
+  .option('--watch', 'Starts the compiler in watch mode.')
   .action(async (componentName, { watch }) => {
     const parsedName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
     logger.info(`Compiling ${parsedName}`);
@@ -84,33 +84,43 @@ program
   .command('create')
   .argument('<component_name>', 'The name of the component to be created.')
   .description('Creates the boilerplate for the given component name.')
-  .action((componentName) => {
-    const parsedName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
-    const destinationFile = path.resolve(componentFolderResolver(parsedName), 'index.tsx');
-    const sourcePath = path.resolve(__dirname, 'component_base.tsx');
-
-    if (fs.existsSync(destinationFile)) {
-      logger.error(`Already exists component with name "${parsedName}" in ${destinationFile}`);
+  .option('--extended', 'Creates a more advanced boilerplate that can be used as a tutorial like one.')
+  .action((componentName, { extended }) => {
+    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 (fs.existsSync(destinationReact)) {
+      logger.error(`Already exists component with name "${parsedName}" in ${destinationReact}`);
       process.exit(1);
     } else {
-
-      const destinationDir = componentFolderResolver(parsedName);
       if (!fs.existsSync(destinationDir)) {
         fs.mkdirSync(destinationDir, { recursive: true })
       }
 
-      if (!fs.existsSync(sourcePath)) {
+      if (!fs.existsSync(reactComponent) || !fs.existsSync(javaComponent)) {
         logger.internalE(`Cannot find the template file.`);
         process.exit(1);
       }
 
       // Read the content from the source file
-      const content = fs.readFileSync(sourcePath, 'utf-8').replaceAll('__COMPONENT_NAME__', parsedName);
+      const reactContent = fs.readFileSync(reactComponent, 'utf-8')
+        .replaceAll('__COMPONENT_NAME__', parsedName)
+        .replaceAll('__COMPONENT_NAME_SNAKE__', snakeName);
+      const javaContent = fs.readFileSync(javaComponent, 'utf-8')
+        .replaceAll('__COMPONENT_NAME__', parsedName)
+        .replaceAll('__COMPONENT_NAME_SNAKE__', snakeName);
 
       // Write the content to the new file
-      fs.writeFileSync(destinationFile, content);
+      fs.writeFileSync(destinationReact, reactContent);
+      fs.writeFileSync(destinationJava, javaContent);
 
-      logger.success(`Plugin created at: ${destinationFile}`);
+      logger.success(`Plugin created at: ${destinationDir}`);
     }
   });
 

package/cli/templates/component_base.java

@@ -0,0 +1,38 @@
+package test;
+
+import com.dogma.busClass.BusClassException;
+import com.dogma.busClass.FormsAPI;
+import com.dogma.busClass.customComponent.AbstractCustomComponent;
+import com.dogma.busClass.customComponent.CustomComponentAttribute;
+import com.dogma.busClass.customComponent.CustomComponentData;
+import com.dogma.busClass.customComponent.CustomComponentEvent;
+
+/**
+ * This is a very basic custom component, used only as boilerplate.
+ * 
+ * If you need a more advanced use case, use the <code>--extended</code> flag when calling
+ * <code>apia create <component_name> --extended</code>.
+ */
+@CustomComponentData(
+		name = "__COMPONENT_NAME__",
+		title = "Contador de ejemplo",
+		description = "Componente contador de ejemplo")
+public class __COMPONENT_NAME__ extends AbstractCustomComponent {
+
+	@CustomComponentEvent(name = "onChange")
+	public Event onChange;
+
+	@CustomComponentAttribute(name = "count", title = "Cuenta", description = "Atributo donde guardar la cuenta")
+	public Attribute count;
+
+	@Override
+	public String getComponentName() {
+		return "__COMPONENT_NAME__";
+	}
+
+	@Override
+	public void setValue(SetValuePayload payload) throws BusClassException {
+		super.setValue(payload);
+		onChange.fire();
+	}
+}

package/cli/templates/component_base.tsx

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { AbstractCustomComponent, Plugin } from '@apia/execution-react';
+import { makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { Box, ThemeUICSSObject } from '@apia/theme';
+import { SimpleButton } from '@apia/components';
+
+const __COMPONENT_NAME__Styles: ThemeUICSSObject = {
+  '&.__COMPONENT_NAME_SNAKE__': {},
+};
+
+class __COMPONENT_NAME__ extends AbstractCustomComponent {
+  state = {
+    count: 0,
+  };
+
+  constructor() {
+    super();
+    makeObservable(this, { state: observable });
+  }
+
+  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.getValue('count', 0)}
+        </SimpleButton>
+      </Box>
+    );
+  });
+}
+
+new Plugin('__COMPONENT_NAME__', __COMPONENT_NAME__);

package/cli/templates/component_extended.java

@@ -0,0 +1,115 @@
+package test;
+
+import java.util.List;
+import java.util.stream.Collectors;
+
+import com.dogma.busClass.BusClassException;
+import com.dogma.busClass.customComponent.AbstractCustomComponent;
+import com.dogma.busClass.customComponent.CustomComponentAttribute;
+import com.dogma.busClass.customComponent.CustomComponentData;
+import com.dogma.busClass.customComponent.CustomComponentEvent;
+import com.dogma.busClass.customComponent.CustomComponentProperty;
+import com.dogma.busClass.object.Entity;
+import com.google.gson.JsonArray;
+import com.google.gson.JsonObject;
+
+@CustomComponentData(
+	name = "__COMPONENT_NAME__", 
+	title = "Selector de planes", 
+	description = "Componente de demo que renderiza un selector de planes con checkbox para avanzado y comentario en textarea."
+)
+public class __COMPONENT_NAME__ extends AbstractCustomComponent {
+
+	@CustomComponentAttribute(name = "selectedPlan", title = "lblPlnSel", description = "lblPlnSel")
+	public Attribute selectedPlan;
+	@CustomComponentAttribute(name = "comment", title = "lblComment", description = "lblComment")
+	public Attribute comment;
+
+	@CustomComponentAttribute(
+			name = "planName",
+			title = "Nombre del plan",
+			description = "Atributo donde se guarda el nombre del plan",
+			serverOnly = true)
+	public Attribute planName;
+	@CustomComponentAttribute(
+			name = "planDescription",
+			title = "Desc del plan",
+			description = "Atributo donde se guarda la descripción del plan",
+			serverOnly = true)
+	public Attribute planDescription;
+	@CustomComponentAttribute(
+			name = "planPrice",
+			title = "Precio del plan",
+			description = "Atributo donde se guarda el precio del plan",
+			serverOnly = true)
+	public Attribute planPrice;
+
+	@CustomComponentProperty(
+			name = "entityName",
+			title = "lblEnt",
+			description = "Entidad desde la cual se van a leer los planes disponibles",
+			visualization = CustomComponentViewType.INPUT,
+			dataType = CustomComponentDataType.STRING)
+	public Property entityName;
+	@CustomComponentProperty(
+			name = "toggleAdvancedInfo",
+			title = "lblTogAdvInfo",
+			description = "lblTogAdvInfo",
+			visualization = CustomComponentViewType.CHECKBOX,
+			dataType = CustomComponentDataType.STRING)
+	public Property toggleAdvancedInfo;
+
+	@CustomComponentEvent(name = "onChange")
+	public Event onChange;
+
+	@Override
+	protected String getAdditionalState() throws BusClassException {
+		JsonObject o = new JsonObject();
+		JsonArray a = new JsonArray();
+		o.add("instances", a);
+
+		this.getApi().findEntities(entityName.getValue().toString(), null).stream().forEach(identifier -> {
+			try {
+				Entity inst = this.getApi()
+						.getEntity(entityName.getValue().toString(), identifier.getPrefix(), identifier.getNumber(),
+								identifier.getPostfix());
+
+				JsonObject instJson = new JsonObject();
+
+				instJson.addProperty("name", inst.getAttribute(planName.getAttName()).getValueAsString());
+				instJson.addProperty("description", inst.getAttribute(planDescription.getAttName()).getValueAsString());
+				instJson.addProperty("monthlyPrice", inst.getAttribute(planPrice.getAttName()).getValueAsString());
+
+				a.add(instJson);
+			} catch (BusClassException exception) {
+				exception.printStackTrace();
+			}
+		});
+
+		return o.toString();
+	}
+
+	@Override
+	public String[] getLabels() {
+		return new String[] { "monthlyPrice" };
+	}
+
+	@Override
+	public void setValue(SetValuePayload payload) throws BusClassException {
+		super.setValue(payload);
+
+		/**
+		 * Solo se dispara el evento onChange si se setea el plan seleccionado.
+		 * 
+		 * Este método `setValue` también se ejecuta al cambiar el valor de comentario en el textarea.
+		 */
+		if ("selectedPlan".equals(payload.getAttName())) {
+			onChange.schedule();
+		}
+	}
+
+	@Override
+	public String getComponentName() {
+		return "__COMPONENT_NAME__";
+	}
+}

package/cli/templates/component_extended.tsx

@@ -0,0 +1,128 @@
+import { FC } from 'react';
+import { AbstractCustomComponent, Plugin } from '@apia/execution-react';
+import { makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import {
+  Box,
+  Heading,
+  Label,
+  responsive,
+  Textarea,
+  ThemeUICSSObject,
+} from '@apia/theme';
+import { Checkbox } from '@apia/components';
+import { getLabel } from '@apia/util';
+
+/**
+ * This file is a demonstration on how to use the different aspects of a CustomComponent.
+ */
+
+const __COMPONENT_NAME__Styles: ThemeUICSSObject = {
+  '&.__COMPONENT_NAME_SNAKE__': {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 7,
+    p: 7,
+    border: '2px solid',
+    borderColor: 'palette.border.section',
+    borderRadius: 7,
+
+    '.plans': {
+      display: 'grid',
+      gridTemplateColumns: responsive({
+        0: '1fr',
+        3: '1fr 1fr 1fr',
+      }),
+      gap: 5,
+    },
+
+    '.plan': {
+      boxSizing: 'border-box',
+      border: '1px solid',
+      borderColor: 'palette.border.section',
+      borderRadius: 8,
+      p: 5,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 6,
+    },
+
+    '.plan__heading': {
+      fontWeight: 'bold',
+    },
+
+    '.plan__princing_wrapper': {
+      mt: 'auto',
+      whiteSpace: 'nowrap',
+      textAlign: 'right',
+    },
+
+    '.plan.selected': {
+      outline: '3px solid',
+      outlineColor: 'palette.primary.main',
+    },
+  },
+};
+
+class __COMPONENT_NAME__ extends AbstractCustomComponent {
+  state = {
+    count: 0,
+  };
+
+  constructor() {
+    super();
+    makeObservable(this, { state: observable });
+  }
+
+  protected Component: FC = observer(() => {
+    console.log(this.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')}
+            onChange={(ev) => {
+              this.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>
+          ))}
+        </Box>
+        <Heading as="h3">Deja un comentario</Heading>
+        <Textarea
+          value={this.getIntermediateString('comment')}
+          onChange={(ev) =>
+            this.setIntermediateStringValue('comment', ev.target.value)
+          }
+          onBlur={(ev) =>
+            this.confirmIntermediateString('comment', ev.target.value)
+          }
+        />
+      </Box>
+    );
+  });
+}
+
+new Plugin('__COMPONENT_NAME__', __COMPONENT_NAME__);

package/cli/webpack.config.cjs

@@ -45,7 +45,9 @@ module.exports = (_, argv) => {
       '@apia/components': 'apiaComponents',
       '@apia/execution-react': 'execReact',
       '@apia/theme': 'apiaTheme',
+      '@apia/theme/jsx-runtime': 'jsxRuntime',
       '@apia/util': 'apiaUtil',
+      '@emotion/react': 'emotionReact',
       mobx: 'mobx',
       'mobx-react-lite': 'mobxReact'
     },

package/package.json

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

package/cli/component_base.tsx

@@ -1,59 +0,0 @@
-import { FC } from 'react';
-import { AbstractCustomComponent, Plugin } from '@apia/execution-react';
-import { makeObservable, observable } from 'mobx';
-import { SimpleButton } from '@apia/components';
-import { observer } from 'mobx-react-lite';
-
-/**
- * README:
- * 
- * In order to run the following component, the declarations in the Java AbstractCustomComponent must include
- * an attribute named 'selectedPlan'.
- * 
- * @example
-	  \@CustomComponentAttribute(name = "selectedPlan", title = "lblPlnSel", description = "lblPlnSel")
-	  public Attribute selectedPlan;
- */
-
-export default class __COMPONENT_NAME__ extends AbstractCustomComponent {
-  state = {
-    count: 0,
-  };
-
-  constructor() {
-    super();
-    makeObservable(this, { state: observable });
-  }
-
-  protected Component: FC = observer(() => {
-    return (
-      <>
-        <Input
-          value={this.getIntermediateString('selectedPlan')}
-          onChange={(ev) =>
-            this.setIntermediateStringValue('selectedPlan', ev.target.value)
-          }
-          onBlur={(ev: any) => {
-            this.confirmIntermediateString('selectedPlan', ev.target.value);
-          }}
-        />
-        <SimpleButton
-          onClick={() => {
-            this.state.count++;
-          }}
-        >
-          Counter {this.state.count}
-        </SimpleButton>
-        <SimpleButton
-          onClick={() => {
-            this.state.count++;
-          }}
-        >
-          Counter {this.state.count}
-        </SimpleButton>
-      </>
-    );
-  });
-}
-
-new Plugin('__COMPONENT_NAME__', __COMPONENT_NAME__);

package/dist/index.d.ts

@@ -1,16 +0,0 @@
-import { EventEmitter } from '@apia/util';
-
-declare global {
-    interface Window {
-        dispatchComponent: EventEmitter<{
-            dispatch: any;
-            ready: null;
-        }>;
-    }
-}
-declare class Plugin {
-    constructor(name: string, fc: any);
-}
-
-export { Plugin };
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.js

@@ -1,10 +0,0 @@
-class Plugin {
-  constructor(name, fc) {
-    window.dispatchComponent.on("ready", () => {
-      window.dispatchComponent.emit("dispatch", { name, fc });
-    });
-  }
-}
-
-export { Plugin };
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../src/Plugin.ts"],"sourcesContent":["import { EventEmitter } from '@apia/util';\r\n\r\ndeclare global {\r\n  interface Window {\r\n    dispatchComponent: EventEmitter<{\r\n      dispatch: any;\r\n      ready: null;\r\n    }>;\r\n  }\r\n}\r\n\r\nexport class Plugin {\r\n  constructor(name: string, fc: any) {\r\n    window.dispatchComponent.on('ready', () => {\r\n      window.dispatchComponent.emit('dispatch', { name, fc });\r\n    });\r\n  }\r\n}\r\n"],"names":[],"mappings":"AAWO,MAAM,MAAO,CAAA;AAAA,EAClB,WAAA,CAAY,MAAc,EAAS,EAAA;AACjC,IAAO,MAAA,CAAA,iBAAA,CAAkB,EAAG,CAAA,OAAA,EAAS,MAAM;AACzC,MAAA,MAAA,CAAO,kBAAkB,IAAK,CAAA,UAAA,EAAY,EAAE,IAAA,EAAM,IAAI,CAAA,CAAA;AAAA,KACvD,CAAA,CAAA;AAAA,GACH;AACF;;;;"}