diff --git a/apps/docs/content/components/collections/Listbox.mdx b/apps/docs/content/components/collections/Listbox.mdx index fe7d5668a..bcb312162 100644 --- a/apps/docs/content/components/collections/Listbox.mdx +++ b/apps/docs/content/components/collections/Listbox.mdx @@ -90,6 +90,7 @@ A list box can contain a count using a badge. ### Dynamic Lists Items and sections can be populated from a hierarchial data structure. +If a section has a header, the `Collection` component can be used to render the child items. diff --git a/apps/docs/content/components/icons/Icon.mdx b/apps/docs/content/components/icons/Icon.mdx index c5ea64da1..fee8b99d9 100644 --- a/apps/docs/content/components/icons/Icon.mdx +++ b/apps/docs/content/components/icons/Icon.mdx @@ -48,10 +48,10 @@ import { Icon, type CreatedIconProps } from "@hopper-ui/icons"; function CustomIcon(props: CreatedIconProps) { return ( + src16={CustomIcon16} + src24={CustomIcon24} + src32={CustomIcon32} + {...props} /> ) } ``` diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx index b7984e91f..629867b2e 100644 --- a/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx +++ b/packages/components/src/ComboBox/docs/ComboBoxOption/dynamicLists.tsx @@ -1,71 +1,40 @@ -import { Collection, ComboBox, ComboBoxItem, ComboBoxSection, Header, Inline } from "@hopper-ui/components"; +import { Collection, ComboBox, ComboBoxItem, ComboBoxSection, Header } from "@hopper-ui/components"; -interface ListItemProps { - id: number | string; - role: string; -} - -interface ListSectionProps { - role: string; - children: ListItemProps[]; -} +const OPTIONS_WITH_SECTIONS = [ + { + role: "Operations", children: [ + { id: 2, role: "Project Coordinator" }, + { id: 3, role: "QA Specialist" }, + { id: 4, role: "System Administrator" } + ] + }, + { + role: "Creative Department", children: [ + { id: 6, role: "Designer" }, + { id: 7, role: "Designer" }, + { id: 8, role: "UX Researcher" } + ] + } +]; export default function Example() { - const options = [ - { id: 2, role: "Designer" }, - { id: 3, role: "Developer" }, - { id: 4, role: "Manager" }, - { id: 6, role: "QA Engineer" }, - { id: 7, role: "Product Owner" }, - { id: 8, role: "Scrum Master" } - ] satisfies ListItemProps[]; - - const optionsWithSections = [ - { - role: "Operations", children: [ - { id: 2, role: "Project Coordinator" }, - { id: 3, role: "QA Specialist" }, - { id: 4, role: "System Administrator" } - ] - }, - { - role: "Creative Department", children: [ - { id: 6, role: "Designer" }, - { id: 7, role: "Designer" }, - { id: 8, role: "UX Researcher" } - ] - } - ] satisfies ListSectionProps[]; - return ( - - - {(item: ListItemProps) => { - const { id, role } = item; - - return {role}; - }} - - - {(section: ListSectionProps) => { - const { role: sectionName, children } = section; + + {section => { + const { role: sectionName, children } = section; - return ( - -
{sectionName}
- - {item => {item.role}} - - - ); - }} - - + return ( + +
{sectionName}
+ + {item => {item.role}} + + + ); + }} + ); } diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/footer.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/footer.tsx index 6ebc46825..bb86b67fa 100644 --- a/packages/components/src/ComboBox/docs/ComboBoxOption/footer.tsx +++ b/packages/components/src/ComboBox/docs/ComboBoxOption/footer.tsx @@ -5,7 +5,11 @@ export default function Example() { return ( Add} + footer={( + + )} > Developer Designer diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/loadOnScroll.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/loadOnScroll.tsx index 238f6460e..96509cb48 100644 --- a/packages/components/src/ComboBox/docs/ComboBoxOption/loadOnScroll.tsx +++ b/packages/components/src/ComboBox/docs/ComboBoxOption/loadOnScroll.tsx @@ -1,12 +1,11 @@ -import { ComboBox, ComboBoxItem } from "@hopper-ui/components"; -import { useAsyncList } from "react-stately"; +import { ComboBox, ComboBoxItem, useAsyncList } from "@hopper-ui/components"; interface Character { name: string; } export default function Example() { - const list = useAsyncList({ + const list = useAsyncList({ async load({ signal, cursor }) { const res = await fetch(cursor || "https://pokeapi.co/api/v2/pokemon", { signal @@ -23,15 +22,13 @@ export default function Example() { return ( } + items={list.items} maxHeight="core_1280" isLoading={list.isLoading} onLoadMore={list.loadMore} > - {(item: Character) => { - const { name } = item; - - return {name}; + {item => { + return {item.name}; }} ); diff --git a/packages/components/src/ComboBox/docs/ComboBoxOption/menuPlacement.tsx b/packages/components/src/ComboBox/docs/ComboBoxOption/menuPlacement.tsx index 0ef4b2d3e..04b1a2136 100644 --- a/packages/components/src/ComboBox/docs/ComboBoxOption/menuPlacement.tsx +++ b/packages/components/src/ComboBox/docs/ComboBoxOption/menuPlacement.tsx @@ -2,7 +2,8 @@ import { ComboBox, ComboBoxItem } from "@hopper-ui/components"; export default function Example() { return ( - diff --git a/packages/components/src/ComboBox/docs/controlled.tsx b/packages/components/src/ComboBox/docs/controlled.tsx index 9803aae29..afb63e596 100644 --- a/packages/components/src/ComboBox/docs/controlled.tsx +++ b/packages/components/src/ComboBox/docs/controlled.tsx @@ -4,13 +4,13 @@ import { useState } from "react"; export default function Example() { const [selectedKey, setSelectedKey] = useState(); - function handleSelectionChange(key: Key | null) { + const handleSelectionChange = (key: Key | null) => { if (selectedKey === key) { setSelectedKey(null); } else { setSelectedKey(key); } - } + }; return ( diff --git a/packages/components/src/ComboBox/docs/customFiltering.tsx b/packages/components/src/ComboBox/docs/customFiltering.tsx index 5faf4d10f..0e66913d5 100644 --- a/packages/components/src/ComboBox/docs/customFiltering.tsx +++ b/packages/components/src/ComboBox/docs/customFiltering.tsx @@ -1,32 +1,26 @@ -import { ComboBox, ComboBoxItem } from "@hopper-ui/components"; +import { ComboBox, ComboBoxItem, useFilter } from "@hopper-ui/components"; import { useMemo, useState } from "react"; -import { useFilter } from "react-aria"; -interface Role { - id: number; - name: string; -} +const ROLE_OPTIONS = [ + { id: 1, name: "Designer" }, + { id: 2, name: "Developer" }, + { id: 3, name: "Manager" }, + { id: 4, name: "QA Engineer" }, + { id: 5, name: "Product Owner" }, + { id: 6, name: "Scrum Master" }, + { id: 7, name: "UX Researcher" }, + { id: 8, name: "Business Analyst" }, + { id: 9, name: "DevOps Engineer" }, + { id: 10, name: "Data Scientist" } +]; export default function Example() { - const options = useMemo(() => [ - { id: 1, name: "Designer" }, - { id: 2, name: "Developer" }, - { id: 3, name: "Manager" }, - { id: 4, name: "QA Engineer" }, - { id: 5, name: "Product Owner" }, - { id: 6, name: "Scrum Master" }, - { id: 7, name: "UX Researcher" }, - { id: 8, name: "Business Analyst" }, - { id: 9, name: "DevOps Engineer" }, - { id: 10, name: "Data Scientist" } - ] satisfies Role[], []); - const { startsWith } = useFilter({ sensitivity: "base" }); const [filterValue, setFilterValue] = useState(""); - const filteredItems = useMemo( - () => options.filter(item => startsWith(item.name, filterValue)), - [options, startsWith, filterValue] - ); + + const filteredItems = useMemo(() => { + return ROLE_OPTIONS.filter(item => startsWith(item.name, filterValue)); + }, [startsWith, filterValue]); return ( - {(item: Role) => {item.name}} + {item => {item.name}} ); } diff --git a/packages/components/src/Disclosure/docs/controlled.tsx b/packages/components/src/Disclosure/docs/controlled.tsx index a096dd58d..7abe37cda 100644 --- a/packages/components/src/Disclosure/docs/controlled.tsx +++ b/packages/components/src/Disclosure/docs/controlled.tsx @@ -1,23 +1,22 @@ -import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; +import { Disclosure, DisclosureHeader, DisclosurePanel } from "@hopper-ui/components"; import { useState } from "react"; export default function Example() { const [isExpanded, setIsExpanded] = useState(true); return ( -
- - - This disclosure is {isExpanded ? "expanded" : "collapsed"} - - - Tackle the challenges of hybrid, remote and distributed work, no matter what. - The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. - - -
+ + + This disclosure is {isExpanded ? "expanded" : "collapsed"} + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + ); -} \ No newline at end of file +} diff --git a/packages/components/src/Disclosure/docs/customHeader.tsx b/packages/components/src/Disclosure/docs/customHeader.tsx index bb6518db7..493ceacdb 100644 --- a/packages/components/src/Disclosure/docs/customHeader.tsx +++ b/packages/components/src/Disclosure/docs/customHeader.tsx @@ -1,22 +1,18 @@ -import { Button, Disclosure, DisclosurePanel, Div, Text } from "@hopper-ui/components"; +import { Button, Disclosure, DisclosurePanel, Text } from "@hopper-ui/components"; import { ToggleArrow } from "../../ToggleArrow/index.ts"; export default function Example() { return ( -
- - - - Tackle the challenges of hybrid, remote and distributed work, no matter what. - The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. - - -
+ + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + ); -} \ No newline at end of file +} diff --git a/packages/components/src/Disclosure/docs/description.tsx b/packages/components/src/Disclosure/docs/description.tsx index 4ae399822..fc1dcca80 100644 --- a/packages/components/src/Disclosure/docs/description.tsx +++ b/packages/components/src/Disclosure/docs/description.tsx @@ -1,20 +1,18 @@ -import { Disclosure, DisclosureHeader, DisclosurePanel, Div, Inline, Text } from "@hopper-ui/components"; +import { Disclosure, DisclosureHeader, DisclosurePanel, Inline, Text } from "@hopper-ui/components"; export default function Example() { return ( -
- - - - Workleap Officevibe - Engagement and Feedback - - - - Help employees speak up and make sure they feel heard. - Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges. - - -
+ + + + Workleap Officevibe + Engagement and Feedback + + + + Help employees speak up and make sure they feel heard. + Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges. + + ); -} \ No newline at end of file +} diff --git a/packages/components/src/Disclosure/docs/disabled.tsx b/packages/components/src/Disclosure/docs/disabled.tsx index 0e2827907..697df8595 100644 --- a/packages/components/src/Disclosure/docs/disabled.tsx +++ b/packages/components/src/Disclosure/docs/disabled.tsx @@ -1,22 +1,20 @@ -import { Disclosure, DisclosureHeader, DisclosurePanel, Div, Inline, Text } from "@hopper-ui/components"; +import { Disclosure, DisclosureHeader, DisclosurePanel, Inline, Text } from "@hopper-ui/components"; import { SparklesIcon } from "@hopper-ui/icons"; export default function Example() { return ( -
- - - - - Workleap Officevibe - Engagement and Feedback - - - - Help employees speak up and make sure they feel heard. - Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges. - - -
+ + + + + Workleap Officevibe + Engagement and Feedback + + + + Help employees speak up and make sure they feel heard. + Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges. + + ); -} \ No newline at end of file +} diff --git a/packages/components/src/Disclosure/docs/icon.tsx b/packages/components/src/Disclosure/docs/icon.tsx index 5c50a1770..3f9be485e 100644 --- a/packages/components/src/Disclosure/docs/icon.tsx +++ b/packages/components/src/Disclosure/docs/icon.tsx @@ -1,19 +1,17 @@ -import { Disclosure, DisclosureHeader, DisclosurePanel, Div, Text } from "@hopper-ui/components"; +import { Disclosure, DisclosureHeader, DisclosurePanel, Text } from "@hopper-ui/components"; import { SparklesIcon } from "@hopper-ui/icons"; export default function Example() { return ( -
- - - - Help your people work better - - - Tackle the challenges of hybrid, remote and distributed work, no matter what. - The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. - - -
+ + + + Help your people work better + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + ); -} \ No newline at end of file +} diff --git a/packages/components/src/Disclosure/docs/preview.tsx b/packages/components/src/Disclosure/docs/preview.tsx index 5711f791b..8ef311fc9 100644 --- a/packages/components/src/Disclosure/docs/preview.tsx +++ b/packages/components/src/Disclosure/docs/preview.tsx @@ -1,17 +1,15 @@ -import { Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components"; +import { Disclosure, DisclosureHeader, DisclosurePanel } from "@hopper-ui/components"; export default function Example() { return ( -
- - - Help your people work better - - - Tackle the challenges of hybrid, remote and distributed work, no matter what. - The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. - - -
+ + + Help your people work better + + + Tackle the challenges of hybrid, remote and distributed work, no matter what. + The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. + + ); -} \ No newline at end of file +} diff --git a/packages/components/src/Disclosure/docs/variants.tsx b/packages/components/src/Disclosure/docs/variants.tsx index 0bdde29c6..973bc2dda 100644 --- a/packages/components/src/Disclosure/docs/variants.tsx +++ b/packages/components/src/Disclosure/docs/variants.tsx @@ -2,13 +2,13 @@ import { Disclosure, DisclosureHeader, DisclosurePanel, Stack } from "@hopper-ui export default function Example() { return ( - + Help your people work better - Tackle the challenges of hybrid, remote and distributed work, no matter what. + Tackle the challenges of hybrid, remote and distributed work, no matter what. The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. @@ -17,10 +17,10 @@ export default function Example() { Help your people work better - Tackle the challenges of hybrid, remote and distributed work, no matter what. + Tackle the challenges of hybrid, remote and distributed work, no matter what. The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges. ); -} \ No newline at end of file +} diff --git a/packages/components/src/Form/docs/ariaValidation.tsx b/packages/components/src/Form/docs/ariaValidation.tsx index 0e7ced461..f3d3bb31d 100644 --- a/packages/components/src/Form/docs/ariaValidation.tsx +++ b/packages/components/src/Form/docs/ariaValidation.tsx @@ -1,18 +1,16 @@ -import { Button, Div, Form, TextField } from "@hopper-ui/components"; +import { Button, Form, TextField } from "@hopper-ui/components"; export default function Example() { return ( -
-
- value === "admin" ? "Nice try." : null} - label="Username" - /> - - -
+
+ value === "admin" ? "Nice try." : null} + label="Username" + /> + + ); } diff --git a/packages/components/src/Form/docs/disabled.tsx b/packages/components/src/Form/docs/disabled.tsx index d07e0c05e..5e5f52a0c 100644 --- a/packages/components/src/Form/docs/disabled.tsx +++ b/packages/components/src/Form/docs/disabled.tsx @@ -1,12 +1,10 @@ -import { Button, Div, Form, TextField } from "@hopper-ui/components"; +import { Button, Form, TextField } from "@hopper-ui/components"; export default function Example() { return ( -
-
- - - -
+
+ + + ); } diff --git a/packages/components/src/Form/docs/fluid.tsx b/packages/components/src/Form/docs/fluid.tsx index b141b800b..378f49005 100644 --- a/packages/components/src/Form/docs/fluid.tsx +++ b/packages/components/src/Form/docs/fluid.tsx @@ -1,12 +1,10 @@ -import { Button, Div, Form, TextField } from "@hopper-ui/components"; +import { Button, Form, TextField } from "@hopper-ui/components"; export default function Example() { return ( -
-
- - - -
+
+ + + ); } diff --git a/packages/components/src/Form/docs/nativeValidation.tsx b/packages/components/src/Form/docs/nativeValidation.tsx index 8883963c2..ed6a8f85e 100644 --- a/packages/components/src/Form/docs/nativeValidation.tsx +++ b/packages/components/src/Form/docs/nativeValidation.tsx @@ -1,20 +1,18 @@ -import { Button, ButtonGroup, Div, Form, TextField } from "@hopper-ui/components"; +import { Button, ButtonGroup, Form, TextField } from "@hopper-ui/components"; export default function Example() { return ( -
-
- - - - - - -
+
+ + + + + + ); } diff --git a/packages/components/src/Form/docs/preview.tsx b/packages/components/src/Form/docs/preview.tsx index 2a0d40e8d..b76a74b5a 100644 --- a/packages/components/src/Form/docs/preview.tsx +++ b/packages/components/src/Form/docs/preview.tsx @@ -1,12 +1,10 @@ -import { Button, Div, Form, TextField } from "@hopper-ui/components"; +import { Button, Form, TextField } from "@hopper-ui/components"; export default function Example() { return ( -
-
- - - -
+
+ + + ); } diff --git a/packages/components/src/Form/docs/validation.tsx b/packages/components/src/Form/docs/validation.tsx index 15455ebb4..053473b6a 100644 --- a/packages/components/src/Form/docs/validation.tsx +++ b/packages/components/src/Form/docs/validation.tsx @@ -1,11 +1,9 @@ -import { Div, Form, TextField } from "@hopper-ui/components"; +import { Form, TextField } from "@hopper-ui/components"; export default function Example() { return ( -
-
- - -
+
+ + ); } diff --git a/packages/components/src/Link/docs/external.tsx b/packages/components/src/Link/docs/external.tsx index c8f6f017d..552c5cd2c 100644 --- a/packages/components/src/Link/docs/external.tsx +++ b/packages/components/src/Link/docs/external.tsx @@ -3,9 +3,9 @@ import { NewTabIcon } from "@hopper-ui/icons"; export default function Example() { return ( - + Learn more - + ); } diff --git a/packages/components/src/ListBox/docs/ListBox.stories.tsx b/packages/components/src/ListBox/docs/ListBox.stories.tsx index 45943af8d..0400b7502 100644 --- a/packages/components/src/ListBox/docs/ListBox.stories.tsx +++ b/packages/components/src/ListBox/docs/ListBox.stories.tsx @@ -1,8 +1,7 @@ -import { Collection, type Selection } from "@hopper-ui/components"; +import { Collection, type Selection, useAsyncList } from "@hopper-ui/components"; import { SparklesIcon } from "@hopper-ui/icons"; import type { Meta, StoryObj } from "@storybook/react"; import { useState } from "react"; -import { useAsyncList } from "react-stately"; import { Badge } from "../../Badge/index.ts"; import { Header } from "../../Header/index.ts"; diff --git a/packages/components/src/ListBox/docs/dynamicLists.tsx b/packages/components/src/ListBox/docs/dynamicLists.tsx index e60196727..416272e25 100644 --- a/packages/components/src/ListBox/docs/dynamicLists.tsx +++ b/packages/components/src/ListBox/docs/dynamicLists.tsx @@ -1,4 +1,4 @@ -import { Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components"; +import { Collection, Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components"; const OPTIONS_WITH_SECTIONS = [ { @@ -28,9 +28,9 @@ export default function Example() { return (
{section.name}
- {section.children.map(item => ( - {item.name} - ))} + + {item => {item.name}} + ); }} diff --git a/packages/components/src/Select/docs/controlled.tsx b/packages/components/src/Select/docs/controlled.tsx index 60c9be95e..0ba969325 100644 --- a/packages/components/src/Select/docs/controlled.tsx +++ b/packages/components/src/Select/docs/controlled.tsx @@ -4,13 +4,13 @@ import { useState } from "react"; export default function Example() { const [selectedKey, setSelectedKey] = useState(); - function handleSelectionChange(key: Key) { + const handleSelectionChange = (key: Key) => { if (selectedKey === key) { setSelectedKey(null); } else { setSelectedKey(key); } - } + }; return ( - {(item: ListItemProps) => { - const { id, role } = item; - - return {role}; - }} - - + {section => { + const { role: sectionName, children } = section; - return ( - -
{sectionName}
- - {item => {item.role}} - - - ); - }} - - + return ( + +
{sectionName}
+ + {item => {item.role}} + + + ); + }} + ); } diff --git a/packages/components/src/Select/docs/selectDropdown/loadOnScroll.tsx b/packages/components/src/Select/docs/selectDropdown/loadOnScroll.tsx index 7060d4036..812d963d6 100644 --- a/packages/components/src/Select/docs/selectDropdown/loadOnScroll.tsx +++ b/packages/components/src/Select/docs/selectDropdown/loadOnScroll.tsx @@ -1,12 +1,11 @@ -import { Select, SelectItem } from "@hopper-ui/components"; -import { useAsyncList } from "react-stately"; +import { Select, SelectItem, useAsyncList } from "@hopper-ui/components"; interface Character { name: string; } export default function Example() { - const list = useAsyncList({ + const list = useAsyncList({ async load({ signal, cursor }) { const res = await fetch(cursor || "https://pokeapi.co/api/v2/pokemon", { signal @@ -23,14 +22,14 @@ export default function Example() { return (