chore(docz-theme-default): improve theme

examples/basic/src/components/Alert.jsx

@@ -2,8 +2,6 @@ import React, { Fragment } from 'react'
 import styled from 'react-emotion'
 import t from 'prop-types'
 
-import Button from './Button'
-
 const kinds = {
   info: '#5352ED',
   positive: '#2ED573',
@@ -11,7 +9,7 @@ const kinds = {
   warning: '#FFA502',
 }
 
-const Alert = styled('div')`
+const AlertStyled = styled('div')`
   padding: 15px 20px;
   background: white;
   border-radius: 3px;
@@ -19,8 +17,14 @@ const Alert = styled('div')`
   background: ${({ kind = 'info' }) => kinds[kind]};
 `
 
+const Alert = props => <AlertStyled {...props} />
+
 Alert.propTypes = {
   color: t.oneOf(['info', 'positive', 'negative', 'warning']),
 }
 
+Alert.defaultProps = {
+  color: 'info',
+}
+
 export default Alert

examples/basic/src/components/Alert.mdx

@@ -1,4 +1,4 @@
-import { doc, Playground } from 'docz'
+import { doc, Playground, PropsTable } from 'docz'
 import Alert from './Alert'
 
 export const meta = doc('Alert')
@@ -6,6 +6,8 @@ export const meta = doc('Alert')
 
 # Alert
 
+<PropsTable of={Alert} />
+
 ## Basic usage
 
 <Playground>

packages/docz-theme-default/package.json

@@ -25,7 +25,7 @@
     "react-dom": "^16.3.2",
     "react-emotion": "^9.1.2",
     "react-feather": "^1.1.0",
-    "react-powerplug": "^0.1.5",
+    "react-lightweight-tooltip": "^1.0.0",
     "react-router-dom": "^4.2.2"
   },
   "peerDependencies": {

packages/docz-theme-default/src/components/Container.tsx

@@ -0,0 +1,9 @@
+import { rem } from 'polished'
+import styled from 'react-emotion'
+
+export const Container = styled('div')`
+  width: ${rem(960)};
+  max-width: ${rem(960)};
+  padding: ${rem(50)} ${rem(50)} ${rem(100)} ${rem(50)};
+  margin: 0 auto;
+`

packages/docz-theme-default/src/components/Doc.tsx

@@ -1,57 +0,0 @@
-import React, { SFC } from 'react'
-import { rem } from 'polished'
-import { DocObj } from 'docz'
-import styled from 'react-emotion'
-
-import * as colors from '../styles/colors'
-import { Render } from './Render'
-import { Table } from './Table'
-
-const Container = styled('div')`
-  width: ${rem(960)};
-  max-width: ${rem(960)};
-  padding: ${rem(50)} ${rem(50)} ${rem(100)} ${rem(50)};
-  margin: 0 auto;
-`
-
-const Title = styled('h1')`
-  position: relative;
-  font-size: ${rem(48)};
-  font-weight: 200;
-  margin: ${rem(50)} 0 ${rem(40)};
-
-  &:before {
-    position: absolute;
-    content: '';
-    bottom: 0;
-    left: 0;
-    width: 10%;
-    height: 3px;
-    background: ${colors.purple};
-  }
-`
-
-const Subtitle = styled('h2')`
-  margin: ${rem(50)} 0 ${rem(20)};
-  font-size: ${rem(28)};
-  font-weight: 200;
-`
-
-const H3 = styled('h3')`
-  margin: ${rem(30)} 0 ${rem(20)};
-  font-weight: 600;
-`
-
-export const Doc: SFC<DocObj> = ({ id, component: Component }) => (
-  <Container key={id}>
-    <Component
-      components={{
-        h1: Title,
-        h2: Subtitle,
-        h3: H3,
-        table: Table,
-        Render,
-      }}
-    />
-  </Container>
-)

packages/docz-theme-default/src/components/H1.tsx

@@ -0,0 +1,21 @@
+import { rem } from 'polished'
+import styled from 'react-emotion'
+
+import * as colors from '../styles/colors'
+
+export const H1 = styled('h1')`
+  position: relative;
+  font-size: ${rem(48)};
+  font-weight: 200;
+  margin: ${rem(50)} 0 ${rem(40)};
+
+  &:before {
+    position: absolute;
+    content: '';
+    bottom: 0;
+    left: 0;
+    width: 10%;
+    height: 3px;
+    background: ${colors.purple};
+  }
+`

packages/docz-theme-default/src/components/H2.tsx

@@ -0,0 +1,8 @@
+import { rem } from 'polished'
+import styled from 'react-emotion'
+
+export const H2 = styled('h2')`
+  margin: ${rem(50)} 0 ${rem(20)};
+  font-size: ${rem(28)};
+  font-weight: 200;
+`

packages/docz-theme-default/src/components/H3.tsx

@@ -0,0 +1,7 @@
+import { rem } from 'polished'
+import styled from 'react-emotion'
+
+export const H3 = styled('h3')`
+  margin: ${rem(30)} 0 ${rem(20)};
+  font-weight: 600;
+`

packages/docz-theme-default/src/components/Main.tsx

@@ -1,6 +0,0 @@
-import styled from 'react-emotion'
-
-export const Main = styled('div')`
-  display: flex;
-  height: 100vh;
-`

packages/docz-theme-default/src/components/View.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { Route } from 'react-router-dom'
-import { Docs } from 'docz'
-import styled from 'react-emotion'
-
-import { Doc } from './Doc'
-
-const Wrapper = styled('div')`
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-`
-
-export const View = () => (
-  <Wrapper>
-    <Docs>
-      {({ docs }) =>
-        docs.map(doc => (
-          <Route
-            exact
-            key={doc.id}
-            path={doc.route}
-            render={() => <Doc {...doc} />}
-          />
-        ))
-      }
-    </Docs>
-  </Wrapper>
-)

packages/docz-theme-default/src/components/index.tsx

@@ -0,0 +1,7 @@
+export { Container } from './Container'
+export { H1 } from './H1'
+export { H2 } from './H2'
+export { H3 } from './H3'
+export { Render } from './Render'
+export { Table } from './Table'
+export { Tooltip } from './Tooltip'

packages/docz-theme-default/src/index.tsx

@@ -2,19 +2,34 @@ import './styles'
 import './styles/prism-theme'
 
 import * as React from 'react'
+import styled from 'react-emotion'
 
 import { BrowserRouter } from 'react-router-dom'
-import { theme } from 'docz'
+import { theme, Docs } from 'docz'
 
-import { Main } from './components/Main'
-import { Menu } from './components/Menu'
-import { View } from './components/View'
+import { Menu } from './modules/Sidebar'
+import { Doc } from './modules/Doc'
+
+export const Main = styled('div')`
+  display: flex;
+  height: 100vh;
+`
+
+const View = styled('div')`
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+`
 
 export const Theme = theme(() => (
   <BrowserRouter>
     <Main>
       <Menu />
-      <View />
+      <View>
+        <Docs>
+          {({ docs }) => docs.map(doc => <Doc key={doc.id} {...doc} />)}
+        </Docs>
+      </View>
     </Main>
   </BrowserRouter>
 ))

packages/docz-theme-default/src/modules/Doc/index.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { SFC } from 'react'
+import { Route } from 'react-router-dom'
+import { DocObj } from 'docz'
+
+import * as components from '../../components'
+import { Container } from '../../components'
+
+export const Doc: SFC<DocObj> = ({ id, route, component: Component }) => (
+  <Route
+    exact
+    path={route}
+    render={() => (
+      <Container>
+        <Component
+          components={{
+            h1: components.H1,
+            h2: components.H2,
+            h3: components.H3,
+            table: components.Table,
+            render: components.Render,
+            tooltip: components.Tooltip,
+          }}
+        />
+      </Container>
+    )}
+  />
+)

packages/docz-theme-default/src/modules/Sidebar/Link.tsx

@@ -3,7 +3,7 @@ import { NavLink as BaseLink, LinkProps, match } from 'react-router-dom'
 import { Location } from 'history'
 import styled from 'react-emotion'
 
-import * as colors from '../styles/colors'
+import * as colors from '../../styles/colors'
 
 const LinkStyled = styled(BaseLink)`
   position: relative;

packages/docz-theme-default/src/modules/Sidebar/index.tsx

@@ -3,7 +3,7 @@ import { DocObj } from 'docz'
 import { Docs } from 'docz'
 import styled from 'react-emotion'
 
-import * as colors from '../styles/colors'
+import * as colors from '../../styles/colors'
 import { Link } from './Link'
 
 const Sidebar = styled('div')`

packages/docz-theme-default/src/types.d.ts

@@ -1,2 +1,2 @@
-declare module 'react-powerplug'
 declare module 'react-feather'
+declare module 'react-lightweight-tooltip'

packages/docz/src/components/Playground.tsx

@@ -22,7 +22,7 @@ const DefaultRender: RenderComponent = ({ component, code }) => (
 )
 
 export const Playground: SFC<PlaygroundProps> = ({
-  components: { Render = DefaultRender },
+  components: { render: Render = DefaultRender },
   children,
   __code,
 }) => (