feat: add main package improvements

core/docz/package.json

@@ -25,11 +25,11 @@
   "dependencies": {
     "@loadable/component": "^5.10.1",
     "@mdx-js/react": "^1.0.20",
-    "@reach/router": "^1.2.1",
     "array-sort": "^1.0.0",
     "capitalize": "^2.0.0",
     "docz-core": "^1.2.0",
     "fast-deep-equal": "^2.0.1",
+    "gatsby": "^2.9.4",
     "lodash": "^4.17.11",
     "match-sorter": "^3.1.1",
     "prop-types": "^15.7.2",

core/docz/src/components/Link.tsx

@@ -1,21 +1 @@
-import * as React from 'react'
-import { useCallback } from 'react'
-import { Link as BaseLink, LinkProps, LinkGetProps } from '@reach/router'
-import { omit } from 'lodash/fp'
-
-export { LinkProps }
-export const Link = React.forwardRef<any, LinkProps<any>>(
-  (defaultProps, ref) => {
-    const props = omit(['activeClassName', 'partiallyActive'], defaultProps)
-    const isActive = useCallback(
-      ({ isCurrent }: LinkGetProps) => {
-        return isCurrent ? { className: `${props.className} active` } : {}
-      },
-      [props.className]
-    )
-
-    return <BaseLink {...props} getProps={isActive} ref={ref} />
-  }
-)
-
-Link.displayName = 'Link'
+export { Link, GatsbyLinkProps as LinkProps } from 'gatsby'

core/docz/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from './useComponents'
 export { useConfig, UseConfigObj } from './useConfig'
+export { useCurrentDoc } from './useCurrentDoc'
 export { useDataServer } from './useDataServer'
 export { useDocs } from './useDocs'
 export { useMenus } from './useMenus'

core/docz/src/hooks/useComponents.tsx

@@ -1,14 +1,9 @@
 import * as React from 'react'
 import { useContext, createContext } from 'react'
 import { Fragment, SFC, ComponentType as CT } from 'react'
-import { RouteComponentProps } from '@reach/router'
 
 import { Entry } from '../state'
 
-export type PageProps = RouteComponentProps<any> & {
-  doc: Entry
-}
-
 export interface PlaygroundProps {
   className?: string
   style?: any
@@ -21,46 +16,34 @@ export interface PlaygroundProps {
   scope: Record<string, any>
 }
 
-export type PlaygroundComponent = CT<PlaygroundProps>
+export interface LayoutProps {
+  doc: Entry
+  [key: string]: any
+}
 
 export interface ComponentsMap {
   loading?: CT
-  page?: CT<PageProps>
-  notFound?: CT<RouteComponentProps<any>>
-  playground?: PlaygroundComponent
-  h1?: CT<any> | string
-  h2?: CT<any> | string
-  h3?: CT<any> | string
-  h4?: CT<any> | string
-  h5?: CT<any> | string
-  h6?: CT<any> | string
-  span?: CT<any> | string
-  a?: CT<any> | string
-  ul?: CT<any> | string
-  table?: CT<any> | string
-  pre?: CT<any> | string
-  code?: CT<any> | string
-  inlineCode?: CT<any> | string
+  notFound?: CT
+  layout?: CT<LayoutProps>
+  playground?: CT<PlaygroundProps>
   [key: string]: any
 }
 
-export type NotFoundComponent = CT<RouteComponentProps<any>>
-
-const DefaultNotFound: NotFoundComponent = () => <Fragment>Not found</Fragment>
-const DefaultLoading: SFC = () => <Fragment>Loading</Fragment>
-const DefaultPage: SFC<any> = ({ children }) => <Fragment>{children}</Fragment>
-const DefaultPlayground: PlaygroundComponent = ({ component, code }) => (
+const DefNotFound: SFC = () => <Fragment>Not found</Fragment>
+const DefLoading: SFC = () => <Fragment>Loading</Fragment>
+const DefLayout: SFC = ({ children }) => <Fragment>{children}</Fragment>
+const DefPlayground: SFC<PlaygroundProps> = ({ component, code }) => (
   <Fragment>
     {component}
     {code}
   </Fragment>
 )
 
 const defaultComponents: ComponentsMap = {
-  loading: DefaultLoading,
-  playground: DefaultPlayground,
-  notFound: DefaultNotFound,
-  page: DefaultPage,
+  loading: DefLoading,
+  layout: DefLayout,
+  notFound: DefNotFound,
+  playground: DefPlayground,
 }
 
 const ctx = createContext<ComponentsMap>({})

core/docz/src/hooks/useConfig.ts

@@ -5,18 +5,16 @@ import { doczState, ThemeConfig, Config } from '../state'
 
 export interface UseConfigObj extends Config {
   themeConfig: ThemeConfig
-  linkComponent?: React.ComponentType<any>
 }
 
 export const useConfig = (): UseConfigObj => {
   const state = useContext(doczState.context)
-  const { linkComponent, transform, config, themeConfig = {} } = state
+  const { transform, config, themeConfig = {} } = state
   const newConfig = merge(themeConfig, config ? config.themeConfig : {})
   const transformed = transform ? transform(newConfig) : newConfig
 
   return {
     ...config,
-    linkComponent,
     themeConfig: transformed,
   }
 }

core/docz/src/hooks/useCurrentDoc.tsx

@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { get } from 'lodash/fp'
+
+import { doczState } from '../state'
+
+export const useCurrentDoc = () => {
+  if (typeof window === 'undefined') return null
+  const state = useContext(doczState.context)
+  return get('currentEntry.value', state)
+}

core/docz/src/index.ts

@@ -1,8 +1,6 @@
 export { Playground } from './components/AsyncPlayground'
-export { AsyncRoute, loadRoute } from './components/AsyncRoute'
 export { Link, LinkProps } from './components/Link'
 export { Props, PropsComponentProps } from './components/Props'
-export { Routes } from './components/Routes'
 
 export * from './hooks'
 export { theme } from './theme'

core/docz/src/state.tsx

@@ -1,5 +1,4 @@
 import { create } from './utils/createState'
-import { ComponentType } from 'react'
 
 export interface Heading {
   depth: number
@@ -49,12 +48,12 @@ export type TransformFn = (config: ThemeConfig) => ThemeConfig
 
 export interface Database {
   config: Config
+  currentEntry: Entry
   props?: Props
   entries?: Entries
 }
 
 export interface DoczState extends Database {
-  linkComponent: ComponentType<any>
   themeConfig?: ThemeConfig
   transform?: TransformFn
 }

core/docz/src/theme.tsx

@@ -1,31 +1,25 @@
 import * as React from 'react'
-import { Fragment, SFC, ComponentType as CT } from 'react'
-import { doczState, Database, ThemeConfig, TransformFn } from './state'
+import { SFC, ComponentType as CT } from 'react'
+import { doczState, Database, ThemeConfig, TransformFn, Entry } from './state'
 
 export interface ThemeProps {
   db: Database
-  wrapper?: CT
-  linkComponent?: CT
+  currentEntry: Entry
   children(WrappedComponent: CT): JSX.Element
 }
 
-export type ThemeReturn = (WrappedComponent: CT) => CT<ThemeProps>
-
 export function theme(
   themeConfig: ThemeConfig,
   transform: TransformFn = c => c
-): ThemeReturn {
+): (WrappedComponent: CT) => CT<ThemeProps> {
   return WrappedComponent => {
     const Theme: SFC<ThemeProps> = React.memo(props => {
-      const { linkComponent } = props
-      const { db, children, wrapper: Wrapper = Fragment } = props
-      const initial: any = { ...db, themeConfig, transform, linkComponent }
+      const { db, currentEntry, children } = props
+      const initial: any = { ...db, currentEntry, themeConfig, transform }
 
       return (
         <doczState.Provider initial={initial}>
-          <Wrapper>
-            <WrappedComponent>{children}</WrappedComponent>
-          </Wrapper>
+          <WrappedComponent>{children}</WrappedComponent>
         </doczState.Provider>
       )
     })

core/gatsby-theme-docz/package.json

@@ -41,6 +41,7 @@
     "gatsby-plugin-react-helmet": "^3.0.12",
     "gatsby-plugin-root-import": "^2.0.5",
     "hotkeys-js": "^3.6.11",
+    "is-absolute-url": "^3.0.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "re-resizable": "^5.0.1",