[examples] Add shortcut to open example in online IDE (#38572)

mui · Sep 10, 2023 · e8773b2 · e8773b2
1 parent 703bbf7
commit e8773b2
Show file tree

Hide file tree

Showing 68 changed files with 200 additions and 167 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -670,7 +670,7 @@ _Jul 11, 2023_
 
 A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
 
-- 💫 Material UI, Joy UI, and Base UI are compatible with [NextJS App Router](https://nextjs.org/docs/app) (#37656) @mj12albert
+- 💫 Material UI, Joy UI, and Base UI are compatible with [Next.js App Router](https://nextjs.org/docs/app) (#37656) @mj12albert
 - 📚 Added new guides for integrating with Next.js 13 App Router (#37656) @mj12albert
   - Ⓜ️ [Material UI guide](https://mui.com/material-ui/guides/next-js-app-router/)
   - 🅙 [Joy UI guide](https://mui.com/joy-ui/integrations/next-js-app-router/)
@@ -1959,7 +1959,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som
 - &#8203;<!-- 20 -->[docs][joy] List slots in API documentation (#36271) @hbjORbj
 - &#8203;<!-- 19 -->[docs][joy] Build API documentations (#36008) @hbjORbj
 - &#8203;<!-- 18 -->[examples] Update Next.js examples to use built-in font (#36315) @Juneezee
-- &#8203;<!-- 17 -->[examples] Update curl link in `material-next-ts-v4-v5-migration` example README (#36321) @ZeeshanTamboli
+- &#8203;<!-- 17 -->[examples] Update curl link in `material-ui-nextjs-ts-v4-v5-migration` example README (#36321) @ZeeshanTamboli
 - &#8203;<!-- 16 -->[examples] Convert Next.js \_document class components to function components (#36109) @ossan-engineer
 
 ### Core

diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md
@@ -5571,7 +5571,7 @@ Here are some highlights ✨:
 - [Tooltip] Suppress warning if button is disabled and title is empty (#13785) @rfbotto
 - [Dialog] Warn if className in PaperProps is set (#13797) @eps1lon
 - [TextField] Fix textfield label position when empty (#13791) @Studio384
-- [Popper] Save 7 KB gzipped (for people only using it) (#13804) @oliviertassinari
+- [Popper] Save 7 kB gzipped (for people only using it) (#13804) @oliviertassinari
 - [Modal] Handle modal mount interruption (#13778) @amensouissi
 - [Select] Make value prop required in TypeScript (#13810) @t49tran
 - [Popover] Fix onEntering event propagation (#13821) @ekoeditaa
@@ -5788,7 +5788,7 @@ This new package is a significant step forward. Some of the key features:
 - Supports 4 different APIs: hooks, styled-components, higher-order components and render props.
 - Allow accessing the component's props from within the style object.
 - Replace the usage of the old React APIs with the new ones.
-- 15.0 KB gzipped.
+- 15.0 kB gzipped.
 
 Here is an example: https://codesandbox.io/s/vjzn5z4k77.
 
@@ -9898,7 +9898,7 @@ Here are some highlights ✨:
 
 - New InputAdornment component (#8504).
 - New [Frequently asked questions](https://github.com/mui/material-ui/blob/4df547d56448cedf70977d6e2463b38eaf64d1c7/docs/src/pages/getting-started/frequently-asked-questions.md) documentation section
-- We have saved 1 KB gzip by removing our internal react-transition-group fork (#8785).
+- We have saved 1 kB gzip by removing our internal react-transition-group fork (#8785).
 - We have made one step further in order to upgrade all our development dependencies to react@16 (#8804).
 
 ### Breaking change

diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/MyProfile.tsx
@@ -417,7 +417,7 @@ export default function MyProfile() {
             <FileUpload
               icon={<InsertDriveFileRoundedIcon />}
               fileName="Tech design requirements.pdf"
-              fileSize="200 KB"
+              fileSize="200 kB"
               progress={100}
             />
             <FileUpload

diff --git a/docs/data/styles/basics/basics-pt.md b/docs/data/styles/basics/basics-pt.md
@@ -21,7 +21,7 @@ MUI's styling solution is inspired by many other styling libraries such as [styl
 - 🚀 It's [blazing fast](https://github.com/mui/material-ui/tree/master/benchmark/server#material-uistyles).
 - 🧩 É extensível através de uma API de [plugin](https://github.com/cssinjs/jss/blob/master/docs/plugins.md).
 - ⚡️Ela usa [JSS](https://github.com/cssinjs/jss) em seu núcleo – um [alto desempenho](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript para o compilador CSS, que funciona em tempo de execução e no lado do servidor.
-- 📦 Less than [15 KB gzipped](https://bundlephobia.com/package/@mui/styles); and no bundle size increase if used alongside MUI.
+- 📦 Less than [15 kB gzipped](https://bundlephobia.com/package/@mui/styles); and no bundle size increase if used alongside MUI.
 
 ## Instalação
 

diff --git a/docs/data/styles/basics/basics.md b/docs/data/styles/basics/basics.md
@@ -27,7 +27,7 @@ Material UI's styling solution is inspired by many other styling libraries such
 - 🚀 It's [blazing fast](https://github.com/mui/material-ui/tree/master/benchmark/server#material-uistyles).
 - 🧩 It's extensible via a [plugin](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API.
 - ⚡️ It uses [JSS](https://github.com/cssinjs/jss) at its core – a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript to CSS compiler which works at runtime and server-side.
-- 📦 Less than [15 KB gzipped](https://bundlephobia.com/package/@mui/styles); and no bundle size increase if used alongside Material UI.
+- 📦 Less than [15 kB gzipped](https://bundlephobia.com/package/@mui/styles); and no bundle size increase if used alongside Material UI.
 
 ## Installation
 

diff --git a/docs/src/components/showcase/FolderTable.tsx b/docs/src/components/showcase/FolderTable.tsx
@@ -62,7 +62,7 @@ function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number)
 function formatSize(size: number) {
   const kb = size / 1000;
   if (kb < 1000) {
-    return `${kb.toFixed(1)} KB`;
+    return `${kb.toFixed(1)} kB`;
   }
   return `${(kb / 1000).toFixed(0)} MB`;
 }

diff --git a/examples/base-ui-cra-ts/package.json b/examples/base-ui-cra-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "base-cra-ts",
+  "name": "base-ui-cra-ts",
   "version": "5.0.0",
   "private": true,
   "dependencies": {

diff --git a/examples/base-ui-cra/package.json b/examples/base-ui-cra/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "base-cra",
+  "name": "base-ui-cra",
   "version": "5.0.0",
   "private": true,
   "dependencies": {

diff --git a/examples/base-ui-nextjs-tailwind-ts/README.md b/examples/base-ui-nextjs-tailwind-ts/README.md
@@ -13,22 +13,24 @@ curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip
 cd base-ui-nextjs-tailwind-ts
 ```
 
-Install dependencies and run:
+Install it and run:
 
 ```bash
 npm install
 npm run dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+or
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+<!-- #default-branch-switch -->
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts)
 
-This example uses [`next/font/google`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts) to automatically optimize and load Inter, a custom Google Font.
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/base-ui-nextjs-tailwind-ts)
 
 ## Learn more
 
 To learn more about this example:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Customizing Base UI](https://mui.com/base-ui/getting-started/customization/) - strategies for styling and customizing Base UI.
diff --git a/examples/base-ui-nextjs-tailwind-ts/package.json b/examples/base-ui-nextjs-tailwind-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "base-next-app-router-tailwind-ts",
+  "name": "base-ui-nextjs-tailwind-ts",
   "version": "5.0.0",
   "private": true,
   "scripts": {
@@ -12,9 +12,9 @@
   "dependencies": {
     "@mui/base": "latest",
     "clsx": "latest",
-    "next": "13.x",
-    "react": "18.x",
-    "react-dom": "18.x"
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
   },
   "devDependencies": {
     "@types/node": "latest",
@@ -24,6 +24,7 @@
     "eslint": "latest",
     "eslint-config-next": "latest",
     "postcss": "latest",
+    "postcss-nesting": "latest",
     "tailwindcss": "latest",
     "typescript": "latest"
   }

diff --git a/examples/base-ui-nextjs-tailwind-ts/postcss.config.js b/examples/base-ui-nextjs-tailwind-ts/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    'tailwindcss/nesting': 'postcss-nesting',
     tailwindcss: {},
     autoprefixer: {},
   },

diff --git a/examples/base-ui-nextjs-tailwind-ts/src/app/layout.tsx b/examples/base-ui-nextjs-tailwind-ts/src/app/layout.tsx
@@ -2,7 +2,11 @@ import * as React from 'react';
 import { IBM_Plex_Sans } from 'next/font/google';
 import './globals.css';
 
-const font = IBM_Plex_Sans({ weight: ['400', '500', '700'], subsets: ['latin'] });
+const font = IBM_Plex_Sans({
+  weight: ['400', '500', '700'],
+  subsets: ['latin'],
+  display: 'swap',
+});
 
 export const metadata = {
   title: 'Create Next App',

diff --git a/examples/base-ui-vite-tailwind/README.md b/examples/base-ui-vite-tailwind/README.md
@@ -15,17 +15,17 @@ curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip
 cd base-ui-vite-tailwind
 ```
 
-Install dependencies and run:
+Install it and run:
 
 ```bash
 npm install
 npm start
 ```
 
-PS: Don't forget to [optimize](https://tailwindcss.com/docs/optimizing-for-production) Tailwind CSS for production!
-
 or:
 
 <!-- #default-branch-switch -->
 
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/base-ui-vite-tailwind)
diff --git a/examples/base-ui-vite-tailwind/package.json b/examples/base-ui-vite-tailwind/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "base-vite-tailwind",
+  "name": "base-ui-vite-tailwind",
   "private": true,
   "version": "5.0.0",
   "type": "module",

diff --git a/examples/joy-ui-cra-ts/README.md b/examples/joy-ui-cra-ts/README.md
@@ -27,3 +27,10 @@ or:
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-ui-cra-ts)
 
 [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/joy-ui-cra-ts)
+
+## What's next?
+
+<!-- #default-branch-switch -->
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://mui.com/joy-ui/getting-started/templates/) section.
diff --git a/examples/joy-ui-cra-ts/package.json b/examples/joy-ui-cra-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "joy-cra-ts",
+  "name": "joy-ui-cra-ts",
   "version": "5.0.0",
   "private": true,
   "dependencies": {

diff --git a/examples/joy-ui-nextjs-ts/README.md b/examples/joy-ui-nextjs-ts/README.md
@@ -2,7 +2,7 @@
 
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-## Getting started
+## How to use
 
 Download the example [or clone the repo](https://github.com/mui/material-ui):
 
@@ -13,7 +13,7 @@ curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip
 cd joy-ui-nextjs-ts
 ```
 
-Install dependencies and run:
+Install it and run:
 
 ```bash
 npm install
@@ -22,13 +22,24 @@ npm run dev
 
 Open [http://localhost:3000](http://localhost:3000) with your web browser to see the result.
 
-You can start editing the page by modifying `src/app/page.tsx`. The page auto-updates as you edit the file.
+or:
 
-This example uses [`next/font/google`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts) to automatically optimize and load Public Sans, a custom Google Font.
+<!-- #default-branch-switch -->
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-ui-nextjs-ts)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/joy-ui-nextjs-ts)
 
 ## Learn more
 
 To learn more about this example:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Customizing Joy UI](https://mui.com/joy-ui/customization/approaches/) - approaches to customizing Joy UI.
+
+## What's next?
+
+<!-- #default-branch-switch -->
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://mui.com/joy-ui/getting-started/templates/) section.
diff --git a/examples/joy-ui-nextjs-ts/package.json b/examples/joy-ui-nextjs-ts/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "joy-next-app-router-ts",
-  "version": "0.1.0",
+  "name": "joy-ui-nextjs-ts",
+  "version": "5.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -14,9 +14,9 @@
     "@emotion/react": "latest",
     "@emotion/styled": "latest",
     "@mui/joy": "latest",
-    "next": "13.x",
-    "react": "18.x",
-    "react-dom": "18.x"
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
   },
   "devDependencies": {
     "@types/node": "latest",

diff --git a/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/theme.js b/examples/joy-ui-nextjs-ts/src/components/ThemeRegistry/theme.js
diff --git a/...tjs/src/components/ThemeRegistry/theme.ts → ...-ts/src/components/ThemeRegistry/theme.ts b/...tjs/src/components/ThemeRegistry/theme.ts → ...-ts/src/components/ThemeRegistry/theme.ts
@@ -5,6 +5,7 @@ const inter = Inter({
   subsets: ['latin'],
   adjustFontFallback: false, // prevent NextJS from adding its own fallback font
   fallback: ['var(--joy-fontFamily-fallback)'], // use Joy UI's fallback font
+  display: 'swap',
 });
 
 const sourceCodePro = Source_Code_Pro({
@@ -21,6 +22,7 @@ const sourceCodePro = Source_Code_Pro({
     'Courier New',
     'monospace',
   ],
+  display: 'swap',
 });
 
 const theme = extendTheme({

diff --git a/examples/joy-ui-vite-ts/README.md b/examples/joy-ui-vite-ts/README.md
@@ -22,6 +22,8 @@ npm run dev
 
 or:
 
+<!-- #default-branch-switch -->
+
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/joy-ui-vite-ts)
 
 [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/joy-ui-vite-ts)
@@ -30,3 +32,10 @@ or:
 
 This example uses [Vite.js](https://github.com/vitejs/vite).
 It includes `@mui/joy` and it's peer dependencies.
+
+## What's next?
+
+<!-- #default-branch-switch -->
+
+You now have a working example project.
+You can head back to the documentation and continue by browsing the [templates](https://mui.com/joy-ui/getting-started/templates/) section.
diff --git a/examples/joy-ui-vite-ts/package.json b/examples/joy-ui-vite-ts/package.json
@@ -1,7 +1,7 @@
 {
   "name": "joy-ui-vite-ts",
   "private": true,
-  "version": "0.0.0",
+  "version": "5.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/examples/material-ui-cra-styled-components-ts/README.md b/examples/material-ui-cra-styled-components-ts/README.md
@@ -40,7 +40,7 @@ npm start
 
 Note that CodeSandbox is not supporting react-app-rewired, yet you can [still see the code](https://codesandbox.io/s/github/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts).
 
-The following link leverages this demo: https://mui.com/guides/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`
+The following link leverages this demo: https://mui.com/guides/interoperability/#change-the-default-styled-engine with Parcel's alias feature within the `package.json`.
 
 [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-interoperability-w9z9d)
 

diff --git a/examples/material-ui-cra-styled-components-ts/package.json b/examples/material-ui-cra-styled-components-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "material-cra-styled-components-ts",
+  "name": "material-ui-cra-styled-components-ts",
   "version": "5.0.0",
   "private": true,
   "dependencies": {

diff --git a/examples/material-ui-cra-styled-components-ts/src/ProTip.tsx b/examples/material-ui-cra-styled-components-ts/src/ProTip.tsx
@@ -15,9 +15,9 @@ export default function ProTip() {
   return (
     <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
       <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
-      Pro tip: See more{' '}
-      <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link> in the
-      MUI documentation.
+      {'Pro tip: See more '}
+      <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>
+      {' in the Material UI documentation.'}
     </Typography>
   );
 }