@liferay-react/create-react-liferay-client-extension 1.0.0

package/bin/cli.js

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+
+const { Command } = require('commander');
+const inquirer = require('inquirer');
+const fs = require('fs-extra');
+const path = require('path');
+const chalk = require('chalk');
+
+const program = new Command();
+
+program
+  .version('1.0.0')
+  .description('CLI to create a React Liferay Client Extension template')
+  .argument('[name]', 'Project name')
+  .action(async (name) => {
+    let projectName = name;
+
+    if (!projectName) {
+      const answers = await inquirer.prompt([
+        {
+          type: 'input',
+          name: 'name',
+          message: 'What is the name of your project?',
+          default: 'React Exemplo',
+          validate: (input) => {
+            if (input.trim().length > 0) return true;
+            return 'Project name cannot be empty.';
+          }
+        }
+      ]);
+      projectName = answers.name;
+    }
+
+    // Helper for normalization (remove accents)
+    const normalize = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+
+    // 1. Define names for replacement
+    const titleName = projectName; // Keep original for title
+    
+    // Create kebab-case: remove accents, spaces to hyphens, lowercase, remove non-alphanumeric except hyphen
+    const kebabName = normalize(projectName)
+      .toLowerCase()
+      .trim()
+      .replace(/\s+/g, '-')
+      .replace(/[^a-z0-9\-]/g, '');
+
+    // Create PascalCase: remove accents, capitalize each word, remove non-alphanumeric
+    const pascalName = normalize(projectName)
+      .split(/[\s\-]+/)
+      .map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+      .join('')
+      .replace(/[^a-zA-Z0-9]/g, '');
+
+    const targetDir = path.join(process.cwd(), kebabName);
+
+    if (fs.existsSync(targetDir)) {
+      console.error(chalk.red(`Error: Directory ${kebabName} already exists.`));
+      process.exit(1);
+    }
+
+    console.log(chalk.blue(`Creating project in ${targetDir}...`));
+
+    const templateDir = path.join(__dirname, '..', 'template');
+    
+    try {
+      // 1. Copy template
+      await fs.copy(templateDir, targetDir);
+
+      // 2. Walk through files and replace content
+      await transformDirectory(targetDir, kebabName, pascalName, titleName);
+
+      console.log(chalk.green('\nProject created successfully!'));
+      console.log(`\nTo get started:\n  cd ${kebabName}\n  npm install\n  npm run dev`);
+
+    } catch (err) {
+      console.error(chalk.red('Error creating project:'), err);
+      process.exit(1);
+    }
+  });
+
+async function transformDirectory(dir, kebab, pascal, title) {
+  const files = await fs.readdir(dir);
+
+  for (const file of files) {
+    const fullPath = path.join(dir, file);
+    const stat = await fs.stat(fullPath);
+
+    if (stat.isDirectory()) {
+      await transformDirectory(fullPath, kebab, pascal, title);
+    } else {
+      await transformFile(fullPath, kebab, pascal, title);
+    }
+  }
+}
+
+async function transformFile(filePath, kebab, pascal, title) {
+  // Read file
+  let content = await fs.readFile(filePath, 'utf8');
+
+  // Replace placeholders
+  // react-exemplo -> kebab
+  // ReactExemplo -> pascal
+  // React Exemplo -> title
+  
+  content = content.replace(/react-exemplo/g, kebab);
+  content = content.replace(/ReactExemplo/g, pascal);
+  content = content.replace(/React Exemplo/g, title);
+
+  // Write file back
+  await fs.writeFile(filePath, content, 'utf8');
+}
+
+program.parse(process.argv);

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@liferay-react/create-react-liferay-client-extension",
+  "version": "1.0.0",
+  "description": "CLI to create a React Liferay Client Extension template",
+  "license": "MIT",
+  "main": "bin/cli.js",
+  "keywords": [
+    "liferay",
+    "react",
+    "boilerplate",
+    "generator",
+    "cli",
+    "dxp",
+    "portlet",
+    "npm-bundler",
+    "frontend"
+  ],
+  "bin": {
+    "create-client-react": "./bin/cli.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "commander": "^11.1.0",
+    "fs-extra": "^11.1.1",
+    "inquirer": "^8.2.5"
+  }
+}

