feat(docz): add some improvements for default package

package.json

@@ -1,11 +1,17 @@
 {
   "private": true,
   "license": "MIT",
+  "scripts": {
+    "bs": "lerna bootstrap"
+  },
+  "devDependencies": {
+    "lerna": "^2.9.0",
+    "libundler": "^1.3.0",
+    "typescript": "^2.7.2",
+    "trash-cli": "^1.4.0"
+  },
   "workspaces": [
     "packages/*",
     "examples/*"
-  ],
-  "devDependencies": {
-    "lerna": "^2.9.0"
-  }
+  ]
 }

packages/playgrodd-theme-default/.babelrc

@@ -1,13 +1,6 @@
 {
   "presets": [
-    "@babel/preset-env",
+    ["@babel/preset-env", { "modules": false }],
     "@babel/preset-react"
-  ],
-  "plugins": [
-    ["module-resolver", {
-      "alias": {
-        "playgrodd": "../../node_modules/playgrodd/dist/main/index.js"
-      }
-    }]
   ]
 }

packages/playgrodd-theme-default/package.json

@@ -1,18 +1,29 @@
 {
   "name": "playgrodd-theme-default",
   "version": "0.0.1",
-  "main": "./dist/index.js",
   "license": "MIT",
+  "main": "dist/index.js",
+  "umd:main": "dist/index.umd.js",
+  "module": "dist/index.m.js",
+  "source": "src/index.jsx",
   "scripts": {
-    "build": "babel src --out-dir dist"
+    "dev": "libundler watch",
+    "build": "libundler build -s",
+    "build:prod": "yarn run build -p --hash --gzip"
   },
   "dependencies": {
-    "playgrodd": "^0.0.1"
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "peerDependencies": {
+    "playgrodd": "^0.0.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-router-dom": "^4.2.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.42",
+    "@babel/core": "7.0.0-beta.42",
     "@babel/preset-env": "^7.0.0-beta.42",
-    "@babel/preset-react": "^7.0.0-beta.42",
-    "babel-plugin-module-resolver": "^3.1.0"
+    "@babel/preset-react": "^7.0.0-beta.42"
   }
 }

packages/playgrodd-theme-default/src/index.jsx

@@ -1,10 +1,11 @@
 import * as React from 'react'
 import { Link } from 'react-router-dom'
 
-import { Playgrodd, Preview } from 'playgrodd'
+import { createTheme, Playgrodd, Preview } from 'playgrodd'
 
-export const App = () => (
-  <Playgrodd>
+export const Theme = createTheme(() => (
+  <div>
+    <h1>Default theme</h1>
     <ul>
       <li>
         <Link to="/src/Alert">Alert</Link>
@@ -14,5 +15,5 @@ export const App = () => (
       </li>
     </ul>
     <Preview />
-  </Playgrodd>
-)
+  </div>
+))

packages/playgrodd/bin/index.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 const yargs = require('yargs')
-const { server } = require('../dist/main/server')
+const { server } = require('playgrodd-core')
 
 yargs
   .command(

packages/playgrodd/package.json

@@ -2,75 +2,44 @@
   "name": "playgrodd",
   "description": "Blazing fast and zero config React components playground",
   "version": "0.0.1",
-  "main": "./dist/main/index.jsx",
-  "typings": "./dist/main/index.d.ts",
-  "module": "./dist/module/index.jsx",
+  "main": "dist/index.js",
+  "umd:main": "dist/index.umd.js",
+  "module": "dist/index.m.js",
+  "source": "src/index.ts",
   "bin": {
     "playgrodd": "./bin/index.js"
   },
   "scripts": {
-    "build": "run-s clean && run-p build:*",
-    "build:main": "tsc -p tsconfig.json",
-    "build:module": "tsc -p tsconfig.module.json",
+    "dev": "libundler watch",
+    "build": "libundler build",
+    "build:prod": "yarn run build --compress --sourcemap",
     "fix": "run-s fix:*",
     "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write",
-    "fix:tslint": "tslint --fix --project .",
-    "watch": "run-s clean build:main && run-p \"build:main -- -w\"",
-    "clean": "trash dist"
+    "fix:tslint": "tslint --fix --project ."
   },
   "dependencies": {
-    "@babel/core": "7.0.0-beta.42",
-    "@babel/preset-env": "^7.0.0-beta.42",
-    "@babel/preset-react": "^7.0.0-beta.42",
-    "babel-loader": "^8.0.0-beta",
-    "babel-polyfill": "^6.26.0",
-    "babel-traverse": "^6.26.0",
-    "babel-types": "^6.26.0",
-    "babylon": "^6.18.0",
-    "connect-history-api-fallback": "^1.5.0",
-    "express": "^4.16.3",
-    "fast-glob": "^2.2.0",
-    "find-up": "^2.1.0",
-    "history": "^4.7.2",
-    "html-webpack-plugin": "^3.0.7",
-    "invariant": "^2.2.4",
-    "mkdirp": "^0.5.1",
+    "playgrodd-core": "^0.0.1",
     "prop-types": "^15.6.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-router-dom": "^4.2.2",
-    "trash": "^4.3.0",
     "unstated": "^1.1.0",
     "uuid": "^3.2.1",
-    "webpack": "^4.1.1",
-    "webpack-dev-server": "^3.1.1",
-    "webpack-hot-middleware": "^2.21.2",
     "yargs": "^11.0.0"
   },
   "devDependencies": {
     "@types/babel-traverse": "^6.25.3",
     "@types/babylon": "^6.16.2",
-    "@types/connect-history-api-fallback": "^1.3.1",
-    "@types/express": "^4.11.1",
     "@types/find-up": "^2.1.1",
     "@types/html-webpack-plugin": "^2.30.3",
-    "@types/invariant": "^2.2.29",
+    "@types/koa": "^2.0.44",
     "@types/mkdirp": "^0.5.2",
     "@types/node": "^9.4.7",
     "@types/react": "^16.0.40",
     "@types/react-dom": "^16.0.4",
     "@types/react-router-dom": "^4.2.5",
     "@types/trash": "^4.3.0",
-    "@types/uuid": "^3.4.3",
     "@types/webpack": "^4.1.1",
-    "@types/webpack-dev-middleware": "^2.0.1",
-    "@types/webpack-hot-middleware": "^2.16.3",
-    "@types/yargs": "^11.0.0",
-    "npm-run-all": "^4.1.2",
-    "prettier": "^1.11.1",
-    "trash-cli": "^1.4.0",
-    "tslint": "^5.9.1",
-    "tslint-config-prettier": "^1.10.0",
-    "typescript": "^2.7.2"
+    "@types/yargs": "^11.0.0"
   }
 }

packages/playgrodd/src/components/Preview.tsx

@@ -1,35 +1,14 @@
 import * as React from 'react'
 import { Subscribe } from 'unstated'
-import { Route } from 'react-router-dom'
 
-import { Doc } from '../documents'
-import { IComponent } from '../utils/components'
-import { DocumentsContainer } from '../documents/container'
-
-const components = __PLAYGRODD_COMPONENTS__
-const loadDocument = (doc: Doc) => {
-  const { route }: IComponent = components[doc.getName()]
-  const sections = doc.getSections()
-
-  return (
-    <Route
-      exact
-      key={route}
-      path={route}
-      render={() =>
-        sections.map(({ id, title, render: Component }) => (
-          <React.Fragment key={id}>
-            {title && <h2>{title}</h2>}
-            <Component />
-          </React.Fragment>
-        ))
-      }
-    />
-  )
-}
+import { DocumentsContainer } from '../container'
+import { IDoc } from '../documents'
 
 export const Preview: React.SFC = () => (
   <Subscribe to={[DocumentsContainer]}>
-    {({ state }) => state.documents.map(loadDocument)}
+    {({ state }) => {
+      const documents: IDoc[] = Object.values(state.documents)
+      return documents.length > 0 && documents.map(doc => doc.getName())
+    }}
   </Subscribe>
 )

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

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { Router } from 'react-router-dom'
+import { createBrowserHistory, History } from 'history'
+import { Provider } from 'unstated'
+
+import { container } from '../container'
+
+export const history: History = createBrowserHistory()
+
+export interface ICreateTheme {
+  (WrappedComponent: React.ComponentType): React.ComponentType
+}
+
+export const createTheme: ICreateTheme = WrappedComponent => () => (
+  <Router history={history}>
+    <Provider inject={[container]}>
+      <WrappedComponent />
+    </Provider>
+  </Router>
+)

packages/playgrodd/src/container/index.ts

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

packages/playgrodd/src/documents/index.ts

@@ -1,10 +1,5 @@
-import invariant from 'invariant'
-import { v4 } from 'uuid'
-
-export { Preview } from '../components/Preview'
-export { Playgrodd } from '../components/Playgrodd'
-
-import { container } from './container'
+import * as uuid from 'uuid'
+import { container } from '../container'
 
 const isFn = (value: any): boolean => typeof value === 'function'
 
@@ -18,39 +13,56 @@ export interface ISection {
   title?: string
 }
 
-export class Doc {
+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 {
   private _name: string
   private _description: string | null
   private _sections: ISection[]
 
-  constructor(name: string) {
+  constructor({ name }: IDocArgs) {
     this._name = name
     this._sections = []
     this._description = null
 
-    container.add(this)
+    container.addDoc(this)
     return this
   }
 
   // setters
 
-  description(value: string) {
+  public description(value: string) {
     this._description = value
     return this
   }
 
-  section(...args: any[]) {
+  public section(...args: any[]) {
     const [title, renderMethod] = args
     const render: IRenderMethod = isFn(title) ? title : renderMethod
 
-    invariant(
-      !isFn(title) || !isFn(renderMethod),
-      'You need to set a function that will be render your sectoin'
-    )
+    if (!isFn(title) || !isFn(renderMethod)) {
+      throw new Error(
+        'You need to set a function that will render your section'
+      )
+    }
 
     this._sections.push({
       render,
-      id: v4(),
+      id: uuid.v4(),
       ...(title && !isFn(title) && { title }),
     })
 
@@ -59,21 +71,17 @@ export class Doc {
 
   // getters
 
-  public getName(): string {
+  public getName() {
     return this._name
   }
 
-  public getDescription(): string | null {
+  public getDescription() {
     return this._description
   }
 
-  public getSections(): ISection[] {
+  public getSections() {
     return this._sections
   }
 }
 
-export interface IDoc {
-  (name: string): Doc
-}
-
-export const doc: IDoc = name => new Doc(name)
+export const doc = (name: string): Doc => new Doc({ name })

packages/playgrodd/src/index.ts

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

packages/playgrodd/src/types.d.ts

@@ -1 +1,5 @@
+declare module 'uuid' {
+  export function v4(): string
+}
+
 declare const __PLAYGRODD_COMPONENTS__: any