Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/master'
Browse files Browse the repository at this point in the history
  • Loading branch information
Janpot committed Jun 3, 2024
2 parents 2dda637 + 5eead6f commit eead6a7
Show file tree
Hide file tree
Showing 96 changed files with 2,274 additions and 1,253 deletions.
5 changes: 5 additions & 0 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,11 @@ jobs:
command: |
pnpm prettier:all
pnpm check-changes
- run:
name: '`pnpm proptypes` changes committed?'
command: |
pnpm proptypes
pnpm check-changes
- run:
name: '`pnpm jsonSchemas` changes committed?'
command: |
Expand Down
3 changes: 2 additions & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,5 @@ build
/test/integration/*/fixture*/
/test/visual/*/fixture*/

.generated
.generated
.github
4 changes: 2 additions & 2 deletions .github/workflows/codeql.yml
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ jobs:
uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4.1.6
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
uses: github/codeql-action/init@f079b8493333aace61c81488f8bd40919487bd9f # v3.25.7
with:
languages: typescript
# If you wish to specify custom queries, you can do so here or in a config file.
Expand All @@ -29,4 +29,4 @@ jobs:
# Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
# queries: security-extended,security-and-quality
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
uses: github/codeql-action/analyze@f079b8493333aace61c81488f8bd40919487bd9f # v3.25.7
2 changes: 1 addition & 1 deletion .github/workflows/maintenance.yml
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ jobs:
steps:
- run: echo "${{ github.actor }}"
- name: check if prs are dirty
uses: eps1lon/actions-label-merge-conflict@6d74047dcef155976a15e4a124dde2c7fe0c5522 # v3.0.1
uses: eps1lon/actions-label-merge-conflict@1b1b1fcde06a9b3d089f3464c96417961dde1168 # v3.0.2
with:
dirtyLabel: 'PR: out-of-date'
removeOnDirtyLabel: 'PR: ready to ship'
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/scorecards.yml
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,6 @@ jobs:

# Upload the results to GitHub's code scanning dashboard.
- name: Upload to code-scanning
uses: github/codeql-action/upload-sarif@9fdb3e49720b44c48891d036bb502feb25684276 # v3.25.6
uses: github/codeql-action/upload-sarif@f079b8493333aace61c81488f8bd40919487bd9f # v3.25.7
with:
sarif_file: results.sarif
22 changes: 9 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,20 @@
<!-- markdownlint-disable-next-line -->
<p align="center">
<a href="https://mui.com/toolpad/" rel="noopener" target="_blank"><img width="150" src="https://mui.com/static/branding/product-toolpad-light.svg" alt="Toolpad Studio logo"></a>
<a href="https://mui.com/toolpad/" rel="noopener" target="_blank"><img width="150" src="https://mui.com/static/branding/product-toolpad-light.svg" alt="Toolpad logo"></a>
</p>

<h1 align="center">Toolpad Studio</h1>
<h1 align="center">Toolpad</h1>

