@decky/ui 4.0.0

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@decky/ui",
+  "version": "4.0.0",
+  "description": "A library for interacting with the Steam frontend in Decky plugins and elsewhere.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "sideEffects": false,
+  "scripts": {
+    "build": "shx rm -rf dist && tsc -b",
+    "dev": "tsc -b -w",
+    "docs": "typedoc --theme wiki-js --tsconfig ./tsconfig.json src/**/*",
+    "test": "echo 'No tests for now!'",
+    "prepare": "husky install",
+    "commit": "git-cz"
+  },
+  "files": [
+    "/lib",
+    "/src",
+    "/dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SteamDeckHomebrew/decky-frontend-lib.git"
+  },
+  "keywords": [
+    "decky",
+    "steam-deck",
+    "steam",
+    "components"
+  ],
+  "author": "SteamDeckHomebrew Team",
+  "license": "LGPL-2.1",
+  "bugs": {
+    "url": "https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues"
+  },
+  "homepage": "https://github.com/SteamDeckHomebrew/decky-frontend-lib#readme",
+  "config": {
+    "commitizen": {
+      "path": "@commitlint/cz-commitlint"
+    }
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.0.2",
+    "@commitlint/config-conventional": "^17.0.2",
+    "@commitlint/cz-commitlint": "^17.0.0",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@types/jest": "^27.4.1",
+    "@types/react": "16.14.0",
+    "@types/react-router": "5.1.18",
+    "commitizen": "^4.2.4",
+    "husky": "^8.0.1",
+    "import-sort-style-module": "^6.0.0",
+    "jest": "^27.5.1",
+    "minimist": "^1.2.6",
+    "prettier": "^2.7.1",
+    "prettier-plugin-import-sort": "^0.0.7",
+    "semantic-release": "^19.0.3",
+    "shx": "^0.3.4",
+    "ts-jest": "^27.1.4",
+    "typedoc": "^0.23.24",
+    "typedoc-plugin-mdn-links": "^2.0.0",
+    "typedoc-plugin-missing-exports": "^1.0.0",
+    "typedoc-wikijs-theme": "^1.0.5",
+    "typescript": "^4.9.5"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "react",
+        "react-dom"
+      ]
+    }
+  },
+  "importSort": {
+    ".js, .jsx, .ts, .tsx": {
+      "style": "module",
+      "parser": "typescript"
+    }
+  }
+}

package/src/class-mapper.ts

@@ -0,0 +1,34 @@
+import { Module, findAllModules } from './webpack';
+
+export interface ClassModule {
+  [name: string]: string;
+}
+
+export const classMap: ClassModule[] = findAllModules((m: Module) => {
+  if (typeof m == 'object' && !m.__esModule) {
+    const keys = Object.keys(m);
+    // special case some libraries
+    if (keys.length == 1 && m.version) return false;
+    // special case localization
+    if (keys.length > 1000 && m.AboutSettings) return false;
+
+    return keys.length > 0 && keys.every((k) => !Object.getOwnPropertyDescriptor(m, k)?.get && typeof m[k] == 'string');
+  }
+  return false;
+});
+
+export function findClass(name: string): string | void {
+  return classMap.find((m) => m?.[name])?.[name];
+}
+
+export function findClassModule(filter: (module: any) => boolean): ClassModule | void {
+  return classMap.find((m) => filter(m));
+}
+
+export function unminifyClass(minifiedClass: string): string | void {
+  for (let m of classMap) {
+    for (let className of Object.keys(m)) {
+      if (m[className] == minifiedClass) return className;
+    }
+  }
+}

package/src/components/Button.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+
+import { DialogButton, DialogButtonProps } from './Dialog';
+
+export interface ButtonProps extends DialogButtonProps {}
+
+// Button isn't exported, so call DialogButton to grab it
+export const Button = (DialogButton as any)?.render({}).type as FC<ButtonProps>;

package/src/components/ButtonItem.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+
+import { CommonUIModule } from '../webpack';
+import { ItemProps } from './Item';
+
+export interface ButtonItemProps extends ItemProps {
+  onClick?(e: MouseEvent): void;
+  disabled?: boolean;
+}
+export const ButtonItem = Object.values(CommonUIModule).find(
+  (mod: any) =>
+    mod?.render?.toString()?.includes('"highlightOnFocus","childrenContainerWidth"') ||
+    mod?.render?.toString()?.includes('childrenContainerWidth:"min"'),
+) as FC<ButtonItemProps>;

