chore(release): 3.5.4 [CI SKIP]

.releaserc.json

@@ -6,7 +6,8 @@
       {
         "preset": "angular",
         "releaseRules": [
-          {"type": "chore", "scope": "classes", "release": "patch"}
+          {"type": "chore", "scope": "classes", "release": "patch"},
+          {"type": "*", "scope": "docs", "release": false}
         ]
       }
     ],

CHANGELOG.md

@@ -1,3 +1,38 @@
+## [3.5.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.5.3...v3.5.4) (2022-10-08)
+
+
+### Bug Fixes
+
+* **sidebarnavigation:** allow null pags ([d6b00b0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/d6b00b07337f7a9d38813eeec7c0a848d5c15f17))
+
+## [3.5.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.5.2...v3.5.3) (2022-10-08)
+
+
+### Bug Fixes
+
+* **tabs:** fix props and add example ([4024b76](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/4024b76918eea43e43a24c162a937877f18627f0))
+
+## [3.5.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.5.1...v3.5.2) (2022-10-08)
+
+
+### Bug Fixes
+
+* **Tabs:** make onShowTab required ([7161e75](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7161e757e9c98d677510e03eb2606ce58152f3b1))
+
+## [3.5.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.5.0...v3.5.1) (2022-10-08)
+
+
+### Bug Fixes
+
+* **Tabs:** actually export it lmao ([0e0e0d2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/0e0e0d204adc8d888f05e98edb6c1a1a171d00bb))
+
+# [3.5.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.4.0...v3.5.0) (2022-10-08)
+
+
+### Features
+
+* **Tabs:** initial tabs component, props, docs ([abbd3cd](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/abbd3cddae24039cbc9b7d955924431e8fbacf94))
+
 # [3.4.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.3.5...v3.4.0) (2022-10-06)
 
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "decky-frontend-lib",
-  "version": "3.4.0",
+  "version": "3.5.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "decky-frontend-lib",
-      "version": "3.4.0",
+      "version": "3.5.4",
       "license": "LGPL-2.1",
       "dependencies": {
         "minimist": "^1.2.6"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "decky-frontend-lib",
-  "version": "3.4.0",
+  "version": "3.5.4",
   "description": "A library for building decky plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/deck-components/SidebarNavigation.tsx

@@ -2,7 +2,7 @@ import { ReactNode, VFC } from 'react';
 
 import { Module, findModuleChild } from '../webpack';
 
-export interface SidebarNavigationPages {
+export interface SidebarNavigationPage {
   title: string;
   content: ReactNode;
   icon?: ReactNode;
@@ -16,7 +16,7 @@ export interface SidebarNavigationPages {
 
 export interface SidebarNavigationProps {
   title?: string;
-  pages: SidebarNavigationPages[];
+  pages: (SidebarNavigationPage | null)[];
   showTitle?: boolean;
   disableRouteReporting?: boolean;
   page?: string;

src/deck-components/Tabs.tsx

@@ -0,0 +1,74 @@
+import { FC, ReactNode } from 'react';
+import { findModule } from '../webpack';
+import { FooterLegendProps } from './FooterLegend';
+
+/**
+ * Individual tab objects for the Tabs component
+ * 
+ * `id` ID of this tab, can be used with activeTab to auto-focus a given tab
+ * `title` Title shown in the header bar
+ * `renderTabAddon` Return a {@link ReactNode} to render it next to the tab title, i.e. the counts for each tab on the Media page
+ * `content` Content of the tab
+ * `footer` Sets up button handlers and labels
+ */
+export interface Tab {
+    id: string;
+    title: string;
+    renderTabAddon?: () => ReactNode;
+    content: ReactNode;
+    footer?: FooterLegendProps;
+}
+
+/**
+ * Props for the {@link Tabs}
+ * 
+ * `tabs` array of {@link Tab}
+ * `activeTab` tab currently active, needs to be one of the tabs {@link Tab.id}, must be set using a `useState` in the `onShowTab` handler
+ * `onShowTab` Called when the active tab should change, needs to set `activeTab`. See example.
+ * `autoFocusContents` Whether to automatically focus the tab contents or not.
+ * `footer` Sets up button handlers and labels
+ * 
+ * @example
+ * const Component: FC = () => {
+ * const [currentTab, setCurrentTab] = useState<string>("Tab1");
+ *
+ * return (
+ *   <Tabs
+ *     title="Theme Manager"
+ *     activeTab={currentTabRoute}
+ *     onShowTab={(tabID: string) => {
+ *        setCurrentTabRoute(tabID);
+ *     }}
+ *     tabs={[
+ *       {
+ *         title: "Tab 1",
+ *         content: <Tab1Component />,
+ *         id: "Tab1",
+ *       },
+ *       {
+ *         title: "Tab 2",
+ *         content: <Tab2Component />,
+ *         id: "Tab2",
+ *       },
+ *     ]}
+ *   />
+ *  );
+ * };
+ */
+export interface TabsProps {
+    tabs: Tab[];
+    activeTab: string;
+    onShowTab: (tab: string) => void;
+    autoFocusContents?: boolean;
+}
+
+/**
+ * Tabs component as used in the library and media tabs. See {@link TabsProps}
+ */
+export const Tabs = Object.values(findModule((m) => {
+    if (typeof m !== 'object') return false;
+    for (let prop in m) {
+        if (m[prop]?.Unbleed) return true;
+    }
+    return false;
+})).find((x: any) => x?.type?.toString()?.includes("((function(){")) as FC<TabsProps>;

src/deck-components/index.ts

@@ -17,6 +17,7 @@ export * from './SliderField';
 export * from './Spinner';
 export * from './static-classes';
 export * from './SteamSpinner';
+export * from './Tabs';
 export * from './TextField';
 export * from './Toggle';
 export * from './ToggleField';