From 892416d3408100e0d6fef4d289901c0fac4d70ee Mon Sep 17 00:00:00 2001 From: atanasster Date: Sun, 7 Jun 2020 04:10:38 -0400 Subject: [PATCH] feat: links to docs, doc page and story --- core/store/src/Store/Store.ts | 18 +++++++++++++ core/store/src/types.ts | 2 ++ .../stories/src/stories/home-page.stories.mdx | 11 +++++--- ui/app/src/Links/DocLink.tsx | 24 ++++++++++++++++++ ui/app/src/Links/DocsLink.tsx | 22 ++++++++++++++++ ui/app/src/Links/StoryLink.tsx | 25 +++++++++++++++++++ ui/app/src/Links/index.ts | 3 +++ ui/app/src/Page/Page.tsx | 9 ++++++- ui/app/src/index.ts | 1 + 9 files changed, 111 insertions(+), 4 deletions(-) create mode 100644 ui/app/src/Links/DocLink.tsx create mode 100644 ui/app/src/Links/DocsLink.tsx create mode 100644 ui/app/src/Links/StoryLink.tsx create mode 100644 ui/app/src/Links/index.ts diff --git a/core/store/src/Store/Store.ts b/core/store/src/Store/Store.ts index 3fa2da3e4..575c50ca2 100644 --- a/core/store/src/Store/Store.ts +++ b/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. diff --git a/core/store/src/types.ts b/core/store/src/types.ts index 690cfb5d2..70c29d601 100644 --- a/core/store/src/types.ts +++ b/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, diff --git a/examples/stories/src/stories/home-page.stories.mdx b/examples/stories/src/stories/home-page.stories.mdx index 9150cb938..224e0b882 100644 --- a/examples/stories/src/stories/home-page.stories.mdx +++ b/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'; component-controls - + design -> develop -> test - + Getting started -This is some text \ No newline at end of file +Go to Random Number story + +
+ +Go to MDX doc page \ No newline at end of file diff --git a/ui/app/src/Links/DocLink.tsx b/ui/app/src/Links/DocLink.tsx new file mode 100644 index 000000000..f436b0173 --- /dev/null +++ b/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> = ({ + children, + id, + ...props +}) => { + const { storeProvider } = useContext(BlockContext); + const href = storeProvider.getDocPath(id); + return ( + + {children} + + ); +}; diff --git a/ui/app/src/Links/DocsLink.tsx b/ui/app/src/Links/DocsLink.tsx new file mode 100644 index 000000000..4a639133f --- /dev/null +++ b/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> = ({ + children, + ...props +}) => { + const { storeProvider } = useContext(BlockContext); + const config = storeProvider.config; + const { basePath = '' } = config?.options || {}; + + return ( + + {children} + + ); +}; diff --git a/ui/app/src/Links/StoryLink.tsx b/ui/app/src/Links/StoryLink.tsx new file mode 100644 index 000000000..c840dd084 --- /dev/null +++ b/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> = ({ + children, + id, + ...props +}) => { + const { storeProvider } = useContext(BlockContext); + const story = storeProvider.getStory(id); + const href = story ? storeProvider.getStoryPath(story.id || '') : ''; + return ( + + {children} + + ); +}; diff --git a/ui/app/src/Links/index.ts b/ui/app/src/Links/index.ts new file mode 100644 index 000000000..7309ec0ea --- /dev/null +++ b/ui/app/src/Links/index.ts @@ -0,0 +1,3 @@ +export * from './DocLink'; +export * from './DocsLink'; +export * from './StoryLink'; diff --git a/ui/app/src/Page/Page.tsx b/ui/app/src/Page/Page.tsx index a96c9450f..582d61167 100644 --- a/ui/app/src/Page/Page.tsx +++ b/ui/app/src/Page/Page.tsx @@ -74,7 +74,14 @@ export const BasePage: FC = ({ pagesFn }) => { export const Page: FC = props => { const { doc } = useStoryContext({ id: '.' }); if (doc && doc.fullPage && doc.MDXPage) { - return ; + return ( + + ); } return ; }; diff --git a/ui/app/src/index.ts b/ui/app/src/index.ts index ee0490163..4794ac067 100644 --- a/ui/app/src/index.ts +++ b/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';