package/src/components/Carousel.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode, RefAttributes, VFC } from 'react';
+
+import { Export, findModuleExport } from '../webpack';
+
+export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+  autoFocus?: boolean;
+  enableBumperPaging?: boolean;
+  fnDoesItemTakeFocus?: (...unknown: any[]) => boolean;
+  fnGetColumnWidth?: (...unknown: any[]) => number;
+  fnGetId?: (id: number) => number;
+  fnItemRenderer?: (id: number, ...unknown: any[]) => ReactNode;
+  fnUpdateArrows?: (...unknown: any[]) => any;
+  initialColumn?: number;
+  nHeight?: number;
+  nIndexLeftmost?: number;
+  nItemHeight?: number;
+  nItemMarginX?: number;
+  nNumItems?: number;
+  name?: string;
+  scrollToAlignment?: 'center';
+}
+
+export const Carousel = findModuleExport((e: Export) => e.render?.toString().includes('setFocusedColumn:')) as VFC<
+  CarouselProps & RefAttributes<HTMLDivElement>
+>;

package/src/components/ControlsList.tsx

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+
+import { Export, findModuleExport } from '../webpack';
+
+export interface ControlsListProps {
+  alignItems?: 'left' | 'right' | 'center';
+  spacing?: 'standard' | 'extra';
+}
+
+export const ControlsList: FC<ControlsListProps> = findModuleExport(
+  (e: Export) =>
+    e?.toString && e.toString().includes('().ControlsListChild') && e.toString().includes('().ControlsListOuterPanel'),
+);

package/src/components/Dialog.tsx

@@ -0,0 +1,86 @@
+import { CSSProperties, FC, RefAttributes } from 'react';
+
+import { CommonUIModule } from '../webpack';
+import { FooterLegendProps } from './FooterLegend';
+
+export interface DialogCommonProps extends RefAttributes<HTMLDivElement> {
+  style?: CSSProperties;
+  className?: string;
+}
+
+export interface DialogButtonProps extends DialogCommonProps, FooterLegendProps {
+  /**
+   * Enables/disables the focus around the button.
+   *
+   * @note
+   * Default value depends on context, so setting it to `false` will enable it.
+   */
+  noFocusRing?: boolean;
+
+  /**
+   * Disables the button - assigned `on*` methods will not be invoked if clicked.
+   *
+   * @note
+   * Depending on where it is, it might still get focus. In such case it can be
+   * partially disabled separately.
+   *
+   * @see focusable.
+   */
+  disabled?: boolean;
+
+  /**
+   * Enables/disables the navigation based focus on button - you won't be able to navigate to
+   * it via the gamepad or keyboard.
+   *
+   * @note
+   * If set to `false`, it still can be clicked and **WILL** become focused until navigated away.
+   * Depending on the context of where the button is, even a disabled button can focused.
+   */
+  focusable?: boolean;
+
+  onClick?(e: MouseEvent): void;
+  onPointerDown?(e: PointerEvent): void;
+  onPointerUp?(e: PointerEvent): void;
+  onPointerCancel?(e: PointerEvent): void;
+  onMouseDown?(e: MouseEvent): void;
+  onMouseUp?(e: MouseEvent): void;
+  onTouchStart?(e: TouchEvent): void;
+  onTouchEnd?(e: TouchEvent): void;
+  onTouchCancel?(e: TouchEvent): void;
+  onSubmit?(e: SubmitEvent): void;
+}
+
+const CommonDialogDivs = Object.values(CommonUIModule).filter(
+  (m: any) => typeof m === 'object' && m?.render?.toString().includes('"div",Object.assign({},'),
+);
+const MappedDialogDivs = new Map(
+  Object.values(CommonDialogDivs).map((m: any) => {
+    const renderedDiv = m.render({});
+    // Take only the first class name segment as it identifies the element we want
+    return [renderedDiv.props.className.split(' ')[0], m];
+  }),
+);
+
+export const DialogHeader = MappedDialogDivs.get('DialogHeader') as FC<DialogCommonProps>;
+export const DialogSubHeader = MappedDialogDivs.get('DialogSubHeader') as FC<DialogCommonProps>;
+export const DialogFooter = MappedDialogDivs.get('DialogFooter') as FC<DialogCommonProps>;
+export const DialogLabel = MappedDialogDivs.get('DialogLabel') as FC<DialogCommonProps>;
+export const DialogBodyText = MappedDialogDivs.get('DialogBodyText') as FC<DialogCommonProps>;
+export const DialogBody = MappedDialogDivs.get('DialogBody') as FC<DialogCommonProps>;
+export const DialogControlsSection = MappedDialogDivs.get('DialogControlsSection') as FC<DialogCommonProps>;
+export const DialogControlsSectionHeader = MappedDialogDivs.get('DialogControlsSectionHeader') as FC<DialogCommonProps>;
+
+export const DialogButtonPrimary = Object.values(CommonUIModule).find(
+  (mod: any) => mod?.render?.toString()?.includes('DialogButton') && mod?.render?.toString()?.includes('Primary'),
+) as FC<DialogButtonProps>;
+
+export const DialogButtonSecondary = Object.values(CommonUIModule).find(
+  (mod: any) =>
+    mod?.render?.toString()?.includes('Object.assign({type:"button"') &&
+    mod?.render?.toString()?.includes('DialogButton') &&
+    mod?.render?.toString()?.includes('Secondary'),
+) as FC<DialogButtonProps>;
+
+// This is the "main" button. The Primary can act as a submit button,
+// therefore secondary is chosen (also for backwards comp. reasons)
+export const DialogButton = DialogButtonSecondary;

