@leo-h/create-nodejs-app 1.0.21 → 1.0.23

package/templates/react-vite/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/react-vite/scripts/orval-generate-api-definition.ts

@@ -0,0 +1,90 @@
+import { execSync } from "node:child_process";
+import { existsSync } from "node:fs";
+import { mkdir, readdir, readFile, rm, writeFile } from "node:fs/promises";
+import { dirname, resolve } from "node:path";
+import { generate } from "orval";
+import { z } from "zod";
+import { orvalCustomConfig } from "../orval.config";
+
+export type OrvalCustomConfig = {
+  apiDocs: {
+    outputPath: string;
+  };
+  endpoints: {
+    outputPath: string;
+    replaceVoidTypeToAnyOnResponse?: boolean;
+  };
+  zodSchemas: {
+    outputPath: string;
+  };
+};
+
+const envSchemaFromNodeEnvironment = z.object({
+  API_JSON_DOCS_URL: z
+    .string()
+    .url()
+    .transform(val => new URL(val).toString()),
+});
+
+const parsedEnv = envSchemaFromNodeEnvironment.safeParse(process.env);
+
+if (!parsedEnv.success) {
+  console.error(parsedEnv.error.flatten().fieldErrors);
+
+  throw new Error("Invalid environment variables.");
+}
+
+const env = parsedEnv.data;
+
+(async () => {
+  const apiJsonDocsResponse = await fetch(env.API_JSON_DOCS_URL);
+  const apiJsonDocs = await apiJsonDocsResponse.text();
+  const apiJsonDocsDirPath = dirname(orvalCustomConfig.apiDocs.outputPath);
+
+  if (!existsSync(apiJsonDocsDirPath)) await mkdir(apiJsonDocsDirPath);
+
+  await Promise.all([
+    rm(orvalCustomConfig.endpoints.outputPath, {
+      force: true,
+      recursive: true,
+    }),
+    rm(orvalCustomConfig.zodSchemas.outputPath, {
+      force: true,
+      recursive: true,
+    }),
+    writeFile(orvalCustomConfig.apiDocs.outputPath, apiJsonDocs),
+  ]);
+
+  await generate("./orval.config.ts");
+
+  const generatedEndpointFiles = await Promise.all(
+    (await readdir(orvalCustomConfig.endpoints.outputPath)).map(
+      async relativePath => {
+        const filePath = resolve(
+          orvalCustomConfig.endpoints.outputPath,
+          relativePath,
+        );
+
+        return {
+          filePath,
+          fileContent: await readFile(filePath, "utf-8"),
+        };
+      },
+    ),
+  );
+
+  await Promise.all(
+    generatedEndpointFiles.map(async endpointFile => {
+      let newContent = endpointFile.fileContent.replace(/data:/g, "body:");
+
+      if (orvalCustomConfig.endpoints.replaceVoidTypeToAnyOnResponse)
+        newContent = newContent.replace(/body: void/g, "body: any");
+
+      await writeFile(endpointFile.filePath, newContent);
+    }),
+  );
+
+  execSync(
+    `pnpm prettier ${orvalCustomConfig.apiDocs.outputPath} ${orvalCustomConfig.endpoints.outputPath} ${orvalCustomConfig.zodSchemas.outputPath} --write`,
+  );
+})();

package/templates/react-vite/src/@types/routes.ts

@@ -0,0 +1,24 @@
+import { RouteObject } from "react-router";
+import { OverrideProperties } from "type-fest";
+
+export type CustomRouteDefinition = {
+  path: string;
+  label: string;
+};
+
+export type ReactRouterRouteDefinition<Routes extends CustomRouteDefinition[]> =
+  OverrideProperties<
+    RouteObject,
+    {
+      path: Routes[number]["path"] | "*";
+      handle: ReactRouterRouteHandleDefinition;
+    }
+  >;
+
+export type ReactRouterRouteHandleDefinition = {
+  metadata: {
+    title: string;
+    description?: string;
+  };
+  [K: string]: unknown;
+};

