feat: new command menu pt 1

.github/workflows/ui-patterns-tests.yml

@@ -0,0 +1,34 @@
+name: UI Patterns Tests
+
+on:
+  pull_request:
+    branches: [master]
+    paths:
+      - 'packages/ui-patterns/**'
+
+# Cancel old builds on new commit for same workflow + branch/PR
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            packages
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test:ui-patterns

package.json

@@ -27,6 +27,7 @@
     "docker:remove": "cd docker && docker compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml rm -vfs",
     "test:docs": "turbo run test --filter=docs",
     "test:ui": "turbo run test --filter=ui",
+	"test:ui-patterns": "turbo run test --filter=ui-patterns",
     "test:studio": "turbo run test --filter=studio",
     "test:studio:watch": "turbo run test --filter=studio -- watch",
     "test:playwright": "npm --prefix playwright-tests run test",

packages/ui-patterns/CommandMenu/internal/Command.tsx

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react'
+
+type ICommand = IActionCommand | IRouteCommand
+
+interface IBaseCommand {
+  id: string
+  name: string
+  value?: string
+  className?: string
+  forceMount?: boolean
+  badge?: () => ReactNode
+  icon?: () => ReactNode
+  /**
+   * Whether the item should be hidden until searched
+   */
+  defaultHidden?: boolean
+  /**
+   * Curerntly unused
+   */
+  keywords?: string[]
+  /**
+   * Currently unused
+   */
+  shortcut?: string
+}
+
+interface IActionCommand extends IBaseCommand {
+  action: () => void
+}
+
+interface IRouteCommand extends IBaseCommand {
+  route: `/${string}` | `http${string}`
+}
+
+export type { ICommand }

packages/ui-patterns/CommandMenu/internal/CommandSection.tsx

@@ -0,0 +1,23 @@
+import { type ICommand } from './Command'
+
+type ICommandSection = {
+  id: string
+  name: string
+  forceMount: boolean
+  commands: Array<ICommand>
+}
+
+const toSectionId = (str: string) => str.toLowerCase().replace(/\s+/g, '-')
+
+const section$new = (
+  name: string,
+  { forceMount = false, id }: { forceMount?: boolean; id?: string } = {}
+): ICommandSection => ({
+  id: id ?? toSectionId(name),
+  name,
+  forceMount,
+  commands: [],
+})
+
+export { section$new }
+export type { ICommandSection }

packages/ui-patterns/CommandMenu/internal/state/commandsState.ts

@@ -0,0 +1,76 @@
+import { proxy } from 'valtio'
+import { type ICommand } from '../Command'
+import { type ICommandSection, section$new } from '../CommandSection'
+
+type OrderSectionInstruction = (sections: ICommandSection[], idx: number) => ICommandSection[]
+type OrderCommandsInstruction = (
+  commands: ICommand[],
+  commandsToInsert: ICommand[]
+) => Array<ICommand>
+type CommandOptions = {
+  deps?: any[]
+  enabled?: boolean
+  forceMountSection?: boolean
+  orderSection?: OrderSectionInstruction
+  orderCommands?: OrderCommandsInstruction
+}
+
+type ICommandsState = {
+  commandSections: ICommandSection[]
+  registerSection: (
+    sectionName: string,
+    commands: ICommand[],
+    options?: CommandOptions
+  ) => () => void
+}
+
+const initCommandsState = () => {
+  const state: ICommandsState = proxy({
+    commandSections: [],
+    registerSection: (sectionName, commands, options) => {
+      let editIndex = state.commandSections.findIndex((section) => section.name === sectionName)
+      if (editIndex === -1) editIndex = state.commandSections.length
+
+      state.commandSections[editIndex] ??= section$new(sectionName)
+
+      if (options?.forceMountSection) state.commandSections[editIndex].forceMount = true
+
+      if (options?.orderCommands) {
+        state.commandSections[editIndex].commands = options.orderCommands(
+          state.commandSections[editIndex].commands,
+          commands
+        )
+      } else {
+        state.commandSections[editIndex].commands.push(...commands)
+      }
+
+      state.commandSections =
+        options?.orderSection?.(state.commandSections, editIndex) ?? state.commandSections
+
+      return () => {
+        const idx = state.commandSections.findIndex((section) => section.name === sectionName)
+        if (idx !== -1) {
+          const filteredCommands = state.commandSections[idx].commands.filter(
+            (command) => !commands.map((cmd) => cmd.id).includes(command.id)
+          )
+          if (!filteredCommands.length) {
+            state.commandSections.splice(idx, 1)
+          } else {
+            state.commandSections[idx].commands = filteredCommands
+          }
+        }
+      }
+    },
+  })
+
+  return state
+}
+
+const orderSectionFirst = (sections: ICommandSection[], idx: number) => [
+  sections[idx],
+  ...sections.slice(0, idx),
+  ...sections.slice(idx + 1),
+]
+
+export { initCommandsState, orderSectionFirst }
+export type { ICommandsState, CommandOptions }