f504f73 · rowtype-yoga/purescript-yoga-heroui3

git.iko.soy/rowtype-yoga/purescript-yoga-heroui3

fix Autocomplete story: trigger needs Value + Indicator (was rendering empty)

commitf504f73589d00d595d0a6c084a0e2707e30767c4 authorMark <mark.eibes@gmail.com> dateSun 31 May 2026, 18:36 (4 months ago) parentc9f97b2

29 files changed+68−95

compare with main

unifiedsplit

test/HeroUI/Accordion/Stories.purs+2−3

@@ -6,14 +6,13 @@ import React.Basic (JSX)

66import HeroUI.Accordion as Accordion

77import Yoga.React (component)

88import Yoga.React.DOM.HTML (div)

9−import Yoga.React.DOM.Internal (text)

109import YogaStories.Story (story)

1110

1211item :: String -> String -> String -> JSX

1312item key heading body =

1413 Accordion.accordionItem { id: key }

15− [ Accordion.accordionHeading {} [ Accordion.accordionTrigger {} (text heading) ]

16− , Accordion.accordionPanel {} [ Accordion.accordionBody {} (text body) ]

14+ [ Accordion.accordionHeading {} [ Accordion.accordionTrigger {} heading ]

15+ , Accordion.accordionPanel {} [ Accordion.accordionBody {} body ]

1716 ]

1817

1918mkAccordion :: {} -> JSX

test/HeroUI/Alert/Stories.purs+2−3

@@ -8,7 +8,6 @@ import HeroUI.Alert as Alert

88import HeroUI.Types as T

99import Yoga.React (component)

1010import Yoga.React.DOM.HTML (div)

11−import Yoga.React.DOM.Internal (text)

1211import YogaStories.Controls (enum)

1312import YogaStories.Story (story)

1413

@@ -30,8 +29,8 @@ mkAlert = component "AlertStory" \props -> React.do

3029 [ Alert.alert { status: toStatus props.status }

3130 [ Alert.alertIndicator {} ([] :: Array JSX)

3231 , Alert.alertContent {}

33− [ Alert.alertTitle {} (text props.title)

34− , Alert.alertDescription {} (text props.body)

32+ [ Alert.alertTitle {} props.title

33+ , Alert.alertDescription {} props.body

3534 ]

3635 ]

3736 ]

test/HeroUI/Autocomplete/Stories.purs+3−4

@@ -7,7 +7,6 @@ import HeroUI.Autocomplete as Autocomplete

77import HeroUI.ListBox as ListBox

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Story (story)

1211

1312mkAutocomplete :: { placeholder :: String } -> JSX

@@ -20,9 +19,9 @@ mkAutocomplete = component "AutocompleteStory" \props -> React.do

2019 ]

2120 , Autocomplete.autocompletePopover {}

2221 [ ListBox.listBox {}

23− [ ListBox.listBoxItem { id: "apple" } (text "Apple")

24− , ListBox.listBoxItem { id: "banana" } (text "Banana")

25− , ListBox.listBoxItem { id: "cherry" } (text "Cherry")

22+ [ ListBox.listBoxItem { id: "apple" } "Apple"

23+ , ListBox.listBoxItem { id: "banana" } "Banana"

24+ , ListBox.listBoxItem { id: "cherry" } "Cherry"

2625 ]

2726 ]

2827 ]

test/HeroUI/Avatar/Stories.purs+1−2

@@ -7,14 +7,13 @@ import HeroUI.Avatar as Avatar

77import HeroUI.Types as T

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Story (story)

1211

1312mkAvatar :: { initials :: String } -> JSX

1413mkAvatar = component "AvatarStory" \props -> React.do

1514 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg flex items-center gap-4" }

1615 [ Avatar.avatar { color: T.Accent, size: T.Md, variant: Avatar.Soft }

17− [ Avatar.avatarFallback { color: T.Accent } (text props.initials) ]

16+ [ Avatar.avatarFallback { color: T.Accent } props.initials ]

1817 ]

1918

2019basic :: JSX

test/HeroUI/Badge/Stories.purs+2−3

@@ -8,15 +8,14 @@ import HeroUI.Badge as Badge

88import HeroUI.Types as T

99import Yoga.React (component)

1010import Yoga.React.DOM.HTML (div)

11−import Yoga.React.DOM.Internal (text)

1211import YogaStories.Story (story)

1312

1413mkBadge :: { count :: String } -> JSX

1514mkBadge = component "BadgeStory" \props -> React.do

1615 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg flex items-center gap-4" }

1716 [ Badge.badge { color: T.Danger, variant: Badge.Primary, placement: Badge.TopRight, size: T.Md }

18− [ Badge.badgeLabel {} (text props.count)

19− , Badge.badgeAnchor {} [ Avatar.avatar { color: T.Accent } [ Avatar.avatarFallback {} (text "ME") ] ]

17+ [ Badge.badgeLabel {} props.count

18+ , Badge.badgeAnchor {} [ Avatar.avatar { color: T.Accent } [ Avatar.avatarFallback {} "ME" ] ]

2019 ]

2120 ]

2221

test/HeroUI/Breadcrumbs/Stories.purs+3−4

@@ -6,16 +6,15 @@ import React.Basic (JSX)

66import HeroUI.Breadcrumbs as Breadcrumbs

77import Yoga.React (component)

88import Yoga.React.DOM.HTML (div)

9−import Yoga.React.DOM.Internal (text)

109import YogaStories.Story (story)

1110

1211mkBreadcrumbs :: {} -> JSX

1312mkBreadcrumbs = component "BreadcrumbsStory" \(_ :: {}) -> React.do

1413 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg" }

1514 [ Breadcrumbs.breadcrumbs {}

16− [ Breadcrumbs.breadcrumbsItem { href: "#" } (text "Home")

17− , Breadcrumbs.breadcrumbsItem { href: "#" } (text "Library")

18− , Breadcrumbs.breadcrumbsItem {} (text "Current")

15+ [ Breadcrumbs.breadcrumbsItem { href: "#" } "Home"

16+ , Breadcrumbs.breadcrumbsItem { href: "#" } "Library"

17+ , Breadcrumbs.breadcrumbsItem {} "Current"

1918 ]

2019 ]

2120

test/HeroUI/Button/Stories.purs+1−2

@@ -8,7 +8,6 @@ import HeroUI.Button as Btn

88import HeroUI.Types as T

99import Yoga.React (component)

1010import Yoga.React.DOM.HTML (div)

11−import Yoga.React.DOM.Internal (text)

1211import YogaStories.Controls (enum)

1312import YogaStories.Story (story)

1413

@@ -45,7 +44,7 @@ mkButton = component "ButtonStory" \props -> React.do

4544 , size: toSize props.size

4645 , isDisabled: props.isDisabled

4746 }

48− (text props.label)

47+ props.label

4948 ]

5049

5150primary :: JSX

test/HeroUI/Card/Stories.purs+3−4

@@ -7,7 +7,6 @@ import React.Basic (JSX)

77import HeroUI.Card as Card

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Controls (enum)

1211import YogaStories.Story (story)

1312

@@ -26,9 +25,9 @@ mkCard :: { title :: String, body :: String, variant :: Variant } -> JSX

2625mkCard = component "CardStory" \props -> React.do

2726 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg" }

2827 [ Card.card { variant: toVariant props.variant, className: "max-w-sm" }

29− [ Card.cardHeader {} [ Card.cardTitle {} (text props.title) ]

30− , Card.cardContent {} (text props.body)

31− , Card.cardFooter {} (text "Footer")

28+ [ Card.cardHeader {} [ Card.cardTitle {} props.title ]

29+ , Card.cardContent {} props.body

30+ , Card.cardFooter {} "Footer"

3231 ]

3332 ]

3433

test/HeroUI/Checkbox/Stories.purs+1−2

@@ -7,13 +7,12 @@ import HeroUI.Checkbox as Checkbox

77import HeroUI.Types as T

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Story (story)

1211

1312mkCheckbox :: { label :: String, defaultSelected :: Boolean } -> JSX

1413mkCheckbox = component "CheckboxStory" \props -> React.do

1514 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg" }

16− [ Checkbox.checkbox { defaultSelected: props.defaultSelected, variant: T.Primary } (text props.label) ]

15+ [ Checkbox.checkbox { defaultSelected: props.defaultSelected, variant: T.Primary } props.label ]

1716

1817basic :: JSX

1918basic = story "basic" mkCheckbox { label: "Accept terms", defaultSelected: false }

test/HeroUI/Chip/Stories.purs+1−2

@@ -8,7 +8,6 @@ import HeroUI.Chip as Chip

88import HeroUI.Types as T

99import Yoga.React (component)

1010import Yoga.React.DOM.HTML (div)

11−import Yoga.React.DOM.Internal (text)

1211import YogaStories.Controls (enum)

1312import YogaStories.Story (story)

1413

@@ -26,7 +25,7 @@ toVariant = case _ of

2625mkChip :: { label :: String, variant :: Variant } -> JSX

2726mkChip = component "ChipStory" \props -> React.do

2827 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg flex items-center gap-4" }

29− [ Chip.chip { color: T.Accent, size: T.Md, variant: toVariant props.variant } (text props.label) ]

28+ [ Chip.chip { color: T.Accent, size: T.Md, variant: toVariant props.variant } props.label ]

3029

3130basic :: JSX

3231basic = story "basic" mkChip { label: "new", variant: enum Soft }

test/HeroUI/DatePicker/Stories.purs+1−2

@@ -6,14 +6,13 @@ import React.Basic (JSX)

66import HeroUI.DatePicker as DatePicker

77import Yoga.React (component)

88import Yoga.React.DOM.HTML (div)

9−import Yoga.React.DOM.Internal (text)

109import YogaStories.Story (story)

1110

1211mkDatePicker :: {} -> JSX

1312mkDatePicker = component "DatePickerStory" \(_ :: {}) -> React.do

1413 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg w-72" }

1514 [ DatePicker.datePicker {}

16− [ DatePicker.datePickerTrigger {} (text "Pick a date")

15+ [ DatePicker.datePickerTrigger {} "Pick a date"

1716 , DatePicker.datePickerPopover {} ([] :: Array JSX)

1817 ]

1918 ]

test/HeroUI/Drawer/Stories.purs+4−5

@@ -7,20 +7,19 @@ import HeroUI.Button as Btn

77import HeroUI.Drawer as Drawer

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Story (story)

1211

1312mkDrawer :: { title :: String } -> JSX

1413mkDrawer = component "DrawerStory" \props -> React.do

1514 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg" }

1615 [ Drawer.drawer {}

17− [ Btn.button { variant: Btn.Primary } (text "Open drawer")

16+ [ Btn.button { variant: Btn.Primary } "Open drawer"

1817 , Drawer.drawerBackdrop { variant: Drawer.Blur }

1918 [ Drawer.drawerContent { placement: Drawer.Right }

2019 [ Drawer.drawerDialog {}

21− [ Drawer.drawerHeader {} [ Drawer.drawerHeading {} (text props.title) ]

22− , Drawer.drawerBody {} (text "Drawer body content.")

23− , Drawer.drawerFooter {} [ Drawer.drawerCloseTrigger {} (text "Close") ]

20+ [ Drawer.drawerHeader {} [ Drawer.drawerHeading {} props.title ]

21+ , Drawer.drawerBody {} "Drawer body content."

22+ , Drawer.drawerFooter {} [ Drawer.drawerCloseTrigger {} "Close" ]

2423 ]

2524 ]

2625 ]

test/HeroUI/Dropdown/Stories.purs+4−5

@@ -8,19 +8,18 @@ import HeroUI.Dropdown as Dropdown

88import HeroUI.Types as T

99import Yoga.React (component)

1010import Yoga.React.DOM.HTML (div)

11−import Yoga.React.DOM.Internal (text)

1211import YogaStories.Story (story)

1312

1413mkDropdown :: {} -> JSX

1514mkDropdown = component "DropdownStory" \(_ :: {}) -> React.do

1615 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg" }

1716 [ Dropdown.dropdown {}

18− [ Dropdown.dropdownTrigger {} [ Btn.button { variant: Btn.Primary } (text "Actions") ]

17+ [ Dropdown.dropdownTrigger {} [ Btn.button { variant: Btn.Primary } "Actions" ]

1918 , Dropdown.dropdownPopover {}

2019 [ Dropdown.dropdownMenu { selectionMode: T.SelectionNone }

21− [ Dropdown.dropdownItem { id: "new" } (text "New file")

22− , Dropdown.dropdownItem { id: "copy" } (text "Copy link")

23− , Dropdown.dropdownItem { id: "delete" } (text "Delete")

20+ [ Dropdown.dropdownItem { id: "new" } "New file"

21+ , Dropdown.dropdownItem { id: "copy" } "Copy link"

22+ , Dropdown.dropdownItem { id: "delete" } "Delete"

2423 ]

2524 ]

2625 ]

test/HeroUI/Form/Stories.purs+1−2

@@ -8,7 +8,6 @@ import HeroUI.Form as Form

88import HeroUI.Input as Input

99import Yoga.React (component)

1010import Yoga.React.DOM.HTML (div)

11−import Yoga.React.DOM.Internal (text)

1211import YogaStories.Story (story)

1312

1413mkForm :: {} -> JSX

@@ -17,7 +16,7 @@ mkForm = component "FormStory" \(_ :: {}) -> React.do

1716 [ Form.form { validationBehavior: Form.Native, className: "flex flex-col gap-3" }

1817 [ Input.textField { name: "email" }

1918 [ Input.input { placeholder: "you@example.com", type: Input.InputTypeEmail } ([] :: Array JSX) ]

20− , Btn.button { type: Btn.ButtonTypeSubmit, variant: Btn.Primary } (text "Submit")

19+ , Btn.button { type: Btn.ButtonTypeSubmit, variant: Btn.Primary } "Submit"

2120 ]

2221 ]

2322

test/HeroUI/Kbd/Stories.purs+1−2

@@ -6,7 +6,6 @@ import React.Basic (JSX)

66import HeroUI.Kbd as Kbd

77import Yoga.React (component)

88import Yoga.React.DOM.HTML (div)

9−import Yoga.React.DOM.Internal (text)

109import YogaStories.Story (story)

1110

1211mkKbd :: { label :: String } -> JSX

@@ -14,7 +13,7 @@ mkKbd = component "KbdStory" \props -> React.do

1413 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg flex items-center gap-2" }

1514 [ Kbd.kbd { variant: Kbd.Default }

1615 [ Kbd.kbdAbbr { keyValue: Kbd.Command } ([] :: Array JSX)

17− , Kbd.kbdContent {} (text props.label)

16+ , Kbd.kbdContent {} props.label

1817 ]

1918 ]

2019

test/HeroUI/Link/Stories.purs+1−2

@@ -6,13 +6,12 @@ import React.Basic (JSX)

66import HeroUI.Link as Link

77import Yoga.React (component)

88import Yoga.React.DOM.HTML (div)

9−import Yoga.React.DOM.Internal (text)

109import YogaStories.Story (story)

1110

1211mkLink :: { label :: String, href :: String } -> JSX

1312mkLink = component "LinkStory" \props -> React.do

1413 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg flex items-center gap-4" }

15− [ Link.link { href: props.href, target: "_blank" } (text props.label) ]

14+ [ Link.link { href: props.href, target: "_blank" } props.label ]

1615

1716basic :: JSX

1817basic = story "basic" mkLink { label: "Visit HeroUI", href: "https://heroui.com" }

test/HeroUI/ListBox/Stories.purs+3−4

@@ -7,16 +7,15 @@ import HeroUI.ListBox as ListBox

77import HeroUI.Types as T

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Story (story)

1211

1312mkListBox :: {} -> JSX

1413mkListBox = component "ListBoxStory" \(_ :: {}) -> React.do

1514 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg w-56" }

1615 [ ListBox.listBox { selectionMode: T.Multiple, defaultSelectedKeys: [ "a" ] }

17− [ ListBox.listBoxItem { id: "a" } (text "Apple")

18− , ListBox.listBoxItem { id: "b" } (text "Banana")

19− , ListBox.listBoxItem { id: "c" } (text "Cherry")

16+ [ ListBox.listBoxItem { id: "a" } "Apple"

17+ , ListBox.listBoxItem { id: "b" } "Banana"

18+ , ListBox.listBoxItem { id: "c" } "Cherry"

2019 ]

2120 ]

2221

test/HeroUI/Menu/Stories.purs+3−4

@@ -7,16 +7,15 @@ import HeroUI.Menu as Menu

77import HeroUI.Types as T

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Story (story)

1211

1312mkMenu :: {} -> JSX

1413mkMenu = component "MenuStory" \(_ :: {}) -> React.do

1514 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg w-56" }

1615 [ Menu.menu { selectionMode: T.Single, defaultSelectedKeys: [ "profile" ] }

17− [ Menu.menuItem { id: "profile" } (text "Profile")

18− , Menu.menuItem { id: "settings" } (text "Settings")

19− , Menu.menuItem { id: "logout" } (text "Log out")

16+ [ Menu.menuItem { id: "profile" } "Profile"

17+ , Menu.menuItem { id: "settings" } "Settings"

18+ , Menu.menuItem { id: "logout" } "Log out"

2019 ]

2120 ]

2221

test/HeroUI/Modal/Stories.purs+4−5

@@ -7,20 +7,19 @@ import HeroUI.Button as Btn

77import HeroUI.Modal as Modal

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Story (story)

1211

1312mkModal :: { title :: String } -> JSX

1413mkModal = component "ModalStory" \props -> React.do

1514 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg" }

1615 [ Modal.modal {}

17− [ Btn.button { variant: Btn.Primary } (text "Open modal")

16+ [ Btn.button { variant: Btn.Primary } "Open modal"

1817 , Modal.modalBackdrop { variant: Modal.Blur }

1918 [ Modal.modalContainer { placement: Modal.PlacementCenter, size: Modal.Md }

2019 [ Modal.modalDialog {}

21− [ Modal.modalHeader {} [ Modal.modalHeading {} (text props.title) ]

22− , Modal.modalBody {} (text "Modal body content.")

23− , Modal.modalFooter {} [ Modal.modalCloseTrigger {} (text "Close") ]

20+ [ Modal.modalHeader {} [ Modal.modalHeading {} props.title ]

21+ , Modal.modalBody {} "Modal body content."

22+ , Modal.modalFooter {} [ Modal.modalCloseTrigger {} "Close" ]

2423 ]

2524 ]

2625 ]

test/HeroUI/NumberField/Stories.purs+2−3

@@ -6,7 +6,6 @@ import React.Basic (JSX)

66import HeroUI.NumberField as NumberField

77import Yoga.React (component)

88import Yoga.React.DOM.HTML (div)

9−import Yoga.React.DOM.Internal (text)

109import YogaStories.Story (story)

1110

1211mkNumberField :: { defaultValue :: Number } -> JSX

@@ -14,9 +13,9 @@ mkNumberField = component "NumberFieldStory" \props -> React.do

1413 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg w-60" }

1514 [ NumberField.numberField { defaultValue: props.defaultValue, minValue: 0.0, maxValue: 100.0, step: 1.0 }

1615 [ NumberField.numberFieldGroup {}

17− [ NumberField.numberFieldDecrementButton {} (text "−")

16+ [ NumberField.numberFieldDecrementButton {} "−"

1817 , NumberField.numberFieldInput {} ([] :: Array JSX)

19− , NumberField.numberFieldIncrementButton {} (text "+")

18+ , NumberField.numberFieldIncrementButton {} "+"

2019 ]

2120 ]

2221 ]

test/HeroUI/Pagination/Stories.purs+5−6

@@ -7,7 +7,6 @@ import HeroUI.Pagination as Pagination

77import HeroUI.Types as T

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Story (story)

1211

1312mkPagination :: {} -> JSX

@@ -15,11 +14,11 @@ mkPagination = component "PaginationStory" \(_ :: {}) -> React.do

1514 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg" }

1615 [ Pagination.pagination { size: T.Md }

1716 [ Pagination.paginationContent {}

18− [ Pagination.paginationPrevious {} (text "‹")

19− , Pagination.paginationItem { isActive: true } (text "1")

20− , Pagination.paginationItem { isActive: false } (text "2")

21− , Pagination.paginationItem { isActive: false } (text "3")

22− , Pagination.paginationNext {} (text "›")

17+ [ Pagination.paginationPrevious {} "‹"

18+ , Pagination.paginationItem { isActive: true } "1"

19+ , Pagination.paginationItem { isActive: false } "2"

20+ , Pagination.paginationItem { isActive: false } "3"

21+ , Pagination.paginationNext {} "›"

2322 ]

2423 ]

2524 ]

test/HeroUI/Popover/Stories.purs+2−2

@@ -14,9 +14,9 @@ mkPopover :: {} -> JSX

1414mkPopover = component "PopoverStory" \(_ :: {}) -> React.do

1515 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg" }

1616 [ Popover.popover {}

17− [ Popover.popoverTrigger {} [ Btn.button { variant: Btn.Primary } (text "Open popover") ]

17+ [ Popover.popoverTrigger {} [ Btn.button { variant: Btn.Primary } "Open popover" ]

1818 , Popover.popoverContent { placement: "bottom", showArrow: true }

19− [ Popover.popoverHeading {} (text "Heading")

19+ [ Popover.popoverHeading {} "Heading"

2020 , text "Popover content."

2121 ]

2222 ]

test/HeroUI/Radio/Stories.purs+3−4

@@ -7,16 +7,15 @@ import HeroUI.Radio as Radio

77import HeroUI.Types as T

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Story (story)

1211

1312mkRadio :: { defaultValue :: String } -> JSX

1413mkRadio = component "RadioStory" \props -> React.do

1514 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg" }

1615 [ Radio.radioGroup { defaultValue: props.defaultValue, orientation: T.Vertical, variant: T.Primary }

17− [ Radio.radio { value: "a" } (text "Option A")

18− , Radio.radio { value: "b" } (text "Option B")

19− , Radio.radio { value: "c" } (text "Option C")

16+ [ Radio.radio { value: "a" } "Option A"

17+ , Radio.radio { value: "b" } "Option B"

18+ , Radio.radio { value: "c" } "Option C"

2019 ]

2120 ]

2221

test/HeroUI/Select/Stories.purs+3−4

@@ -7,7 +7,6 @@ import HeroUI.ListBox as ListBox

77import HeroUI.Select as Select

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Story (story)

1211

1312mkSelect :: { placeholder :: String } -> JSX

@@ -17,9 +16,9 @@ mkSelect = component "SelectStory" \props -> React.do

1716 [ Select.selectTrigger {} [ Select.selectValue { placeholder: props.placeholder } ([] :: Array JSX) ]

1817 , Select.selectPopover {}

1918 [ ListBox.listBox {}

20− [ ListBox.listBoxItem { id: "apple" } (text "Apple")

21− , ListBox.listBoxItem { id: "banana" } (text "Banana")

22− , ListBox.listBoxItem { id: "cherry" } (text "Cherry")

19+ [ ListBox.listBoxItem { id: "apple" } "Apple"

20+ , ListBox.listBoxItem { id: "banana" } "Banana"

21+ , ListBox.listBoxItem { id: "cherry" } "Cherry"

2322 ]

2423 ]

2524 ]

test/HeroUI/Switch/Stories.purs+1−2

@@ -7,13 +7,12 @@ import HeroUI.Switch as Switch

77import HeroUI.Types as T

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Story (story)

1211

1312mkSwitch :: { label :: String, defaultSelected :: Boolean } -> JSX

1413mkSwitch = component "SwitchStory" \props -> React.do

1514 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg" }

16− [ Switch.switch_ { defaultSelected: props.defaultSelected, size: T.Md } (text props.label) ]

15+ [ Switch.switch_ { defaultSelected: props.defaultSelected, size: T.Md } props.label ]

1716

1817basic :: JSX

1918basic = story "basic" mkSwitch { label: "Wi-Fi", defaultSelected: true }

test/HeroUI/Table/Stories.purs+4−5

@@ -7,14 +7,13 @@ import HeroUI.Table as Table

77import HeroUI.Types as T

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Story (story)

1211

1312row :: String -> String -> String -> JSX

1413row key name role =

1514 Table.tableRow { id: key }

16− [ Table.tableCell {} (text name)

17− , Table.tableCell {} (text role)

15+ [ Table.tableCell {} name

16+ , Table.tableCell {} role

1817 ]

1918

2019mkTable :: {} -> JSX

@@ -23,8 +22,8 @@ mkTable = component "TableStory" \(_ :: {}) -> React.do

2322 [ Table.table {}

2423 [ Table.tableContent { selectionMode: T.Multiple, "aria-label": "People" }

2524 [ Table.tableHeader {}

26− [ Table.tableColumn { id: "name", isRowHeader: true } (text "Name")

27− , Table.tableColumn { id: "role" } (text "Role")

25+ [ Table.tableColumn { id: "name", isRowHeader: true } "Name"

26+ , Table.tableColumn { id: "role" } "Role"

2827 ]

2928 , Table.tableBody {}

3029 [ row "1" "Alice" "Admin"

test/HeroUI/Tabs/Stories.purs+4−5

@@ -7,7 +7,6 @@ import React.Basic (JSX)

77import HeroUI.Tabs as Tabs

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Controls (enum)

1211import YogaStories.Story (story)

1312

@@ -25,11 +24,11 @@ mkTabs = component "TabsStory" \props -> React.do

2524 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg w-96" }

2625 [ Tabs.tabs { variant: toVariant props.variant, defaultSelectedKey: "photos" }

2726 [ Tabs.tabList {}

28− [ Tabs.tab { id: "photos" } (text "Photos")

29− , Tabs.tab { id: "music" } (text "Music")

27+ [ Tabs.tab { id: "photos" } "Photos"

28+ , Tabs.tab { id: "music" } "Music"

3029 ]

31− , Tabs.tabPanel { id: "photos" } (text "Photos panel")

32− , Tabs.tabPanel { id: "music" } (text "Music panel")

30+ , Tabs.tabPanel { id: "photos" } "Photos panel"

31+ , Tabs.tabPanel { id: "music" } "Music panel"

3332 ]

3433 ]

3534

test/HeroUI/Toast/Stories.purs+1−1

@@ -16,7 +16,7 @@ mkToast = component "ToastStory" \props -> React.do

1616 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg" }

1717 [ Toast.toastProvider { placement: "bottom-right" } ([] :: Array JSX)

1818 , Btn.button { variant: Btn.Primary, onPress: handler_ (void (Toast.toastSuccess (text props.message))) }

19− (text "Show toast")

19+ "Show toast"

2020 ]

2121

2222basic :: JSX

test/HeroUI/Tooltip/Stories.purs+2−3

@@ -7,15 +7,14 @@ import HeroUI.Button as Btn

77import HeroUI.Tooltip as Tooltip

88import Yoga.React (component)

99import Yoga.React.DOM.HTML (div)

10−import Yoga.React.DOM.Internal (text)

1110import YogaStories.Story (story)

1211

1312mkTooltip :: { tip :: String } -> JSX

1413mkTooltip = component "TooltipStory" \props -> React.do

1514 pure $ div { className: "dark bg-background text-foreground p-6 rounded-lg" }

1615 [ Tooltip.tooltip {}

17− [ Tooltip.tooltipTrigger {} [ Btn.button { variant: Btn.Primary } (text "Hover me") ]

18− , Tooltip.tooltipContent { placement: "top", showArrow: true } (text props.tip)

16+ [ Tooltip.tooltipTrigger {} [ Btn.button { variant: Btn.Primary } "Hover me" ]

17+ , Tooltip.tooltipContent { placement: "top", showArrow: true } props.tip

1918 ]

2019 ]

2120