Storybook updates (#148)

* setup storybook as repo documentation

* updates to storybook 7 / move the stuff to `./storybook/` in order to facilitate the ci action

* enable scss // better dependencies setup

* importing the root package json worked!

* moving to storybook 7 - components integration

* registers the store

* working hub

* Dashboard overload with multiple notices

* feature: add useControlledState

* Bell icon / Headbar style
updates to storybook 7.0.4

* a better footer button style (also moves the shadow below it)

* fixes the store registration/fetching issues

* cleanup

* removes jsondata from stories assets as suggested by @johnhooks

* filters the jsondata in order to get the first of a type (in this case the first notice of the context "adminbar")

---------

Co-authored-by: John Hooks <[email protected]>

Author: erikyo

.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

.storybook/main.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
 						/>

package-lock.json

@@ -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 ) => {