@object-ui/plugin-detail 3.0.3 → 3.1.0

package/src/index.tsx

@@ -14,10 +14,46 @@ import { RelatedList } from './RelatedList';
 import type { DetailViewSchema } from '@object-ui/types';
 
 export { DetailView, DetailSection, DetailTabs, RelatedList };
+export { inferDetailColumns, isWideFieldType, applyAutoSpan, applyDetailAutoLayout } from './autoLayout';
+export { useDetailTranslation, DETAIL_DEFAULT_TRANSLATIONS, createSafeTranslationHook } from './useDetailTranslation';
+export { RecordComments } from './RecordComments';
+export { ActivityTimeline } from './ActivityTimeline';
+export { InlineCreateRelated } from './InlineCreateRelated';
+export { RichTextCommentInput } from './RichTextCommentInput';
+export { DiffView } from './DiffView';
+export { RecordNavigationEnhanced } from './RecordNavigationEnhanced';
+export { RelationshipGraph } from './RelationshipGraph';
+export { CommentAttachment } from './CommentAttachment';
+export { PointInTimeRestore } from './PointInTimeRestore';
+export { RecordActivityTimeline } from './RecordActivityTimeline';
+export { RecordChatterPanel } from './RecordChatterPanel';
+export { CommentInput } from './CommentInput';
+export { FieldChangeItem } from './FieldChangeItem';
+export { MentionAutocomplete, createMentionFromSuggestion } from './MentionAutocomplete';
+export { SubscriptionToggle } from './SubscriptionToggle';
+export { ReactionPicker } from './ReactionPicker';
+export { ThreadedReplies } from './ThreadedReplies';
 export type { DetailViewProps } from './DetailView';
 export type { DetailSectionProps } from './DetailSection';
 export type { DetailTabsProps } from './DetailTabs';
 export type { RelatedListProps } from './RelatedList';
