chore: add docContext

ui/app/src/DocPage/DocPage.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
-import { FC, useContext } from 'react';
+import { FC } from 'react';
 import { jsx } from 'theme-ui';
-import { BlockContext } from '@component-controls/blocks';
+import { useDocContext } from '@component-controls/blocks';
 import { PageContainer } from '../PageContainer';
 import { SidebarsPage, DocPageProps } from '../SidebarsPage';
 import { CategoryPage } from '../CategoryPage';
@@ -15,13 +15,10 @@ export const DocPage: FC<Omit<DocPageProps, 'doc'> & { category?: string }> = ({
   category,
   ...props
 }) => {
-  const { storeProvider, docId } = useContext(BlockContext);
+  const { doc } = useDocContext();
   if (category) {
     return <CategoryPage type={type} category={category} />;
   }
-
-  const doc = docId ? storeProvider.getStoryDoc(docId) : undefined;
-
   const hasNoSideBars = doc && !doc.navSidebar && !doc.contextSidebar;
   const isFullPage = doc && doc.fullPage;
   if (hasNoSideBars || isFullPage) {

ui/blocks/src/Container/Container.tsx

@@ -7,7 +7,7 @@ import { Title } from '../Title';
 import { Subtitle } from '../Subtitle';
 import { EditPage } from '../EditPage';
 
-import { useStoryContext } from '../context';
+import { useDocContext } from '../context';
 
 export interface ContainerProps {
   author?: ReactNode;
@@ -16,7 +16,7 @@ export interface ContainerProps {
  * page inner container. will display a like to edit the page and a last updated date.
  */
 export const Container: FC<ContainerProps> = ({ children, author }) => {
-  const { doc } = useStoryContext({ id: '.' });
+  const { doc } = useDocContext();
   return (
     <Box variant="blockpagecontainer.container">
       <Box variant="blockpagecontainer.inforow">

ui/blocks/src/EditPage/EditPage.tsx

@@ -5,14 +5,14 @@ import { FC } from 'react';
 import { Box, Text } from 'theme-ui';
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { ExternalLink } from '@component-controls/components';
-import { useStoryContext } from '../context';
+import { useDocContext } from '../context';
 
 /**
  * Display a Edit this page link to the page source repository.
  * In order for this to work, you need to set up the `repository` field in `package.json`.
  */
 export const EditPage: FC = () => {
-  const { docPackage } = useStoryContext({ id: '.' });
+  const { package: docPackage } = useDocContext();
   return docPackage && docPackage.repository && docPackage.repository.browse ? (
     <Box variant="editpage.container">
       <ExternalLink

ui/blocks/src/Pagination/Pagination.tsx

@@ -5,14 +5,14 @@ import {
   Pagination as PaginationControl,
   PaginationPage,
 } from '@component-controls/components';
-import { useStoryContext } from '../context';
+import { useDocContext } from '../context';
 
 /**
  * displays automatic pagination to the next/previous document of this same type.
  */
 export const Pagination: FC = () => {
-  const { doc, storeProvider } = useStoryContext({ id: '.' });
-  if (doc) {
+  const { doc, storeProvider } = useDocContext();
+  if (doc && storeProvider) {
     const prevDoc = storeProvider.getPrevPage(doc.type, doc.title);
     const nextDoc = storeProvider.getNextPage(doc.type, doc.title);
     const prevLink: PaginationPage | undefined = prevDoc

ui/blocks/src/context/story/StoryContext.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useEffect } from 'react';
+import React, { FC, useState, useEffect, useContext } from 'react';
 import {
   Story,
   Document,
@@ -60,13 +60,10 @@ export const useStoryContext = ({
   id = CURRENT_STORY,
   name,
 }: StoryInputProps): StoryContextProps => {
-  const {
-    storyId: currentId,
-    storeProvider,
-    options,
-    docId,
-  } = React.useContext(BlockContext);
-  const { getStoryData, storyIdFromName } = React.useContext(BlockDataContext);
+  const { storyId: currentId, storeProvider, options, docId } = useContext(
+    BlockContext,
+  );
+  const { getStoryData, storyIdFromName } = useContext(BlockDataContext);
   const storyId = name
     ? storyIdFromName(name)
     : id === CURRENT_STORY
@@ -80,7 +77,7 @@ export const useStoryContext = ({
   }>(getStoryData(storyId, docId));
 
   useEffect(() => {
-    const updateData = (updateId?: string) => {
+    const updateStoryData = (updateId?: string) => {
       if (!updateId || updateId === storyId) {
         const { story, doc, component, docPackage } = getStoryData(
           storyId,
@@ -89,12 +86,13 @@ export const useStoryContext = ({
         setData({ story, doc, component, docPackage });
       }
     };
-    const { story } = data;
-    if (story?.id !== storyId) {
-      updateData(storyId);
+
+    const { story, doc } = data;
+    if (story?.id !== storyId || doc?.title !== docId) {
+      updateStoryData(storyId);
     }
     const onChange = (id?: string) => {
-      updateData(id);
+      updateStoryData(id);
     };
     storeProvider.addObserver(onChange);
     return () => {
@@ -121,3 +119,21 @@ export const StoryContextConsumer: FC<StoryContextConsumer &
   const context = useStoryContext(rest);
   return children ? children(context) || null : null;
 };
+
+export interface DocContextProps {
+  doc?: Document;
+  package?: PackageInfo;
+  storeProvider?: StoryStore;
+}
+export const useDocContext = (): DocContextProps => {
+  const { storeProvider, docId } = useContext(BlockContext);
+  const doc = docId ? storeProvider.getStoryDoc(docId) : undefined;
+  return {
+    doc,
+    storeProvider,
+    package:
+      doc && doc.package
+        ? storeProvider.getStore()?.packages[doc.package]
+        : undefined,
+  };
+};