​
Public API Surface

This document describes the public API for the admin panel packages.

​
Overview

Both @monorepo/solid-pkg-ui and @monorepo/solid-pkg-core now expose a controlled public API surface through their root index.ts files. This prevents deep imports and allows internal refactoring without breaking changes.

​
@monorepo/solid-pkg-ui

​
Exported Components

import {
  GlassButton,
  GlassCard,
  ProtectedRoute,
  AuthGuard,
} from "@monorepo/solid-pkg-ui";

​
Available Components

  • GlassButton - Button component with glassmorphism styling
  • GlassCard - Card component with glassmorphism styling
  • ProtectedRoute - Route wrapper that requires authentication
  • AuthGuard - Conditional rendering based on auth state

​
Exported Types

import type { GlassButtonProps, GlassCardProps } from "@monorepo/solid-pkg-ui";

​
❌ Do NOT Use

// ❌ WRONG - Deep imports bypass the public API
import { GlassButton } from "@monorepo/solid-pkg-ui/src/components/GlassButton";
import { cn } from "@monorepo/solid-pkg-ui/src/utils/cn";

​
✅ Correct Usage

// ✅ CORRECT - Use the public API
import { GlassButton, GlassCard } from "@monorepo/solid-pkg-ui";

​
@monorepo/solid-pkg-core

​
Exported Modules

import { apiClient } from "@monorepo/solid-pkg-core";
import { authClient } from "@monorepo/solid-pkg-core";
import { useApprovals } from "@monorepo/solid-pkg-core";
import { env } from "@monorepo/solid-pkg-core";
import { cn } from "@monorepo/solid-pkg-core";

​
Available Exports

API Client
  • apiClient - Configured REST API client
Authentication
  • authClient - Better Auth client
  • Other auth utilities from ./auth
Data Fetching Hooks
  • useApprovals - Fetch approvals data
  • Other TanStack Query hooks from ./hooks
Configuration
  • env - Environment configuration
  • Other config from ./config
Utilities
  • cn - Class name utility (clsx + tailwind-merge)
  • Other public utilities from ./utils
Types
  • All types from ./types

​
❌ Do NOT Use

// ❌ WRONG - Deep imports
import { apiClient } from "@monorepo/solid-pkg-core/src/api/rest/client";
import { useApprovals } from "@monorepo/solid-pkg-core/src/hooks/useApprovals";

​
✅ Correct Usage

// ✅ CORRECT - Use the public API
import { apiClient, useApprovals, env } from "@monorepo/solid-pkg-core";

​
Benefits

​
1. Prevents Deep Imports ✅

Consumers cannot bypass the public API and import internal modules directly.

​
2. Allows Internal Refactors ✅

You can:
  • Move files around
  • Rename internal components
  • Reorganize folder structure
  • Change internal implementations
Without breaking any imports in consuming apps.

​
3. Enforces Design System Discipline ✅

  • Only approved components are exported
  • Prevents ad-hoc component usage
  • Maintains consistency across apps

​
Example: Building a Page

// src/routes/approvals.tsx
import { GlassCard, GlassButton } from "@monorepo/solid-pkg-ui";
import { useApprovals } from "@monorepo/solid-pkg-core";

export default function ApprovalsPage() {
  const approvals = useApprovals();

  return (
    <div class="container mx-auto p-6">
      <h1 class="text-3xl font-bold mb-6">Approvals</h1>

      <GlassCard>
        {approvals.data?.map((approval) => (
          <div key={approval.id}>
            <p>{approval.title}</p>
            <GlassButton onClick={() => handleApprove(approval.id)}>
              Approve
            </GlassButton>
          </div>
        ))}
      </GlassCard>
    </div>
  );
}

​
Adding New Public Exports

When adding new components or utilities that should be part of the public API:

​
For @monorepo/solid-pkg-ui

  1. Create your component in packages/ui/src/components/
  2. Export it from packages/ui/src/components/index.ts
  3. Add it to packages/ui/src/index.ts
// packages/ui/src/index.ts
export { NewComponent } from "./components/NewComponent";
export type { NewComponentProps } from "./components/NewComponent";

​
For @monorepo/solid-pkg-core

  1. Create your hook/utility in the appropriate directory
  2. Export it from that directory’s index.ts
  3. It will automatically be available (we use export * in the root)

​
Internal-Only Code

Some code should never be exported:
  • Internal helper functions
  • Private utilities
  • Implementation details
  • Test utilities
  • Development tools
These can live in the packages but should not be exported from any index.ts file.

​
Migration Guide

If you have existing deep imports, update them: 
// Before
import { GlassButton } from "@monorepo/solid-pkg-ui/src/components/GlassButton";
import { apiClient } from "@monorepo/solid-pkg-core/src/api/rest/client";

// After
import { GlassButton } from "@monorepo/solid-pkg-ui";
import { apiClient } from "@monorepo/solid-pkg-core";

​
Enforcement (Optional)

You can add ESLint rules to prevent deep imports: 
// .eslintrc.js
module.exports = {
  rules: {
    "no-restricted-imports": [
      "error",
      {
        patterns: ["@monorepo/solid-pkg-ui/src/*", "@monorepo/solid-pkg-core/src/*"],
      },
    ],
  },
};
This will show an error if anyone tries to use deep imports.