@eveshipfit/ui-ingame 1.0.0 → 1.1.0

package/README.md

@@ -23,10 +23,16 @@ import { TreeLeaf, TreeList } from "@eveshipfit/ui-ingame";
 </TreeList>;
 ```
 
-Every colour and size is a CSS variable in `theme.css`; override them, or load your own theme instead.
+Every colour and size is a CSS variable in `theme.css`; override them, or load your own theme instead. `--esf-scale` is
+EVE's UI scale, `1` for 100%; the `FittingWindow`, `FittingWheel`, `ItemBrowser`, `ShipStatistics` and `HistoryBar` are
+as big as EVE's at that scale.
+
+Give the `FittingWindow` its browser and statistics to get the buttons that slide them out:
+`<FittingWindow browser={<ItemBrowser />} statistics={<ShipStatistics />} />`.
 
 Icons are drawn from `@eveshipfit/images`: put the components inside an `ImagesProvider` of
-`@eveshipfit/react-hooks`.
+`@eveshipfit/react-hooks`. The tooltips of `ShipStatistics` come from `texts.dat` of `@eveshipfit/sde`: put it inside a
+`TextsProvider` too.
 
 ## License
 

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { DragEvent, HTMLAttributes, ReactNode } from "react";
+import { DragEvent, DragEventHandler, HTMLAttributes, MouseEventHandler, ReactNode } from "react";
 //#region src/primitives/Dialog/Dialog.d.ts
 interface DialogProps {
   open: boolean;
@@ -17,11 +17,19 @@ interface TreeListProps {
 export declare function TreeList({ label, children }: TreeListProps): import("react").JSX.Element;
 interface TreeGroupProps {
   label: ReactNode;
+  /** Shows the type's icon in front of the label. */
+  typeId?: number;
+  /** The URL of a small image in front of the label, like a market group's icon. */
+  icon?: string;
+  /** A second line under the label. */
+  description?: ReactNode;
   defaultOpen?: boolean;
+  /** Shown at the end of the row, like a count or an action. */
+  after?: ReactNode;
   /** Only called while the group is open, so large trees stay cheap. */
   children: () => ReactNode;
 }
-export declare function TreeGroup({ label, defaultOpen, children }: TreeGroupProps): import("react").JSX.Element;
+export declare function TreeGroup({ label, typeId, icon, description, defaultOpen, after, children }: TreeGroupProps): import("react").JSX.Element;
 interface TreeLeafProps {
   label: ReactNode;
   /** Shows the type's icon in front of the label. */
@@ -46,6 +54,66 @@ declare const textures: {
   "slot-low": string;
   "slot-rig": string;
   "slot-subsystem": string;
+  "module-unfit": string;
+  "module-power": string;
+  "module-info": string;
+  link: string;
+  search: string;
+  collapse: string;
+  checkmark: string;
+  close: string;
+  "fits-browser": string;
+  "fits-personal": string;
+  "fits-corporation": string;
+  "fits-alliance": string;
+  "fits-community": string;
+  "fits-alliance-small": string;
+  "fits-community-small": string;
+  "current-hull": string;
+  skills: string;
+  "filter-low-slot": string;
+  "filter-medium-slot": string;
+  "filter-high-slot": string;
+  "filter-rig-slot": string;
+  "filter-drones": string;
+  "filter-hull-restrictions": string;
+  "filter-resources": string;
+  simulate: string;
+  hardware: string;
+  statistics: string;
+  cargo: string;
+  "drone-bay": string;
+  "arrow-left": string;
+  "arrow-right": string;
+  "arrow-down": string;
+  "arrow-up": string;
+  price: string;
+  "stat-turret-dps": string;
+  "stat-alpha-strike": string;
+  "stat-shield-hp": string;
+  "stat-armor-hp": string;
+  "stat-structure-hp": string;
+  "stat-em-resistance": string;
+  "stat-thermal-resistance": string;
+  "stat-kinetic-resistance": string;
+  "stat-explosive-resistance": string;
+  "stat-armor-repair-rate": string;
+  "stat-hull-repair-rate": string;
+  "stat-passive-shield-recharge": string;
+  "stat-shield-boost-rate": string;
+  "stat-sensor-amarr": string;
+  "stat-sensor-caldari": string;
+  "stat-sensor-gallente": string;
+  "stat-sensor-minmatar": string;
+  "stat-scan-resolution": string;
+  "stat-signature-radius": string;
+  "stat-locked-targets": string;
+  "stat-mass": string;
+  "stat-inertia": string;
+  "stat-warp-speed": string;
+  "stat-align-time": string;
+  "stat-drone-bandwidth": string;
+  "stat-drone-control-range": string;
 };
 type IconName = keyof typeof textures;
 export declare const iconNames: IconName[];
@@ -61,8 +129,55 @@ interface TypeIconProps {
   size?: number;
   /** The tech level or faction marker. */
   marker?: boolean;
+  loading?: "lazy" | "eager";
+}
+export declare function TypeIcon({ typeId, size, marker, loading }: TypeIconProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/FilterToggle/FilterToggle.d.ts
+type FilterToggleProps = ({
+  icon: IconName;
+  typeId?: undefined;
+} | {
+  icon?: undefined;
+  typeId: number;
+}) & {
+  label: string;
+  pressed?: boolean;
+  /** Without it, the filter shows as not implemented yet. */
+  onPressedChange?: (pressed: boolean) => void;
+};
+/** One of the icons above EVE's lists that filter them. */
+export declare function FilterToggle({ icon, typeId, label, pressed, onPressedChange }: FilterToggleProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/Tooltip/Tooltip.d.ts
+interface TooltipProps {
+  label: ReactNode;
+  /** One element, which the tooltip points at. */
+  children: ReactNode;
+}
+/**
+ * Screen readers do not get the tooltip; name `children` itself, like with `aria-label`.
+ *
+ * Firefox places the tooltip as if `children` had no CSS transform, so do not rotate or scale it, or its parents.
+ */
+export declare function Tooltip({ label, children }: TooltipProps): import("react").JSX.Element;
+interface TooltipTextProps {
+  title: ReactNode;
+  description?: ReactNode;
 }
-export declare function TypeIcon({ typeId, size, marker }: TypeIconProps): import("react").JSX.Element;
+/** A tooltip's `label` with a title; give several to stack them. */
+export declare function TooltipText({ title, description }: TooltipTextProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/HistoryBar/HistoryBar.d.ts
+interface HistoryBarProps {
+  label: string;
+  length: number;
+  /** 0 is the oldest. */
+  position: number;
+  onGoTo: (position: number) => void;
+}
+/** EVE's Simulation History. */
+export declare function HistoryBar({ label, length, position, onGoTo }: HistoryBarProps): import("react").JSX.Element;
 //#endregion
 //#region src/primitives/Wheel/layout.d.ts
 type WheelRack = "high" | "medium" | "low" | "rig" | "subsystem";
@@ -74,7 +189,7 @@ interface WheelProps {
   label: string;
   children?: ReactNode;
 }
-/** Square, and as wide as `--esf-wheel-size`. */
+/** Square, and as big as EVE's at `--esf-scale`, or as wide as `--esf-wheel-size`. */
 export declare function Wheel({ label, children }: WheelProps): import("react").JSX.Element;
 //#endregion
 //#region src/primitives/Wheel/WheelRackMarker.d.ts
@@ -91,6 +206,7 @@ interface WheelSlotProps extends HTMLAttributes<HTMLDivElement> {
   /** In degrees clockwise from the top. */
   angle: number;
   typeId?: number;
+  typeName?: string;
   chargeTypeId?: number;
   chargeable?: boolean;
   state?: SlotState;
@@ -99,8 +215,17 @@ interface WheelSlotProps extends HTMLAttributes<HTMLDivElement> {
   available?: boolean;
   /** Shown, but not fitted yet. */
   preview?: boolean;
+  /** Makes the slot a button, named `label`. */
+  onPress?: MouseEventHandler<HTMLElement>;
+  /** Makes the slot draggable. */
+  onDragStart?: DragEventHandler<HTMLDivElement>;
+  onDragEnd?: DragEventHandler<HTMLDivElement>;
+  label?: string;
+  onUnfit?: () => void;
+  onRemoveCharge?: () => void;
+  onTogglePower?: () => void;
 }
-export declare function WheelSlot({ rack, angle, typeId, chargeTypeId, chargeable, state, activatable, available, preview, className, style, ...props }: WheelSlotProps): import("react").JSX.Element;
+export declare function WheelSlot({ rack, angle, typeId, typeName, chargeTypeId, chargeable, state, activatable, available, preview, onPress, onDragStart, onDragEnd, label, onUnfit, onRemoveCharge, onTogglePower, className, style, ...props }: WheelSlotProps): import("react").JSX.Element;
 //#endregion
 //#region src/primitives/Wheel/WheelHardpoints.d.ts
 interface Hardpoints {
@@ -129,4 +254,116 @@ interface WheelHullProps {
 }
 export declare function WheelHull({ typeId }: WheelHullProps): import("react").JSX.Element;
 //#endregion
-export type { DialogProps, Hardpoints, IconName, IconProps, MarkedRack, SlotState, TreeGroupProps, TreeLeafProps, TreeListProps, TypeIconProps, WheelGaugeProps, WheelHardpointsProps, WheelHullProps, WheelProps, WheelRack, WheelRackMarkerProps, WheelResource, WheelSlotProps };
+//#region src/primitives/Stat/Stat.d.ts
+interface StatProps {
+  /** Without one, the value still lines up with those that have one; `null` leaves that space out. */
+  icon?: IconName | null;
+  label: string;
+  /** `label` when left out. */
+  tooltip?: ReactNode;
+  children: ReactNode;
+}
+export declare function Stat({ icon, label, tooltip, children }: StatProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/StatsSection/StatsSection.d.ts
+interface StatsSectionProps {
+  title: string;
+  summary?: ReactNode;
+  /** How many `Stat`s go next to each other. */
+  columns?: 1 | 2;
+  children: ReactNode;
+}
+export declare function StatsSection({ title, summary, columns, children }: StatsSectionProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/ResistanceBar/ResistanceBar.d.ts
+type DamageType = "em" | "thermal" | "kinetic" | "explosive";
+interface ResistanceBarProps {
+  damage: DamageType;
+  label: string;
+  /** From 0 to 1. */
+  resistance: number;
+  /** The resistance as text. */
+  children: ReactNode;
+}
+export declare function ResistanceBar({ damage, label, resistance, children }: ResistanceBarProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/CapacitorRing/CapacitorRing.d.ts
+interface CapacitorRingProps {
+  /** In GJ. */
+  capacity: number;
+  /** The level the capacitor settles at, from 0 to 1; 0 when it depletes. */
+  level: number;
+  label: string;
+}
+/** EVE's ring of capacitor cells. */
+export declare function CapacitorRing({ capacity, level, label }: CapacitorRingProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/FittingWheel/FittingWheel.d.ts
+interface FittingWheelProps {
+  label?: string;
+}
+/** The fitting wheel of the fit in the surrounding `EveShipFitProvider`. */
+export declare function FittingWheel({ label }: FittingWheelProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/FittingWindow/FittingWindow.d.ts
+interface FittingWindowProps {
+  label?: string;
+  /** Like `ItemBrowser`; slid out by the Item Browser button, which is only there with it. */
+  browser?: ReactNode;
+  /** Like `ShipStatistics`; slid out by the Statistics button, which is only there with it. */
+  statistics?: ReactNode;
+}
+/** EVE's fitting window around the `FittingWheel`. */
+export declare function FittingWindow({ label, browser, statistics }: FittingWindowProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/ItemBrowser/ItemBrowser.d.ts
+interface ItemBrowserProps {
+  label?: string;
+}
+/** EVE's browser of hulls and fits, modules and charges, left of the fitting wheel. */
+export declare function ItemBrowser({ label }: ItemBrowserProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/ShipStatistics/ShipStatistics.d.ts
+interface ShipStatisticsProps {
+  label?: string;
+}
+/** EVE's statistics of the fit, as its fitting window shows them. */
+export declare function ShipStatistics({ label }: ShipStatisticsProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/ShipStatistics/CapacitorStats.d.ts
+export declare function CapacitorStats(): import("react").JSX.Element;
+//#endregion
+//#region src/components/ShipStatistics/OffenseStats.d.ts
+export declare function OffenseStats(): import("react").JSX.Element;
+//#endregion
+//#region src/components/ShipStatistics/DefenseStats.d.ts
+export declare function DefenseStats(): import("react").JSX.Element;
+//#endregion
+//#region src/components/ShipStatistics/RepairRate.d.ts
+/** One of the ways the fit gets its hitpoints back; click it to pick another. */
+export declare function RepairRate(): import("react").JSX.Element;
+//#endregion
+//#region src/components/ShipStatistics/Resistances.d.ts
+type Layer = "shield" | "armor" | "structure";
+/** The four resistances of one layer. */
+export declare function Resistances({ layer }: {
+  layer: Layer;
+}): import("react").JSX.Element[];
+//#endregion
+//#region src/components/ShipStatistics/TargetingStats.d.ts
+export declare function TargetingStats(): import("react").JSX.Element;
+//#endregion
+//#region src/components/ShipStatistics/NavigationStats.d.ts
+export declare function NavigationStats(): import("react").JSX.Element;
+//#endregion
+//#region src/components/ShipStatistics/DroneStats.d.ts
+export declare function DroneStats(): import("react").JSX.Element;
+//#endregion
+//#region src/components/ShipStatistics/FitPrice.d.ts
+interface FitPriceProps {
+  /** In ISK. */
+  price: number;
+}
+export declare function FitPrice({ price }: FitPriceProps): import("react").JSX.Element;
+//#endregion
+export type { CapacitorRingProps, DamageType, DialogProps, FilterToggleProps, FitPriceProps, FittingWheelProps, FittingWindowProps, Hardpoints, HistoryBarProps, IconName, IconProps, ItemBrowserProps, Layer, MarkedRack, ResistanceBarProps, ShipStatisticsProps, SlotState, StatProps, StatsSectionProps, TooltipProps, TooltipTextProps, TreeGroupProps, TreeLeafProps, TreeListProps, TypeIconProps, WheelGaugeProps, WheelHardpointsProps, WheelHullProps, WheelProps, WheelRack, WheelRackMarkerProps, WheelResource, WheelSlotProps };