From ff9406a122f980afbd4f3fd1a0222514d286698e Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Wed, 11 Sep 2024 16:30:55 +0700 Subject: [PATCH] [material-ui][docs] Open Material UI template with CodeSandbox/StackBlitz (#43604) --- .circleci/config.yml | 6 - docs/data/material/getting-started/faq/faq.md | 75 +++ .../templates/dashboard/Dashboard.js | 111 ++--- .../templates/dashboard/Dashboard.tsx | 119 ++--- .../templates/dashboard/TemplateFrame.js | 113 ----- .../templates/dashboard/TemplateFrame.tsx | 115 ----- .../dashboard/components/AppNavbar.js | 2 +- .../dashboard/components/AppNavbar.tsx | 2 +- .../components/ChartUserByCountry.js | 2 +- .../components/ChartUserByCountry.tsx | 2 +- .../components/CustomizedTreeView.js | 4 +- .../components/CustomizedTreeView.tsx | 4 +- .../templates/dashboard/components/Header.js | 2 + .../templates/dashboard/components/Header.tsx | 2 + .../dashboard/components/NavbarBreadcrumbs.js | 2 +- .../components/NavbarBreadcrumbs.tsx | 2 +- .../dashboard/components/PageViewsBarChart.js | 6 +- .../components/PageViewsBarChart.tsx | 6 +- .../dashboard/components/SelectContent.js | 6 +- .../dashboard/components/SelectContent.tsx | 6 +- .../dashboard/components/SideMenu.js | 2 +- .../dashboard/components/SideMenu.tsx | 2 +- .../internals/components/ToggleCustomTheme.js | 54 --- .../components/ToggleCustomTheme.tsx | 52 -- .../dashboard/theme/customizations/charts.js | 6 +- .../dashboard/theme/customizations/charts.ts | 6 +- .../theme/customizations/dataDisplay.js | 233 --------- .../theme/customizations/dataDisplay.tsx | 233 --------- .../theme/customizations/dataGrid.js | 26 +- .../theme/customizations/dataGrid.ts | 22 +- .../theme/customizations/datePickers.js | 38 +- .../theme/customizations/datePickers.ts | 38 +- .../theme/customizations/feedback.js | 46 -- .../theme/customizations/feedback.tsx | 46 -- .../dashboard/theme/customizations/index.js | 5 - .../dashboard/theme/customizations/index.ts | 5 - .../dashboard/theme/customizations/inputs.js | 444 ----------------- .../dashboard/theme/customizations/inputs.tsx | 445 ------------------ .../theme/customizations/navigation.js | 278 ----------- .../theme/customizations/navigation.tsx | 279 ----------- .../theme/customizations/surfaces.js | 113 ----- .../theme/customizations/surfaces.ts | 113 ----- .../theme/customizations/treeView.js | 4 +- .../theme/customizations/treeView.ts | 4 +- .../dashboard/theme/getDashboardTheme.js | 30 -- .../dashboard/theme/getDashboardTheme.tsx | 36 -- .../dashboard/theme/themePrimitives.js | 216 --------- .../dashboard/theme/themePrimitives.ts | 235 --------- .../templates/shared-theme/AppTheme.js | 55 +++ .../templates/shared-theme/AppTheme.tsx | 56 +++ .../shared-theme/ColorModeIconDropdown.js | 87 ++++ .../shared-theme/ColorModeIconDropdown.tsx | 87 ++++ .../templates/shared-theme/ColorModeSelect.js | 25 + .../shared-theme/ColorModeSelect.tsx | 26 + .../customizations/dataDisplay.js | 6 +- .../customizations/dataDisplay.tsx | 6 +- .../shared-theme/customizations/feedback.js | 4 +- .../shared-theme/customizations/feedback.tsx | 4 +- .../shared-theme/customizations/inputs.js | 20 +- .../shared-theme/customizations/inputs.tsx | 20 +- .../shared-theme/customizations/navigation.js | 50 +- .../customizations/navigation.tsx | 50 +- .../shared-theme/customizations/surfaces.js | 18 +- .../shared-theme/customizations/surfaces.ts | 18 +- .../templates/shared-theme/themePrimitives.js | 162 +++++++ .../templates/shared-theme/themePrimitives.ts | 164 +++++++ .../templates/sign-in/SignIn.js | 294 ++++++------ .../templates/sign-in/SignIn.tsx | 299 ++++++------ .../templates/sign-in/TemplateFrame.js | 113 ----- .../templates/sign-in/TemplateFrame.tsx | 115 ----- .../templates/sign-in/ToggleColorMode.js | 32 -- .../templates/sign-in/ToggleColorMode.tsx | 34 -- .../theme/customizations/dataDisplay.js | 233 --------- .../theme/customizations/dataDisplay.tsx | 233 --------- .../sign-in/theme/customizations/feedback.js | 46 -- .../sign-in/theme/customizations/feedback.tsx | 46 -- .../sign-in/theme/customizations/index.js | 5 - .../sign-in/theme/customizations/index.ts | 5 - .../sign-in/theme/customizations/inputs.js | 444 ----------------- .../sign-in/theme/customizations/inputs.tsx | 445 ------------------ .../theme/customizations/navigation.js | 278 ----------- .../theme/customizations/navigation.tsx | 279 ----------- .../sign-in/theme/customizations/surfaces.js | 113 ----- .../sign-in/theme/customizations/surfaces.ts | 113 ----- .../templates/sign-in/theme/getSignInTheme.js | 21 - .../sign-in/theme/getSignInTheme.tsx | 23 - .../sign-in/theme/themePrimitives.js | 216 --------- .../sign-in/theme/themePrimitives.ts | 235 --------- .../getting-started/templates/templates.md | 2 +- docs/next-env.d.ts | 2 +- .../website/dashboard-template-theme.tsx | 48 +- .../getting-started/templates/dashboard.js | 5 +- .../getting-started/templates/sign-in.js | 5 +- .../templates/dashboard-dark.jpg | Bin 164011 -> 165633 bytes .../getting-started/templates/dashboard.jpg | Bin 163254 -> 166351 bytes .../templates/sign-in-dark.jpg | Bin 38061 -> 36743 bytes .../getting-started/templates/sign-in.jpg | Bin 36821 -> 36218 bytes docs/scripts/generateTemplateScreenshots.ts | 56 ++- docs/src/modules/components/TemplateFrame.js | 362 ++++++++++++++ .../material/sourceMaterialTemplates.ts | 42 ++ docs/src/modules/sandbox/CodeSandbox.test.js | 4 +- docs/src/modules/sandbox/CodeSandbox.ts | 96 ++++ docs/src/modules/sandbox/CreateReactApp.ts | 2 +- docs/src/modules/sandbox/Dependencies.ts | 9 +- docs/src/modules/sandbox/StackBlitz.test.js | 4 +- docs/src/modules/sandbox/StackBlitz.ts | 141 +++++- .../mui-docs/src/branding/brandingTheme.ts | 45 ++ 107 files changed, 2045 insertions(+), 6856 deletions(-) delete mode 100644 docs/data/material/getting-started/templates/dashboard/TemplateFrame.js delete mode 100644 docs/data/material/getting-started/templates/dashboard/TemplateFrame.tsx delete mode 100644 docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js delete mode 100644 docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.js delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.tsx delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.js delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.tsx delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.js delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.tsx delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.js delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.tsx delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.js delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.ts delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.js delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js delete mode 100644 docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts create mode 100644 docs/data/material/getting-started/templates/shared-theme/AppTheme.js create mode 100644 docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx create mode 100644 docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.js create mode 100644 docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.tsx create mode 100644 docs/data/material/getting-started/templates/shared-theme/ColorModeSelect.js create mode 100644 docs/data/material/getting-started/templates/shared-theme/ColorModeSelect.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/TemplateFrame.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/index.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/index.ts delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.ts delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.tsx delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js delete mode 100644 docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts create mode 100644 docs/src/modules/components/TemplateFrame.js create mode 100644 docs/src/modules/material/sourceMaterialTemplates.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index 4cb1b1a1d52884..36c364d56b1c62 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -299,12 +299,6 @@ jobs: command: | pnpm docs:link-check git add -A && git diff --exit-code --staged - - run: - name: Update the templates shared themes - command: pnpm template:update-theme - - run: - name: '`pnpm template:update-theme` changes committed?' - command: git add -A && git diff --exit-code --staged test_types: <<: *default-job resource_class: 'medium+' diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md index ccbdc6ebd8ff96..56999db60af9a7 100644 --- a/docs/data/material/getting-started/faq/faq.md +++ b/docs/data/material/getting-started/faq/faq.md @@ -261,6 +261,81 @@ return ( If you are getting the error: `TypeError: Cannot convert a Symbol value to a string`, take a look at the [styled()](/system/styled/#how-to-use-components-selector-api) docs page for instructions on how you can fix this. +## How can I contribute to the free templates? + +The templates are built using a [shared theme](https://github.com/mui/material-ui/tree/v6.0.2/docs/data/material/getting-started/templates/shared-theme). Below are the structure to create a new template: + +### Template page + +Create a new page in the `docs/pages/material-ui/getting-started/templates/.js` directory with the following code: + +```js +import * as React from 'react'; +import AppTheme from 'docs/src/modules/components/AppTheme'; +import TemplateFrame from 'docs/src/modules/components/TemplateFrame'; +import Template from 'docs/data/material/getting-started/templates//