npm - create-ely - Versions diffs - 0.1.1 - Mend

create-ely 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/templates/monorepo/apps/frontend/index.html ADDED Viewed

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="ElysiaJS boilerplate with React frontend" />
+    <title>ElysiaJS Boilerplate</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/monorepo/apps/frontend/package.json ADDED Viewed

@@ -0,0 +1,48 @@
+{
+  "name": "frontend",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "format": "biome format",
+    "lint": "biome lint",
+    "check": "biome check",
+    "routes:generate": "tsr generate",
+    "routes:watch": "tsr watch"
+  },
+  "dependencies": {
+    "@elysiajs/eden": "^1.4.6",
+    "@tailwindcss/vite": "^4.0.6",
+    "@tanstack/react-devtools": "^0.9.0",
+    "@tanstack/react-router": "^1.144.0",
+    "@tanstack/react-router-devtools": "^1.144.0",
+    "@tanstack/router-plugin": "^1.145.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "elysia-boilerplate": "workspace:*",
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.0.6",
+    "tw-animate-css": "^1.3.6"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.10",
+    "@tanstack/devtools-vite": "^0.4.0",
+    "@tanstack/router-cli": "^1.145.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.0.4",
+    "jsdom": "^27.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^7.1.7",
+    "vitest": "^4.0.16"
+  }
+}

package/templates/monorepo/apps/frontend/public/favicon.ico ADDED Viewed

Binary file

package/templates/monorepo/apps/frontend/src/assets/fonts/.gitkeep ADDED Viewed

File without changes

package/templates/monorepo/apps/frontend/src/assets/images/.gitkeep ADDED Viewed

File without changes

