Skip to content

define-resource.md

Latest commit

 

History

History
305 lines (236 loc) · 5.86 KB

define-resource.md

File metadata and controls

305 lines (236 loc) · 5.86 KB
Raw
title defineResource
description Define a nested resource (page) within a module

defineResource

Creates a nested resource (page) within a module. Resources represent individual pages in your application hierarchy.

Signature

function defineResource(props: DefineResourceProps): Resource;

Parameters

path

  • Type: string
  • Required: Yes
  • Description: URL path segment for the resource. Supports dynamic parameters with :param syntax.
defineResource({
  path: ":id", // Dynamic: /products/:id
  path: "categories", // Static: /products/categories
});

component

  • Type: (props: ResourceComponentProps) => React.ReactNode
  • Required: Yes
  • Description: Page component to render

ResourceComponentProps:

{
  title: string;          // Resolved title
  icon?: React.ReactNode; // Inherited from module
  resources?: Resource[]; // Child resources
}

meta

  • Type: object
  • Required: No
  • Description: Metadata configuration

meta.title

  • Type: string | LocalizedString
  • Default: Capitalized path
  • Description: Display title in navigation and breadcrumbs

meta.icon

  • Type: React.ReactNode
  • Description: Icon override (inherits from module by default)

meta.breadcrumbTitle

  • Type: string | ((segment: string) => string)
  • Description: Custom breadcrumb segment title

subResources

  • Type: Resource[]
  • Required: No
  • Description: Nested resources within this resource

guards

  • Type: Guard[]
  • Required: No
  • Description: Access control guards

See Guards Overview for details.

errorBoundary

  • Type: React.ReactNode
  • Required: No
  • Description: Error boundary component for this resource

Return Type

Resource;

A resource object used in the resources array of defineModule.

Examples

Basic Resource

import { defineResource } from "@tailor-platform/app-shell";

const detailResource = defineResource({
  path: ":id",
  component: () => <div>Detail Page</div>,
});

Resource with Title

const categoriesResource = defineResource({
  path: "categories",
  meta: {
    title: "Product Categories",
  },
  component: CategoriesPage,
});

Dynamic Route with useParams

import { useParams } from "@tailor-platform/app-shell";

const productDetailResource = defineResource({
  path: ":id",
  meta: {
    title: "Product Details",
  },
  component: () => {
    const { id } = useParams();
    return <div>Product {id}</div>;
  },
});

Nested Resources

const ordersResource = defineResource({
  path: "orders",
  component: OrdersListPage,
  subResources: [
    defineResource({
      path: ":id",
      component: OrderDetailPage,
      subResources: [
        defineResource({
          path: "edit",
          component: OrderEditPage,
        }),
      ],
    }),
  ],
});

// URLs:
// /orders
// /orders/:id
// /orders/:id/edit

Resource with Guards

import { pass, hidden } from "@tailor-platform/app-shell";

const adminSettingsResource = defineResource({
  path: "admin-settings",
  component: AdminSettingsPage,
  guards: [
    ({ context }) => {
      return context.currentUser?.role === "admin" ? pass() : hidden();
    },
  ],
});

Resource with Error Boundary

import { useRouteError } from "@tailor-platform/app-shell";

const ErrorBoundary = () => {
  const error = useRouteError() as Error;
  return <div>Error: {error.message}</div>;
};

const detailResource = defineResource({
  path: ":id",
  component: DetailPage,
  errorBoundary: <ErrorBoundary />,
});

Resource with Custom Breadcrumb

const orderResource = defineResource({
  path: ":id",
  meta: {
    breadcrumbTitle: (segment) => `Order #${segment}`,
  },
  component: OrderDetailPage,
});

// Breadcrumb shows: "Orders > Order #12345"
// Instead of: "Orders > 12345"

Multiple Resources

const productsModule = defineModule({
  path: "products",
  component: ProductsPage,
  resources: [
    defineResource({
      path: ":id",
      meta: { title: "Product Details" },
      component: ProductDetailPage,
    }),
    defineResource({
      path: "categories",
      meta: { title: "Categories" },
      component: CategoriesPage,
    }),
    defineResource({
      path: "brands",
      meta: { title: "Brands" },
      component: BrandsPage,
    }),
  ],
});

Navigation Behavior

Resources appear in:

  • ✅ Sidebar navigation (top-level resources only)
  • ✅ Breadcrumbs (all levels)
  • ✅ CommandPalette search (all levels)
  • ❌ Main navigation menu (use modules instead)

Example Navigation

defineModule({
  path: "products",
  component: ProductsPage,
  resources: [
    defineResource({
      path: "all",
      component: AllProductsPage, // Appears in sidebar
    }),
    defineResource({
      path: ":id",
      component: ProductDetailPage,
      subResources: [
        defineResource({
          path: "edit",
          component: EditPage, // Only in breadcrumbs, not sidebar
        }),
      ],
    }),
  ],
});

Sidebar:

› Products
  - All Products

Breadcrumbs (on edit page):

Products > Product Details > Edit

TypeScript

import { type DefineResourceProps, type Resource } from "@tailor-platform/app-shell";

const props: DefineResourceProps = {
  path: ":id",
  component: DetailPage,
  guards: [],
};

const resource: Resource = defineResource(props);

Related