chore(release): 0.10.2 [CI SKIP]

.releaserc.json

@@ -9,7 +9,7 @@
     [
       "@semantic-release/git",
       {
-        "assets": ["CHANGELOG.md", "package.json"],
+        "assets": ["CHANGELOG.md", "package.json", "package-lock.json"],
         "message": "chore(release): ${nextRelease.version} [CI SKIP]"
       }
     ]

CHANGELOG.md

@@ -1,3 +1,94 @@
+## [0.10.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.10.1...v0.10.2) (2022-06-16)
+
+
+### Bug Fixes
+
+* **Router:** add NavigateBackOrOpenMenu() ([077334e](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/077334e376fb42283e094f0b57c818c580c6f7ba))
+
+## [0.10.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.10.0...v0.10.1) (2022-06-16)
+
+
+### Bug Fixes
+
+* **Focusable:** add ref prop, fix event types ([f1e20cd](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/f1e20cd0b54622d634202c85cca920323e4df336))
+
+# [0.10.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.9.1...v0.10.0) (2022-06-10)
+
+
+### Features
+
+* **components:** remove HorizontalFocus, add Focusable ([9beab5f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/9beab5f7e913f2ef2a8a3047046a524d3007c3b8))
+
+## [0.9.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.9.0...v0.9.1) (2022-06-09)
+
+
+### Bug Fixes
+
+* **SuspensefulImage:** fix export ([dddb703](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/dddb703a2e712bf2e9d7e172a414c63ffd6a1cc9))
+
+# [0.9.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.8.0...v0.9.0) (2022-06-09)
+
+
+### Features
+
+* **custom-components:** add SuspensefulImage ([6324282](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/6324282b480f358a3d5936ab6d08ab239d640997))
+
+# [0.8.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.7.2...v0.8.0) (2022-06-09)
+
+
+### Features
+
+* **components:** add HorizontalFocus ([4d30efc](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/4d30efc33b5398b91e756695fefa91cc37f83ff1))
+
+## [0.7.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.7.1...v0.7.2) (2022-06-08)
+
+
+### Bug Fixes
+
+* **package:** fix pnpm peer dependencies errors ([e5e561e](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e5e561edd67994b8c55f99c1228e47d77b1c2ee2))
+
+## [0.7.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.7.0...v0.7.1) (2022-06-08)
+
+
+### Bug Fixes
+
+* **Router:** add NavigateToStore to interface ([dd5c42c](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/dd5c42c57d9ce6266f56237607bf37d8b5bd3b4c))
+* **spinners:** add SVG props ([24244f6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/24244f6e91e39a11bb964ee2779662084dcd0fd0))
+
+# [0.7.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.6.0...v0.7.0) (2022-06-08)
+
+
+### Features
+
+* **components:** added shared item-props, progressbar, and more types for slider ([4328385](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/43283853916f3993d92f6841b12f7ee47667e75b))
+
+# [0.6.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.5.1...v0.6.0) (2022-06-08)
+
+
+### Bug Fixes
+
+* **husky:** wrong script for husky caused problems when installing ([bc2bec4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/bc2bec4b839d691e20beb090327a359c9e93f1cc))
+
+
+### Features
+
+* **dropdown:** add dropdown ([a99fb4a](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/a99fb4a22dcea3b6cd2a52f0dbd274d9a10f2e35))
+* **sidebar-navigation:** add sidebar navigation component ([d8794ef](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/d8794ef4d36b25e600123d41696b0d5cc10dc2af))
+
+## [0.5.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.5.0...v0.5.1) (2022-06-06)
+
+
+### Bug Fixes
+
+* **classes:** switch static-classes to findModule ([244ae12](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/244ae128da03e0687f1ba0b0e5b5b548b581277a))
+
+# [0.5.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.4.2...v0.5.0) (2022-06-06)
+
+
+### Features
+
+* **utils:** add joinClassNames util ([f34b9de](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/f34b9de97f61eb5b075d6adedfcacfa5e097943b))
+
 ## [0.4.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v0.4.1...v0.4.2) (2022-06-06)
 
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "decky-frontend-lib",
-  "version": "0.0.6",
+  "version": "0.10.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "decky-frontend-lib",
-      "version": "0.0.6",
+      "version": "0.10.2",
       "hasInstallScript": true,
       "license": "GPL-2.0-or-later",
       "devDependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "decky-frontend-lib",
