From c8857e638cc52cbb4ea63a311ee29457751707cb Mon Sep 17 00:00:00 2001 From: atanasster Date: Sun, 31 May 2020 14:56:37 -0400 Subject: [PATCH] feat: display by kind --- core/store/src/Store/Store.ts | 9 +++ core/store/src/types.ts | 7 ++- .../src/components/Layout.tsx | 4 +- .../src/components/Sidebar.tsx | 60 ++++++++----------- .../gatsby-theme-stories/src/gatsby-node.ts | 15 ++--- .../src/templates/StoryPage.tsx | 14 ++--- ui/app-components/package.json | 1 - ui/app-components/src/Navmenu/Navmenu.tsx | 2 +- .../src/Resizer/Resizer.stories.tsx | 35 ----------- ui/app-components/src/Resizer/Resizer.tsx | 58 ------------------ ui/app-components/src/Resizer/index.ts | 1 - ui/app-components/src/index.ts | 1 - 12 files changed, 57 insertions(+), 150 deletions(-) delete mode 100644 ui/app-components/src/Resizer/Resizer.stories.tsx delete mode 100644 ui/app-components/src/Resizer/Resizer.tsx delete mode 100644 ui/app-components/src/Resizer/index.ts diff --git a/core/store/src/Store/Store.ts b/core/store/src/Store/Store.ts index a13ff2776..3589d2ea8 100644 --- a/core/store/src/Store/Store.ts +++ b/core/store/src/Store/Store.ts @@ -106,6 +106,15 @@ export class Store implements StoryStore { return store ? store.stories[storyId] : undefined; }; + /** + s* given a story file title (kind) return a story kind from the store + */ + + getStoryKind = (name: string) => { + const store = this.getStore(); + return store ? store.kinds[name] : undefined; + }; + /** * 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 b2c635b9f..1974d7854 100644 --- a/core/store/src/types.ts +++ b/core/store/src/types.ts @@ -1,4 +1,8 @@ -import { StoriesStore, Story } from '@component-controls/specification'; +import { + StoriesStore, + Story, + StoryKinds, +} from '@component-controls/specification'; /** * store on change observer. @@ -10,6 +14,7 @@ export type StoreObserver = (storyId?: string, propName?: string) => void; export interface StoryStore { getStore: () => StoriesStore | undefined; getStory: (storyId: string) => Story | undefined; + getStoryKind: (name: string) => StoryKinds | undefined; updateStoryProp: ( storyId: string, propName: string, diff --git a/integrations/gatsby-theme-stories/src/components/Layout.tsx b/integrations/gatsby-theme-stories/src/components/Layout.tsx index 2861ceaf1..fba108b22 100644 --- a/integrations/gatsby-theme-stories/src/components/Layout.tsx +++ b/integrations/gatsby-theme-stories/src/components/Layout.tsx @@ -21,6 +21,7 @@ interface LayoutProps { title?: string; storyStore: Store; storyId: string; + kindPath: string; pages: PagesConfig; } @@ -29,6 +30,7 @@ export const Layout: FC = ({ title, storyStore, storyId, + kindPath, }) => { const pages = pagesFn ? pagesFn('') : null; return ( @@ -44,7 +46,7 @@ export const Layout: FC = ({
- + {pages && pages.length > 1 && ( diff --git a/integrations/gatsby-theme-stories/src/components/Sidebar.tsx b/integrations/gatsby-theme-stories/src/components/Sidebar.tsx index 77e41ef62..2dbe9c7ff 100644 --- a/integrations/gatsby-theme-stories/src/components/Sidebar.tsx +++ b/integrations/gatsby-theme-stories/src/components/Sidebar.tsx @@ -3,7 +3,7 @@ import { FC, useState, useMemo, useContext } from 'react'; import { jsx, Input, LinkProps, Box, Theme } from 'theme-ui'; import { graphql, useStaticQuery, Link as GatsbyLink } from 'gatsby'; -import { Story } from '@component-controls/specification'; +import { StoriesKind } from '@component-controls/specification'; import { Sidebar as AppSidebar, ColorMode, @@ -24,25 +24,22 @@ const Link: FC = props => ( sx={{ color: 'inherit', '&.active': { - backgroundColor: 'accent', + borderLeft: (t: Theme) => `4px solid ${t?.colors?.accent}`, color: 'white', }, ':hover': { - backgroundColor: 'accent', + backgroundColor: 'shadow', }, }} /> ); export interface SidebarProps { - storyId?: string; -} - -interface ConsolidateKinds { - [kind: string]: Story[]; + kindPath?: string; } const createMenuItem = ( levels: string[], + allLevels: string[], parent?: MenuItems, item?: MenuItem, ): MenuItem => { @@ -55,56 +52,49 @@ const createMenuItem = ( }; const sibling = parent && parent.find(i => i.id === newItem.id); if (parent && !sibling) { - newItem.items = []; + if (levels.length > 1) { + newItem.items = []; + } else { + newItem.id = allLevels.join('/'); + //@ts-ignore + newItem.to = `/docs/${allLevels.join('/')}`; + } parent.push(newItem); } return createMenuItem( levels.slice(1), + levels, sibling ? sibling.items : newItem.items, newItem, ); }; -export const Sidebar: FC = ({ storyId }) => { +export const Sidebar: FC = ({ kindPath }) => { const { siteTitle } = useSiteMetadata(); const { SidebarClose, responsive } = useContext(SidebarContext); const data = useStaticQuery(graphql` query { - allStory { + allStoryKind { edges { node { - id - kind - name + title } } } } `); - const stories = data.allStory.edges; + const kinds = data.allStoryKind.edges; const menuItems = useMemo(() => { - const kinds: ConsolidateKinds = stories.reduce( - (acc: ConsolidateKinds, { node }: { node: Required }) => { - if (acc[node.kind]) { - return { ...acc, [node.kind]: [...acc[node.kind], node] }; - } - return { ...acc, [node.kind]: [node] }; + const menuItems = kinds.reduce( + (acc: MenuItems, { node: kind }: { node: StoriesKind }) => { + const levels = kind.title.split('/'); + createMenuItem(levels, levels, acc); + return acc; }, - {}, + [], ); - const menuItems = Object.keys(kinds).reduce((acc: MenuItems, key) => { - const stories = kinds[key]; - const levels = key.split('/'); - const kind = createMenuItem(levels, acc); - kind.items = stories.map(story => ({ - id: story.id, - label: story.name, - to: `/stories/${story.id}`, - })); - return acc; - }, []); return menuItems; - }, [stories]); + }, [kinds]); const [search, setSearch] = useState(undefined); return ( @@ -129,7 +119,7 @@ export const Sidebar: FC = ({ storyId }) => { diff --git a/integrations/gatsby-theme-stories/src/gatsby-node.ts b/integrations/gatsby-theme-stories/src/gatsby-node.ts index 9acbab106..602a55516 100644 --- a/integrations/gatsby-theme-stories/src/gatsby-node.ts +++ b/integrations/gatsby-theme-stories/src/gatsby-node.ts @@ -58,15 +58,13 @@ exports.sourceNodes = async function sourceNodes( exports.createPages = async ({ graphql, actions }: CreatePagesArgs) => { const stories = await graphql<{ - allStory: any; + allStoryKind: any; }>(` query { - allStory { + allStoryKind { edges { node { - id - kind - name + title } } } @@ -74,13 +72,12 @@ exports.createPages = async ({ graphql, actions }: CreatePagesArgs) => { `); const { createPage } = actions; if (stories.data) { - stories.data.allStory.edges.forEach(({ node }: any) => { + stories.data.allStoryKind.edges.forEach(({ node }: any) => { createPage({ - path: `stories/${node.id}`, + path: `/docs/${node.title}`, component: require.resolve(`../src/templates/StoryPage.tsx`), context: { - title: node.name, - storyId: node.id, + kind: node.title, }, }); }); diff --git a/integrations/gatsby-theme-stories/src/templates/StoryPage.tsx b/integrations/gatsby-theme-stories/src/templates/StoryPage.tsx index d185b78ec..c377d0914 100644 --- a/integrations/gatsby-theme-stories/src/templates/StoryPage.tsx +++ b/integrations/gatsby-theme-stories/src/templates/StoryPage.tsx @@ -1,8 +1,6 @@ import React, { FC, useMemo } from 'react'; - -import { StoriesStore } from '@component-controls/specification'; import { loadStoryStore, Store } from '@component-controls/store'; -import * as bundle from '@component-controls/webpack-compile/bundle'; +const bundle = require('@component-controls/webpack-compile/bundle'); import { Layout } from '../components/Layout'; import { pages } from '../config/pages'; @@ -10,11 +8,11 @@ import { pages } from '../config/pages'; interface SitePageProps { pathContext: { title: string; - storyId: string; + kind: string; }; } -const SitePage: FC = ({ pathContext: { title, storyId } }) => { +const SitePage: FC = ({ pathContext: { kind } }) => { const storyStore = useMemo( () => new Store({ @@ -23,11 +21,13 @@ const SitePage: FC = ({ pathContext: { title, storyId } }) => { }), [], ); + const docFile = storyStore.getStoryKind(kind); return ( ); diff --git a/ui/app-components/package.json b/ui/app-components/package.json index e19599fb1..1257429b0 100644 --- a/ui/app-components/package.json +++ b/ui/app-components/package.json @@ -34,7 +34,6 @@ "@primer/octicons-react": "^9.6.0", "react": "^16.8.3", "react-dom": "^16.8.3", - "react-simple-resizer": "^2.1.0", "theme-ui": "^0.3.1", "@theme-ui/match-media": "^0.3.1" }, diff --git a/ui/app-components/src/Navmenu/Navmenu.tsx b/ui/app-components/src/Navmenu/Navmenu.tsx index 51252b8f8..de26b7b20 100644 --- a/ui/app-components/src/Navmenu/Navmenu.tsx +++ b/ui/app-components/src/Navmenu/Navmenu.tsx @@ -274,7 +274,7 @@ export const Navmenu: FC = ({ if (activeItem && activeItem.id === id) { background = 'active'; } - const isActiveParent = items && hasActiveChidlren(item, activeItem); + const isActiveParent = hasActiveChidlren(item, activeItem); const content = ( ( - -
-
- -); - -export const minSize = () => ( - -
-
- -); - -export const barSize = () => ( - -
-
- -); - -export const onAfterResize = () => ( - alert('After resize') }}> -
-
- -); diff --git a/ui/app-components/src/Resizer/Resizer.tsx b/ui/app-components/src/Resizer/Resizer.tsx deleted file mode 100644 index 2ea077c00..000000000 --- a/ui/app-components/src/Resizer/Resizer.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/** @jsx jsx */ -import { Children, FC } from 'react'; -import { jsx } from 'theme-ui'; -import { - Container, - ContainerProps, - Section, - SectionProps, - Bar, - BarProps, -} from 'react-simple-resizer'; - -export interface ResizerProps { - /** - * contaoner props - */ - containerProps?: ContainerProps; - /** - * section 1 props - */ - sectionOneProps?: SectionProps; - /** - * section 2 props - */ - sectionTwoProps?: SectionProps; - - /** - * bar props - */ - barProps?: BarProps; -} - -/** - * resizing screen areas component - */ -export const Resizer: FC = ({ - children, - containerProps, - sectionOneProps, - sectionTwoProps, - barProps, -}) => { - const childArr = Children.toArray(children); - if (childArr.length !== 2) { - throw new Error('Resizer should have exactly two children'); - } - return ( - -
{childArr[0]}
- -
{childArr[1]}
- - ); -}; diff --git a/ui/app-components/src/Resizer/index.ts b/ui/app-components/src/Resizer/index.ts deleted file mode 100644 index 03bce537b..000000000 --- a/ui/app-components/src/Resizer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Resizer'; diff --git a/ui/app-components/src/index.ts b/ui/app-components/src/index.ts index 6b6e07555..d270e8f70 100644 --- a/ui/app-components/src/index.ts +++ b/ui/app-components/src/index.ts @@ -2,5 +2,4 @@ export * from './ColorMode'; export * from './Header'; export * from './Keyboard'; export * from './Navmenu'; -export * from './Resizer'; export * from './Sidebar';