Merge branch 'master' into docs-vale

bharatkashyap · web-flow · commit 9210c8005ab1 · 2024-02-22T16:23:47.000+05:30
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -110,13 +110,13 @@ pnpm install
 
    1. Replace `<your-local-toolpad-monorepo>` with the path to the toolpad monorepo on your file system. Make sure to keep `portal:`.
 
-   1. In order to use `portal:` dependencies, we will need to use pnpm 2. So start by running
+   1. In order to use `portal:` dependencies, we will need to use yarn 2. So start by running
 
       ```bash
-      pnpm set version berry
+      yarn set version berry
       ```
 
-      and add to the `.pnpmrc.yml`:
+      and add to the `.yarnrc.yml`:
 
       ```yaml
       nodeLinker: node-modules
@@ -125,13 +125,13 @@ pnpm install
    1. then run
 
       ```bash
-      pnpm install
+      yarn install
       ```
 
 1. Run start toolpad in dev mode:
 
    ```bash
-   pnpm dev
+   yarn dev
    ```
 
 </details>
diff --git a/docs/config.js b/docs/config.js
@@ -0,0 +1 @@
+module.exports = require('@mui/monorepo/docs/config');
diff --git a/docs/data/toolpad/reference/components/list.md b/docs/data/toolpad/reference/components/list.md
@@ -8,9 +8,10 @@ A list component.
 
 ## Properties
 
-| Name                                          | Type                                    | Default                             | Description                                                                                                                                                                                                                                                                          |
-| :-------------------------------------------- | :-------------------------------------- | :---------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <span class="prop-name">itemCount</span>      | <span class="prop-type">number</span>   | <span class="prop-default">3</span> | Number of items to render.                                                                                                                                                                                                                                                           |
-| <span class="prop-name">renderItem</span>     | <span class="prop-type">template</span> |                                     | List item template to render.                                                                                                                                                                                                                                                        |
-| <span class="prop-name">disablePadding</span> | <span class="prop-type">boolean</span>  |                                     | If true, vertical padding is removed from the list.                                                                                                                                                                                                                                  |
-| <span class="prop-name">sx</span>             | <span class="prop-type">object</span>   |                                     | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. |
+| Name                                          | Type                                    | Default                                 | Description                                                                                                                                                                                                                                                                          |
+| :-------------------------------------------- | :-------------------------------------- | :-------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">itemCount</span>      | <span class="prop-type">number</span>   | <span class="prop-default">3</span>     | Number of items to render.                                                                                                                                                                                                                                                           |
+| <span class="prop-name">renderItem</span>     | <span class="prop-type">template</span> |                                         | List item template to render.                                                                                                                                                                                                                                                        |
+| <span class="prop-name">disablePadding</span> | <span class="prop-type">boolean</span>  |                                         | If true, vertical padding is removed from the list.                                                                                                                                                                                                                                  |
+| <span class="prop-name">loading</span>        | <span class="prop-type">boolean</span>  | <span class="prop-default">false</span> | Displays a loading animation indicating the list is still loading                                                                                                                                                                                                                    |
+| <span class="prop-name">sx</span>             | <span class="prop-type">object</span>   |                                         | The [`sx` prop](https://mui.com/system/getting-started/the-sx-prop/) is used for defining custom styles that have access to the theme. All MUI System properties are available via the `sx` prop. In addition, the `sx` prop allows you to specify any other CSS rules you may need. |
diff --git a/docs/package.json b/docs/package.json
@@ -30,7 +30,7 @@
     "@mui/lab": "5.0.0-alpha.165",
     "@mui/material": "5.15.10",
     "@mui/material-nextjs": "^5.15.9",
-    "@mui/monorepo": "github:mui/material-ui#c434322eccab4d5cea72535d5e46e1e9e76a69a8",
+    "@mui/monorepo": "github:mui/material-ui#36bb1aa7f35b4b9d527716a5907e9be38d78ffd7",
     "@mui/styles": "5.15.10",
     "@mui/toolpad": "workspace:*",
     "@mui/utils": "5.15.9",
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -11,14 +11,15 @@ import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics';
 import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import { CodeVariantProvider } from 'docs/src/modules/utils/codeVariant';
 import { CodeCopyProvider } from 'docs/src/modules/utils/CodeCopy';
-import { UserLanguageProvider } from 'docs/src/modules/utils/i18n';
 import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import createEmotionCache from 'docs/src/createEmotionCache';
 import findActivePage from 'docs/src/modules/utils/findActivePage';
 import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl';
 import toolpadPkgJson from '@mui/toolpad/package.json';
+import { DocsProvider } from '@mui/docs/DocsProvider';
 import pages from '../data/pages';
+import config from '../config';
 
 const clientSideEmotionCache = createEmotionCache();
 
@@ -174,7 +175,7 @@ function AppWrapper(props) {
         <meta name="mui:productId" content={productId} />
         <meta name="mui:productCategoryId" content={productCategoryId} />
       </NextHead>
-      <UserLanguageProvider defaultUserLanguage={pageProps.userLanguage}>
+      <DocsProvider config={config} defaultUserLanguage={pageProps.userLanguage}>
         <CodeCopyProvider>
           <CodeVariantProvider>
             <PageContext.Provider value={pageContextValue}>
@@ -187,7 +188,7 @@ function AppWrapper(props) {
             </PageContext.Provider>
           </CodeVariantProvider>
         </CodeCopyProvider>
-      </UserLanguageProvider>
+      </DocsProvider>
     </React.Fragment>
   );
 }
diff --git a/docs/src/components/landing/Banner.js b/docs/src/components/landing/Banner.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
 import Typography from '@mui/material/Typography';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 import { alpha } from '@mui/material/styles';
diff --git a/docs/src/components/landing/GetStartedButtons.js b/docs/src/components/landing/GetStartedButtons.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
 import NpmCopyButton from 'docs/src/components/action/NpmCopyButton';
 
 export default function GetStartedButtons(props) {
diff --git a/docs/src/components/landing/UseCases.js b/docs/src/components/landing/UseCases.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Link from 'docs/src/modules/components/Link';
+import { Link } from '@mui/docs/Link';
 import PropTypes from 'prop-types';
 import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
diff --git a/eslintWebpackResolverConfig.js b/eslintWebpackResolverConfig.js
@@ -5,6 +5,7 @@ module.exports = {
   resolve: {
     modules: [__dirname, 'node_modules'],
     alias: {
+      '@mui/docs': path.resolve(__dirname, './node_modules/@mui/monorepo/packages/mui-docs/src'),
       '@mui/toolpad-components': path.resolve(__dirname, './packages/toolpad-components/src'),
       '@mui/toolpad-core': path.resolve(__dirname, './packages/toolpad-core/src'),
       '@mui/toolpad-utils': path.resolve(__dirname, './packages/toolpad-utils/src'),
diff --git a/examples/hacker-news-client/README.md b/examples/hacker-news-client/README.md
@@ -0,0 +1,34 @@
+# Hacker News client
+
+<p class="description">Toolpad application that demonstrates writing an alternative (simplified) [Hacker News](https://news.ycombinator.com/news) client.</p>
+
+## How to run
+
+Use `create-toolpad-app` to bootstrap the example:
+
+```bash
+npx create-toolpad-app@latest --example hacker-news-client
+```
+
+```bash
+yarn create toolpad-app --example hacker-news-client
+```
+
+```bash
+pnpm create toolpad-app --example hacker-news-client
+```
+
+or:
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/mui/mui-toolpad/tree/master/examples/hacker-news-client)
+
+## What's inside
+
+A Toolpad app that shows how to:
+
+- chain REST API calls
+- use the List component
+
+## The source
+
+[Check out the source code](https://github.com/mui/mui-toolpad/tree/master/examples/hacker-news-client)
diff --git a/examples/hacker-news-client/package.json b/examples/hacker-news-client/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "hacker-news-client",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "toolpad dev",
+    "build": "toolpad build",
+    "start": "toolpad start"
+  },
+  "dependencies": {
+    "@mui/toolpad": "^0.1.50",
+    "axios": "^1.4.0"
+  }
+}
diff --git a/examples/hacker-news-client/toolpad/.gitignore b/examples/hacker-news-client/toolpad/.gitignore
@@ -0,0 +1 @@
+.generated
diff --git a/examples/hacker-news-client/toolpad/application.yml b/examples/hacker-news-client/toolpad/application.yml
@@ -0,0 +1,3 @@
+apiVersion: v1
+kind: application
+spec: { authentication: {}, authorization: {} }
diff --git a/examples/hacker-news-client/toolpad/pages/hackernews/page.yml b/examples/hacker-news-client/toolpad/pages/hackernews/page.yml
@@ -0,0 +1,61 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.50/docs/schemas/v1/definitions.json#properties/Page
+
+apiVersion: v1
+kind: page
+spec:
+  title: Default page
+  queries:
+    - name: stories
+      query:
+        function: getStories
+        kind: local
+  content:
+    - component: Container
+      name: container
+      children:
+        - component: Text
+          name: text2
+          layout:
+            columnSize: 1
+          props:
+            value: ' Hacker News'
+            variant: h4
+      props:
+        sx:
+          background: '#FF6600'
+    - component: List
+      name: list
+      props:
+        itemCount:
+          $$jsExpression: stories.data.length
+        disablePadding: true
+        sx:
+          background: '#F6F6EF'
+        renderItem:
+          $$template:
+            - component: PageRow
+              name: pageRow1
+              children:
+                - component: PageColumn
+                  name: pageColumn
+                  layout:
+                    columnSize: 1
+                  children:
+                    - component: Text
+                      name: text
+                      props:
+                        value:
+                          $$jsExpression: >
+                            `[**${stories.data[i].title}**](${stories.data[i].url})`
+                        mode: markdown
+                    - component: Text
+                      name: text1
+                      props:
+                        value:
+                          $$jsExpression: >
+                            `${stories.data[i].score} by ${stories.data[i].by} |
+                            ${stories.data[i].descendants} comments`
+      layout:
+        columnSize: 1
+  alias:
+    - sR_fqKE
diff --git a/examples/hacker-news-client/toolpad/resources/functions.ts b/examples/hacker-news-client/toolpad/resources/functions.ts
@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+const client = axios.create({
+  baseURL: 'https://hacker-news.firebaseio.com/',
+});
+
+export async function getStories() {
+  const { data: topStoryIds } = await client.get('/v0/topstories.json', {
+    params: {
+      orderBy: '"$key"',
+      limitToFirst: 20,
+    },
+  });
+
+  const stories = await Promise.all(
+    topStoryIds.map(async (id: string) => {
+      const { data } = await client.get(`/v0/item/${id}.json`);
+      return data;
+    }),
+  );
+
+  return stories;
+}
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@argos-ci/core": "1.5.4",
-    "@mui/monorepo": "github:mui/material-ui#c434322eccab4d5cea72535d5e46e1e9e76a69a8",
+    "@mui/monorepo": "github:mui/material-ui#36bb1aa7f35b4b9d527716a5907e9be38d78ffd7",
     "@mui/x-charts": "6.19.4",
     "@next/eslint-plugin-next": "14.1.0",
     "@playwright/test": "1.41.2",
diff --git a/packages/toolpad-components/src/List.tsx b/packages/toolpad-components/src/List.tsx
@@ -1,29 +1,42 @@
 import * as React from 'react';
 import { TemplateRenderer } from '@mui/toolpad-core';
-import { Box, List as MuiList, ListItem, SxProps } from '@mui/material';
+import { Box, List as MuiList, ListItem, SxProps, Skeleton, Stack } from '@mui/material';
 import { SX_PROP_HELPER_TEXT } from './constants';
 import createBuiltin from './createBuiltin';
 
 export type ListProps = {
   itemCount: number;
   disablePadding?: boolean;
   renderItem: TemplateRenderer;
+  loading?: boolean;
   sx?: SxProps;
 };
 
-function List({ itemCount, renderItem, disablePadding = false, sx }: ListProps) {
+function List({ itemCount, renderItem, disablePadding = false, sx, loading }: ListProps) {
   return (
     <MuiList disablePadding={disablePadding} sx={{ width: '100%', ...sx }}>
-      {[...Array(itemCount).keys()].map((index) => (
-        <ListItem key={index} disablePadding={disablePadding}>
-          <Box sx={{ width: '100%', p: 0, m: 0 }}>{renderItem(`item-${index}`, { i: index })}</Box>
-        </ListItem>
-      ))}
+      {loading ? (
+        <Stack spacing={2}>
+          <Skeleton variant="rounded" />
+          <Skeleton variant="rounded" />
+          <Skeleton variant="rounded" />
+        </Stack>
+      ) : (
+        [...Array(itemCount).keys()].map((index) => (
+          <ListItem key={index} disablePadding={disablePadding}>
+            <Box sx={{ width: '100%', p: 0, m: 0 }}>
+              {renderItem(`item-${index}`, { i: index })}
+            </Box>
+          </ListItem>
+        ))
+      )}
     </MuiList>
   );
 }
 
 export default createBuiltin(List, {
+  loadingPropSource: ['itemCount'],
+  loadingProp: 'loading',
   helperText: 'A list component.',
   argTypes: {
     itemCount: {
@@ -40,6 +53,11 @@ export default createBuiltin(List, {
       helperText: 'If true, vertical padding is removed from the list.',
       type: 'boolean',
     },
+    loading: {
+      helperText: 'Displays a loading animation indicating the list is still loading',
+      type: 'boolean',
+      default: false,
+    },
     sx: {
       helperText: SX_PROP_HELPER_TEXT,
       type: 'object',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+module.exports = require('@mui/monorepo/docs/config');`