From ad1376eec34c06185d1127fec03ca49a148ff7e7 Mon Sep 17 00:00:00 2001 From: Roxanne Young Date: Mon, 23 Mar 2026 09:32:27 -0400 Subject: [PATCH] docs: rearrange form and upgrade pages --- .github/CONTRIBUTING.md | 10 +- apps/element-storybook/.storybook/manager.ts | 2 +- apps/element-storybook/.storybook/preview.tsx | 6 +- apps/element-storybook/src/FormComponents.mdx | 20 +- .../bs4-migration/FormMigration.stories.tsx | 2 +- .../src/bs4-migration/form-migration.md | 8 +- .../src/bs4-migration/migration.mdx | 10 +- .../src/templates/bs4migration.mdx | 2 +- .../element-storybook/src/upgrading-to-v1.mdx | 2 +- .../element-storybook/src/upgrading-to-v2.mdx | 2 +- packages/autocomplete/README.md | 2 +- packages/autocomplete/introduction.mdx | 2 +- packages/autocomplete/package.json | 2 +- .../src/lib/AsyncAutocomplete.stories.tsx | 2 +- .../src/lib/Autocomplete.stories.tsx | 6 +- .../src/lib/CodesAutocomplete.stories.tsx | 2 +- .../lib/OrganizationAutocomplete.stories.tsx | 2 +- .../src/lib/ProviderAutocomplete.stories.tsx | 2 +- packages/button/src/lib/bs4migration.mdx | 2 +- packages/checkbox/README.md | 2 +- packages/checkbox/introduction.mdx | 2 +- packages/checkbox/package.json | 2 +- .../checkbox/src/lib/Checkbox.stories.tsx | 2 +- packages/controlled-form/README.md | 2 +- packages/controlled-form/introduction.mdx | 2 +- packages/controlled-form/package.json | 2 +- .../controlled-form/src/lib/RHF.stories.tsx | 185 ++++++++++++++++++ packages/datepicker/DateRangePicker.mdx | 2 +- packages/datepicker/README.md | 2 +- packages/datepicker/introduction.mdx | 2 +- packages/datepicker/package.json | 2 +- .../datepicker/src/lib/Datepicker.stories.tsx | 4 +- .../file-selector/src/lib/bs4migration.mdx | 2 +- packages/form-utils/README.md | 2 +- packages/form-utils/introduction.mdx | 2 +- packages/form-utils/package.json | 2 +- .../src/lib/FieldHelpIcon.stories.tsx | 2 +- .../src/lib/FormControl.stories.tsx | 2 +- .../src/lib/FormControlLabel.stories.tsx | 2 +- .../form-utils/src/lib/FormGroup.stories.tsx | 2 +- .../src/lib/FormHelperText.stories.tsx | 2 +- .../form-utils/src/lib/FormLabel.stories.tsx | 2 +- packages/form-utils/src/lib/Input.stories.tsx | 2 +- packages/form-utils/src/lib/Radio.stories.tsx | 2 +- .../form-utils/src/lib/RadioGroup.stories.tsx | 2 +- .../src/lib/RequiredKey.stories.tsx | 2 +- .../form-utils/src/lib/SearchBy.stories.tsx | 2 +- packages/form-utils/src/lib/SearchBy.tsx | 4 +- .../form-utils/src/lib/Select.stories.tsx | 2 +- .../form-utils/src/lib/Switch.stories.tsx | 2 +- packages/icon/src/lib/bs4migration.mdx | 2 +- packages/textfield/README.md | 2 +- packages/textfield/introduction.mdx | 2 +- packages/textfield/package.json | 2 +- .../textfield/src/lib/TextField.stories.tsx | 6 +- 55 files changed, 268 insertions(+), 81 deletions(-) create mode 100644 packages/controlled-form/src/lib/RHF.stories.tsx diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 3f056467a3..d07013f397 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -18,16 +18,16 @@ This monorepo is managed using [yarn](https://yarnpkg.com/getting-started) and [ ## Installation -The currently recommended version of node to use when developing in this repo is: `v20`. We recommend using [fnm](https://github.com/Schniz/fnm#readme) to have your node version automatically changed when you `cd` into the repo. +The currently recommended version of node to use when developing in this repo is: `v24`. We recommend using [fnm](https://github.com/Schniz/fnm#readme) to have your node version automatically changed when you `cd` into the repo. -We use `yarn berry` (aka yarn v3) to manage dependencies. Install `yarn` globally: +We use `yarn berry` (aka yarn v4) to manage dependencies. Install `yarn` globally: ```sh node --version npm -i -g yarn ``` -> This command will install yarn v1. When we run the next command then yarn v3 will be added. +> This command will install yarn v1. When we run the next command then yarn v4 will be added. Then install the dependencies: @@ -104,12 +104,14 @@ The generator assumes the package is a wrapper for an MUI component, as such: - `@mui/material` is a peer dependency - MUI link in README generated assuming package name is same as corresponding MUI component name - Default component code is a wrapper for the MUI `Card` component. Replace `Card` with whatever component you're building a wrapper for, or remove the `Card` references entirely. +- Only original component generated that matches package name is added to the `@availity/element` exports. Any additional exports will need to be added manually. ### Dos and Don'ts -- Don't add a default export to the package, this will affect `@availity/element` - Do create separate stories files for each exported component. The storybook automated documentation creates the arguments table based on the component in the `Meta` of that file. - Do make sure components stick to the Availity Design Standards. Add the corresponding component theme information to the themes in `@availity/theme` +- Don't forget to add additional package exports to `@availity/element`, the generator only handles the namesake component. +- Don't merge before setting up trusted publishing for the new package. We recommend publishing a canary version so the package is available in npm to setup trusted publishing, however don't push up the canary version version commit. _You can manually add the package tag if there's a certain major version you're targetting, i.e. matching the current major version of element `@availity/mui-@2.0.0`_ ## Commits diff --git a/apps/element-storybook/.storybook/manager.ts b/apps/element-storybook/.storybook/manager.ts index f27c35d206..64961725d1 100644 --- a/apps/element-storybook/.storybook/manager.ts +++ b/apps/element-storybook/.storybook/manager.ts @@ -7,7 +7,7 @@ addons.setConfig({ theme: elementTheme, sidebar: { collapsedRoots: [ - 'bs4-migration', + 'upgrading', 'sample-layouts', 'design-system', ], diff --git a/apps/element-storybook/.storybook/preview.tsx b/apps/element-storybook/.storybook/preview.tsx index 3c4328dba2..bcd9f17382 100644 --- a/apps/element-storybook/.storybook/preview.tsx +++ b/apps/element-storybook/.storybook/preview.tsx @@ -74,12 +74,12 @@ const preview: Preview = { 'Element', 'Contributing', 'Introduction', - 'BS4 Migration', - ['Getting Started', 'Form Migration', '*', 'Upload'], + 'Upgrading', + ['BS4 Migration', ['Getting Started', 'Form Migration', '*', 'Upload']], 'Sample Layouts', 'Design System', 'Form Components', - ['Component Guide', 'Controlled Form', 'FormUtils'], + ['Component Guide', 'Controlled Form', ['*', 'README'], 'Uncontrolled Fields', ['Autocomplete', ['*', 'README'], '*', 'Datepicker', ['*', 'README'], 'TextField', ['*', 'README']], 'Uncontrolled FormUtils', ['*', 'README']], 'Components', ], }, diff --git a/apps/element-storybook/src/FormComponents.mdx b/apps/element-storybook/src/FormComponents.mdx index 272c14d916..e0ebbdada5 100644 --- a/apps/element-storybook/src/FormComponents.mdx +++ b/apps/element-storybook/src/FormComponents.mdx @@ -29,9 +29,9 @@ import { Element form components can be split into three categories -- Controlled: Prebuilt fields integrated with `react-hook-form` -- Fields: Prebuilt fields, i.e. `TextField`, `Autocomplete`, `DatePicker` -- Form Utils: The base components needed to build your own field, i.e. `Label`, `Input`, `HelperText`, etc +- Controlled Components: Prebuilt fields and utils integrated with `react-hook-form` +- Uncontrolled Fields: Prebuilt fields, i.e. `TextField`, `Autocomplete`, `DatePicker` +- Uncontrolled Form Utils: The base components needed to build your own field, i.e. `Label`, `Input`, `HelperText`, etc
@@ -41,7 +41,7 @@ Element form components can be split into three categories ### Controlled -The [`Controlled Form`](./?path=/docs/form-components-controlled-form-introduction--docs) package contains +The [`Controlled Form`](./?path=/docs/form-components-controlled-form-readme--docs) package contains controlled counterparts for the most used Form/Field components: - `ControlledAsyncAutocomplete` @@ -60,15 +60,15 @@ Fully assembled fields with `Label`, `Input`, `HelperText`, and `FormControl` | Component | Description | Package | Example | | --------- | ----------- | ------- | ------- | -| Autocomplete | Select field with autocomplete abilities. | [`Autocomplete`](./?path=/docs/form-components-autocomplete-introduction--docs) | | -| AsyncAutocomplete | Autocomplete with loader while options are fetched | [`Autocomplete`](./?path=/docs/form-components-autocomplete-introduction--docs) | | -| CodesAutocomplete,
OrganizationAutocomplete,
ProviderAutocomplete | Specialized autocomplete fields | [`Autocomplete`](./?path=/docs/form-components-autocomplete-introduction--docs) | | -| Datepicker | DatePicker field
*Note: No DateRangePicker component - a code example is available for reference* | [`Datepicker`](./?path=/docs/form-components-datepicker-introduction--docs) | | -| TextField | Generic input field. Handles text input or basic select, however `Autocomplete` is preferred for select fields. | [`TextField`](./?path=/docs/form-components-textfield-introduction--docs) | | +| Autocomplete | Select field with autocomplete abilities. | [`Autocomplete`](./?path=/docs/form-components-uncontrolled-fields-autocomplete-readme--docs) | | +| AsyncAutocomplete | Autocomplete with loader while options are fetched | [`Autocomplete`](./?path=/docs/form-components-uncontrolled-fields-autocomplete-readme--docs) | | +| CodesAutocomplete,
OrganizationAutocomplete,
ProviderAutocomplete | Specialized autocomplete fields | [`Autocomplete`](./?path=/docs/form-components-uncontrolled-fields-autocomplete-readme--docs) | | +| Datepicker | DatePicker field
*Note: No DateRangePicker component - a code example is available for reference* | [`Datepicker`](./?path=/docs/form-components-uncontrolled-fields-datepicker-readme--docs) | | +| TextField | Generic input field. Handles text input or basic select, however `Autocomplete` is preferred for select fields. | [`TextField`](./?path=/docs/form-components-uncontrolled-fields-textfield-readme--docs) | | ### Form Utils -Predominantly in the [`@availity/mui-form-utils`](./?path=/docs/form-components-formutils-introduction--docs) package, +Predominantly in the [`@availity/mui-form-utils`](./?path=/docs/form-components-uncontrolled-formutils-readme--docs) package, includes the most basic subcomponents of a field. While `TextField` and other field components handle most uses, manual field composition will be needed for items like `Checkbox`, `Radio`, `Switch`, and `FormGroup`. diff --git a/apps/element-storybook/src/bs4-migration/FormMigration.stories.tsx b/apps/element-storybook/src/bs4-migration/FormMigration.stories.tsx index 40e7804e3d..fb33242f09 100644 --- a/apps/element-storybook/src/bs4-migration/FormMigration.stories.tsx +++ b/apps/element-storybook/src/bs4-migration/FormMigration.stories.tsx @@ -28,7 +28,7 @@ import { import FormMigration from './form-migration.md?raw'; const meta: Meta = { - title: 'BS4 Migration/Form Migration', + title: 'Upgrading/BS4 Migration/Form Migration', tags: ['autodocs'], parameters: { docs: { description: { component: `${FormMigration}`}, diff --git a/apps/element-storybook/src/bs4-migration/form-migration.md b/apps/element-storybook/src/bs4-migration/form-migration.md index 86bc86d6db..9241c19efe 100644 --- a/apps/element-storybook/src/bs4-migration/form-migration.md +++ b/apps/element-storybook/src/bs4-migration/form-migration.md @@ -1,7 +1,7 @@ There are two main changes made with the form components in `@availity/element`: - Removed `formik` -- Updated [usage guidelines](./?path=/docs/bs4-migration-form-migration--disabled-fields) for `disabled` fields and the new `read-only` fields +- Updated [usage guidelines](./?path=/docs/upgrading/bs4-migration-form-migration--disabled-fields) for `disabled` fields and the new `read-only` fields ## Why did we remove formik? @@ -33,15 +33,15 @@ using it with `yup`+`@hookform/resolvers/yup` (don't worry, | availity-react
formik | element
react-hook-form | element
Not Controlled | Description | | ---------------------------- | ---------------------------- | --------------------------- | ----------- | | CheckboxGroup | _N/A_ | _N/A - built with `FormControl`, `FormLabel`, & `FormGroup`_ | Full checkbox group field | -| CurrencyInput | _N/A_ | _N/A - built with `TextField` and replacing input. See [Input Masking](./?path=/docs/form-components-textfield-textfield--docs&args=#input-masking)_ | Field with currency input masking | +| CurrencyInput | _N/A_ | _N/A - built with `TextField` and replacing input. See [Input Masking](./?path=/docs/form-components-uncontrolled-fields-textfield--docs&args=#input-masking)_ | Field with currency input masking | | DateField | ControlledDatepicker | Datepicker | Date field with picker | -| DateRangeField | _N/A_ | _N/A - see [date range code example](./?path=/docs/form-components-datepicker-datepicker--docs#date-range-picker)_ | Date range field(s) with picker | +| DateRangeField | _N/A_ | _N/A - see [date range code example](./?path=/docs/form-components-uncontrolled-fields-datepicker-datepicker--docs#date-range-picker)_ | Date range field(s) with picker | | Field | ControlledTextField | TextField | Text input field | | FieldHelpIcon | _N/A_ | FieldHelpIcon | Availity help topic link | | FormGroup | _N/A_ | FormControl | Context wrapper for a field. Syncs state, i.e. error, required, disabled, focused, etc | | Input | _N/A_ | Input | Bare input | | Label | _N/A_ | FormLabel
FormControlLabel | Label for input/group | -| Phone | _N/A_ | _N/A - built with `TextField` and replacing input. See [Input Masking](./?path=/docs/form-components-textfield-textfield--docs&args=#input-masking)_ | Field with phone masking | +| Phone | _N/A_ | _N/A - built with `TextField` and replacing input. See [Input Masking](./?path=/docs/form-components-uncontrolled-fields-textfield--docs&args=#input-masking)_ | Field with phone masking | | RadioGroup | ControlledRadioGroup | _N/A - built with `FormControl`, `FormLabel`, & `RadioGroup`_ | Full radio group field | | SelectField | ControlledAutocomplete | Autocomplete | Select field with autocompletion | | ResourceSelect | ControlledAsyncAutocomplete | AsyncAutocomplete | Select field with loader while loading options | diff --git a/apps/element-storybook/src/bs4-migration/migration.mdx b/apps/element-storybook/src/bs4-migration/migration.mdx index 78bb2c13c6..04e980978d 100644 --- a/apps/element-storybook/src/bs4-migration/migration.mdx +++ b/apps/element-storybook/src/bs4-migration/migration.mdx @@ -13,7 +13,7 @@ import { InputGroupAddonExample, } from './MigrationExamples'; - + # Getting Started @@ -21,7 +21,7 @@ import { ## Planning and Strategy -_Our guide is written assuming you're planning migration one component swap at a time. However, if you're doing whole sections at a time pay extra attention to the [Components Without a Drop-in Option](./?path=/docs/bs4-migration-getting-started--docs&args=#components-without-a-drop-in-option) section to plan accordingly._ +_Our guide is written assuming you're planning migration one component swap at a time. However, if you're doing whole sections at a time pay extra attention to the [Components Without a Drop-in Option](./?path=/docs/upgrading/bs4-migration-getting-started--docs&args=#components-without-a-drop-in-option) section to plan accordingly._ ### Drop-in Components and the Migration Theme @@ -42,7 +42,7 @@ The migration theme is accessible by passing `theme='legacyBS'` to the `ThemePro Where you're coming from will determine your strategy for form migration. We have moved away from `formik` (used by `@availity/form`) in favor of `react-hook-form`. We have also provided the base components to utilize with your own logic/libraries. -There's additional pattern changes around the usage of `disabled` fields. See the [Form migration](./?path=/docs/bs4-migration-form-migration--docs) docs for more information. +There's additional pattern changes around the usage of `disabled` fields. See the [Form migration](./?path=/docs/upgrading/bs4-migration-form-migration--docs) docs for more information. ### Components Without a Drop-in Option @@ -174,12 +174,12 @@ Not all classes/components from Bootstrap/Reactstrap have a similar name or 1:1 | `Badge`2 | [`Chip`](./?path=/docs/components-chip-chip--docs) | Inline colored label/descriptor | | | `Column`/`Row` | [`Grid`](./?path=/docs/components-layout-grid--docs) | Horizontal and Vertical layout | | | `Dropdown` | [`Menu`](./?path=/docs/components-menu-menu--docs) | Display a list on temporary surface | | -| `InputGroupAddon` | [`InputAdornment`](./?path=/docs/form-components-formutils-input--docs) used in the `startAdornment` or `endAdornment` prop on the Input component or any component that takes InputProps | Extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. | | +| `InputGroupAddon` | [`InputAdornment`](./?path=/docs/form-components-uncontrolled-formutils-input--docs) used in the `startAdornment` or `endAdornment` prop on the Input component or any component that takes InputProps | Extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. | | | `ListGroup`, `ListGroupItem`, `ListGroupItemStatus` | [`List`](./?path=/docs/components-list-list--docs) | List, ListItem, ListItemStatusCard | | | `ListGroupItemHeading` | [`Typography`](./?path=/docs/components-typography-typography--docs) | No longer a separate component | | | `Modal` | [`Dialog`](./?path=/docs/components-dialog-dialog--docs) | Popover Dialog (Blocking and Non-Blocking) | | | `Nav` | [`Tabs`](./?path=/docs/components-tabs-tabs--docs) | Tab Navigation | | -| `Phone` | [`TextField` with phone masking](https://availity.github.io/element/?path=/story/form-components-textfield-textfield--phone-with-ext) | TextField that auto-formats phone numbers | | +| `Phone` | [`TextField` with phone masking](https://availity.github.io/element/?path=/story/form-components-uncontrolled-fields-textfield--phone-with-ext) | TextField that auto-formats phone numbers | | | `Toast` | [`Snackbar`](./?path=/docs/components-snackbar-snackbar--docs) | Brief Notifications | | | `Upload` | [`FileSelector`](./?path=/docs/components-file-selector-file-selector--docs) | Select a file to upload | | | `Wizard` | [`Stepper`](./?path=/docs/components-stepper-stepper--docs) | Convey progress through numbered steps | | diff --git a/apps/element-storybook/src/templates/bs4migration.mdx b/apps/element-storybook/src/templates/bs4migration.mdx index 16d42ed462..013c1b5d0e 100644 --- a/apps/element-storybook/src/templates/bs4migration.mdx +++ b/apps/element-storybook/src/templates/bs4migration.mdx @@ -1,6 +1,6 @@ import { Meta, Source } from '@storybook/blocks'; - + *Copy file into package* # Component Migration diff --git a/apps/element-storybook/src/upgrading-to-v1.mdx b/apps/element-storybook/src/upgrading-to-v1.mdx index 989f177b95..1b6f9fffeb 100644 --- a/apps/element-storybook/src/upgrading-to-v1.mdx +++ b/apps/element-storybook/src/upgrading-to-v1.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs/blocks'; - + ## Upgrading to Element v1 diff --git a/apps/element-storybook/src/upgrading-to-v2.mdx b/apps/element-storybook/src/upgrading-to-v2.mdx index 1079c0056f..8bd37f68a9 100644 --- a/apps/element-storybook/src/upgrading-to-v2.mdx +++ b/apps/element-storybook/src/upgrading-to-v2.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs/blocks'; - + ## Upgrading to Element v2 diff --git a/packages/autocomplete/README.md b/packages/autocomplete/README.md index 93d7d15ea9..e3cc56e981 100644 --- a/packages/autocomplete/README.md +++ b/packages/autocomplete/README.md @@ -10,7 +10,7 @@ This package extends the MUI Autocomplete component: [MUI Autocomplete Docs](https://mui.com/components/autocomplete/) -Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-autocomplete-introduction--docs) +Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-uncontrolled-fields-autocomplete-readme--docs) Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.com/2e36e50c7) diff --git a/packages/autocomplete/introduction.mdx b/packages/autocomplete/introduction.mdx index db0de967fc..b96b171fe5 100644 --- a/packages/autocomplete/introduction.mdx +++ b/packages/autocomplete/introduction.mdx @@ -2,7 +2,7 @@ import { Markdown, Meta } from '@storybook/addon-docs/blocks'; import ReadMe from './README.md?raw'; import CHANGELOG from './CHANGELOG.md?raw'; - + {ReadMe} diff --git a/packages/autocomplete/package.json b/packages/autocomplete/package.json index a7e2907637..808b950881 100644 --- a/packages/autocomplete/package.json +++ b/packages/autocomplete/package.json @@ -8,7 +8,7 @@ "availity", "mui" ], - "homepage": "https://availity.github.io/element/?path=/docs/form-components-autocomplete-introduction--docs", + "homepage": "https://availity.github.io/element/?path=/docs/form-components-uncontrolled-fields-autocomplete-readme--docs", "bugs": { "url": "https://github.com/Availity/element/issues" }, diff --git a/packages/autocomplete/src/lib/AsyncAutocomplete.stories.tsx b/packages/autocomplete/src/lib/AsyncAutocomplete.stories.tsx index 43522b54f5..9aacfbd94c 100644 --- a/packages/autocomplete/src/lib/AsyncAutocomplete.stories.tsx +++ b/packages/autocomplete/src/lib/AsyncAutocomplete.stories.tsx @@ -6,7 +6,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { AsyncAutocomplete } from './AsyncAutocomplete'; const meta: Meta = { - title: 'Form Components/Autocomplete/AsyncAutocomplete', + title: 'Form Components/Uncontrolled Fields/AsyncAutocomplete', component: AsyncAutocomplete, tags: ['autodocs'], args: { diff --git a/packages/autocomplete/src/lib/Autocomplete.stories.tsx b/packages/autocomplete/src/lib/Autocomplete.stories.tsx index 7d442a7b18..33e62dcab8 100644 --- a/packages/autocomplete/src/lib/Autocomplete.stories.tsx +++ b/packages/autocomplete/src/lib/Autocomplete.stories.tsx @@ -31,7 +31,7 @@ const languages = [ ]; const meta: Meta = { - title: 'Form Components/Autocomplete/Autocomplete', + title: 'Form Components/Uncontrolled Fields/Autocomplete', component: Autocomplete, tags: ['autodocs'], args: { @@ -72,7 +72,7 @@ export const _Multi: StoryObj = { }; /** Notice the new `read-only` styling. We're moving away from `disabled` in favor of `read-only`. - * _See the [Disabled Fields Explainer](./?path=/docs/bs4-migration-form-migration--disabled-fields) for more information on when to use each._ + * _See the [Disabled Fields Explainer](./?path=/docs/upgrading/bs4-migration-form-migration--disabled-fields) for more information on when to use each._ */ export const _States: StoryObj = { render: (args) => ( @@ -196,7 +196,7 @@ export const _Grouped: StoryObj = { }, }; -/** Wrap the fields in a `SearchByFormGroup` from the [@availity/mui-form-utils](./?path=/docs/form-components-formutils-introduction--docs) package for our combined search by styles. +/** Wrap the fields in a `SearchByFormGroup` from the [@availity/mui-form-utils](./?path=/docs/form-components-uncontrolled-formutils-readme--docs) package for our combined search by styles. * * The "Search By" field id must be passed as the FormGroup supplies the label. */ diff --git a/packages/autocomplete/src/lib/CodesAutocomplete.stories.tsx b/packages/autocomplete/src/lib/CodesAutocomplete.stories.tsx index 23dca590f3..216573b26c 100644 --- a/packages/autocomplete/src/lib/CodesAutocomplete.stories.tsx +++ b/packages/autocomplete/src/lib/CodesAutocomplete.stories.tsx @@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { CodesAutocomplete } from './CodesAutocomplete'; const meta: Meta = { - title: 'Form Components/Autocomplete/CodesAutocomplete', + title: 'Form Components/Uncontrolled Fields/CodesAutocomplete', component: CodesAutocomplete, tags: ['autodocs'], args: { diff --git a/packages/autocomplete/src/lib/OrganizationAutocomplete.stories.tsx b/packages/autocomplete/src/lib/OrganizationAutocomplete.stories.tsx index 712bd5c3e8..826f71e955 100644 --- a/packages/autocomplete/src/lib/OrganizationAutocomplete.stories.tsx +++ b/packages/autocomplete/src/lib/OrganizationAutocomplete.stories.tsx @@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { OrganizationAutocomplete } from './OrganizationAutocomplete'; const meta: Meta = { - title: 'Form Components/Autocomplete/OrganizationAutocomplete', + title: 'Form Components/Uncontrolled Fields/OrganizationAutocomplete', component: OrganizationAutocomplete, tags: ['autodocs'], args: { diff --git a/packages/autocomplete/src/lib/ProviderAutocomplete.stories.tsx b/packages/autocomplete/src/lib/ProviderAutocomplete.stories.tsx index 2d6fe08554..a6ec9e65d5 100644 --- a/packages/autocomplete/src/lib/ProviderAutocomplete.stories.tsx +++ b/packages/autocomplete/src/lib/ProviderAutocomplete.stories.tsx @@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ProviderAutocomplete } from './ProviderAutocomplete'; const meta: Meta = { - title: 'Form Components/Autocomplete/ProviderAutocomplete', + title: 'Form Components/Uncontrolled Fields/ProviderAutocomplete', component: ProviderAutocomplete, tags: ['autodocs'], args: { diff --git a/packages/button/src/lib/bs4migration.mdx b/packages/button/src/lib/bs4migration.mdx index 3ada7070a5..d666410f8c 100644 --- a/packages/button/src/lib/bs4migration.mdx +++ b/packages/button/src/lib/bs4migration.mdx @@ -1,6 +1,6 @@ import { Meta, Source } from '@storybook/addon-docs/blocks'; - + # Button Migration diff --git a/packages/checkbox/README.md b/packages/checkbox/README.md index 085f3e90d2..4a8477e844 100644 --- a/packages/checkbox/README.md +++ b/packages/checkbox/README.md @@ -10,7 +10,7 @@ This package extends the MUI Checkbox component: [MUI Checkbox Docs](https://mui.com/components/checkbox/) -Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-checkbox-introduction--docs) +Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-uncontrolled-formutils-checkbox-readme--docs) Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.com/2e36e50c7) diff --git a/packages/checkbox/introduction.mdx b/packages/checkbox/introduction.mdx index 8e5faa9356..9542596532 100644 --- a/packages/checkbox/introduction.mdx +++ b/packages/checkbox/introduction.mdx @@ -2,7 +2,7 @@ import { Markdown, Meta } from '@storybook/addon-docs/blocks'; import ReadMe from './README.md?raw'; import CHANGELOG from './CHANGELOG.md?raw'; - + {ReadMe} diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index aa2a733a52..8e8b926217 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -8,7 +8,7 @@ "availity", "mui" ], - "homepage": "https://availity.github.io/element/?path=/docs/form-components-checkbox-introduction--docs", + "homepage": "https://availity.github.io/element/?path=/docs/form-components-uncontrolled-formutils-checkbox-readme--docs", "bugs": { "url": "https://github.com/Availity/element/issues" }, diff --git a/packages/checkbox/src/lib/Checkbox.stories.tsx b/packages/checkbox/src/lib/Checkbox.stories.tsx index d0c9dd88bb..30c85a7a85 100644 --- a/packages/checkbox/src/lib/Checkbox.stories.tsx +++ b/packages/checkbox/src/lib/Checkbox.stories.tsx @@ -10,7 +10,7 @@ import { HeartEmptyIcon, HeartIcon } from '@availity/mui-icon'; import { Checkbox, CheckboxProps } from './Checkbox'; const meta: Meta = { - title: 'Form Components/Checkbox/Checkbox', + title: 'Form Components/Uncontrolled FormUtils/Checkbox', component: Checkbox, tags: ['autodocs'], argTypes: { diff --git a/packages/controlled-form/README.md b/packages/controlled-form/README.md index b0ce724825..b33cc97009 100644 --- a/packages/controlled-form/README.md +++ b/packages/controlled-form/README.md @@ -10,7 +10,7 @@ This package extends the Element's Form components with [react-hook-form](https://react-hook-form.com/). The goal of this package is to decrease the amount of setup involved with building a form using Element components and react-hook-form. If you would like to use another form library, the raw Element form components are also available. -Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-controlled-form-introduction--docs) +Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-controlled-form-readme--docs) Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.com/2e36e50c7) diff --git a/packages/controlled-form/introduction.mdx b/packages/controlled-form/introduction.mdx index d7edf9a454..5d187f3c9b 100644 --- a/packages/controlled-form/introduction.mdx +++ b/packages/controlled-form/introduction.mdx @@ -2,7 +2,7 @@ import { Markdown, Meta } from '@storybook/addon-docs/blocks'; import ReadMe from './README.md?raw'; import CHANGELOG from './CHANGELOG.md?raw'; - + {ReadMe} diff --git a/packages/controlled-form/package.json b/packages/controlled-form/package.json index ee0e0172ce..1349eecad1 100644 --- a/packages/controlled-form/package.json +++ b/packages/controlled-form/package.json @@ -8,7 +8,7 @@ "availity", "mui" ], - "homepage": "https://availity.github.io/element/?path=/docs/components-controlled-form-introduction--docs", + "homepage": "https://availity.github.io/element/?path=/docs/components-controlled-form-readme--docs", "bugs": { "url": "https://github.com/Availity/element/issues" }, diff --git a/packages/controlled-form/src/lib/RHF.stories.tsx b/packages/controlled-form/src/lib/RHF.stories.tsx new file mode 100644 index 0000000000..5b1d5fdaff --- /dev/null +++ b/packages/controlled-form/src/lib/RHF.stories.tsx @@ -0,0 +1,185 @@ +import type { Meta, StoryObj } from '@storybook/react-vite'; +import dayjs from 'dayjs'; +import * as yup from 'yup'; +import { yupResolver } from '@hookform/resolvers/yup'; +import { Button, LoadingButton } from '@availity/mui-button'; +import { FormControl, FormControlLabel, FormLabel, Radio, RequiredKey } from '@availity/mui-form-utils'; +import { ControlledAutocomplete, ControlledDatepicker, ControlledRadioGroup, ControlledSelect, ControlledTextField, FormProvider, SubmitHandler, useForm } from '..'; + + /** + * All of our controlled form components have `react-hook-form` controllers baked in. + * For a simpler experience, `@availity/element` exports the necessary `react-hook-form` hooks. + * + * - [`FormProvider` component](https://react-hook-form.com/docs/formprovider) - host context object and allow consuming component to subscribe to context and use useForm props and methods. + * - [`useForm` hook](https://react-hook-form.com/docs/useform) - primary hook that drives `react-hook-form`. + * - [`useFormContext` hook](https://react-hook-form.com/docs/useformcontext) - allows you to access the form context. Intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. + * - `SubmitHandler` type + * - `UseFormProps` type + * - `UseFormReturn` type + * + * For complex forms, you may need to get additional resources directly from `react-hook-form`, i.e. `useWatch`, `useFieldArray`. + * + * [Schema-based validation resolvers](https://react-hook-form.com/get-started#SchemaValidation) are available from `@hookform/resolvers`. We've included an example using `yup` but more are supported. + * + * For more information, hooks, or components see the [react-hook-form documentation](https://react-hook-form.com/) + */ + const meta: Meta = { + title: 'Form Components/Controlled Form', + tags: ['autodocs'], + parameters: { docs: { + // description: { component: `${FormMigration}`}, + source: { state: true } + }} + + }; + + export default meta; + + const dropdownOptions = ['Bulbasaur', 'Squirtle', 'Charmander']; + + /** Form with controlled form components, `yup`, and `@hookform/resolvers/yup` */ + export const _YupValidation: StoryObj = { + render: () => { + const schema = yup.object({ + textField: yup + .string() + .max(200, 'Text Field cannot exceed 200 characters.') + .required('This field is required.'), + selectField: yup + .string() + .required('This Field is required.') + .nullable(), + datePicker: yup + .mixed() + .required('This Field is required.') + .nullable(), + radio: yup + .string() + .required('A selection is required'), + }); + + const isRequired = (name: string) => { + return(!(schema.describe().fields[name] as yup.SchemaDescription)?.optional || undefined) + } + + type FormInputsType = yup.InferType; + + const onSubmit: SubmitHandler = (data) => console.log(data) + + const methods = useForm({ + defaultValues: { + textField: "", + selectField: undefined, + datePicker: undefined, + radio: "", + }, + mode: 'onBlur', + resolver: yupResolver(schema) + }); + + return ( + +
+ + + + + + } value="1" label="Option 1" /> + } value="2" label="Option 2" /> + + + Submit + + +
+ ) + } + } + + /** Form with controlled form components using internal rules for validation. + * + * Useful for smaller forms where writing a full schema could be cumbersome. + */ + export const _RHFRules: StoryObj = { + render: () => { + const methods = useForm({defaultValues: {textField: '', selectField: null, datePicker: null, radio: ''}}); + const onSubmit = (data: any) => console.log(data) + return ( + +
+ + + + + + } value="1" label="Option 1" /> + } value="2" label="Option 2" /> + + + Submit + + +
+ ) + } + } diff --git a/packages/datepicker/DateRangePicker.mdx b/packages/datepicker/DateRangePicker.mdx index 13caf5a9e0..245124101b 100644 --- a/packages/datepicker/DateRangePicker.mdx +++ b/packages/datepicker/DateRangePicker.mdx @@ -2,6 +2,6 @@ import { Markdown, Meta, Source } from '@storybook/addon-docs/blocks'; import Docs from './DateRangePickerDocs.md?raw'; - + {Docs} diff --git a/packages/datepicker/README.md b/packages/datepicker/README.md index bca4372e18..9cc3a86e0d 100644 --- a/packages/datepicker/README.md +++ b/packages/datepicker/README.md @@ -10,7 +10,7 @@ This package extends the MUI Datepicker component: [MUI Datepicker Docs](https://mui.com/components/datepicker/) -Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-datepicker-introduction--docs) +Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-uncontrolled-fields-datepicker-readme--docs) Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.com/2e36e50c7) diff --git a/packages/datepicker/introduction.mdx b/packages/datepicker/introduction.mdx index 8638febbe5..66cb5d4d92 100644 --- a/packages/datepicker/introduction.mdx +++ b/packages/datepicker/introduction.mdx @@ -2,7 +2,7 @@ import { Markdown, Meta } from '@storybook/addon-docs/blocks'; import ReadMe from './README.md?raw'; import CHANGELOG from './CHANGELOG.md?raw'; - + {ReadMe} diff --git a/packages/datepicker/package.json b/packages/datepicker/package.json index 3ee592263e..00b098676b 100644 --- a/packages/datepicker/package.json +++ b/packages/datepicker/package.json @@ -8,7 +8,7 @@ "availity", "mui" ], - "homepage": "https://availity.github.io/element/?path=/docs/form-components-datepicker-introduction--docs", + "homepage": "https://availity.github.io/element/?path=/docs/form-components-uncontrolled-fields-datepicker-readme--docs", "bugs": { "url": "https://github.com/Availity/element/issues" }, diff --git a/packages/datepicker/src/lib/Datepicker.stories.tsx b/packages/datepicker/src/lib/Datepicker.stories.tsx index 13119ac92c..7cc125249d 100644 --- a/packages/datepicker/src/lib/Datepicker.stories.tsx +++ b/packages/datepicker/src/lib/Datepicker.stories.tsx @@ -11,7 +11,7 @@ import { Datepicker, DatepickerProps } from './Datepicker'; import { DateCalendar } from './DateCalendar'; const meta: Meta = { - title: 'Form Components/Datepicker/Datepicker', + title: 'Form Components/Uncontrolled Fields/Datepicker', component: Datepicker, tags: ['autodocs'], }; @@ -43,7 +43,7 @@ export const _Datepicker: StoryObj = { }; /** Notice the new `read-only` styling. We're moving away from `disabled` in favor of `read-only`. - * _See the [Disabled Fields Explainer](./?path=/docs/bs4-migration-form-migration--disabled-fields) for more information on when to use each._ + * _See the [Disabled Fields Explainer](./?path=/docs/upgrading/bs4-migration-form-migration--disabled-fields) for more information on when to use each._ */ export const _States: StoryObj = { render: (args) => ( diff --git a/packages/file-selector/src/lib/bs4migration.mdx b/packages/file-selector/src/lib/bs4migration.mdx index 8c95bcb5b1..682b84bf59 100644 --- a/packages/file-selector/src/lib/bs4migration.mdx +++ b/packages/file-selector/src/lib/bs4migration.mdx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/addon-docs/blocks'; - + # Upload Migration diff --git a/packages/form-utils/README.md b/packages/form-utils/README.md index 162096cc72..031212debb 100644 --- a/packages/form-utils/README.md +++ b/packages/form-utils/README.md @@ -10,7 +10,7 @@ This package extends many of the MUI form components: [MUI Field Docs](https://mui.com/material-ui/react-text-field/) -Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-form-utils-introduction--docs) +Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-uncontrolled-formutils-readme--docs) Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.com/2e36e50c7) diff --git a/packages/form-utils/introduction.mdx b/packages/form-utils/introduction.mdx index cea0bd2880..7f84d08797 100644 --- a/packages/form-utils/introduction.mdx +++ b/packages/form-utils/introduction.mdx @@ -2,7 +2,7 @@ import { Markdown, Meta } from '@storybook/addon-docs/blocks'; import ReadMe from './README.md?raw'; import CHANGELOG from './CHANGELOG.md?raw'; - + {ReadMe} diff --git a/packages/form-utils/package.json b/packages/form-utils/package.json index 13d5b651b3..278148eb42 100644 --- a/packages/form-utils/package.json +++ b/packages/form-utils/package.json @@ -8,7 +8,7 @@ "availity", "mui" ], - "homepage": "https://availity.github.io/element/?path=/docs/form-components-form-utils-introduction--docs", + "homepage": "https://availity.github.io/element/?path=/docs/form-components-uncontrolled-formutils-readme--docs", "bugs": { "url": "https://github.com/Availity/element/issues" }, diff --git a/packages/form-utils/src/lib/FieldHelpIcon.stories.tsx b/packages/form-utils/src/lib/FieldHelpIcon.stories.tsx index d508e62002..d1a7a42155 100644 --- a/packages/form-utils/src/lib/FieldHelpIcon.stories.tsx +++ b/packages/form-utils/src/lib/FieldHelpIcon.stories.tsx @@ -5,7 +5,7 @@ import { FieldHelpIcon, FieldHelpIconProps } from './FieldHelpIcon'; /** Help Wrapper for Oxygen Learning Docs on the Portal (This component will only work in the Availity Portal). */ const meta: Meta = { - title: 'Form Components/FormUtils/FieldHelpIcon', + title: 'Form Components/Uncontrolled FormUtils/FieldHelpIcon', component: FieldHelpIcon, tags: ['autodocs'], }; diff --git a/packages/form-utils/src/lib/FormControl.stories.tsx b/packages/form-utils/src/lib/FormControl.stories.tsx index 9ff2fec12c..766e2d207f 100644 --- a/packages/form-utils/src/lib/FormControl.stories.tsx +++ b/packages/form-utils/src/lib/FormControl.stories.tsx @@ -9,7 +9,7 @@ import { FormControl, FormControlProps, FormLabel, FormHelperText, Input, Select /** Form input context. Controls styling (`size`, etc) and state (`error`, `disabled`, etc) across input components, like `FormLabel`, `Input`, `FormHelperText`. */ export default { - title: 'Form Components/FormUtils/FormControl', + title: 'Form Components/Uncontrolled FormUtils/FormControl', component: FormControl, tags: ['autodocs'], args: { diff --git a/packages/form-utils/src/lib/FormControlLabel.stories.tsx b/packages/form-utils/src/lib/FormControlLabel.stories.tsx index 55cd7fa004..4c95ca2d6d 100644 --- a/packages/form-utils/src/lib/FormControlLabel.stories.tsx +++ b/packages/form-utils/src/lib/FormControlLabel.stories.tsx @@ -12,7 +12,7 @@ import { FormLabel, FormControlLabel, FormControlLabelProps, Switch } from '..'; /** Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component to display a label. */ const meta: Meta = { - title: 'Form Components/FormUtils/FormControlLabel', + title: 'Form Components/Uncontrolled FormUtils/FormControlLabel', component: FormControlLabel, tags: ['autodocs'], parameters: { diff --git a/packages/form-utils/src/lib/FormGroup.stories.tsx b/packages/form-utils/src/lib/FormGroup.stories.tsx index c1fdf4681c..5ee6bba4ac 100644 --- a/packages/form-utils/src/lib/FormGroup.stories.tsx +++ b/packages/form-utils/src/lib/FormGroup.stories.tsx @@ -6,7 +6,7 @@ import { FormGroup, FormGroupProps, FormLabel, FormControl, FormControlLabel } f /** Form input context. Controls styling (`size`, etc) and state (`error`, `disabled`, etc) across input components, like `FormLabel`, `Input`, `FormHelperText`. */ export default { - title: 'Form Components/FormUtils/FormGroup', + title: 'Form Components/Uncontrolled FormUtils/FormGroup', component: FormGroup, tags: ['autodocs'], args: { diff --git a/packages/form-utils/src/lib/FormHelperText.stories.tsx b/packages/form-utils/src/lib/FormHelperText.stories.tsx index e114ac0bf1..bb24d1ab9a 100644 --- a/packages/form-utils/src/lib/FormHelperText.stories.tsx +++ b/packages/form-utils/src/lib/FormHelperText.stories.tsx @@ -6,7 +6,7 @@ import { FormHelperText, FormHelperTextProps, FormLabel, Input } from '..'; /** Label component for use with individual inputs, form controls, and form groups. For labels to use with `checkbox`/`radio` see `FormControlLabel`. */ const meta: Meta = { - title: 'Form Components/FormUtils/FormHelperText', + title: 'Form Components/Uncontrolled FormUtils/FormHelperText', component: FormHelperText, tags: ['autodocs'], }; diff --git a/packages/form-utils/src/lib/FormLabel.stories.tsx b/packages/form-utils/src/lib/FormLabel.stories.tsx index 482d9c56ed..91fb90c71c 100644 --- a/packages/form-utils/src/lib/FormLabel.stories.tsx +++ b/packages/form-utils/src/lib/FormLabel.stories.tsx @@ -8,7 +8,7 @@ import { FormHelperText, FormLabel, FormLabelProps, Input } from '..'; /** Label component for use with individual inputs, form controls, and form groups. For labels to use with `checkbox`/`radio` see `FormControlLabel`. */ const meta: Meta = { - title: 'Form Components/FormUtils/FormLabel', + title: 'Form Components/Uncontrolled FormUtils/FormLabel', component: FormLabel, tags: ['autodocs'], }; diff --git a/packages/form-utils/src/lib/Input.stories.tsx b/packages/form-utils/src/lib/Input.stories.tsx index 654441a002..c818aaaf4b 100644 --- a/packages/form-utils/src/lib/Input.stories.tsx +++ b/packages/form-utils/src/lib/Input.stories.tsx @@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import { Input, InputProps } from './Input'; const meta: Meta = { - title: 'Form Components/FormUtils/Input', + title: 'Form Components/Uncontrolled FormUtils/Input', component: Input, tags: ['autodocs'], args: { diff --git a/packages/form-utils/src/lib/Radio.stories.tsx b/packages/form-utils/src/lib/Radio.stories.tsx index a45a069982..f95d22e30e 100644 --- a/packages/form-utils/src/lib/Radio.stories.tsx +++ b/packages/form-utils/src/lib/Radio.stories.tsx @@ -5,7 +5,7 @@ import { Radio, RadioProps } from './Radio'; import { FormControlLabel } from '..'; const meta: Meta = { - title: 'Form Components/FormUtils/Radio', + title: 'Form Components/Uncontrolled FormUtils/Radio', component: Radio, tags: ['autodocs'], parameters: { diff --git a/packages/form-utils/src/lib/RadioGroup.stories.tsx b/packages/form-utils/src/lib/RadioGroup.stories.tsx index 93920df282..9b747ede7e 100644 --- a/packages/form-utils/src/lib/RadioGroup.stories.tsx +++ b/packages/form-utils/src/lib/RadioGroup.stories.tsx @@ -6,7 +6,7 @@ import { FormControl, FormControlLabel, FormHelperText, FormLabel } from '..'; import { Radio } from './Radio'; const meta: Meta = { - title: 'Form Components/FormUtils/RadioGroup', + title: 'Form Components/Uncontrolled FormUtils/RadioGroup', component: RadioGroup, tags: ['autodocs'], }; diff --git a/packages/form-utils/src/lib/RequiredKey.stories.tsx b/packages/form-utils/src/lib/RequiredKey.stories.tsx index 07a23d0a0b..17b9ced79f 100644 --- a/packages/form-utils/src/lib/RequiredKey.stories.tsx +++ b/packages/form-utils/src/lib/RequiredKey.stories.tsx @@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; import { RequiredKey } from './RequiredKey'; const meta: Meta = { - title: 'Form Components/FormUtils/RequiredKey', + title: 'Form Components/Uncontrolled FormUtils/RequiredKey', component: RequiredKey, tags: ['autodocs'], }; diff --git a/packages/form-utils/src/lib/SearchBy.stories.tsx b/packages/form-utils/src/lib/SearchBy.stories.tsx index 33a39e196c..3d4da5fd47 100644 --- a/packages/form-utils/src/lib/SearchBy.stories.tsx +++ b/packages/form-utils/src/lib/SearchBy.stories.tsx @@ -9,7 +9,7 @@ import { SearchIcon } from '@availity/mui-icon'; import { useState } from 'react'; const meta: Meta = { - title: 'Form Components/FormUtils/SearchByFormGroup', + title: 'Form Components/Uncontrolled FormUtils/SearchByFormGroup', component: SearchByFormGroup, tags: ['autodocs'], }; diff --git a/packages/form-utils/src/lib/SearchBy.tsx b/packages/form-utils/src/lib/SearchBy.tsx index 86bd5423d5..0d9ea6fc01 100644 --- a/packages/form-utils/src/lib/SearchBy.tsx +++ b/packages/form-utils/src/lib/SearchBy.tsx @@ -47,7 +47,7 @@ export const SearchByContainer = styled(FormGroup, { /** A wrapper for the search/searchby multi-input pattern. * * _Will only work with full fields (`TextField`, `Autocomplete`). If building a custom field, ensure it's wrapped in a `FormControl`. - * The "Search By" field id must be passed as the FormGroup supplies the label. See [TextField documentation](https://availity.github.io/element/?path=/docs/form-components-textfield-textfield--docs) for additional steps if using `select` instead of `Autocomplete`._ + * The "Search By" field id must be passed as the FormGroup supplies the label. See [TextField documentation](https://availity.github.io/element/?path=/docs/form-components-uncontrolled-fields-textfield--docs) for additional steps if using `select` instead of `Autocomplete`._ */ export const SearchByFormGroup = ({children, searchById, searchByLabel = 'Search By', ...rest}: SearchByFormGroupProps) => ( @@ -56,4 +56,4 @@ export const SearchByFormGroup = ({children, searchById, searchByLabel = 'Search {children} -); \ No newline at end of file +); diff --git a/packages/form-utils/src/lib/Select.stories.tsx b/packages/form-utils/src/lib/Select.stories.tsx index 35bd1056a9..c37078a7a7 100644 --- a/packages/form-utils/src/lib/Select.stories.tsx +++ b/packages/form-utils/src/lib/Select.stories.tsx @@ -11,7 +11,7 @@ import { Typography } from '@availity/mui-typography'; import { FormLabel, Select, SelectProps, SelectChangeEvent } from '..'; const meta: Meta = { - title: 'Form Components/FormUtils/Select', + title: 'Form Components/Uncontrolled FormUtils/Select', component: Select, tags: ['autodocs'], args: { size: 'small' }, diff --git a/packages/form-utils/src/lib/Switch.stories.tsx b/packages/form-utils/src/lib/Switch.stories.tsx index 53351176f5..ab826e4ae3 100644 --- a/packages/form-utils/src/lib/Switch.stories.tsx +++ b/packages/form-utils/src/lib/Switch.stories.tsx @@ -6,7 +6,7 @@ import { FormControlLabel, Switch, SwitchProps, FormGroup, FormLabel } from '..' import { Typography } from '@availity/mui-typography'; const meta: Meta = { - title: 'Form Components/FormUtils/Switch', + title: 'Form Components/Uncontrolled FormUtils/Switch', component: Switch, tags: ['autodocs'], parameters: { diff --git a/packages/icon/src/lib/bs4migration.mdx b/packages/icon/src/lib/bs4migration.mdx index 1e1197f5d2..a2b5f10348 100644 --- a/packages/icon/src/lib/bs4migration.mdx +++ b/packages/icon/src/lib/bs4migration.mdx @@ -1,6 +1,6 @@ import { Meta, Source } from '@storybook/addon-docs/blocks'; - + # Icon Migration diff --git a/packages/textfield/README.md b/packages/textfield/README.md index 20252a47f1..00f55125e5 100644 --- a/packages/textfield/README.md +++ b/packages/textfield/README.md @@ -10,7 +10,7 @@ This package extends the MUI Textfield component: [MUI Textfield Docs](https://mui.com/components/textfield/) -Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-textfield-introduction--docs) +Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-uncontrolled-fields-textfield-readme--docs) Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.com/2e36e50c7) diff --git a/packages/textfield/introduction.mdx b/packages/textfield/introduction.mdx index f899b8a0ec..2e3f56c8a8 100644 --- a/packages/textfield/introduction.mdx +++ b/packages/textfield/introduction.mdx @@ -2,7 +2,7 @@ import { Markdown, Meta } from '@storybook/addon-docs/blocks'; import ReadMe from './README.md?raw'; import CHANGELOG from './CHANGELOG.md?raw'; - + {ReadMe} diff --git a/packages/textfield/package.json b/packages/textfield/package.json index eb75b031d1..c4a8204882 100644 --- a/packages/textfield/package.json +++ b/packages/textfield/package.json @@ -8,7 +8,7 @@ "availity", "mui" ], - "homepage": "https://availity.github.io/element/?path=/docs/form-components-textfield-introduction--docs", + "homepage": "https://availity.github.io/element/?path=/docs/form-components-uncontrolled-fields-textfield-readme--docs", "bugs": { "url": "https://github.com/Availity/element/issues" }, diff --git a/packages/textfield/src/lib/TextField.stories.tsx b/packages/textfield/src/lib/TextField.stories.tsx index b00e1adc15..6646f74b14 100644 --- a/packages/textfield/src/lib/TextField.stories.tsx +++ b/packages/textfield/src/lib/TextField.stories.tsx @@ -22,7 +22,7 @@ import { Typography } from '@availity/mui-typography'; import { TextField, TextFieldProps } from './TextField'; const meta: Meta = { - title: 'Form Components/TextField/TextField', + title: 'Form Components/Uncontrolled Fields/TextField', component: TextField, tags: ['autodocs'], args: { helperText: 'Helper Text', fullWidth: false }, @@ -60,7 +60,7 @@ export const _TextFieldCharacterCountOverflow: StoryObj = { }; /** Notice the new `read-only` styling. We're moving away from `disabled` in favor of `read-only`. - * _See the [Disabled Fields Explainer](./?path=/docs/bs4-migration-form-migration--disabled-fields) for more information on when to use each._ + * _See the [Disabled Fields Explainer](./?path=/docs/upgrading/bs4-migration-form-migration--disabled-fields) for more information on when to use each._ */ export const _States: StoryObj = { render: (args: TextFieldProps) => ( @@ -392,7 +392,7 @@ export const _MultiSelect: StoryObj = { args: { label: 'MultiSelect' }, }; -/** Wrap the fields in a `SearchByFormGroup` from the [@availity/mui-form-utils](./?path=/docs/form-components-formutils-introduction--docs) package for our combined search by styles. +/** Wrap the fields in a `SearchByFormGroup` from the [@availity/mui-form-utils](./?path=/docs/form-components-uncontrolled-formutils-readme--docs) package for our combined search by styles. * * It is recommended to use `Autocomplete` for the "Search By" selection, however a `select` `TextField` can be used with `slotProps.select.labelId = {searchById passed to form group}-label`. */