From bf5432af8ebf0d783efc0df5801d9c965790bc0e Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sat, 17 Feb 2024 10:00:17 +1100
Subject: [PATCH 1/2] refactor: Select takes array of options rather than
 object

---
 app/components/DocsLayout.tsx | 15 ++++++++-------
 app/components/Select.tsx     | 21 +++++++++++++++------
 app/projects/form.ts          | 11 ++++++-----
 app/projects/query.ts         | 15 ++++++++-------
 app/projects/ranger.ts        |  7 ++++---
 app/projects/router.ts        |  7 ++++---
 app/projects/store.ts         | 13 +++++++------
 app/projects/table.ts         | 13 +++++++------
 app/projects/virtual.ts       | 13 +++++++------
 9 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx
index ea4369bd..6a6b5b0e 100644
--- a/app/components/DocsLayout.tsx
+++ b/app/components/DocsLayout.tsx
@@ -32,7 +32,8 @@ function useCurrentFramework(frameworks: AvailableOptions) {
 
   return (
     paramsFramework ||
-    (localStorageFramework && localStorageFramework in frameworks
+    (localStorageFramework &&
+    frameworks.find(({ value }) => localStorageFramework === value)
       ? localStorageFramework
       : 'react')
   )
@@ -110,7 +111,7 @@ const useFrameworkConfig = ({
   const frameworkConfig = React.useMemo(() => {
     return {
       label: 'Framework',
-      selected: frameworks[framework] ? framework : 'react',
+      selected: framework,
       available: frameworks,
       onSelect: (option: { label: string; value: string }) => {
         const url = generatePath(match.id, {
@@ -142,18 +143,18 @@ const useVersionConfig = ({
   const versionConfig = React.useMemo(() => {
     const available = availableVersions.reduce(
       (acc: AvailableOptions, version) => {
-        acc[version] = {
+        acc.push({
           label: version,
           value: version,
-        }
+        })
         return acc
       },
-      {
-        latest: {
+      [
+        {
           label: 'Latest',
           value: 'latest',
         },
-      }
+      ]
     )
 
     return {
diff --git a/app/components/Select.tsx b/app/components/Select.tsx
index 57db6fa1..5889968e 100644
--- a/app/components/Select.tsx
+++ b/app/components/Select.tsx
@@ -4,15 +4,16 @@ import { Listbox, Transition } from '@headlessui/react'
 import { HiCheck, HiChevronDown } from 'react-icons/hi'
 import { Form } from '@remix-run/react'
 
-export type AvailableOptions = Record<
-  string,
-  { label: string; value: string; logo?: string }
->
+export type AvailableOptions = Array<{
+  label: string
+  value: string
+  logo?: string
+}>
 
 export type SelectProps = {
   className?: string
   label: string
-  selected: string
+  selected?: string
   available: AvailableOptions
   onSelect: (selected: { label: string; value: string }) => void
 }
@@ -24,7 +25,15 @@ export function Select({
   available,
   onSelect,
 }: SelectProps) {
-  const selectedOption = available[selected]
+  if (!selected) {
+    return null
+  }
+
+  const selectedOption = available.find(({ value }) => selected === value)
+
+  if (!selectedOption) {
+    return null
+  }
 
   return (
     <div className={`top-16 w-full flex-1 ${className}`}>
diff --git a/app/projects/form.ts b/app/projects/form.ts
index e41edfae..4ba8fd77 100644
--- a/app/projects/form.ts
+++ b/app/projects/form.ts
@@ -1,6 +1,7 @@
 import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/form'
 
@@ -12,11 +13,11 @@ export const colorFrom = 'from-yellow-500'
 export const colorTo = 'to-yellow-600'
 export const textColor = 'text-yellow-600'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-  solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
-  vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+  { label: 'Solid', value: 'solid', logo: solidLogo },
+  { label: 'Vue', value: 'vue', logo: vueLogo },
+]
 
 export type Framework = keyof typeof frameworks
 
diff --git a/app/projects/query.ts b/app/projects/query.ts
index d84e8a41..07b114ed 100644
--- a/app/projects/query.ts
+++ b/app/projects/query.ts
@@ -3,6 +3,7 @@ import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import svelteLogo from '~/images/svelte-logo.svg'
 import angularLogo from '~/images/angular-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/query'
 
@@ -14,13 +15,13 @@ export const colorFrom = 'from-red-500'
 export const colorTo = 'to-amber-500'
 export const textColor = 'text-amber-500'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-  solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
-  vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
-  svelte: { label: 'Svelte', logo: svelteLogo, value: 'svelte' },
-  angular: { label: 'Angular', logo: angularLogo, value: 'angular' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+  { label: 'Solid', value: 'solid', logo: solidLogo },
+  { label: 'Vue', value: 'vue', logo: vueLogo },
+  { label: 'Svelte', value: 'svelte', logo: svelteLogo },
+  { label: 'Angular', value: 'angular', logo: angularLogo },
+]
 
 export type Framework = keyof typeof frameworks
 
diff --git a/app/projects/ranger.ts b/app/projects/ranger.ts
index 5132c982..f82dba17 100644
--- a/app/projects/ranger.ts
+++ b/app/projects/ranger.ts
@@ -1,4 +1,5 @@
 import reactLogo from '~/images/react-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/ranger'
 
@@ -10,9 +11,9 @@ export const colorFrom = 'from-lime-500'
 export const colorTo = 'to-emerald-500'
 export const textColor = 'text-emerald-500'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+]
 
 export type Framework = keyof typeof frameworks
 
diff --git a/app/projects/router.ts b/app/projects/router.ts
index 593db9f8..deeaf3e9 100644
--- a/app/projects/router.ts
+++ b/app/projects/router.ts
@@ -1,4 +1,5 @@
 import reactLogo from '~/images/react-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/router'
 
@@ -10,9 +11,9 @@ export const colorFrom = 'from-lime-500'
 export const colorTo = 'to-emerald-500'
 export const textColor = 'text-emerald-500'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+]
 
 export type Framework = keyof typeof frameworks
 
diff --git a/app/projects/store.ts b/app/projects/store.ts
index deef0cfb..b22f377c 100644
--- a/app/projects/store.ts
+++ b/app/projects/store.ts
@@ -2,6 +2,7 @@ import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import angularLogo from '~/images/angular-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/store'
 
@@ -13,12 +14,12 @@ export const colorFrom = 'from-gray-500'
 export const colorTo = 'to-gray-700'
 export const textColor = 'text-gray-700'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-  solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
-  vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
-  angular: { label: 'Angular', logo: angularLogo, value: 'angular' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+  { label: 'Solid', value: 'solid', logo: solidLogo },
+  { label: 'Vue', value: 'vue', logo: vueLogo },
+  { label: 'Angular', value: 'angular', logo: angularLogo },
+]
 
 export type Framework = keyof typeof frameworks
 
diff --git a/app/projects/table.ts b/app/projects/table.ts
index aebb2755..6bcf89d3 100644
--- a/app/projects/table.ts
+++ b/app/projects/table.ts
@@ -2,6 +2,7 @@ import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import svelteLogo from '~/images/svelte-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/table'
 
@@ -13,12 +14,12 @@ export const colorFrom = 'from-teal-500'
 export const colorTo = 'to-blue-600'
 export const textColor = 'text-blue-600'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-  solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
-  svelte: { label: 'Svelte', logo: svelteLogo, value: 'svelte' },
-  vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+  { label: 'Solid', value: 'solid', logo: solidLogo },
+  { label: 'Svelte', value: 'svelte', logo: svelteLogo },
+  { label: 'Vue', value: 'vue', logo: vueLogo },
+]
 
 export type Framework = keyof typeof frameworks
 
diff --git a/app/projects/virtual.ts b/app/projects/virtual.ts
index b855483e..9006b1cc 100644
--- a/app/projects/virtual.ts
+++ b/app/projects/virtual.ts
@@ -2,6 +2,7 @@ import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
 import svelteLogo from '~/images/svelte-logo.svg'
+import type { AvailableOptions } from '~/components/Select'
 
 export const repo = 'tanstack/virtual'
 
@@ -13,12 +14,12 @@ export const colorFrom = 'from-rose-500'
 export const colorTo = 'to-violet-600'
 export const textColor = 'text-violet-600'
 
-export const frameworks = {
-  react: { label: 'React', logo: reactLogo, value: 'react' },
-  solid: { label: 'Solid', logo: solidLogo, value: 'solid' },
-  svelte: { label: 'Svelte', logo: svelteLogo, value: 'svelte' },
-  vue: { label: 'Vue', logo: vueLogo, value: 'vue' },
-} as const
+export const frameworks: AvailableOptions = [
+  { label: 'React', value: 'react', logo: reactLogo },
+  { label: 'Solid', value: 'solid', logo: solidLogo },
+  { label: 'Svelte', value: 'svelte', logo: svelteLogo },
+  { label: 'Vue', value: 'vue', logo: vueLogo },
+]
 
 export type Framework = keyof typeof frameworks
 

From d29d9a6cfd0c962de704886fcb514ca89c1d7e94 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sat, 17 Feb 2024 10:05:11 +1100
Subject: [PATCH 2/2] Remove unnecessary conditionals

---
 app/components/DocsLayout.tsx | 60 +++++++++++++++--------------------
 app/components/Select.tsx     |  4 +--
 2 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx
index 6a6b5b0e..9c955f91 100644
--- a/app/components/DocsLayout.tsx
+++ b/app/components/DocsLayout.tsx
@@ -331,22 +331,18 @@ export function DocsLayout({
           dark:bg-gray-900"
         >
           <div className="flex gap-4">
-            {frameworkConfig?.selected ? (
-              <Select
-                label={frameworkConfig.label}
-                selected={frameworkConfig.selected}
-                available={frameworkConfig.available}
-                onSelect={frameworkConfig.onSelect}
-              />
-            ) : null}
-            {versionConfig?.selected ? (
-              <Select
-                label={versionConfig.label}
-                selected={versionConfig.selected}
-                available={versionConfig.available}
-                onSelect={versionConfig.onSelect}
-              />
-            ) : null}
+            <Select
+              label={frameworkConfig.label}
+              selected={frameworkConfig.selected}
+              available={frameworkConfig.available}
+              onSelect={frameworkConfig.onSelect}
+            />
+            <Select
+              label={versionConfig.label}
+              selected={versionConfig.selected}
+              available={versionConfig.available}
+              onSelect={versionConfig.onSelect}
+            />
           </div>
           {menuItems}
         </div>
@@ -365,24 +361,20 @@ export function DocsLayout({
         />
       </div>
       <div className="flex gap-2 px-4">
-        {frameworkConfig?.selected ? (
-          <Select
-            className="flex-[3_1_0%]"
-            label={frameworkConfig.label}
-            selected={frameworkConfig.selected}
-            available={frameworkConfig.available}
-            onSelect={frameworkConfig.onSelect}
-          />
-        ) : null}
-        {versionConfig?.selected ? (
-          <Select
-            className="flex-[2_1_0%]"
-            label={versionConfig.label}
-            selected={versionConfig.selected}
-            available={versionConfig.available}
-            onSelect={versionConfig.onSelect}
-          />
-        ) : null}
+        <Select
+          className="flex-[3_1_0%]"
+          label={frameworkConfig.label}
+          selected={frameworkConfig.selected}
+          available={frameworkConfig.available}
+          onSelect={frameworkConfig.onSelect}
+        />
+        <Select
+          className="flex-[2_1_0%]"
+          label={versionConfig.label}
+          selected={versionConfig.selected}
+          available={versionConfig.available}
+          onSelect={versionConfig.onSelect}
+        />
       </div>
       <div className="flex-1 flex flex-col gap-4 px-4 whitespace-nowrap overflow-y-auto text-base pb-[300px]">
         {menuItems}
diff --git a/app/components/Select.tsx b/app/components/Select.tsx
index 5889968e..5090db5a 100644
--- a/app/components/Select.tsx
+++ b/app/components/Select.tsx
@@ -13,7 +13,7 @@ export type AvailableOptions = Array<{
 export type SelectProps = {
   className?: string
   label: string
-  selected?: string
+  selected: string
   available: AvailableOptions
   onSelect: (selected: { label: string; value: string }) => void
 }
@@ -25,7 +25,7 @@ export function Select({
   available,
   onSelect,
 }: SelectProps) {
-  if (!selected) {
+  if (available.length === 0) {
     return null
   }