package/templates/react-vite/src/api/errors/api-error.ts

@@ -0,0 +1,7 @@
+export class ApiError {
+  public constructor(
+    public readonly statusCode: number,
+    public readonly error: string,
+    public readonly message: string,
+  ) {}
+}

package/templates/react-vite/src/api/errors/api-unexpected-response-error.ts

@@ -0,0 +1,8 @@
+const defaultMessage =
+  "Houve uma falha inesperada ao se comunicar com nosso servidor. Por favor, contate nosso suporte." as const;
+
+export class ApiUnexpectedResponseError {
+  static message = defaultMessage;
+
+  constructor(public message = defaultMessage) {}
+}

package/templates/react-vite/src/api/swr-fetcher.ts

@@ -0,0 +1,41 @@
+import { ApiError } from "./errors/api-error";
+import { ApiUnexpectedResponseError } from "./errors/api-unexpected-response-error";
+
+type SwrFetcherOutput = {
+  body: unknown;
+  status: number;
+  headers: Headers;
+};
+
+export async function swrFetcher<Output extends SwrFetcherOutput>(
+  url: RequestInfo | URL,
+  options?: RequestInit,
+): Promise<Output> {
+  const response = await fetch(url, options);
+  let body: unknown;
+
+  if (
+    response.headers.get("Content-Type")?.includes("application/json") &&
+    response.status !== 204
+  ) {
+    try {
+      body = await response.json();
+    } catch {
+      body = {};
+    }
+  }
+
+  if (!response.ok) {
+    const error = body as ApiError | null;
+
+    if (error) throw new ApiError(error.statusCode, error.error, error.message);
+
+    throw new ApiUnexpectedResponseError();
+  }
+
+  return {
+    body,
+    status: response.status,
+    headers: response.headers,
+  } as Awaited<Output>;
+}

package/templates/react-vite/src/app.tsx

@@ -0,0 +1,14 @@
+import { Helmet, HelmetProvider } from "react-helmet-async";
+import { RouterProvider } from "react-router/dom";
+import { env } from "./env";
+import { router } from "./routes";
+
+export function App() {
+  return (
+    <HelmetProvider>
+      <Helmet titleTemplate={`%s | ${env.APP_NAME}`}></Helmet>
+
+      <RouterProvider router={router} />
+    </HelmetProvider>
+  );
+}

package/templates/react-vite/src/env.ts

@@ -0,0 +1,19 @@
+import { z } from "zod";
+
+const schema = z.object({
+  APP_NAME: z.string(),
+  APP_API_BASE_URL: z
+    .string()
+    .url()
+    .transform(val => new URL(val).toString()),
+});
+
+const parsedEnv = schema.safeParse(import.meta.env);
+
+if (!parsedEnv.success) {
+  console.error(parsedEnv.error.flatten().fieldErrors);
+
+  throw new Error("Invalid environment variables.");
+}
+
+export const env = parsedEnv.data;

package/templates/react-vite/src/hooks/use-current-route-handle-params.ts

@@ -0,0 +1,16 @@
+import { ReactRouterRouteHandleDefinition } from "@/@types/routes";
+import { useLocation, useMatches } from "react-router";
+
+export function useCurrentRouteHandleParams() {
+  const { pathname } = useLocation();
+  const routeMatches = useMatches();
+  const currentRouteHandleParams = routeMatches.find(routeMatch => {
+    return routeMatch.pathname === pathname && routeMatch.handle;
+  });
+
+  return {
+    pathname,
+    handleParams:
+      currentRouteHandleParams?.handle as ReactRouterRouteHandleDefinition,
+  };
+}

package/templates/react-vite/src/index.css

@@ -0,0 +1,29 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-size: 1.6rem;
+  line-height: 1.5;
+
+  @media (max-width: 640px) {
+    font-size: 1.5rem;
+  }
+}
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 62.5%;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  background-color: #0d0d0d;
+  color: #d4d4d8;
+}
+
+a {
+  text-decoration: none;
+}

package/templates/react-vite/src/lib/zod-i18n-translation-for-end-users.json

