Direction 13 (#1651)

Co-authored-by: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Co-authored-by: Bharat Kashyap <bharatkashyap@outlook.com>

.eslintignore

@@ -5,3 +5,5 @@
 /packages/toolpad-app/.next
 /packages/toolpad-app/prisma/generated/*
 /packages/toolpad-app/public
+
+/examples/*/toolpad.yml

CONTRIBUTING.md

@@ -8,46 +8,70 @@ If you would like to hack on MUI Toolpad or want to run the latest version, you
 
 - git
 - node.js
-- Docker
-- docker-compose
 
 ### Steps
 
-1. Start a local database:
+1. Install dependencies:
 
    ```sh
-   docker-compose -f ./docker-compose.dev.yml up -d
+   yarn install
    ```
 
-   You can skip this step if you already have a development database available by other means. Use the following command to stop the running container:
+1. Run the dev in watch mode (Note it's `dev13`, not `dev`)
 
    ```sh
-   docker-compose -f ./docker-compose.dev.yml down
+   yarn dev13
    ```
 
-1. Install dependencies:
-
-   ```sh
-   yarn install
+1. In another folder, start a toolpad project using:
+
+   ```json
+   {
+     "name": "toolpad-local",
+     "version": "1.0.0",
+     "license": "MIT",
+     "scripts": {
+       "dev": "toolpad dev --dev",
+       "build": "toolpad build --dev",
+       "start": "toolpad start --dev"
+     },
+     "dependencies": {
+       "@mui/toolpad": "portal:<your-local-toolpad-monorepo>/packages/toolpad"
+     },
+     "resolutions": {
+       "@mui/toolpad-app": "portal:<your-local-toolpad-monorepo>/packages/toolpad-app",
+       "@mui/toolpad-core": "portal:<your-local-toolpad-monorepo>/packages/toolpad-core",
+       "@mui/toolpad-components": "portal:<your-local-toolpad-monorepo>/packages/toolpad-components"
+     }
+   }
    ```
 
-1. Create a `.env` file in the root of the project
+   1. Replace `<your-local-toolpad-monorepo>` with the path to the toolpad monorepo on your file system. Make sure to keep `portal:`.
 
-   ```sh
-   TOOLPAD_DATABASE_URL=postgres://postgres:postgres@localhost:5432/postgres
-   # For a custom port:
-   # PORT=3004
-   # TOOLPAD_EXTERNAL_URL=http://localhost:3004/
-   ```
+   1. In order to use `portal:` dependencies, we will need to use yarn 2. So start by running
+
+      ```sh
+      yarn set version berry
+      ```
+
+      and add to the `.yarnrc.yml`:
+
+      ```yaml
+      nodeLinker: node-modules
+      ```
 
-1. Now you can run the MUI Toolpad dev command to start the application
+   1. then run
+
+      ```sh
+      yarn install
+      ```
+
+1. Run start toolpad in dev mode:
 
    ```sh
    yarn dev
    ```
 
-1. Open [`http://localhost:3000/`](http://localhost:3000/) in your browser.
-
 ### Notes for contributors
 
 - Changes that you make to the prisma model will be automatically compiled, but you'll have to push them to the db manually, either by restarting the `yarn dev` command, or by running

README.md

@@ -25,7 +25,9 @@ Quickly build internal tools. MUI Toolpad is a self-hosted low-code internal too
 
 </div>
 
-[![Editor screenshot](./docs/public/static/toolpad/marketing/readme-hero-poster.jpeg)](https://demo.toolpad.io)
+## We are making some changes
+
+A [big change](https://github.com/mui/mui-toolpad/discussions/1748) is coming: we're making Toolpad focus much more on integrating with your IDE, while providing the ease of building UI fast with a drag and drop.
 
 ## Notice
 
@@ -35,11 +37,14 @@ MUI Toolpad is in its alpha stages of development. Feel free to run this applica
 
 **NOTE: MUI Toolpad is in preview, do not run this in production.**
 
-Download the docker-compose file and run:
+Run:
 
 ```sh
-curl -LO https://raw.githubusercontent.com/mui/mui-toolpad/master/docker/compose/docker-compose.yml
-docker-compose up -d
+npx create-toolpad-app
+# or
+yarn create toolpad-app
+# or
+pnpm create toolpad-app
 ```
 
 ## Documentation

RELEASE.md

@@ -67,3 +67,23 @@
    1. Use `<version number>` as the **Release title**
    1. Mark as prerelease if necessary.
    1. **Publish release**
+
+## npm
+
+For now using this to publish
+
+```sh
+yarn
+yarn release:build
+yarn release:publish
+```
+
+For canary releases:
+
+```sh
+yarn
+yarn release:build
+yarn release:publish-canary
+```
+
+<!-- TODO: work out full flow -->

docker/images/toolpad/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.10.0 as base
+FROM node:18.9.0 as base
 
 ARG GIT_SHA1
 ENV GIT_SHA1=$GIT_SHA1

docs/data/toolpad/getting-started/overview.md

@@ -10,7 +10,7 @@ Toolpad is a self-hosted low-code internal tools builder designed to extend MUI'
 It's designed for developers of all trades who want to save time building internal applications.
 Drag and drop pre-built UI components, connect your data sources, release your app, and you're done!
 
-<img src="/static/toolpad/docs/overview/main.png" alt="Editor screenshot" width="1511px" />
+<img src="/static/toolpad/docs/overview/main.png?v=0" alt="Editor screenshot" width="1511px" />
 
 ## Advantages of Toolpad
 

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "0.0.41",
+  "version": "0.0.42-alpha.6",
   "private": true,
   "author": "MUI Toolpad",
   "license": "MIT",

examples/README.md

@@ -0,0 +1,59 @@
+# mui-toolpad-examples
+
+## To get started on the bundle size application
+
+```sh
+cd ./bundleSize
+yarn
+yarn dev
+```
+
+## To start building an application
+
+### setup
+
+```sh
+mkdir my-app
+cd ./my-app
+yarn init --yes
+yarn add @mui/toolpad @mui/toolpad-core
+```
+
+add the following scripts to package.json:
+
+```json
+"scripts": {
+  "dev": "toolpad dev",
+  "build": "toolpad build",
+  "start": "toolpad start"
+}
+```
+
+(TODO: replace above with a `npx @mui/toolpad init`?)
+
+run
+
+```sh
+yarn dev
+```
+
+Go to the url that's printed
+
+### app building
+
+You'll see the trusted page editor. connections/components have been removed.
+
+#### Creating a custom component
+
+Go to the component drawer and click on "create new component".
+In your toolpad/components folder a new component will appear. you can edit in vscode.
+
+Known sharp edges:
+
+- close the toolpad component editor because it makes it interfere with the file system one.
+- do not rename the file, or at least not to something that doesn't start with a small letter, or contains spaces ot special characters. You'll see strange things happen. To be fixed
+- the code will be copied verbatim in the toolpad config. This is because that's currently exactly how this works. It's a hack and we'll come up with something proper once we are able to change low level things in Toolpad
+
+#### Connecting data
+
+You'll see you can only create two types of queries for now. Local function queries are defined inside of the `./toolpad/queries.ts` file. If you create a local function query, you'll see an editor where you can select one of the exported functions in `./toolpad/queries.ts` and bind parameters. there's a button that will open vscode for you to edit the queries file. In this file you can export any async function and it will appear in the query editor dropdown, click preview to run it and see its result. You can use environment variables here and import node modules. The result of the function will be brought to the page as bindable state.

examples/bundleSize/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.toolpad-generated
+.env

examples/bundleSize/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "bundle-size",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "dev": "toolpad dev",
+    "build": "toolpad build",
+    "start": "toolpad start"
+  },
+  "dependencies": {
+    "@mui/toolpad": "^0.0.41-alpha.1",
+    "@mui/toolpad-core": "^0.0.41-alpha.1",
+    "axios": "^1.3.3"
+  },
+  "engines": {
+    "node": "^16.17.0"
+  }
+}