[code-infra] Simplify bug reproduction (#11849) (#11932)

Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Co-authored-by: Michel Engelen <32863416+michelengelen@users.noreply.github.com>

.github/ISSUE_TEMPLATE/1.bug.yml

@@ -28,10 +28,9 @@ body:
  attributes:
  label: Steps to reproduce
  description: |
- **⚠️ Please provide a live example for your report⚠️**
- If you don't have one, you can use one of these options:
- - [DataGrid codesandbox template](https://codesandbox.io/s/github/mui/mui-x/tree/master/templates/x-data-grid?file=/src/demo.tsx)
- - Fork any of the examples in our [documentation](https://mui.com/x/introduction/) by [clicking on the codesandbox or stackblitz icon](https://mui.com/static/docs/forking-an-example.png)
+ **⚠️ Issues that we can't reproduce can't be fixed.**
+
+ Please provide a link to a live example and an unambiguous set of steps to reproduce this bug. See our [documentation](https://mui.com/x/introduction/support/#bug-reproductions) on how to build a reproduction case.
  value: |
  Link to live example: (required)
 

.github/ISSUE_TEMPLATE/3.pro-support.yml

@@ -38,10 +38,7 @@ body:
  attributes:
  label: The problem in depth 🔍
  description: |
- **If applicable, please provide a live example to explain your problem.**
- If you don't have one, you can use one of these options:
- - [DataGrid codesandbox template](https://codesandbox.io/s/github/mui/mui-x/tree/master/templates/x-data-grid?file=/src/demo.tsx)
- - Fork any of the examples in our [documentation](https://mui.com/x/introduction/) by [clicking on the codesandbox or stackblitz icon](https://mui.com/static/docs/forking-an-example.png)
+ Please provide a link to a live example and an unambiguous set of steps to reproduce this bug. See our [documentation](https://mui.com/x/introduction/support/#bug-reproductions) on how to build a reproduction case.
  - type: textarea
  attributes:
  label: Your environment 🌎

.github/ISSUE_TEMPLATE/4.premium-support.yml

@@ -38,10 +38,7 @@ body:
  attributes:
  label: The problem in depth 🔍
  description: |
- **If applicable, please provide a live example to explain your problem.**
- If you don't have one, you can use one of these options:
- - [DataGrid codesandbox template](https://codesandbox.io/s/github/mui/mui-x/tree/master/templates/x-data-grid?file=/src/demo.tsx)
- - Fork any of the examples in our [documentation](https://mui.com/x/introduction/) by [clicking on the codesandbox or stackblitz icon](https://mui.com/static/docs/forking-an-example.png)
+ Please provide a link to a live example and an unambiguous set of steps to reproduce this bug. See our [documentation](https://mui.com/x/introduction/support/#bug-reproductions) on how to build a reproduction case.
  - type: textarea
  attributes:
  label: Your environment 🌎

.github/ISSUE_TEMPLATE/5.priority-support.yml

@@ -27,10 +27,7 @@ body:
  attributes:
  label: The problem in depth 🔍
  description: |
- **If you're reporting a bug, please provide a live example for your report.**
- If you don't have one, you can use one of these options:
- - [DataGrid codesandbox template](https://codesandbox.io/s/github/mui/mui-x/tree/master/templates/x-data-grid?file=/src/demo.tsx)
- - Fork any of the examples in our [documentation](https://mui.com/x/introduction/) by [clicking on the codesandbox or stackblitz icon](https://mui.com/static/docs/forking-an-example.png)
+ Please provide a link to a live example and an unambiguous set of steps to reproduce this bug. See our [documentation](https://mui.com/x/introduction/support/#bug-reproductions) on how to build a reproduction case.
  - type: textarea
  attributes:
  label: Your environment 🌎

templates/x-data-grid/package.json → bug-reproductions/x-data-grid/package.json

@@ -19,6 +19,9 @@
  },
  "main": "src/index.tsx",
  "scripts": {
- "start": "react-scripts start"
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject"
  }
 }

templates/x-data-grid/public/index.html → bug-reproductions/x-data-grid/public/index.html

@@ -5,7 +5,7 @@
  <!-- Fonts to support Material Design -->
  <link
  rel="stylesheet"
- href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+ href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
  />
  <!-- Icons to support Material Design -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

templates/x-data-grid/src/demo.tsx → bug-reproductions/x-data-grid/src/demo.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { DataGridPro } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
+import { DataGrid } from '@mui/x-data-grid';
 
-export default function DataGridProDemo() {
+export default function Demo() {
  const { data } = useDemoData({
  dataSet: 'Commodity',
  rowLength: 100000,
@@ -12,7 +12,7 @@ export default function DataGridProDemo() {
 
  return (
  <Box sx={{ height: 520, width: '100%' }}>
- <DataGridPro
+ <DataGrid
  {...data}
  loading={data.rows.length === 0}
  rowHeight={38}

templates/x-data-grid/src/index.tsx → bug-reproductions/x-data-grid/src/index.tsx

@@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom/client';
 import { StyledEngineProvider } from '@mui/material/styles';
 import Demo from './demo';
 
-ReactDOM.createRoot(document.querySelector('#root')).render(
+ReactDOM.createRoot(document.querySelector('#root')!).render(
  <React.StrictMode>
  <StyledEngineProvider injectFirst>
  <Demo />

docs/data/introduction/support/support.md

@@ -21,6 +21,25 @@ If you think you've found a bug, or you have a new feature idea:
 - Please don't group multiple topics in one issue.
 - Please don't comment "+1" on an issue. It spams the maintainers and doesn't help move the issue forward. Use GitHub reactions instead (👍).
 
+### Bug reproductions
+
+We require bug reports to be accompanied by a **minimal reproduction**.
+It significantly increases the odds of fixing the problem.
+You have a few possible options to provide it:
+
+- You can browse the documentation, find an example close to your use case, and then open it in a live editor:
+ [![Forking an example](https://mui.com/static/docs-infra/forking-an-example.png)](/x/react-date-pickers/getting-started/#render-your-first-component)
+
+ - [Data Grid](/x/react-data-grid/#mit-version-free-forever)
+ - [Date Pickers](/x/react-date-pickers/getting-started/#render-your-first-component)
+ - [Charts](/x/react-charts/getting-started/#single-charts)
+ - [Tree View](/x/react-tree-view/#basic-tree-view)
+
+- You can use a starter template to build a reproduction case with:
+ <!-- #default-branch-switch -->
+ - A minimal Data Grid [TypeScript template](https://stackblitz.com/github/mui/mui-x/tree/next/bug-reproductions/x-data-grid?file=src/index.tsx)
+ - A plain React [JavaScript](https://stackblitz.com/fork/github/stackblitz/starters/tree/main/react) or [TypeScript](https://stackblitz.com/fork/github/stackblitz/starters/tree/main/react-ts) template
+
 ## Stack Overflow
 
 We use Stack Overflow for how-to questions. Answers are crowdsourced from expert developers in the MUI X community as well as MUI X maintainers.