@@ -0,0 +1,103 @@
+{
+  "types": {
+    "number": "número",
+    "string": "texto",
+    "integer": "número inteiro",
+    "boolean": "verdadeiro ou falso",
+    "date": "data",
+    "bigint": "número",
+    "undefined": "vazio",
+    "null": "vazio",
+    "array": "lista",
+    "object": "objeto"
+  },
+  "errors": {
+    "invalid_type": "O campo deve ser {{expected}}, foi recebido {{received}}.",
+    "invalid_type_received_undefined": "O campo é obrigatório.",
+    "invalid_type_received_null": "O campo é obrigatório.",
+    "invalid_literal": "O campo deve ser apenas \"{{expected}}\".",
+    "unrecognized_keys": "Chave(s) não reconhecida(s) no objeto: {{- keys}}.",
+    "invalid_union": "Entrada inválida.",
+    "invalid_union_discriminator": "O campo deve conter apenas os seguintes valores: {{- options}}.",
+    "invalid_enum_value": "O campo deve conter apenas os seguintes valores: {{- options}}.",
+    "invalid_arguments": "Argumento de função inválido.",
+    "invalid_return_type": "Tipo de retorno de função inválido.",
+    "invalid_date": "A data é inválida.",
+    "custom": "A entrada é inválida.",
+    "invalid_intersection_types": "Os valores não podem ser mesclados.",
+    "not_multiple_of": "O número deverá ser múltiplo de {{multipleOf}}.",
+    "not_finite": "O número não pode ser infinito.",
+    "invalid_string": {
+      "email": "O e-mail é inválido.",
+      "url": "A URL é inválida.",
+      "uuid": "O UUID é inválido.",
+      "cuid": "O CUID é inválido.",
+      "regex": "A combinação é inválida.",
+      "datetime": "A data e a hora são inválidos.",
+      "startsWith": "O campo só pode iniciar com \"{{startsWith}}\".",
+      "endsWith": "O campo só pode iniciar com \"{{endsWith}}\"."
+    },
+    "too_small": {
+      "array": {
+        "exact": "A lista deve conter exatamente {{minimum}} item / itens.",
+        "inclusive": "A lista deve conter no mínimo {{minimum}} item / itens.",
+        "not_inclusive": "A lista deve conter mais de {{minimum}} item / itens."
+      },
+      "string": {
+        "exact": "O campo deve conter exatamente {{minimum}} caracter(es).",
+        "inclusive": "O campo é obrigatório com no mínimo {{minimum}} caracter(es).",
+        "not_inclusive": "O campo deve conter mais de {{minimum}} caracter(es)."
+      },
+      "number": {
+        "exact": "O número deve conter exatamente {{minimum}} caracter(es).",
+        "inclusive": "O número deve ser maior ou igual a {{minimum}}.",
+        "not_inclusive": "O número deve ser maior que {{minimum}}."
+      },
+      "set": {
+        "exact": "Entrada inválida.",
+        "inclusive": "Entrada inválida.",
+        "not_inclusive": "Entrada inválida."
+      },
+      "date": {
+        "exact": "A data deve ser exatamente {{- maximum, datetime}}.",
+        "inclusive": "A data deve ser maior ou igual a {{- minimum, datetime}}.",
+        "not_inclusive": "A data deve ser maior que {{- minimum, datetime}}."
+      }
+    },
+    "too_big": {
+      "array": {
+        "exact": "A lista deve conter exatamente {{minimum}} item / itens.",
+        "inclusive": "A lista deve conter no mínimo {{minimum}} item / itens.",
+        "not_inclusive": "A lista deve conter mais de {{minimum}} item / itens."
+      },
+      "string": {
+        "exact": "O campo deve conter exatamente {{minimum}} caracter(es).",
+        "inclusive": "O campo deve conter pelo menos {{minimum}} caracter(es).",
+        "not_inclusive": "O campo deve conter mais de {{minimum}} caracter(es)."
+      },
+      "number": {
+        "exact": "O número deve conter exatamente {{minimum}} caracter(es).",
+        "inclusive": "O número deve ser maior ou igual a {{minimum}}.",
+        "not_inclusive": "O número deve ser maior que {{minimum}}."
+      },
+      "set": {
+        "exact": "Entrada inválida.",
+        "inclusive": "Entrada inválida.",
+        "not_inclusive": "Entrada inválida."
+      },
+      "date": {
+        "exact": "A data deve ser exatamente {{- maximum, datetime}}.",
+        "inclusive": "A data deve ser maior ou igual a {{- minimum, datetime}}.",
+        "not_inclusive": "A data deve ser maior que {{- minimum, datetime}}."
+      }
+    }
+  },
+  "validations": {
+    "email": "email",
+    "url": "url",
+    "uuid": "uuid",
+    "cuid": "cuid",
+    "regex": "regex",
+    "datetime": "datetime"
+  }
+}

