@tailor-platform/app-shell 0.21.0 → 0.22.0

package/dist/index.d.ts

@@ -1,15 +1,18 @@
 import { AuthState } from '@tailor-platform/auth-browser-client';
+import { ClassProp } from 'class-variance-authority/types';
 import { DocumentNode } from 'graphql';
 import { JSX } from 'react/jsx-runtime';
 import { Link } from 'react-router';
 import { LoaderFunctionArgs } from 'react-router';
 import { Params } from 'react-router';
+import * as React_2 from 'react';
 import { ReactNode } from 'react';
 import { useLocation } from 'react-router';
 import { useNavigate } from 'react-router';
 import { useParams } from 'react-router';
 import { useRouteError } from 'react-router';
 import { useSearchParams } from 'react-router';
+import { VariantProps } from 'class-variance-authority';
 
 /**
  * Context provided to access control functions
@@ -241,6 +244,25 @@ declare type AuthProviderProps = {
 export declare interface AuthRegister {
 }
 
+export declare function Badge({ className, variant, children, ...props }: BadgeProps): JSX.Element;
+
+export declare interface BadgeProps extends React_2.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+
+export declare const badgeVariants: (props?: ({
+    variant?: "default" | "error" | "success" | "warning" | "neutral" | "outline-success" | "outline-warning" | "outline-error" | "outline-info" | "outline-neutral" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+/**
+ * Badge variant mapping for automatic status coloring
+ */
+declare type BadgeVariantType = "default" | "success" | "warning" | "error" | "neutral" | "outline-success" | "outline-warning" | "outline-error" | "outline-info" | "outline-neutral";
+
+/**
+ * Column layout options for the card
+ */
+declare type Columns = 3 | 4;
+
 /**
  * CommandPalette component that uses navigation items with access control.
  * Renders a searchable command palette UI triggered by Cmd+K / Ctrl+K.
@@ -285,6 +307,11 @@ declare type CommonProps = {
     accessControl?: AccessControl;
 };
 
+/**
+ * Date format options
+ */
+declare type DateFormat = "short" | "medium" | "long" | "relative";
+
 export declare const DefaultSidebar: (props: DefaultSidebarProps) => JSX.Element;
 
 declare type DefaultSidebarProps = {
@@ -481,10 +508,55 @@ declare type DefineResourceProps = CommonProps & ReactResourceProps & {
     errorBoundary?: ErrorBoundaryComponent;
 };
 
+/**
+ * DescriptionCard - ERP document display component
+ *
+ * Renders structured key-value information with automatic layout.
+ * Use { type: "divider" } in the fields array to add dividers between sections.
+ *
+ * @example
+ * ```tsx
+ * <DescriptionCard
+ *   data={order}
+ *   title="Order Summary"
+ *   fields={[
+ *     { key: "status", label: "Status", type: "badge", meta: { badgeVariantMap: { CONFIRMED: "success" } } },
+ *     { key: "orderNumber", label: "Order #", meta: { copyable: true } },
+ *     { type: "divider" },
+ *     { key: "total", label: "Total", type: "money" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function DescriptionCard({ data, title, fields, columns, className, headerAction, }: DescriptionCardProps): JSX.Element;
+
+/**
+ * Props for the DescriptionCard component
+ */
+export declare interface DescriptionCardProps {
+    /** Raw backend data object */
+    data: Record<string, unknown>;
+    /** Card title */
+    title: string;
+    /** Ordered list of field definitions (use { type: "divider" } for dividers) */
+    fields: FieldConfig[];
+    /** Number of columns on desktop (3 or 4) */
+    columns?: Columns;
+    /** Additional CSS classes */
+    className?: string;
+    /** Header action slot (e.g., edit button) */
+    headerAction?: React.ReactNode;
+}
+
 declare type DynamicLocales<Def extends Record<string, LabelValue>> = {
     [locale: string]: Partial<LabelDefinition<Def>> | undefined;
 };
 
+/**
+ * Behavior when a field value is empty/null/undefined
+ */
+declare type EmptyBehavior = "dash" | "hide";
+
 /**
  * Error boundary element type for route error handling.
  *
@@ -508,6 +580,65 @@ declare type DynamicLocales<Def extends Record<string, LabelValue>> = {
  */
 export declare type ErrorBoundaryComponent = ReactNode;
 
+/**
+ * A field configuration - either a divider or a field definition
+ */
+declare type FieldConfig = FieldDivider | FieldDefinition;
+
+/**
+ * Field definition - renders a key-value pair
+ */
+declare interface FieldDefinition {
+    /** Field type determines rendering (defaults to "text") */
+    type?: FieldType;
+    /** Path to the value in the data object (supports dot notation) */
+    key: string;
+    /** Display label for the field */
+    label: string;
+    /** Type-specific metadata */
+    meta?: FieldMeta;
+    /** Behavior when value is empty (defaults to "dash") */
+    emptyBehavior?: EmptyBehavior;
+}
+
+/**
+ * Divider - creates a horizontal line between sections
+ */
+declare interface FieldDivider {
+    type: "divider";
+}
+
+/**
+ * Metadata for field-specific rendering options
+ */
+declare interface FieldMeta {
+    /** Show copy button for this field */
+    copyable?: boolean;
+    /** Map field values to badge variants */
+    badgeVariantMap?: Record<string, BadgeVariantType>;
+    /** Key path to currency code in data object (for money fields) */
+    currencyKey?: string;
+    /** Key path to href in data object (for link fields) */
+    hrefKey?: string;
+    /** Whether the link opens in a new tab */
+    external?: boolean;
+    /** Date format style */
+    dateFormat?: DateFormat;
+    /** Key path to reference document ID */
+    referenceIdKey?: string;
+    /** Base URL pattern for reference links (use {id} as placeholder) */
+    referenceUrlPattern?: string;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Truncate text after this many lines (shows tooltip with full text) */
+    truncateLines?: number;
+}
+
+/**
+ * Supported field types for DescriptionCard
+ */
+declare type FieldType = "text" | "badge" | "money" | "date" | "link" | "address" | "reference";
+
 export declare type I18nLabels<Def extends Record<string, LabelValue> = Record<string, LabelValue>, L extends string = never> = {
     en: Def;
 } & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailor-platform/app-shell",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "type": "module",
   "exports": {
     "./styles": "./dist/app-shell.css",
@@ -24,7 +24,7 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-navigation-menu": "^1.2.5",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.8",
@@ -64,7 +64,7 @@
     "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.0",
     "vite-plugin-externalize-deps": "^0.10.0",
-    "vite-tsconfig-paths": "^5.1.4",
+    "vite-tsconfig-paths": "^6.0.4",
     "vitest": "^4.0.16"
   },
   "scripts": {