dev: Refactored dialogs reducer to be more scalable

package.json

@@ -52,6 +52,7 @@
     "react-aria": "nightly",
     "react-aria-components": "nightly",
     "react-dom": "19.0.0-rc-8971381549-20240625",
+    "reselect": "^5.1.1",
     "storybook": "^8.2.0-alpha.10",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",

packages/ui/src/components/Button/Button.tsx

@@ -5,6 +5,7 @@ import { Button as AriaButton, Link as AriaLink } from 'react-aria-components';
 import { fillStyles, emptyStyles, cn, interactiveStyles } from '@do-ob/ui/utility';
 import { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';
 import { Polymorphic } from '@do-ob/ui/types';
+import { useDialogControl } from '@do-ob/ui/hooks';
 
 /**
  * Define tailwind classes for the variants.
@@ -59,9 +60,12 @@ export function Button<
   endContent = null,
   iconify = false,
   href,
+  dialog,
   ...props
 }: ButtonProps & Polymorphic<Element>) {
 
+  const dialogControlProps = useDialogControl(dialog);
+
   const Tag = as ?? (href ? AriaLink : AriaButton);
 
   const isExternal = href && (href.startsWith('http://') || href.startsWith('https://'));
@@ -101,6 +105,7 @@ export function Button<
         className
       )}
       {...linkProps}
+      {...dialogControlProps}
       {...props}
     >
       {startContent && <span className="mr-2">{startContent}</span>}

packages/ui/src/components/Button/Button.types.ts

@@ -13,4 +13,5 @@ export interface ButtonProps {
   className?: string;
   iconify?: boolean;
   href?: string;
+  dialog?: string;
 }

packages/ui/src/components/Drawer/Drawer.stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Drawer } from './Drawer';
 import { Button } from '@do-ob/ui/components';
-import { useDrawerControl } from '@do-ob/ui/hooks';
 
 const meta = {
   component: Drawer,
@@ -15,10 +14,8 @@ type Story = StoryObj<typeof meta>;
 export const Controlled: Story = {
   render: function Render(args) {
 
-    const controllerProps = useDrawerControl('example');
-
     return (<>
-      <Button {...controllerProps}>Click me</Button>
+      <Button dialog="example">Click me</Button>
       <Drawer {...args} />
     </>);
   },

packages/ui/src/components/Drawer/Drawer.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { ModalOverlay, Modal, Dialog } from 'react-aria-components';
+import { ModalOverlay, Modal, Dialog, Heading } from 'react-aria-components';
 // import { cn } from '@do-ob/ui/utility';
 import type { DrawerProps } from './Drawer.types';
 import { nop } from '@do-ob/core';
 import { dialogActions } from '@do-ob/ui/reducer';
-import { useDebounce, useDispatch, useSelector } from '@do-ob/ui/hooks';
-import { useEffect } from 'react';
+import { useDebounce } from '@do-ob/ui/hooks';
+import { use, useEffect } from 'react';
+import { DialogContext, DialogDispatchContext } from '@do-ob/ui/context';
 
 export function Drawer({
   name,
@@ -19,9 +20,9 @@ export function Drawer({
   // ...props
 }: DrawerProps & React.HTMLAttributes<HTMLElement>) {
 
-  const id = `drawer/${name}`;
-  const drawer = useSelector((state) => state.dialog.items[id]) ?? { id, open: false };
-  const dispatch = useDispatch();
+  const id = name;
+  const drawer = use(DialogContext).items[id] ?? { id, open: false };
+  const dispatch = use(DialogDispatchContext);
   const isOpen = useDebounce(!!drawer.open, 300);
 
   const handleOpenChange = (next: boolean) => {
@@ -37,13 +38,10 @@ export function Drawer({
   };
 
   useEffect(() => {
-
     dispatch(dialogActions.register(id));
-
     return () => {
       dispatch(dialogActions.unregister(id));
     };
-
   }, [ dispatch, id ]);
 
   return (
@@ -64,6 +62,7 @@ export function Drawer({
         }}
       >
         <Dialog>
+          <Heading slot="title">{name}</Heading>
           {children}
         </Dialog>
       </Modal>

packages/ui/src/context.ts

@@ -5,8 +5,8 @@ import React from 'react';
 import { ThemeMode } from '@do-ob/ui/types';
 import { nop } from '@do-ob/core';
 import { createContext } from 'react';
-import type { Action, State } from './reducer';
-import { initialState } from './reducer';
+
+export * from './context/DialogsContext';
 
 /**
  * Context properties for the do-ob ui provider
@@ -38,16 +38,6 @@ export interface DoobUiContextProps {
    * Toggle the theme mode.
    */
   modeToggle?: () => void;
-
-  /**
-   * The user interface (ui) state.
-   */
-  state: State;
-
-  /**
-   * The user interface (ui) dispatch.
-   */
-  dispatch: React.Dispatch<Action>;
 }
 
 /**
@@ -59,8 +49,6 @@ export const doobUiContextDefaultProps: DoobUiContextProps = {
   pathname: '',
   mode: 'light',
   modeToggle: nop,
-  state: initialState,
-  dispatch: nop
 };
 
 /**

packages/ui/src/context/DialogsContext.ts

@@ -0,0 +1,8 @@
+import { Dispatch, createContext } from 'react';
+import { reducer as dialogReducer } from '../reducers/dialog.reducer';
+import { DialogAction } from '../reducers/dialog.actions';
+import { nop } from '@do-ob/core';
+
+export const DialogContext = createContext(dialogReducer());
+
+export const DialogDispatchContext = createContext<Dispatch<DialogAction>>(nop);

packages/ui/src/hooks.ts

@@ -4,6 +4,4 @@ export * from './hooks/useTypewriter';
 export * from './hooks/useOverflow';
 export * from './hooks/useDebounce';
 export * from './hooks/usePathname';
-export * from './hooks/useSelector';
-export * from './hooks/useDispatch';
-export * from './hooks/useDrawerControl';
+export * from './hooks/useDialogControl';

packages/ui/src/hooks/useDialogControl.ts

@@ -0,0 +1,15 @@
+import { dialogActions } from '@do-ob/ui/reducer';
+import { use, useCallback } from 'react';
+import { DialogDispatchContext } from '@do-ob/ui/context';
+
+export function useDialogControl(name: string = '') {
+  const dispatch = use(DialogDispatchContext);
+
+  const onPress = useCallback(() => {
+    dispatch(dialogActions.toggle(name));
+  }, [ dispatch, name ]);
+
+  return {
+    onPress,
+  };
+};

packages/ui/src/provider.tsx

@@ -3,9 +3,15 @@
 
 import React from 'react';
 import { RouterProvider } from 'react-aria-components';
-import { DoobUiContext, DoobUiContextProps, doobUiContextDefaultProps } from '@do-ob/ui/context';
+import {
+  DoobUiContext,
+  DoobUiContextProps,
+  doobUiContextDefaultProps,
+  DialogContext,
+  DialogDispatchContext,
+} from '@do-ob/ui/context';
 import { useMode, usePathname } from '@do-ob/ui/hooks';
-import { reducer, initialState } from '@do-ob/ui/reducer';
+import { dialogReducer } from '@do-ob/ui/reducer';
 
 export interface DoobUiProviderProps {
   /**
@@ -43,7 +49,7 @@ export function DoobUiProvider({
   ...props
 }: React.PropsWithChildren<DoobUiProviderProps>) {
 
-  const [ state, dispatch ] = React.useReducer(reducer, initialState);
+  const [ dialogState, dialogDispatch ] = React.useReducer(dialogReducer, dialogReducer());
 
   const pathname = usePathname(pathnameProp);
   const { mode, modeToggle } = useMode(props.mode);
@@ -53,13 +59,15 @@ export function DoobUiProvider({
       <DoobUiContext.Provider value={{
         ...doobUiContextDefaultProps,
         ...props,
-        state,
-        dispatch,
         pathname,
         mode,
         modeToggle
       }}>
-        {children}
+        <DialogContext.Provider value={dialogState}>
+          <DialogDispatchContext.Provider value={dialogDispatch}>
+            {children}
+          </DialogDispatchContext.Provider>
+        </DialogContext.Provider>
       </DoobUiContext.Provider>
     </RouterProvider>
   );

packages/ui/src/reducer.ts

@@ -1,24 +1,3 @@
-import { reducer as dialogReducer } from './reducers/dialog.reducer';
+export { reducer as dialogReducer } from './reducers/dialog.reducer';
 export * as dialogActions from './reducers/dialog.actions';
-import type { DialogState } from './reducers/dialog.reducer';
-import type { DialogAction } from './reducers/dialog.actions';
-
-export interface State {
-  dialog: DialogState;
-}
-
-export type Action = DialogAction;
-
-export const initialState: State = {
-  dialog: dialogReducer()
-};
-
-export function reducer(state: State = initialState, action: unknown = {}) {
-
-  console.log({ action });
-
-  return {
-    ...state,
-    dialog: dialogReducer(state.dialog, action as DialogAction),
-  };
-}
+export type * from './reducers/dialog.reducer';

packages/ui/src/reducers/dialog.actions.ts

@@ -8,6 +8,11 @@ export type DialogAction = {
   payload: {
     id: string;
   }
+} | {
+  type: 'dialog/toggle',
+  payload: {
+    id: string;
+  }
 } | {
   type: 'dialog/open',
   payload: {
@@ -44,6 +49,18 @@ export function unregister(id: string): DialogAction {
   };
 }
 
+/**
+ * Toggles a dialog between open and closed.
+ */
+export function toggle(id: string): DialogAction {
+  return {
+    type: 'dialog/toggle',
+    payload: {
+      id,
+    }
+  };
+}
+
 /**
  * Opens a dialog.
  */

packages/ui/src/reducers/dialog.reducer.ts

@@ -35,6 +35,9 @@ export function reducer(
         }
       };
     case 'dialog/unregister':
+      if(!state.items[payload.id]) {
+        return state;
+      }
       return {
         ...state,
         items: Object.values(state.items).reduce((acc, dialog) => {
@@ -44,7 +47,24 @@ export function reducer(
           return acc;
         }, {} as DialogState['items'])
       };
+    case 'dialog/toggle':
+      if(!state.items[payload.id]) {
+        return state;
+      }
+      return {
+        ...state,
+        items: {
+          ...state.items,
+          [payload.id]: {
+            ...state.items[payload.id],
+            open: !state.items[payload.id].open,
+          }
+        }
+      };
     case 'dialog/open':
+      if(!state.items[payload.id]) {
+        return state;
+      }
       return {
         ...state,
         items: {
@@ -56,6 +76,9 @@ export function reducer(
         }
       };
     case 'dialog/close':
+      if(!state.items[payload.id]) {
+        return state;
+      }
       return {
         ...state,
         items: {