@object-ui/plugin-timeline 0.5.0 → 3.0.0

package/src/ObjectTimeline.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Plugins/ObjectTimeline',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'timeline',
+    variant: 'vertical',
+    dateFormat: 'short',
+    items: [
+      {
+        time: '2024-01-10',
+        title: 'Project Kickoff',
+        description: 'Initial planning and team formation',
+        variant: 'success',
+        icon: '🚀',
+      },
+      {
+        time: '2024-02-15',
+        title: 'Alpha Release',
+        description: 'Internal alpha build delivered',
+        variant: 'info',
+        icon: '📦',
+      },
+      {
+        time: '2024-03-20',
+        title: 'Beta Launch',
+        description: 'Public beta opened to early adopters',
+        variant: 'warning',
+        icon: '⚡',
+      },
+      {
+        time: '2024-05-01',
+        title: 'General Availability',
+        description: 'Official public release',
+        variant: 'success',
+        icon: '🎉',
+      },
+    ],
+  } as any,
+};
+
+export const Horizontal: Story = {
+  render: renderStory,
+  args: {
+    type: 'timeline',
+    variant: 'horizontal',
+    dateFormat: 'short',
+    items: [
+      { time: '2024-01-01', title: 'Q1', description: 'Foundation phase', variant: 'default' },
+      { time: '2024-04-01', title: 'Q2', description: 'Growth phase', variant: 'info' },
+      { time: '2024-07-01', title: 'Q3', description: 'Scale phase', variant: 'warning' },
+      { time: '2024-10-01', title: 'Q4', description: 'Optimization phase', variant: 'success' },
+    ],
+  } as any,
+};
+
+export const ActivityFeed: Story = {
+  render: renderStory,
+  args: {
+    type: 'timeline',
+    variant: 'vertical',
+    dateFormat: 'long',
+    items: [
+      {
+        time: '2024-03-15T14:30:00',
+        title: 'Deal Updated',
+        description: 'Stage changed from Proposal to Negotiation',
+        variant: 'info',
+        icon: '📝',
+      },
+      {
+        time: '2024-03-14T10:00:00',
+        title: 'Meeting Logged',
+        description: 'Product demo with stakeholders',
+        variant: 'default',
+        icon: '📅',
+      },
+      {
+        time: '2024-03-12T16:45:00',
+        title: 'Email Sent',
+        description: 'Follow-up proposal sent to client',
+        variant: 'default',
+        icon: '📧',
+      },
+      {
+        time: '2024-03-10T09:00:00',
+        title: 'Deal Created',
+        description: 'New opportunity worth $150,000',
+        variant: 'success',
+        icon: '✨',
+      },
+    ],
+  } as any,
+};

package/src/ObjectTimeline.test.tsx

@@ -4,9 +4,22 @@ import { describe, it, expect, vi } from 'vitest';
 import { ObjectTimeline } from './ObjectTimeline';
 import { DataSource } from '@object-ui/types';
 
-// Mock useDataScope
+// Mock useDataScope and useNavigationOverlay
 vi.mock('@object-ui/react', () => ({
   useDataScope: () => undefined,
+  useNavigationOverlay: () => ({
+    isOverlay: false,
+    handleClick: vi.fn(),
+    selectedRecord: null,
+    isOpen: false,
+    close: vi.fn(),
+    setIsOpen: vi.fn(),
+    mode: 'overlay',
+  }),
+}));
+
+vi.mock('@object-ui/components', () => ({
+  NavigationOverlay: () => null,
 }));
 
 vi.mock('./renderer', () => ({
@@ -47,7 +60,7 @@ describe('ObjectTimeline', () => {
     });
 
     it('fetches data when objectName is provided', async () => {
-        (mockDataSource.find as any).mockResolvedValue({ value: mockData });
+        (mockDataSource.find as any).mockResolvedValue(mockData);
         
         const schema: any = {
             type: 'timeline',

package/src/ObjectTimeline.tsx

@@ -6,9 +6,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import type { DataSource, TimelineSchema } from '@object-ui/types';
-import { useDataScope } from '@object-ui/react';
+import { useDataScope, useNavigationOverlay } from '@object-ui/react';
+import { NavigationOverlay } from '@object-ui/components';
+import { usePullToRefresh } from '@object-ui/mobile';
 import { z } from 'zod';
 import { TimelineRenderer } from './renderer';
 
@@ -43,17 +45,22 @@ export interface ObjectTimelineProps {
   };
   dataSource?: DataSource;
   className?: string;
+  onRowClick?: (record: any) => void;
+  onItemClick?: (record: any) => void;
 }
 
 export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
   schema,
   dataSource,
   className,
+  onRowClick,
+  onItemClick,
   ...props
 }) => {
   const [fetchedData, setFetchedData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
+  const [refreshKey, setRefreshKey] = useState(0);
 
   useEffect(() => {
     const result = TimelineExtensionSchema.safeParse(schema);
@@ -73,8 +80,8 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
                 options: { $top: 100 }
             });
             let data = results;
-            if ((results as any).value) {
-                data = (results as any).value;
+            if ((results as any).records) {
+                data = (results as any).records;
             } else if ((results as any).data) {
                 data = (results as any).data;
             }
@@ -93,7 +100,7 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
     if (schema.objectName && !boundData && !schema.items && !(props as any).data) {
         fetchData();
     }
-  }, [schema.objectName, dataSource, boundData, schema.items, (props as any).data]);
+  }, [schema.objectName, dataSource, boundData, schema.items, (props as any).data, refreshKey]);
 
   const rawData = (props as any).data || boundData || fetchedData;
 
@@ -119,10 +126,30 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
       }));
   }
 
