Add custom component example (#3329)

examples/custom-component/.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/custom-component/README.md

@@ -0,0 +1,33 @@
+# Charts in Toolpad Studio
+
+<p class="description">A Toolpad Studio app that shows how to create custom components.</p>
+
+## How to run
+
+Use `create-toolpad-app` to bootstrap the example:
+
+```bash
+npx create-toolpad-app@latest --example custom-component
+```
+
+```bash
+yarn create toolpad-app --example custom-component
+```
+
+```bash
+pnpm create toolpad-app --example custom-component
+```
+
+or:
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/mui/mui-toolpad/tree/master/examples/custom-component)
+
+## What's inside
+
+This app demonstrates the following capabilities of Toolpad Studio:
+
+1. Creating custom React components
+
+## The source
+
+[Check out the source code](https://github.com/mui/mui-toolpad/tree/master/examples/custom-component)

examples/custom-component/application.yml

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

examples/custom-component/components/Clock.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { createComponent } from '@toolpad/studio/browser';
+
+function getCurrentTime() {
+ return new Date().toLocaleTimeString();
+}
+
+export interface ClockProps {
+ label: string;
+}
+
+function Clock({ label }: ClockProps) {
+ const [time, setTime] = React.useState(() => getCurrentTime());
+
+ React.useEffect(() => {
+ const interval = setInterval(() => {
+ setTime(getCurrentTime());
+ }, 1000);
+ return () => clearInterval(interval);
+ }, []);
+
+ return (
+ <div>
+ {label}: {time}
+ </div>
+ );
+}
+
+export default createComponent(Clock, {
+ argTypes: {
+ label: {
+ type: 'string',
+ default: 'Current time',
+ },
+ },
+});

examples/custom-component/package.json

@@ -0,0 +1,13 @@
+{
+ "name": "custom-component",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "toolpad-studio dev .",
+ "build": "toolpad-studio build .",
+ "start": "toolpad-studio start ."
+ },
+ "dependencies": {
+ "@toolpad/studio": "0.1.53"
+ }
+}

examples/custom-component/pages/page/page.yml

@@ -0,0 +1,11 @@
+# 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:
+ - BFDCSHw
+ content:
+ - component: codeComponent.Clock
+ name: clock