Storybook updates

.gitattributes

@@ -1,4 +1,4 @@
 # exclude vendored and generated files
 package-lock.json linguist-generated
-/src/stories/assets/** linguist-vendored
+/storybook/stories/assets/** linguist-vendored
 /docs/** linguist-documentation

src/scripts/components/NoticesArea.js

@@ -46,7 +46,7 @@ export const NoticesArea = ( props ) => {
 	 */
 	if ( context === defaultContext ) {
 		/** Returns the empty notice banner whenever the number of notices is 0 */
-		if ( ! notifications.length ) {
+		if ( ! notifications?.length ) {
 			return <NoticeEmpty size={ 96 } message={ __( 'empty' ) } />;
 		}
 
@@ -65,9 +65,9 @@ export const NoticesArea = ( props ) => {
 						<NoticeHubSectionHeader
 							context={ context }
 							unreadCount={
-								notifications.filter(
+								notifications?.filter(
 									( notice ) => notice.status === 'new'
-								).length
+								).length || 0
 							}
 							isMain={ index === 0 } // the main section is the first one
 						/>

src/scripts/components/NotificationHub.js

@@ -1,5 +1,6 @@
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
+import { useControlledState } from '@wordpress/components/build-module/utils';
 import {
 	ShortcutProvider,
 	store as keyboardShortcutsStore,
@@ -9,9 +10,19 @@ import { Drawer } from './Drawer';
 import { NotificationHubIcon } from './NotificationHubIcon';
 import * as classNames from 'classnames';
 
-export const NotificationHub = () => {
+/**
+ * The notification hub component.
+ *
+ * @param {Object}   props
+ * @param {boolean}  props.active        Externally supplied active state.
+ * @param {boolean=} props.initialActive Optionally initially force the hub into an active state.
+ */
+export const NotificationHub = ( { active, initialActive } ) => {
 	/** Drawer state */
-	const [ isActive, setIsActive ] = useState( false );
+	const [ isActive, setIsActive ] = useControlledState( active, {
+		initial: initialActive === undefined ? false : initialActive,
+		fallback: false,
+	} );
 	const drawerRef = useRef( null );
 
 	/** Register the keyboard shortcut(s) */
@@ -28,7 +39,7 @@ export const NotificationHub = () => {
 	} );
 
 	function toggleDrawer() {
-		setIsActive( ! isActive );
+		setIsActive( ( prev ) => ! prev );
 	}
 
 	const handleOutsideClick = ( event ) => {