+export type { RecordCommentsProps } from './RecordComments';
+export type { ActivityTimelineProps, ActivityFilterType } from './ActivityTimeline';
+export type { InlineCreateRelatedProps, RelatedFieldDefinition, RelatedRecordOption } from './InlineCreateRelated';
+export type { RichTextCommentInputProps, MentionSuggestion } from './RichTextCommentInput';
+export type { DiffViewProps, DiffFieldType, DiffMode, DiffLine } from './DiffView';
+export type { RecordNavigationEnhancedProps } from './RecordNavigationEnhanced';
+export type { RelationshipGraphProps, GraphNode } from './RelationshipGraph';
+export type { CommentAttachmentProps, Attachment } from './CommentAttachment';
+export type { PointInTimeRestoreProps, RevisionEntry } from './PointInTimeRestore';
+export type { RecordActivityTimelineProps, FeedFilterMode } from './RecordActivityTimeline';
+export type { RecordChatterPanelProps } from './RecordChatterPanel';
+export type { CommentInputProps } from './CommentInput';
+export type { FieldChangeItemProps } from './FieldChangeItem';
+export type { MentionAutocompleteProps, MentionSuggestionItem } from './MentionAutocomplete';
+export type { SubscriptionToggleProps } from './SubscriptionToggle';
+export type { ReactionPickerProps } from './ReactionPicker';
+export type { ThreadedRepliesProps } from './ThreadedReplies';
 
 // Register DetailView component
 ComponentRegistry.register('detail-view', DetailView, {
@@ -31,14 +67,22 @@ ComponentRegistry.register('detail-view', DetailView, {
     { name: 'resourceId', type: 'string', label: 'Resource ID' },
     { name: 'api', type: 'string', label: 'API Endpoint' },
     { name: 'data', type: 'object', label: 'Data' },
+    { name: 'layout', type: 'enum', label: 'Layout Mode', enum: ['vertical', 'horizontal', 'grid'] },
+    { name: 'columns', type: 'number', label: 'Grid Columns' },
     { name: 'sections', type: 'array', label: 'Sections' },
     { name: 'fields', type: 'array', label: 'Fields' },
     { name: 'tabs', type: 'array', label: 'Tabs' },
     { name: 'related', type: 'array', label: 'Related Lists' },
     { name: 'actions', type: 'array', label: 'Actions' },
     { name: 'showBack', type: 'boolean', label: 'Show Back Button', defaultValue: true },
+    { name: 'backUrl', type: 'string', label: 'Back URL' },
     { name: 'showEdit', type: 'boolean', label: 'Show Edit Button', defaultValue: false },
+    { name: 'editUrl', type: 'string', label: 'Edit URL' },
     { name: 'showDelete', type: 'boolean', label: 'Show Delete Button', defaultValue: false },
+    { name: 'deleteConfirmation', type: 'string', label: 'Delete Confirmation Message' },
+    { name: 'loading', type: 'boolean', label: 'Show Loading State' },
+    { name: 'header', type: 'object', label: 'Custom Header' },
+    { name: 'footer', type: 'object', label: 'Custom Footer' },
   ],
   defaultProps: {
     title: 'Detail View',
@@ -64,6 +108,8 @@ ComponentRegistry.register('detail-section', DetailSection, {
     { name: 'collapsible', type: 'boolean', label: 'Collapsible', defaultValue: false },
     { name: 'defaultCollapsed', type: 'boolean', label: 'Default Collapsed', defaultValue: false },
     { name: 'columns', type: 'number', label: 'Columns', defaultValue: 2 },
+    { name: 'showBorder', type: 'boolean', label: 'Show Border', defaultValue: true },
+    { name: 'headerColor', type: 'string', label: 'Header Color' },
   ],
 });
 

package/src/useDetailTranslation.ts

@@ -0,0 +1,103 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useObjectTranslation } from '@object-ui/react';
+
+/**
+ * Create a safe translation hook with fallback to defaults.
+ * Follows the same pattern as useGridTranslation / useListViewTranslation.
+ *
+ * @param defaults - Fallback English translations keyed by i18n key
+ * @param testKey - A key to test if i18n is properly configured
+ */
+export function createSafeTranslationHook(
+  defaults: Record<string, string>,
+  testKey: string,
+) {
+  return function useSafeTranslation() {
+    try {
+      const result = useObjectTranslation();
+      const testValue = result.t(testKey);
+      if (testValue === testKey) {
+        return {
+          t: (key: string, options?: Record<string, unknown>) => {
+            let value = defaults[key] || key;
+            if (options) {
+              for (const [k, v] of Object.entries(options)) {
+                value = value.replace(`{{${k}}}`, String(v));
+              }
+            }
+            return value;
+          },
+        };
+      }
+      return { t: result.t };
+    } catch {
+      return {
+        t: (key: string, options?: Record<string, unknown>) => {
+          let value = defaults[key] || key;
+          if (options) {
+            for (const [k, v] of Object.entries(options)) {
+              value = value.replace(`{{${k}}}`, String(v));
+            }
+          }
+          return value;
+        },
+      };
+    }
+  };
+}
+
+/**
+ * Default English translations for detail view components.
+ * Used as fallback when no I18nProvider is available.
+ */
+export const DETAIL_DEFAULT_TRANSLATIONS: Record<string, string> = {
+  'detail.back': 'Back',
+  'detail.edit': 'Edit',
+  'detail.editInline': 'Edit inline',
+  'detail.save': 'Save',
+  'detail.saveChanges': 'Save changes',
+  'detail.editFieldsInline': 'Edit fields inline',
+  'detail.share': 'Share',
+  'detail.duplicate': 'Duplicate',
+  'detail.export': 'Export',
+  'detail.viewHistory': 'View history',
+  'detail.delete': 'Delete',
+  'detail.moreActions': 'More actions',
+  'detail.addToFavorites': 'Add to favorites',
+  'detail.removeFromFavorites': 'Remove from favorites',
+  'detail.previousRecord': 'Previous record',
+  'detail.nextRecord': 'Next record',
+  'detail.recordOf': '{{current}} of {{total}}',
+  'detail.recordNotFound': 'Record not found',
+  'detail.recordNotFoundDescription': 'The record you are looking for does not exist or may have been deleted.',
+  'detail.goBack': 'Go back',
+  'detail.details': 'Details',
+  'detail.related': 'Related',
+  'detail.relatedRecords': '{{count}} records',
+  'detail.relatedRecordOne': '{{count}} record',
+  'detail.noRelatedRecords': 'No related records found',
+  'detail.loading': 'Loading...',
+  'detail.copyToClipboard': 'Copy to clipboard',
+  'detail.copied': 'Copied!',
+  'detail.deleteConfirmation': 'Are you sure you want to delete this record?',
+  'detail.editRecord': 'Edit record',
+  'detail.viewAll': 'View All',
+  'detail.new': 'New',
+  'detail.emptyValue': '—',
+};
+
+/**
+ * Translation hook for detail view components.
+ * Falls back to DETAIL_DEFAULT_TRANSLATIONS when no I18nProvider is available.
+ */
+export const useDetailTranslation = createSafeTranslationHook(
+  DETAIL_DEFAULT_TRANSLATIONS,
+  'detail.back',
+);