<div align="center">
- [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](https://github.com/mui/mui-x) and MUI's core libraries like [Material UI](https://github.com/mui/material-ui). You can use it as a framework for admin dashboards and CRUD apps!
- [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.

Toolpad Studio is a self-hosted low-code admin builder designed to extend the [MUI](https://mui.com/) React components. It's for developers of all trades who want to save time building internal applications. Drag-and-drop from a catalogue of pre-built components, connect to any data source and build apps quickly.
<div align="center">

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui/material-ui/blob/HEAD/LICENSE)

<!--
[![npm latest package](https://img.shields.io/npm/v/@toolpad/studio/latest.svg)](https://www.npmjs.com/package/@toolpad/studio)
[![npm next package](https://img.shields.io/npm/v/@toolpad/studio/next.svg)](https://www.npmjs.com/package/@toolpad/studio@beta)
[![npm downloads](https://img.shields.io/npm/dm/@toolpad/studio.svg)](https://www.npmjs.com/package/@toolpad/studio)
-->

[![CircleCI](https://circleci.com/gh/mui/mui-toolpad/tree/master.svg?style=shield)](https://app.circleci.com/pipelines/github/mui/mui-toolpad?branch=master)
[![Follow on Twitter](https://img.shields.io/twitter/follow/Toolpad_.svg?label=follow+Toolpad)](https://twitter.com/Toolpad_)
[![npm latest package](https://img.shields.io/npm/v/@toolpad/core/latest.svg)](https://www.npmjs.com/package/@toolpad/core)
[![npm downloads](https://img.shields.io/npm/dm/@toolpad/core.svg)](https://www.npmjs.com/package/@toolpad/core)
[![GitHub branch status](https://img.shields.io/github/checks-status/mui/mui-toolpad/HEAD)](https://github.com/mui/mui-toolpad/commits/HEAD/)
[![Follow on X](https://img.shields.io/twitter/follow/Toolpad_.svg?label=follow+Toolpad)](https://x.com/Toolpad_)
[![Renovate status](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://github.com/mui/mui-toolpad/issues/8)
[![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/mui/mui-toolpad.svg)](https://isitmaintained.com/project/mui/mui-toolpad 'Average time to resolve an issue')
[![Open Collective backers and sponsors](https://img.shields.io/opencollective/all/mui-org)](https://opencollective.com/mui-org)
Expand Down
1 change: 1 addition & 0 deletions docs/data/toolpad/core/all-components/all-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@

- [App Provider](/toolpad/core/react-app-provider/)
- [Dashboard Layout](/toolpad/core/react-dashboard-layout/)
- [Data Grid](/toolpad/core/react-data-grid/)
3 changes: 0 additions & 3 deletions docs/data/toolpad/core/api/components/dashboard-layout.md

This file was deleted.

14 changes: 0 additions & 14 deletions docs/data/toolpad/core/api/index.md

This file was deleted.

20 changes: 10 additions & 10 deletions docs/data/toolpad/core/components/data-grid/data-grid.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
productId: toolpad-core
title: App Provider
title: DataGrid
components: DataGrid, DataProvider
---

# Data Grid

<p class="description">Data Grid component for CRUD applications.</p>
<p class="description">Data Grid component for CRUD ("Create Read Update Delete") applications.</p>

Toolpad Core extends the X grid with CRUD functionality. It abstracts the manipulations in a data provider object. The data provider object describes the shape of the data and the available manipulations. When you pass the data provider to a grid it is automatically configured as a CRUD grid. All properties of the X grid are also available and can be used to override the data provider behavior.
Toolpad Core extends the [X data grid](https://mui.com/x/react-data-grid/) with CRUD functionality. It abstracts the manipulations in a data provider object. The data provider object describes the shape of the data and the available manipulations. When you pass the data provider to a grid it is automatically configured as a CRUD grid. All properties of the X grid are also available and can be used to override the data provider behavior.

Where Core and X components focus on the user interface, Toolpad Core components start from a definition of the data. It centralizes data loading, filtering, pagination, field formatting, mutations, access control and more.

Expand All @@ -20,13 +20,13 @@ The simplest data provider exposes a `getMany` function and a `fields` definitio

## Override columns

The Toolpad Core grid adopts the fields that are defined in its data provider. This is handy because it allows for sharing formatting and validation options between data rendering components. But it is still possible to override the defaults at the level of an individual grid. The grid adopts the columns you've defined in the `columns` property, and sets default values for the individual column options for each of them.
The Toolpad Core grid adopts the fields that are defined in its data provider. This is handy because it allows for sharing formatting and validation options between data rendering components. However, it is still possible to override the defaults at the level of an individual grid. The grid adopts the columns you've defined in the `columns` property, and sets default values for the individual column options for each of them.

{{"demo": "OverrideColumns.js"}}

## Column inferrence
## Column inference

To help you get started quickly, the grid is able to inferrence data provider fields if they are not defined. This allows you to quickly get started with a basic field definition based on the returned data. When a data provider is passed that doesn't have a field definiton, the grid infers field definitions and shows a warning. Click the question mark to show more information on how to solve the warning message. Try copying the snippet from the dialog and paste it in the data provider definition below:
To help you get started quickly, the grid is able to infer data provider fields if they are not defined. This allows you to quickly get started with a basic field definition based on the returned data. When a data provider is passed that doesn't have a field definiton, the grid infers field definitions and shows a warning. Click the question mark to show more information on how to solve the warning message. Try copying the snippet from the dialog and paste it in the data provider definition below:

{{"demo": "FieldInference.js"}}

Expand All @@ -42,25 +42,25 @@ You can decide whether your data provider supports pagination exclusively or opt

The data provider supports all basic CRUD operations

### Create
### Create a row

When you add a `createOne` method to the data provider, the grid gets a "Add record" button in the Toolbar. When you click this button, a draft row shows wich you can fill with values for the created item. To commit the new row, click the save button. This calls the `createOne` function with the values that were filled. When the operation finishes, a notification shows.

{{"demo": "CrudCreate.js"}}

### Update
### Update a row

When you add a `updateOne` method to the data provider, the grid gets edit buttons in its action column. When you click this button, the row goes in editing mode. When you click the save button, the `updateOne` method is called with the row id as first parameter and the changed values as the second parameter. When the operation finishes, a notification shows.

{{"demo": "CrudUpdate.js"}}

### Delete
### Delete a row

When you add a `deleteOne` method to your data provider, the grid gets delete buttons in its action column. When you click this button, the `deleteOne` method is called with the id of the relevant row. When the operation finishes, a notification shows.

{{"demo": "CrudDelete.js"}}

### 🚧 Delete multiple
### 🚧 Delete multiple rows

When the data provider contains a `deleteMany` method, the grid allows for multiple selection and delete.

Expand Down
1 change: 0 additions & 1 deletion docs/data/toolpad/core/components/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,3 @@
- [Dashboard Layout](/toolpad/core/components/dashboard-layout/)
- [Data Grid](/toolpad/core/components/data-grid/)
- [Line Chart](/toolpad/core/components/line-chart/)
- [Select Filter](/toolpad/core/components/select-filter/)
30 changes: 30 additions & 0 deletions docs/data/toolpad/core/components/line-chart/BasicLineChart.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import * as React from 'react';
import { createDataProvider } from '@toolpad/core/DataProvider';
import { LineChart } from '@toolpad/core/LineChart';
import Box from '@mui/material/Box';

const myData = createDataProvider({
async getMany() {
return {
rows: [
{ id: 1, value: 19 },
{ id: 2, value: 34 },
{ id: 3, value: 6 },
{ id: 4, value: 14 },
{ id: 5, value: 17 },
],
};
},
fields: {
id: { label: 'ID' },
value: { label: 'Value', type: 'number' },
},
});

export default function BasicLineChart() {
return (
<Box sx={{ width: '100%' }}>
<LineChart height={250} dataProvider={myData} />
</Box>
);
}
30 changes: 30 additions & 0 deletions docs/data/toolpad/core/components/line-chart/BasicLineChart.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import * as React from 'react';
import { createDataProvider } from '@toolpad/core/DataProvider';
import { LineChart } from '@toolpad/core/LineChart';
import Box from '@mui/material/Box';

const myData = createDataProvider({
async getMany() {
return {
rows: [
{ id: 1, value: 19 },
{ id: 2, value: 34 },
{ id: 3, value: 6 },
{ id: 4, value: 14 },
{ id: 5, value: 17 },
],
};
},
fields: {
id: { label: 'ID' },
value: { label: 'Value', type: 'number' },
},
});

export default function BasicLineChart() {
return (
<Box sx={{ width: '100%' }}>
<LineChart height={250} dataProvider={myData} />
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<LineChart height={250} dataProvider={myData} />
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import * as React from 'react';
import { createDataProvider } from '@toolpad/core/DataProvider';
import { LineChart } from '@toolpad/core/LineChart';
import Box from '@mui/material/Box';

const myData = createDataProvider({
async getMany() {
return {
rows: [
{ id: 1, value: 19 },
{ id: 2, value: 34 },
{ id: 3, value: 6 },
{ id: 4, value: 14 },
{ id: 5, value: 17 },
],
};
},
fields: {
id: { label: 'ID' },
value: { label: 'Value', type: 'number' },
},
});

export default function CustomizedLineChart() {
return (
<Box sx={{ width: '100%' }}>
<LineChart
height={250}
dataProvider={myData}
series={[
{
dataKey: 'value',
label: 'Custom Label',
color: 'red',
area: true,
showMark: false,
},
]}
/>
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import * as React from 'react';
import { createDataProvider } from '@toolpad/core/DataProvider';
import { LineChart } from '@toolpad/core/LineChart';
import Box from '@mui/material/Box';

const myData = createDataProvider({
async getMany() {
return {
rows: [
{ id: 1, value: 19 },
{ id: 2, value: 34 },
{ id: 3, value: 6 },
{ id: 4, value: 14 },
{ id: 5, value: 17 },
],
};
},
fields: {
id: { label: 'ID' },
value: { label: 'Value', type: 'number' },
},
});

export default function CustomizedLineChart() {
return (
<Box sx={{ width: '100%' }}>
<LineChart
height={250}
dataProvider={myData}
series={[
{
dataKey: 'value',
label: 'Custom Label',
color: 'red',
area: true,
showMark: false,
},
]}
/>
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<LineChart
height={250}
dataProvider={myData}
series={[
{
dataKey: 'value',
label: 'Custom Label',
color: 'red',
area: true,
showMark: false,
},
]}
/>
22 changes: 22 additions & 0 deletions docs/data/toolpad/core/components/line-chart/ErrorLineChart.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as React from 'react';
import { createDataProvider } from '@toolpad/core/DataProvider';
import { LineChart } from '@toolpad/core/LineChart';
import Box from '@mui/material/Box';

const myData = createDataProvider({
async getMany() {
throw new Error('Failed to fetch data');
},
fields: {
id: { label: 'ID' },
value: { label: 'Value', type: 'number' },
},
});

export default function ErrorLineChart() {
return (
<Box sx={{ width: '100%' }}>
<LineChart height={150} dataProvider={myData} />
</Box>
);
}
22 changes: 22 additions & 0 deletions docs/data/toolpad/core/components/line-chart/ErrorLineChart.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as React from 'react';
import { createDataProvider } from '@toolpad/core/DataProvider';
import { LineChart } from '@toolpad/core/LineChart';
import Box from '@mui/material/Box';

const myData = createDataProvider({
async getMany() {
throw new Error('Failed to fetch data');
},
fields: {
id: { label: 'ID' },
value: { label: 'Value', type: 'number' },
},
});

export default function ErrorLineChart() {
return (
<Box sx={{ width: '100%' }}>
<LineChart height={150} dataProvider={myData} />
</Box>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<LineChart height={150} dataProvider={myData} />
Loading

0 comments on commit eead6a7

Please sign in to comment.