​
Adding Features

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

​
Decision Tree

Where should I add my code?
  1. Is it a new page/route? → Add to admin/apps/panel/src/routes/
  2. Is it a reusable UI component? → Add to admin/packages/ui/
  3. Is it business logic or API call? → Add to admin/packages/core/
  4. 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";