Move renderers in data folder. Fix generator static data imports

docs/pages/experiments/docs/renderers/country.js → docs/data/experiments/renderers/renderCountry.js

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import { useGridApiContext } from '@mui/x-data-grid';
-import { COUNTRY_ISO_OPTIONS } from '@mui/x-data-grid-generator';
-import { Autocomplete, autocompleteClasses, Box, InputBase, styled } from '@mui/material';
+// eslint-disable-next-line no-restricted-imports
+import { COUNTRY_ISO_OPTIONS } from '@mui/x-data-grid-generator/services/static-data';
+import {
+  Autocomplete,
+  autocompleteClasses,
+  Box,
+  InputBase,
+  styled,
+} from '@mui/material';
 
 const Country = React.memo(function Country(props) {
   const { value } = props;

docs/pages/experiments/docs/renderers/incoterm.js → docs/data/experiments/renderers/renderIncoterm.js

@@ -1,8 +1,16 @@
 import * as React from 'react';
-import { Box, ListItemIcon, ListItemText, MenuItem, Select, Tooltip } from '@mui/material';
+import {
+  Box,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  Select,
+  Tooltip,
+} from '@mui/material';
 import InfoIcon from '@mui/icons-material/Info';
 import { useGridApiContext } from '@mui/x-data-grid';
-import { INCOTERM_OPTIONS } from '@mui/x-data-grid-generator';
+// eslint-disable-next-line no-restricted-imports
+import { INCOTERM_OPTIONS } from '@mui/x-data-grid-generator/services/static-data';
 
 const Incoterm = React.memo(function Incoterm(props) {
   const { value } = props;
@@ -16,7 +24,9 @@ const Incoterm = React.memo(function Incoterm(props) {
   const code = valueStr.slice(0, valueStr.indexOf('(')).trim();
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+    <Box
+      sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
+    >
       <span>{code}</span>
       <Tooltip title={tooltip}>
         <InfoIcon sx={{ color: '#2196f3', alignSelf: 'center', ml: '8px' }} />
@@ -31,7 +41,10 @@ function EditIncoterm(props) {
   const apiRef = useGridApiContext();
 
   const handleChange = async (event) => {
-    await apiRef.current.setEditCellValue({ id, field, value: event.target.value }, event);
+    await apiRef.current.setEditCellValue(
+      { id, field, value: event.target.value },
+      event,
+    );
     apiRef.current.stopCellEditMode({ id, field });
   };
 

docs/pages/experiments/docs/renderers/progress.js → docs/data/experiments/renderers/renderProgress.js

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { useGridApiContext } from '@mui/x-data-grid';
-import { alpha, debounce, Slider, sliderClasses, styled, Tooltip } from '@mui/material';
+import {
+  alpha,
+  debounce,
+  Slider,
+  sliderClasses,
+  styled,
+  Tooltip,
+} from '@mui/material';
 
 const Center = styled('div')({
   height: '100%',

docs/pages/experiments/docs/renderers/rating.js → docs/data/experiments/renderers/renderRating.js

@@ -13,7 +13,8 @@ const RatingValue = React.memo(function RatingValue(props) {
         color: 'text.secondary',
       }}
     >
-      <Rating value={value} sx={{ mr: 1 }} readOnly /> {Math.round(Number(value) * 10) / 10}
+      <Rating value={value} sx={{ mr: 1 }} readOnly />{' '}
+      {Math.round(Number(value) * 10) / 10}
     </Box>
   );
 });
@@ -26,7 +27,10 @@ function EditRating(props) {
   const changedThroughKeyboard = React.useRef(false);
 
   const handleChange = async (event) => {
-    await apiRef.current.setEditCellValue({ id, field, value: Number(event.target.value) }, event);
+    await apiRef.current.setEditCellValue(
+      { id, field, value: Number(event.target.value) },
+      event,
+    );
     if (!changedThroughKeyboard.current) {
       apiRef.current.stopCellEditMode({ id, field });
     }

docs/pages/experiments/docs/renderers/sparkline.js → docs/data/experiments/renderers/renderSparkline.js

@@ -6,7 +6,13 @@ export function renderSparkline(params) {
     return '';
   }
 
-  return <SparkLineChart data={params.value} width={params.colDef.computedWidth} plotType="bar" />;
+  return (
+    <SparkLineChart
+      data={params.value}
+      width={params.colDef.computedWidth}
+      plotType="bar"
+    />
+  );
 }
 
 export default renderSparkline;

docs/pages/experiments/docs/renderers/status.js → docs/data/experiments/renderers/renderStatus.js

@@ -1,11 +1,23 @@
 import * as React from 'react';
-import { Chip, ListItemIcon, ListItemText, MenuItem, Select, styled } from '@mui/material';
+import {
+  Chip,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  Select,
+  styled,
+} from '@mui/material';
 import ReportProblemIcon from '@mui/icons-material/ReportProblem';
 import InfoIcon from '@mui/icons-material/Info';
 import AutorenewIcon from '@mui/icons-material/Autorenew';
 import DoneIcon from '@mui/icons-material/Done';
-import { GridEditModes, useGridApiContext, useGridRootProps } from '@mui/x-data-grid';
-import { STATUS_OPTIONS } from '@mui/x-data-grid-generator';
+import {
+  GridEditModes,
+  useGridApiContext,
+  useGridRootProps,
+} from '@mui/x-data-grid';
+// eslint-disable-next-line no-restricted-imports
+import { STATUS_OPTIONS } from '@mui/x-data-grid-generator/services/static-data';
 
 const StyledChip = styled(Chip)(({ theme }) => ({
   justifyContent: 'left',
@@ -50,7 +62,13 @@ const Status = React.memo((props) => {
   }
 
   return (
-    <StyledChip className={status} icon={icon} size="small" label={label} variant="outlined" />
+    <StyledChip
+      className={status}
+      icon={icon}
+      size="small"
+      label={label}
+      variant="outlined"
+    />
   );
 });
 

docs/pages/experiments/docs/DemoMultiTabs.js

@@ -9,19 +9,31 @@ import {
   randomName,
   randomRating,
   randomStatusOptions,
+} from '@mui/x-data-grid-generator';
+// eslint-disable-next-line no-restricted-imports
+import {
   COUNTRY_ISO_OPTIONS_SORTED,
   INCOTERM_OPTIONS,
   STATUS_OPTIONS,
-} from '@mui/x-data-grid-generator';
+} from '@mui/x-data-grid-generator/services/static-data';
 import { DataGrid, gridStringOrNumberComparator } from '@mui/x-data-grid';
-import { renderAvatar } from './renderers/avatar';
-import { renderEmail } from './renderers/email';
-import { renderEditRating, renderRating } from './renderers/rating';
-import { renderCountry, renderEditCountry } from './renderers/country';
-import { renderSparkline } from './renderers/sparkline';
-import { renderEditProgress, renderProgress } from './renderers/progress';
-import { renderEditStatus, renderStatus } from './renderers/status';
-import { renderEditIncoterm, renderIncoterm } from './renderers/incoterm';
+import { renderAvatar } from '../../../data/experiments/renderers/renderAvatar';
+import { renderEmail } from '../../../data/experiments/renderers/renderEmail';
+import { renderEditRating, renderRating } from '../../../data/experiments/renderers/renderRating';
+import {
+  renderCountry,
+  renderEditCountry,
+} from '../../../data/experiments/renderers/renderCountry';
+import { renderSparkline } from '../../../data/experiments/renderers/renderSparkline';
+import {
+  renderEditProgress,
+  renderProgress,
+} from '../../../data/experiments/renderers/renderProgress';
+import { renderEditStatus, renderStatus } from '../../../data/experiments/renderers/renderStatus';
+import {
+  renderEditIncoterm,
+  renderIncoterm,
+} from '../../../data/experiments/renderers/renderIncoterm';
 
 const columns = [
   {