Skip to content

Commit a69acfd

Browse files
bratvabratva
authored
feat: improve hints (#209)
Authored-by: twin <[email protected]>
1 parent fa6ce32 commit a69acfd

34 files changed

+317
-54
lines changed

‎docs/lib.md‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,14 @@ This component locates all required rendering elements and renders the entity.
3939

4040
This component serves as the primary entry point for creating an overview of form values.
4141

42-
| Property | Type | Required | Description |
43-
| :------- | :------------------------------------------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------- |
44-
| value | `AnyObject` | yes | Form value |
45-
| spec | `Spec` | yes | An [spec](./spec.md#specs) describing the entity |
46-
| config | `DynamicViewConfig` | yes | A [config](./config.md) containing [Views](./config.md#views) and [ViewLayouts](./config.md#viewlayouts) for each entity |
47-
| Link | `React.ComponentType<{value: FormValue; link: Spec['viewSpec']['link'];}>` | | [Component](./spec.md#link) for converting values to links |
48-
| Monaco | `React.ComponentType<MonacoEditorProps>` | | [MonacoEditor](https://github.com/react-monaco-editor/react-monaco-editor) component for Monaco [Input](./config.md#inputs) |
42+
| Property | Type | Required | Description |
43+
| :-------------------- | :------------------------------------------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------- |
44+
| value | `AnyObject` | yes | Form value |
45+
| spec | `Spec` | yes | An [spec](./spec.md#specs) describing the entity |
46+
| config | `DynamicViewConfig` | yes | A [config](./config.md) containing [Views](./config.md#views) and [ViewLayouts](./config.md#viewlayouts) for each entity |
47+
| Link | `React.ComponentType<{value: FormValue; link: Spec['viewSpec']['link'];}>` | | [Component](./spec.md#link) for converting values to links |
48+
| Monaco | `React.ComponentType<MonacoEditorProps>` | | [MonacoEditor](https://github.com/react-monaco-editor/react-monaco-editor) component for Monaco [Input](./config.md#inputs) |
49+
| showLayoutDescription | boolean | | enable to show viewSpec.layoutDescription hint |
4950

5051
### ViewController
5152

‎docs/spec.md‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,32 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
88

99
### ArraySpec
1010

11-
| Property | Type | Required | Description |
12-
| :------------------------- | :------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
13-
| defaultValue | `FieldArrayValue` | | Default value |
14-
| type | `"array"` | yes | Entity type |
15-
| required | `boolean` | | Can the value be `undefined` or `null` |
16-
| maxLength | `bigint` | | Maximum number of array elements |
17-
| minLength | `bigint` | | Minimum number of array elements |
18-
| items | `Spec` | | Entity `spec` for an array element |
19-
| enum | `string[]` | | An array of valid values, for example for a select |
20-
| description | `Record<string, string>` | | Beautiful names for values from `enum` |
21-
| validator | `string` | | The key for determining the [validator](./config.md#validators) for the entity, if the value is empty, the base [validator](./config.md#validators) from the entity config will be used |
22-
| viewSpec.disabled | `boolean` | | Is the field available for editing |
23-
| viewSpec.type | `string` | yes | Key to define [Input](./config.md#inputs) for an entity |
24-
| viewSpec.layout | `string` | | Key to define [Layout](./config.md#layouts) for an entity |
25-
| viewSpec.layoutTitle | `string` | | Title for [Layout](./config.md#layouts) |
26-
| viewSpec.layoutDescription | `string` | | Additional description/hint for [Layout](./config.md#layouts) |
27-
| viewSpec.layoutOpen | `boolean` | | Expand [Layout](./config.md#layouts) at the first rendering |
28-
| viewSpec.itemLabel | `string` | | Text for the button that adds an array element |
29-
| viewSpec.itemPrefix | `string` | | Additional text for an element in the array |
30-
| viewSpec.table | `{label: string; property: string;}[]` | | An array whose elements are used to establish column names and their order, if `type === "table"` |
31-
| viewSpec.link | `any` | | A field containing information for forming a [link](#link) for a value |
32-
| viewSpec.placeholder | `string` | | A short hint displayed in the field before the user enters the value |
33-
| viewSpec.addButtonPosition | `"down"/"right"` | | The location of the button adding a new element to the array. Default value "down". |
34-
| viewSpec.hidden | `boolean` | | Hide field and view |
35-
| viewSpec.selectParams | `object` | | [Parameters](#selectparams) additional options for the selector |
36-
| viewSpec.inputProps | `object` | | [InputProps](./input-props-map.md) Additional properties for internal input components |
11+
| Property | Type | Required | Description |
12+
| :------------------------- | :----------------------------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
13+
| defaultValue | `FieldArrayValue` | | Default value |
14+
| type | `"array"` | yes | Entity type |
15+
| required | `boolean` | | Can the value be `undefined` or `null` |
16+
| maxLength | `bigint` | | Maximum number of array elements |
17+
| minLength | `bigint` | | Minimum number of array elements |
18+
| items | `Spec` | | Entity `spec` for an array element |
19+
| enum | `string[]` | | An array of valid values, for example for a select |
20+
| description | `Record<string, string>` | | Beautiful names for values from `enum` |
21+
| validator | `string` | | The key for determining the [validator](./config.md#validators) for the entity, if the value is empty, the base [validator](./config.md#validators) from the entity config will be used |
22+
| viewSpec.disabled | `boolean` | | Is the field available for editing |
23+
| viewSpec.type | `string` | yes | Key to define [Input](./config.md#inputs) for an entity |
24+
| viewSpec.layout | `string` | | Key to define [Layout](./config.md#layouts) for an entity |
25+
| viewSpec.layoutTitle | `string` | | Title for [Layout](./config.md#layouts) |
26+
| viewSpec.layoutDescription | `string` | | Additional description/hint for [Layout](./config.md#layouts) |
27+
| viewSpec.layoutOpen | `boolean` | | Expand [Layout](./config.md#layouts) at the first rendering |
28+
| viewSpec.itemLabel | `string` | | Text for the button that adds an array element |
29+
| viewSpec.itemPrefix | `string` | | Additional text for an element in the array |
30+
| viewSpec.table | `{label: string; property: string; description?: string;}[]` | | An array whose elements are used to establish column names and their order, if `type === "table"`. `description` adds a hint to a field in the table's header |
31+
| viewSpec.link | `any` | | A field containing information for forming a [link](#link) for a value |
32+
| viewSpec.placeholder | `string` | | A short hint displayed in the field before the user enters the value |
33+
| viewSpec.addButtonPosition | `"down"/"right"` | | The location of the button adding a new element to the array. Default value "down". |
34+
| viewSpec.hidden | `boolean` | | Hide field and view |
35+
| viewSpec.selectParams | `object` | | [Parameters](#selectparams) additional options for the selector |
36+
| viewSpec.inputProps | `object` | | [InputProps](./input-props-map.md) Additional properties for internal input components |
3737

3838
### BooleanSpec
3939

‎playwright/core/DynamicView.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,21 @@ import {Spec} from '../../src/lib/core/types/specs';
55
import {FormValue} from '../../src/lib/core/types/value';
66
import {dynamicViewConfig} from '../../src/lib/kit/constants/config';
77

8-
export const DynamicView = ({spec, value}: {spec: Spec; value: FormValue}) => {
9-
return <DynamicViewBase spec={spec} value={value} config={dynamicViewConfig} />;
8+
export const DynamicView = ({
9+
spec,
10+
value,
11+
showLayoutDescription,
12+
}: {
13+
spec: Spec;
14+
value: FormValue;
15+
showLayoutDescription?: boolean;
16+
}) => {
17+
return (
18+
<DynamicViewBase
19+
spec={spec}
20+
value={value}
21+
config={dynamicViewConfig}
22+
showLayoutDescription={showLayoutDescription}
23+
/>
24+
);
1025
};

‎src/lib/core/components/View/DynamicView.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,28 @@ export interface DynamicViewProps {
2020
link: Spec['viewSpec']['link'];
2121
}>;
2222
Monaco?: React.ComponentType<MonacoEditorProps>;
23+
showLayoutDescription?: boolean;
2324
}
2425

25-
export const DynamicView = ({value, spec, config, Link, Monaco}: DynamicViewProps) => {
26+
export const DynamicView = ({
27+
value,
28+
spec,
29+
config,
30+
Link,
31+
Monaco,
32+
showLayoutDescription,
33+
}: DynamicViewProps) => {
2634
const DynamicFormsCtx = useCreateContext();
2735

2836
const context = React.useMemo(
29-
() => ({config, value, Link, Monaco: isValidElementType(Monaco) ? Monaco : undefined}),
30-
[config, value, Link, Monaco],
37+
() => ({
38+
config,
39+
value,
40+
showLayoutDescription,
41+
Link,
42+
Monaco: isValidElementType(Monaco) ? Monaco : undefined,
43+
}),
44+
[config, value, Link, Monaco, showLayoutDescription],
3145
);
3246

3347
if (isCorrectSpec(spec) && isCorrectViewConfig(config)) {

‎src/lib/core/components/View/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export * from './DynamicView';
22
export * from './ViewController';
33
export * from './helpers';
44
export * from './types';
5+
export {useDynamicFormsCtx} from './hooks';

0 commit comments

Comments
 (0)