@object-ui/plugin-form 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 +21 -0
- package/README.md +21 -1
- package/dist/index.js +109 -66
- package/dist/index.umd.cjs +2 -2
- package/dist/packages/plugin-form/src/DrawerForm.d.ts +2 -0
- package/dist/packages/plugin-form/src/autoLayout.d.ts +11 -4
- package/package.json +42 -10
- package/.turbo/turbo-build.log +0 -32
- package/src/DrawerForm.tsx +0 -410
- package/src/EmbeddableForm.tsx +0 -240
- package/src/FormAnalytics.tsx +0 -209
- package/src/FormSection.tsx +0 -152
- package/src/FormVariants.test.tsx +0 -219
- package/src/ModalForm.tsx +0 -485
- package/src/ObjectForm.msw.test.tsx +0 -156
- package/src/ObjectForm.stories.tsx +0 -85
- package/src/ObjectForm.test.tsx +0 -61
- package/src/ObjectForm.tsx +0 -609
- package/src/SplitForm.tsx +0 -300
- package/src/TabbedForm.tsx +0 -395
- package/src/WizardForm.tsx +0 -502
- package/src/__tests__/EmbeddableFormPrefill.test.tsx +0 -186
- package/src/__tests__/MobileUX.test.tsx +0 -433
- package/src/__tests__/NewVariants.test.tsx +0 -684
- package/src/__tests__/autoLayout.test.ts +0 -339
- package/src/__tests__/form-validation-submit.test.tsx +0 -286
- package/src/autoLayout.ts +0 -166
- package/src/index.tsx +0 -134
- package/tsconfig.json +0 -9
- package/vite.config.ts +0 -58
- package/vitest.config.ts +0 -12
- package/vitest.setup.ts +0 -1
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
|
|
3
|
-
import type { BaseSchema } from '@object-ui/types';
|
|
4
|
-
import { createStorybookDataSource } from '@storybook-config/datasource';
|
|
5
|
-
|
|
6
|
-
const meta = {
|
|
7
|
-
title: 'Plugins/ObjectForm',
|
|
8
|
-
component: SchemaRenderer,
|
|
9
|
-
parameters: {
|
|
10
|
-
layout: 'centered',
|
|
11
|
-
},
|
|
12
|
-
tags: ['autodocs'],
|
|
13
|
-
argTypes: {
|
|
14
|
-
schema: { table: { disable: true } },
|
|
15
|
-
},
|
|
16
|
-
} satisfies Meta<any>;
|
|
17
|
-
|
|
18
|
-
export default meta;
|
|
19
|
-
type Story = StoryObj<typeof meta>;
|
|
20
|
-
|
|
21
|
-
const dataSource = createStorybookDataSource();
|
|
22
|
-
|
|
23
|
-
const renderStory = (args: any) => (
|
|
24
|
-
<SchemaRendererProvider dataSource={dataSource}>
|
|
25
|
-
<SchemaRenderer schema={args as unknown as BaseSchema} />
|
|
26
|
-
</SchemaRendererProvider>
|
|
27
|
-
);
|
|
28
|
-
|
|
29
|
-
export const Default: Story = {
|
|
30
|
-
render: renderStory,
|
|
31
|
-
args: {
|
|
32
|
-
type: 'object-form',
|
|
33
|
-
objectName: 'Contact',
|
|
34
|
-
customFields: [
|
|
35
|
-
{ name: 'firstName', label: 'First Name', type: 'text', required: true },
|
|
36
|
-
{ name: 'lastName', label: 'Last Name', type: 'text', required: true },
|
|
37
|
-
{ name: 'email', label: 'Email', type: 'email', required: true },
|
|
38
|
-
{ name: 'phone', label: 'Phone', type: 'tel' },
|
|
39
|
-
],
|
|
40
|
-
className: 'w-full max-w-2xl',
|
|
41
|
-
} as any,
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export const WithSections: Story = {
|
|
45
|
-
render: renderStory,
|
|
46
|
-
args: {
|
|
47
|
-
type: 'object-form',
|
|
48
|
-
objectName: 'Employee',
|
|
49
|
-
sections: [
|
|
50
|
-
{
|
|
51
|
-
title: 'Personal Information',
|
|
52
|
-
fields: [
|
|
53
|
-
{ name: 'firstName', label: 'First Name', type: 'text', required: true },
|
|
54
|
-
{ name: 'lastName', label: 'Last Name', type: 'text', required: true },
|
|
55
|
-
{ name: 'dateOfBirth', label: 'Date of Birth', type: 'date' },
|
|
56
|
-
],
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
title: 'Work Details',
|
|
60
|
-
fields: [
|
|
61
|
-
{ name: 'department', label: 'Department', type: 'select', options: ['Engineering', 'Marketing', 'Sales', 'HR'] },
|
|
62
|
-
{ name: 'role', label: 'Role', type: 'text' },
|
|
63
|
-
{ name: 'startDate', label: 'Start Date', type: 'date' },
|
|
64
|
-
],
|
|
65
|
-
},
|
|
66
|
-
],
|
|
67
|
-
className: 'w-full max-w-2xl',
|
|
68
|
-
} as any,
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
export const ComplexFields: Story = {
|
|
72
|
-
render: renderStory,
|
|
73
|
-
args: {
|
|
74
|
-
type: 'object-form',
|
|
75
|
-
objectName: 'Product',
|
|
76
|
-
customFields: [
|
|
77
|
-
{ name: 'name', label: 'Product Name', type: 'text', required: true },
|
|
78
|
-
{ name: 'category', label: 'Category', type: 'select', options: ['Electronics', 'Clothing', 'Food', 'Books'], required: true },
|
|
79
|
-
{ name: 'price', label: 'Price', type: 'number', required: true },
|
|
80
|
-
{ name: 'inStock', label: 'In Stock', type: 'checkbox' },
|
|
81
|
-
{ name: 'description', label: 'Description', type: 'textarea', rows: 4 },
|
|
82
|
-
],
|
|
83
|
-
className: 'w-full max-w-2xl',
|
|
84
|
-
} as any,
|
|
85
|
-
};
|
package/src/ObjectForm.test.tsx
DELETED
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { describe, it, expect, vi } from 'vitest';
|
|
2
|
-
import { render, screen, waitFor } from '@testing-library/react';
|
|
3
|
-
import { ObjectForm } from './ObjectForm';
|
|
4
|
-
import { registerAllFields } from '@object-ui/fields';
|
|
5
|
-
import React from 'react';
|
|
6
|
-
|
|
7
|
-
// Ensure fields are registered
|
|
8
|
-
registerAllFields();
|
|
9
|
-
|
|
10
|
-
describe('ObjectForm Integration', () => {
|
|
11
|
-
const objectSchema = {
|
|
12
|
-
name: 'test_object',
|
|
13
|
-
fields: {
|
|
14
|
-
name: {
|
|
15
|
-
type: 'text',
|
|
16
|
-
label: 'Name'
|
|
17
|
-
},
|
|
18
|
-
price: {
|
|
19
|
-
type: 'currency',
|
|
20
|
-
label: 'Price',
|
|
21
|
-
scale: 2
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
const mockDataSource: any = {
|
|
27
|
-
getObjectSchema: vi.fn().mockResolvedValue(objectSchema),
|
|
28
|
-
createRecord: vi.fn(),
|
|
29
|
-
updateRecord: vi.fn(),
|
|
30
|
-
getRecord: vi.fn(),
|
|
31
|
-
query: vi.fn()
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
it('renders fields using specialized components', async () => {
|
|
35
|
-
render(
|
|
36
|
-
<ObjectForm
|
|
37
|
-
schema={{
|
|
38
|
-
type: 'object-form',
|
|
39
|
-
objectName: 'test_object',
|
|
40
|
-
mode: 'create'
|
|
41
|
-
}}
|
|
42
|
-
dataSource={mockDataSource}
|
|
43
|
-
/>
|
|
44
|
-
);
|
|
45
|
-
|
|
46
|
-
// Wait for schema to load (useEffect)
|
|
47
|
-
await waitFor(() => {
|
|
48
|
-
expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('test_object');
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
// Check if labels are present
|
|
52
|
-
await waitFor(() => {
|
|
53
|
-
expect(screen.queryByText('Name')).toBeTruthy();
|
|
54
|
-
});
|
|
55
|
-
expect(screen.getByText('Price')).toBeTruthy();
|
|
56
|
-
|
|
57
|
-
// Assert input exists
|
|
58
|
-
// Since we don't have getByLabelText working reliably without full accessibility tree in happy-dom sometimes,
|
|
59
|
-
// we can try looking for inputs.
|
|
60
|
-
});
|
|
61
|
-
});
|