Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add App starters in related-projects.md #44315

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/data/material/components/dialogs/dialogs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sync with the new header used by Sam in #44191. I guess it makes more sense https://ell.stackexchange.com/questions/188457/difference-between-complementary-and-supplementary.


For more advanced use cases you might be able to take advantage of:

Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/menus/menus.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/popover/popover.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/popper/popper.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/snackbars/snackbars.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ This demo shows how to display multiple Snackbars without stacking them by using

{{"demo": "ConsecutiveSnackbars.js"}}

## Third-party integrations
## Supplementary components
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems to match the other sections. It's not even an integration anyway notistack copies the style but doesn't depend on Material UI.


### notistack

Expand Down
8 changes: 4 additions & 4 deletions docs/data/material/components/text-fields/text-fields.md
Original file line number Diff line number Diff line change
Expand Up @@ -353,13 +353,13 @@ In order for the text field to be accessible, **the input should be linked to th
</FormControl>
```

## Complementary projects
## Supplementary projects

<!-- To sync with related-projects.md -->

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).
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Outdated

Original file line number Diff line number Diff line change
Expand Up @@ -7,63 +7,75 @@ 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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Showing paid content first felt backward.

## App starters
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we can group those under this category.

Copy link
Member Author

@oliviertassinari oliviertassinari Nov 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now, if we subscribe to this view: #40062 (comment), this content is wrong here we should move it under a new "Examples project page".

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alternative titles:

  • Third-party scaffolds
  • Third-party framework integrations

I think it's important to make it clear that we don't maintain anything on this page.


- [ScaffoldHub](https://v2.scaffoldhub.io/scaffolds/react-material-ui?partner=1):
### Admin frameworks

- Tool for building web applications.
- Choose your framework and library (React with Material UI).
- Choose your database (SQL, MongoDB or Firestore).
- Model your database and application with the intuitive GUI.
- Generate your application, including a complete scaffolded backend.
- Preview your application online and download the generated code.
- [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.

## 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.
- [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).
- Model your database and application with the intuitive GUI.
- Generate your application, including a complete scaffolded backend.
- Preview your application online and download the generated code.

### Theming tools
## Theming tools

- [Material palette generator](https://m2.material.io/inline-tools/color/): The official Material Design 2 palette generator tool.

### Supplementary components
## Supplementary components

#### Layout
### Layout
Comment on lines -39 to +38
Copy link
Member Author

@oliviertassinari oliviertassinari Nov 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we can anchor links them in the search, if I search for a rich text editor in Algolia, I want to land on the header.
Also so this can be shared with teammates.
And so we can skim-read with the TOC.

Today, those lists are a bit skinning but there should be more content here. Not having more is only an indicator that Material UI is failing, there used to be more. Shacn UI / Bootstrap have more.


- [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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we might want to duplicate the content?


<!-- To sync with text-fields.md -->

- [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).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitpick: here's how I'd phrase this

Suggested change
- [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.