-  "version": "0.4.2",
+  "version": "0.10.2",
   "description": "A library for building decky plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,7 @@
     "dev": "tsc -b -w",
     "prepack": "npm run build",
     "test": "echo 'No tests for now!'",
-    "postinstall": "husky install",
+    "prepare": "husky install",
     "commit": "git-cz"
   },
   "files": [
@@ -58,6 +58,14 @@
     "ts-jest": "^27.1.4",
     "typescript": "^4.6.3"
   },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "react",
+        "react-dom"
+      ]
+    }
+  },
   "importSort": {
     ".js, .jsx, .ts, .tsx": {
       "style": "module",

src/custom-components/SuspensefulImage.tsx

@@ -0,0 +1,41 @@
+import { Spinner } from '../deck-components';
+import { useEffect } from 'react';
+import { FC, ImgHTMLAttributes, useState } from 'react';
+
+interface SuspensefulImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  suspenseWidth?: string | number;
+  suspenseHeight?: string | number;
+}
+
+export const SuspensefulImage: FC<SuspensefulImageProps> = (props) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const img = new Image();
+    img.src = props.src || '';
+    img.addEventListener('load', () => {
+      setLoading(false);
+    });
+    img.addEventListener('error', () => {
+      setError(true);
+    });
+  }, []);
+
+  return loading ? (
+    <div
+      style={{
+        width: props.suspenseWidth || props.style?.width,
+        height: props.suspenseHeight || props.style?.height,
+        background: 'rgba(255, 255, 255, 0.2)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {error ? 'Missing image' : <Spinner style={{ height: '48px' }} />}
+    </div>
+  ) : (
+    <img {...props} />
+  );
+};

src/custom-components/index.ts

@@ -0,0 +1 @@
+export * from './SuspensefulImage';

src/deck-components/ButtonItem.tsx

@@ -1,15 +1,11 @@
 import { FC } from 'react';
 
 import { CommonUIModule } from '../webpack';
+import { ItemProps } from './Item';
 
-export interface ButtonItemProps {
+export interface ButtonItemProps extends ItemProps {
-  label?: string;
-  description?: string;
-  layout?: 'below';
-  icon?: JSX.Element;
   onClick?(e: MouseEvent): void;
   disabled?: boolean;
-  bottomSeparator?: boolean;
 }
 
 export const ButtonItem = Object.values(CommonUIModule).find((mod: any) =>

src/deck-components/Dropdown.tsx

@@ -0,0 +1,44 @@
+import { ReactNode, VFC } from 'react';
+
+import { CommonUIModule } from '../webpack';
+import { ItemProps } from './Item';
+
+export interface SingleDropdownOption {
+  data: number;
+  label: string;
+
+  options?: never;
+}
+
+export interface MultiDropdownOption {
+  label: string;
+  options: DropdownOption[];
+
+  data?: never;
+}
+
+export type DropdownOption = SingleDropdownOption | MultiDropdownOption;
+
+export interface DropdownProps {
+  rgOptions: DropdownOption[];
+  selectedOption: number | null;
+  disabled?: boolean;
+  onMenuWillOpen?(showMenu: () => void): void;
+  onMenuOpened?(): void;
+  onChange?(data: SingleDropdownOption): void;
+  contextMenuPositionOptions?: any;
+  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>;

src/deck-components/Focusable.tsx

@@ -0,0 +1,19 @@
+import { HTMLAttributes, ReactNode, RefAttributes, VFC } from "react";
+import { findModuleChild } from "../webpack";
+
+export interface FocusableProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  "flow-children"?: string;
+  focusClassName?: string;
+  focusWithinClassName?: string;
+  onActivate?: (e: CustomEvent) => void;
+  onCancel?: (e: CustomEvent) => void;
+}
+
+export const Focusable = findModuleChild((m) => {
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (m[prop]?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",'))
+      return m[prop];
+  }
+}) as VFC<FocusableProps & RefAttributes<HTMLDivElement>>;

src/deck-components/Item.tsx

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

src/deck-components/ProgressBar.tsx

@@ -0,0 +1,18 @@
+import { VFC } from 'react';
+
+import { findModuleChild } from '../webpack';
+import { ItemProps } from './Item';
+
+export interface ProgressBarItem extends ItemProps {
+  indeterminate?: boolean;
+  nTransitionSec?: number;
+  nProgress?: number;
+  focusable?: boolean;
+}
+
+export const ProgressBarItem = findModuleChild((m) => {
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (m[prop]?.toString()?.includes('"indeterminate","nTransitionSec"')) return m[prop];
+  }
+}) as VFC<ProgressBarItem>;

src/deck-components/Router.tsx

@@ -22,7 +22,9 @@ export interface Router {
   OpenQuickAccessMenu(quickAccessTab: QuickAccessTab): void;
   GetQuickAccessTab(): QuickAccessTab;
   Navigate(path: string): void;
+  NavigateBackOrOpenMenu(): void;
   NavigateToExternalWeb(url: string): void;
+  NavigateToStore(): void;
   ToggleSideMenu(sideMenu: SideMenu): void;
   CloseSideMenus(): void;
   OpenSideMenu(sideMenu: SideMenu): void;

src/deck-components/SidebarNavigation.tsx

@@ -0,0 +1,25 @@
+import { ReactNode, VFC } from 'react';
+
+import { Module, findModuleChild } from '../webpack';
+
+export interface SidebarNavigationPages {
+  title: string;
+  route: string;
+  content: ReactNode;
+}
+
+export interface SidebarNavigationProps {
+  title?: string;
+  pages: SidebarNavigationPages[];
+  showTitle?: boolean;
+  disableRouteReporting?: boolean;
+}
+
+export const SidebarNavigation = findModuleChild((mod: Module) => {
+  for (let prop in mod) {
+    if (mod[prop]?.toString()?.includes('"disableRouteReporting"')) {
+      return mod[prop];
+    }
+  }
+  return null;
+}) as VFC<SidebarNavigationProps>;

src/deck-components/Slider.tsx

@@ -1,26 +1,32 @@
 import { FC } from 'react';
 
 import { CommonUIModule } from '../webpack';
+import { ItemProps } from './Item';
 
 export interface NotchLabel {
   notchIndex: number;
   label: string;
-  value: number;
+  value?: number;
 }
 
-export interface SliderProps {
+export interface SliderProps extends ItemProps {
-  label?: string;
   value: number;
-  layout?: 'below';
-  icon?: JSX.Element;
   min?: number;
   max?: number;
   step?: number;
   notchCount?: number;
   notchLabels?: NotchLabel[];
+  notchTicksVisible?: boolean;
+  showValue?: boolean;
+  resetValue?: number;
+  disabled?: boolean;
+  editableValue?: boolean;
+  validValues?: 'steps' | 'range' | ((value: number) => boolean);
+  valueSuffix?: string;
+  minimumDpadGranularity?: number;
   onChange?(value: number): void;
 }
 
 export const Slider = Object.values(CommonUIModule).find((mod: any) =>
-  mod?.render?.toString()?.includes('SliderField,fallback'),
+  mod?.toString()?.includes('SliderField,fallback'),
 ) as FC<SliderProps>;

src/deck-components/Spinner.tsx

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 
 import { IconsModule } from '../webpack';
 
 // TODO type this and other icons?
 export const Spinner = Object.values(IconsModule).find((mod: any) =>
     mod?.toString && /Spinner\)}\),.\.createElement\(\"path\",{d:\"M18 /.test(mod.toString())
-) as FC<{}>;
+) as FC<SVGAttributes<SVGElement>>;

src/deck-components/SteamSpinner.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, SVGAttributes } from 'react';
 import { findModuleChild } from '../webpack';
 
 export const SteamSpinner = findModuleChild((m) => {
@@ -6,4 +6,4 @@ export const SteamSpinner = findModuleChild((m) => {
     for (let prop in m) {
       if (m[prop]?.toString()?.includes("Steam Spinner") && m[prop].toString().includes("PreloadThrobber")) return m[prop]
     }
-}) as FC<{}>;
+}) as FC<SVGAttributes<SVGElement>>;

