@object-ui/react 3.3.0 → 3.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/README.md +21 -1
- package/dist/SchemaRenderer.js +19 -2
- package/dist/context/AppShellContext.d.ts +26 -0
- package/dist/context/AppShellContext.js +67 -0
- package/dist/context/index.d.ts +1 -7
- package/dist/context/index.js +1 -7
- package/package.json +32 -9
- package/.turbo/turbo-build.log +0 -4
- package/src/LazyPluginLoader.tsx +0 -174
- package/src/SchemaRenderer.tsx +0 -266
- package/src/__tests__/LazyPluginLoader.test.tsx +0 -176
- package/src/__tests__/SchemaRenderer.aria.test.tsx +0 -118
- package/src/__tests__/SchemaRenderer.debug.test.tsx +0 -69
- package/src/__tests__/SchemaRenderer.errorBoundary.test.tsx +0 -114
- package/src/__tests__/SchemaRenderer.expressions.test.tsx +0 -131
- package/src/__tests__/SchemaRendererProvider.smoke.test.tsx +0 -132
- package/src/__tests__/ThemeProvider.test.tsx +0 -451
- package/src/__tests__/useNavigationOverlay.test.ts +0 -578
- package/src/__tests__/useOffline.test.ts +0 -198
- package/src/__tests__/usePageTransition.test.ts +0 -214
- package/src/__tests__/usePageVariables.test.tsx +0 -334
- package/src/__tests__/usePerformance.test.ts +0 -137
- package/src/__tests__/useViewData.test.tsx +0 -422
- package/src/__tests__/view-switching.test.tsx +0 -456
- package/src/components/form/FieldFactory.tsx +0 -516
- package/src/components/form/FormRenderer.test.tsx +0 -744
- package/src/components/form/FormRenderer.tsx +0 -258
- package/src/components/form/README.md +0 -352
- package/src/components/form/index.ts +0 -12
- package/src/context/ActionContext.tsx +0 -213
- package/src/context/DndContext.tsx +0 -260
- package/src/context/NotificationContext.tsx +0 -280
- package/src/context/SchemaRendererContext.tsx +0 -48
- package/src/context/ThemeContext.tsx +0 -325
- package/src/context/__tests__/ActionContext.test.tsx +0 -174
- package/src/context/__tests__/DndContext.test.tsx +0 -150
- package/src/context/__tests__/NotificationContext.test.tsx +0 -176
- package/src/context/__tests__/useDataScope.test.tsx +0 -91
- package/src/context/index.ts +0 -13
- package/src/hooks/__tests__/useActionEngine.test.ts +0 -170
- package/src/hooks/__tests__/useActionRunner.test.ts +0 -153
- package/src/hooks/__tests__/useAnimation.test.ts +0 -82
- package/src/hooks/__tests__/useColumnSummary.test.ts +0 -93
- package/src/hooks/__tests__/useCrudShortcuts.test.ts +0 -85
- package/src/hooks/__tests__/useDataRefresh.test.ts +0 -115
- package/src/hooks/__tests__/useDebugMode.test.ts +0 -83
- package/src/hooks/__tests__/useDensityMode.test.ts +0 -81
- package/src/hooks/__tests__/useDiscovery.test.tsx +0 -247
- package/src/hooks/__tests__/useDynamicApp.test.ts +0 -161
- package/src/hooks/__tests__/useETagCache.test.ts +0 -153
- package/src/hooks/__tests__/useExpression.test.ts +0 -86
- package/src/hooks/__tests__/useFocusTrap.test.ts +0 -294
- package/src/hooks/__tests__/useKeyboardShortcuts.test.ts +0 -144
- package/src/hooks/__tests__/usePageTransition.test.ts +0 -158
- package/src/hooks/__tests__/usePerformanceBudget.test.ts +0 -157
- package/src/hooks/__tests__/useReducedMotion.test.ts +0 -104
- package/src/hooks/__tests__/useSchemaPersistence.test.ts +0 -220
- package/src/hooks/__tests__/useViewSharing.test.ts +0 -121
- package/src/hooks/__tests__/useViewTransition.test.ts +0 -61
- package/src/hooks/index.ts +0 -36
- package/src/hooks/useActionEngine.ts +0 -84
- package/src/hooks/useActionRunner.ts +0 -119
- package/src/hooks/useAnimation.ts +0 -117
- package/src/hooks/useClientNotifications.ts +0 -251
- package/src/hooks/useColumnSummary.ts +0 -87
- package/src/hooks/useCrudShortcuts.ts +0 -126
- package/src/hooks/useDataRefresh.ts +0 -58
- package/src/hooks/useDebugMode.ts +0 -95
- package/src/hooks/useDensityMode.ts +0 -102
- package/src/hooks/useDiscovery.ts +0 -168
- package/src/hooks/useDynamicApp.ts +0 -142
- package/src/hooks/useETagCache.ts +0 -404
- package/src/hooks/useExpression.ts +0 -56
- package/src/hooks/useFocusManagement.ts +0 -248
- package/src/hooks/useFocusTrap.ts +0 -138
- package/src/hooks/useGlobalUndo.ts +0 -98
- package/src/hooks/useKeyboardShortcuts.ts +0 -119
- package/src/hooks/useNavigationOverlay.ts +0 -190
- package/src/hooks/useOffline.ts +0 -301
- package/src/hooks/usePageTransition.ts +0 -187
- package/src/hooks/usePageVariables.tsx +0 -157
- package/src/hooks/usePerformance.ts +0 -246
- package/src/hooks/usePerformanceBudget.ts +0 -313
- package/src/hooks/useReducedMotion.ts +0 -53
- package/src/hooks/useSchemaPersistence.ts +0 -222
- package/src/hooks/useViewData.ts +0 -201
- package/src/hooks/useViewSharing.ts +0 -140
- package/src/hooks/useViewTransition.ts +0 -144
- package/src/index.ts +0 -41
- package/src/spec-bridge/SpecBridge.ts +0 -64
- package/src/spec-bridge/__tests__/P1SpecBridge.test.ts +0 -855
- package/src/spec-bridge/__tests__/SpecBridge.test.ts +0 -550
- package/src/spec-bridge/bridges/dashboard.ts +0 -180
- package/src/spec-bridge/bridges/form-view.ts +0 -109
- package/src/spec-bridge/bridges/list-view.ts +0 -187
- package/src/spec-bridge/bridges/page.ts +0 -136
- package/src/spec-bridge/index.ts +0 -14
- package/src/spec-bridge/types.ts +0 -38
- package/src/utils/i18n.ts +0 -10
- package/tsconfig.json +0 -17
- package/tsconfig.tsbuildinfo +0 -1
- package/vitest.config.ts +0 -2
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Tests for useViewSharing hook
|
|
3
|
-
*/
|
|
4
|
-
import { describe, it, expect } from 'vitest';
|
|
5
|
-
import { renderHook, act } from '@testing-library/react';
|
|
6
|
-
import { useViewSharing } from '../useViewSharing';
|
|
7
|
-
import type { SavedView } from '../useViewSharing';
|
|
8
|
-
|
|
9
|
-
const createView = (overrides?: Partial<SavedView>): SavedView => ({
|
|
10
|
-
id: 'test-1',
|
|
11
|
-
name: 'Test View',
|
|
12
|
-
config: { filters: [] },
|
|
13
|
-
visibility: 'private',
|
|
14
|
-
updatedAt: new Date(),
|
|
15
|
-
...overrides,
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
describe('useViewSharing', () => {
|
|
19
|
-
it('starts with empty views by default', () => {
|
|
20
|
-
const { result } = renderHook(() => useViewSharing());
|
|
21
|
-
expect(result.current.views).toEqual([]);
|
|
22
|
-
expect(result.current.activeView).toBeNull();
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
it('starts with provided initial views', () => {
|
|
26
|
-
const initial = [createView()];
|
|
27
|
-
const { result } = renderHook(() => useViewSharing(initial));
|
|
28
|
-
expect(result.current.views).toHaveLength(1);
|
|
29
|
-
expect(result.current.activeView?.id).toBe('test-1');
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
it('saves a new view', () => {
|
|
33
|
-
const { result } = renderHook(() => useViewSharing());
|
|
34
|
-
|
|
35
|
-
act(() => {
|
|
36
|
-
result.current.saveView({
|
|
37
|
-
name: 'My View',
|
|
38
|
-
config: { sort: 'name' },
|
|
39
|
-
visibility: 'private',
|
|
40
|
-
});
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
expect(result.current.views).toHaveLength(1);
|
|
44
|
-
expect(result.current.views[0].name).toBe('My View');
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
it('returns ID when saving a view', () => {
|
|
48
|
-
const { result } = renderHook(() => useViewSharing());
|
|
49
|
-
|
|
50
|
-
let id: string = '';
|
|
51
|
-
act(() => {
|
|
52
|
-
id = result.current.saveView({
|
|
53
|
-
name: 'My View',
|
|
54
|
-
config: {},
|
|
55
|
-
visibility: 'private',
|
|
56
|
-
});
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
expect(id).toBeTruthy();
|
|
60
|
-
expect(id).toContain('view-');
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
it('deletes a view', () => {
|
|
64
|
-
const initial = [createView()];
|
|
65
|
-
const { result } = renderHook(() => useViewSharing(initial));
|
|
66
|
-
|
|
67
|
-
act(() => {
|
|
68
|
-
result.current.deleteView('test-1');
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
expect(result.current.views).toHaveLength(0);
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
it('sets active view', () => {
|
|
75
|
-
const initial = [
|
|
76
|
-
createView({ id: 'v1', name: 'View 1' }),
|
|
77
|
-
createView({ id: 'v2', name: 'View 2' }),
|
|
78
|
-
];
|
|
79
|
-
const { result } = renderHook(() => useViewSharing(initial));
|
|
80
|
-
|
|
81
|
-
act(() => {
|
|
82
|
-
result.current.setActiveView('v2');
|
|
83
|
-
});
|
|
84
|
-
|
|
85
|
-
expect(result.current.activeView?.id).toBe('v2');
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
it('duplicates a view', () => {
|
|
89
|
-
const initial = [createView()];
|
|
90
|
-
const { result } = renderHook(() => useViewSharing(initial));
|
|
91
|
-
|
|
92
|
-
act(() => {
|
|
93
|
-
result.current.duplicateView('test-1', 'Copy of Test');
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
expect(result.current.views).toHaveLength(2);
|
|
97
|
-
expect(result.current.views[1].name).toBe('Copy of Test');
|
|
98
|
-
expect(result.current.views[1].isDefault).toBe(false);
|
|
99
|
-
});
|
|
100
|
-
|
|
101
|
-
it('updates view visibility', () => {
|
|
102
|
-
const initial = [createView()];
|
|
103
|
-
const { result } = renderHook(() => useViewSharing(initial));
|
|
104
|
-
|
|
105
|
-
act(() => {
|
|
106
|
-
result.current.setVisibility('test-1', 'organization');
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
expect(result.current.views[0].visibility).toBe('organization');
|
|
110
|
-
});
|
|
111
|
-
|
|
112
|
-
it('selects default view as active', () => {
|
|
113
|
-
const initial = [
|
|
114
|
-
createView({ id: 'v1', name: 'View 1' }),
|
|
115
|
-
createView({ id: 'v2', name: 'View 2', isDefault: true }),
|
|
116
|
-
];
|
|
117
|
-
const { result } = renderHook(() => useViewSharing(initial));
|
|
118
|
-
|
|
119
|
-
expect(result.current.activeView?.id).toBe('v2');
|
|
120
|
-
});
|
|
121
|
-
});
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Tests for useViewTransition hook
|
|
3
|
-
*/
|
|
4
|
-
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
|
5
|
-
import { renderHook, act } from '@testing-library/react';
|
|
6
|
-
import { useViewTransition } from '../useViewTransition';
|
|
7
|
-
|
|
8
|
-
describe('useViewTransition', () => {
|
|
9
|
-
beforeEach(() => {
|
|
10
|
-
vi.restoreAllMocks();
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
afterEach(() => {
|
|
14
|
-
vi.restoreAllMocks();
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
it('returns isSupported as false when document.startViewTransition is not available', () => {
|
|
18
|
-
const { result } = renderHook(() => useViewTransition());
|
|
19
|
-
|
|
20
|
-
// happy-dom does not implement startViewTransition
|
|
21
|
-
expect(result.current.isSupported).toBe(false);
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
it('returns isTransitioning as false initially', () => {
|
|
25
|
-
const { result } = renderHook(() => useViewTransition());
|
|
26
|
-
|
|
27
|
-
expect(result.current.isTransitioning).toBe(false);
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
it('startTransition calls callback without transition API (fallback behavior)', async () => {
|
|
31
|
-
const { result } = renderHook(() => useViewTransition());
|
|
32
|
-
|
|
33
|
-
const callback = vi.fn();
|
|
34
|
-
|
|
35
|
-
await act(async () => {
|
|
36
|
-
await result.current.startTransition(callback);
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
expect(callback).toHaveBeenCalledTimes(1);
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
it('respects enabled: false by calling callback directly', async () => {
|
|
43
|
-
const { result } = renderHook(() =>
|
|
44
|
-
useViewTransition({ enabled: false }),
|
|
45
|
-
);
|
|
46
|
-
|
|
47
|
-
const callback = vi.fn();
|
|
48
|
-
|
|
49
|
-
await act(async () => {
|
|
50
|
-
await result.current.startTransition(callback);
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
expect(callback).toHaveBeenCalledTimes(1);
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
it('transitionClass is empty initially', () => {
|
|
57
|
-
const { result } = renderHook(() => useViewTransition());
|
|
58
|
-
|
|
59
|
-
expect(result.current.transitionClass).toBe('');
|
|
60
|
-
});
|
|
61
|
-
});
|
package/src/hooks/index.ts
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ObjectUI
|
|
3
|
-
* Copyright (c) 2024-present ObjectStack Inc.
|
|
4
|
-
*
|
|
5
|
-
* This source code is licensed under the MIT license found in the
|
|
6
|
-
* LICENSE file in the root directory of this source tree.
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
export * from './useExpression';
|
|
10
|
-
export * from './useActionRunner';
|
|
11
|
-
export * from './useNavigationOverlay';
|
|
12
|
-
export * from './usePageVariables';
|
|
13
|
-
export * from './useViewData';
|
|
14
|
-
export * from './useDynamicApp';
|
|
15
|
-
export * from './useDiscovery';
|
|
16
|
-
export * from './useFocusTrap';
|
|
17
|
-
export * from './useFocusManagement';
|
|
18
|
-
export * from './useKeyboardShortcuts';
|
|
19
|
-
export * from './useCrudShortcuts';
|
|
20
|
-
export * from './useReducedMotion';
|
|
21
|
-
export * from './useAnimation';
|
|
22
|
-
export * from './useColumnSummary';
|
|
23
|
-
export * from './useDensityMode';
|
|
24
|
-
export * from './useViewSharing';
|
|
25
|
-
export * from './useClientNotifications';
|
|
26
|
-
export * from './useOffline';
|
|
27
|
-
export * from './usePerformance';
|
|
28
|
-
export * from './usePerformanceBudget';
|
|
29
|
-
export * from './usePageTransition';
|
|
30
|
-
export * from './useViewTransition';
|
|
31
|
-
export * from './useETagCache';
|
|
32
|
-
export * from './useSchemaPersistence';
|
|
33
|
-
export * from './useGlobalUndo';
|
|
34
|
-
export * from './useDebugMode';
|
|
35
|
-
export * from './useActionEngine';
|
|
36
|
-
export * from './useDataRefresh';
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ObjectUI
|
|
3
|
-
* Copyright (c) 2024-present ObjectStack Inc.
|
|
4
|
-
*
|
|
5
|
-
* This source code is licensed under the MIT license found in the
|
|
6
|
-
* LICENSE file in the root directory of this source tree.
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* useActionEngine — React hook wrapping ActionEngine for location-based action management.
|
|
11
|
-
*
|
|
12
|
-
* Provides declarative access to the ActionEngine's location filtering, bulk operations,
|
|
13
|
-
* keyboard shortcut handling, and execution pipeline from React components.
|
|
14
|
-
*
|
|
15
|
-
* @example
|
|
16
|
-
* ```tsx
|
|
17
|
-
* const { getActionsForLocation, executeAction } = useActionEngine({
|
|
18
|
-
* actions: schema.actions,
|
|
19
|
-
* context: { record, user },
|
|
20
|
-
* });
|
|
21
|
-
*
|
|
22
|
-
* const toolbarActions = getActionsForLocation('list_toolbar');
|
|
23
|
-
* ```
|
|
24
|
-
*/
|
|
25
|
-
|
|
26
|
-
import { useCallback, useMemo } from 'react';
|
|
27
|
-
import {
|
|
28
|
-
ActionEngine,
|
|
29
|
-
type ActionLocation,
|
|
30
|
-
type ActionDef,
|
|
31
|
-
type ActionContext,
|
|
32
|
-
type ActionResult,
|
|
33
|
-
} from '@object-ui/core';
|
|
34
|
-
|
|
35
|
-
export interface UseActionEngineOptions {
|
|
36
|
-
/** Action definitions to register */
|
|
37
|
-
actions?: ActionDef[];
|
|
38
|
-
/** Action context (record, user, etc.) */
|
|
39
|
-
context?: ActionContext;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export interface UseActionEngineReturn {
|
|
43
|
-
/** Get actions available at a specific location, sorted by priority */
|
|
44
|
-
getActionsForLocation: (location: ActionLocation) => ActionDef[];
|
|
45
|
-
/** Get actions that support bulk operations */
|
|
46
|
-
getBulkActions: () => ActionDef[];
|
|
47
|
-
/** Execute an action by name */
|
|
48
|
-
executeAction: (name: string, contextOverride?: Partial<ActionContext>) => Promise<ActionResult>;
|
|
49
|
-
/** Handle a keyboard shortcut */
|
|
50
|
-
handleShortcut: (keys: string) => Promise<ActionResult | null>;
|
|
51
|
-
/** The underlying ActionEngine instance */
|
|
52
|
-
engine: ActionEngine;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
export function useActionEngine(options: UseActionEngineOptions = {}): UseActionEngineReturn {
|
|
56
|
-
const { actions = [], context = {} } = options;
|
|
57
|
-
|
|
58
|
-
const engine = useMemo(() => {
|
|
59
|
-
const e = new ActionEngine(context);
|
|
60
|
-
e.registerActions(actions);
|
|
61
|
-
return e;
|
|
62
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
63
|
-
}, [JSON.stringify(actions), JSON.stringify(context)]);
|
|
64
|
-
|
|
65
|
-
const getActionsForLocation = useCallback(
|
|
66
|
-
(location: ActionLocation) => engine.getActionsForLocation(location),
|
|
67
|
-
[engine],
|
|
68
|
-
);
|
|
69
|
-
|
|
70
|
-
const getBulkActions = useCallback(() => engine.getBulkActions(), [engine]);
|
|
71
|
-
|
|
72
|
-
const executeAction = useCallback(
|
|
73
|
-
(name: string, contextOverride?: Partial<ActionContext>) =>
|
|
74
|
-
engine.executeAction(name, contextOverride),
|
|
75
|
-
[engine],
|
|
76
|
-
);
|
|
77
|
-
|
|
78
|
-
const handleShortcut = useCallback(
|
|
79
|
-
(keys: string) => engine.handleShortcut(keys),
|
|
80
|
-
[engine],
|
|
81
|
-
);
|
|
82
|
-
|
|
83
|
-
return { getActionsForLocation, getBulkActions, executeAction, handleShortcut, engine };
|
|
84
|
-
}
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ObjectUI
|
|
3
|
-
* Copyright (c) 2024-present ObjectStack Inc.
|
|
4
|
-
*
|
|
5
|
-
* This source code is licensed under the MIT license found in the
|
|
6
|
-
* LICENSE file in the root directory of this source tree.
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { useState, useCallback, useMemo } from 'react';
|
|
10
|
-
import {
|
|
11
|
-
ActionRunner,
|
|
12
|
-
type ActionContext,
|
|
13
|
-
type ActionDef,
|
|
14
|
-
type ActionResult,
|
|
15
|
-
type ConfirmationHandler,
|
|
16
|
-
type ToastHandler,
|
|
17
|
-
type ModalHandler,
|
|
18
|
-
type NavigationHandler,
|
|
19
|
-
} from '@object-ui/core';
|
|
20
|
-
|
|
21
|
-
export interface UseActionRunnerOptions {
|
|
22
|
-
context?: ActionContext;
|
|
23
|
-
/** Custom confirmation handler — wire to Shadcn AlertDialog or similar */
|
|
24
|
-
onConfirm?: ConfirmationHandler;
|
|
25
|
-
/** Custom toast handler — wire to Sonner or similar */
|
|
26
|
-
onToast?: ToastHandler;
|
|
27
|
-
/** Custom modal handler — render modals in response to modal actions */
|
|
28
|
-
onModal?: ModalHandler;
|
|
29
|
-
/** Custom navigation handler — SPA-aware routing */
|
|
30
|
-
onNavigate?: NavigationHandler;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* Hook for executing actions with loading state, typed with ActionDef.
|
|
35
|
-
*
|
|
36
|
-
* @example
|
|
37
|
-
* ```tsx
|
|
38
|
-
* const { execute, loading, error, result } = useActionRunner({
|
|
39
|
-
* context: { data: formData },
|
|
40
|
-
* onToast: (msg, opts) => toast[opts?.type || 'info'](msg),
|
|
41
|
-
* });
|
|
42
|
-
*
|
|
43
|
-
* const handleClick = () => {
|
|
44
|
-
* execute({
|
|
45
|
-
* type: 'api',
|
|
46
|
-
* api: '/api/save',
|
|
47
|
-
* successMessage: 'Saved successfully!',
|
|
48
|
-
* });
|
|
49
|
-
* };
|
|
50
|
-
* ```
|
|
51
|
-
*/
|
|
52
|
-
export function useActionRunner(
|
|
53
|
-
optionsOrContext: UseActionRunnerOptions | ActionContext = {},
|
|
54
|
-
) {
|
|
55
|
-
// Backwards compat: if no 'context' key, treat entire object as context
|
|
56
|
-
const options: UseActionRunnerOptions = 'context' in optionsOrContext
|
|
57
|
-
? optionsOrContext as UseActionRunnerOptions
|
|
58
|
-
: { context: optionsOrContext as ActionContext };
|
|
59
|
-
|
|
60
|
-
const { context = {}, onConfirm, onToast, onModal, onNavigate } = options;
|
|
61
|
-
|
|
62
|
-
const [loading, setLoading] = useState(false);
|
|
63
|
-
const [error, setError] = useState<string | null>(null);
|
|
64
|
-
const [result, setResult] = useState<ActionResult | null>(null);
|
|
65
|
-
|
|
66
|
-
const runner = useMemo(() => {
|
|
67
|
-
const r = new ActionRunner(context);
|
|
68
|
-
if (onConfirm) r.setConfirmHandler(onConfirm);
|
|
69
|
-
if (onToast) r.setToastHandler(onToast);
|
|
70
|
-
if (onModal) r.setModalHandler(onModal);
|
|
71
|
-
if (onNavigate) r.setNavigationHandler(onNavigate);
|
|
72
|
-
return r;
|
|
73
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
74
|
-
}, [JSON.stringify(context)]);
|
|
75
|
-
|
|
76
|
-
const execute = useCallback(
|
|
77
|
-
async (action: ActionDef): Promise<ActionResult> => {
|
|
78
|
-
setLoading(true);
|
|
79
|
-
setError(null);
|
|
80
|
-
setResult(null);
|
|
81
|
-
|
|
82
|
-
try {
|
|
83
|
-
const actionResult = await runner.execute(action);
|
|
84
|
-
setResult(actionResult);
|
|
85
|
-
|
|
86
|
-
if (!actionResult.success) {
|
|
87
|
-
setError(actionResult.error || 'Action failed');
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
return actionResult;
|
|
91
|
-
} catch (err) {
|
|
92
|
-
const errorMessage = (err as Error).message;
|
|
93
|
-
setError(errorMessage);
|
|
94
|
-
const failureResult = { success: false, error: errorMessage };
|
|
95
|
-
setResult(failureResult);
|
|
96
|
-
return failureResult;
|
|
97
|
-
} finally {
|
|
98
|
-
setLoading(false);
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
[runner]
|
|
102
|
-
);
|
|
103
|
-
|
|
104
|
-
const updateContext = useCallback(
|
|
105
|
-
(newContext: Partial<ActionContext>) => {
|
|
106
|
-
runner.updateContext(newContext);
|
|
107
|
-
},
|
|
108
|
-
[runner]
|
|
109
|
-
);
|
|
110
|
-
|
|
111
|
-
return {
|
|
112
|
-
execute,
|
|
113
|
-
loading,
|
|
114
|
-
error,
|
|
115
|
-
result,
|
|
116
|
-
updateContext,
|
|
117
|
-
runner
|
|
118
|
-
};
|
|
119
|
-
}
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ObjectUI
|
|
3
|
-
* Copyright (c) 2024-present ObjectStack Inc.
|
|
4
|
-
*
|
|
5
|
-
* This source code is licensed under the MIT license found in the
|
|
6
|
-
* LICENSE file in the root directory of this source tree.
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { useMemo } from 'react';
|
|
10
|
-
|
|
11
|
-
/** Animation trigger type */
|
|
12
|
-
export type AnimationTriggerType = 'enter' | 'exit' | 'hover' | 'focus' | 'click';
|
|
13
|
-
|
|
14
|
-
/** Easing presets aligned with EasingFunctionSchema */
|
|
15
|
-
export type EasingPreset =
|
|
16
|
-
| 'linear'
|
|
17
|
-
| 'ease'
|
|
18
|
-
| 'ease-in'
|
|
19
|
-
| 'ease-out'
|
|
20
|
-
| 'ease-in-out'
|
|
21
|
-
| 'spring';
|
|
22
|
-
|
|
23
|
-
/** Transition preset aligned with TransitionPresetSchema */
|
|
24
|
-
export type TransitionPresetType =
|
|
25
|
-
| 'fade'
|
|
26
|
-
| 'slide-up'
|
|
27
|
-
| 'slide-down'
|
|
28
|
-
| 'slide-left'
|
|
29
|
-
| 'slide-right'
|
|
30
|
-
| 'scale'
|
|
31
|
-
| 'scale-fade'
|
|
32
|
-
| 'none';
|
|
33
|
-
|
|
34
|
-
export interface AnimationConfig {
|
|
35
|
-
/** The animation/transition preset */
|
|
36
|
-
preset?: TransitionPresetType;
|
|
37
|
-
/** Duration in milliseconds */
|
|
38
|
-
duration?: number;
|
|
39
|
-
/** Delay in milliseconds */
|
|
40
|
-
delay?: number;
|
|
41
|
-
/** Easing function */
|
|
42
|
-
easing?: EasingPreset;
|
|
43
|
-
/** Whether animation is enabled */
|
|
44
|
-
enabled?: boolean;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/** Resolved CSS classes and styles for animation */
|
|
48
|
-
export interface AnimationResult {
|
|
49
|
-
/** Tailwind CSS classes for the animation */
|
|
50
|
-
className: string;
|
|
51
|
-
/** Inline style for custom durations/delays (only when needed) */
|
|
52
|
-
style: React.CSSProperties;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
const EASING_MAP: Record<EasingPreset, string> = {
|
|
56
|
-
linear: 'linear',
|
|
57
|
-
ease: 'ease',
|
|
58
|
-
'ease-in': 'ease-in',
|
|
59
|
-
'ease-out': 'ease-out',
|
|
60
|
-
'ease-in-out': 'ease-in-out',
|
|
61
|
-
spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
const PRESET_CLASSES: Record<TransitionPresetType, string> = {
|
|
65
|
-
fade: 'animate-in fade-in',
|
|
66
|
-
'slide-up': 'animate-in slide-in-from-bottom-2',
|
|
67
|
-
'slide-down': 'animate-in slide-in-from-top-2',
|
|
68
|
-
'slide-left': 'animate-in slide-in-from-right-2',
|
|
69
|
-
'slide-right': 'animate-in slide-in-from-left-2',
|
|
70
|
-
scale: 'animate-in zoom-in-95',
|
|
71
|
-
'scale-fade': 'animate-in fade-in zoom-in-95',
|
|
72
|
-
none: '',
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
* Hook for applying spec-driven animations to components.
|
|
77
|
-
* Implements ComponentAnimationSchema and TransitionPresetSchema
|
|
78
|
-
* from @objectstack/spec v2.0.7.
|
|
79
|
-
*
|
|
80
|
-
* @example
|
|
81
|
-
* ```tsx
|
|
82
|
-
* function Card() {
|
|
83
|
-
* const animation = useAnimation({ preset: 'fade', duration: 200, easing: 'ease-out' });
|
|
84
|
-
* return <div className={animation.className} style={animation.style}>...</div>;
|
|
85
|
-
* }
|
|
86
|
-
* ```
|
|
87
|
-
*/
|
|
88
|
-
export function useAnimation(config: AnimationConfig = {}): AnimationResult {
|
|
89
|
-
const {
|
|
90
|
-
preset = 'none',
|
|
91
|
-
duration,
|
|
92
|
-
delay,
|
|
93
|
-
easing = 'ease-out',
|
|
94
|
-
enabled = true,
|
|
95
|
-
} = config;
|
|
96
|
-
|
|
97
|
-
return useMemo(() => {
|
|
98
|
-
if (!enabled || preset === 'none') {
|
|
99
|
-
return { className: '', style: {} };
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
const className = PRESET_CLASSES[preset] || '';
|
|
103
|
-
const style: React.CSSProperties = {};
|
|
104
|
-
|
|
105
|
-
if (duration !== undefined) {
|
|
106
|
-
style.animationDuration = `${duration}ms`;
|
|
107
|
-
}
|
|
108
|
-
if (delay !== undefined) {
|
|
109
|
-
style.animationDelay = `${delay}ms`;
|
|
110
|
-
}
|
|
111
|
-
if (easing) {
|
|
112
|
-
style.animationTimingFunction = EASING_MAP[easing] || easing;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
return { className, style };
|
|
116
|
-
}, [preset, duration, delay, easing, enabled]);
|
|
117
|
-
}
|