From 24c7476b2d598d9daf73a58b6ea00a8f587bc5a8 Mon Sep 17 00:00:00 2001 From: atanasster Date: Fri, 5 Jun 2020 21:08:47 -0400 Subject: [PATCH] feat: header to app component, link context --- README.md | 3 ++ core/loader/src/runtimeLoader.ts | 4 ++ core/specification/src/configuration.ts | 2 +- core/store/src/types.ts | 2 +- examples/gatsby/.config/runtime.js | 2 +- integrations/gatsby-theme-stories/README.md | 6 +-- .../src/components/GatsbyLink.tsx | 27 ++++++++++ .../src/components/Layout.tsx | 23 +++++---- .../src/components/Sidebar.tsx | 22 +------- .../gatsby-theme-stories/src/gatsby-node.ts | 8 +-- ui/app-components/src/Link/Link.tsx | 7 +++ ui/app-components/src/Link/LinkContext.tsx | 16 ++++++ ui/app-components/src/Link/index.ts | 2 + ui/app-components/src/Navmenu/Navmenu.tsx | 18 ++----- ui/app-components/src/index.ts | 1 + ui/app/src/Header/Header.tsx | 50 +++++++++++++++++++ ui/app/src/Header/index.ts | 1 + ui/app/src/Sidebar/Sidebar.tsx | 21 +++----- ui/app/src/index.ts | 1 + 19 files changed, 152 insertions(+), 64 deletions(-) create mode 100644 integrations/gatsby-theme-stories/src/components/GatsbyLink.tsx create mode 100644 ui/app-components/src/Link/Link.tsx create mode 100644 ui/app-components/src/Link/LinkContext.tsx create mode 100644 ui/app-components/src/Link/index.ts create mode 100644 ui/app/src/Header/Header.tsx create mode 100644 ui/app/src/Header/index.ts diff --git a/README.md b/README.md index d92ba59d4..a6ba07241 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,7 @@ # Motivation - Create a components development environment with testing as a first-class feature. +- Provide out-of-the-box documentation experience with markdown pages for home page, blogging and general project documentation . - Use smart "super-bundlers" (gatsby, nextjs) to build compact and fast documentation sites. - Decouple the user interface from loading of the 'stories' = modular design. - Do not modify the source files (both story and component files) at instrumentation-time as much as possible to avoid random build/run-time errors. Exception only where absolutely necessary, ie instrumenting coverage or performance profiling probes. @@ -50,6 +51,8 @@ There are many developments that have contributed to the creation of `component- - [docz](https://www.docz.site) has a beautiful architecture and introduced non-proprietary [gatsby](https://www.gatsbyjs.org) build engine. This monorepo was also heavily influenced by the `docz` project repository structure. +- [docusaurus](https://docusaurus.io) creates very clean and effective UX for documentation websites. Provides excellent options for project blogging, versioning, translation and algolia-powered search. + - [abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree) advancements have been greatly responsible for making possible the parsing and analysis features of this library. - [blocks-ui](https://blocks-ui.com) is taking `AST` to a new level by generating and reversing AST to create [react](https://reactjs.org) applications and has been an inspiraton for pushing the enveloppe on our own `AST` work. diff --git a/core/loader/src/runtimeLoader.ts b/core/loader/src/runtimeLoader.ts index 27e06ad03..183d6eba8 100644 --- a/core/loader/src/runtimeLoader.ts +++ b/core/loader/src/runtimeLoader.ts @@ -1,12 +1,16 @@ import { loadConfiguration, extractStories } from '@component-controls/config'; import { stringifyRequest } from 'loader-utils'; import { replaceSource, StoryPath } from './replaceSource'; +import { store } from './store'; module.exports = function(content: string) { //@ts-ignore const params = JSON.parse(this.query.slice(1)); //@ts-ignore const config = loadConfiguration(this.rootContext, params.config); + store.config = config?.optionsFilePath + ? require(config?.optionsFilePath) + : undefined; const stories: StoryPath[] = (config ? extractStories(config) || [] : []).map( fileName => ({ absPath: fileName, diff --git a/core/specification/src/configuration.ts b/core/specification/src/configuration.ts index 8e3e34d93..003c9abb6 100644 --- a/core/specification/src/configuration.ts +++ b/core/specification/src/configuration.ts @@ -60,7 +60,7 @@ export interface Configuration { */ siteImage?: string; /** - * base url path for API documentation pages. Default is "docs" + * base url path for API documentation pages. Default is "docs/" */ basePath?: string; /** diff --git a/core/store/src/types.ts b/core/store/src/types.ts index 49da94fa8..161c94195 100644 --- a/core/store/src/types.ts +++ b/core/store/src/types.ts @@ -48,6 +48,6 @@ export const defaultConfig: Configuration = { 'Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site.', siteLanguage: 'en', author: '@component-controls', - basePath: 'docs', + basePath: 'docs/', }, }; diff --git a/examples/gatsby/.config/runtime.js b/examples/gatsby/.config/runtime.js index ee29d06e5..990be1487 100644 --- a/examples/gatsby/.config/runtime.js +++ b/examples/gatsby/.config/runtime.js @@ -9,7 +9,7 @@ module.exports = { siteDescription: `Component controls stories. Write your components documentation with MDX and JSX. Design, develop, test and review in a single site.`, siteLanguage: `en`, author: `@atanasster`, - basePath: 'docs', + basePath: 'docs/', storySort: (a, b) => { const aDoc = a.split('/')[0]; diff --git a/integrations/gatsby-theme-stories/README.md b/integrations/gatsby-theme-stories/README.md index 1dfe79808..ec03483dc 100644 --- a/integrations/gatsby-theme-stories/README.md +++ b/integrations/gatsby-theme-stories/README.md @@ -20,13 +20,13 @@ # Overview -Accessibility testing plugin using the [axe-core](https://github.com/dequelabs/axe-core) library from [deque](https://www.deque.com/axe/) - -Some of the design goals: +Gatsby theme for documenting your projects with component controls - Gatsby theme quick start. - Full UI configurability with components shadowing. +Special thanks for the inspiration drawn from [Gatsby themes](https://github.com/LekoArts/gatsby-themes). + # Getting Started ## Install diff --git a/integrations/gatsby-theme-stories/src/components/GatsbyLink.tsx b/integrations/gatsby-theme-stories/src/components/GatsbyLink.tsx new file mode 100644 index 000000000..38e824fe8 --- /dev/null +++ b/integrations/gatsby-theme-stories/src/components/GatsbyLink.tsx @@ -0,0 +1,27 @@ +/** @jsx jsx */ +import { FC } from 'react'; +import { jsx, LinkProps, Theme } from 'theme-ui'; +import { Link } from 'gatsby'; + +export const GatsbyLink: FC = ({ + href, + to, + ...props +}) => ( + //@ts-ignore + `4px solid ${t?.colors?.accent}`, + color: 'white', + }, + ':hover': { + backgroundColor: 'shadow', + }, + }} + /> +); diff --git a/integrations/gatsby-theme-stories/src/components/Layout.tsx b/integrations/gatsby-theme-stories/src/components/Layout.tsx index c1d1fa9b0..146a8ddf7 100644 --- a/integrations/gatsby-theme-stories/src/components/Layout.tsx +++ b/integrations/gatsby-theme-stories/src/components/Layout.tsx @@ -3,12 +3,15 @@ import { FC } from 'react'; import { jsx, Flex } from 'theme-ui'; import { Global } from '@emotion/core'; import { ThemeProvider } from '@component-controls/components'; -import { Page, SEO } from '@component-controls/app'; -import { SidebarContextProvider } from '@component-controls/app-components'; +import { Page, SEO, Header } from '@component-controls/app'; +import { + SidebarContextProvider, + LinkContextProvider, +} from '@component-controls/app-components'; import { BlockContextProvider } from '@component-controls/blocks'; import { Store } from '@component-controls/store'; import { Sidebar } from './Sidebar'; -import { Header } from './Header'; +import { GatsbyLink } from './GatsbyLink'; import { PagesConfig } from './types'; import { Footer } from './Footer'; @@ -46,12 +49,14 @@ export const Layout: FC = ({ flexDirection: 'column', }} > -
- - - - -