feat(playgrodd): add module declarations for typescript

packages/playgrodd/.librc

@@ -1,3 +1,3 @@
 {
-  "external": ["react", "react-dom", "react-router-dom", "history"]
+  "external": ["react-router-dom", "history"]
 }

packages/playgrodd/index.d.ts

@@ -0,0 +1,54 @@
+import { SFC, ReactNode, ComponentType } from 'react'
+
+declare module 'playgrodd' {
+  export interface Section {
+    id: string
+    title?: string
+    render: () => ReactNode
+  }
+
+  export interface DocArgs {
+    name: string
+  }
+
+  export interface DocConstructorArgs {
+    name: string
+  }
+
+  export class Doc {
+    public id: string
+    public name: string
+    public docDescription: string | null
+    public sections: Section[]
+    public route: string
+
+    public constructor({ name }: DocConstructorArgs)
+
+    public description(value: string): Doc
+    public section(...args: any[]): Doc
+  }
+
+  export interface DocMap {
+    [key: string]: Doc
+  }
+
+  export type Docs = Doc[]
+
+  /**
+   * Components
+   */
+
+  export function createTheme(WrappedComponent: ComponentType): ComponentType
+
+  export interface PreviewProps {
+    children: (doc: Doc) => ReactNode
+  }
+
+  export const Preview: SFC<PreviewProps>
+
+  export interface DocsProps {
+    children: (docs: Doc[]) => ReactNode
+  }
+
+  export const Docs: SFC<DocsProps>
+}

packages/playgrodd/package.json

@@ -11,8 +11,7 @@
   },
   "scripts": {
     "dev": "libundler watch --ts",
-    "build": "libundler build --ts",
-    "build:prod": "yarn run build --compress --sourcemap",
+    "build": "libundler build --ts --compress --sourcemap",
     "fix": "run-s fix:*",
     "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write",
     "fix:tslint": "tslint --fix --project ."
@@ -27,6 +26,10 @@
     "unstated": "^1.1.0",
     "yargs": "^11.0.0"
   },
