Feat: light config for show adapt transformation

src/components/HexColorPicker.tsx

@@ -0,0 +1,23 @@
+import { styled } from '@mui/material/styles';
+import {
+  HexColorInput as _HexColorInput,
+  HexColorPicker as _HexColorPicker,
+} from 'react-colorful';
+
+export const HexColorInput = styled(_HexColorInput)(({ theme }) => ({
+  background: theme.palette.action.hover,
+  border: 'none',
+  borderRadius: theme.shape.borderRadius,
+  color: theme.palette.text.primary,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  textTransform: 'uppercase',
+
+  '&:focus': {
+    outline: 'none',
+  },
+}));
+
+export const HexColorPicker = styled(_HexColorPicker)(({ theme }) => ({
+  padding: theme.spacing(1, 0),
+}));

src/features/show-configurator/AdaptParametersForm.tsx

@@ -17,6 +17,11 @@ import type {
   OptionalShowAdaptParameters,
   ShowAdaptParameters,
 } from './actions';
+import LightConfigurationForm, {
+  type LightConfigurationProps,
+} from './LightConfigurationForm';
+import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
+import { ExpandMore } from '@mui/icons-material';
 
 const defaultAdaptParameters: ShowAdaptParameters = {
   minDistance: 2,
@@ -26,10 +31,15 @@ const defaultAdaptParameters: ShowAdaptParameters = {
   takeoffDuration: 0,
 };
 
-const useStyles = makeStyles((theme: Theme) => ({
-  formGroup: {
+const useStyles = makeStyles((theme) => ({
+  accordionDetails: {
+    display: 'flex',
+    flexDirection: 'column',
     gap: theme.spacing(2),
-    marginTop: theme.spacing(-2),
+    '& .react-colorful': {
+      height: '120px',
+      width: '100%',
+    },
   },
 }));
 
@@ -169,12 +179,13 @@ export function useAdaptParametersFormState(
 type Props = Readonly<
   ReturnType<typeof useAdaptParametersFormState> & {
     disabled: boolean;
-  }
+  } & { lights: LightConfigurationProps }
 >;
 
 const AdaptParametersForm = (props: Props): React.JSX.Element => {
   const {
     disabled,
+    lights,
     parameters,
     onMinDistanceChanged,
     onAltitudeChanged,
@@ -186,55 +197,86 @@ const AdaptParametersForm = (props: Props): React.JSX.Element => {
     keyPrefix: 'showConfiguratorDialog.adaptParameters',
   });
   const styles = useStyles();
+  const [shownSection, setShownSection] = useState<
+    'none' | 'parameters' | 'lights'
+  >('parameters');
   return (
     <Box>
-      <FormGroup className={styles.formGroup}>
-        <FormHeader>{t('section.parameters')}</FormHeader>
-        <SimpleDistanceField
-          label={t('form.minDistance.label')}
-          min={0.1}
-          max={100}
-          value={parameters.minDistance}
-          disabled={disabled}
-          helperText={t('form.minDistance.help')}
-          onChange={onMinDistanceChanged}
-        />
-        <SimpleDistanceField
-          label={t('form.altitude.label')}
-          min={1}
-          max={100}
-          value={parameters.altitude}
-          disabled={disabled}
-          helperText={t('form.altitude.help')}
-          onChange={onAltitudeChanged}
-        />
-        <SimpleVelocityField
-          label={t('form.horizontalVelocity.label')}
-          min={0.1}
-          max={100}
-          value={parameters.horizontalVelocity}
-          disabled={disabled}
-          helperText={t('form.horizontalVelocity.help')}
-          onChange={onHorizontalVelocityChanged}
-        />
-        <SimpleVelocityField
-          label={t('form.verticalVelocity.label')}
-          min={0.1}
-          max={100}
-          value={parameters.verticalVelocity}
-          disabled={disabled}
-          helperText={t('form.verticalVelocity.help')}
-          onChange={onVerticalVelocityChanged}
-        />
-        <SimpleDurationField
-          label={t('form.takeoffDuration.label')}
-          min={0}
-          max={300}
-          value={parameters.takeoffDuration}
-          disabled={disabled}
-          helperText={t('form.takeoffDuration.help')}
-          onChange={onTakeoffDurationChanged}
-        />
+      <FormGroup>
+        <Accordion
+          expanded={shownSection === 'parameters'}
+          style={{ margin: 0 }}
+          onChange={() => {
+            setShownSection(
+              shownSection === 'parameters' ? 'none' : 'parameters'
+            );
+          }}
+        >
+          <AccordionSummary expandIcon={<ExpandMore />}>
+            {t('panel.trajectories')}
+          </AccordionSummary>
+          <AccordionDetails className={styles.accordionDetails}>
+            <SimpleDistanceField
+              label={t('form.minDistance.label')}
+              min={0.1}
+              max={100}
+              value={parameters.minDistance}
+              disabled={disabled}
+              helperText={t('form.minDistance.help')}
+              onChange={onMinDistanceChanged}
+            />
+            <SimpleDistanceField
+              label={t('form.altitude.label')}
+              min={1}
+              max={100}
+              value={parameters.altitude}
+              disabled={disabled}
+              helperText={t('form.altitude.help')}
+              onChange={onAltitudeChanged}
+            />
+            <SimpleVelocityField
+              label={t('form.horizontalVelocity.label')}
+              min={0.1}
+              max={100}
+              value={parameters.horizontalVelocity}
+              disabled={disabled}
+              helperText={t('form.horizontalVelocity.help')}
+              onChange={onHorizontalVelocityChanged}
+            />
+            <SimpleVelocityField
+              label={t('form.verticalVelocity.label')}
+              min={0.1}
+              max={100}
+              value={parameters.verticalVelocity}
+              disabled={disabled}
+              helperText={t('form.verticalVelocity.help')}
+              onChange={onVerticalVelocityChanged}
+            />
+            <SimpleDurationField
+              label={t('form.takeoffDuration.label')}
+              min={0}
+              max={300}
+              value={parameters.takeoffDuration}
+              disabled={disabled}
+              helperText={t('form.takeoffDuration.help')}
+              onChange={onTakeoffDurationChanged}
+            />
+          </AccordionDetails>
+        </Accordion>
+        <Accordion
+          expanded={shownSection === 'lights'}
+          style={{ margin: 0 }}
+          onChange={() => {
+            setShownSection(shownSection === 'lights' ? 'none' : 'lights');
+          }}
+        >
+          <AccordionSummary expandIcon={<ExpandMore />}>
+            {t('panel.lights')}
+          </AccordionSummary>
+          <AccordionDetails className={styles.accordionDetails}>
+            <LightConfigurationForm disabled={disabled} {...lights} />
+          </AccordionDetails>
+        </Accordion>
       </FormGroup>
     </Box>
   );