fixup! - remove FC types from ui-warped-map

Author: Yohh

ui-core/src/components/inputs/datePicker/Calendar.tsx

@@ -34,9 +34,11 @@ const Day = ({ date, isReferenceDate, isSelectable, dayWrapperClassName, onClick
   </div>
 );
 
-const Calendar = (props: CalendarProps) => {
-  const { displayedMonthStartDate, onDayClick } = props;
-  const { days, isReferenceDate, isDateSelectable, buildDayWrapperClassName } = useCalendar(props);
+const Calendar = ({ displayedMonthStartDate, onDayClick }: CalendarProps) => {
+  const { days, isReferenceDate, isDateSelectable, buildDayWrapperClassName } = useCalendar({
+    displayedMonthStartDate,
+    onDayClick,
+  });
   return (
     <div className="calendar-wrapper">
       <div className="calendar-anatomy">

ui-spacetimechart/src/stories/additional-data.stories.tsx

@@ -36,10 +36,15 @@ const CLOSED_DOORS = [
   },
 ];
 
+type MonoTrackSpaceProps = {
+  from: number;
+  to: number;
+};
+
 /**
  * This component renders a colored area where the line only has one track:
  */
-const MonoTrackSpace = ({ from, to }: { from: number; to: number }) => {
+const MonoTrackSpace = ({ from, to }: MonoTrackSpaceProps) => {
   const drawMonoTrackSpace = useCallback<DrawingFunction>(
     (ctx, { getSpacePixel, width, height, spaceAxis }) => {
       const spaceSize = spaceAxis === 'x' ? width : height;
@@ -159,16 +164,15 @@ const ClosedDoor = ({
   return null;
 };
 
+type WrapperProps = {
+  swapAxis: boolean;
+  spaceScaleType: 'linear' | 'proportional';
+};
+
 /**
  * This story aims at showcasing how to display additional data.
  */
-const Wrapper = ({
-  swapAxis,
-  spaceScaleType,
-}: {
-  swapAxis: boolean;
-  spaceScaleType: 'linear' | 'proportional';
-}) => {
+const Wrapper = ({ swapAxis, spaceScaleType }: WrapperProps) => {
   const [state, setState] = useState<{
     xOffset: number;
     yOffset: number;

ui-spacetimechart/src/stories/base-rendering.stories.tsx

@@ -8,22 +8,18 @@ import { SpaceTimeChart, PathLayer } from '../';
 
 import './lib/tailwind-mockup.css';
 
-/**
- * This story aims at showcasing how to render a SpaceTimeChart.
- */
-const Wrapper = ({
-  xZoomLevel,
-  yZoomLevel,
-  xOffset,
-  yOffset,
-  spaceScaleType,
-}: {
+type WrapperProps = {
   xZoomLevel: number;
   yZoomLevel: number;
   xOffset: number;
   yOffset: number;
   spaceScaleType: 'linear' | 'proportional';
-}) => (
+};
+
+/**
+ * This story aims at showcasing how to render a SpaceTimeChart.
+ */
+const Wrapper = ({ xZoomLevel, yZoomLevel, xOffset, yOffset, spaceScaleType }: WrapperProps) => (
   <SpaceTimeChart
     className="inset-0 absolute"
     operationalPoints={OPERATIONAL_POINTS}

ui-spacetimechart/src/stories/custom-styles.stories.tsx

@@ -22,20 +22,17 @@ const DEFAULT_COLOR_1 = '#FF511A';
 const DEFAULT_COLOR_2 = '#FF8B61';
 const DEFAULT_COLOR_3 = '#FFEBE1';
 
-/**
- * This story aims at showcasing how to customize inside styles.
- */
-const Wrapper = ({
-  color1,
-  color2,
-  color3,
-  spaceScaleType,
-}: {
+type WrapperProps = {
   color1: string;
   color2: string;
   color3: string;
   spaceScaleType: 'linear' | 'proportional';
-}) => {
+};
+
+/**
+ * This story aims at showcasing how to customize inside styles.
+ */
+const Wrapper = ({ color1, color2, color3, spaceScaleType }: WrapperProps) => {
   const [state, setState] = useState<{
     xOffset: number;
     yOffset: number;

ui-spacetimechart/src/stories/measuring.stories.tsx

@@ -10,16 +10,15 @@ import { SpaceTimeChart, PathLayer } from '../';
 import { type DataPoint, type Point } from '../lib/types';
 import { getDiff } from '../utils/vectors';
 
+type WrapperProps = {
+  spaceScaleType: 'linear' | 'proportional';
+  enableSnapping: boolean;
+};
+
 /**
  * This story aims at showcasing how to measure times and distances in a SpaceTimeChart.
  */
-const Wrapper = ({
-  spaceScaleType,
-  enableSnapping,
-}: {
-  spaceScaleType: 'linear' | 'proportional';
-  enableSnapping: boolean;
-}) => {
+const Wrapper = ({ spaceScaleType, enableSnapping }: WrapperProps) => {
   const [state, setState] = useState<{
     xOffset: number;
     yOffset: number;

ui-spacetimechart/src/stories/options.stories.tsx

@@ -43,6 +43,14 @@ const ScreenshotButton = () => {
   );
 };
 
+type WrapperProps = {
+  enableSnapping: boolean;
+  hideGrid: boolean;
+  hidePathsLabels: boolean;
+  swapAxis: boolean;
+  spaceScaleType: 'linear' | 'proportional';
+};
+
 /**
  * This story aims at showcasing how to use various specific options in a
  * SpaceTimeChart, such as `swapAxis`, `enableSnapping`, `hideGrid` or
@@ -54,13 +62,7 @@ const Wrapper = ({
   hidePathsLabels,
   swapAxis,
   spaceScaleType,
-}: {
-  enableSnapping: boolean;
-  hideGrid: boolean;
-  hidePathsLabels: boolean;
-  swapAxis: boolean;
-  spaceScaleType: 'linear' | 'proportional';
-}) => {
+}: WrapperProps) => {
   const [state, setState] = useState<{
     xOffset: number;
     yOffset: number;

ui-spacetimechart/src/stories/paths-interactions.stories.tsx

@@ -19,6 +19,12 @@ function delayPath<T extends PathData>(path: T, newTimeOrigin: number): T {
     points: path.points.map((point) => ({ ...point, time: point.time + delay })),
   };
 }
+type WrapperProps = {
+  enableDragPaths: boolean;
+  pickingTolerance: number;
+  enableMultiSelection: boolean;
+  spaceScaleType: 'linear' | 'proportional';
+};
 
 /**
  * This story aims at showcasing how to manipulate paths in a SpaceTimeChart.
@@ -28,12 +34,7 @@ const Wrapper = ({
   pickingTolerance,
   enableMultiSelection,
   spaceScaleType,
-}: {
-  enableDragPaths: boolean;
-  enableMultiSelection: boolean;
-  spaceScaleType: 'linear' | 'proportional';
-  pickingTolerance: number;
-}) => {
+}: WrapperProps) => {
   const [paths, setPaths] = useState(PATHS);
   const pathsDict = useMemo(() => keyBy(paths, 'id'), [paths]);
   const [state, setState] = useState<{

ui-spacetimechart/src/stories/performances.stories.tsx

@@ -27,6 +27,13 @@ const COLORS = [
   '#FF9BC6',
 ];
 
+type WrapperProps = {
+  operationalPointsCount: number;
+  trainTypes: number;
+  pathsPerTrain: number;
+  spaceScaleType: 'linear' | 'proportional';
+};
+
 /**
  * This story aims at testing the performances of the SpaceTimeChart component when rendering a
  * high number of paths.
@@ -36,12 +43,7 @@ const Wrapper = ({
   trainTypes,
   pathsPerTrain,
   spaceScaleType,
-}: {
-  operationalPointsCount: number;
-  trainTypes: number;
-  pathsPerTrain: number;
-  spaceScaleType: 'linear' | 'proportional';
-}) => {
+}: WrapperProps) => {
   const operationalPoints: OperationalPoint[] = useMemo(() => {
     let position = 0;
     return range(operationalPointsCount).map((i) => ({

ui-spacetimechart/src/stories/scroll-navigation.stories.tsx

@@ -16,11 +16,15 @@ import './lib/tailwind-mockup.css';
 
 const PATHS_DICT = keyBy(PATHS, 'id');
 
+type WrapperProps = {
+  spaceScaleType: 'linear' | 'proportional';
+};
+
 /**
  * This story aims at showcasing how to implement a different kind of navigation, where the mouse
  * wheel moves the time axis, and where a selected path must remain focused as much as possible.
  */
-const Wrapper = ({ spaceScaleType }: { spaceScaleType: 'linear' | 'proportional' }) => {
+const Wrapper = ({ spaceScaleType }: WrapperProps) => {
   const [state, setState] = useState<{
     xOffset: number;
     yOffset: number;

ui-spacetimechart/src/stories/stage-interactions.stories.tsx

@@ -18,22 +18,18 @@ import { getDiff } from '../utils/vectors';
 
 import './lib/tailwind-mockup.css';
 
-/**
- * This story aims at showcasing how to handle panning and zooming in a SpaceTimeChart.
- */
-const Wrapper = ({
-  xPan,
-  yPan,
-  xZoom,
-  yZoom,
-  spaceScaleType,
-}: {
+type WrapperProps = {
   xPan: boolean;
   yPan: boolean;
   xZoom: boolean;
   yZoom: boolean;
   spaceScaleType: 'linear' | 'proportional';
-}) => {
+};
+
+/**
+ * This story aims at showcasing how to handle panning and zooming in a SpaceTimeChart.
+ */
+const Wrapper = ({ xPan, yPan, xZoom, yZoom, spaceScaleType }: WrapperProps) => {
   const [state, setState] = useState<{
     xOffset: number;
     yOffset: number;

ui-warped-map/src/components/BaseMap.tsx

@@ -9,19 +9,16 @@ import ReactMapGL, { Layer, type LayerProps, type MapRef, Source } from 'react-m
 
 import { type SourceDefinition } from '../core/types';
 
-/**
- * This component is for testing purpose only. It displays data as they appear in the DataLoader component.
- */
-const BaseMap = ({
-  path,
-  mapStyle,
-  sources,
-  children,
-}: PropsWithChildren<{
+type BaseMapProps = {
   path: Feature<LineString>;
   sources: SourceDefinition[];
   mapStyle?: string | StyleSpecification;
-}>) => {
+};
+
+/**
+ * This component is for testing purpose only. It displays data as they appear in the DataLoader component.
+ */
+const BaseMap = ({ path, mapStyle, sources, children }: PropsWithChildren<BaseMapProps>) => {
   const [mapRef, setMapRef] = useState<MapRef | null>(null);
   const interactiveLayerIds = useMemo(
     () => sources.flatMap(({ layers }) => layers.map(({ id }) => id)),

ui-warped-map/src/components/DataLoader.tsx

@@ -12,28 +12,23 @@ import { type SourceDefinition } from '../core/types';
 
 const TIME_LABEL = 'Loading data around warped path';
 
+type DataLoaderProps = {
+  bbox: BBox2d;
+  mapStyle?: string | StyleSpecification;
+  onDataLoaded: (sourcesData: Record<string, FeatureCollection>) => void;
+  sources: SourceDefinition[];
+  timeout?: number;
+  log?: boolean;
+};
+
 /**
  * This component handles loading entities from MapLibre vector servers, and retrieving them as GeoJSONs from the
  * MapLibre `querySourceFeatures` method. It's quite dirty (it has to mount a map in the DOM, but somewhere it won't be
  * visible), but necessary until we get proper APIs for any sources.
  *
  * It is designed as a component instead of a hook to simplify mounting/unmounting the temporary invisible map.
  */
-const DataLoader = ({
-  bbox,
-  mapStyle,
-  onDataLoaded,
-  sources,
-  timeout,
-  log,
-}: {
-  bbox: BBox2d;
-  mapStyle?: string | StyleSpecification;
-  onDataLoaded: (sourcesData: Record<string, FeatureCollection>) => void;
-  sources: SourceDefinition[];
-  timeout?: number;
-  log?: boolean;
-}) => {
+const DataLoader = ({ bbox, mapStyle, onDataLoaded, sources, timeout, log }: DataLoaderProps) => {
   const [mapRef, setMapRef] = useState<MapRef | null>(null);
   const [state, setState] = useState<'idle' | 'render' | 'loaded'>('idle');
 

ui-warped-map/src/components/TransformedDataMap.tsx

@@ -15,6 +15,17 @@ import ReactMapGL, {
 
 import { type SourceDefinition } from '../core/types';
 
+type TransformedDataMapProps = {
+  bbox: BBox2d;
+  mapStyle?: string | StyleSpecification;
+  backgroundColor?: string;
+  sources: SourceDefinition[];
+  transformedData: Record<string, FeatureCollection>;
+  path?: Feature<LineString>;
+  pathLayer?: Omit<LineLayer, 'source-layer'>;
+  log?: boolean;
+};
+
 /**
  * This component handles displaying warped data. The data must be warped before being given to this component.
  * Check `SimulationWarpedMap` to see an example use case.
@@ -29,16 +40,7 @@ const TransformedDataMap = ({
   pathLayer,
   log,
   children,
-}: PropsWithChildren<{
-  bbox: BBox2d;
-  mapStyle?: string | StyleSpecification;
-  backgroundColor?: string;
-  sources: SourceDefinition[];
-  transformedData: Record<string, FeatureCollection>;
-  path?: Feature<LineString>;
-  pathLayer?: Omit<LineLayer, 'source-layer'>;
-  log?: boolean;
-}>) => {
+}: PropsWithChildren<TransformedDataMapProps>) => {
   const [mapRef, setMapRef] = useState<MapRef | null>(null);
   const pathCollection = useMemo(() => featureCollection(path ? [path] : []), [path]);
   const interactiveLayerIds = useMemo(