feat(commands): add activate()

update command-react tests

needing to do `app.states.enableMapSet()` during jest and storybook seems complicated.
Need to see if it can be improved.

common/config/rush/browser-approved-packages.json

@@ -48,7 +48,7 @@
     },
     {
       "name": "@just-web/app",
-      "allowedCategories": [ "production" ]
+      "allowedCategories": [ "libraries", "production" ]
     },
     {
       "name": "@just-web/command",

components/command-react/package.json

@@ -18,7 +18,7 @@
     "storybook": "start-storybook -p 6006 -s public",
     "test": "react-app-rewired test --watchAll=false",
     "test:visual": "cross-env VISUAL_TEST=1 react-app-rewired test --watchAll=false",
-    "test:watch": "react-scripts test",
+    "test:watch": "react-app-rewired test",
     "verify": "run-p build lint depcheck test",
     "verify:build": "run-s clean build",
     "verify:test": "run-s test test:visual"
@@ -39,6 +39,7 @@
     "react-scripts/**/eslint-config-react-app": "7.0.0"
   },
   "dependencies": {
+    "@just-web/app": "workspace:*",
     "@just-web/commands": "workspace:*",
     "@just-web/platform": "workspace:*",
     "react": "~17.0.2",

components/command-react/src/CommandPalette/CommandPalette.stories.tsx

@@ -1,8 +1,11 @@
+import app from '@just-web/app'
 import { Command, KeyBinding, registerCommand } from '@just-web/commands'
 import { FC } from 'react'
 import { stub } from 'type-plus'
 import CommandPalette, { CommandPaletteProps } from './CommandPalette'
 
+app.states.enableMapSet()
+
 export default {
   component: CommandPalette
 }
@@ -20,15 +23,15 @@ const simpleCmd = cmd({ id: 'core.simpleCommand', description: 'Simple command'
 registerCommand(simpleCmd.id, simpleCmd)
 
 const keyCmd = cmd({
-  description: 'Simple command',
-  id: 'core.simpleCommand',
+  description: 'Command with key',
+  id: 'core.keyedCommand',
   key: 'ctrl+s'
 })
 registerCommand(keyCmd.id, keyCmd)
 
 const macCmd = cmd({
-  description: 'Simple command',
-  id: 'core.simpleCommand',
+  description: 'Command with mac key override',
+  id: 'core.macCommand',
   key: 'ctrl+s',
   mac: 'cmd+s'
 })
@@ -38,12 +41,12 @@ export const NoCommand = () => <Story commands={[]} />
 
 export const OneCommand = () => <Story commands={[simpleCmd]} />
 
-export const WithOneKey = () => <Story commands={[keyCmd, keyCmd, keyCmd]} />
+export const WithKey = () => <Story commands={[keyCmd]} />
 
-export const WithOverrideKeyInMac = () => <Story
-  commands={[macCmd, macCmd, macCmd]}
+export const OverrideMacCommandInMac = () => <Story
+  commands={[keyCmd, macCmd]}
   ctx={{ isMacOS: () => true }} />
 
-export const WithoutOverrideKeyInMac = () => <Story
-  commands={[keyCmd, keyCmd]}
-  ctx={{ isMacOS: () => true }} />
+export const OverrideMacCommandInWindow = () => <Story
+  commands={[keyCmd, macCmd]}
+  ctx={{ isMacOS: () => false }} />

components/command-react/src/CommandPalette/CommandPalette.tsx

@@ -18,7 +18,7 @@ export interface CommandPaletteProps {
 function toPaletteCommands(cmds: CommandPaletteProps['commands'], ctx: CommandPaletteCtx) {
   const m = ctx.isMacOS()
   return cmds.map(c => ({
-    name: c.id,
+    name: c.description,
     key: m ? c.mac ?? c.key : c.key,
     command: () => invokeCommand(c.id)
   }))