Skip to content

Commit

Permalink
feat: improve hints
Browse files Browse the repository at this point in the history 
Add showLayoutDescription props
Add tests and update docs
  • Loading branch information
twin committed Jul 16, 2024
1 parent fa6ce32 commit 6e337ba
Show file tree
Hide file tree
Showing 22 changed files with 317 additions and 54 deletions.
15 changes: 8 additions & 7 deletions docs/lib.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,14 @@ This component locates all required rendering elements and renders the entity.

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

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

### ViewController

Expand Down
52 changes: 26 additions & 26 deletions docs/spec.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,32 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;

### ArraySpec

| Property | Type | Required | Description |
| :------------------------- | :------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultValue | `FieldArrayValue` | | Default value |
| type | `"array"` | yes | Entity type |
| required | `boolean` | | Can the value be `undefined` or `null` |
| maxLength | `bigint` | | Maximum number of array elements |
| minLength | `bigint` | | Minimum number of array elements |
| items | `Spec` | | Entity `spec` for an array element |
| enum | `string[]` | | An array of valid values, for example for a select |
| description | `Record<string, string>` | | Beautiful names for values from `enum` |
| 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 |
| viewSpec.disabled | `boolean` | | Is the field available for editing |
| viewSpec.type | `string` | yes | Key to define [Input](./config.md#inputs) for an entity |
| viewSpec.layout | `string` | | Key to define [Layout](./config.md#layouts) for an entity |
| viewSpec.layoutTitle | `string` | | Title for [Layout](./config.md#layouts) |
| viewSpec.layoutDescription | `string` | | Additional description/hint for [Layout](./config.md#layouts) |
| viewSpec.layoutOpen | `boolean` | | Expand [Layout](./config.md#layouts) at the first rendering |
| viewSpec.itemLabel | `string` | | Text for the button that adds an array element |
| viewSpec.itemPrefix | `string` | | Additional text for an element in the array |
| viewSpec.table | `{label: string; property: string;}[]` | | An array whose elements are used to establish column names and their order, if `type === "table"` |
| viewSpec.link | `any` | | A field containing information for forming a [link](#link) for a value |
| viewSpec.placeholder | `string` | | A short hint displayed in the field before the user enters the value |
| viewSpec.addButtonPosition | `"down"/"right"` | | The location of the button adding a new element to the array. Default value "down". |
| viewSpec.hidden | `boolean` | | Hide field and view |
| viewSpec.selectParams | `object` | | [Parameters](#selectparams) additional options for the selector |
| viewSpec.inputProps | `object` | | [InputProps](./input-props-map.md) Additional properties for internal input components |
| Property | Type | Required | Description |
| :------------------------- | :----------------------------------------------------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultValue | `FieldArrayValue` | | Default value |
| type | `"array"` | yes | Entity type |
| required | `boolean` | | Can the value be `undefined` or `null` |
| maxLength | `bigint` | | Maximum number of array elements |
| minLength | `bigint` | | Minimum number of array elements |
| items | `Spec` | | Entity `spec` for an array element |
| enum | `string[]` | | An array of valid values, for example for a select |
| description | `Record<string, string>` | | Beautiful names for values from `enum` |
| 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 |
| viewSpec.disabled | `boolean` | | Is the field available for editing |
| viewSpec.type | `string` | yes | Key to define [Input](./config.md#inputs) for an entity |
| viewSpec.layout | `string` | | Key to define [Layout](./config.md#layouts) for an entity |
| viewSpec.layoutTitle | `string` | | Title for [Layout](./config.md#layouts) |
| viewSpec.layoutDescription | `string` | | Additional description/hint for [Layout](./config.md#layouts) |
| viewSpec.layoutOpen | `boolean` | | Expand [Layout](./config.md#layouts) at the first rendering |
| viewSpec.itemLabel | `string` | | Text for the button that adds an array element |
| viewSpec.itemPrefix | `string` | | Additional text for an element in the array |
| 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 |
| viewSpec.link | `any` | | A field containing information for forming a [link](#link) for a value |
| viewSpec.placeholder | `string` | | A short hint displayed in the field before the user enters the value |
| viewSpec.addButtonPosition | `"down"/"right"` | | The location of the button adding a new element to the array. Default value "down". |
| viewSpec.hidden | `boolean` | | Hide field and view |
| viewSpec.selectParams | `object` | | [Parameters](#selectparams) additional options for the selector |
| viewSpec.inputProps | `object` | | [InputProps](./input-props-map.md) Additional properties for internal input components |

### BooleanSpec

Expand Down
19 changes: 17 additions & 2 deletions playwright/core/DynamicView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,21 @@ import {Spec} from '../../src/lib/core/types/specs';
import {FormValue} from '../../src/lib/core/types/value';
import {dynamicViewConfig} from '../../src/lib/kit/constants/config';

export const DynamicView = ({spec, value}: {spec: Spec; value: FormValue}) => {
return <DynamicViewBase spec={spec} value={value} config={dynamicViewConfig} />;
export const DynamicView = ({
spec,
value,
showLayoutDescription,
}: {
spec: Spec;
value: FormValue;
showLayoutDescription?: boolean;
}) => {
return (
<DynamicViewBase
spec={spec}
value={value}
config={dynamicViewConfig}
showLayoutDescription={showLayoutDescription}
/>
);
};
20 changes: 17 additions & 3 deletions src/lib/core/components/View/DynamicView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,28 @@ export interface DynamicViewProps {
link: Spec['viewSpec']['link'];
}>;
Monaco?: React.ComponentType<MonacoEditorProps>;
showLayoutDescription?: boolean;
}

export const DynamicView = ({value, spec, config, Link, Monaco}: DynamicViewProps) => {
export const DynamicView = ({
value,
spec,
config,
Link,
Monaco,
showLayoutDescription,
}: DynamicViewProps) => {
const DynamicFormsCtx = useCreateContext();

const context = React.useMemo(
() => ({config, value, Link, Monaco: isValidElementType(Monaco) ? Monaco : undefined}),
[config, value, Link, Monaco],
() => ({
config,
value,
showLayoutDescription,
Link,
Monaco: isValidElementType(Monaco) ? Monaco : undefined,
}),
[config, value, Link, Monaco, showLayoutDescription],
);

if (isCorrectSpec(spec) && isCorrectViewConfig(config)) {
Expand Down
1 change: 1 addition & 0 deletions src/lib/core/components/View/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ export * from './DynamicView';
export * from './ViewController';
export * from './helpers';
export * from './types';
export {useDynamicFormsCtx} from './hooks';
Loading

0 comments on commit 6e337ba

Please sign in to comment.