open-formulieren / formio-builder Goto Github PK

• Look into zod for this
• Check if we can specify validators at the builder field level to properly encapsulate this
• ... otherwise set up validator schema as composable thing.

Formio email component

This is relevant for the choices with the select, radio, checkboxes components, amongst others

The current tooltip solution is quick and dirty and has some issues:

• #33 (comment) z-index fighting
• Long texts fall of the screen or sit behind other panels in multi-column layouts
• Hovering over them doesn't really allow clicking any potential URLs inside or copy-pasting something. Not necessarily a dealbreaker, but could be annoying
• Hover on desktop displays the tooltip but also the title HTML attribute.

A proper implementation would be to use https://floating-ui.com/docs/react, which we already use in the SDK for date pickers. It would also solve some other issues in the SDK/renderer eventually by not having to use the tooltip library of formio itself.

This rule from bootstrap sets a background-color without specifying a foreground-color. This results in near-white on near-white in dark mode.

.form-control:disabled, .form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

• Edit form
• Validation schema
  • Especially take the date constraint into account!
• Preview
• Datepicker library/solution? Flatpickr is... not ideal just use input type="date"

Hooks like useManageTranslations would definitely benefit from typescript information to know which keys are translatable (string type and present in the FormioTypeSchema)

We'd then be able to do something like:

Translations.useManageTranslations<EmailSchema>(['label', 'bad']);
hasAnyError<EmailSchema>(...)

-> compiler should then warn about 'bad' not being a valid name.

This would also be useful to combine in a higher order EditForm component with generics, so you can do something like:

<EditForm<EmailSchema> manageTranslations={['label', 'description']} manageValidatorTranslations={['required']}>
{({hasAnyError}) => (
  <Tabs>
    <TabList>...</TabList>
    <TabPanel>...</TabPanel>
  </Tabs>
)}
</EditForm>

• Split out generic/reusable types into own library so the formio-renderer can use them
• Ensure that the other types end up in the types entrypoint in the package

The content of index.ts is now resulting in our own index.d.ts being overwritten

One reason is for native promise support: https://stackoverflow.com/questions/47995484/whats-the-purpose-of-typescripts-awaiter

Nice to have?

open-formulieren/open-forms#3079 adds a warning when you try to add a second Co-sign component to a form, as it doesn't make sense. We think it's nice UX when having a Co-sign component in one of the form steps, "greys out"/disables the draggable (perhaps with the warning, changed to an info when you do try to drag it).

The preview currently shows the JSON schema

Instead, this should show the component preview (and strip out/ignore certain attributes, like 'hidden' etc.).

All texts/literals are now provided via react-intl components, however we need to either or both:

• Ship translations for NL that can be picked up by downstream projects
• Ensure that our messages are picked up by downstream project builds

• generically based on component.validate -> requires order/mapping with component type
• specify explicitly at the preview component level (e.g. map component.type -> (component) => ZodSchema)

• Check if we can use TS mapped types to get all (deeply nested) field names
• Check if we can provide a generic implementation to make it reusable in component types
• Check if we need to specify the type var, or if we can rely on the type information from useFormikContext().errors instead (see #29 (comment))

These should ensure the component preview gets updated appropriately

Essentially, the Formik initialValues should be sourced from this value

Tangentially related - the defaultValues now behaves incorrectly in the builder form when toggling multiple true/false.

• Fix preview
• Fix defaultValue i.c.w. multiple

Run the tests and build all in CI

This executes the play function, or if those are missing, ensures each story renders.

Here I have a required repeating group, with a non-required textfield inside.

It looks like the textfield is required (because the label is bold)

See if we can use TinyMCE and feed it the config from the main project, instead of Formio's own editor.

Managing translations also requires special attention.

Due to the ref/effect being scoped to the Key component, when you switch tabs and the Basic tab content gets unmounted, this resets upon switching back to the basic tab.

A hook useDerivedKey is probably a better approach which can run on the entire for component.

See: #34 (comment)

In the story with path /story/builder-components-textfield--preview-initial-values, the interaction tests fail because clicking on the checkbox 'multiple values' doesn't seem to actually check the checkbox.

• Default value should change into a list of default values
• Preview component should update UI with button to "add another item"

Builder edit form and preview for the number Form.io component type.