package/src/components/DialogCheckbox.tsx

@@ -0,0 +1,36 @@
+import { FC, ReactNode } from 'react';
+
+import { findModule } from '../webpack';
+import { DialogCommonProps } from './Dialog';
+import { FooterLegendProps } from './FooterLegend';
+
+export interface DialogCheckboxProps extends DialogCommonProps, FooterLegendProps {
+  onChange?(checked: boolean): void;
+  label?: ReactNode;
+  description?: ReactNode;
+  disabled?: boolean;
+  tooltip?: string;
+  color?: string;
+  highlightColor?: string;
+  bottomSeparator?: 'standard' | 'thick' | 'none';
+  controlled?: boolean;
+  checked?: boolean;
+  onClick?(evt: Event): void;
+}
+
+export const DialogCheckbox = Object.values(
+  findModule((m: any) => {
+    if (typeof m !== 'object') return false;
+    for (const prop in m) {
+      if (m[prop]?.prototype?.GetPanelElementProps) return true;
+    }
+    return false;
+  }),
+).find(
+  (m: any) =>
+    m.contextType &&
+    m.prototype?.render.toString().includes('fallback:') &&
+    m?.prototype?.SetChecked &&
+    m?.prototype?.Toggle &&
+    m?.prototype?.GetPanelElementProps,
+) as FC<DialogCheckboxProps>;

package/src/components/Dropdown.tsx

@@ -0,0 +1,49 @@
+import { ReactNode, VFC } from 'react';
+
+import { CommonUIModule } from '../webpack';
+import { ItemProps } from './Item';
+
+export interface SingleDropdownOption {
+  data: any;
+  label: ReactNode;
+
+  options?: never;
+}
+
+export interface MultiDropdownOption {
+  label: ReactNode;
+  options: DropdownOption[];
+
+  data?: never;
+}
+
+export type DropdownOption = SingleDropdownOption | MultiDropdownOption;
+
+export interface DropdownMenuPositionOptions {
+  [_: string]: unknown
+  bMatchWidth?: boolean
+}
+
+export interface DropdownProps {
+  rgOptions: DropdownOption[];
+  selectedOption: any;
+  disabled?: boolean;
+  onMenuWillOpen?(showMenu: () => void): void;
+  onMenuOpened?(): void;
+  onChange?(data: SingleDropdownOption): void;
+  contextMenuPositionOptions?: DropdownMenuPositionOptions;
+  menuLabel?: string;
+  strDefaultLabel?: string;
+  renderButtonValue?(element: ReactNode): ReactNode;
+  focusable?: boolean;
+}
+
+export const Dropdown = Object.values(CommonUIModule).find(
+  (mod: any) => mod?.prototype?.SetSelectedOption && mod?.prototype?.BuildMenu,
+) as VFC<DropdownProps>;
+
+export interface DropdownItemProps extends DropdownProps, ItemProps {}
+
+export const DropdownItem = Object.values(CommonUIModule).find((mod: any) =>
+  mod?.toString()?.includes('"dropDownControlRef","description"'),
+) as VFC<DropdownItemProps>;

package/src/components/Field.tsx

