From 09a2a5db05aaba368e62184d1ddf6c01c44883e5 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Mon, 19 Aug 2024 13:37:33 +0200 Subject: [PATCH] [docs] Improve docs and address some ahrefs reported 404s (#3928) Signed-off-by: Jan Potoms <2109932+Janpot@users.noreply.github.com> Co-authored-by: Prakhar Gupta <92228082+prakhargupta1@users.noreply.github.com> Co-authored-by: Bharat Kashyap --- README.md | 20 ++++++++++++------- .../core/all-components/all-components.md | 1 - .../TitleBreadcrumbsPageContainer.js | 4 ++-- .../TitleBreadcrumbsPageContainer.tsx | 4 ++-- .../components/use-dialogs/use-dialogs.md | 2 +- .../use-notifications/use-notifications.md | 4 ++-- .../toolpad/core/introduction/overview.md | 14 +++++-------- docs/data/toolpad/core/pages.ts | 3 ++- .../toolpad/core/api/dialogs-provider.json | 2 +- .../core/api/notifications-provider.json | 2 +- docs/pages/toolpad/index.js | 3 ++- packages/toolpad-core/README.md | 2 +- packages/toolpad-core/src/Account/Account.tsx | 3 ++- .../src/useDialogs/DialogsProvider.tsx | 2 +- .../NotificationsProvider.tsx | 2 +- 15 files changed, 36 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 8d5ca6cbfb4..af3f10b5daf 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@

Toolpad

-- [Toolpad Core](https://mui.com/toolpad/core/introduction/) is a framework approach to internal tools. Through high-level components and data management interfaces, It's tightly integrated with [MUI X](http://github.com/mui/mui-x) and MUI's core libraries like [Material UI](http://github.com/mui/material-ui). You can use it as a framework for admin dashboards and CRUD apps! +- [Toolpad Core](https://mui.com/toolpad/core/introduction/) is a set of full-stack React components that leverages existing [Material UI](http://github.com/mui/material-ui) components, and ties them with the commonly-used backend integrations to help you create responsive dashboards and internal tools. - [Toolpad Studio](https://mui.com/toolpad/studio/getting-started/) is a self-hosted low-code admin builder designed to extend the Toolpad Core React components. It's for developers of all trades who want to save time building internal applications. Drag and drop from a catalog of pre-built components, connect to any data source and build apps quickly.
@@ -22,21 +22,27 @@
-## We are making some changes - -A [big addition](https://github.com/mui/mui-toolpad/discussions/3311) is happening. We're working on Toolpad Core, a framework approach to internal tools. Through high-level components and data management interfaces, we aim to revamp the app building experience that involves tabular data. It will be tightly integrated with MUI X and Core libraries, and would act as your go to framework for admin dashboards and CRUD apps! - ## Product walkthrough ![readme_video](https://github.com/prakhargupta1/mui-toolpad/assets/92228082/efcab7c7-4f34-487c-8a62-e059b5e58bcc) ## Notice -Toolpad Studio is in its beta stages of development. Feel free to run this application to try it out for your use cases, and share any feedback, bug reports or feature requests that you come across. +Toolpad is in its beta stages of development. Feel free to run this application to try it out for your use cases, and share any feedback, bug reports or feature requests that you come across. ## Quick setup locally -Run: +Toolpad Core: + +```bash +npx create-toolpad-app@latest +# or +pnpm create toolpad-app +# or +yarn create toolpad-app +``` + +Toolpad Studio: ```bash npx create-toolpad-app@latest --studio my-toolpad-studio-app diff --git a/docs/data/toolpad/core/all-components/all-components.md b/docs/data/toolpad/core/all-components/all-components.md index 238a1d667e4..3f35bd6429f 100644 --- a/docs/data/toolpad/core/all-components/all-components.md +++ b/docs/data/toolpad/core/all-components/all-components.md @@ -5,5 +5,4 @@ - [App Provider](/toolpad/core/react-app-provider/) - [Account](/toolpad/core/react-account/) - [Dashboard Layout](/toolpad/core/react-dashboard-layout/) -- [Data Grid](/toolpad/core/react-data-grid/) - [Sign In Page](/toolpad/core/react-sign-in-page/) diff --git a/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.js b/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.js index 3d25d62d352..a90486b361e 100644 --- a/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.js +++ b/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.js @@ -7,7 +7,7 @@ import Paper from '@mui/material/Paper'; const NAVIGATION = [ { - segment: 'home', + segment: 'inbox', title: 'Home', children: [ { @@ -19,7 +19,7 @@ const NAVIGATION = [ ]; export default function TitleBreadcrumbsPageContainer() { - const router = useDemoRouter('/home/orders'); + const router = useDemoRouter('/inbox/orders'); const theme = useTheme(); diff --git a/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.tsx b/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.tsx index 3d25d62d352..a90486b361e 100644 --- a/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.tsx +++ b/docs/data/toolpad/core/components/page-container/TitleBreadcrumbsPageContainer.tsx @@ -7,7 +7,7 @@ import Paper from '@mui/material/Paper'; const NAVIGATION = [ { - segment: 'home', + segment: 'inbox', title: 'Home', children: [ { @@ -19,7 +19,7 @@ const NAVIGATION = [ ]; export default function TitleBreadcrumbsPageContainer() { - const router = useDemoRouter('/home/orders'); + const router = useDemoRouter('/inbox/orders'); const theme = useTheme(); diff --git a/docs/data/toolpad/core/components/use-dialogs/use-dialogs.md b/docs/data/toolpad/core/components/use-dialogs/use-dialogs.md index 703134587a2..afb54c320a2 100644 --- a/docs/data/toolpad/core/components/use-dialogs/use-dialogs.md +++ b/docs/data/toolpad/core/components/use-dialogs/use-dialogs.md @@ -4,7 +4,7 @@ title: useDialogs components: DialogsProvider --- -# Dialogs +# useDialogs

Imperative APIs to open and interact with dialogs.

diff --git a/docs/data/toolpad/core/components/use-notifications/use-notifications.md b/docs/data/toolpad/core/components/use-notifications/use-notifications.md index c500eadfec3..4a4fde97fea 100644 --- a/docs/data/toolpad/core/components/use-notifications/use-notifications.md +++ b/docs/data/toolpad/core/components/use-notifications/use-notifications.md @@ -4,9 +4,9 @@ title: useNotifications components: NotificationsProvider --- -# Notifications +# useNotifications -

Imperative APIs to show and interact with application notifications

+

Imperative APIs to show and interact with application notifications.

Toolpad core offers a set of abstractions that make it easier to interact with notifications. Notifications are used to give short updates to the user about things that are happening during the application lifetime. They appear at the bottom of the screen. The Toolpad API allows for opening multiple notifications concurrenlty. diff --git a/docs/data/toolpad/core/introduction/overview.md b/docs/data/toolpad/core/introduction/overview.md index 77c87cca452..81d64f67672 100644 --- a/docs/data/toolpad/core/introduction/overview.md +++ b/docs/data/toolpad/core/introduction/overview.md @@ -4,25 +4,21 @@ title: Toolpad Overview # Toolpad Core -

A framework to build full-stack apps. You can use it as a Next.js starter, or integrate it within an existing React project to build dashboards and internal tools.

+

A set of components to build dashboards with React.

-This framework leverages the existing suite of components offered by MUI, and ties them together with the most commonly used backend integrations to help you create dashboards quickly. -Imagine a React dashboard template but with backend features like authentication, role-based access control and data fetching already included. -It comes with the guarantee of MUI's enterprise-tested components, and the Toolpad team's focus on using the latest stable libraries and prioritizing razor-sharp performance. +Toolpad Core is a set of full-stack react components that leverages existing MUI components, and ties them with the commonly-used backend integrations to help you create responsive dashboards and internal tools. It comes with the guarantee of MUI's enterprise-tested components, and the Toolpad team's focus on using the latest stable libraries, and prioritising razor-sharp performance. {{"demo": "../components/dashboard-layout/DashboardLayoutNavigationLinks.js", "height": 640, "iframe": true, "hideToolbar": true}} ## Overview :::info -Visit the [installation guide](/toolpad/core/installation/) to learn how to install the package correctly. +Visit the [installation guide](/toolpad/core/introduction/installation/) to learn how to install the package correctly. ::: -Toolpad can be multiple things: a set of low-level primitives for common use cases like state management across components, a Next.js starter with features like authentication and data-fetching baked-in, or an umbrella framework to help bring together your existing internal tooling applications. -To sum up: it is a framework that integrates many disparate libraries with MUI's components, which otherwise require a lot of inefficient glue code to work together. -The framework is accessible through a Command Line Interface (CLI) which generates starter code quickly based on features needed or example templates to be followed. +Toolpad can be multiple things: a set of low-level primitives for common use-cases like state management across components, a Next.js starter with features like authentication and routing, or an umbrella framework to help bring together your existing internal tooling applications. To sum up: it's a framework that integrates many disparate libraries with MUI's components, which otherwise require a lot of inefficient glue code to work together. It's accessible through a CLI which generates starter code quickly based on features needed or example templates to be followed. -The framework follows the open-core model, with some features being available under the MIT license, and some being under a paid license. +It follows the open-core model, with some features being available under the MIT license, and some being under a paid license. ## Features diff --git a/docs/data/toolpad/core/pages.ts b/docs/data/toolpad/core/pages.ts index 561e2e4a8f8..ded2cc7eaa3 100644 --- a/docs/data/toolpad/core/pages.ts +++ b/docs/data/toolpad/core/pages.ts @@ -85,7 +85,7 @@ const pages: MuiPage[] = [ }, { pathname: '/toolpad/core/react-persistent-state', - title: 'Peristent State', + title: 'Persisted state', }, ], }, @@ -97,6 +97,7 @@ const pages: MuiPage[] = [ children: [ { pathname: '/toolpad/core/api/components-group', + inSideNav: false, subheader: 'Components', children: [ ...pagesApi, diff --git a/docs/pages/toolpad/core/api/dialogs-provider.json b/docs/pages/toolpad/core/api/dialogs-provider.json index 630a5d1726f..72419e5bf13 100644 --- a/docs/pages/toolpad/core/api/dialogs-provider.json +++ b/docs/pages/toolpad/core/api/dialogs-provider.json @@ -8,6 +8,6 @@ "muiName": "DialogsProvider", "filename": "/packages/toolpad-core/src/useDialogs/DialogsProvider.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/toolpad/core/api/notifications-provider.json b/docs/pages/toolpad/core/api/notifications-provider.json index 127c9c01e8b..fd4f0305dc9 100644 --- a/docs/pages/toolpad/core/api/notifications-provider.json +++ b/docs/pages/toolpad/core/api/notifications-provider.json @@ -16,6 +16,6 @@ "muiName": "NotificationsProvider", "filename": "/packages/toolpad-core/src/useNotifications/NotificationsProvider.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/toolpad/index.js b/docs/pages/toolpad/index.js index ed9c5026835..c9edda658bf 100644 --- a/docs/pages/toolpad/index.js +++ b/docs/pages/toolpad/index.js @@ -16,8 +16,9 @@ export default function Home() { return ( diff --git a/packages/toolpad-core/README.md b/packages/toolpad-core/README.md index e2863b76afb..3c4ccafd3bd 100644 --- a/packages/toolpad-core/README.md +++ b/packages/toolpad-core/README.md @@ -5,7 +5,7 @@

Toolpad Core

-Toolpad Core is a React framework for building admin dashboards, internal tools, and B2B web applications. It is built on top of Next.js and offers a suite of components such as layout, navigation, authentication, and data management interfaces to help you build scalable dashboards fast. +Toolpad Core is a set of full-stack components for building dashboards, internal tools, and B2B web applications with React. It is built on top of Next.js and offers a suite of components such as layout, navigation, authentication, and data management interfaces to help you build scalable dashboards fast. ## Installation diff --git a/packages/toolpad-core/src/Account/Account.tsx b/packages/toolpad-core/src/Account/Account.tsx index a95220a1639..c073608ff70 100644 --- a/packages/toolpad-core/src/Account/Account.tsx +++ b/packages/toolpad-core/src/Account/Account.tsx @@ -46,7 +46,8 @@ export interface AccountProps { * * - [Account API](https://mui.com/toolpad/core/api/account) */ -function Account({ slotProps, signInLabel = 'Sign In', signOutLabel = 'Sign Out' }: AccountProps) { +function Account(props: AccountProps) { + const { slotProps, signInLabel = 'Sign In', signOutLabel = 'Sign Out' } = props; const session = React.useContext(SessionContext); const [anchorEl, setAnchorEl] = React.useState(null); diff --git a/packages/toolpad-core/src/useDialogs/DialogsProvider.tsx b/packages/toolpad-core/src/useDialogs/DialogsProvider.tsx index 6d83266848a..58d2cb5590a 100644 --- a/packages/toolpad-core/src/useDialogs/DialogsProvider.tsx +++ b/packages/toolpad-core/src/useDialogs/DialogsProvider.tsx @@ -24,7 +24,7 @@ export interface DialogProviderProps { * * Demos: * - * - [Dialogs](https://mui.com/toolpad/core/react-use-dialogs/) + * - [useDialogs](https://mui.com/toolpad/core/react-use-dialogs/) * * API: * diff --git a/packages/toolpad-core/src/useNotifications/NotificationsProvider.tsx b/packages/toolpad-core/src/useNotifications/NotificationsProvider.tsx index 33a9654f345..330e8fbc886 100644 --- a/packages/toolpad-core/src/useNotifications/NotificationsProvider.tsx +++ b/packages/toolpad-core/src/useNotifications/NotificationsProvider.tsx @@ -150,7 +150,7 @@ let nextId = 1; * Demos: * * - [Sign In Page](https://mui.com/toolpad/core/react-sign-in-page/) - * - [Notifications](https://mui.com/toolpad/core/react-use-notifications/) + * - [useNotifications](https://mui.com/toolpad/core/react-use-notifications/) * * API: *