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 Toolpad Core template link #44415

Open
wants to merge 29 commits into
base: master
Choose a base branch
from

Conversation

bharatkashyap
Copy link
Member

@bharatkashyap bharatkashyap commented Nov 15, 2024

@mui-bot
Copy link

mui-bot commented Nov 15, 2024

@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 17, 2024

href: '/material-ui/getting-started/templates/dashboard/',
source: `${sourcePrefix}/docs/data/material/getting-started/templates/dashboard`,
hasDarkMode: true,
},
{
title: translatation('marketingPageTitle'),
description: translatation('marketingPageDescr'),
title: translation('dashboardToolpadTitle'),
Copy link
Member

@oliviertassinari oliviertassinari Nov 17, 2024

Choose a reason for hiding this comment

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

Interleaving different types of content feels like a big no-no.

Copy link
Member Author

Choose a reason for hiding this comment

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

Do you mean we should create a separate section for Toolpad Core templates on this page, or create a separate page for them, or do you mean that the Toolpad-specific copy should be stored separately from the rest of the content (not in translations.json?)

Copy link
Contributor

Choose a reason for hiding this comment

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

I would keep the Toolpad templates separate from the rest of the templates, because they seem to serve somewhat different use cases and I'm afraid we'd be presenting users with too many options. I think the way this page is currently structured with Toolpad Core as its own section makes the most sense. (I've suggested some copyedits to this section in #44461 to say more about Toolpad's value proposition.)

Copy link
Member

@oliviertassinari oliviertassinari Nov 18, 2024

Choose a reason for hiding this comment

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

@bharatkashyap Right so not the current shape.

Now, I'm not sure what's the right way to approach this, but at first sight, I would imagine we would have nothing else? I mean, having a link to Toolpad from this page that lists all the existing Toolpad templates seems great, similar to how the premium store items can be browsed.

We covered a bit of Toolpad product architecture in today's https://www.notion.so/mui-org/product-Company-Product-Meeting-2024-11-18-135cbfe7b66080518203cff028b28579. The main thought was that:

  • We want to spend 70% of our time optimizing what works, low risks. 20% of things there are more risky. 10% in bolder bets, high chance to fail but high payouts. Existing teams can do the 70% and the 20%, but the 10% is usually out of reach for them. Part of why resources are allocated to Toolpad is to allow us to go after those 10%
  • https://pro.ant.design/, Refine is closer to what Toolpad is about, ready-to-use primitives/components specifically for building quickly CRUD apps, and internal tools.

How do we know if a feature is right for Toolpad or another place in the stack? In my view, it's about:

  • It would make sense to have an integration with most of the other UI libraries.
  • It's not about component complexity, if its, Base UI X - MUI X sounds like the right place.
  • It's not about design, if it's, MUI sounds like the right place.
  • It relates to building internal tools (and potentially, but didn't commit to this yet, anything that can support components with a backend API)

For example:

  • Blocks, Layouts are Material UI features, so almost all design output from Toolpad should be coming from Material UI, e.g. https://tremor.so/ is not what Toolpad is about but what Material UI is about. Toolpad supports Material UI.
  • Rich layouts, things that rely on Material UI design, but are operationalized them specifically for internal tools make sense in Toolpad, e.g. https://procomponents.ant.design/en-US/components/layout?tab=api. I definitely don't see this a MUI X (not advanced enough, too design focused) or Material UI feature (too internal tool focused). Now if the API is composable, and not a big moonlight, then OK, could be Material UI, same reason as why https://ui.shadcn.com/docs/components/sidebar. If those are purely about UI (visual, no logic), MUI X could be the perfect place to host them.
  • Form components, e.g. https://procomponents.ant.design/en-US/components/form. This could fit great in Base UI, but could be too advanced, so potentially Base UI X.

cc @joserodolfofreitas see if this resonates.

Copy link
Member

Choose a reason for hiding this comment

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

I agree that putting Toolpad template in it's own section will help users distinguish between the templates. We were earlier thinking that it would be better if the user could see Toolpad template before scroll, but due to the design revamp of this page, scrolling is inevitable. So, a separate section will help visually differentiate.

We'll replace the dashboardLayout demo with the hosted Toolpad core template. 👍

Copy link
Member

@oliviertassinari oliviertassinari Nov 20, 2024

Choose a reason for hiding this comment

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

Yeah, but this list of templates demos using the Toolpad primitives should be in Toolpad's docs, not in Material UI's docs because it's not a Material UI feature or value proposition of Material UI.

Copy link
Member

Choose a reason for hiding this comment

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

Listing Toolpad template here will only make it more discoverable to the Material UI users who are looking for templates. Some of them may be interested in it, so I think we should have it here, at the bottom, in a section of its own.
Also, the templates docs page attracts many users, so not listing it here, would be a missed opportunity.

Copy link
Member

@oliviertassinari oliviertassinari Nov 21, 2024

Choose a reason for hiding this comment

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

Listing Toolpad template here will only make it more discoverable to the Material UI users who are looking for templates. Some of them may be interested in it, so I think we should have it here, at the bottom, in a section of its own.

@prakhargupta1 Referencing Toolpad here makes sense to me, a person reaching for a template has about a 25% probability to be a user we build Toolpad for (internal tool 0.5 * simple use cases 0.5). It's also at the right time in the user journey.

However,

  • for the majority of the people (75%) it's noise
  • for the people that use the different product it creates confusion as to what is what
  • for the team maintaining Toolpad, it makes them update places outside of their scope

So It seems that the only viable option is to reference Toolapd like we do for the template market: so no list, but a link.

@oliviertassinari oliviertassinari added the docs Improvements or additions to the documentation label Nov 17, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 19, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 19, 2024
@prakhargupta1

This comment was marked as outdated.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 20, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 22, 2024
@bharatkashyap bharatkashyap marked this pull request as ready for review November 22, 2024 10:00
@bharatkashyap bharatkashyap changed the title [docs] Add Toolpad Core template [docs] Add Toolpad Core template link Nov 22, 2024
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 22, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 25, 2024
@prakhargupta1
Copy link
Member

prakhargupta1 commented Nov 27, 2024

In our weekly meeting yesterday, we discussed about replacing the dashboardLayout demo in https://mui.com/material-ui/getting-started/templates/#toolpad-core-beta with a template image(like we have for premium templates section above, showcasing the two pages and the sign-in page).

Link to the hosted template: https://mui-toolpad-docs.netlify.app/toolpad/core/templates/nextjs-dashboard

@zanivan Could you help us with the image for dark and light mode? Thanks

@zanivan
Copy link
Contributor

zanivan commented Nov 27, 2024

Could you help us with the image for dark and light mode? Thanks

@prakhargupta1 sure! Just sent it to @bharatkashyap :)

@prakhargupta1
Copy link
Member

prakhargupta1 commented Nov 29, 2024

Looks like borders are missing on the templates image:

Screenshot 2024-11-29 at 10 32 01 AM

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 2, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Dec 2, 2024
@zanivan
Copy link
Contributor

zanivan commented Dec 2, 2024

We've got some issues with the new borders:

Screenshot 2024-12-02 at 10 41 05 Screenshot 2024-12-02 at 10 41 14

I think it's better to export the images again with the right colors so it feels more consistent:

light dark

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation Toolpad
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Link Toolpad Core template from Material UI
6 participants