src/deck-components/TextField.tsx

@@ -25,5 +25,3 @@ export interface TextFieldProps {
 export const TextField = Object.values(CommonUIModule).find(
   (mod: Module) => mod?.validateUrl && mod?.validateEmail,
 ) as VFC<TextFieldProps>;
-
-console.log(TextField);

src/deck-components/Toggle.tsx

@@ -1,12 +1,10 @@
 import { FC } from 'react';
 
 import { CommonUIModule } from '../webpack';
+import { ItemProps } from './Item';
 
-export interface ToggleProps {
+export interface ToggleProps extends ItemProps {
-  label?: string;
-  description?: string;
   checked: boolean;
-  icon?: JSX.Element;
   disabled?: boolean;
   onChange?(checked: boolean): void;
 }

src/deck-components/index.ts

@@ -1,9 +1,13 @@
 export * from './Button';
 export * from './ButtonItem';
+export * from './Dropdown';
+export * from './Focusable';
 export * from './Menu';
 export * from './Modal';
 export * from './Panel';
+export * from './ProgressBar';
 export * from './Router';
+export * from './SidebarNavigation';
 export * from './Slider';
 export * from './Spinner';
 export * from './static-classes';

src/deck-components/static-classes.ts

@@ -1,4 +1,4 @@
-import { findModuleChild } from '../webpack';
+import { findModule } from '../webpack';
 
 type StaticClasses = Record<
   | 'ActiveTab'
@@ -157,26 +157,32 @@ type QuickAccessControlsClasses = Record<
   string
 >;
 
-export const staticClasses: StaticClasses = findModuleChild((mod) => {
+export const staticClasses: StaticClasses = findModule((mod) => {
   if (typeof mod !== 'object') return false;
 
   if (mod.TransitionMenuDelay) {
-    return mod;
+    return true;
   }
+
+  return false;
 });
 
-export const gamepadDialogClasses: GamepadDialogClasses = findModuleChild((mod) => {
+export const gamepadDialogClasses: GamepadDialogClasses = findModule((mod) => {
   if (typeof mod !== 'object') return false;
 
   if (mod.WithFirstRow) {
-    return mod;
+    return true;
   }
+
+  return false;
 });
 
-export const quickAccessControlsClasses: QuickAccessControlsClasses = findModuleChild((mod) => {
+export const quickAccessControlsClasses: QuickAccessControlsClasses = findModule((mod) => {
   if (typeof mod !== 'object') return false;
 
   if (mod.PanelSectionRow) {
-    return mod;
+    return true;
   }
+
+  return false;
 });

src/index.ts

@@ -1,4 +1,5 @@
 // export * from './deck-libs';
+export * from './custom-components';
 export * from './deck-components';
 export * from './plugin';
 export * from './webpack';

src/utils.ts

@@ -85,3 +85,7 @@ export function unpatch(obj: any, name: any): void {
 export function getReactInstance(o: HTMLElement | Element | Node) {
     return o[Object.keys(o).find(k => k.startsWith('__reactInternalInstance')) as string]
 }
+
+export function joinClassNames(...classes: string[]): string {
+    return classes.join(" ");
+}