@eveshipfit/ui-ingame 1.0.0

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2023 EVEShipFit Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# @eveshipfit/ui-ingame
+
+React components for EVE Online ship fitting that look like the in-game UI.
+
+Part of [EVEShip.fit](https://eveship.fit).
+
+## Install
+
+```sh
+npm install @eveshipfit/ui-ingame @eveshipfit/images react react-dom
+```
+
+## Usage
+
+Load the theme once, then use the components:
+
+```tsx
+import "@eveshipfit/ui-ingame/theme.css";
+import { TreeLeaf, TreeList } from "@eveshipfit/ui-ingame";
+
+<TreeList label="Ships">
+  <TreeLeaf label="Rifter" typeId={587} onActivate={() => console.log("Rifter")} />
+</TreeList>;
+```
+
+Every colour and size is a CSS variable in `theme.css`; override them, or load your own theme instead.
+
+Icons are drawn from `@eveshipfit/images`: put the components inside an `ImagesProvider` of
+`@eveshipfit/react-hooks`.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,132 @@
+import { DragEvent, HTMLAttributes, ReactNode } from "react";
+//#region src/primitives/Dialog/Dialog.d.ts
+interface DialogProps {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  children: ReactNode;
+}
+/** A modal; `onClose` is called when the user closes it, by Escape or the close button. */
+export declare function Dialog({ open, title, onClose, children }: DialogProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/TreeList/TreeList.d.ts
+interface TreeListProps {
+  label: string;
+  children: ReactNode;
+}
+export declare function TreeList({ label, children }: TreeListProps): import("react").JSX.Element;
+interface TreeGroupProps {
+  label: ReactNode;
+  defaultOpen?: boolean;
+  /** 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;
+interface TreeLeafProps {
+  label: ReactNode;
+  /** Shows the type's icon in front of the label. */
+  typeId?: number;
+  title?: string;
+  onActivate?: () => void;
+  onHover?: (hovering: boolean) => void;
+  onDragStart?: (event: DragEvent) => void;
+  onDragEnd?: () => void;
+  /** Shown at the end of the row, like a count or an action. */
+  after?: ReactNode;
+}
+/** Activates on double click, as EVE's own lists do; single clicks are for selecting text and dragging. */
+export declare function TreeLeaf({ label, typeId, title, onActivate, onHover, onDragStart, onDragEnd, after }: TreeLeafProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/Icon/Icon.d.ts
+declare const textures: {
+  "hardpoint-turret": string;
+  "hardpoint-launcher": string;
+  "slot-high": string;
+  "slot-medium": string;
+  "slot-low": string;
+  "slot-rig": string;
+  "slot-subsystem": string;
+};
+type IconName = keyof typeof textures;
+export declare const iconNames: IconName[];
+interface IconProps {
+  name: IconName;
+  size?: number;
+}
+export declare function Icon({ name, size }: IconProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/TypeIcon/TypeIcon.d.ts
+interface TypeIconProps {
+  typeId: number;
+  size?: number;
+  /** The tech level or faction marker. */
+  marker?: boolean;
+}
+export declare function TypeIcon({ typeId, size, marker }: TypeIconProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/Wheel/layout.d.ts
+type WheelRack = "high" | "medium" | "low" | "rig" | "subsystem";
+export declare function rackSize(rack: WheelRack): number;
+export declare function slotAngle(rack: WheelRack, index: number): number;
+//#endregion
+//#region src/primitives/Wheel/Wheel.d.ts
+interface WheelProps {
+  label: string;
+  children?: ReactNode;
+}
+/** Square, and 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
+type MarkedRack = Extract<WheelRack, "high" | "medium" | "low">;
+interface WheelRackMarkerProps {
+  rack: MarkedRack;
+}
+export declare function WheelRackMarker({ rack }: WheelRackMarkerProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/Wheel/WheelSlot.d.ts
+type SlotState = "offline" | "online" | "active" | "overload";
+interface WheelSlotProps extends HTMLAttributes<HTMLDivElement> {
+  rack: WheelRack;
+  /** In degrees clockwise from the top. */
+  angle: number;
+  typeId?: number;
+  chargeTypeId?: number;
+  chargeable?: boolean;
+  state?: SlotState;
+  activatable?: boolean;
+  /** False for a slot the ship does not have. */
+  available?: boolean;
+  /** Shown, but not fitted yet. */
+  preview?: boolean;
+}
+export declare function WheelSlot({ rack, angle, typeId, chargeTypeId, chargeable, state, activatable, available, preview, className, style, ...props }: WheelSlotProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/Wheel/WheelHardpoints.d.ts
+interface Hardpoints {
+  used: number;
+  total: number;
+}
+interface WheelHardpointsProps {
+  turrets: Hardpoints;
+  launchers: Hardpoints;
+}
+export declare function WheelHardpoints({ turrets, launchers }: WheelHardpointsProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/Wheel/WheelGauge.d.ts
+type WheelResource = "cpu" | "powergrid" | "calibration";
+interface WheelGaugeProps {
+  resource: WheelResource;
+  used: number;
+  total: number;
+  valueText?: string;
+}
+export declare function WheelGauge({ resource, used, total, valueText }: WheelGaugeProps): import("react").JSX.Element;
+//#endregion
+//#region src/primitives/Wheel/WheelHull.d.ts
+interface WheelHullProps {
+  typeId: number;
+}
+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 };