package/templates/react-vite/src/lib/zod-i18n.ts

@@ -0,0 +1,20 @@
+import i18next from "i18next";
+import { z } from "zod";
+import { zodI18nMap } from "zod-i18n-map";
+import translation from "zod-i18n-map/locales/pt/zod.json";
+import zodI18nTranslationForEndUsers from "./zod-i18n-translation-for-end-users.json";
+
+export function startZodWithI18n() {
+  i18next.init({
+    lng: "pt",
+    resources: {
+      pt: {
+        zod: { ...translation, ...zodI18nTranslationForEndUsers },
+      },
+    },
+  });
+
+  z.setErrorMap(zodI18nMap);
+}
+
+export { z };

package/templates/react-vite/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./app";
+import "./index.css";
+import { startZodWithI18n } from "./lib/zod-i18n";
+
+startZodWithI18n();
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/react-vite/src/pages/_layouts/app.tsx

@@ -0,0 +1,17 @@
+import { useCurrentRouteHandleParams } from "@/hooks/use-current-route-handle-params";
+import { Helmet } from "react-helmet-async";
+import { Outlet } from "react-router";
+
+export function AppLayout() {
+  const { handleParams } = useCurrentRouteHandleParams();
+
+  return (
+    <>
+      <Helmet title={handleParams.metadata.title} />
+
+      <div>
+        <Outlet />
+      </div>
+    </>
+  );
+}

package/templates/react-vite/src/pages/_layouts/auth.tsx

@@ -0,0 +1,17 @@
+import { useCurrentRouteHandleParams } from "@/hooks/use-current-route-handle-params";
+import { Helmet } from "react-helmet-async";
+import { Outlet } from "react-router";
+
+export function AuthLayout() {
+  const { handleParams } = useCurrentRouteHandleParams();
+
+  return (
+    <>
+      <Helmet title={handleParams.metadata.title} />
+
+      <div>
+        <Outlet />
+      </div>
+    </>
+  );
+}

package/templates/react-vite/src/pages/app/dashboard/dashboard.tsx

@@ -0,0 +1,12 @@
+import { Link } from "react-router";
+import "./styles.css";
+
+export function Dashboard() {
+  return (
+    <div className="dashboard-wrapper">
+      <h1>Hello world!</h1>
+
+      <Link to="/sign-in">Sign out</Link>
+    </div>
+  );
+}

package/templates/react-vite/src/pages/app/dashboard/styles.css

@@ -0,0 +1,40 @@
+.dashboard-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.dashboard-wrapper > h1 {
+  font-size: 4.2rem;
+  line-height: 1.2;
+  letter-spacing: 0.8px;
+  font-weight: 800;
+  color: #fff;
+  margin-bottom: 4rem;
+
+  @media (max-width: 640px) {
+    font-size: 3.6rem;
+    line-height: 1.3;
+  }
+}
+
+.dashboard-wrapper > a {
+  display: inline-block;
+  padding: 1rem 1.6rem;
+  font-weight: 800;
+  text-align: center;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background-color: #fff;
+  color: #000;
+  cursor: pointer;
+  transition: opacity 150ms ease-in-out;
+}
+
+.dashboard-wrapper > a:hover {
+  opacity: 0.8;
+}