package/templates/monorepo/apps/frontend/src/features/layout/Header.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+import { Link } from '@tanstack/react-router';
+import { Home, Menu, Users, X } from 'lucide-react';
+import { useState } from 'react';
+export default function Header() {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <header className="p-4 flex items-center bg-gray-800 text-white shadow-lg">
+        <button
+          onClick={() => setIsOpen(true)}
+          className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
+          aria-label="Open menu"
+          type="button"
+        >
+          <Menu size={24} />
+        </button>
+        <h1 className="ml-4 text-xl font-semibold">
+          <Link to="/" className="hover:text-cyan-400 transition-colors">
+            App
+          </Link>
+        </h1>
+      </header>
+      <aside
+        className={`fixed top-0 left-0 h-full w-80 bg-gray-900 text-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${
+          isOpen ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        <div className="flex items-center justify-between p-4 border-b border-gray-700">
+          <h2 className="text-xl font-bold">Navigation</h2>
+          <button
+            onClick={() => setIsOpen(false)}
+            className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
+            aria-label="Close menu"
+            type="button"
+          >
+            <X size={24} />
+          </button>
+        </div>
+        <nav className="flex-1 p-4 overflow-y-auto">
+          <Link
+            to="/"
+            onClick={() => setIsOpen(false)}
+            className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
+            activeProps={{
+              className:
+                'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
+            }}
+          >
+            <Home size={20} />
+            <span className="font-medium">Home</span>
+          </Link>
+          <Link
+            to="/users"
+            onClick={() => setIsOpen(false)}
+            className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
+            activeProps={{
+              className:
+                'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
+            }}
+          >
+            <Users size={20} />
+            <span className="font-medium">Users</span>
+          </Link>
+        </nav>
+      </aside>
+    </>
+  );
+}

package/templates/monorepo/apps/frontend/src/main.tsx ADDED Viewed

@@ -0,0 +1,36 @@
+import { createRouter, RouterProvider } from '@tanstack/react-router';
+import { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
+// Import the generated route tree
+import { routeTree } from './routeTree.gen';
+import './styles.css';
+// Create a new router instance
+const router = createRouter({
+  routeTree,
+  context: {},
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+});
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+// Render the app
+const rootElement = document.getElementById('app');
+if (rootElement && !rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>,
+  );
+}

package/templates/monorepo/apps/frontend/src/routeTree.gen.ts ADDED Viewed

@@ -0,0 +1,95 @@
+/* eslint-disable */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as UsersIndexRouteImport } from './routes/users/index'
+import { Route as UsersNewRouteImport } from './routes/users/new'
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const UsersIndexRoute = UsersIndexRouteImport.update({
+  id: '/users/',
+  path: '/users/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const UsersNewRoute = UsersNewRouteImport.update({
+  id: '/users/new',
+  path: '/users/new',
+  getParentRoute: () => rootRouteImport,
+} as any)
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/users/new': typeof UsersNewRoute
+  '/users': typeof UsersIndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/users/new': typeof UsersNewRoute
+  '/users': typeof UsersIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/users/new': typeof UsersNewRoute
+  '/users/': typeof UsersIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/users/new' | '/users'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/users/new' | '/users'
+  id: '__root__' | '/' | '/users/new' | '/users/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  UsersNewRoute: typeof UsersNewRoute
+  UsersIndexRoute: typeof UsersIndexRoute
+}
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/users/': {
+      id: '/users/'
+      path: '/users'
+      fullPath: '/users'
+      preLoaderRoute: typeof UsersIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/users/new': {
+      id: '/users/new'
+      path: '/users/new'
+      fullPath: '/users/new'
+      preLoaderRoute: typeof UsersNewRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  UsersNewRoute: UsersNewRoute,
+  UsersIndexRoute: UsersIndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/templates/monorepo/apps/frontend/src/routes/__root.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import { TanStackDevtools } from '@tanstack/react-devtools';
+import { createRootRoute, Outlet } from '@tanstack/react-router';
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
+import Header from '@/features/layout/Header';
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <Header />
+      <Outlet />
+      <TanStackDevtools
+        config={{
+          position: 'bottom-right',
+        }}
+        plugins={[
+          {
+            name: 'Tanstack Router',
+            render: <TanStackRouterDevtoolsPanel />,
+          },
+        ]}
+      />
+    </>
+  ),
+});

package/templates/monorepo/apps/frontend/src/routes/index.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+import { createFileRoute } from '@tanstack/react-router';
+export const Route = createFileRoute('/')({
+  component: App,
+});
+function App() {
+  return (
+    <div className="text-center">
+      <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]">
+        <h1 className="text-5xl font-bold mb-4">Welcome</h1>
+        <p>
+          Edit <code>src/routes/index.tsx</code> and save to reload.
+        </p>
+        <a
+          className="text-[#61dafb] hover:underline"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+        <a
+          className="text-[#61dafb] hover:underline"
+          href="https://tanstack.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn TanStack
+        </a>
+      </header>
+    </div>
+  );
+}

package/templates/monorepo/apps/frontend/src/routes/users/index.tsx ADDED Viewed

@@ -0,0 +1,79 @@
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { UserPlus } from 'lucide-react';
+import { api } from '@/shared/api/client';
+export const Route = createFileRoute('/users/')({
+  component: Users,
+  loader: async () => {
+    const { data, error } = await api.users.get({
+      query: {
+        limit: 100,
+        offset: 0,
+      },
+    });
+    if (error) {
+      throw new Error(error.value as string);
+    }
+    return { users: data?.users ?? [], total: data?.total ?? 0 };
+  },
+});
+function Users() {
+  const { users, total } = Route.useLoaderData();
+  return (
+    <div className="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="text-3xl font-bold text-gray-900">Users</h1>
+          <Link
+            to="/users/new"
+            className="inline-flex items-center gap-2 px-4 py-2 bg-cyan-600 text-white rounded-md hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 transition-colors"
+          >
+            <UserPlus size={20} />
+            Create New User
+          </Link>
+        </div>
+        <div className="bg-white rounded-lg shadow-md overflow-hidden">
+          {users.length === 0 ? (
+            <div className="p-8 text-center text-gray-500">
+              <p className="text-lg mb-2">No users found</p>
+              <p className="text-sm">Create your first user to get started.</p>
+            </div>
+          ) : (
+            <>
+              <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
+                <p className="text-sm text-gray-600">
+                  Showing {users.length} of {total} users
+                </p>
+              </div>
+              <div className="divide-y divide-gray-200">
+                {users.map((user) => (
+                  <div
+                    key={user.id}
+                    className="px-6 py-4 hover:bg-gray-50 transition-colors"
+                  >
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <h3 className="text-lg font-semibold text-gray-900">
+                          {user.name} {user.surname}
+                        </h3>
+                        <p className="text-sm text-gray-600">{user.email}</p>
+                      </div>
+                      <div className="text-xs text-gray-400">
+                        ID: {user.id.slice(0, 8)}...
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/monorepo/apps/frontend/src/routes/users/new.tsx ADDED Viewed

@@ -0,0 +1,148 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
+import { useState } from 'react';
+import { api } from '@/shared/api/client';
+export const Route = createFileRoute('/users/new')({
+  component: NewUser,
+});
+function NewUser() {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState({
+    name: '',
+    surname: '',
+    email: '',
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      const { data, error: apiError } = await api.users.post(formData);
+      if (apiError) {
+        setError(apiError.value);
+        return;
+      }
+      if (data) {
+        navigate({ to: '/users' });
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create user');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+  return (
+    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md mx-auto bg-white rounded-lg shadow-md p-6">
+        <h1 className="text-2xl font-bold text-gray-900 mb-6">
+          Create New User
+        </h1>
+        {error && (
+          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-md">
+            <p className="text-sm text-red-800">{error}</p>
+          </div>
+        )}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label
+              htmlFor="name"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              required
+              minLength={1}
+              maxLength={255}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500"
+              disabled={isSubmitting}
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="surname"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              Surname
+            </label>
+            <input
+              type="text"
+              id="surname"
+              name="surname"
+              value={formData.surname}
+              onChange={handleChange}
+              required
+              minLength={1}
+              maxLength={255}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500"
+              disabled={isSubmitting}
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 mb-1"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              required
+              minLength={1}
+              maxLength={255}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500"
+              disabled={isSubmitting}
+            />
+          </div>
+          <div className="flex gap-3 pt-4">
+            <button
+              type="button"
+              onClick={() => navigate({ to: '/users' })}
+              className="flex-1 px-4 py-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled={isSubmitting}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="flex-1 px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-cyan-600 hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled={isSubmitting}
+            >
+              {isSubmitting ? 'Creating...' : 'Create User'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/templates/monorepo/apps/frontend/src/shared/api/client.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { treaty } from '@elysiajs/eden';
+import type { App } from 'elysia-boilerplate';
+export const api = treaty<App>(
+  import.meta.env.VITE_API_URL || 'http://localhost:3000',
+);

package/templates/monorepo/apps/frontend/src/shared/components/.gitkeep ADDED Viewed

File without changes

package/templates/monorepo/apps/frontend/src/shared/constants/.gitkeep ADDED Viewed

File without changes

package/templates/monorepo/apps/frontend/src/shared/hooks/.gitkeep ADDED Viewed

File without changes

package/templates/monorepo/apps/frontend/src/shared/types/.gitkeep ADDED Viewed

File without changes

package/templates/monorepo/apps/frontend/src/shared/utils/utils.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}