🤖 - 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:

• Popover: feat: add theme gradients #258

• Color Picker: feat: add theme gradients #258

• 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 Codeimage Projects  #300

• Button refactor: @solid-aria integration #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

• Radio: use @solid-aria/radio

• TextField: use @solid-aria/textfield

• Toggle: use @solid-aria/toggle

• Separator: use @solid-aria/separator

• Dialog: use @solid-aria/dialog refactor(ui): add @solid-aria/dialog integration #288

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

• 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

• 🤖 - Integration with solid-start #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

codeimage/packages/ui/src/lib/primitives/index.ts

Lines 3 to 9 in 8c51358

	export {
	Text,
	textStyles,
	useText,
	type UseTextProps,
	type TextProps,
	} from './Text';

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)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.