diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index dfa9cb82bb5..de3d35a7212 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -4,9 +4,9 @@ "node": "18", "packages": [ "packages/create-toolpad-app", - "packages/toolpad-app", - "packages/toolpad-components", - "packages/toolpad-core", + "packages/toolpad-studio", + "packages/toolpad-studio-components", + "packages/toolpad-studio-runtime", "packages/toolpad-utils" ], "silent": true diff --git a/.eslintignore b/.eslintignore index ffc9d728ba4..1f7a6d2f4e6 100644 --- a/.eslintignore +++ b/.eslintignore @@ -4,8 +4,8 @@ pnpm-lock.yaml /docs/export /docs/schemas /packages/**/dist -/packages/toolpad-app/.next -/packages/toolpad-app/public +/packages/toolpad-studio/.next +/packages/toolpad-studio/public /examples/*/toolpad.yml diff --git a/.eslintrc.js b/.eslintrc.js index 23fff813945..e45a22fd0e8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -87,8 +87,8 @@ module.exports = { zones: [ { // Don't leak the internal runtime abstraction. It's on its way to be moved towards a separate package - target: './packages/toolpad-app/src/runtime', - from: './packages/toolpad-app/src/', + target: './packages/toolpad-studio/src/runtime', + from: './packages/toolpad-studio/src/', except: ['./runtime'], }, ], @@ -110,11 +110,11 @@ module.exports = { { files: [ 'packages/create-toolpad-app/**/*', - 'packages/toolpad/**/*', - 'packages/toolpad-app/**/*', + 'packages/toolpad-studio/**/*', + 'packages/toolpad-studio/**/*', 'packages/toolpad-utils/**/*', - 'packages/toolpad-core/**/*', - 'packages/toolpad-components/**/*', + 'packages/toolpad-studio-runtime/**/*', + 'packages/toolpad-studio-components/**/*', ], excludedFiles: ['tsup.config.ts', '*.spec.ts', '*.spec.tsx', 'vitest.config.ts'], rules: { @@ -127,9 +127,9 @@ module.exports = { * Basically all code that is guaranteed being bundled for the client side and never used on serverside code * can be dev dependencies to reduce the size of the published package */ - 'packages/toolpad-app/src/components/**/*', - 'packages/toolpad-app/src/toolpad/**/*', - 'packages/toolpad-app/src/runtime/**/*', + 'packages/toolpad-studio/src/components/**/*', + 'packages/toolpad-studio/src/toolpad/**/*', + 'packages/toolpad-studio/src/runtime/**/*', ], excludedFiles: ['*.spec.ts', '*.spec.tsx'], rules: { @@ -140,18 +140,18 @@ module.exports = { // Starting small, we will progressively expand this to more packages. files: [ // 'packages/create-toolpad-app/**/*', - // 'packages/toolpad/**/*', - // 'packages/toolpad-app/**/*', + // 'packages/toolpad-studio/**/*', + // 'packages/toolpad-studio/**/*', 'packages/toolpad-utils/**/*', - // 'packages/toolpad-core/**/*', - // 'packages/toolpad-components/**/*', + // 'packages/toolpad-studio-runtime/**/*', + // 'packages/toolpad-studio-components/**/*', ], rules: { '@typescript-eslint/no-explicit-any': ['error'], }, }, { - files: ['packages/toolpad-app/pages/**/*'], + files: ['packages/toolpad-studio/pages/**/*'], rules: { // The pattern is useful to type Next.js pages 'react/function-component-definition': 'off', diff --git a/.gitignore b/.gitignore index b70d6f3c0f3..ec5a19284ed 100644 --- a/.gitignore +++ b/.gitignore @@ -49,9 +49,9 @@ lerna-debug.log dist/ -packages/toolpad-app/public/web_modules -packages/toolpad-app/public/runtime -packages/toolpad-app/public/typings.json +packages/toolpad-studio/public/web_modules +packages/toolpad-studio/public/runtime +packages/toolpad-studio/public/typings.json examples/*/yarn.lock test-results diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f2efde3fc12..b560fce45bd 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,7 +2,7 @@ ## Local development -If you would like to hack on MUI Toolpad or want to run the latest version, you can follow these steps: +If you would like to hack on MUI Toolpad Studio or want to run the latest version, you can follow these steps: _If you're looking into contributing to the docs, follow the [instructions](#building-and-running-the-documentation) down below_ @@ -13,7 +13,7 @@ _If you're looking into contributing to the docs, follow the [instructions](#bui ### Running apps inside the monorepo (recommended) -This will use the local version of Toolpad as built in the monorepo. This is recommended when your app is in a folder inside of the monorepo. You may even decide to temporarily move your app into the monorepo. +This will use the local version of Toolpad Studio as built in the monorepo. This is recommended when your app is in a folder inside of the monorepo. You may even decide to temporarily move your app into the monorepo. 1. Install dependencies: @@ -27,15 +27,15 @@ This will use the local version of Toolpad as built in the monorepo. This is rec pnpm dev ``` -1. Run Toolpad +1. Run Toolpad Studio ```bash - pnpm toolpad dev test/integration/backend-basic/fixture/toolpad --dev + pnpm toolpad-studio dev test/integration/backend-basic/fixture/toolpad --dev ``` - **Note:** It's important to note the difference between `pnpm toolpad dev` and the `--dev` parameter. The first instruction runs Toolpad in dev mode. The `--dev` parameter is one for contributors only and runs the underlying next.js app that powers the editor in dev mode. The latter makes sure the development build of React is being used and the editor frontend application runs in watch mode. + **Note:** It's important to note the difference between `pnpm toolpad-studio dev` and the `--dev` parameter. The first instruction runs Toolpad Studio in dev mode. The `--dev` parameter is one for contributors only and runs the underlying next.js app that powers the editor in dev mode. The latter makes sure the development build of React is being used and the editor frontend application runs in watch mode. -If your application has dependencies other than `@mui/toolpad`, you have to temporarily add it to the workspace: +If your application has dependencies other than `@toolpad/studio`, you have to temporarily add it to the workspace: 1. update `pnpm-workspace.yaml` (in the workspace root, not in your app), add your app folder to `workspaces.packages`. e.g. for `examples/qr-generator` which has a dependency on `qrcode` this would be: @@ -62,15 +62,15 @@ If your application has dependencies other than `@mui/toolpad`, you have to temp 1. Make sure to start the build in watch mode again and the run the app with ```bash - pnpm toolpad dev examples/qr-generator/toolpad --dev + pnpm toolpad-studio dev examples/qr-generator/toolpad --dev ``` -### Linking Toolpad in a folder on your system (advanced) +### Linking Toolpad Studio in a folder on your system (advanced)
Expand instructions -In some cases you may want to link local toolpad into a project on your laptop. +In some cases you may want to link local Toolpad Studio app into a project on your laptop. 1. Install dependencies: @@ -84,7 +84,7 @@ pnpm install pnpm dev ``` -1. In another folder, start a toolpad project using: +2. In another folder, start a Toolpad Studio project using: ```json { @@ -92,25 +92,25 @@ pnpm install "version": "1.0.0", "license": "MIT", "scripts": { - "dev": "toolpad dev --dev", - "build": "toolpad build --dev", - "start": "toolpad start --dev" + "dev": "toolpad-studio dev --dev", + "build": "toolpad-studio build --dev", + "start": "toolpad-studio start --dev" }, "dependencies": { - "@mui/toolpad": "portal:/packages/toolpad-app" + "@toolpad/studio": "portal:/packages/toolpad-studio" }, "resolutions": { - "@mui/toolpad": "portal:/packages/toolpad-app", - "@mui/toolpad-core": "portal:/packages/toolpad-core", - "@mui/toolpad-components": "portal:/packages/toolpad-components", - "@mui/toolpad-utils": "portal:/packages/toolpad-utils" + "@toolpad/studio": "portal:/packages/toolpad-studio", + "@toolpad/studio-runtime": "portal:/packages/toolpad-studio-runtime", + "@toolpad/studio-components": "portal:/packages/toolpad-studio-components", + "@toolpad/utils": "portal:/packages/toolpad-utils" } } ``` - 1. Replace `` with the path to the toolpad monorepo on your file system. Make sure to keep `portal:`. + 1. Replace `` with the path to the Toolpad Studio monorepo on your file system. Make sure to keep `portal:`. - 1. In order to use `portal:` dependencies, we will need to use yarn 2. So start by running + 2. In order to use `portal:` dependencies, we will need to use yarn 2. So start by running ```bash yarn set version berry @@ -122,13 +122,13 @@ pnpm install nodeLinker: node-modules ``` - 1. then run + 3. then run ```bash yarn install ``` -1. Run start toolpad in dev mode: +3. Run start toolpad-studio in dev mode: ```bash yarn dev @@ -147,7 +147,7 @@ The playwright tests can be run in one of two modes: pnpm test:integration --project chromium ``` -2. Toolpad in dev watchmode and run the integration tests in dev mode with the `TOOLPAD_NEXT_DEV` environment variable (slower) +2. Start Toolpad Studio in dev watchmode and run the integration tests in dev mode with the `TOOLPAD_NEXT_DEV` environment variable (slower) ```bash pnpm dev @@ -190,26 +190,26 @@ Use the `--ui` flag to run the tests interactively. - Run it on your project of choice ```bash - pnpm toolpad dev /path/to/my/toolpad/project + pnpm toolpad-studio dev /path/to/my/toolpad/studio/project ``` ## Using CodeSandbox CI -Each pull request is built on [CodeSandbox CI](https://codesandbox.io/docs/learn/sandboxes/ci). As a result of that we have a published Toolpad package for ever pull request. To use the package from the pull request, take the following steps: +Each pull request is built on [CodeSandbox CI](https://codesandbox.io/docs/learn/sandboxes/ci). As a result of that we have a published Toolpad Studio package for ever pull request. To use the package from the pull request, take the following steps: 1. In the GitHub PR checks, locate the ci/codesandbox check and make sure it has successfully finished building. Click on "details" to open the CodeSandbox CI user interface. 2. In the codesandbox UI, on the right panel, locate and expand the "Packages (6)" section. -3. Right click the link named `@mui/toolpad` and copy the address +3. Right click the link named `@toolpad/studio` and copy the address ![Copy CodeSandbox CI package link](contributing/codesandbox-ci-package-link.png) -4. In your `package.json`, for the `@mui/toolpad` dependency, replace the version with aforementioned link. e.g. +4. In your `package.json`, for the `@toolpad/studio` dependency, replace the version with aforementioned link. e.g. ```json "dependencies": { - "@mui/toolpad": "https://pkg.csb.dev/mui/mui-toolpad/commit//@mui/toolpad" + "@toolpad/studio": "https://pkg.csb.dev/mui/mui-toolpad/commit//@toolpad/studio" } ``` @@ -219,7 +219,7 @@ Each pull request is built on [CodeSandbox CI](https://codesandbox.io/docs/learn pnpm --force ``` -You'll now be able to explore your project with the Toolpad version from the GitHub PR. +You'll now be able to explore your project with the Toolpad Studio version from the GitHub PR. ## Sending a pull request diff --git a/README.md b/README.md index 3573eeb2757..fcde278e13d 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,20 @@

- MUI Toolpad logo + MUI Toolpad Studio logo

-

MUI Toolpad

+

MUI Toolpad Studio

-Quickly build internal tools. MUI Toolpad is a self-hosted low-code internal tools builder designed to extend the [MUI](https://mui.com/) React components. It's designed for developers of all trades who want to save time building internal applications. +Quickly build internal tools. MUI Toolpad Studio is a self-hosted low-code internal tools builder designed to extend the [MUI](https://mui.com/) React components. It's designed for developers of all trades who want to save time building internal applications. [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui/material-ui/blob/HEAD/LICENSE) [![CircleCI](https://circleci.com/gh/mui/mui-toolpad/tree/master.svg?style=shield)](https://app.circleci.com/pipelines/github/mui/mui-toolpad?branch=master) @@ -27,7 +27,7 @@ Quickly build internal tools. MUI Toolpad is a self-hosted low-code internal to ## 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. +A [big change](https://github.com/mui/mui-toolpad/discussions/1748) is coming: we're making Toolpad Studio focus much more on integrating with your IDE while providing the ease of building UI fast with a drag and drop. ## Product walkthrough @@ -35,27 +35,27 @@ A [big change](https://github.com/mui/mui-toolpad/discussions/1748) is coming: w ## Notice -MUI Toolpad is in its beta stages of development. Feel free to run this application to try it out for your use cases, and share any feedback, bug reports or feature requests that you come across. +MUI Toolpad Studio is in its beta stages of development. Feel free to run this application to try it out for your use cases, and share any feedback, bug reports or feature requests that you come across. ## Quick setup locally Run: ```bash -npx create-toolpad-app@latest my-toolpad-app +npx create-toolpad-app@latest my-toolpad-studio-app # or -yarn create toolpad-app my-toolpad-app +yarn create toolpad-app my-toolpad-studio-app # or -pnpm create toolpad-app my-toolpad-app +pnpm create toolpad-app my-toolpad-studio-app ``` ## Documentation -Check out our [documentation](https://mui.com/toolpad/getting-started/). +Check out our [documentation](https://mui.com/toolpad/studio/getting-started/). ## Examples -Check out our [mui-public](https://github.com/mui/mui-public) repo to see how a Toolpad app looks in production. +Check out our [mui-public](https://github.com/mui/mui-public) repo to see how a Toolpad Studio app looks in production. ## Contributing @@ -70,7 +70,7 @@ The [changelog](https://github.com/mui/mui-toolpad/releases) is regularly update ## Roadmap -Future plans and high-priority features and enhancements can be found in our [roadmap](https://mui.com/toolpad/getting-started/roadmap/). +Future plans and high-priority features and enhancements can be found in our [roadmap](https://mui.com/toolpad/studio/getting-started/roadmap/). ## License diff --git a/RELEASE.md b/RELEASE.md index dfb8199d152..420f15b52e7 100644 --- a/RELEASE.md +++ b/RELEASE.md @@ -40,7 +40,7 @@ ```bash npx https://pkg.csb.dev/mui/mui-toolpad/commit//create-toolpad-app smoke --use-pnpm cd smoke - pnpm add https://pkg.csb.dev/mui/mui-toolpad/commit//@mui/toolpad -S + pnpm add https://pkg.csb.dev/mui/mui-toolpad/commit//@toolpad/studio -S pnpm dedupe && pnpm dev ``` diff --git a/docs/data/toolpad/core/api/index.md b/docs/data/toolpad/core/api/index.md index 1207501ccbd..2ee020a6458 100644 --- a/docs/data/toolpad/core/api/index.md +++ b/docs/data/toolpad/core/api/index.md @@ -1,6 +1,6 @@ # API reference -

This page contains an index to the most important javascript APIs of Toolpad.

+

This page contains an index to the most important JavaScript APIs of Toolpad.

## Components diff --git a/docs/data/toolpad/studio/components/button/ButtonBasic.js b/docs/data/toolpad/studio/components/button/ButtonBasic.js index 4fddb476cfb..c1369b133ea 100644 --- a/docs/data/toolpad/studio/components/button/ButtonBasic.js +++ b/docs/data/toolpad/studio/components/button/ButtonBasic.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Button } from '@mui/toolpad-components'; +import { Button } from '@toolpad/studio-components'; const TOOLPAD_PROPS = { variant: 'contained', diff --git a/docs/data/toolpad/studio/components/button/ButtonColor.js b/docs/data/toolpad/studio/components/button/ButtonColor.js index b7356ca8a29..0c43948d898 100644 --- a/docs/data/toolpad/studio/components/button/ButtonColor.js +++ b/docs/data/toolpad/studio/components/button/ButtonColor.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Button } from '@mui/toolpad-components'; +import { Button } from '@toolpad/studio-components'; import { Stack } from '@mui/material'; const TOOLPAD_PROPS1 = { diff --git a/docs/data/toolpad/studio/components/button/ButtonSize.js b/docs/data/toolpad/studio/components/button/ButtonSize.js index d711696da90..a8d936ed0a4 100644 --- a/docs/data/toolpad/studio/components/button/ButtonSize.js +++ b/docs/data/toolpad/studio/components/button/ButtonSize.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Button } from '@mui/toolpad-components'; +import { Button } from '@toolpad/studio-components'; import Stack from '@mui/material/Stack'; const TOOLPAD_PROPS1 = { diff --git a/docs/data/toolpad/studio/components/button/ButtonState.js b/docs/data/toolpad/studio/components/button/ButtonState.js index d369b8b2a60..c3b094cbe37 100644 --- a/docs/data/toolpad/studio/components/button/ButtonState.js +++ b/docs/data/toolpad/studio/components/button/ButtonState.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Button } from '@mui/toolpad-components'; +import { Button } from '@toolpad/studio-components'; import { Stack } from '@mui/material'; const TOOLPAD_PROPS1 = { diff --git a/docs/data/toolpad/studio/components/button/ButtonVariant.js b/docs/data/toolpad/studio/components/button/ButtonVariant.js index 6cec7dc3712..d99f5720b9c 100644 --- a/docs/data/toolpad/studio/components/button/ButtonVariant.js +++ b/docs/data/toolpad/studio/components/button/ButtonVariant.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Button } from '@mui/toolpad-components'; +import { Button } from '@toolpad/studio-components'; import { Stack } from '@mui/material'; const TOOLPAD_PROPS1 = { diff --git a/docs/data/toolpad/studio/components/button/button.md b/docs/data/toolpad/studio/components/button/button.md index 7b3e3d2dcae..61268c89c0a 100644 --- a/docs/data/toolpad/studio/components/button/button.md +++ b/docs/data/toolpad/studio/components/button/button.md @@ -1,6 +1,6 @@ # Button -

Learn about the button component and it's usage in Toolpad.

+

Learn about the button component and it's usage in Toolpad Studio.

## Demo @@ -24,7 +24,7 @@ Below video shows how on a button click, the user input can be shown on a page i ### Navigation -From this tab, you can configure to move from one page to the other in a Toolpad app. +From this tab, you can configure to move from one page to the other in a Toolpad Studio app. {{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/studio/components/button/onclick-navigation.png", "alt": "Navigating to a page on button click", "caption": "Navigating to a page on button click", "indent": 1}} @@ -34,7 +34,7 @@ Form component also has a button whose default action is submitting the form. ## Appearance -The Button component has multiple variations supported in Toolpad. Let's look at each of these below. +The Button component has multiple variations supported in Toolpad Studio, which can be seen below. ### `variant` @@ -43,7 +43,7 @@ The variant property supports three different options: contained (default), outl ### `color` -The color property has two options: primary (default) and secondary. These take input from the global theme that you set in Toolpad from the theme tab. +The color property has two options: primary (default) and secondary. These take input from the global theme that you set in Toolpad Studio from the theme tab. {{"demo": "ButtonColor.js", "hideToolbar": true}} ### `size` @@ -58,6 +58,6 @@ Button supports states like loading and disabled to share the state of the compo ## API -See the documentation below for a complete reference to all props available to the button component in Toolpad. +See the documentation below for a complete reference to all props available to the button component in Toolpad Studio. - [`