+  "peerDependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
   "devDependencies": {
     "@types/babel-traverse": "^6.25.3",
     "@types/babylon": "^6.16.2",

packages/playgrodd/src/components/Docs.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { SFC } from 'react'
+import { Subscribe } from 'unstated'
+import { DocsProps } from 'playgrodd'
+
+import { DocsContainer } from '../container'
+
+export const Docs: SFC<DocsProps> = ({ children }) => (
+  <Subscribe to={[DocsContainer]}>
+    {({ state }) => children(Object.values(state.docs))}
+  </Subscribe>
+)

packages/playgrodd/src/components/Preview.tsx

@@ -1,14 +1,27 @@
 import * as React from 'react'
+import { SFC } from 'react'
 import { Subscribe } from 'unstated'
+import { Route } from 'react-router-dom'
+import { PreviewProps, Doc, Docs } from 'playgrodd'
 
-import { DocumentsContainer } from '../container'
-import { IDoc } from '../documents'
+import { DocsContainer } from '../container'
 
-export const Preview: React.SFC = () => (
-  <Subscribe to={[DocumentsContainer]}>
+export const Preview: SFC<PreviewProps> = ({ children }) => (
+  <Subscribe to={[DocsContainer]}>
     {({ state }) => {
-      const documents: IDoc[] = Object.values(state.documents)
-      return documents.length > 0 && documents.map(doc => doc.getName())
+      const docs: Docs = Object.values(state.docs)
+
+      return (
+        docs.length > 0 &&
+        docs.map((doc: Doc) => (
+          <Route
+            exact
+            key={doc.id}
+            path={doc.route}
+            render={() => children(doc)}
+          />
+        ))
+      )
     }}
   </Subscribe>
 )

packages/playgrodd/src/components/create-theme.tsx

@@ -7,7 +7,7 @@ import { container } from '../container'
 
 export const history: History = createBrowserHistory()
 
-export interface ICreateTheme {
+interface ICreateTheme {
   (WrappedComponent: React.ComponentType): React.ComponentType
 }
 

packages/playgrodd/src/container/index.ts

@@ -1,29 +1,23 @@
 import { Container } from 'unstated'
-import { IDoc, IDocMap } from '../documents'
+import { Doc, DocMap } from 'playgrodd'
 
-export interface DocumentState {
-  documents: IDocMap | undefined
+interface DocsState {
+  docs: DocMap | undefined
 }
 
-export class DocumentsContainer extends Container<DocumentState> {
+export class DocsContainer extends Container<DocsState> {
   constructor() {
     super()
-    this.state = {
-      documents: {},
-    }
+    this.state = { docs: {} }
   }
 
-  public addDoc(doc: IDoc) {
+  public addDoc(doc: Doc) {
     this.setState({
-      documents: Object.assign({}, this.state.documents, {
-        [`${doc.getName()}`]: doc,
+      docs: Object.assign({}, this.state.docs, {
+        [`${doc.name}`]: doc,
       }),
     })
   }
-
-  public getDocuments(): IDocMap | undefined {
-    return this.state.documents
-  }
 }
 
-export const container = new DocumentsContainer()
+export const container = new DocsContainer()

packages/playgrodd/src/docs/index.ts

@@ -1,40 +1,18 @@
 import { ulid } from 'ulid'
+import { Section, DocConstructorArgs } from 'playgrodd'
+
 import { container } from '../container'
 
 const isFn = (value: any): boolean => typeof value === 'function'
 
-export interface IRenderMethod {
-  (): JSX.Element
-}
-
-export interface ISection {
-  id: string
-  render: IRenderMethod
-  title?: string
-}
-
-export interface IDocArgs {
-  name: string
-}
-
-export interface IDoc {
-  description(value: string): Doc
-  section(...args: any[]): Doc
-  getName(): string
-  getDescription(): string | null
-  getSections(): ISection[]
-}
-
-export interface IDocMap {
-  [key: string]: IDoc
-}
-
-export class Doc implements IDoc {
+export class Doc {
+  private _id: string
   private _name: string
   private _description: string | null
-  private _sections: ISection[]
+  private _sections: Section[]
 
-  constructor({ name }: IDocArgs) {
+  constructor({ name }: DocConstructorArgs) {
+    this._id = ulid()
     this._name = name
     this._sections = []
     this._description = null
@@ -45,14 +23,14 @@ export class Doc implements IDoc {
 
   // setters
 
-  public description(value: string) {
+  public description(value: string): Doc {
     this._description = value
     return this
   }
 
-  public section(...args: any[]) {
+  public section(...args: any[]): Doc {
     const [title, renderMethod] = args
-    const render: IRenderMethod = isFn(title) ? title : renderMethod
+    const render = isFn(title) ? title : renderMethod
 
     this._sections.push({
       render,
@@ -65,17 +43,25 @@ export class Doc implements IDoc {
 
   // getters
 
-  public getName() {
+  public get id(): string {
+    return this._id
+  }
+
+  public get name(): string {
     return this._name
   }
 
-  public getDescription() {
+  public get docDescription(): string | null {
     return this._description
   }
 
-  public getSections() {
+  public get sections(): Section[] {
     return this._sections
   }
+
+  public get route(): string {
+    return `/${this._name}`
+  }
 }
 
 export const doc = (name: string): Doc => new Doc({ name })

packages/playgrodd/src/index.ts

@@ -1,3 +1,4 @@
+export { Docs } from './components/Docs'
 export { Preview } from './components/Preview'
 export { createTheme } from './components/create-theme'
-export { doc } from './documents'
+export { doc } from './docs'

packages/playgrodd/src/types.d.ts

@@ -1 +0,0 @@
-declare const __PLAYGRODD_COMPONENTS__: any

packages/playgrodd/tsconfig.json

@@ -3,8 +3,9 @@
   "compilerOptions": {
     "outDir": "dist/main",
     "rootDir": "src",
+    "declaration": false,
     "types": ["node"],
-    "typeRoots": ["node_modules/@types", "src/types"]
+    "typeRoots": ["node_modules/@types", "index.d.ts"]
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules/**"]