@@ -0,0 +1,28 @@
+import { FC, ReactNode, RefAttributes } from 'react';
+
+import { Export, findModuleExport } from '../webpack';
+import { FooterLegendProps } from './FooterLegend';
+
+export interface FieldProps extends FooterLegendProps {
+  label?: ReactNode;
+  bottomSeparator?: 'standard' | 'thick' | 'none';
+  description?: ReactNode;
+  disabled?: boolean;
+  icon?: ReactNode;
+  inlineWrap?: 'keep-inline' | 'shift-children-below'; // If label is too long it will move shildren below before starting to wrap label
+  childrenLayout?: 'below' | 'inline';
+  childrenContainerWidth?: 'min' | 'max' | 'fixed'; // Does not work with childrenLayout==='below'
+  spacingBetweenLabelAndChild?: 'none'; // This applies only when childrenLayout==='below'
+  padding?: 'none' | 'standard' | 'compact';
+  className?: string;
+  highlightOnFocus?: boolean;
+  indentLevel?: number;
+  verticalAlignment?: 'center' | 'none'; // Alligns inline label with children
+  focusable?: boolean; // Allows to get focus without any focusable children or on* callbacks
+  onActivate?: (e: CustomEvent | MouseEvent) => void;
+  onClick?: (e: CustomEvent | MouseEvent) => void;
+}
+
+export const Field = findModuleExport((e: Export) => e?.render?.toString().includes('"shift-children-below"')) as FC<
+  FieldProps & RefAttributes<HTMLDivElement>
+>;

package/src/components/FocusRing.ts

@@ -0,0 +1,15 @@
+import { ElementType, FC, ReactNode } from 'react';
+
+import { Export, findModuleExport } from '../webpack';
+
+export interface FocusRingProps {
+  className?: string;
+  rootClassName?: string;
+  render?: ElementType;
+  children?: ReactNode;
+  NavigationManager?: any;
+}
+
+export const FocusRing = findModuleExport((e: Export) =>
+  e?.toString()?.includes('.GetShowDebugFocusRing())'),
+) as FC<FocusRingProps>;

package/src/components/Focusable.tsx

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode, RefAttributes, VFC } from 'react';
+
+import { Export, findModuleExport } from '../webpack';
+import { FooterLegendProps } from './FooterLegend';
+
+export interface FocusableProps extends HTMLAttributes<HTMLDivElement>, FooterLegendProps {
+  children: ReactNode;
+  'flow-children'?: string;
+  focusClassName?: string;
+  focusWithinClassName?: string;
+  noFocusRing?: boolean;
+  onActivate?: (e: CustomEvent) => void;
+  onCancel?: (e: CustomEvent) => void;
+}
+
+export const Focusable = findModuleExport((e: Export) =>
+  e?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",'),
+) as VFC<FocusableProps & RefAttributes<HTMLDivElement>>;

package/src/components/FooterLegend.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+
+export enum GamepadButton {
+  INVALID,
+  OK,
+  CANCEL,
+  SECONDARY,
+  OPTIONS,
+  BUMPER_LEFT,
+  BUMPER_RIGHT,
+  TRIGGER_LEFT,
+  TRIGGER_RIGHT,
+  DIR_UP,
+  DIR_DOWN,
+  DIR_LEFT,
+  DIR_RIGHT,
+  SELECT,
+  START,
+  LSTICK_CLICK,
+  RSTICK_CLICK,
+  LSTICK_TOUCH,
+  RSTICK_TOUCH,
+  LPAD_TOUCH,
+  LPAD_CLICK,
+  RPAD_TOUCH,
+  RPAD_CLICK,
+  REAR_LEFT_UPPER,
+  REAR_LEFT_LOWER,
+  REAR_RIGHT_UPPER,
+  REAR_RIGHT_LOWER,
+  STEAM_GUIDE,
+  STEAM_QUICK_MENU,
+}
+export declare enum NavEntryPositionPreferences {
+  FIRST,
+  LAST,
+  MAINTAIN_X,
+  MAINTAIN_Y,
+  PREFERRED_CHILD,
+}
+export interface GamepadEventDetail {
+  button: number;
+  is_repeat?: boolean;
+  source: number;
+}
+export declare type ActionDescriptionMap = {
+  [key in GamepadButton]?: ReactNode;
+};
+export declare type GamepadEvent = CustomEvent<GamepadEventDetail>;
+export interface FooterLegendProps {
+  actionDescriptionMap?: ActionDescriptionMap;
+  onOKActionDescription?: ReactNode;
+  onCancelActionDescription?: ReactNode;
+  onSecondaryActionDescription?: ReactNode;
+  onOptionsActionDescription?: ReactNode;
+  onMenuActionDescription?: ReactNode;
+  onButtonDown?: (evt: GamepadEvent) => void;
+  onButtonUp?: (evt: GamepadEvent) => void;
+  onOKButton?: (evt: GamepadEvent) => void;
+  onCancelButton?: (evt: GamepadEvent) => void;
+  onSecondaryButton?: (evt: GamepadEvent) => void;
+  onOptionsButton?: (evt: GamepadEvent) => void;
+  onGamepadDirection?: (evt: GamepadEvent) => void;
+  onGamepadFocus?: (evt: GamepadEvent) => void;
+  onGamepadBlur?: (evt: GamepadEvent) => void;
+  onMenuButton?: (evt: GamepadEvent) => void;
+}

