Add create-toolpad-app CLI

.circleci/config.yml

@@ -79,6 +79,7 @@ commands:
             - packages/toolpad-app/node_modules
             - packages/toolpad-components/node_modules
             - packages/toolpad-core/node_modules
+            - packages/create-toolpad-app/node_modules
       - when:
           condition: << parameters.browsers >>
           steps:

.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

NOTES.md

@@ -5,3 +5,40 @@ Codemirror + typescript resources:
 - https://discuss.codemirror.net/t/codemirror-6-and-typescript-lsp/3398/3
 - https://github.com/FurqanSoftware/codemirror-languageserver
 - http://www.blog.wylie.su/codemirror-lsp
+
+tentative dir 13 to do list:
+
+- remove all non-dir13 things, make the local mode a default
+- add a .gitignore file to the `.toolpad-generated` folder
+- lots of issues around custom component editing. e.g. files with capital first letter.
+- improve DX for developing on toolpad locally: open vscode button, default files,...
+- port tests over
+- consensus on a file system layout
+- consensus on routing
+- consensus on API (`createComponent`, `createQuery`,...)
+- create a npm publishing flow
+- Support custom components with node modules
+- build step (catch problems in ci instead of runtime)
+- handle runtime process exiting
+- trim package size
+- automatically pick port if 3000 is in use?
+- automatically open editor in the browser on start?
+- directly bind to data from a table/select/chart without creating a query?
+- reference @types/node in user project
+- `toolpad init` command?
+- avoid having to install `@mui/toolpad-core`. Can we have users import e.g. `createComponent` from `@mui/toolpad`?
+- more concise way of defining argTypes, or helper methods to build them up
+- infer query `parameters` typescript type from the definiton
+- Better error handling for query:
+  ```ts
+  export async function repro() {
+    const x: any = {};
+    x.x = x;
+    return x;
+  }
+  ```
+  or just let it error?
+- which node versions to support?
+- remove function datasource
+- remove all datasources?
+- deploys take too long, optimize

RELEASE.md

@@ -67,3 +67,21 @@
    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 release:build
+yarn lerna publish --force-publish --no-git-tag-version --no-push --no-git-reset
+```
+
+For canary releases:
+
+```sh
+yarn release:build
+yarn lerna publish --force-publish --no-git-tag-version --no-push --no-git-reset --pre-dist-tag canary
+```
+
+<!-- TODO: work out full flow -->

docker/images/toolpad/Dockerfile

@@ -25,6 +25,7 @@ COPY ./packages/eslint-plugin-material-ui/package.json ./packages/eslint-plugin-
 COPY ./packages/toolpad-app/package.json ./packages/toolpad-app/
 COPY ./packages/toolpad-components/package.json ./packages/toolpad-components/
 COPY ./packages/toolpad-core/package.json ./packages/toolpad-core/
+COPY ./packages/create-toolpad-app/package.json ./packages/create-toolpad-app/
 RUN --mount=type=cache,target=/root/caches \
   yarn install --frozen-lockfile
 

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "0.0.41",
+  "version": "0.0.42-alpha.5",
   "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"
+  }
+}