[charts] Allow controlling the demo form from the example

[JCQuintas]

• Make ChartDemoPropsForm only work in controlled mode. Controller is now ChartsUsageDemo
• This allows us to pass the onChange handler to the render function, which allows children(examples) to change the knobs from their own logic
  • Useful on zoom to prevent throwing errors, we can check if prop.start > prop.end and update the knobs accordingly.
• Cleaned up typing a and logic (removed undefined knob logic)
• Added slider component

For testing the slider locally.

import * as React from 'react';
import Box from '@mui/material/Box';
import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
import { ScatterChart } from '@mui/x-charts/ScatterChart';
import { Chance } from 'chance';

const chance = new Chance(42);

const data = Array.from({ length: 200 }, () => ({
  x: chance.floating({ min: -25, max: 25 }),
  y: chance.floating({ min: -25, max: 25 }),
})).map((d, index) => ({ ...d, id: index }));

const knobs = [{ propName: 'tickSize', knob: 'slider', defaultValue: 6 }];
export default function AxisCustomizationNoSnap() {
  return (
    <ChartsUsageDemo
      componentName="Alert"
      data={knobs}
      renderDemo={(props, onChange) => (
        <Box sx={{ width: '100%', maxWidth: 400 }}>
          <button onClick={() => onChange({ ...props, tickSize: 50 })}>
            Change
          </button>
          <ScatterChart
            series={[
              {
                type: 'scatter',
                id: 'linear',
                data,
              },
            ]}
            leftAxis={null}
            bottomAxis={{
              ...props,
            }}
            height={300}
            margin={{ top: 10, left: 20, right: 20 }}
          />
        </Box>
      )}
      getCode={({ props }) =>
        [
          ...Object.keys(props).map(
            (prop) =>
              `    ${prop}: ${
                typeof props[prop] === 'string' ? `"${props[prop]}"` : props[prop]
              },`,
          ),
        ].join('\n')
      }
    />
  );
}

[mui-bot]

Deploy preview: https://deploy-preview-13796--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against e8f9171

[alexfauquette]

Looks good. Just one potential improvement suggestion