package/template/client-extension.yaml

@@ -0,0 +1,48 @@
+assemble:
+  - from: build/vite
+    into: static
+
+react-exemplo:
+  name: React Exemplo
+  type: customElement
+  htmlElementName: react-exemplo
+  friendlyURLMapping: react-exemplo
+  instanceable: true
+  portletCategoryName: "Empresas"
+  virtualInstanceSupport: true
+  dxp.lxc.liferay.com.virtualInstanceId: "empresas-hml.unimedcnu.coop.br"
+  urls:
+    - "*.js"
+  useESM: true
+  properties:
+    url: ""
+
+react-exemplo-dev:
+  name: React Exemplo
+  type: customElement
+  htmlElementName: react-exemplo
+  friendlyURLMapping: react-exemplo
+  instanceable: true
+  portletCategoryName: "Empresas"
+  virtualInstanceSupport: true
+  dxp.lxc.liferay.com.virtualInstanceId: "empresas-dev.unimedcnu.coop.br"
+  urls:
+    - "*.js"
+  useESM: true
+  properties:
+    url: ""
+
+react-exemplo-prd:
+  name: React Exemplo
+  type: customElement
+  htmlElementName: react-exemplo
+  friendlyURLMapping: react-exemplo
+  instanceable: true
+  portletCategoryName: "Empresas"
+  virtualInstanceSupport: true
+  dxp.lxc.liferay.com.virtualInstanceId: "default"
+  urls:
+    - "*.js"
+  useESM: true
+  properties:
+    url: ""

package/template/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "react-exemplo",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.100.10",
+    "@vitejs/plugin-react": "^4.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sass": "^1.99.0",
+    "vite": "^5.0.0",
+    "vite-plugin-css-injected-by-js": "^4.0.1"
+  }
+}

package/template/src/main.jsx

@@ -0,0 +1,35 @@
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { App } from "./page/App";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+class ReactExemplo extends HTMLElement {
+  #root = null;
+
+  connectedCallback() {
+    const props = {
+      url: this.getAttribute("url"),
+    };
+
+    this.#root = createRoot(this);
+    this.#root.render(
+      <QueryClientProvider client={queryClient}>
+        <App {...props} />
+      </QueryClientProvider>,
+    );
+  }
+
+  disconnectedCallback() {
+    this.#root?.unmount();
+  }
+}
+
+customElements.define("react-exemplo", ReactExemplo);

package/template/src/page/App.jsx

@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getExemplo } from "../services/services";
+import "./app.scss";
+
+export const App = () => {
+  const [search, setSearch] = useState("");
+  const [filter, setFilter] = useState({
+    page: 1,
+    pageSize: 5,
+  });
+  const debouncedSearch = useDebounce(search, 400);
+  const queryFilter = { ...filter, search: debouncedSearch };
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["exemplo-query", queryFilter],
+    queryFn: () => getExemplo(queryFilter),
+  });
+
+  return <div></div>;
+};

package/template/src/page/app.scss

@@ -0,0 +1 @@
+

package/template/src/services/services.js

@@ -0,0 +1,12 @@
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: "",
+});
+
+export async function getExemplo({ page = 1, pageSize = 5, search = "" } = {}) {
+  const response = await api.get("/exemplo", {
+    params: { page, pageSize, search },
+  });
+  return response.data;
+}

package/template/src/shared/ui/Button.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Button as ButtonUI } from "@unimed/components";
+
+/**
+ * Componente de botão customizado da Unimed.
+ *
+ * @param {Object} props - Propriedades do componente.
+ * @param {React.ReactNode} props.children - Conteúdo interno do botão.
+ * @param {"small" | "large"} [props.size] - Tamanho do botão. O padrão é médio.
+ * @param {"secondary" | "tertiary"} [props.variant] - Variante visual do botão. O padrão é primary.
+ * @param {string} [props.className] - Classes CSS adicionais.
+ * @param {string} [props.iconLeft] - Nome do ícone do Material Symbols para exibir à esquerda.
+ * @param {string} [props.iconRight] - Nome do ícone do Material Symbols para exibir à direita.
+ * @param {boolean} [props.loading] - Estado de carregamento que exibe um spinner.
+ * @param {React.ButtonHTMLAttributes<HTMLButtonElement>} props - Todas as outras propriedades nativas de um botão HTML.
+ */
+const Button = (props) => <ButtonUI {...props} />;
+
+export { Button };