package/src/components/Item.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+export interface ItemProps {
+  label?: ReactNode;
+  description?: ReactNode;
+  layout?: 'below' | 'inline';
+  icon?: ReactNode;
+  bottomSeparator?: 'standard' | 'thick' | 'none';
+  indentLevel?: number;
+  tooltip?: string;
+  highlightOnFocus?: boolean;
+}

package/src/components/Marquee.tsx

@@ -0,0 +1,20 @@
+import { CSSProperties, FC } from 'react';
+
+import { Export, findModuleExport } from '../webpack';
+
+export interface MarqueeProps {
+  play?: boolean;
+  direction?: 'left' | 'right';
+  speed?: number;
+  delay?: number;
+  fadeLength?: number;
+  center?: boolean;
+  resetOnPause?: boolean;
+  style?: CSSProperties;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const Marquee: FC<MarqueeProps> = findModuleExport(
+  (e: Export) => e?.toString && e.toString().includes('.Marquee') && e.toString().includes('--fade-length'),
+);

package/src/components/Menu.tsx

@@ -0,0 +1,57 @@
+import { FC, ReactNode } from 'react';
+
+import { fakeRenderComponent } from '../utils';
+import { Export, findModuleExport } from '../webpack';
+import { FooterLegendProps } from './FooterLegend';
+
+export const showContextMenu: (children: ReactNode, parent?: EventTarget) => void = findModuleExport(
+  (e: Export) => typeof e === 'function' && e.toString().includes('stopPropagation))'),
+);
+
+export interface MenuProps extends FooterLegendProps {
+  label: string;
+  onCancel?(): void;
+  cancelText?: string;
+  children?: ReactNode;
+}
+
+export const Menu: FC<MenuProps> = findModuleExport(
+  (e: Export) => e?.prototype?.HideIfSubmenu && e?.prototype?.HideMenu,
+);
+
+export interface MenuGroupProps {
+  label: string;
+  disabled?: boolean;
+  children?: ReactNode;
+}
+
+export const MenuGroup: FC<MenuGroupProps> = findModuleExport(
+  (e: Export) =>
+    (e?.toString()?.includes?.('bInGamepadUI:') &&
+      fakeRenderComponent(() => e({ overview: { appid: 7 } }))?.type?.prototype?.RenderSubMenu) ||
+    (e?.prototype?.RenderSubMenu && e?.prototype?.ShowSubMenu),
+);
+export interface MenuItemProps extends FooterLegendProps {
+  bInteractableItem?: boolean;
+  onClick?(evt: Event): void;
+  onSelected?(evt: Event): void;
+  onMouseEnter?(evt: MouseEvent): void;
+  onMoveRight?(): void;
+  selected?: boolean;
+  disabled?: boolean;
+  bPlayAudio?: boolean;
+  tone?: 'positive' | 'emphasis' | 'destructive';
+  children?: ReactNode;
+}
+
+export const MenuItem: FC<MenuItemProps> = findModuleExport(
+  (e: Export) =>
+    e?.render?.toString()?.includes('bPlayAudio:') || (e?.prototype?.OnOKButton && e?.prototype?.OnMouseEnter),
+);
+
+/*
+all().map(m => {
+if (typeof m !== "object") return undefined;
+for (let prop in m) { if (m[prop]?.prototype?.OK && m[prop]?.prototype?.Cancel && m[prop]?.prototype?.render) return m[prop]}
+}).find(x => x)
+*/