+  const handleRefresh = useCallback(async () => {
+    setRefreshKey(k => k + 1);
+  }, []);
+
+  const { ref: pullRef, isRefreshing, pullDistance } = usePullToRefresh<HTMLDivElement>({
+    onRefresh: handleRefresh,
+    enabled: !!schema.objectName && !!dataSource,
+  });
+
+  const navigation = useNavigationOverlay({
+    navigation: (schema as any).navigation,
+    objectName: schema.objectName,
+    onRowClick: onRowClick ?? onItemClick,
+  });
+
   const effectiveSchema = {
       ...schema,
       items: effectiveItems || [],
-      className: className || schema.className
+      className: className || schema.className,
+      onItemClick: (item: any) => {
+        const record = item._data || item;
+        navigation.handleClick(record);
+        onItemClick?.(record);
+      },
   };
 
   if (error) {
@@ -133,5 +160,33 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
       );
   }
 
-  return <TimelineRenderer schema={effectiveSchema} />;
+  return (
+    <div ref={pullRef} className="relative overflow-auto h-full">
+      {pullDistance > 0 && (
+        <div
+          className="flex items-center justify-center text-xs text-muted-foreground"
+          style={{ height: pullDistance }}
+        >
+          {isRefreshing ? 'Refreshing…' : 'Pull to refresh'}
+        </div>
+      )}
+      <TimelineRenderer schema={effectiveSchema} />
+      {navigation.isOverlay && (
+        <NavigationOverlay {...navigation} title="Timeline Item">
+          {(record) => (
+            <div className="space-y-3">
+              {Object.entries(record).map(([key, value]) => (
+                <div key={key} className="flex flex-col">
+                  <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                    {key.replace(/_/g, ' ')}
+                  </span>
+                  <span className="text-sm">{String(value ?? '—')}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </NavigationOverlay>
+      )}
+    </div>
+  );
 }

package/src/__tests__/renderer.test.tsx

@@ -0,0 +1,295 @@
+/**
+ * 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 React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ComponentRegistry } from '@object-ui/core';
+
+// Import renderer to trigger registration
+import '../renderer';
+
+// Mock renderChildren used by the renderer, preserving cn and other exports
+vi.mock('@object-ui/components', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@object-ui/components')>();
+  return {
+    ...actual,
+    renderChildren: vi.fn(() => null),
+  };
+});
+
+describe('Timeline Renderer (ComponentRegistry)', () => {
+  let TimelineComponent: any;
+
+  beforeEach(() => {
+    TimelineComponent = ComponentRegistry.get('timeline');
+  });
+
+  it('is registered in ComponentRegistry as "timeline"', () => {
+    expect(TimelineComponent).toBeDefined();
+  });
+
+  // --- Vertical variant ---
+
+  it('renders in vertical variant by default', () => {
+    const schema: any = {
+      type: 'timeline',
+      items: [
+        { time: '2024-01-15', title: 'First Event', description: 'Description one' },
+      ],
+    };
+
+    const { container } = render(<TimelineComponent schema={schema} />);
+    // Vertical uses an <ol> element
+    expect(container.querySelector('ol')).toBeInTheDocument();
+    expect(screen.getByText('First Event')).toBeInTheDocument();
+    expect(screen.getByText('Description one')).toBeInTheDocument();
+  });
+
+  it('renders items with titles and descriptions in vertical variant', () => {
+    const schema: any = {
+      type: 'timeline',
+      variant: 'vertical',
+      items: [
+        { time: '2024-01-15', title: 'Alpha Release', description: 'Initial alpha' },
+        { time: '2024-02-01', title: 'Beta Release', description: 'Public beta' },
+        { time: '2024-03-10', title: 'GA Launch', description: 'General availability' },
+      ],
+    };
+
+    render(<TimelineComponent schema={schema} />);
+    expect(screen.getByText('Alpha Release')).toBeInTheDocument();
+    expect(screen.getByText('Initial alpha')).toBeInTheDocument();
+    expect(screen.getByText('Beta Release')).toBeInTheDocument();
+    expect(screen.getByText('Public beta')).toBeInTheDocument();
+    expect(screen.getByText('GA Launch')).toBeInTheDocument();
+    expect(screen.getByText('General availability')).toBeInTheDocument();
+  });
+
+  it('handles empty items array in vertical variant', () => {
+    const schema: any = {
+      type: 'timeline',
+      variant: 'vertical',
+      items: [],
+    };
+
+    const { container } = render(<TimelineComponent schema={schema} />);
+    // Should render the <ol> wrapper but no <li> items
+    expect(container.querySelector('ol')).toBeInTheDocument();
+    expect(container.querySelectorAll('li')).toHaveLength(0);
+  });
+
+  it('formats dates correctly with short format', () => {
+    const schema: any = {
+      type: 'timeline',
+      variant: 'vertical',
+      dateFormat: 'short',
+      items: [
+        { time: '2024-06-15', title: 'Event' },
+      ],
+    };
+
+    render(<TimelineComponent schema={schema} />);
+    // short format uses toLocaleDateString()
+    const expected = new Date('2024-06-15').toLocaleDateString();
+    expect(screen.getByText(expected)).toBeInTheDocument();
+  });
+
+  it('formats dates correctly with long format', () => {
+    const schema: any = {
+      type: 'timeline',
+      variant: 'vertical',
+      dateFormat: 'long',
+      items: [
+        { time: '2024-06-15', title: 'Event' },
+      ],
+    };
+
+    render(<TimelineComponent schema={schema} />);
+    const expected = new Date('2024-06-15').toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+    expect(screen.getByText(expected)).toBeInTheDocument();
+  });
+
+  it('formats dates correctly with iso (default) format', () => {
+    const schema: any = {
+      type: 'timeline',
+      variant: 'vertical',
+      dateFormat: 'iso',
+      items: [
+        { time: '2024-06-15', title: 'Event' },
+      ],
+    };
+
+    render(<TimelineComponent schema={schema} />);
+    expect(screen.getByText('2024-06-15')).toBeInTheDocument();
+  });
+
+  // --- Horizontal variant ---
+
+  it('renders in horizontal variant', () => {
+    const schema: any = {
+      type: 'timeline',
+      variant: 'horizontal',
+      items: [
+        { time: '2024-01-01', title: 'Q1', description: 'First quarter' },
+        { time: '2024-04-01', title: 'Q2', description: 'Second quarter' },
+      ],
+    };
+
+    render(<TimelineComponent schema={schema} />);
+    expect(screen.getByText('Q1')).toBeInTheDocument();
+    expect(screen.getByText('First quarter')).toBeInTheDocument();
+    expect(screen.getByText('Q2')).toBeInTheDocument();
+    expect(screen.getByText('Second quarter')).toBeInTheDocument();
+  });
+
+  it('handles empty items array in horizontal variant', () => {
+    const schema: any = {
+      type: 'timeline',
+      variant: 'horizontal',
+      items: [],
+    };
+
+    const { container } = render(<TimelineComponent schema={schema} />);
+    // Horizontal wraps in a div, should have no child items
+    expect(container.firstChild).toBeInTheDocument();
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+
+  // --- Gantt variant ---
+
+  it('renders in gantt variant', () => {
+    const schema: any = {
+      type: 'timeline',
+      variant: 'gantt',
+      timeScale: 'month',
+      items: [
+        {
+          label: 'Backend',
+          items: [
+            { title: 'API Design', startDate: '2024-01-01', endDate: '2024-02-01' },
+          ],
+        },
+        {
+          label: 'Frontend',
+          items: [
+            { title: 'UI Build', startDate: '2024-02-01', endDate: '2024-03-01' },
+          ],
+        },
+      ],
+    };
+
+    render(<TimelineComponent schema={schema} />);
+    expect(screen.getByText('Backend')).toBeInTheDocument();
+    expect(screen.getByText('Frontend')).toBeInTheDocument();
+    expect(screen.getByText('API Design')).toBeInTheDocument();
+    expect(screen.getByText('UI Build')).toBeInTheDocument();
+  });
+
+  it('handles rows with no sub-items in gantt variant', () => {
+    const schema: any = {
+      type: 'timeline',
+      variant: 'gantt',
+      minDate: '2024-01-01',
+      maxDate: '2024-03-01',
+      items: [
+        { label: 'Empty Row', items: [] },
+        {
+          label: 'Has Items',
+          items: [
+            { title: 'Task', startDate: '2024-01-15', endDate: '2024-02-15' },
+          ],
+        },
+      ],
+    };
+
+    render(<TimelineComponent schema={schema} />);
+    expect(screen.getByText('Empty Row')).toBeInTheDocument();
+    expect(screen.getByText('Has Items')).toBeInTheDocument();
+  });
+
+  it('gantt variant calculates date ranges from items', () => {
+    const schema: any = {
+      type: 'timeline',
+      variant: 'gantt',
+      timeScale: 'month',
+      items: [
+        {
+          label: 'Project A',
+          items: [
+            { title: 'Task 1', startDate: '2024-01-01', endDate: '2024-01-31' },
+            { title: 'Task 2', startDate: '2024-02-01', endDate: '2024-03-31' },
+          ],
+        },
+      ],
+    };
+
+    render(<TimelineComponent schema={schema} />);
+    // Gantt header should contain month labels spanning the range
+    expect(screen.getByText('Project A')).toBeInTheDocument();
+    expect(screen.getByText('Task 1')).toBeInTheDocument();
+    expect(screen.getByText('Task 2')).toBeInTheDocument();
+  });
+
+  it('gantt variant uses custom rowLabel', () => {
+    const schema: any = {
+      type: 'timeline',
+      variant: 'gantt',
+      rowLabel: 'Projects',
+      minDate: '2024-01-01',
+      maxDate: '2024-03-01',
+      items: [
+        {
+          label: 'My Project',
+          items: [
+            { title: 'Work', startDate: '2024-01-15', endDate: '2024-02-15' },
+          ],
+        },
+      ],
+    };
+
+    render(<TimelineComponent schema={schema} />);
+    expect(screen.getByText('Projects')).toBeInTheDocument();
+  });
+
+  it('gantt variant defaults rowLabel to "Items"', () => {
+    const schema: any = {
+      type: 'timeline',
+      variant: 'gantt',
+      minDate: '2024-01-01',
+      maxDate: '2024-03-01',
+      items: [
+        {
+          label: 'Row',
+          items: [
+            { title: 'Bar', startDate: '2024-01-10', endDate: '2024-02-10' },
+          ],
+        },
+      ],
+    };
+
+    render(<TimelineComponent schema={schema} />);
+    expect(screen.getByText('Items')).toBeInTheDocument();
+  });
+
+  it('returns null for unknown variant', () => {
+    const schema: any = {
+      type: 'timeline',
+      variant: 'unknown',
+      items: [],
+    };
+
+    const { container } = render(<TimelineComponent schema={schema} />);
+    expect(container.innerHTML).toBe('');
+  });
+});

package/src/index.tsx

@@ -293,7 +293,17 @@ export const ObjectTimelineRenderer: React.FC<any> = ({ schema, ...props }) => {
 ComponentRegistry.register('object-timeline', ObjectTimelineRenderer, {
   namespace: 'plugin-timeline',
   label: 'Object Timeline',
-  category: 'plugin',
+  category: 'view',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'variant', type: 'enum', enum: ['vertical', 'horizontal', 'gantt'], defaultValue: 'vertical' },
+  ]
+});
+
+ComponentRegistry.register('timeline', ObjectTimelineRenderer, {
+  namespace: 'view',
+  label: 'Timeline View',
+  category: 'view',
   inputs: [
     { name: 'objectName', type: 'string', label: 'Object Name', required: true },
     { name: 'variant', type: 'enum', enum: ['vertical', 'horizontal', 'gantt'], defaultValue: 'vertical' },

package/src/renderer.tsx

@@ -27,7 +27,7 @@ import {
   TimelineGanttBar,
   TimelineGanttBarContent,
 } from './index';
-import { renderChildren } from '@object-ui/components';
+import { renderChildren, cn } from '@object-ui/components';
 
 // Constants
 const MILLISECONDS_PER_WEEK = 7 * 24 * 60 * 60 * 1000;
@@ -98,7 +98,7 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
       return (
         <Timeline className={className} {...props}>
           {items.map((item: any, index: number) => (
-            <TimelineItem key={index} className={item.className}>
+            <TimelineItem key={index} className={cn(item.className, onItemClick && 'cursor-pointer')} onClick={() => onItemClick?.(item)}>
               <TimelineMarker variant={item.variant || 'default'}>
                 {item.icon && <span className="text-xs">{item.icon}</span>}
               </TimelineMarker>
@@ -110,7 +110,7 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
                 )}
                 {item.title && <TimelineTitle>{item.title}</TimelineTitle>}
                 {item.description && (
-                  <TimelineDescription>{item.description}</TimelineDescription>
+                  <TimelineDescription className="line-clamp-2 sm:line-clamp-none">{item.description}</TimelineDescription>
                 )}
                 {item.content && renderChildren(item.content)}
               </TimelineContent>
@@ -123,9 +123,9 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
     // Horizontal Timeline
     if (variant === 'horizontal') {
       return (
-        <TimelineHorizontal className={className} {...props}>
+        <TimelineHorizontal className={cn("overflow-x-auto [-webkit-overflow-scrolling:touch]", className)} {...props}>
           {items.map((item: any, index: number) => (
-            <TimelineHorizontalItem key={index} className={item.className}>
+            <TimelineHorizontalItem key={index} className={cn(item.className, onItemClick && 'cursor-pointer')} onClick={() => onItemClick?.(item)}>
               <div className="flex flex-col items-center">
                 <TimelineMarker variant={item.variant || 'default'}>
                   {item.icon && <span className="text-xs">{item.icon}</span>}
@@ -138,7 +138,7 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
                   )}
                   {item.title && <TimelineTitle>{item.title}</TimelineTitle>}
                   {item.description && (
-                    <TimelineDescription className="text-center">
+                    <TimelineDescription className="text-center line-clamp-2 sm:line-clamp-none">
                       {item.description}
                     </TimelineDescription>
                   )}
@@ -208,11 +208,11 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
       const timeHeaders = generateTimeHeaders();
 
       return (
-        <TimelineGantt className={className} {...props}>
+        <TimelineGantt className={cn("overflow-x-auto [-webkit-overflow-scrolling:touch]", className)} {...props}>
           {/* Header */}
           <TimelineGanttHeader>
-            <TimelineGanttRowLabels className="flex items-center px-4 py-3">
-              <span className="font-semibold text-sm">
+            <TimelineGanttRowLabels className="flex items-center px-2 sm:px-4 py-2 sm:py-3">
+              <span className="font-semibold text-xs sm:text-sm">
                 {schema.rowLabel || 'Items'}
               </span>
             </TimelineGanttRowLabels>
@@ -221,7 +221,7 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
                 {timeHeaders.map((header, index) => (
                   <div
                     key={index}
-                    className="flex-1 px-2 py-3 border-r text-xs font-medium text-center"
+                    className="flex-1 px-1 sm:px-2 py-2 sm:py-3 border-r text-xs font-medium text-center"
                   >
                     {header}
                   </div>
@@ -236,7 +236,7 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
               <TimelineGanttRowLabels>
                 {items.map((row: any, rowIndex: number) => (
                   <TimelineGanttRow key={rowIndex}>
-                    <TimelineGanttLabel title={row.label}>
+                    <TimelineGanttLabel title={row.label} className="truncate">
                       {row.label}
                     </TimelineGanttLabel>
                   </TimelineGanttRow>

package/vite.config.ts

@@ -29,6 +29,7 @@ export default defineConfig({
       '@object-ui/react': resolve(__dirname, '../react/src'),
       '@object-ui/components': resolve(__dirname, '../components/src'),
       '@object-ui/fields': resolve(__dirname, '../fields/src'),
+      '@object-ui/mobile': resolve(__dirname, '../mobile/src'),
       '@object-ui/plugin-dashboard': resolve(__dirname, '../plugin-dashboard/src'),
       '@object-ui/plugin-grid': resolve(__dirname, '../plugin-grid/src'),
     },
@@ -40,7 +41,7 @@ export default defineConfig({
       fileName: 'index',
     },
     rollupOptions: {
-      external: ['react', 'react-dom', '@object-ui/components', '@object-ui/core', '@object-ui/react'],
+      external: ['react', 'react-dom', '@object-ui/components', '@object-ui/core', '@object-ui/react', '@object-ui/mobile'],
       output: {
         globals: {
           react: 'React',
@@ -48,6 +49,7 @@ export default defineConfig({
           '@object-ui/components': 'ObjectUIComponents',
           '@object-ui/core': 'ObjectUICore',
           '@object-ui/react': 'ObjectUIReact',
+          '@object-ui/mobile': 'ObjectUIMobile',
         },
       },
     },