Skip to content

Commit a7c37c0

Browse files
nishkohli96nishkohli96
authored
v2.0.0 - New Components, Features, Enhancements, Fixes & Compatability (#10)
* update docs website * setup basic react-intl phone * RHFPhoneInput wip * almost done * preferred countries * RHFPhoneInput done * folder structure setup wip * wip * folder structure done * links in fileview * tree view done * allLabelsAboveFormField prop in ConfigProvider * change components from function to constants * isLabelAboveFormField for applicable components * rm defaultFormHelperTextSx usage in components, access directly in FormHelperText component * rm defaultFormLabelSx usage in components, access directly in FormLabel component * RHFPhoneInput docs done; code optimization * fix country selection wip * fix country selection * country select wip * country select wip * wip * menuitem wip * countrymenuItem wip * country select almost done * country select almost done * RHFCountrySelect wip * working autocomplete done * autocomplete working logic done * wip * wip * wip * wip * wip * update mui pkgs, fix multiple err * wip * RHFCountrySelect done * fn to class components * fn components to const components * rename RenderFormState to FormState * RHFCountrySelect form demo done * RHFCountrySelect done, linting, * rm unused props for RHFCountrySelect * update joi form with newly added components * complete form page render * forms wip * v2 docs * fix RHFSelect * components optimize wip * RHFSwitch updated * RHFRating done * fix 2 lint errors * RHF date & datetime picker * RHFTimePicker done * RHFRichTextEditor fix * RHFPhoneInput done * onValueChange fn updated for all components * linting * fix forms * fix formHelperText console err * def FormLabelProps in types * def FormHelperTextProps in types * def FormControlLabelProps in types * order rhf imports * minor changes * correct RHFNativeSelect * control for RHFTextField & RHFPasswordInput * docs updated for textfield * add disable prop in checkbox and radiogroup * docs updated till RHFSelect * RHFNativeSelect done * update v1.0.3 docs * RHFCountrySelect docs done * RHFCheckboxGroup docs done * MUI components docs updated * pickers done * RHFRichTextEditor docs updated * update customization page, rename allLabelsAboveFormFields to allLabelsAboveFields * customization docs updated * RHFPhoneInput docs updated * complete formHelpers docs, add font plugin to rte * update README, changelog & migration docs * update readme * add v1 code * correct readme * RHFMultiSelectDropdown initial * RHFMultiSelectDropdown wip * RHFMultiSelectDropdown almost done * RHFMultiSelectDropdown done * ts errs fix wip * RHFMultiSelectDropdown examples done * setup docs for RHFMultiSelectDropdown * add archived code * multi selct working for objects * wip * code improvements * rm support for number options from RHFMultiSelectDropdown * optimization wip * wip * optimization wip * wip * optimization wip * RHFMultiSelectDropdown done * renaming MultiSelectDropdown to MultiAutocomplete * rhfautocomplete wip * autocomplete wip * wip * wip * fixing logic * wip * wip * wip * RHFAutocomplete almost done * RHFMultiAutocomplete fix wip * fix multiautocomplete * autocomplete testing wip * prep autocomplete egs, run linting * update mui docs ordering * autocompletes docs done * Bump Docusaurus from 3.5.2 to 3.6.3 * RHFTagsInput wip * wip * wip * wip * wip * wip * add required prop for inputs * required done for slect & autocompletes * required prop added to all mui components * add required prop for all components * wip * fix formlabel issue * required for complete forms * select ex with number options * rename types * update options * clipboard event * maxVisibleTags prop * backspace deletion and UI in disabled state * TagsInput padding done * RHFTagsInput done * RHFTagsInput docs done * lint code * rename isMuiV6 to isMuiV5 * handle deprecated props for autocomplete * wip * done for InputProps * fix lint errs * upgrade to mui v6, create backup of v5 code * rename isMuiV5 to isAboveMuiV5 * upgrade from Grid to Grid2 in demo pkg * update treeview in docs * lint code * fix autocomplete chip props * handle ts err for textfield components * add displayFlagOnSelect in RHFCountrySelect * rename docs and demo pkgs * rm v5 code * update demo homepage * add info about theming in ckeditor5 * wip * multiAutocomplete fix formlabel issue * wip * handle deprecated ChipProps prop for autocomplete * wip * wip * update docs and mui-x-date pickers * correct RHFNativeSelect * fix rhfmultiautocomplete working * some code optimization * code cleanup wip * code format * memoize areAllSelected, isIndeterminate * memoize airportList * optimize code * RHFColorPicker v2 * optimise colorToString fn * colorToString docs done * update RHFColorPicker in complete forms * wip * upgrade react-color-palette to 7.3.0 * done
1 parent 85b30f8 commit a7c37c0

File tree

197 files changed

+13913
-5289
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

197 files changed

+13913
-5289
lines changed

‎README.md

+16-5
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,24 @@
66
![GitHub Release Date - Published_At](https://img.shields.io/github/release-date/nishkohli96/rhf-mui-components)
77
[![Netlify Status](https://api.netlify.com/api/v1/badges/0c4fc578-ed19-4a5a-a3cd-e59fedcdb689/deploy-status)](https://app.netlify.com/sites/rhf-mui-components/deploys)
88

9-
**A suite of reusable mui components for react-hook-form to minimize your time and effort in creating forms**
9+
**A suite of 20 reusable mui components for react-hook-form to minimize your time and effort in creating forms**
1010

11-
To view the documentation for this package, visit [https://rhf-mui-components.netlify.app/](https://rhf-mui-components.netlify.app/).
11+
## Explore and Get Started 🚀
1212

13-
To explore and interact with the form components, visit the [https://rhf-mui-components-examples.netlify.app/](https://rhf-mui-components-examples.netlify.app/).
13+
### Documentation 📖
14+
Access the full documentation for rhf-mui-components, including setup instructions, API references, and examples:
1415

15-
Codesandbox Playground - [https://codesandbox.io/p/devbox/rhf-mui-components-examples-y8lj9l](https://codesandbox.io/p/devbox/rhf-mui-components-examples-y8lj9l)
16+
👉 [Documentation Site](https://rhf-mui-components.netlify.app/)
17+
18+
### Interactive Demos 🎮
19+
Try out and experiment with the form components in a live environment:
20+
21+
👉 [Live Demo Examples](https://rhf-mui-components-examples.netlify.app/)
22+
23+
### CodeSandbox Playground 🛠️
24+
Dive deeper and experiment with the package in an editable playground on CodeSandbox:
25+
26+
👉 [CodeSandbox Project](https://codesandbox.io/p/devbox/rhf-mui-components-examples-y8lj9l)
1627

1728
## Setup
1829
Run the setup script.
@@ -25,7 +36,7 @@ This will perform the following tasks:
2536

2637
- Install `node_modules` in workspace root
2738
- Build the `@nish1896/rhf-mui-components` package.
28-
- Link this package to `@nish1896/rhf-mui-components-examples` repo to test new and existing components
39+
- Link this package to `@nish1896/rhf-mui-demo` repo to test new and existing components
2940

3041
To apply any changes made to the package, rebuild it by running the command below:
3142

‎apps/rhf-mui-demo/README.md

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
# @nish1896/rhf-mui-components-examples
1+
# @nish1896/rhf-mui-demo
22

3-
**The repo to play around with this package when in development 🛠️.**
3+
**A playground repository to explore and experiment with the form components in this package during development. 🛠️**
44

5-
View examples for all the components included in [@nish1896/rhf-mui-components](https://www.npmjs.com/package/@nish1896/rhf-mui-components) on [https://rhf-mui-components-examples.netlify.app/](https://rhf-mui-components-examples.netlify.app/).
5+
### Live Examples
6+
Explore live examples for all the components included in the package:
67

7-
To browse the documentation, visit [https://rhf-mui-components.netlify.app](https://rhf-mui-components.netlify.app).
8+
👉 [Examples Demo](https://rhf-mui-components-examples.netlify.app/)
9+
10+
### Documentation
11+
Browse comprehensive documentation, setup guides, and API references for @nish1896/rhf-mui-components:
12+
13+
👉 [Documentation Site](https://rhf-mui-components.netlify.app)

‎apps/rhf-mui-demo/package.json

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
2-
"name": "@nish1896/rhf-mui-components-examples",
3-
"version": "1.0.2",
2+
"name": "@nish1896/rhf-mui-demo",
3+
"version": "2.0.0",
44
"private": true,
55
"author": "Nishant Kohli",
66
"scripts": {
77
"dev": "next dev -p 3001",
88
"build": "next build",
9-
"start": "next start",
9+
"start": "next start -p 3001",
1010
"lint": "next lint --fix"
1111
},
1212
"dependencies": {
@@ -15,10 +15,12 @@
1515
"@emotion/react": "^11.11.4",
1616
"@emotion/styled": "^11.11.5",
1717
"@hookform/resolvers": "^3.9.0",
18-
"@mui/icons-material": "^5.15.19",
19-
"@mui/material": "^5.15.19",
20-
"@mui/material-nextjs": "^5.15.11",
21-
"@mui/x-date-pickers": "^7.7.0",
18+
"@mui/icons-material": "^6.1.10",
19+
"@mui/material": "^6.1.10",
20+
"@mui/material-nextjs": "^6.1.9",
21+
"@mui/x-date-pickers": "^7.23.2",
22+
"@mui/x-tree-view": "^7.23.0",
23+
"@faker-js/faker": "^9.2.0",
2224
"ckeditor5": "^43.0.0",
2325
"class-transformer": "^0.5.1",
2426
"class-validator": "^0.14.1",
@@ -29,9 +31,10 @@
2931
"moment": "^2.30.1",
3032
"next": "14.2.16",
3133
"react": "^18",
32-
"react-color-palette": "7.2.2",
34+
"react-color-palette": "7.3.0",
3335
"react-dom": "^18",
3436
"react-hook-form": "^7.53.0",
37+
"react-international-phone": "^4.3.0",
3538
"react-json-view": "^1.21.3",
3639
"sharp": "^0.33.5",
3740
"superstruct": "^2.0.2",

‎apps/rhf-mui-demo/src/app/autocomplete/page.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type { Metadata } from 'next';
2+
import dynamic from 'next/dynamic';
3+
import { ContentContainer, PageHeading, LinksList, SubHeading } from '@/components';
4+
import { DocsLinks, SourceCodeLinks } from '@/constants';
5+
6+
const ClientForm = dynamic(() => import('@/forms/autocomplete'), { ssr: false });
7+
8+
const title = 'Autocomplete';
9+
const description = 'Showcase of Autocomplete components - RHFAutocomplete, RHFMultiAutocomplete and RHFCountrySelect designed for selecting single or multiple values in form.';
10+
11+
export const metadata: Metadata = {
12+
title,
13+
description
14+
};
15+
16+
const MultiSelectDropdownFormPage = () => {
17+
const codeLinks = [
18+
SourceCodeLinks.countrySelect,
19+
];
20+
const docsLinks = [
21+
DocsLinks.rhfAutocomplete,
22+
DocsLinks.rhfMultiAutocomplete,
23+
DocsLinks.rhfCountrySelect
24+
];
25+
26+
return (
27+
<ContentContainer>
28+
<PageHeading title={title} />
29+
<SubHeading title={description}/>
30+
<ClientForm />
31+
<LinksList links={docsLinks} />
32+
<LinksList links={codeLinks} areCodeLinks />
33+
</ContentContainer>
34+
);
35+
};
36+
37+
export default MultiSelectDropdownFormPage;

‎apps/rhf-mui-demo/src/app/checkbox-and-radiogroup/page.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const metadata: Metadata = {
1313
description
1414
};
1515

16-
export default function CheckboxRadioZodFormPage() {
16+
const CheckboxRadioZodFormPage = () => {
1717
const links = [
1818
DocsLinks.rhfCheckbox,
1919
DocsLinks.rhfCheckboxGroup,
@@ -30,8 +30,10 @@ export default function CheckboxRadioZodFormPage() {
3030
<PageHeading title={title} />
3131
<SubHeading title={description}/>
3232
<ClientForm />
33-
<LinksList links={codeLinks} areCodeLinks />
3433
<LinksList links={links} />
34+
<LinksList links={codeLinks} areCodeLinks />
3535
</ContentContainer>
3636
);
37-
}
37+
};
38+
39+
export default CheckboxRadioZodFormPage;

‎apps/rhf-mui-demo/src/app/complete-form-joi/page.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import type { Metadata } from 'next';
2+
import dynamic from 'next/dynamic';
3+
import { ContentContainer, PageHeading, LinksList, SubHeading } from '@/components';
4+
import { DocsLinks, SourceCodeLinks, CodeSandboxLinks, ValidationLibLinks } from '@/constants';
5+
6+
const ClientForm = dynamic(() => import('@/forms/complete-form-with-joi'), { ssr: false });
7+
8+
const title = 'Complete Form with Joi';
9+
const description = 'A complete form showcasing all components from this package, with validation handled by Joi.';
10+
11+
export const metadata: Metadata = {
12+
title,
13+
description
14+
};
15+
16+
const CompleteFormWithJoiPage = () => {
17+
const links = Object.keys(DocsLinks).map(k => DocsLinks[k]);
18+
const codeLinks = [
19+
SourceCodeLinks.completeFormJoi,
20+
CodeSandboxLinks.completeForm
21+
];
22+
return (
23+
<ContentContainer>
24+
<PageHeading title={title} />
25+
<SubHeading title={description}/>
26+
<ClientForm />
27+
<LinksList links={[...links, ValidationLibLinks.joi]} />
28+
<LinksList links={codeLinks} areCodeLinks />
29+
</ContentContainer>
30+
);
31+
};
32+
33+
export default CompleteFormWithJoiPage;

‎apps/rhf-mui-demo/src/app/complete-form/page.tsx

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import type { Metadata } from 'next';
22
import dynamic from 'next/dynamic';
33
import { ContentContainer, PageHeading, LinksList, SubHeading } from '@/components';
4-
import { DocsLinks, SourceCodeLinks, CodeSandboxLinks, ValidationLibLinks } from '@/constants';
4+
import { DocsLinks, SourceCodeLinks, CodeSandboxLinks } from '@/constants';
55

6-
const ClientForm = dynamic(() => import('@/forms/complete-form-with-joi'), { ssr: false });
6+
const ClientForm = dynamic(() => import('@/forms/complete-form'), { ssr: false });
77

8-
const title = 'Complete Form with Joi';
9-
const description = 'A complete form showcasing all components from this package!';
8+
const title = 'Complete Form with Register Options';
9+
const description = 'A complete form showcasing all components from this package with appropriate validations.';
1010

1111
export const metadata: Metadata = {
1212
title,
1313
description
1414
};
1515

16-
export default function CompleteFormWithJoiPage() {
16+
const CompleteFormPage = () => {
1717
const links = Object.keys(DocsLinks).map(k => DocsLinks[k]);
1818
const codeLinks = [
1919
SourceCodeLinks.completeForm,
@@ -24,8 +24,10 @@ export default function CompleteFormWithJoiPage() {
2424
<PageHeading title={title} />
2525
<SubHeading title={description}/>
2626
<ClientForm />
27+
<LinksList links={links} />
2728
<LinksList links={codeLinks} areCodeLinks />
28-
<LinksList links={[...links, ValidationLibLinks.joi]} />
2929
</ContentContainer>
3030
);
31-
}
31+
};
32+
33+
export default CompleteFormPage;

‎apps/rhf-mui-demo/src/app/customization/page.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Metadata } from 'next';
22
import dynamic from 'next/dynamic';
33
import { ContentContainer, LinksList, PageHeading, SubHeading } from '@/components';
4-
import { DocsLinks, SourceCodeLinks, CodeSandboxLinks } from '@/constants';
4+
import { DocsLinks, SourceCodeLinks, CodeSandboxLinks, ValidationLibLinks } from '@/constants';
55

66
const ClientForm = dynamic(() => import('@/forms/styled-form-with-reusable-component'), { ssr: false });
77

@@ -14,10 +14,11 @@ export const metadata: Metadata = {
1414
description,
1515
};
1616

17-
export default function CustomizationPage() {
17+
const CustomizationPage = () => {
1818
const links = [
1919
DocsLinks.rhfTextField,
20-
DocsLinks.rhfDatePicker
20+
DocsLinks.rhfDatePicker,
21+
ValidationLibLinks.luxon
2122
];
2223
const codeLinks = [
2324
SourceCodeLinks.customization,
@@ -29,8 +30,10 @@ export default function CustomizationPage() {
2930
<PageHeading title={title} />
3031
<SubHeading title={description} />
3132
<ClientForm />
32-
<LinksList links={codeLinks} areCodeLinks />
3333
<LinksList links={links} />
34+
<LinksList links={codeLinks} areCodeLinks />
3435
</ContentContainer>
3536
);
36-
}
37+
};
38+
39+
export default CustomizationPage;

‎apps/rhf-mui-demo/src/app/date-time-pickers/page.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const metadata: Metadata = {
1313
description
1414
};
1515

16-
export default function DateTimePickerFormPage() {
16+
const DateTimePickerFormPage = () => {
1717
const links = [
1818
DocsLinks.rhfDatePicker,
1919
DocsLinks.rhfTimePicker,
@@ -29,8 +29,11 @@ export default function DateTimePickerFormPage() {
2929
<PageHeading title={title} />
3030
<SubHeading title={description}/>
3131
<ClientForm />
32-
<LinksList links={codeLinks} areCodeLinks />
3332
<LinksList links={links} />
33+
<LinksList links={codeLinks} areCodeLinks />
3434
</ContentContainer>
3535
);
36-
}
36+
};
37+
38+
export default DateTimePickerFormPage;
39+

‎apps/rhf-mui-demo/src/app/layout.tsx

+10-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
44
import { AppThemeProvider } from '@/theme';
55
import { AppBar, Footer } from '@/components';
66
import './globals.css';
7-
import Grid from '@mui/material/Grid';
7+
import Grid from '@mui/material/Grid2';
88
import DrawerContent from '@/components/drawer';
99

1010
type RootLayoutProps = {
@@ -22,22 +22,21 @@ export const metadata: Metadata = {
2222
description: 'Examples for RHF-Mui Components'
2323
};
2424

25-
export default function RootLayout({ children }: RootLayoutProps) {
25+
const RootLayout = ({ children }: RootLayoutProps) => {
2626
return (
2727
<html lang="en">
2828
<body className={inter.className}>
2929
<AppRouterCacheProvider options={{ key: 'mui' }}>
3030
<AppThemeProvider>
3131
<AppBar />
3232
<Grid container className="content">
33-
<Grid item md={3} sx={{ display: { xs: 'none', md: 'block' } }}>
34-
<DrawerContent />
35-
</Grid>
3633
<Grid
37-
item
38-
xs={12}
39-
md={9}
34+
size={{ md: 3 }}
35+
sx={{ display: { xs: 'none', md: 'block' } }}
4036
>
37+
<DrawerContent />
38+
</Grid>
39+
<Grid size={{ xs: 12, md: 9 }}>
4140
{children}
4241
</Grid>
4342
</Grid>
@@ -47,4 +46,6 @@ export default function RootLayout({ children }: RootLayoutProps) {
4746
</body>
4847
</html>
4948
);
50-
}
49+
};
50+
51+
export default RootLayout;

‎apps/rhf-mui-demo/src/app/miscellaneous-components/page.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,11 @@ export const metadata: Metadata = {
1313
description
1414
};
1515

16-
export default function MiscellaneousComponentsFormPage() {
16+
const MiscellaneousComponentsFormPage = () => {
1717
const links = [
1818
DocsLinks.rhfColorPicker,
19-
DocsLinks.rhfRichTextEditor
19+
DocsLinks.rhfRichTextEditor,
20+
DocsLinks.rhfPhoneInput
2021
];
2122
const codeLinks = [
2223
SourceCodeLinks.miscellaneous,
@@ -28,8 +29,10 @@ export default function MiscellaneousComponentsFormPage() {
2829
<PageHeading title={title} />
2930
<SubHeading title={description}/>
3031
<ClientForm />
31-
<LinksList links={codeLinks} areCodeLinks />
3232
<LinksList links={links} />
33+
<LinksList links={codeLinks} areCodeLinks />
3334
</ContentContainer>
3435
);
35-
}
36+
};
37+
38+
export default MiscellaneousComponentsFormPage;

‎apps/rhf-mui-demo/src/app/page.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ export const metadata: Metadata = {
99
description: 'Overview of the Examples Website for RHF-MUI Components'
1010
};
1111

12-
export default function Home() {
12+
const HomePage = () => {
1313
return (
1414
<main>
1515
<ContentContainer>
1616
<PageHeading title="@nish1896/rhf-mui-components" />
1717
<Typography variant="h6" color="steelblue">
18-
&quot;A suite of Material-UI and other form components to create and
18+
&quot;A suite of 20 Material-UI based form components to create and
1919
style forms effortlessly within minutes!&quot;
2020
</Typography>
2121

@@ -39,11 +39,14 @@ export default function Home() {
3939
</Typography>
4040
<Typography variant="body1" sx={{ mt: '20px' }}>
4141
To view the documentation of this package, please visit
42+
{' '}
4243
<Link href={ENV_VARS.DOCS_URL} target="_blank">
4344
{` ${ENV_VARS.DOCS_URL}.`}
4445
</Link>
4546
</Typography>
4647
</ContentContainer>
4748
</main>
4849
);
49-
}
50+
};
51+
52+
export default HomePage;

0 commit comments

Comments
 (0)