[examples] Premium grid example

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

examples/datagrid-premium/README.md

@@ -0,0 +1,29 @@
+# datagrid-premium in Toolpad Studio
+
+<p class="description">A Toolpad Studio app that shows how to use use the MUI X premium grid in a custom component.</p>
+
+## How to run
+
+Use `create-toolpad-app` to bootstrap the example:
+
+```bash
+npx create-toolpad-app@latest  --example datagrid-premium
+```
+
+```bash
+yarn create toolpad-app --example datagrid-premium
+```
+
+```bash
+pnpm create toolpad-app --example datagrid-premium
+```
+
+## What's inside
+
+This app demonstrates the following capabilities of Toolpad Studio:
+
+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/datagrid-premium)

examples/datagrid-premium/application.yml

@@ -0,0 +1,3 @@
+apiVersion: v1
+kind: application
+spec: {}

examples/datagrid-premium/components/CustomDataGrid.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { createComponent } from '@toolpad/studio/browser';
+import { DataGridPremium, GridColDef } from '@mui/x-data-grid-premium';
+import { LicenseInfo } from '@mui/x-license';
+
+LicenseInfo.setLicenseKey('LICENSE_KEY');
+
+export interface CustomDataGridProps {
+  rows: any[];
+}
+
+const columns: GridColDef[] = [
+  {
+    field: 'name',
+    groupable: true,
+  },
+  { field: 'age' },
+];
+
+function CustomDataGrid({ rows }: CustomDataGridProps) {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium rows={rows} columns={columns} hideFooter />
+    </div>
+  );
+}
+
+export default createComponent(CustomDataGrid, {
+  argTypes: {
+    rows: { type: 'array', defaultValue: [] },
+  },
+});

examples/datagrid-premium/components/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ESNext", "DOM"]
+  },
+  "include": ["*.tsx"]
+}

examples/datagrid-premium/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "datagrid-premium",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "toolpad-studio dev .",
+    "build": "toolpad-studio build .",
+    "start": "toolpad-studio start ."
+  },
+  "dependencies": {
+    "@mui/x-data-grid-premium": "^7.0.0",
+    "@mui/x-license": "^7.1.1",
+    "@toolpad/studio": "0.1.53"
+  }
+}

examples/datagrid-premium/pages/page/page.yml

@@ -0,0 +1,22 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.53/docs/schemas/v1/definitions.json#properties/Page
+
+apiVersion: v1
+kind: page
+spec:
+  title: Default page
+  alias:
+    - L7RS8Ol
+  content:
+    - component: codeComponent.CustomDataGrid
+      name: customDataGrid
+      props:
+        rows:
+          - id: 1
+            name: John
+            age: 31
+          - id: 2
+            name: Jane
+            age: 36
+          - id: 3
+            name: John
+            age: 40