[docs] Improve docs and address some ahrefs reported 404s (#3928)

Signed-off-by: Jan Potoms <[email protected]> Co-authored-by: Prakhar Gupta <[email protected]> Co-authored-by: Bharat Kashyap <[email protected]>
mui · Aug 19, 2024 · 09a2a5d · 09a2a5d
1 parent 96c4139
commit 09a2a5d
Show file tree

Hide file tree

Showing 15 changed files with 36 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 
 <h1 align="center">Toolpad</h1>
 
-- [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.
 
 <div align="center">
@@ -22,21 +22,27 @@
 
 </div>
 
-## 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
@@ -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
@@ -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
@@ -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
@@ -4,7 +4,7 @@ title: useDialogs
 components: DialogsProvider
 ---
 
-# Dialogs
+# useDialogs
 
 <p class="description">Imperative APIs to open and interact with dialogs.</p>
 

diff --git 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
 
-<p class="description">Imperative APIs to show and interact with application notifications</p>
+<p class="description">Imperative APIs to show and interact with application notifications.</p>
 
 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
@@ -4,25 +4,21 @@ title: Toolpad Overview
 
 # Toolpad Core
 
-<p class="description">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.</p>
+<p class="description">A set of components to build dashboards with React.</p>
 
-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
@@ -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
@@ -8,6 +8,6 @@
   "muiName": "DialogsProvider",
   "filename": "/packages/toolpad-core/src/useDialogs/DialogsProvider.tsx",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/toolpad/core/react-use-dialogs/\">Dialogs</a></li></ul>",
+  "demos": "<ul><li><a href=\"/toolpad/core/react-use-dialogs/\">useDialogs</a></li></ul>",
   "cssComponent": false
 }
diff --git 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": "<ul><li><a href=\"/toolpad/core/react-sign-in-page/\">Sign In Page</a></li>\n<li><a href=\"/toolpad/core/react-use-notifications/\">Notifications</a></li></ul>",
+  "demos": "<ul><li><a href=\"/toolpad/core/react-sign-in-page/\">Sign In Page</a></li>\n<li><a href=\"/toolpad/core/react-use-notifications/\">useNotifications</a></li></ul>",
   "cssComponent": false
 }
diff --git a/docs/pages/toolpad/index.js b/docs/pages/toolpad/index.js
@@ -16,8 +16,9 @@ export default function Home() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="Toolpad Core: Components for React admin panels"
+        title="Toolpad Core: Components for React dashboards"
         description="Toolpad Core offers the components needed for your next admin panel and internal tools project."
+        // TODO: create this image
         // card="/static/toolpad/marketing/toolpad-og.jpg"
       />
       <CssBaseline />

diff --git a/packages/toolpad-core/README.md b/packages/toolpad-core/README.md
@@ -5,7 +5,7 @@
 
 <h1 align="center">Toolpad Core</h1>
 
-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
@@ -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<HTMLButtonElement | null>(null);

diff --git 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
@@ -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:
  *
-Original file line number
+Diff line change
@@ Expand Up / @@ -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:
      *
@@ Expand Down @@