diff --git a/docs/components/Accordion.md b/docs/components/Accordion.md new file mode 100644 index 0000000..2d6c258 --- /dev/null +++ b/docs/components/Accordion.md @@ -0,0 +1,25 @@ +--- +module: "@wq/material" +purpose: lists +--- + +# Accordion + +[@wq/material]'s `` [component][index] implements expansion panels / accordions. `` supports `summary`, `children`, `open` and `onOpen` props, converting as needed for web and native libaries. `` is analogous to `
` in HTML. + +> This component was named `ExpansionPanel` in earlier versions of wq. + +## Source + +While [@wq/react] defines a [placeholder implementation][react-src], [@wq/material]'s versions are more useful as reference: + + * [Accordion.js (@wq/material-web)][material-web-src] + * [Accordion.js (@wq/material-native)][material-native-src] + + +[index]: ./index.md +[@wq/react]: ../@wq/react.md +[@wq/material]: ../@wq/material.md +[react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/Accordion.js +[material-web-src]: https://github.com/wq/wq.app/blob/main/packages/material-web/src/components/Accordion.js +[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material-native/src/components/Accordion.js diff --git a/docs/components/App.md b/docs/components/App.md index 22fe64b..8d40754 100644 --- a/docs/components/App.md +++ b/docs/components/App.md @@ -13,11 +13,11 @@ The source code for `` is available here: * [App.js (@wq/react)][react-src] -This base implementation is extended by (not replaced) by both [@wq/react] and [@wq/material], to integrate with [@material-ui/core], [react-native], and [react-native-paper]: +This base implementation is extended by (not replaced) by both [@wq/react] and [@wq/material], to integrate with [@mui/material], [react-native], and [react-native-paper]: - * [App.js (@wq/material)][material-src] + * [App.js (@wq/material-web)][material-web-src] * [App.native.js (@wq/react)][react-native-src] - * [App.native.js (@wq/material)][material-native-src] + * [App.js (@wq/material-native)][material-native-src] [component]: ./index.md [Header]: ./Header.md @@ -29,11 +29,11 @@ This base implementation is extended by (not replaced) by both [@wq/react] and [ [@wq/react]: ../@wq/react.md [@wq/material]: ../@wq/material.md -[@material-ui/core]: https://material-ui.com/ +[@mui/material]: https://mui.com/material-ui [react-native]: https://reactnative.dev/ [react-native-paper]: https://callstack.github.io/react-native-paper/ [react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/App.js -[material-src]: https://github.com/wq/wq.app/blob/main/packages/material/src/App.js +[material-web-src]: https://github.com/wq/wq.app/blob/main/packages/material-web/src/App.js [react-native-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/App.native.js -[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material/src/App.native.js +[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material-native/src/App.js diff --git a/docs/components/AutoBasemap.md b/docs/components/AutoBasemap.md index ca10f6c..2377825 100644 --- a/docs/components/AutoBasemap.md +++ b/docs/components/AutoBasemap.md @@ -5,7 +5,7 @@ purpose: maps # AutoBasemap -@wq/map's `` [component] selects the appropriate [basemap] component based on the [global basemaps definition][@wq/map]. +[@wq/map]'s `` [component][index] selects the appropriate [basemap] component based on the [global basemaps definition][@wq/map]. ## Source @@ -13,10 +13,9 @@ The source code for `` is available here: * [AutoBasemap.js (@wq/map)][map-src] -The [@wq/map] implementation automatically determines which actual basemap to render, so there is no alternate [@wq/map-gl] or native version. +This component should not generally need to be overridden directly. -[component]: ./index.md -[basemap]: ../basemaps/index.md +[index]: ./index.md [@wq/map]: ../@wq/map.md -[@wq/map-gl]: ../@wq/map-gl.md +[basemap]: ../basemaps/index.md [map-src]: https://github.com/wq/wq.app/blob/main/packages/map/src/components/AutoBasemap.js diff --git a/docs/components/AutoForm.md b/docs/components/AutoForm.md index 09e9d0c..6eeca90 100644 --- a/docs/components/AutoForm.md +++ b/docs/components/AutoForm.md @@ -5,7 +5,7 @@ purpose: forms # AutoForm -@wq/react's `` [component] generates a [`
`][Form] containing [``][AutoInput]s for each field in the [form configuration][config] corresponding to the current [route][@wq/router]. `` is primarily used with the [DefaultEdit] view, and should almost never be overridden directly. Instead, it usually makes more sense to configure custom [input types][custom-input], [fieldsets], and or [nested repeat groups][nested-forms] for the fields you want to customize. +[@wq/react]'s `` [component][index] generates a [``][Form] containing [``][AutoInput]s for each field in the [form configuration][config] corresponding to the current [route][@wq/router]. `` is primarily used with the [DefaultEdit] view, and should almost never be overridden directly. Instead, it usually makes more sense to configure custom [input types][custom-input], [fieldsets], and or [nested repeat groups][nested-forms] for the fields you want to customize. ## Source @@ -13,20 +13,16 @@ The source code for `` is available here: * [AutoForm.js (@wq/react)][react-src] -The [@wq/react] implementation leverages [`useComponents()`][useComponents] and [``][AutoInput] to facilitate customization, so there is no alternate [@wq/material] or native version. +This component should not generally need to be overridden directly. -[component]: ./index.md -[Form]: ./Form.md -[AutoInput]: ./AutoInput.md -[config]: ../config.md +[index]: ./index.md +[@wq/react]: ../@wq/react.md [@wq/router]: ../@wq/router.md +[AutoInput]: ./AutoInput.md [DefaultEdit]: ../views/DefaultEdit.md -[@wq/react]: ../@wq/react.md -[@wq/material]: ../@wq/material.md -[useComponents]: ../hooks/useComponents.md - +[Form]: ./Form.md +[config]: ../config.md [custom-input]: ../guides/define-a-custom-input-type.md -[fieldsets]: ../guides/organize-inputs-into-fieldsets.md +[fieldsets]: ../guides/organize-inputs-into-fieldsets.md [nested-forms]: ../guides/implement-repeating-nested-forms.md - [react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/AutoForm.js diff --git a/docs/components/AutoInput.md b/docs/components/AutoInput.md index 1d8aee7..18ff570 100644 --- a/docs/components/AutoInput.md +++ b/docs/components/AutoInput.md @@ -5,7 +5,7 @@ purpose: forms # AutoInput -@wq/react's `` [component] selects the appropriate [input component][inputs] based on the provided props, which are passed from the [form configuration][config]). `` is primarily used with [``][AutoForm], and should never be overridden. Instead, you can configure custom [input types][custom-input], [fieldsets], and or [nested repeat groups][nested-forms] for the fields you want to customize. +[@wq/react]'s `` [component][index] selects the appropriate [input component][inputs] based on the provided props, which are passed from the [form configuration][config]). `` is primarily used with [``][AutoForm], and should never be overridden. Instead, you can configure custom [input types][custom-input], [fieldsets], and or [nested repeat groups][nested-forms] for the fields you want to customize. ## Source @@ -13,18 +13,14 @@ The source code for `` is available here: * [AutoInput.js (@wq/react)][react-src] -The [@wq/react] implementation automatically determines which actual input to render, so there is no alternate [@wq/material] or native version. +This component should not generally need to be overridden directly. -[component]: ./index.md -[inputs]: ../inputs/index.md -[Form]: ./Form.md +[index]: ./index.md +[@wq/react]: ../@wq/react.md [AutoForm]: ./AutoForm.md [config]: ../config.md -[@wq/react]: ../@wq/react.md -[@wq/material]: ../@wq/material.md - [custom-input]: ../guides/define-a-custom-input-type.md -[fieldsets]: ../guides/organize-inputs-into-fieldsets.md +[fieldsets]: ../guides/organize-inputs-into-fieldsets.md +[inputs]: ../inputs/index.md [nested-forms]: ../guides/implement-repeating-nested-forms.md - [react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/AutoInput.js diff --git a/docs/components/AutoMap.md b/docs/components/AutoMap.md index 99f5c1a..626d21c 100644 --- a/docs/components/AutoMap.md +++ b/docs/components/AutoMap.md @@ -5,7 +5,7 @@ purpose: maps # AutoMap -@wq/map's `` [component] reads the [map configuration][@wq/map] corresponding to the current route and renders a [``][Map] with the appropriate inputs and controls +[@wq/map]'s `` [component][index] reads the [map configuration][@wq/map] corresponding to the current route and renders a [``][Map] with the appropriate inputs and controls The typical component hierarchy generated by `` is as follows: @@ -35,13 +35,9 @@ The source code for `` is available here: * [AutoMap.js (@wq/map)][map-src] -The [@wq/map] implementation leverages [`useComponents()`][useComponents] and [`useOverlayComponents()`][useOverlayComponents] to facilitate customization, so there is no alternate [@wq/map-gl] or native version. +This component should not generally need to be overridden directly. -[component]: ./index.md -[Map]: ./Map.md +[index]: ./index.md [@wq/map]: ../@wq/map.md -[@wq/map-gl]: ../@wq/map-gl.md -[useComponents]: ../hooks/useComponents.md -[useOverlayComponents]: ../hooks/useOverlayComponents.md - +[Map]: ./Map.md [map-src]: https://github.com/wq/wq.app/blob/main/packages/map/src/components/AutoMap.js diff --git a/docs/components/AutoOverlay.md b/docs/components/AutoOverlay.md index e0f82fa..9141565 100644 --- a/docs/components/AutoOverlay.md +++ b/docs/components/AutoOverlay.md @@ -5,7 +5,7 @@ purpose: maps # AutoOverlay -@wq/map's `` [component] selects the appropriate [overlay] component based on the [layer configuration][@wq/map]. +[@wq/map]'s `` [component][index] selects the appropriate [overlay] component based on the [layer configuration][@wq/map]. ## Source @@ -13,10 +13,9 @@ The source code for `` is available here: * [AutoOverlay.js (@wq/map)][map-src] -The [@wq/map] implementation automatically determines which actual overlay to render, so there is no alternate [@wq/map-gl] or native version. +This component should not generally need to be overridden directly. -[component]: ./index.md -[overlay]: ../overlays/index.md +[index]: ./index.md [@wq/map]: ../@wq/map.md -[@wq/map-gl]: ../@wq/map-gl.md +[overlay]: ../overlays/index.md [map-src]: https://github.com/wq/wq.app/blob/main/packages/map/src/components/AutoOverlay.js diff --git a/docs/components/AutoSubform.md b/docs/components/AutoSubform.md index b079a43..8a79d99 100644 --- a/docs/components/AutoSubform.md +++ b/docs/components/AutoSubform.md @@ -5,7 +5,7 @@ purpose: forms # AutoSubform -@wq/react's `` [component] generates a [`
`][Fieldset] containing [``][AutoInput]s for each of the fields in the specified group from the [form configuration][config]). `` is primarily used with [``][AutoForm], and should never be overridden. Instead, you can configure a custom [fieldset][fieldsets] and register it as the "appearance" for the group. +[@wq/react]'s `` [component][index] generates a [`
`][Fieldset] containing [``][AutoInput]s for each of the fields in the specified group from the [form configuration][config]). `` is primarily used with [``][AutoForm], and should never be overridden. Instead, you can configure a custom [fieldset][fieldsets] and register it as the "appearance" for the group. ## Source @@ -13,16 +13,13 @@ The source code for `` is available here: * [AutoSubform.js (@wq/react)][react-src] -The [@wq/react] implementation automatically determines which actual components to render, so there is no alternate [@wq/material] or native version. +This component should not generally need to be overridden directly. -[component]: ./index.md -[Fieldset]: ./Fieldset.md -[AutoInput]: ./AutoInput.md +[index]: ./index.md +[@wq/react]: ../@wq/react.md [AutoForm]: ./AutoForm.md +[AutoInput]: ./AutoInput.md +[Fieldset]: ../inputs/Fieldset.md [config]: ../config.md -[@wq/react]: ../@wq/react.md -[@wq/material]: ../@wq/material.md - -[fieldsets]: ../guides/organize-inputs-into-fieldsets.md - +[fieldsets]: ../guides/organize-inputs-into-fieldsets.md [react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/AutoSubform.js diff --git a/docs/components/AutoSubformArray.md b/docs/components/AutoSubformArray.md index 2dae149..dff254f 100644 --- a/docs/components/AutoSubformArray.md +++ b/docs/components/AutoSubformArray.md @@ -5,7 +5,7 @@ purpose: forms # AutoSubformArray -@wq/react's `` [component] generates a [``][FieldsetArray] containing [``][AutoSubform]s for the specified repeat group from the [form configuration][config]). `` is primarily used with [``][AutoForm], and should never be overridden. Instead, you can configure a custom [fieldset array][nested-forms] and register it as the "appearance" for the repeat group. If no custom fieldset array is registered, `` will usually render the default [``][FieldsetArray]. The one exception is if the repeat group only has a single file or photo field - in that case, [``][FileArray] will be rendered instead. +[@wq/react]'s `` [component][index] generates a [``][FieldsetArray] containing [``][AutoSubform]s for the specified repeat group from the [form configuration][config]). `` is primarily used with [``][AutoForm], and should never be overridden. Instead, you can configure a custom [fieldset array][nested-forms] and register it as the "appearance" for the repeat group. If no custom fieldset array is registered, `` will usually render the default [``][FieldsetArray]. The one exception is if the repeat group only has a single file or photo field - in that case, [``][FileArray] will be rendered instead. ## Source @@ -13,17 +13,14 @@ The source code for `` is available here: * [AutoSubformArray.js (@wq/react)][react-src] -The [@wq/react] implementation automatically determines which actual components to render, so there is no alternate [@wq/material] or native version. +This component should not generally need to be overridden directly. -[component]: ./index.md -[FieldsetArray]: ./FieldsetArray.md -[AutoSubform]: ./AutoSubform.md +[index]: ./index.md +[@wq/react]: ../@wq/react.md [AutoForm]: ./AutoForm.md -[FileArray]: ./FileArray.md +[AutoSubform]: ./AutoSubform.md +[FieldsetArray]: ../inputs/FieldsetArray.md +[FileArray]: ../inputs/FileArray.md [config]: ../config.md -[@wq/react]: ../@wq/react.md -[@wq/material]: ../@wq/material.md - [nested-forms]: ../guides/implement-repeating-nested-forms.md - [react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/AutoSubformArray.js diff --git a/docs/components/BasemapToggle.md b/docs/components/BasemapToggle.md index c4beb4a..68b77c7 100644 --- a/docs/components/BasemapToggle.md +++ b/docs/components/BasemapToggle.md @@ -1,25 +1,21 @@ --- -module: "@wq/map-gl" +module: "@wq/map" purpose: maps --- # BasemapToggle -wq's `` [component] wraps [``][AutoBasemap] with a radio switch that controls active state. +[@wq/map]'s `` [component][index] wraps [``][AutoBasemap] with a radio switch that controls active state. ## Source -While [@wq/map] defines a [placeholder implementation][map-src], [@wq/map-gl] and [@wq/leaflet]'s versions are more useful as reference: +The source code for `` is available here: - * [AutoBasemap.js (@wq/map-gl)][mapgl-src] - * [Legend.js (@wq/leaflet)][leaflet-src] + * [BasemapToggle.js (@wq/map)][map-src] -[component]: ./index.md -[AutoBasemap]: ./AutoBasemap.md -[@wq/map]: ../@wq/map.md -[@wq/map-gl]: ../@wq/map-gl.md -[@wq/leaflet]: https://github.com/wq/wq.app/tree/v1.3.0/packages/leaflet +This component should not generally need to be overridden directly. -[map-src]: https://github.com/wq/wq.app/blob/main/packages/map/src/components/Legend.js -[mapgl-src]: https://github.com/wq/wq.app/blob/main/packages/map-gl/src/components/BasemapToggle.js -[leaflet-src]: https://github.com/wq/wq.app/blob/v1.3.0/packages/leaflet/src/components/Legend.js +[index]: ./index.md +[@wq/map]: ../@wq/map.md +[AutoBasemap]: ./AutoBasemap.md +[map-src]: https://github.com/wq/wq.app/blob/main/packages/map/src/components/BasemapToggle.js diff --git a/docs/components/BottomNavigation.md b/docs/components/BottomNavigation.md new file mode 100644 index 0000000..7c79b49 --- /dev/null +++ b/docs/components/BottomNavigation.md @@ -0,0 +1,25 @@ +--- +module: "@wq/material" +purpose: navigation +--- + +# BottomNavigation + +[@wq/material]'s `` [component][index] can be used to add a persistent navbar with 2-5 icons to the bottom of the screen. + +## Source + +While [@wq/react] defines a [placeholder implementation][react-src], [@wq/material]'s versions are more useful as reference: + + * [BottomNavigation.js (@wq/material-web)][material-web-src] + * [BottomNavigation.js (@wq/material-native)][material-native-src] + +> The @wq/material-web implementation just exports BottomNavigation from @mui/material. +> The @wq/material-native implementation is currently just a placeholder. + +[index]: ./index.md +[@wq/react]: ../@wq/react.md +[@wq/material]: ../@wq/material.md +[react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/BottomNavigation.js +[material-web-src]: https://github.com/wq/wq.app/blob/main/packages/material-web/src/components/BottomNavigation.js +[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material-native/src/components/BottomNavigation.js diff --git a/docs/components/BottomNavigationAction.md b/docs/components/BottomNavigationAction.md new file mode 100644 index 0000000..5c54df7 --- /dev/null +++ b/docs/components/BottomNavigationAction.md @@ -0,0 +1,25 @@ +--- +module: "@wq/material" +purpose: navigation +--- + +# BottomNavigationAction + +[@wq/material]'s `` [component][index] is used to specify an individual tab and icon for [BottomNavigation]. + +## Source + +While [@wq/react] defines a [placeholder implementation][react-src], [@wq/material]'s versions are more useful as reference: + + * [BottomNavigationAction.js (@wq/material-web)][material-web-src] + * [BottomNavigationAction.js (@wq/material-native)][material-native-src] + +> The @wq/material-native implementation is currently just a placeholder. + +[index]: ./index.md +[@wq/react]: ../@wq/react.md +[@wq/material]: ../@wq/material.md +[BottomNavigation]: ./BottomNavigation.md +[react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/BottomNavigationAction.js +[material-web-src]: https://github.com/wq/wq.app/blob/main/packages/material-web/src/components/BottomNavigationAction.js +[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material-native/src/components/BottomNavigationAction.js diff --git a/docs/components/Breadcrumbs.md b/docs/components/Breadcrumbs.md index 61745f0..2547f08 100644 --- a/docs/components/Breadcrumbs.md +++ b/docs/components/Breadcrumbs.md @@ -5,21 +5,21 @@ purpose: navigation # Breadcrumbs -[@wq/material]'s `` [component] uses the [useBreadcrumbs() hook][useBreadcrumbs] to provide link trail e.g. Home -> List -> Detail -> Edit. +[@wq/material]'s `` [component][index] uses the [useBreadcrumbs() hook][useBreadcrumbs] to provide link trail e.g. Home -> List -> Detail -> Edit. ## Source While [@wq/react] defines a [placeholder implementation][react-src], [@wq/material]'s versions are more useful as reference: - * [Breadcrumbs.js (@wq/material)][material-src] - * [Breadcrumbs.native.js (@wq/material)][material-native-src] + * [Breadcrumbs.js (@wq/material-web)][material-web-src] + * [Breadcrumbs.js (@wq/material-native)][material-native-src] -[component]: ./index.md +> The @wq/material-native implementation is currently just a placeholder. + +[index]: ./index.md [@wq/react]: ../@wq/react.md [@wq/material]: ../@wq/material.md [useBreadcrumbs]: ../hooks/useBreadcrumbs.md - [react-src]: https://github.com/wq/wq.app/blob/main/packages/react/src/components/Breadcrumbs.js -[material-src]: https://github.com/wq/wq.app/blob/main/packages/material/src/components/Breadcrumbs.js -[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material/src/components/Breadcrumbs.native.js - +[material-web-src]: https://github.com/wq/wq.app/blob/main/packages/material-web/src/components/Breadcrumbs.js +[material-native-src]: https://github.com/wq/wq.app/blob/main/packages/material-native/src/components/Breadcrumbs.js diff --git a/docs/components/Button.md b/docs/components/Button.md index 1063c30..5c101b8 100644 --- a/docs/components/Button.md +++ b/docs/components/Button.md @@ -5,22 +5,21 @@ purpose: navigation # Button -[@wq/material]'s `