Files
headlessui/packages/playground-react/utils/resolve-all-examples.ts
T
Robin Malfait ea26870480 Add Combobox component (#1047)
* start of combobox

* start with a copy of the Listbox

* WIP

* Add Vue Combobox

* Update Vue version of combobox

* Update tests

* Fix typescript errors in combobox test

* Fix input label

The spec says that the combobox itself is labelled directly by the associated label. The button can however be labelled by the label or itself.

* Add active descendant to combobox/input

* Add listbox role to comobox options

Right now the option list *is* just a listbox. If we were to allow other types in the future this will need to be changable

* Update tests

* move React playground to dedicated package

* add react playground script to root

* ensure we only open/close the combobox when necessary

* ensure export order is correct

* remove leftover pages directory from React package

* Only add aria controls when combobox is open

* add missing next commands

* make typescript happy

* build @headlessui/react before building playground-react

* add empty public folder

This makes vercel happy

* wip

* Add todo

* Update tests

Still more updates to do but some are blocked on implementation

* change default combobox example slightly

* ensure that we sync the input with new state

When the <Combobox value={...} /> changes, then the input should change
as well.

* only sync the value with the input in a single spot

* WIP: object value to string

* WIP

* WIP

* WIP groups

* Add static search filtering to combobox

* Move mouse leave event to combobox

* Fix use in fragments

* Update

* WIP

* make all tests pass for the combobox in React

* remove unnecessary playground item

* remove listbox wip

* only fire change event on inputs

Potentially we also have to do this for all kinds of form inputs. But
this will do for now.

* disable combobox vue tests

* Fix vue typescript errors

* Vue tests WIP

* improve combobox playgrounds a tiny bit

* ensure to lookup the correct value

* make sure that we are using a div instead of a Fragment

* expose `activeItem`

This will be similar to `yourData[activeIndex]`, but in this case the
active option's data. Can probably rename this if necessary!

* Update comments

* Port react tests to Vue

* Vue tests WIP

* WIP

* Rename activeItem to activeOption

* Move display value to input

* Update playgrounds

* Remove static filtering

* Add tests for display value

* WIP Vue Tests

* WIP

* unfocus suite

* Cleanup react accessibility assertions code

* Vue WIP

* Cleanup errors in react interactions test utils

* Update vue implementation

closer :D

* Fix searching

* Update

* Add display value stubs

* Update tests

* move `<Combobox onSearch={} />` to `<Combobox.Input onChange={} />`

* use `useLatestValue` hook

* make `onChange` explicitly required

* remove unused variables

* move `<Combobox @search="" />` to `<ComboboxInput @change="" />`

* use correct event

* use `let` for consistency

* remove unnecessary hidden check

* implement displayValue for Vue

* update playground to reflect changes

* make sure that the activeOptionIndex stays correct

* update changelog

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2022-01-27 16:42:47 +01:00

51 lines
1.1 KiB
TypeScript

import fs from 'fs'
import path from 'path'
export type ExamplesType = {
name: string
path: string
children?: ExamplesType[]
}
export async function resolveAllExamples(...paths: string[]) {
let base = path.resolve(process.cwd(), ...paths)
if (!fs.existsSync(base)) {
return false
}
let files = await fs.promises.readdir(base, { withFileTypes: true })
let items: ExamplesType[] = []
for (let file of files) {
if (file.name === '.DS_Store') {
continue
}
// Skip reserved filenames from Next. E.g.: _app.tsx, _error.tsx
if (file.name.startsWith('_')) {
continue
}
let bucket: ExamplesType = {
name: file.name.replace(/-/g, ' ').replace(/\.tsx?/g, ''),
path: [...paths, file.name]
.join('/')
.replace(/^pages/, '')
.replace(/\.tsx?/g, '')
.replace(/\/+/g, '/'),
}
if (file.isDirectory()) {
let children = await resolveAllExamples(...paths, file.name)
if (children) {
bucket.children = children
}
}
items.push(bucket)
}
return items
}