Skip to content

Commit

Permalink
refactor: chips with react-aria
Browse files Browse the repository at this point in the history
  • Loading branch information
@lerte
lerte committed Nov 1, 2024
1 parent 4443865 commit 35de615
Show file tree
Hide file tree
Showing 13 changed files with 416 additions and 1,341 deletions.
179 changes: 58 additions & 121 deletions apps/docs/src/usages/chips.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,126 +1,63 @@
import { Chip, Icon } from 'actify'
import { ChipGroup, ChipItem, useListData, type Selection } from 'actify'

export default () => {
return (
<>
<p>Assist chips</p>
<div className="flex gap-2">
<Chip>
<Chip.Item label="Assit chip" />
<Chip.Item label="Assit chip with icon">
<Icon>speaker</Icon>
</Chip.Item>
<Chip.Item label="Assit link chip" href="https://actifyjs.com">
<Icon>
<svg
fill="#fff"
viewBox="0 0 33.455 36.987"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeWidth="2.5"
className="stroke-primary"
d="M55.047-328.513l-5.238-13.822-14.323,5.317-3.243,8.5H29L42.821-364.5h4.359L61-328.513Zm-6.067-15.969.829,2.147-.829-2.147-5.308-13.745-7.123,18.445"
transform="translate(-28.272 365)"
/>
</svg>
</Icon>
</Chip.Item>
<Chip.Item label="Disabled assit chip (focusable)" disabled />
</Chip>
</div>

<p>Filter chips</p>
<div className="flex gap-2">
<Chip defaultSelected={[1]} onChange={(value) => console.log(value)}>
<Chip.Item type="filter" label="Filter chip" />
<Chip.Item type="filter" label="Filter chip with icon">
<Icon>speaker</Icon>
</Chip.Item>
<Chip.Item type="filter" removable label="Removable filter chip" />
<Chip.Item
type="filter"
disabled
removable
label="Disabled filter chip (focusable)"
/>
</Chip>
</div>
import React from 'react'

<p>Input chips</p>
<div className="flex gap-2 flex-wrap">
<Chip>
<Chip.Item type="input" label="Input chip" />
<Chip.Item type="input" label="Input chip with icon">
<Icon>speaker</Icon>
</Chip.Item>
<Chip.Item type="input" label="Input Chip with avatar">
<Icon className="me-[--icon-label-space]">
<img
className="rounded-full"
src="https://1.gravatar.com/avatar/9b1dcd4c4a3b64fbb22b83307d311c151186bdf3df7ace58d1d716c7c0bfe4fe?size=256"
/>
</Icon>
</Chip.Item>
<Chip.Item
type="input"
label="Input link chip"
href="https://actifyjs.com"
>
<Icon>
<svg
fill="#fff"
viewBox="0 0 33.455 36.987"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeWidth="2.5"
className="stroke-primary"
d="M55.047-328.513l-5.238-13.822-14.323,5.317-3.243,8.5H29L42.821-364.5h4.359L61-328.513Zm-6.067-15.969.829,2.147-.829-2.147-5.308-13.745-7.123,18.445"
transform="translate(-28.272 365)"
/>
</svg>
</Icon>
</Chip.Item>
<Chip.Item removeOnly type="input" label="Remove-only input chip" />
<Chip.Item
type="input"
disabled
label="Disabled input chip (focusable)"
/>
</Chip>
</div>
export default () => {
const [selected, setSelected] = React.useState<Selection>(new Set(['Actify']))
const list = useListData({
initialItems: [
{ id: 1, name: 'Actify' },
{ id: 2, name: 'Ngroker' },
{ id: 3, name: 'Taildoor' },
{ id: 4, name: 'Hugola' }
]
})

<p>Suggestion chips</p>
<div className="flex gap-2">
<Chip>
<Chip.Item type="suggestion" label="Suggestion chip" />
<Chip.Item type="suggestion" label="Suggestion chip with icon">
<Icon>speaker</Icon>
</Chip.Item>
<Chip.Item
type="suggestion"
label="Suggestion link chip"
href="https://actifyjs.com"
>
<Icon>
<svg
fill="#fff"
viewBox="0 0 33.455 36.987"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeWidth="2.5"
className="stroke-primary"
d="M55.047-328.513l-5.238-13.822-14.323,5.317-3.243,8.5H29L42.821-364.5h4.359L61-328.513Zm-6.067-15.969.829,2.147-.829-2.147-5.308-13.745-7.123,18.445"
transform="translate(-28.272 365)"
/>
</svg>
</Icon>
</Chip.Item>
<Chip.Item label="Disabled suggestion chip (focusable)" disabled />
</Chip>
</div>
</>
return (
<div className="flex flex-col gap-4">
<ChipGroup label="Project">
<ChipItem>Actify</ChipItem>
<ChipItem>Ngroker</ChipItem>
<ChipItem>Taildoor</ChipItem>
<ChipItem>Hugola</ChipItem>
</ChipGroup>
<ChipGroup
label="Categories with remove"
items={list.items}
onRemove={(keys) => list.remove(...keys)}
>
{(item) => <ChipItem>{item.name}</ChipItem>}
</ChipGroup>
<ChipGroup
label="selection example"
selectionMode="multiple"
selectedKeys={selected}
onSelectionChange={setSelected}
>
<ChipItem key="laundry">Laundry</ChipItem>
<ChipItem key="fitness">Fitness center</ChipItem>
<ChipItem key="parking">Parking</ChipItem>
<ChipItem key="pool">Swimming pool</ChipItem>
<ChipItem key="breakfast">Breakfast</ChipItem>
</ChipGroup>
<p>
Current selection (controlled):{' '}
{selected === 'all' ? 'all' : [...selected].join(', ')}
</p>
<ChipGroup label="Links">
<ChipItem href="https://actifyjs.com/" target="_blank">
Actifyjs
</ChipItem>
<ChipItem href="https://ngroker.com/" target="_blank">
Ngroker
</ChipItem>
<ChipItem href="https://taildoor.com/" target="_blank">
Taildoor
</ChipItem>
<ChipItem href="https://hugola.app/" target="_blank">
Hugola
</ChipItem>
</ChipGroup>
</div>
)
}
Loading

0 comments on commit 35de615

Please sign in to comment.