package/templates/react-vite/src/pages/auth/sign-in/index.tsx

@@ -0,0 +1,83 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router";
+import { z } from "zod";
+import "./styles.css";
+
+const signInFormSchema = z.object({
+  email: z.string().min(1).email(),
+  password: z.string().min(6).max(255),
+});
+
+type SignInForm = z.infer<typeof signInFormSchema>;
+
+export function SignIn() {
+  const signInForm = useForm<SignInForm>({
+    resolver: zodResolver(signInFormSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+  const navigate = useNavigate();
+  const onSignIn = async (input: SignInForm) => {
+    console.log(input);
+    navigate("/dashboard");
+  };
+
+  return (
+    <div className="sign-in-wrapper">
+      <div className="sign-in-container">
+        <div className="sign-in-header">
+          <h1>Sign In</h1>
+
+          <p>Log in to access the dashboard!</p>
+        </div>
+
+        <form
+          className="sign-in-form"
+          onSubmit={signInForm.handleSubmit(onSignIn)}
+          noValidate
+        >
+          <div className="sign-in-form-input-container">
+            <input
+              {...signInForm.register("email")}
+              type="email"
+              placeholder="Your email"
+              autoComplete="email"
+              autoCapitalize="none"
+              autoCorrect="off"
+            />
+
+            {signInForm.formState.errors.email && (
+              <span className="sign-in-form-input-error">
+                {signInForm.formState.errors.email.message}
+              </span>
+            )}
+          </div>
+
+          <div className="sign-in-form-input-container">
+            <input
+              {...signInForm.register("password")}
+              type="password"
+              placeholder="Your password"
+              autoComplete="current-password"
+              autoCapitalize="none"
+              autoCorrect="off"
+            />
+
+            {signInForm.formState.errors.password && (
+              <span className="sign-in-form-input-error">
+                {signInForm.formState.errors.password.message}
+              </span>
+            )}
+          </div>
+
+          <button className="sign-in-form-submit" type="submit">
+            Sign In
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/templates/react-vite/src/pages/auth/sign-in/styles.css

@@ -0,0 +1,92 @@
+.sign-in-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.sign-in-container {
+  max-width: 500px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 8rem 4rem;
+  border-radius: 25px;
+  border: 1px solid #1c1c1e;
+
+  @media (max-width: 640px) {
+    padding: 4rem 2rem;
+  }
+}
+
+.sign-in-header {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  margin-bottom: 4rem;
+}
+
+.sign-in-header > h1 {
+  font-size: 4.2rem;
+  line-height: 1.2;
+  letter-spacing: 0.8px;
+  font-weight: 800;
+  color: #fff;
+  margin-bottom: 0.8rem;
+
+  @media (max-width: 640px) {
+    font-size: 3.6rem;
+    line-height: 1.3;
+  }
+}
+
+.sign-in-header > p {
+  color: #71717a;
+}
+
+.sign-in-form-input-container + .sign-in-form-input-container {
+  margin-top: 2rem;
+}
+
+.sign-in-form-input-container input {
+  display: block;
+  width: 100%;
+  padding: 1rem 1.6rem;
+  border: 1px solid #1c1c1e;
+  border-radius: 6px;
+  background-color: transparent;
+  color: #fff;
+}
+
+.sign-in-form-input-container input:focus {
+  outline: 1px solid #fff;
+}
+
+.sign-in-form-input-error {
+  display: block;
+  margin-top: 0.4rem;
+  font-size: 1.48rem;
+  color: #dc2626;
+}
+
+.sign-in-form-submit {
+  display: block;
+  width: 100%;
+  padding: 1rem 1.6rem;
+  font-weight: 800;
+  text-align: center;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background-color: #fff;
+  color: #000;
+  margin-top: 5rem;
+  cursor: pointer;
+  transition: opacity 150ms ease-in-out;
+}
+
+.sign-in-form-submit:hover {
+  opacity: 0.8;
+}