🤖 - UI components with @solid-aria

[riccardoperra]

Description

solid-aria is the newest SolidJS library that exports primitives to build suer accessible user interface.

This porting currently affect these components:

• [X] Popover: #258

• [X] Color Picker: #258

• [x] Menu: use the newest Popover component and @solid-aria/overlays in

  Warning ~~This is in stale since there is not yet a porting of Menu component from react-aria~~ Ready here https://github.com/riccardoperra/codeimage/pull/300

• [ ] Button #248

  Warning ~~In stale since this refactor breaks the overlay animation focus when pressing a button with onPress. This must be refactored after the integration of the newest Dialog/Overlay components~~ Overlay animation should be done with motion.one

• [x] Radio: use @solid-aria/radio

• [x] TextField: use @solid-aria/textfield

• [ ] Toggle: use @solid-aria/toggle

• [ ] Separator: use @solid-aria/separator

• [X] Dialog: use @solid-aria/dialog #288

• [ ] Select: use @solid-aria/listbox with Popover

• [x] Label: use @solid-aria/label for FieldLabel component

• [ ] Link: use @solid-aria/link

Implementation notes

Retrocomptibility with Rollup

With the newest implementation of rollup-plugin of Vanilla-extract, @codeimage/ui will be ported from a vite setup to Rollup in order to use the rollup-preset-solid package and supports in the future solid-start

• https://github.com/riccardoperra/codeimage/issues/235

Exports

Every new component must be in his own folder and must be exported in a index.tsx file. Since there is Vite in library mode enabled, each type exported outside must be import using the import type keywords

https://github.com/riccardoperra/codeimage/blob/8c5135861293c37d7236c5aa73e3d89eab1b877b/packages/ui/src/lib/primitives/index.ts#L3-L9

Styling

Examples of solid-aria show simple styling style attribute. Obviously in @codeimage/ui this is not possible, so every type of style must be made with vanilla-extract.

The recommended approaches are:

• Recipes
• Through vanilla-extract style function and data-attributes (solid-aria will automatically handle these)