@schandlergarcia/sf-web-components 1.7.0 → 1.8.0

package/src/components/library/charts/{GeoMap.jsx → GeoMap.tsx}

@@ -1,9 +1,12 @@
 import React, { useMemo, useRef, useEffect, useState, useCallback } from "react";
 import * as d3 from "d3";
 import { feature } from "topojson-client";
+import type { Topology, GeometryCollection } from "topojson-specification";
 import world from "world-atlas/land-110m.json";
 
-const land = feature(world, world.objects.land);
+const land = feature(world as unknown as Topology<{ land: GeometryCollection }>, (world.objects.land as unknown) as GeometryCollection);
+
+type ProjectionType = "naturalEarth" | "mercator" | "equirectangular";
 
 const PROJECTIONS = {
   naturalEarth: d3.geoNaturalEarth1,
@@ -11,7 +14,30 @@ const PROJECTIONS = {
   equirectangular: d3.geoEquirectangular,
 };
 
-const THEMES = {
+interface Theme {
+  bg: string;
+  bgGradient: [string, string];
+  land: string;
+  landStroke: string;
+  sphere: string;
+  graticule: string;
+  graticuleOpacity: number;
+  markerActive: string;
+  markerInactive: string;
+  label: string;
+  labelInactive: string;
+  arc: string;
+  arcHighlight: string;
+  arcDanger: string;
+  dot: string;
+  dotDanger: string;
+  overlayFill: string;
+  overlayStroke: string;
+}
+
+type ThemeName = "dark" | "light";
+
+const THEMES: Record<ThemeName, Theme> = {
   dark: {
     bg: "#050b15",
     bgGradient: ["#0a1628", "#050b15"],
@@ -54,11 +80,72 @@ const THEMES = {
   },
 };
 
-function buildProjection(type, width, height) {
+function buildProjection(type: ProjectionType, width: number, height: number): d3.GeoProjection {
   const factory = PROJECTIONS[type] ?? PROJECTIONS.naturalEarth;
   return factory().fitSize([width, height], { type: "Sphere" });
 }
 
+export interface Marker {
+  id: string;
+  lon: number;
+  lat: number;
+  label?: string | false;
+  active?: boolean;
+}
+
+export interface Arc {
+  id: string;
+  from: [number, number];
+  to: [number, number];
+  danger?: boolean;
+  color?: string;
+  dotColor?: string;
+  progress?: number;
+  _path?: string | null;
+}
+
+export interface Overlay {
+  id: string;
+  center: [number, number];
+  radius?: number;
+  fill?: string;
+  stroke?: string;
+}
+
+export interface InitialBounds {
+  sw: [number, number];
+  ne: [number, number];
+  padding?: number;
+}
+
+interface ChildrenFunctionProps {
+  proj: d3.GeoProjection;
+  pathGen: d3.GeoPath;
+  theme: Theme;
+  width: number;
+  height: number;
+  transform: d3.ZoomTransform;
+}
+
+export interface GeoMapProps {
+  width?: number;
+  height?: number;
+  projection?: ProjectionType;
+  theme?: ThemeName;
+  markers?: Marker[];
+  arcs?: Arc[];
+  overlays?: Overlay[];
+  selectedId?: string | null;
+  onArcClick?: (arc: Arc) => void;
+  onMarkerClick?: (marker: Marker) => void;
+  zoomable?: boolean;
+  minZoom?: number;
+  maxZoom?: number;
+  initialBounds?: InitialBounds | null;
+  className?: string;
+  children?: React.ReactNode | ((props: ChildrenFunctionProps) => React.ReactNode);
+}
+
 export default function GeoMap({
   width = 960,
   height = 480,
@@ -76,11 +163,11 @@ export default function GeoMap({
   initialBounds = null,
   className = "",
   children,
-}) {
+}: GeoMapProps): React.ReactElement {
   const t = THEMES[theme] ?? THEMES.dark;
-  const svgRef = useRef(null);
-  const [transform, setTransform] = useState(d3.zoomIdentity);
-  const zoomRef = useRef(null);
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [transform, setTransform] = useState<d3.ZoomTransform>(d3.zoomIdentity);
+  const zoomRef = useRef<d3.ZoomBehavior<SVGSVGElement, unknown> | null>(null);
 
   const { proj, pathGen, graticulePath, spherePath, landPath } = useMemo(() => {
     const proj = buildProjection(projType, width, height);
@@ -98,12 +185,14 @@ export default function GeoMap({
   useEffect(() => {
     if (!zoomable || !svgRef.current) return;
     const svg = d3.select(svgRef.current);
-    const zoom = d3.zoom()
+    const zoom = d3.zoom<SVGSVGElement, unknown>()
       .scaleExtent([minZoom, maxZoom])
-      .on("zoom", (e) => setTransform(e.transform));
+      .on("zoom", (e: d3.D3ZoomEvent<SVGSVGElement, unknown>) => setTransform(e.transform));
     zoomRef.current = zoom;
     svg.call(zoom);
-    return () => svg.on(".zoom", null);
+    return () => {
+      svg.on(".zoom", null);
+    };
   }, [zoomable, minZoom, maxZoom]);
 
   // Apply initial zoom to fit bounds (markers/region) on mount
@@ -144,15 +233,15 @@ export default function GeoMap({
   const isZoomed = transform.k !== 1 || transform.x !== 0 || transform.y !== 0;
 
   const arcPaths = useMemo(() => {
-    const cache = {};
+    const cache: Record<string, string | null> = {};
     arcs.forEach(a => {
       const key = `${a.from[0]},${a.from[1]}-${a.to[0]},${a.to[1]}`;
       if (cache[key]) { a._path = cache[key]; return; }
       const interp = d3.geoInterpolate(a.from, a.to);
-      const pts = [];
+      const pts: [number, number][] = [];
       for (let i = 0; i <= 1; i += 0.02) {
         const p = proj(interp(i));
-        if (p) pts.push(p);
+        if (p) pts.push(p as [number, number]);
       }
       const path = pts.length > 1 ? d3.line()(pts) : null;
       cache[key] = path;
@@ -162,7 +251,7 @@ export default function GeoMap({
   }, [arcs, proj]);
 
   const activeMarkerIds = useMemo(() => {
-    const s = new Set();
+    const s = new Set<string>();
     markers.forEach(m => { if (m.active) s.add(m.id); });
     return s;
   }, [markers]);
@@ -194,9 +283,9 @@ export default function GeoMap({
 
         {/* Zoomable content group */}
         <g transform={txStr}>
-          <path d={spherePath} fill="none" stroke={t.sphere} strokeWidth={0.8 * invScale} />
-          <path d={landPath} fill={t.land} stroke={t.landStroke} strokeWidth={0.4 * invScale} />
-          <path d={graticulePath} fill="none" stroke={t.graticule} strokeWidth={0.3 * invScale} opacity={t.graticuleOpacity} />
+          <path d={spherePath ?? undefined} fill="none" stroke={t.sphere} strokeWidth={0.8 * invScale} />
+          <path d={landPath ?? undefined} fill={t.land} stroke={t.landStroke} strokeWidth={0.4 * invScale} />
+          <path d={graticulePath ?? undefined} fill="none" stroke={t.graticule} strokeWidth={0.3 * invScale} opacity={t.graticuleOpacity} />
 
           {/* Overlay zones (disruptions, weather) */}
           {overlays.map(o => {

package/src/components/library/filters/{FilterBar.jsx → FilterBar.tsx}

@@ -1,19 +1,29 @@
-import React from "react";
 import SearchFilter from "./SearchFilter";
-import SelectFilter from "./SelectFilter";
+import SelectFilter, { SelectOption } from "./SelectFilter";
 import ToggleFilter from "./ToggleFilter";
-import { FunnelIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+
+export interface FilterDefinition {
+  id: string;
+  type: "search" | "select" | "toggle";
+  label?: string;
+  placeholder?: string;
+  options?: (string | SelectOption)[];
+  className?: string;
+}
+
+export interface FilterBarProps {
+  filters?: FilterDefinition[];
+  values?: Record<string, any>;
+  onChange?: (filterId: string, value: any) => void;
+  onReset?: () => void;
+  activeCount?: number;
+  layout?: "inline" | "stacked";
+}
 
 /**
  * Renders a row of filter controls from a definitions array.
  * Pairs with usePageFilters hook for state management.
- *
- * @param {Array}    filters — filter definitions [{ id, type, ... }]
- * @param {Object}   values  — current filter values keyed by filter id
- * @param {Function} onChange — (filterId, value) => void
- * @param {Function} onReset  — () => void
- * @param {number}   activeCount — number of active filters (for badge)
- * @param {string}   layout — "inline" (default) or "stacked"
  */
 export default function FilterBar({
   filters = [],
@@ -22,7 +32,7 @@ export default function FilterBar({
   onReset,
   activeCount = 0,
   layout = "inline",
-}) {
+}: FilterBarProps) {
   if (!filters.length) return null;
 
   const isStacked = layout === "stacked";

package/src/components/library/filters/{SearchFilter.jsx → SearchFilter.tsx}

@@ -1,12 +1,18 @@
-import React from "react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
+export interface SearchFilterProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
 export default function SearchFilter({
   value = "",
   onChange,
   placeholder = "Search…",
   className = "",
-}) {
+}: SearchFilterProps) {
   return (
     <div className={["relative", className].filter(Boolean).join(" ")}>
       <MagnifyingGlassIcon

package/src/components/library/filters/{SelectFilter.jsx → SelectFilter.tsx}

@@ -1,14 +1,21 @@
-import React from "react";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectFilterProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  options?: (string | SelectOption)[];
+  label?: string;
+  placeholder?: string;
+  className?: string;
+}
+
 /**
  * Dropdown select filter.
- *
- * @param {string} value — current selected value
- * @param {Function} onChange — (value) => void
- * @param {Array} options — [{ value, label }] or ["string", ...]
- * @param {string} label — visible label
- * @param {string} placeholder — placeholder when no value selected
  */
 export default function SelectFilter({
   value = "all",
@@ -17,7 +24,7 @@ export default function SelectFilter({
   label,
   placeholder,
   className = "",
-}) {
+}: SelectFilterProps) {
   const normalizedOptions = options.map((opt) =>
     typeof opt === "string" ? { value: opt, label: opt } : opt
   );

package/src/components/library/filters/{ToggleFilter.jsx → ToggleFilter.tsx}

@@ -1,18 +1,19 @@
-import React from "react";
+export interface ToggleFilterProps {
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  label?: string;
+  className?: string;
+}
 
 /**
  * Toggle switch filter.
- *
- * @param {boolean} value — current on/off state
- * @param {Function} onChange — (boolean) => void
- * @param {string} label — visible label
  */
 export default function ToggleFilter({
   value = false,
   onChange,
   label,
   className = "",
-}) {
+}: ToggleFilterProps) {
   return (
     <label
       className={[

package/src/components/library/forms/{FormField.jsx → FormField.tsx}

@@ -1,5 +1,6 @@
-import React from "react";
+import * as React from "react";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import type { FormField as FormFieldType } from "./FormRenderer";
 
 const INPUT_BASE =
   "h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500 dark:focus:ring-offset-slate-950";
@@ -7,11 +8,17 @@ const INPUT_BASE =
 const INPUT_ERROR =
   "border-red-300 focus:ring-red-500 dark:border-red-700 dark:focus:ring-red-500";
 
-function cx(...classes) {
+function cx(...classes: (string | boolean | undefined)[]): string {
   return classes.filter(Boolean).join(" ");
 }
 
-function FieldLabel({ label, required, htmlFor }) {
+interface FieldLabelProps {
+  label?: string;
+  required?: boolean;
+  htmlFor: string;
+}
+
+function FieldLabel({ label, required, htmlFor }: FieldLabelProps) {
   if (!label) return null;
   return (
     <label htmlFor={htmlFor} className="block text-sm font-medium text-slate-700 dark:text-slate-200">
@@ -21,20 +28,36 @@ function FieldLabel({ label, required, htmlFor }) {
   );
 }
 
-function FieldError({ error }) {
+interface FieldErrorProps {
+  error?: string;
+}
+
+function FieldError({ error }: FieldErrorProps) {
   if (!error) return null;
   return <p className="text-xs text-red-600 dark:text-red-400">{error}</p>;
 }
 
-function FieldDescription({ description }) {
+interface FieldDescriptionProps {
+  description?: string;
+}
+
+function FieldDescription({ description }: FieldDescriptionProps) {
   if (!description) return null;
   return <p className="text-xs text-slate-500 dark:text-slate-400">{description}</p>;
 }
 
 // ─── Individual field renderers ───
 
-function TextField({ field, value, onChange, onBlur, error }) {
-  const inputType = field.inputType ?? field.type;
+interface FieldRendererProps {
+  field: FormFieldType & Record<string, unknown>;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  onBlur: () => void;
+  error?: boolean;
+}
+
+function TextField({ field, value, onChange, onBlur, error }: FieldRendererProps) {
+  const inputType = (field.inputType as string | undefined) ?? field.type;
   const type = { text: "text", email: "email", url: "url", number: "number", date: "date" }[inputType] ?? "text";
 
   return (
@@ -42,32 +65,32 @@ function TextField({ field, value, onChange, onBlur, error }) {
       id={field.id}
       name={field.id}
       type={type}
-      value={value ?? ""}
+      value={(value as string | number) ?? ""}
       onChange={(e) => onChange(field.type === "number" ? e.target.value : e.target.value)}
       onBlur={onBlur}
-      placeholder={field.placeholder}
-      disabled={field.disabled}
-      readOnly={field.readOnly}
-      min={field.min}
-      max={field.max}
-      step={field.step}
+      placeholder={field.placeholder as string | undefined}
+      disabled={field.disabled as boolean | undefined}
+      readOnly={field.readOnly as boolean | undefined}
+      min={field.min as number | undefined}
+      max={field.max as number | undefined}
+      step={field.step as number | undefined}
       className={cx(INPUT_BASE, error && INPUT_ERROR)}
     />
   );
 }
 
-function TextareaField({ field, value, onChange, onBlur, error }) {
+function TextareaField({ field, value, onChange, onBlur, error }: FieldRendererProps) {
   return (
     <textarea
       id={field.id}
       name={field.id}
-      value={value ?? ""}
+      value={(value as string) ?? ""}
       onChange={(e) => onChange(e.target.value)}
       onBlur={onBlur}
-      placeholder={field.placeholder}
-      disabled={field.disabled}
-      readOnly={field.readOnly}
-      rows={field.rows ?? 3}
+      placeholder={field.placeholder as string | undefined}
+      disabled={field.disabled as boolean | undefined}
+      readOnly={field.readOnly as boolean | undefined}
+      rows={(field.rows as number | undefined) ?? 3}
       className={cx(
         "w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500 dark:focus:ring-offset-slate-950",
         error && INPUT_ERROR
@@ -76,8 +99,13 @@ function TextareaField({ field, value, onChange, onBlur, error }) {
   );
 }
 
-function SelectField({ field, value, onChange, onBlur, error }) {
-  const options = (field.options ?? []).map((opt) =>
+interface SelectOption {
+  value: string;
+  label: string;
+}
+
+function SelectField({ field, value, onChange, onBlur, error }: FieldRendererProps) {
+  const options = ((field.options as (string | SelectOption)[] | undefined) ?? []).map((opt) =>
     typeof opt === "string" ? { value: opt, label: opt } : opt
   );
 
@@ -86,17 +114,17 @@ function SelectField({ field, value, onChange, onBlur, error }) {
       <select
         id={field.id}
         name={field.id}
-        value={value ?? ""}
+        value={(value as string) ?? ""}
         onChange={(e) => onChange(e.target.value)}
         onBlur={onBlur}
-        disabled={field.disabled}
+        disabled={field.disabled as boolean | undefined}
         className={cx(
           "h-10 w-full appearance-none rounded-lg border border-slate-200 bg-white py-0 pl-3 pr-9 text-sm font-medium text-slate-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200 dark:focus:ring-offset-slate-950",
           error && INPUT_ERROR
         )}
       >
         {field.placeholder ? (
-          <option value="">{field.placeholder}</option>
+          <option value="">{field.placeholder as string}</option>
         ) : null}
         {options.map((opt) => (
           <option key={opt.value} value={opt.value}>
@@ -112,11 +140,16 @@ function SelectField({ field, value, onChange, onBlur, error }) {
   );
 }
 
-function RadioField({ field, value, onChange }) {
-  const options = (field.options ?? []).map((opt) =>
+interface RadioOption extends SelectOption {
+  description?: string;
+  disabled?: boolean;
+}
+
+function RadioField({ field, value, onChange }: FieldRendererProps) {
+  const options = ((field.options as (string | RadioOption)[] | undefined) ?? []).map((opt) =>
     typeof opt === "string" ? { value: opt, label: opt } : opt
   );
-  const layout = field.layout ?? (options.length <= 4 ? "horizontal" : "vertical");
+  const layout = (field.layout as string | undefined) ?? (options.length <= 4 ? "horizontal" : "vertical");
 
   return (
     <div
@@ -138,7 +171,7 @@ function RadioField({ field, value, onChange }) {
             value={opt.value}
             checked={value === opt.value}
             onChange={() => onChange(opt.value)}
-            disabled={field.disabled || opt.disabled}
+            disabled={(field.disabled as boolean | undefined) || opt.disabled}
             className="h-4 w-4 border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800"
           />
           {opt.label}
@@ -151,7 +184,7 @@ function RadioField({ field, value, onChange }) {
   );
 }
 
-function CheckboxField({ field, value, onChange }) {
+function CheckboxField({ field, value, onChange }: FieldRendererProps) {
   return (
     <label className="inline-flex cursor-pointer items-center gap-2.5 text-sm text-slate-700 dark:text-slate-200">
       <input
@@ -160,22 +193,26 @@ function CheckboxField({ field, value, onChange }) {
         name={field.id}
         checked={Boolean(value)}
         onChange={(e) => onChange(e.target.checked)}
-        disabled={field.disabled}
+        disabled={field.disabled as boolean | undefined}
         className="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800"
       />
-      {field.checkboxLabel ?? field.label}
+      {(field.checkboxLabel as string | undefined) ?? field.label}
     </label>
   );
 }
 
-function CheckboxGroupField({ field, value, onChange }) {
+interface CheckboxOption extends SelectOption {
+  disabled?: boolean;
+}
+
+function CheckboxGroupField({ field, value, onChange }: FieldRendererProps) {
   const selected = Array.isArray(value) ? value : [];
-  const options = (field.options ?? []).map((opt) =>
+  const options = ((field.options as (string | CheckboxOption)[] | undefined) ?? []).map((opt) =>
     typeof opt === "string" ? { value: opt, label: opt } : opt
   );
-  const layout = field.layout ?? (options.length <= 4 ? "horizontal" : "vertical");
+  const layout = (field.layout as string | undefined) ?? (options.length <= 4 ? "horizontal" : "vertical");
 
-  function toggleValue(optValue) {
+  function toggleValue(optValue: string) {
     const next = selected.includes(optValue)
       ? selected.filter((v) => v !== optValue)
       : [...selected, optValue];
@@ -198,7 +235,7 @@ function CheckboxGroupField({ field, value, onChange }) {
             type="checkbox"
             checked={selected.includes(opt.value)}
             onChange={() => toggleValue(opt.value)}
-            disabled={field.disabled || opt.disabled}
+            disabled={(field.disabled as boolean | undefined) || opt.disabled}
             className="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800"
           />
           {opt.label}
@@ -208,7 +245,7 @@ function CheckboxGroupField({ field, value, onChange }) {
   );
 }
 
-function ToggleField({ field, value, onChange }) {
+function ToggleField({ field, value, onChange }: FieldRendererProps) {
   const checked = Boolean(value);
 
   return (
@@ -218,7 +255,7 @@ function ToggleField({ field, value, onChange }) {
         role="switch"
         aria-checked={checked}
         onClick={() => onChange(!checked)}
-        disabled={field.disabled}
+        disabled={field.disabled as boolean | undefined}
         className={cx(
           "relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950",
           checked ? "bg-brand-500" : "bg-slate-200 dark:bg-slate-700",
@@ -234,7 +271,7 @@ function ToggleField({ field, value, onChange }) {
         />
       </button>
       {field.toggleLabel ? (
-        <span className="text-sm text-slate-700 dark:text-slate-200">{field.toggleLabel}</span>
+        <span className="text-sm text-slate-700 dark:text-slate-200">{field.toggleLabel as string}</span>
       ) : null}
     </div>
   );
@@ -242,7 +279,7 @@ function ToggleField({ field, value, onChange }) {
 
 // ─── Main FormField ───
 
-const FIELD_RENDERERS = {
+const FIELD_RENDERERS: Record<string, React.ComponentType<FieldRendererProps>> = {
   text: TextField,
   email: TextField,
   url: TextField,
@@ -256,11 +293,20 @@ const FIELD_RENDERERS = {
   toggle: ToggleField,
 };
 
+export interface FormFieldProps {
+  field: FormFieldType & Record<string, unknown>;
+  value: unknown;
+  error?: string;
+  touched?: boolean;
+  onChange: (value: unknown) => void;
+  onBlur: () => void;
+}
+
 /**
  * Renders a single form field with label, description, error message,
  * and the appropriate input type.
  */
-export default function FormField({ field, value, error, touched, onChange, onBlur }) {
+export default function FormField({ field, value, error, touched, onChange, onBlur }: FormFieldProps) {
   const Renderer = FIELD_RENDERERS[field.type];
   if (!Renderer) return null;
 
@@ -273,17 +319,17 @@ export default function FormField({ field, value, error, touched, onChange, onBl
         <FieldLabel label={field.label} required={field.required} htmlFor={field.id} />
       ) : null}
       {field.description && field.type !== "toggle" ? (
-        <FieldDescription description={field.description} />
+        <FieldDescription description={field.description as string} />
       ) : null}
       <Renderer
         field={field}
         value={value}
         onChange={onChange}
         onBlur={onBlur}
-        error={showError}
+        error={Boolean(showError)}
       />
       {field.type === "toggle" && field.description ? (
-        <FieldDescription description={field.description} />
+        <FieldDescription description={field.description as string} />
       ) : null}
       {showError ? <FieldError error={error} /> : null}
     </div>