v0.3.10

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",
@@ -151,6 +151,7 @@
     "prosemirror-state": "^1.3.3",
     "prosemirror-view": "^1.16.5",
     "ssr-window": "^2.0.0",
+    "typesafe-actions": "^5.1.0",
     "uuid": "^8.3.2"
   }
 }

src/contexts/LayoutContext.ts

@@ -1,10 +1,11 @@
 /* External dependencies */
-import { Dispatch, createContext } from 'react'
+import { createContext, Dispatch } from 'react'
 import { noop } from 'lodash-es'
 
 /* Internal dependencies */
-import { LayoutAction, LayoutState } from '../layout/Client/utils/LayoutReducer'
+import { LayoutState } from '../layout/redux/LayoutReducer'
+import { LayoutActionTypes } from '../layout/redux/LayoutActions'
 
 export const LayoutStateContext = createContext<LayoutState | undefined>(undefined)
 
-export const LayoutDispatchContext = createContext<Dispatch<LayoutAction>>(noop)
+export const LayoutDispatchContext = createContext<Dispatch<LayoutActionTypes>>(noop)

src/hooks/useHeader.ts

@@ -0,0 +1,31 @@
+/* External dependencies */
+import { useEffect } from 'react'
+import LayoutHeaderType from '../types/LayoutHeaderType'
+import { LayoutActions } from '../layout/redux'
+
+/* Internal dependencies */
+import useLayoutDispatch from './useLayoutDispatch'
+
+export default function useHeader(type: LayoutHeaderType) {
+  const dispatch = useLayoutDispatch()
+
+  useEffect(() => {
+    const action = (() => {
+      if (type === LayoutHeaderType.ContentHeader) {
+        return LayoutActions.setShowContentHeader
+      }
+      if (type === LayoutHeaderType.CoverableHeader) {
+        return LayoutActions.setShowCoverableHeader
+      }
+
+      throw new Error(`Invalid Layout Header Type, got ${type}`)
+    })()
+
+    dispatch(action(true))
+
+    return function cleanUp() {
+      dispatch(action(false))
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}

src/hooks/useSideView.ts

@@ -1,15 +1,15 @@
 /* External dependencies */
 import { useCallback } from 'react'
+import { LayoutActions } from '../layout/redux'
 
 /* Internal dependencies */
-import { ActionType } from '../layout/Client/utils/LayoutReducer'
 import useLayoutDispatch from './useLayoutDispatch'
 
 export default function useSideView() {
   const dispatch = useLayoutDispatch()
 
-  const handleShowSideView = useCallback(() => dispatch({ type: ActionType.OPEN_SIDE_VIEW }), [dispatch])
-  const handleCloseSideView = useCallback(() => dispatch({ type: ActionType.CLOSE_SIDE_VIEW }), [dispatch])
+  const handleShowSideView = useCallback(() => dispatch(LayoutActions.openSideView()), [dispatch])
+  const handleCloseSideView = useCallback(() => dispatch(LayoutActions.closeSideView()), [dispatch])
 
   return [
     handleShowSideView,

src/hooks/useSideWidth.ts

@@ -3,17 +3,14 @@ import { useEffect } from 'react'
 
 /* Internal dependencies */
 import { SIDE_FALLBACK_WIDTH } from '../constants/LayoutSizes'
-import { ActionType } from '../layout/Client/utils/LayoutReducer'
+import LayoutActions from '../layout/redux/LayoutActions'
 import useLayoutDispatch from './useLayoutDispatch'
 
 export default function useSideWidth(width: number = SIDE_FALLBACK_WIDTH) {
   const dispatch = useLayoutDispatch()
 
   useEffect(() => {
-    dispatch({
-      type: ActionType.SET_SIDE_WIDTH,
-      payload: width,
-    })
+    dispatch(LayoutActions.setSideWidth(width))
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [])
 

src/index.ts

@@ -33,15 +33,18 @@ export * from './layout/Main'
 export * from './layout/Navigations'
 export * from './layout/Side/SidePanelContent'
 export * from './layout/Side/SideViewContent'
+export * from './layout/redux'
 
 /* Types */
 export type { default as BlocksParserContextType } from './types/BlocksParserContextType'
 export type { UIComponentProps } from './types/ComponentProps'
 export type { ContentComponentProps } from './types/ComponentProps'
 export type { ChildrenComponentProps } from './types/ComponentProps'
+export type { default as LayoutHeaderType } from './types/LayoutHeaderType'
 
 /* Hooks */
 export { default as useLayoutDispatch } from './hooks/useLayoutDispatch'
 export { default as useLayoutState } from './hooks/useLayoutState'
 export { default as useSideWidth } from './hooks/useSideWidth'
 export { default as useSideView } from './hooks/useSideView'
+export { default as useHeader } from './hooks/useHeader'

src/layout/Client/Client.tsx

@@ -9,9 +9,9 @@ import {
   LayoutDispatchContext,
   LayoutStateContext,
 } from '../../contexts/LayoutContext'
+import LayoutReducer, { defaultState } from '../redux/LayoutReducer'
 import { ClientWrapper } from './Client.styled'
 import ClientProps from './Client.types'
-import LayoutReducer, { defaultState } from './utils/LayoutReducer'
 
 export const CLIENT_TEST_ID = 'ch-design-system-client'
 

src/layout/Client/Client.types.ts

@@ -1,6 +1,6 @@
 /* Internal dependencies */
 import { UIComponentProps } from '../../types/ComponentProps'
-import { LayoutState } from './utils/LayoutReducer'
+import { LayoutState } from '../redux/LayoutReducer'
 
 export default interface ClientProps extends UIComponentProps {
   layoutInitialState: LayoutState