diff --git a/docs/public/static/toolpad/marketing/supabase.png b/docs/public/static/toolpad/marketing/supabase.png new file mode 100644 index 00000000000..e41214c4697 Binary files /dev/null and b/docs/public/static/toolpad/marketing/supabase.png differ diff --git a/docs/src/modules/components/ExamplesGrid.js b/docs/src/modules/components/ExamplesGrid.js index c9e1c7fb018..0610e96dcac 100644 --- a/docs/src/modules/components/ExamplesGrid.js +++ b/docs/src/modules/components/ExamplesGrid.js @@ -84,6 +84,14 @@ function layouts() { href: 'https://github.com/mui/mui-toolpad/tree/master/examples/with-prisma-data-provider', source: 'https://github.com/mui/mui-toolpad/tree/master/examples/with-prisma-data-provider', }, + { + title: 'With Supabase', + description: + 'A Toolpad app that fetches data from Supabase and shows it in a list component.', + src: '/static/toolpad/marketing/supabase.png', + href: 'https://github.com/mui/mui-toolpad/tree/master/examples/supabase', + source: 'https://github.com/mui/mui-toolpad/tree/master/examples/supabase', + }, /* To be added later when this app is ready. title: 'Stripe invoice downloader', description: 'A Stripe app to fetch and download invoices.', diff --git a/examples/basic-crud-app/toolpad/pages/AdminApp/page.yml b/examples/basic-crud-app/toolpad/pages/AdminApp/page.yml index 58baa75a7e5..ba687a72979 100644 --- a/examples/basic-crud-app/toolpad/pages/AdminApp/page.yml +++ b/examples/basic-crud-app/toolpad/pages/AdminApp/page.yml @@ -244,19 +244,14 @@ spec: isInvalid: false fullWidth: true name: email - - component: TextField - name: textField - props: - placeholder: ddwfdfsdf - label: fsdfdfdsf - component: Text name: typography5 - layout: - columnSize: 1 - horizontalAlign: start props: value: Add Customer variant: h4 + layout: + columnSize: 1 + horizontalAlign: start - component: Form name: addCustomerForm layout: diff --git a/examples/supabase/.gitignore b/examples/supabase/.gitignore new file mode 100644 index 00000000000..a56149af866 --- /dev/null +++ b/examples/supabase/.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/supabase/README.md b/examples/supabase/README.md new file mode 100644 index 00000000000..ae0abcd6205 --- /dev/null +++ b/examples/supabase/README.md @@ -0,0 +1,34 @@ +# Supabase + +

A Toolpad app that fetches data from Supabase and shows it in a list component.

+ + + Supabase integration + + +## How to run + +Download the example [or clone the repo](https://github.com/mui/mui-toolpad): + + + +```bash +curl https://codeload.github.com/mui/mui-toolpad/tar.gz/master | tar -xz --strip=2 mui-toolpad-master/examples/supabase +cd supabase +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +## What's inside + +This app demonstrates the following capabilities of Toolpad: + +1. Connecting to Supabase database using custom functions. +2. Using the list component to create a basic product catalogue manager. + +[Check out the source code](https://github.com/mui/mui-toolpad/tree/master/examples/supabase) diff --git a/examples/supabase/package.json b/examples/supabase/package.json new file mode 100644 index 00000000000..070b30cf54c --- /dev/null +++ b/examples/supabase/package.json @@ -0,0 +1,14 @@ +{ + "name": "supabase", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "toolpad dev", + "build": "toolpad build", + "start": "toolpad start" + }, + "dependencies": { + "@mui/toolpad": "0.1.34", + "@supabase/supabase-js": "2.38.4" + } +} diff --git a/examples/supabase/toolpad/.gitignore b/examples/supabase/toolpad/.gitignore new file mode 100644 index 00000000000..5f1e4d07bfd --- /dev/null +++ b/examples/supabase/toolpad/.gitignore @@ -0,0 +1 @@ +.generated diff --git a/examples/supabase/toolpad/pages/page/page.yml b/examples/supabase/toolpad/pages/page/page.yml new file mode 100644 index 00000000000..29f138cd12c --- /dev/null +++ b/examples/supabase/toolpad/pages/page/page.yml @@ -0,0 +1,122 @@ +apiVersion: v1 +kind: page +spec: + id: BKAYeeK + title: Default page + queries: + - name: query + query: + function: supabase.ts#default + kind: local + content: + - component: List + name: list + props: + renderItem: + $$template: + - component: PageRow + name: pageRow + props: + justifyContent: start + children: + - component: PageColumn + name: pageColumn + layout: + columnSize: 1.2040938643407977 + children: + - component: Text + name: text + props: + mode: markdown + value: + $$jsExpression: | + `### ${query.data[i].name}` + layout: + columnSize: 1.400990099009901 + verticalAlign: end + - component: Text + name: text2 + props: + mode: markdown + value: + $$jsExpression: | + `** ${query.data[i].description} **` + layout: + verticalAlign: start + - component: Text + name: text4 + props: + mode: markdown + value: + $$jsExpression: | + `Date added: ${query.data[i].date_added}` + layout: + columnSize: 1 + verticalAlign: center + - component: PageRow + name: pageRow1 + props: + justifyContent: start + children: + - component: PageColumn + name: pageColumn1 + layout: + columnSize: 1 + children: + - component: PageRow + name: pageRow3 + props: + justifyContent: start + children: + - component: Text + name: text1 + layout: + columnSize: 1 + verticalAlign: center + props: + mode: markdown + value: + $$jsExpression: > + `Quantity left: + ${query.data[i].quantity}` + - component: Text + name: text3 + layout: + verticalAlign: center + props: + value: + $$jsExpression: | + `Price: $${query.data[i].price}` + mode: text + - component: PageRow + name: pageRow2 + props: + justifyContent: start + children: + - component: Text + name: text5 + layout: + columnSize: 1 + verticalAlign: center + props: + mode: markdown + value: + $$jsExpression: > + `Average rating: ${query.data[i].rating}` + - component: Checkbox + name: checkbox + props: + label: Offer discount? + - component: Image + name: image + props: + src: + $$jsExpression: | + query.data[i].image + width: 200 + height: 200 + layout: + columnSize: 0.7959061356592024 + horizontalAlign: center + itemCount: 10 + display: standalone diff --git a/examples/supabase/toolpad/resources/supabase.ts b/examples/supabase/toolpad/resources/supabase.ts new file mode 100644 index 00000000000..960e5d8c5bb --- /dev/null +++ b/examples/supabase/toolpad/resources/supabase.ts @@ -0,0 +1,10 @@ +import { createClient } from '@supabase/supabase-js'; + +const supabaseUrl = 'https://qlhkchzecwkyfcvxmwmb.supabase.co'; +const supabaseKey = process.env.SUPABASE_KEY; +const supabase = createClient(supabaseUrl, supabaseKey ?? ''); + +export default async function handler() { + const { data } = await supabase.from('product_data').select('*'); + return data; +} diff --git a/examples/with-prisma-data-provider/README.md b/examples/with-prisma-data-provider/README.md index cd6e95883a9..e4eebe6c979 100644 --- a/examples/with-prisma-data-provider/README.md +++ b/examples/with-prisma-data-provider/README.md @@ -2,6 +2,10 @@

A basic Toolpad application that demonstrates how to use data providers with Prisma.

+ + Data provider example with Prisma ORM + + ## How to run Download the example [or clone the repo](https://github.com/mui/mui-toolpad):