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.

Sign up for GitHub

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] Improve docs and address some ahrefs reported 404s #3928

Merged
merged 15 commits into from
Aug 19, 2024
Merged

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

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
67bfa20
Address some 404s
Janpot Aug 11, 2024
e4a1385
Update pages.ts
Janpot Aug 11, 2024
12b5179
Add title
Janpot Aug 11, 2024
92348b6
Update overview.md
Janpot Aug 11, 2024
b721c98
edits
prakhargupta1 Aug 19, 2024
0217aa1
Merge branch 'master' into 404s
Janpot Aug 19, 2024
327de2e
Ensure sidenav title matches the h1
prakhargupta1 Aug 19, 2024
107af1a
more
prakhargupta1 Aug 19, 2024
9306503
Update packages/toolpad-core/README.md
Janpot Aug 19, 2024
1fd2b9f
Update docs/data/toolpad/core/pages.ts
Janpot Aug 19, 2024
cb334de
Update docs/data/toolpad/core/introduction/overview.md
Janpot Aug 19, 2024
2b6b576
Update README.md
Janpot Aug 19, 2024
ffac043
f
Janpot Aug 19, 2024
e638f37
remove full-stack
Janpot Aug 19, 2024
71ab581
fix: CI
bharatkashyap Aug 19, 2024
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
20 changes: 13 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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
Expand Down
1 change: 0 additions & 1 deletion docs/data/toolpad/core/all-components/all-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/)
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/components/use-dialogs/use-dialogs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: useDialogs
components: DialogsProvider
---

# Dialogs
# useDialogs

<p class="description">Imperative APIs to open and interact with dialogs.</p>

Expand Down
4 changes: 2 additions & 2 deletions docs/data/toolpad/core/components/use-notifications/use-notifications.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ title: useNotifications
components: NotificationsProvider
---

# Notifications
# useNotifications
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 think we can keep "Notifications" and instead change the title property above

Copy link
Member

@prakhargupta1 prakhargupta1 Aug 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This is a suggestion to improve the DX, page h1 to be the same as sidenav title. We can choose between Notifications or 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.

Expand Down
14 changes: 5 additions & 9 deletions docs/data/toolpad/core/introduction/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,21 @@

# 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 full-stack components to build react dashboards.</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.

Check warning on line 9 in docs/data/toolpad/core/introduction/overview.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[MUI.NoCompanyName] We avoid referencing the company name 'MUI components'. Instead you can reference a product or the team.

Raw Output:
{"message": "[MUI.NoCompanyName] We avoid referencing the company name 'MUI components'. Instead you can reference a product or the team.", "location": {"path": "docs/data/toolpad/core/introduction/overview.md", "range": {"start": {"line": 9, "column": 78}}}, "severity": "WARNING"}

{{"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

Expand Down
3 changes: 2 additions & 1 deletion docs/data/toolpad/core/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const pages: MuiPage[] = [
},
{
pathname: '/toolpad/core/react-persistent-state',
title: 'Peristent State',
title: 'Peristent storage state',
},
],
},
Expand All @@ -97,6 +97,7 @@ const pages: MuiPage[] = [
children: [
{
pathname: '/toolpad/core/api/components-group',
inSideNav: false,
subheader: 'Components',
children: [
...pagesApi,
Expand Down
3 changes: 2 additions & 1 deletion docs/pages/toolpad/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ export default function Home() {
return (
<BrandingCssVarsProvider>
<Head
title="Toolpad Core: Components for React admin panels"
title="Toolpad Core: Full-stack components for React dashboards"
description="Toolpad Core offers the components needed for your next admin panel and internal tools project."
Copy link
Member Author

@Janpot Janpot Aug 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

@prakhargupta1 This title/description was missing, might need better copy. Also may need a new twitter card image

// TODO: create this image
// card="/static/toolpad/marketing/toolpad-og.jpg"
/>
<CssBaseline />
Expand Down
2 changes: 1 addition & 1 deletion packages/toolpad-core/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 react 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.

## Installation

Expand Down
Loading