feat(useAnchoredMenu): add hook (#725)

Co-authored-by: Copilot <[email protected]>

Author: tenphi

.changeset/orange-hounds-beam.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add useEventBus hook to emit global events and subscribe to them.

.changeset/silver-crabs-complain.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add useContextMenu hook to invoke a context menu in the exact place of the click.

.changeset/thin-years-teach.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Add useAnchoredMenu hook to programmatically invoke a menu anchored to the specific element.

.size-limit.cjs

@@ -20,7 +20,7 @@ module.exports = [
         }),
       );
     },
-    limit: '268kB',
+    limit: '270kB',
   },
   {
     name: 'Tree shaking (just a Button)',

jest.config.cjs

@@ -20,9 +20,6 @@ const config = {
     'node_modules/(?!(.pnpm/)?react-hotkeys-hook)',
   ],
   setupFilesAfterEnv: ['./src/test/setup.ts'],
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1',
-  },
 };
 
 module.exports = config;

src/components/Root.tsx

@@ -14,6 +14,7 @@ import {
 } from '../tasty';
 import { TOKENS } from '../tokens';
 import { useViewportSize } from '../utils/react';
+import { EventBusProvider } from '../utils/react/useEventBus';
 
 import { GlobalStyles } from './GlobalStyles';
 import { AlertDialogApiProvider } from './overlays/AlertDialog';
@@ -150,9 +151,11 @@ export function Root(allProps: CubeRootProps) {
             />
             <ModalProvider>
               <PortalProvider value={ref}>
-                <NotificationsProvider rootRef={ref}>
-                  <AlertDialogApiProvider>{children}</AlertDialogApiProvider>
-                </NotificationsProvider>
+                <EventBusProvider>
+                  <NotificationsProvider rootRef={ref}>
+                    <AlertDialogApiProvider>{children}</AlertDialogApiProvider>
+                  </NotificationsProvider>
+                </EventBusProvider>
               </PortalProvider>
             </ModalProvider>
           </RootElement>

src/components/actions/Button/Button.docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/blocks';
+import { Meta, Story, Controls } from '@storybook/blocks';
 import { Button } from './Button';
 import * as ButtonStories from './Button.stories';
 
@@ -17,9 +17,9 @@ A versatile action component that triggers commands and navigates users.
 
 ## Component
 
-<Canvas>
-    <Story of={ButtonStories.Default} />
-</Canvas>
+<Story of={ButtonStories.Default} />
+
+---
 
 ## Properties
 
@@ -59,7 +59,7 @@ The `mods` prop accepts the following modifiers you can override:
 
 ## Variants
 
-### Types
+### Types. `type` prop
 
 - `primary` – Emphasised call-to-action.
 - `secondary` – Less emphasised, alternative action.
@@ -68,14 +68,14 @@ The `mods` prop accepts the following modifiers you can override:
 - `clear` – Text-only variant without background and border.
 - `link` – Styled as a textual link.
 
-### Themes
+### Themes. `theme` prop
 
 - `default` – Brand purple colours.
 - `danger` – Red palette for destructive actions.
 - `success` – Green palette for positive actions.
 - `special` – White palette for dark backgrounds.
 
-### Sizes
+### Sizes. `size` prop
 
 - `small` – Compact height (4×).
 - `medium` – Default height (5×).
@@ -100,9 +100,14 @@ import { IconPlus } from '@tabler/icons-react';
 ### Link Button
 
 ```jsx
+<!-- Navigate to a new page using the router -->
 <Button to="/pricing">Pricing</Button>
 <!-- Use `!` prefix to open in a new tab -->
 <Button to="!/pricing">Pricing</Button>
+<!-- Use `@` prefix to navigate to a new page without using the router -->
+<Button to="@/pricing">Pricing</Button>
+<!-- Use `@` to reload the page -->
+<Button to="@/pricing">Pricing</Button>
 ```
 
 ### Loading State