Adding Features

Learn where to add different types of code in the admin panel.

Decision Tree

Where should I add my code?

Is it a new page/route? → Add to admin/apps/panel/src/routes/
Is it a reusable UI component? → Add to admin/packages/ui/
Is it business logic or API call? → Add to admin/packages/core/
Is it app-specific? → Add to admin/apps/panel/src/components/

Adding a New Route

1. Create Route File

Location: admin/apps/panel/src/routes/

// src/routes/reports.tsx
import { GlassCard } from '@monorepo/solid-pkg-ui';
import { useReports } from '@monorepo/solid-pkg-core/hooks';

export default function Reports() {
  const reports = useReports();

  return (
    <div class="container mx-auto p-6">
      <h1 class="text-3xl font-bold mb-6">Reports</h1>
      <GlassCard>
        {/* Your content */}
      </GlassCard>
    </div>
  );
}

2. Register Route

Update src/app.tsx to include your route.

Adding a Shared Component

1. Create Component

Location: admin/packages/ui/src/components/

// src/components/DataTable.tsx
import { type Component, type JSX } from 'solid-js';
import { cn } from '../utils/cn';

export interface DataTableProps extends JSX.HTMLAttributes<HTMLTableElement> {
  // Your props
}

export const DataTable: Component<DataTableProps> = (props) => {
  return (
    <table class={cn('glass rounded-lg', props.class)}>
      {props.children}
    </table>
  );
};

2. Export Component

File: admin/packages/ui/src/components/index.ts

export { DataTable } from "./DataTable";

3. Use Component

import { DataTable } from '@monorepo/solid-pkg-ui';

<DataTable>...</DataTable>

Adding Business Logic

1. Create Hook

Location: admin/packages/core/src/hooks/

// src/hooks/useReports.ts
import { createQuery } from "@tanstack/solid-query";
import { apiClient } from "../api/rest/client";

export function useReports() {
  return createQuery(() => ({
    queryKey: ["reports"],
    queryFn: async () => {
      const response = await apiClient.get("/reports");
      return response.data;
    },
  }));
}

2. Export Hook

File: admin/packages/core/src/hooks/index.ts

export { useReports } from "./useReports";

3. Use Hook

import { useReports } from "@monorepo/solid-pkg-core/hooks";

const reports = useReports();

Adding API Endpoints

Update API Client

Location: admin/packages/core/src/api/rest/client.ts

// Add TypeScript types
export interface Report {
  id: string;
  title: string;
  data: any;
}

// Use in hooks
const response = await apiClient.get<Report[]>("/reports");

Adding Utilities

1. Create Utility

Location: admin/packages/core/src/utils/

// src/utils/formatDate.ts
export function formatDate(date: Date): string {
  return date.toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
}

2. Export Utility

File: admin/packages/core/src/utils/index.ts

export { formatDate } from "./formatDate";

3. Use Utility

import { formatDate } from "@monorepo/solid-pkg-core/utils";

const formatted = formatDate(new Date());

Best Practices

1. Keep Packages Focused

Core: Business logic, no UI
UI: Components, no business logic
Panel: Routes and composition

2. Use TypeScript

Always define types for your data:

export interface User {
  id: string;
  name: string;
  email: string;
}

3. Follow Naming Conventions

Components: PascalCase (DataTable)
Hooks: camelCase with use prefix (useReports)
Utilities: camelCase (formatDate)
Files: Match export name (DataTable.tsx)

4. Export from Index

Always export from index.ts for clean imports:

// ✅ Good
import { DataTable } from "@monorepo/solid-pkg-ui";

// ❌ Avoid
import { DataTable } from "@monorepo/solid-pkg-ui/components/DataTable";

Architecture - Understand the structure
Module Boundaries - Know where to put code
Build Scripts - Test your changes
Public API - Package API surface guidelines

Getting Started

Development

UI Components

Adding Features

Adding Features

Decision Tree

Adding a New Route

1. Create Route File

2. Register Route

Adding a Shared Component

1. Create Component

2. Export Component

3. Use Component

Adding Business Logic

1. Create Hook

2. Export Hook

3. Use Hook

Adding API Endpoints

Update API Client

Adding Utilities

1. Create Utility

2. Export Utility

3. Use Utility

Best Practices

1. Keep Packages Focused

2. Use TypeScript

3. Follow Naming Conventions

4. Export from Index

​Adding Features

​Decision Tree

​Adding a New Route

​1. Create Route File

​2. Register Route

​Adding a Shared Component

​1. Create Component

​2. Export Component

​3. Use Component

​Adding Business Logic

​1. Create Hook

​2. Export Hook

​3. Use Hook

​Adding API Endpoints

​Update API Client

​Adding Utilities

​1. Create Utility

​2. Export Utility

​3. Use Utility

​Best Practices

​1. Keep Packages Focused

​2. Use TypeScript

​3. Follow Naming Conventions

​4. Export from Index

​Related Documentation

Adding Features

Decision Tree

Adding a New Route

1. Create Route File

2. Register Route

Adding a Shared Component

1. Create Component

2. Export Component

3. Use Component

Adding Business Logic

1. Create Hook

2. Export Hook

3. Use Hook

Adding API Endpoints

Update API Client

Adding Utilities

1. Create Utility

2. Export Utility

3. Use Utility

Best Practices

1. Keep Packages Focused

2. Use TypeScript

3. Follow Naming Conventions

4. Export from Index

Related Documentation