@tailor-platform/app-shell 0.21.1 → 0.23.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,40 @@ 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";
+
+/**
+ * Supported column count options
+ */
+declare type ColumnCount = 1 | 2 | 3;
+
+/**
+ * Props for individual Layout.Column component
+ */
+declare interface ColumnProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Child content */
+    children?: ReactNode;
+}
+
+/**
+ * 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 +322,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 +523,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 +595,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;
 } & {
@@ -527,6 +673,57 @@ declare type LabelDefinition<Def extends Record<string, LabelValue>> = {
  */
 declare type LabelValue = string | ((props: any) => string);
 
+/**
+ * Layout - Responsive column layout component
+ *
+ * Automatically handles responsive behavior for 1, 2, or 3 column layouts.
+ * Uses flexbox with viewport breakpoints for simple, CSS-only responsive behavior.
+ *
+ * @example
+ * ```tsx
+ * // Basic layout
+ * <Layout columns={2}>
+ *   <Layout.Column>Main content</Layout.Column>
+ *   <Layout.Column>Side panel</Layout.Column>
+ * </Layout>
+ *
+ * // With header and actions
+ * <Layout columns={2} title="Page Title" actions={[<Button key="save">Save</Button>]}>
+ *   <Layout.Column>...</Layout.Column>
+ *   <Layout.Column>...</Layout.Column>
+ * </Layout>
+ * ```
+ */
+export declare function Layout({ columns, className, gap, title, actions, children, }: LayoutProps): JSX.Element;
+
+export declare namespace Layout {
+    var Column: React_2.ForwardRefExoticComponent<ColumnProps & React_2.RefAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Props for the Layout component
+ */
+export declare interface LayoutProps {
+    /**
+     * Number of columns (1, 2, or 3).
+     *
+     * **Required.** Must match the exact number of `Layout.Column` children.
+     * The component will throw an error in development if there's a mismatch.
+     */
+    columns: ColumnCount;
+    /** Additional CSS classes */
+    className?: string;
+    /** Gap between columns (default: 4 = 16px) */
+    gap?: number;
+    /** Header title - displayed at the top of the layout */
+    title?: string;
+    /** Header actions - array of action components (e.g., buttons) displayed on the right side of the header.
+     * Layout and spacing are handled automatically. */
+    actions?: ReactNode[];
+    /** Child elements - must be exactly `columns` number of Layout.Column components */
+    children: ReactNode;
+}
+
 export { Link }
 
 declare type LoaderHandler = (args: LoaderFunctionArgs) => Promise<unknown> | unknown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailor-platform/app-shell",
-  "version": "0.21.1",
+  "version": "0.23.0",
   "type": "module",
   "exports": {
     "./styles": "./dist/app-shell.css",
@@ -18,7 +18,6 @@
     "react-dom": ">= 19"
   },
   "dependencies": {
-    "@badgateway/oauth2-client": "^3.3.0",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -26,7 +25,6 @@
     "@radix-ui/react-label": "^2.1.8",
     "@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",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",