feat: links to docs, doc page and story

core/store/src/Store/Store.ts

@@ -172,6 +172,24 @@ export class Store implements StoryStore {
     return this._firstDoc;
   }
 
+  getDocPath = (name: string): string => {
+    const doc = this.getStoryDoc(name);
+    const basePath = this.config?.options?.basePath || '';
+    return doc ? doc.route || `/${basePath}${name.toLowerCase()}/` : '';
+  };
+
+  getStoryPath = (storyId: string): string => {
+    const story = this.getStory(storyId);
+    if (!story) {
+      return '';
+    }
+    const doc = this.getStoryDoc(story?.doc || '');
+    const basePath = this.config?.options?.basePath || '';
+    return doc
+      ? doc.route || `/${basePath}${doc.title.toLowerCase()}/#${story.id}`
+      : '';
+  };
+
   /**
    * modify story properties, for example controls values.
    * will notify all installed store observers of the changed story.

core/store/src/types.ts

@@ -20,6 +20,8 @@ export interface StoryStore {
   config: Configuration | undefined;
   firstStory: string | undefined;
   firstDoc: string | undefined;
+  getDocPath: (name: string) => string;
+  getStoryPath: (storyId: string) => string;
   updateStoryProp: (
     storyId: string,
     propName: string,

examples/stories/src/stories/home-page.stories.mdx

@@ -6,15 +6,20 @@ menu: false
 ---
 
 import { jsx, Flex, Heading, Text, Button } from 'theme-ui';
+import { DocsLink, StoryLink, DocLink } from '@component-controls/app';
 
 <Flex sx={{ minHeight: '300px', width: '100%', alignItems: 'center', backgroundColor: 'primary', color: 'white' }}>
   <Flex sx={{ flexDirection: 'column', alignItems: 'center', width: '100%'}}>
     <Heading as='h1'>component-controls</Heading>
-    <Text>
+    <Text sx={{ my: 2 }}>
       design -> develop -> test
     </Text>  
-    <Button>Getting started</Button>
+    <DocsLink sx={{ color: 'white'}}>Getting started</DocsLink>
   </Flex>  
 </Flex>
 
-This is some text
+<StoryLink id='introduction-controls--random-number'>Go to Random Number story</StoryLink>
+
+<br/>
+
+<DocLink id='Introduction/MDX'>Go to MDX doc page</DocLink>

ui/app/src/Links/DocLink.tsx

@@ -0,0 +1,24 @@
+import React, { FC, useContext } from 'react';
+import { LinkProps } from 'theme-ui';
+import { Link } from '@component-controls/app-components';
+import { BlockContext } from '@component-controls/blocks';
+
+export interface DocLinkProps {
+  id: string;
+}
+/**
+ * native lonk to a documentation page
+ */
+export const DocLink: FC<DocLinkProps & Omit<LinkProps, 'href'>> = ({
+  children,
+  id,
+  ...props
+}) => {
+  const { storeProvider } = useContext(BlockContext);
+  const href = storeProvider.getDocPath(id);
+  return (
+    <Link href={href} {...props}>
+      {children}
+    </Link>
+  );
+};

ui/app/src/Links/DocsLink.tsx

@@ -0,0 +1,22 @@
+import React, { FC, useContext } from 'react';
+import { LinkProps } from 'theme-ui';
+import { Link } from '@component-controls/app-components';
+import { BlockContext } from '@component-controls/blocks';
+
+/**
+ * native lonk to the documentation
+ */
+export const DocsLink: FC<Omit<LinkProps, 'href'>> = ({
+  children,
+  ...props
+}) => {
+  const { storeProvider } = useContext(BlockContext);
+  const config = storeProvider.config;
+  const { basePath = '' } = config?.options || {};
+
+  return (
+    <Link href={basePath} {...props}>
+      {children}
+    </Link>
+  );
+};

ui/app/src/Links/StoryLink.tsx

@@ -0,0 +1,25 @@
+import React, { FC, useContext } from 'react';
+import { LinkProps } from 'theme-ui';
+import { Link } from '@component-controls/app-components';
+import { BlockContext } from '@component-controls/blocks';
+
+export interface StoryLinkProps {
+  id: string;
+}
+/**
+ * native lonk to a story
+ */
+export const StoryLink: FC<StoryLinkProps & Omit<LinkProps, 'href'>> = ({
+  children,
+  id,
+  ...props
+}) => {
+  const { storeProvider } = useContext(BlockContext);
+  const story = storeProvider.getStory(id);
+  const href = story ? storeProvider.getStoryPath(story.id || '') : '';
+  return (
+    <Link href={href} {...props}>
+      {children}
+    </Link>
+  );
+};

ui/app/src/Links/index.ts

@@ -0,0 +1,3 @@
+export * from './DocLink';
+export * from './DocsLink';
+export * from './StoryLink';

ui/app/src/Page/Page.tsx

@@ -74,7 +74,14 @@ export const BasePage: FC<PageProps> = ({ pagesFn }) => {
 export const Page: FC<PageProps> = props => {
   const { doc } = useStoryContext({ id: '.' });
   if (doc && doc.fullPage && doc.MDXPage) {
-    return <PageContainer maxWidth="100%" padding={0} id="content" />;
+    return (
+      <PageContainer
+        sx={{ flex: 1 }}
+        maxWidth="100%"
+        padding={0}
+        id="content"
+      />
+    );
   }
   return <BasePage {...props} />;
 };

ui/app/src/index.ts

@@ -1,6 +1,7 @@
 export * from './App';
 export * from './Footer';
 export * from './Header';
+export * from './Links';
 export * from './Page';
 export * from './SEO';
 export * from './Sidebar';