From 34ae774097ef4063b23468a153684c15a0baee79 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 27 Mar 2024 13:03:09 +0100 Subject: [PATCH 1/4] initial premium grid example --- examples/datagrid-premium/.gitignore | 129 ++++++++++++++++++ examples/datagrid-premium/README.md | 37 +++++ .../components/CustomDataGrid.tsx | 20 +++ .../datagrid-premium/components/tsconfig.json | 9 ++ examples/datagrid-premium/package.json | 15 ++ examples/datagrid-premium/pages/page/page.yml | 7 + 6 files changed, 217 insertions(+) create mode 100644 examples/datagrid-premium/.gitignore create mode 100644 examples/datagrid-premium/README.md create mode 100644 examples/datagrid-premium/components/CustomDataGrid.tsx create mode 100644 examples/datagrid-premium/components/tsconfig.json create mode 100644 examples/datagrid-premium/package.json create mode 100644 examples/datagrid-premium/pages/page/page.yml diff --git a/examples/datagrid-premium/.gitignore b/examples/datagrid-premium/.gitignore new file mode 100644 index 00000000000..a56149af866 --- /dev/null +++ b/examples/datagrid-premium/.gitignore @@ -0,0 +1,129 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* +.pnpm-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Snowpack dependency directory (https://snowpack.dev/) +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variable files +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Next.js build output +.next +out + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and not Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# vuepress v2.x temp and cache directory +.temp +.cache + +# Docusaurus cache and generated files +.docusaurus + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz diff --git a/examples/datagrid-premium/README.md b/examples/datagrid-premium/README.md new file mode 100644 index 00000000000..838d9d34817 --- /dev/null +++ b/examples/datagrid-premium/README.md @@ -0,0 +1,37 @@ +# Charts in Toolpad Studio + +
A Toolpad Studio app that shows how to use charts to build an analytics dashboard.
+ + + + + +## Check out the live app + +[Open example](https://mui-toolpad-charts-production.up.railway.app/prod/pages/page) + +## How to run + +Use `create-toolpad-app` to bootstrap the example: + +```bash +npx create-toolpad-app@latest --example charts +``` + +```bash +yarn create toolpad-app --example charts +``` + +```bash +pnpm create toolpad-app --example charts +``` + +## What's inside + +This app demonstrates the following capabilities of Toolpad Studio: + +1. Usage of the four types of charts. + +## The source + +[Check out the source code](https://github.com/mui/mui-toolpad/tree/master/examples/charts) diff --git a/examples/datagrid-premium/components/CustomDataGrid.tsx b/examples/datagrid-premium/components/CustomDataGrid.tsx new file mode 100644 index 00000000000..65250510f15 --- /dev/null +++ b/examples/datagrid-premium/components/CustomDataGrid.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { createComponent } from '@toolpad/studio/browser'; +import { DataGRidPremium } from '@mui/x-data-grid-premium'; + +export interface CustomDataGridProps { + msg: string; +} + +function CustomDataGrid({ msg }: CustomDataGridProps) { + returnA Toolpad Studio app that shows how to use charts to build an analytics dashboard.
- - - - - -## Check out the live app - -[Open example](https://mui-toolpad-charts-production.up.railway.app/prod/pages/page) +A Toolpad Studio app that shows how to use use the MUI X premium grid in a custom component.
## How to run Use `create-toolpad-app` to bootstrap the example: ```bash -npx create-toolpad-app@latest --example charts +npx create-toolpad-app@latest --example datagrid-premium ``` ```bash -yarn create toolpad-app --example charts +yarn create toolpad-app --example datagrid-premium ``` ```bash -pnpm create toolpad-app --example charts +pnpm create toolpad-app --example datagrid-premium ``` ## What's inside This app demonstrates the following capabilities of Toolpad Studio: -1. Usage of the four types of charts. +1. Using the MUI x premium DataGrid in a custom component. ## The source -[Check out the source code](https://github.com/mui/mui-toolpad/tree/master/examples/charts) +[Check out the source code](https://github.com/mui/mui-toolpad/tree/master/examples/datagrid-premium) From c7159e4af8db1926d9f2ecfc638f337281996897 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Fri, 5 Apr 2024 18:50:28 +0200 Subject: [PATCH 4/4] dwerfw --- .../datagrid-premium/components/CustomDataGrid.tsx | 8 +------- examples/datagrid-premium/pages/page/page.yml | 11 ++++++++++- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/examples/datagrid-premium/components/CustomDataGrid.tsx b/examples/datagrid-premium/components/CustomDataGrid.tsx index 6a5979c3807..3c78c89e3f6 100644 --- a/examples/datagrid-premium/components/CustomDataGrid.tsx +++ b/examples/datagrid-premium/components/CustomDataGrid.tsx @@ -5,12 +5,6 @@ import { LicenseInfo } from '@mui/x-license'; LicenseInfo.setLicenseKey('LICENSE_KEY'); -const ROWS = [ - { id: 1, name: 'John', age: 30 }, - { id: 2, name: 'Jane', age: 36 }, - { id: 3, name: 'John', age: 40 }, -]; - export interface CustomDataGridProps { rows: any[]; } @@ -33,6 +27,6 @@ function CustomDataGrid({ rows }: CustomDataGridProps) { export default createComponent(CustomDataGrid, { argTypes: { - rows: { type: 'array', defaultValue: ROWS }, + rows: { type: 'array', defaultValue: [] }, }, }); diff --git a/examples/datagrid-premium/pages/page/page.yml b/examples/datagrid-premium/pages/page/page.yml index 6e1b33f1fa6..e0b3981eb5f 100644 --- a/examples/datagrid-premium/pages/page/page.yml +++ b/examples/datagrid-premium/pages/page/page.yml @@ -10,4 +10,13 @@ spec: - component: codeComponent.CustomDataGrid name: customDataGrid props: - rows: null + rows: + - id: 1 + name: John + age: 31 + - id: 2 + name: Jane + age: 36 + - id: 3 + name: John + age: 40