package/template/src/shared/ui/Card.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { Card as CardUI } from "@unimed/components";
+
+const Card = (props) => <CardUI {...props} />;
+
+export { Card };

package/template/src/shared/ui/EmptyState.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { EmptyState as EmptyStateUI } from "@unimed/components";
+
+/**
+ * Componente para exibição de estados vazios ou de erro.
+ *
+ * Oferece variantes visuais predefinidas com ícones e textos adequados para cada situação.
+ *
+ * @param {Object} props - Propriedades do componente.
+ * @param {"empty" | "error"} [props.variant] - Variante do estado (padrão: "empty").
+ * @param {string} [props.title] - Título customizado (sobrescreve o padrão da variante).
+ * @param {string} [props.description] - Descrição customizada (sobrescreve o padrão da variante).
+ */
+const EmptyState = (props) => <EmptyStateUI {...props} />;
+
+export { EmptyState };

package/template/src/shared/ui/Pagination.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Pagination as PaginationUI } from "@unimed/components";
+
+/**
+ * Componente de Paginação para listagem de dados.
+ *
+ * @param {Object} props - Propriedades do componente.
+ * @param {number} props.page - Página atual (1-indexed).
+ * @param {number} props.totalPages - Total de páginas disponíveis.
+ * @param {number} props.pageSize - Quantidade de itens por página.
+ * @param {number} props.totalItems - Total de itens na base de dados.
+ * @param {(page: number) => void} props.onPageChange - Callback chamado ao trocar de página.
+ * @param {(size: number) => void} props.onPageSizeChange - Callback chamado ao trocar a quantidade de itens por página.
+ * @param {Array<{label: string, value: number}>} [props.pageSizeOptions] - Opções para o seletor de quantidade de itens.
+ */
+const Pagination = (props) => <PaginationUI {...props} />;
+
+export { Pagination };

package/template/src/shared/ui/TextField.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { TextField as TextFieldUI } from "@unimed/components";
+
+/**
+ * Componente de campo de texto customizado da Unimed.
+ *
+ * @param {Object} props - Propriedades do componente.
+ * @param {string} [props.label] - Rótulo exibido acima do campo.
+ * @param {string} [props.placeholder] - Texto de dica dentro do campo.
+ * @param {string | number} props.value - Valor atual do campo (controlado).
+ * @param {Function} props.onChange - Callback chamado ao alterar o valor.
+ * @param {string} [props.type] - Tipo do input (text, password, email, etc).
+ * @param {string} [props.iconLeft] - Nome do ícone do Material Symbols para exibir à esquerda.
+ * @param {string} [props.iconRight] - Nome do ícone do Material Symbols para exibir à direita.
+ * @param {string} [props.helpText] - Texto de auxílio exibido abaixo do campo.
+ * @param {string} [props.error] - Mensagem de erro que muda o estado visual do campo.
+ * @param {boolean} [props.required] - Indica se o campo é obrigatório.
+ * @param {boolean} [props.loading] - Exibe um spinner de carregamento dentro do campo.
+ * @param {React.InputHTMLAttributes<HTMLInputElement>} props - Todas as outras propriedades nativas de um input HTML.
+ */
+const TextField = (props) => <TextFieldUI {...props} />;
+
+export { TextField };

package/template/vite.config.js

@@ -0,0 +1,32 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+import { resolve } from "path";
+
+export default defineConfig({
+  plugins: [react(), cssInjectedByJsPlugin()],
+  define: {
+    "process.env.NODE_ENV": '"production"',
+  },
+  build: {
+    outDir: "build/vite",
+    lib: {
+      entry: resolve(__dirname, "src/main.jsx"),
+      formats: ["es"],
+      fileName: () => "index.js",
+    },
+    rollupOptions: {
+      external: [
+        "axios",
+        "react",
+        "react-dom/client",
+        "react/jsx-runtime",
+        /^react\/.*/,
+        "@tanstack/react-query",
+        "@unimed/components",
+        "@unimed/hooks",
+        "@unimed/utils",
+      ],
+    },
+  },
+});