From 6efed45a2df05e92117c5092918fd64c81e61543 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 3 Nov 2024 18:29:44 +0100 Subject: [PATCH 1/6] [docs] App starters --- .../components/snackbars/snackbars.md | 2 +- .../components/text-fields/text-fields.md | 6 +- .../related-projects/related-projects.md | 59 +++++++++++-------- 3 files changed, 39 insertions(+), 28 deletions(-) diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md index 7b50dc4fc504eb..5a874f8d2b9c45 100644 --- a/docs/data/material/components/snackbars/snackbars.md +++ b/docs/data/material/components/snackbars/snackbars.md @@ -87,7 +87,7 @@ This demo shows how to display multiple Snackbars without stacking them by using {{"demo": "ConsecutiveSnackbars.js"}} -## Third-party integrations +## Complementary components ### notistack diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index 583fe3cd894ef5..460f22fb31e052 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -355,11 +355,11 @@ In order for the text field to be accessible, **the input should be linked to th ## Complementary projects + + For more advanced use cases, you might be able to take advantage of: -- [react-hook-form](https://react-hook-form.com/): React hook for form validation. -- [react-hook-form-mui](https://github.com/dohomi/react-hook-form-mui): Material UI and react-hook-form combined. +- [react-hook-form-mui](https://github.com/dohomi/react-hook-form-mui): Material UI and [react-hook-form](https://react-hook-form.com/) combined. - [formik-material-ui](https://github.com/stackworx/formik-mui): Bindings for using Material UI with [formik](https://formik.org/). - [mui-rff](https://github.com/lookfirst/mui-rff): Bindings for using Material UI with [React Final Form](https://final-form.org/react). - [@ui-schema/ds-material](https://www.npmjs.com/package/@ui-schema/ds-material) Bindings for using Material UI with [UI Schema](https://github.com/ui-schema/ui-schema). JSON Schema compatible. -- [@data-driven-forms/mui-component-mapper](https://www.data-driven-forms.org/provided-mappers/mui-component-mapper): Bindings for using Material UI with [Data Driven Forms](https://github.com/data-driven-forms/react-forms). diff --git a/docs/data/material/discover-more/related-projects/related-projects.md b/docs/data/material/discover-more/related-projects/related-projects.md index 93f895c38b3fff..536025e47ad242 100644 --- a/docs/data/material/discover-more/related-projects/related-projects.md +++ b/docs/data/material/discover-more/related-projects/related-projects.md @@ -7,10 +7,20 @@ Developers from the community have built some excellent supplemental tools for w Do you have a project that you think should be featured here? Feel free to submit a pull request and the maintainers will work with you to write the description. -## Premium tools +## App starters -- [ScaffoldHub](https://v2.scaffoldhub.io/scaffolds/react-material-ui?partner=1): +### Admin frameworks + +- [React-admin](https://github.com/marmelab/react-admin): A front-end framework for building data-driven applications running in the browser on top of REST/GraphQL APIs. +- [Refine](https://github.com/refinedev/refine): An open source, headless React meta-framework for the rapid development of web applications. + +### Paid starters + +- [Divjoy](https://divjoy.com?via=material-ui): + - Create a Material UI app in minutes. + - Templates, authentication, database integration, subscription payments, and more. +- [ScaffoldHub](https://v2.scaffoldhub.io/scaffolds/react-material-ui?partner=1): - Tool for building web applications. - Choose your framework and library (React with Material UI). - Choose your database (SQL, MongoDB or Firestore). @@ -18,52 +28,53 @@ Feel free to submit a pull request and the maintainers will work with you to wri - Generate your application, including a complete scaffolded backend. - Preview your application online and download the generated code. -- [Divjoy](https://divjoy.com?via=material-ui): - - - Create a Material UI app in minutes. - - Templates, authentication, database integration, subscription payments, and more. - -## Free tools - -### Admin frameworks - -- [React-admin](https://github.com/marmelab/react-admin): A front-end framework for building data-driven applications running in the browser on top of REST/GraphQL APIs. -- [Refine](https://github.com/refinedev/refine): An open source, headless React meta-framework for the rapid development of web applications. - -### Theming tools +## Theming tools - [Material palette generator](https://m2.material.io/inline-tools/color/): The official Material Design 2 palette generator tool. -### Supplementary components +## Complementary components -#### Layout +### Layout - [MUI Treasury Layout](https://mui-treasury.com/?path=/docs/layout-v6-introduction--docs): Components to handle the overall layout of a page. Check out examples such as [a legacy.reactjs.org clone](https://mui-treasury.com/?path=/story/layout-v6-app-react-legacy--react-legacy). -#### Image +### Image - [mui-image](https://github.com/benmneb/mui-image): The only Material UI image component to satisfy the Material Design 2 guidelines for loading images. -#### Chips input +### Chips input - [mui-chips-input](https://github.com/viclafouch/mui-chips-input): A chips input designed for use with Material UI. -#### Phone number input +### Phone number input - [mui-tel-input](https://github.com/viclafouch/mui-tel-input): A phone number input designed for use with Material UI, built with [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js). -#### One-time password input +### One-time password input - [mui-otp-input](https://github.com/viclafouch/mui-otp-input): A one-time password input designed for use with Material UI. -#### File input +### File input - [mui-file-input](https://github.com/viclafouch/mui-file-input): A file input designed for use with Material UI. -#### Color input +### Color input - [mui-color-input](https://github.com/viclafouch/mui-color-input): A color input designed for use with Material UI, built with [TinyColor](https://tinycolor.vercel.app/). -#### Rich text editor +### Rich text editor - [mui-tiptap](https://github.com/sjdemartini/mui-tiptap): A customizable Material UI-styled WYSIWYG rich text editor, built with [Tiptap](https://tiptap.dev/). + +### Form + + + +- [react-hook-form-mui](https://github.com/dohomi/react-hook-form-mui): Material UI and [react-hook-form](https://react-hook-form.com/) combined. +- [formik-material-ui](https://github.com/stackworx/formik-mui): Bindings for using Material UI with [formik](https://formik.org/). +- [mui-rff](https://github.com/lookfirst/mui-rff): Bindings for using Material UI with [React Final Form](https://final-form.org/react). +- [@ui-schema/ds-material](https://www.npmjs.com/package/@ui-schema/ds-material) Bindings for using Material UI with [UI Schema](https://github.com/ui-schema/ui-schema). JSON Schema compatible. + +### Notification + +- [notistack](https://github.com/iamhosseindhv/notistack): Makes it easy to display snackbars (so you don't have to deal with open/close state of them). From 084d16f0e4d0e6613efc243ec957ab9dba6cb88c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 3 Nov 2024 18:43:58 +0100 Subject: [PATCH 2/6] more --- docs/data/material/components/dialogs/dialogs.md | 2 +- docs/data/material/components/menus/menus.md | 2 +- docs/data/material/components/popover/popover.md | 2 +- docs/data/material/components/popper/popper.md | 2 +- docs/data/material/components/text-fields/text-fields.md | 2 +- .../material/discover-more/related-projects/related-projects.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md index c12c0b7a4306ec..47e02ab2dbb4bb 100644 --- a/docs/data/material/components/dialogs/dialogs.md +++ b/docs/data/material/components/dialogs/dialogs.md @@ -153,7 +153,7 @@ Follow the [Modal performance section](/material-ui/react-modal/#performance). Follow the [Modal limitations section](/material-ui/react-modal/#limitations). -## Complementary projects +## Supplementary projects For more advanced use cases you might be able to take advantage of: diff --git a/docs/data/material/components/menus/menus.md b/docs/data/material/components/menus/menus.md index ca8b591883b6de..f8b357ae77bdcc 100644 --- a/docs/data/material/components/menus/menus.md +++ b/docs/data/material/components/menus/menus.md @@ -107,7 +107,7 @@ Here is an example of a context menu. (Right click to open.) {{"demo": "ContextMenu.js"}} -## Complementary projects +## Supplementary projects For more advanced use cases you might be able to take advantage of: diff --git a/docs/data/material/components/popover/popover.md b/docs/data/material/components/popover/popover.md index 9aceeb3c6dd248..ec1c1fd1ab8d53 100644 --- a/docs/data/material/components/popover/popover.md +++ b/docs/data/material/components/popover/popover.md @@ -64,7 +64,7 @@ The usage of a virtual element for the Popover component requires the `nodeType` This is different from virtual elements used for the [`Popper`](/material-ui/react-popper/#virtual-element) or [`Tooltip`](/material-ui/react-tooltip/#virtual-element) components, both of which don't require the property. ::: -## Complementary projects +## Supplementary projects For more advanced use cases, you might be able to take advantage of: diff --git a/docs/data/material/components/popper/popper.md b/docs/data/material/components/popper/popper.md index d88359dd7b90f0..f7101d8df762ba 100644 --- a/docs/data/material/components/popper/popper.md +++ b/docs/data/material/components/popper/popper.md @@ -64,7 +64,7 @@ Highlight part of the text to see the popper: {{"demo": "VirtualElementPopper.js"}} -## Complementary projects +## Supplementary projects For more advanced use cases you might be able to take advantage of: diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index 460f22fb31e052..8fc5d00dc42fa1 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -353,7 +353,7 @@ In order for the text field to be accessible, **the input should be linked to th ``` -## Complementary projects +## Supplementary projects diff --git a/docs/data/material/discover-more/related-projects/related-projects.md b/docs/data/material/discover-more/related-projects/related-projects.md index 536025e47ad242..82c634bc3a80d0 100644 --- a/docs/data/material/discover-more/related-projects/related-projects.md +++ b/docs/data/material/discover-more/related-projects/related-projects.md @@ -32,7 +32,7 @@ Feel free to submit a pull request and the maintainers will work with you to wri - [Material palette generator](https://m2.material.io/inline-tools/color/): The official Material Design 2 palette generator tool. -## Complementary components +## Supplementary components ### Layout From 8d9ee7d6876572f3dcfcc43ff03d04ed343509b1 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 3 Nov 2024 18:45:06 +0100 Subject: [PATCH 3/6] more --- docs/data/material/components/snackbars/snackbars.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md index 5a874f8d2b9c45..8a683a5e617aee 100644 --- a/docs/data/material/components/snackbars/snackbars.md +++ b/docs/data/material/components/snackbars/snackbars.md @@ -87,7 +87,7 @@ This demo shows how to display multiple Snackbars without stacking them by using {{"demo": "ConsecutiveSnackbars.js"}} -## Complementary components +## Supplementary components ### notistack From 3d6e364c98e79fc4bc4550046de17b57d7360505 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 3 Nov 2024 18:48:26 +0100 Subject: [PATCH 4/6] prettier --- .../material/discover-more/related-projects/related-projects.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/data/material/discover-more/related-projects/related-projects.md b/docs/data/material/discover-more/related-projects/related-projects.md index 82c634bc3a80d0..b45be49f2357ea 100644 --- a/docs/data/material/discover-more/related-projects/related-projects.md +++ b/docs/data/material/discover-more/related-projects/related-projects.md @@ -17,6 +17,7 @@ Feel free to submit a pull request and the maintainers will work with you to wri ### Paid starters - [Divjoy](https://divjoy.com?via=material-ui): + - Create a Material UI app in minutes. - Templates, authentication, database integration, subscription payments, and more. From 4f02c6b6faa29dc76eb7bf84bc5c782a357f05fd Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 17 Nov 2024 18:08:47 +0100 Subject: [PATCH 5/6] Sam's review Co-authored-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Olivier Tassinari --- .../material/discover-more/related-projects/related-projects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/discover-more/related-projects/related-projects.md b/docs/data/material/discover-more/related-projects/related-projects.md index b45be49f2357ea..42f57f67a7b7de 100644 --- a/docs/data/material/discover-more/related-projects/related-projects.md +++ b/docs/data/material/discover-more/related-projects/related-projects.md @@ -78,4 +78,4 @@ Feel free to submit a pull request and the maintainers will work with you to wri ### Notification -- [notistack](https://github.com/iamhosseindhv/notistack): Makes it easy to display snackbars (so you don't have to deal with open/close state of them). +- [notistack](https://github.com/iamhosseindhv/notistack): Display multiple snackbars that can be stacked and queued—this tool makes it simpler to handle the open and close states. From cd2d1d06f3652ecc5efaec298f7d42523c8d9f05 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 17 Nov 2024 18:42:07 +0100 Subject: [PATCH 6/6] Sam's review --- .../discover-more/related-projects/related-projects.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/material/discover-more/related-projects/related-projects.md b/docs/data/material/discover-more/related-projects/related-projects.md index 42f57f67a7b7de..32d09fc0f80dbb 100644 --- a/docs/data/material/discover-more/related-projects/related-projects.md +++ b/docs/data/material/discover-more/related-projects/related-projects.md @@ -1,13 +1,13 @@ # Related projects -

A carefully curated list of third-party tools that expand or build on top of Material UI.

+

A carefully curated list of tools that expand or build on top of Material UI.

-Developers from the community have built some excellent supplemental tools for working with Material UI—this page highlights some of the best that we've seen. +The MUI org and developers from the community have built some excellent supplemental tools for working with Material UI—this page highlights some of the best that we've seen. Do you have a project that you think should be featured here? Feel free to submit a pull request and the maintainers will work with you to write the description. -## App starters +## Third-party app starters ### Admin frameworks @@ -29,7 +29,7 @@ Feel free to submit a pull request and the maintainers will work with you to wri - Generate your application, including a complete scaffolded backend. - Preview your application online and download the generated code. -## Theming tools +## Third-party theming tools - [Material palette generator](https://m2.material.io/inline-tools/color/): The official Material Design 2 palette generator tool.