From 123cc45f763bb439fb2f72e44c7e4f0734b8d62f Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Mon, 23 Apr 2018 12:16:39 -0300
Subject: [PATCH] chore(docz-theme-default): use typescript instead of
 javascript

---
 packages/docz-react/src/index.ts              |   1 +
 packages/docz-theme-default/package.json      |  11 +-
 .../src/components/{Doc.jsx => Doc.tsx}       | 103 +++++++---------
 .../{Highlight.jsx => Highlight.tsx}          |  29 +++--
 .../src/components/Link.tsx                   |  52 ++++++++
 .../src/components/{Main.jsx => Main.tsx}     |   0
 .../src/components/Menu.jsx                   | 113 ------------------
 .../src/components/Menu.tsx                   |  69 +++++++++++
 .../src/components/{View.jsx => View.tsx}     |   3 +-
 .../src/{index.jsx => index.tsx}              |   1 -
 .../src/styles/{colors.js => colors.ts}       |   0
 .../src/styles/{index.js => index.ts}         |   1 +
 .../{prism-github.js => prism-github.ts}      |   1 +
 packages/docz-theme-default/src/types.d.ts    |   2 +
 packages/docz-theme-default/tsconfig.json     |  12 ++
 packages/docz-theme-default/tslint.json       |   3 +
 packages/docz/doc.d.ts                        |   2 +-
 yarn.lock                                     |  16 ++-
 18 files changed, 226 insertions(+), 193 deletions(-)
 rename packages/docz-theme-default/src/components/{Doc.jsx => Doc.tsx} (53%)
 rename packages/docz-theme-default/src/components/{Highlight.jsx => Highlight.tsx} (53%)
 create mode 100644 packages/docz-theme-default/src/components/Link.tsx
 rename packages/docz-theme-default/src/components/{Main.jsx => Main.tsx} (100%)
 delete mode 100644 packages/docz-theme-default/src/components/Menu.jsx
 create mode 100644 packages/docz-theme-default/src/components/Menu.tsx
 rename packages/docz-theme-default/src/components/{View.jsx => View.tsx} (82%)
 rename packages/docz-theme-default/src/{index.jsx => index.tsx} (90%)
 rename packages/docz-theme-default/src/styles/{colors.js => colors.ts} (100%)
 rename packages/docz-theme-default/src/styles/{index.js => index.ts} (98%)
 rename packages/docz-theme-default/src/styles/{prism-github.js => prism-github.ts} (99%)
 create mode 100644 packages/docz-theme-default/src/types.d.ts
 create mode 100644 packages/docz-theme-default/tsconfig.json
 create mode 100644 packages/docz-theme-default/tslint.json

diff --git a/packages/docz-react/src/index.ts b/packages/docz-react/src/index.ts
index c9e042924..242e2583f 100644
--- a/packages/docz-react/src/index.ts
+++ b/packages/docz-react/src/index.ts
@@ -10,3 +10,4 @@ export const doc = (name: string): Doc => {
 
 export { theme } from './theme'
 export { Docs } from './Docs'
+export { DocObj, Section } from 'docz/doc'
diff --git a/packages/docz-theme-default/package.json b/packages/docz-theme-default/package.json
index 997bbede4..da8058498 100644
--- a/packages/docz-theme-default/package.json
+++ b/packages/docz-theme-default/package.json
@@ -5,25 +5,28 @@
   "main": "dist/index.js",
   "umd:main": "dist/index.umd.js",
   "module": "dist/index.m.js",
-  "source": "src/index.jsx",
+  "source": "src/index.tsx",
   "files": [
     "dist/",
     "package.json",
     "README.md"
   ],
   "scripts": {
-    "dev": "libundler watch",
-    "build": "libundler build --c --sm"
+    "dev": "libundler watch --ts",
+    "build": "libundler build --ts --c --sm"
   },
   "dependencies": {
     "classnames": "^2.2.5",
     "docz-react": "^0.0.1",
+    "emotion": "^9.1.2",
     "emotion-normalize": "^7.0.1",
     "history": "^4.7.2",
     "prismjs": "^1.14.0",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
+    "react-emotion": "^9.1.2",
     "react-feather": "^1.1.0",
+    "react-powerplug": "^0.1.5",
     "react-router-dom": "^4.2.2"
   },
   "peerDependencies": {
@@ -36,6 +39,8 @@
     "@babel/plugin-proposal-class-properties": "^7.0.0-beta.44",
     "@babel/preset-env": "^7.0.0-beta.44",
     "@babel/preset-react": "^7.0.0-beta.44",
+    "@types/classnames": "^2.2.3",
+    "@types/prismjs": "^1.9.0",
     "babel-plugin-emotion": "^9.1.0"
   }
 }
diff --git a/packages/docz-theme-default/src/components/Doc.jsx b/packages/docz-theme-default/src/components/Doc.tsx
similarity index 53%
rename from packages/docz-theme-default/src/components/Doc.jsx
rename to packages/docz-theme-default/src/components/Doc.tsx
index f977fc81e..88c27b9f3 100644
--- a/packages/docz-theme-default/src/components/Doc.jsx
+++ b/packages/docz-theme-default/src/components/Doc.tsx
@@ -1,6 +1,8 @@
-import React, { Component } from 'react'
-import * as Icon from 'react-feather'
+import React, { SFC } from 'react'
 import styled from 'react-emotion'
+import { DocObj, Section } from 'docz-react'
+import { Toggle } from 'react-powerplug'
+import * as Icon from 'react-feather'
 
 import { Highlight } from './Highlight'
 import * as colors from '../styles/colors'
@@ -72,70 +74,53 @@ const CodeButton = styled('button')`
   transform: translate(1px, 100%);
 `
 
-class DocSection extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      showingCode: false,
-    }
-  }
-
-  handleToggleCode = () =>
-    this.setState({ showingCode: !this.state.showingCode })
+interface DocSectionProps {
+  section: Section
+}
 
-  render() {
-    const { section } = this.props
-    const { showingCode } = this.state
+interface ToggleProps {
+  toggle: () => void
+  on: boolean
+}
 
-    return (
-      <Section key={section.id}>
-        {section.title && <h3>{section.title}</h3>}
+const DocSection: SFC<DocSectionProps> = ({ section }) => (
+  <Section key={section.id}>
+    {section.title && <h3>{section.title}</h3>}
+    <Toggle initial={false}>
+      {({ toggle, on }: ToggleProps) => (
         <Render>
-          {showingCode ? (
+          {on ? (
             <Highlight language="jsx">{section.code}</Highlight>
           ) : (
             <div>{section.render()}</div>
           )}
-          <CodeButton onClick={this.handleToggleCode}>
+          <CodeButton onClick={toggle}>
             <Icon.Code width={15} />
           </CodeButton>
         </Render>
-      </Section>
-    )
-  }
-}
-
-export class Doc extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      showingCode: false,
-    }
-  }
-
-  handleToggleCode = () =>
-    this.setState({ showingCode: !this.state.showingCode })
-
-  render() {
-    const { id, name, filepath, body, description, sections } = this.props
-    const { showingCode } = this.state
-
-    return (
-      <Container key={id}>
-        <Title>{name}</Title>
-        <Filepath>
-          <IconLink size={15} />
-          <code>{filepath}</code>
-        </Filepath>
-        {description && <Description>{description}</Description>}
-        {sections &&
-          sections.length > 0 &&
-          sections.map(section => (
-            <DocSection key={section.id} section={section} />
-          ))}
-      </Container>
-    )
-  }
-}
+      )}
+    </Toggle>
+  </Section>
+)
+
+export const Doc: SFC<DocObj> = ({
+  id,
+  name,
+  filepath,
+  description,
+  sections,
+}) => (
+  <Container key={id}>
+    <Title>{name}</Title>
+    <Filepath>
+      <IconLink size={15} />
+      <code>{filepath}</code>
+    </Filepath>
+    {description && <Description>{description}</Description>}
+    {sections &&
+      sections.length > 0 &&
+      sections.map(section => (
+        <DocSection key={section.id} section={section} />
+      ))}
+  </Container>
+)
diff --git a/packages/docz-theme-default/src/components/Highlight.jsx b/packages/docz-theme-default/src/components/Highlight.tsx
similarity index 53%
rename from packages/docz-theme-default/src/components/Highlight.jsx
rename to packages/docz-theme-default/src/components/Highlight.tsx
index f533a007e..9f6aa2a74 100644
--- a/packages/docz-theme-default/src/components/Highlight.jsx
+++ b/packages/docz-theme-default/src/components/Highlight.tsx
@@ -3,17 +3,22 @@ import 'prismjs/components/prism-jsx'
 import '../styles/prism-github'
 
 import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
 import cx from 'classnames'
 import prism from 'prismjs'
 
-export class Highlight extends PureComponent {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    language: PropTypes.string,
+interface HighlightProps {
+  language: string
+}
+
+export class Highlight extends PureComponent<HighlightProps> {
+  private el: Element | null
+
+  constructor(props: HighlightProps) {
+    super(props)
+    this.el = null
   }
 
-  render() {
+  public render(): JSX.Element {
     const className = cx({
       'react-prism': true,
       [`language-${this.props.language}`]: !!this.props.language,
@@ -22,8 +27,8 @@ export class Highlight extends PureComponent {
     return (
       <pre
         className={className}
-        ref={ref => {
-          this.el = ref
+        ref={node => {
+          this.el = node
         }}
       >
         <code>{this.props.children}</code>
@@ -31,15 +36,15 @@ export class Highlight extends PureComponent {
     )
   }
 
-  componentDidMount() {
+  public componentDidMount(): void {
     this.highlightCode()
   }
 
-  componentDidUpdate() {
+  public componentDidUpdate(): void {
     this.highlightCode()
   }
 
-  highlightCode() {
-    prism.highlightElement(this.el)
+  private highlightCode(): void {
+    prism.highlightElement(this.el as Element)
   }
 }
diff --git a/packages/docz-theme-default/src/components/Link.tsx b/packages/docz-theme-default/src/components/Link.tsx
new file mode 100644
index 000000000..b9e8c1f77
--- /dev/null
+++ b/packages/docz-theme-default/src/components/Link.tsx
@@ -0,0 +1,52 @@
+import React, { SFC } from 'react'
+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'
+
+const LinkStyled = styled(BaseLink)`
+  position: relative;
+  display: block;
+  padding: 8px 20px;
+  font-size: 14px;
+  font-weight: 400;
+  color: white;
+  background: transparent;
+  border-radius: 3px;
+  transition: background 0.3s;
+
+  &,
+  &:visited {
+    color: ${colors.GRAY_DARK};
+  }
+
+  &.active {
+    background: ${colors.GRAY};
+  }
+
+  &:before {
+    position: absolute;
+    content: '';
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: ${colors.PURPLE};
+    transform: scaleX(0);
+    transform-origin: 0 50%;
+    transition: transform 0.3s;
+  }
+
+  &:hover::before,
+  &.active:before {
+    transform: scaleX(1);
+  }
+`
+
+const isActive = (match: match<any>, location: Location) =>
+  match && match.url === location.pathname
+
+export const Link: SFC<LinkProps> = props => (
+  <LinkStyled isActive={isActive} {...props} />
+)
diff --git a/packages/docz-theme-default/src/components/Main.jsx b/packages/docz-theme-default/src/components/Main.tsx
similarity index 100%
rename from packages/docz-theme-default/src/components/Main.jsx
rename to packages/docz-theme-default/src/components/Main.tsx
diff --git a/packages/docz-theme-default/src/components/Menu.jsx b/packages/docz-theme-default/src/components/Menu.jsx
deleted file mode 100644
index d81e72257..000000000
--- a/packages/docz-theme-default/src/components/Menu.jsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import React from 'react'
-import { NavLink as BaseLink } from 'react-router-dom'
-import { Docs } from 'docz-react'
-import styled, { css } from 'react-emotion'
-
-import * as colors from '../styles/colors'
-
-const BORDER = '#ced6e0'
-
-const Sidebar = styled('div')`
-  padding: 15px 0;
-  width: 200px;
-  height: 100vh;
-  border-right: 1px solid ${colors.BORDER};
-  background: ${colors.GRAY_LIGHT};
-`
-
-const List = styled('ul')`
-  list-style: none;
-  padding: 0;
-  margin: 5px 0;
-
-  & ~ & {
-    margin-top: 10px;
-  }
-`
-
-const Category = styled('li')`
-  padding: 0 20px;
-  margin: 20px 0 5px;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: ${colors.GRAY_MEDIUM};
-`
-
-const LinkStyled = styled(BaseLink)`
-  position: relative;
-  display: block;
-  padding: 8px 20px;
-  font-size: 14px;
-  font-weight: 400;
-  color: white;
-  background: transparent;
-  border-radius: 3px;
-  transition: background 0.3s;
-
-  &,
-  &:visited {
-    color: ${colors.GRAY_DARK};
-  }
-
-  &.active {
-    background: ${colors.GRAY};
-  }
-
-  &:before {
-    position: absolute;
-    content: '';
-    top: 0;
-    left: 0;
-    width: 4px;
-    height: 100%;
-    background: ${colors.PURPLE};
-    transform: scaleX(0);
-    transform-origin: 0 50%;
-    transition: transform 0.3s;
-  }
-
-  &:hover::before,
-  &.active:before {
-    transform: scaleX(1);
-  }
-`
-
-const Link = props => {
-  const isActive = (match, location) => match && match.url === location.pathname
-  return <LinkStyled isActive={isActive} {...props} />
-}
-
-const Links = ({ docs }) =>
-  docs.map(doc => (
-    <li key={doc.id}>
-      <Link to={doc.route}>{doc.name}</Link>
-    </li>
-  ))
-
-const GroupedLinks = ({ categories, docs }) =>
-  categories.map(category => (
-    <React.Fragment key={category}>
-      <Category>{category}</Category>
-      <Links
-        docs={docs.filter(doc => doc.category && doc.category === category)}
-      />
-    </React.Fragment>
-  ))
-
-export const Menu = () => (
-  <Docs>
-    {({ loading, categories, docs }) =>
-      loading ? (
-        <div>loading..</div>
-      ) : (
-        <Sidebar>
-          <List>
-            <Links docs={docs.filter(doc => !doc.category)} />
-            <GroupedLinks categories={categories} docs={docs} />
-          </List>
-        </Sidebar>
-      )
-    }
-  </Docs>
-)
diff --git a/packages/docz-theme-default/src/components/Menu.tsx b/packages/docz-theme-default/src/components/Menu.tsx
new file mode 100644
index 000000000..d7d6c777f
--- /dev/null
+++ b/packages/docz-theme-default/src/components/Menu.tsx
@@ -0,0 +1,69 @@
+import React, { Fragment, SFC } from 'react'
+import { Docs, DocObj } from 'docz-react'
+import styled from 'react-emotion'
+
+import * as colors from '../styles/colors'
+import { Link } from './Link'
+
+const Sidebar = styled('div')`
+  padding: 15px 0;
+  width: 200px;
+  height: 100vh;
+  border-right: 1px solid ${colors.BORDER};
+  background: ${colors.GRAY_LIGHT};
+`
+
+const List = styled('ul')`
+  list-style: none;
+  padding: 0;
+  margin: 5px 0;
+
+  & ~ & {
+    margin-top: 10px;
+  }
+`
+
+const Category = styled('li')`
+  padding: 0 20px;
+  margin: 20px 0 5px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: ${colors.GRAY_MEDIUM};
+`
+
+interface LinksProps {
+  docs: DocObj[]
+}
+
+const Links: SFC<LinksProps> = ({ docs }) => (
+  <Fragment>
+    {docs.map(doc => (
+      <li key={doc.id}>
+        <Link to={doc.route}>{doc.name}</Link>
+      </li>
+    ))}
+  </Fragment>
+)
+
+export const Menu = () => (
+  <Docs>
+    {({ categories, docs }) => (
+      <Sidebar>
+        <List>
+          <Links docs={docs.filter(doc => !doc.category)} />
+          {categories.map(category => (
+            <Fragment key={category}>
+              <Category>{category}</Category>
+              <Links
+                docs={docs.filter(
+                  doc => doc.category && doc.category === category
+                )}
+              />
+            </Fragment>
+          ))}
+        </List>
+      </Sidebar>
+    )}
+  </Docs>
+)
diff --git a/packages/docz-theme-default/src/components/View.jsx b/packages/docz-theme-default/src/components/View.tsx
similarity index 82%
rename from packages/docz-theme-default/src/components/View.jsx
rename to packages/docz-theme-default/src/components/View.tsx
index 0779ee162..6675a38d2 100644
--- a/packages/docz-theme-default/src/components/View.jsx
+++ b/packages/docz-theme-default/src/components/View.tsx
@@ -1,7 +1,6 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import { Route } from 'react-router-dom'
 import { Docs } from 'docz-react'
-import styled from 'react-emotion'
 
 import { Doc } from './Doc'
 
diff --git a/packages/docz-theme-default/src/index.jsx b/packages/docz-theme-default/src/index.tsx
similarity index 90%
rename from packages/docz-theme-default/src/index.jsx
rename to packages/docz-theme-default/src/index.tsx
index 2f4b71191..c396bbe83 100644
--- a/packages/docz-theme-default/src/index.jsx
+++ b/packages/docz-theme-default/src/index.tsx
@@ -2,7 +2,6 @@ import './styles'
 
 import * as React from 'react'
 
-import { injectGlobal } from 'emotion'
 import { BrowserRouter } from 'react-router-dom'
 import { theme } from 'docz-react'
 
diff --git a/packages/docz-theme-default/src/styles/colors.js b/packages/docz-theme-default/src/styles/colors.ts
similarity index 100%
rename from packages/docz-theme-default/src/styles/colors.js
rename to packages/docz-theme-default/src/styles/colors.ts
diff --git a/packages/docz-theme-default/src/styles/index.js b/packages/docz-theme-default/src/styles/index.ts
similarity index 98%
rename from packages/docz-theme-default/src/styles/index.js
rename to packages/docz-theme-default/src/styles/index.ts
index ca384beb2..ea77529c0 100644
--- a/packages/docz-theme-default/src/styles/index.js
+++ b/packages/docz-theme-default/src/styles/index.ts
@@ -9,6 +9,7 @@ const selection = css`
   color: white;
 `
 
+// tslint:disable
 injectGlobal`
   @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
   @import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css');
diff --git a/packages/docz-theme-default/src/styles/prism-github.js b/packages/docz-theme-default/src/styles/prism-github.ts
similarity index 99%
rename from packages/docz-theme-default/src/styles/prism-github.js
rename to packages/docz-theme-default/src/styles/prism-github.ts
index df617690f..fefa846b9 100644
--- a/packages/docz-theme-default/src/styles/prism-github.js
+++ b/packages/docz-theme-default/src/styles/prism-github.ts
@@ -1,5 +1,6 @@
 import { injectGlobal } from 'react-emotion'
 
+// tslint:disable
 injectGlobal`
 /*
 
diff --git a/packages/docz-theme-default/src/types.d.ts b/packages/docz-theme-default/src/types.d.ts
new file mode 100644
index 000000000..bfdc1c6ee
--- /dev/null
+++ b/packages/docz-theme-default/src/types.d.ts
@@ -0,0 +1,2 @@
+declare module 'react-powerplug'
+declare module 'react-feather'
diff --git a/packages/docz-theme-default/tsconfig.json b/packages/docz-theme-default/tsconfig.json
new file mode 100644
index 000000000..87f942c1d
--- /dev/null
+++ b/packages/docz-theme-default/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": false,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "typeRoots": ["node_modules/@types", "src/types"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/**"]
+}
diff --git a/packages/docz-theme-default/tslint.json b/packages/docz-theme-default/tslint.json
new file mode 100644
index 000000000..0946f2096
--- /dev/null
+++ b/packages/docz-theme-default/tslint.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tslint.json"
+}
diff --git a/packages/docz/doc.d.ts b/packages/docz/doc.d.ts
index e09860bd8..dca021158 100644
--- a/packages/docz/doc.d.ts
+++ b/packages/docz/doc.d.ts
@@ -1 +1 @@
-export { Doc, DocObj, Entry } from './dist/Doc'
+export { Doc, DocObj, Entry, Section } from './dist/Doc'
diff --git a/yarn.lock b/yarn.lock
index 3e582f8dc..caaef263c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1286,6 +1286,10 @@
     "@types/events" "*"
     "@types/node" "*"
 
+"@types/classnames@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.3.tgz#3f0ff6873da793870e20a260cada55982f38a9e5"
+
 "@types/clean-css@*":
   version "3.4.30"
   resolved "https://registry.npmjs.org/@types/clean-css/-/clean-css-3.4.30.tgz#0052c136f5248002428e3638b37de4a39818641d"
@@ -1417,6 +1421,10 @@
   version "1.12.0"
   resolved "https://registry.npmjs.org/@types/prettier/-/prettier-1.12.0.tgz#61ed6bdc64386f49c9e1f179cf84ef26ddc4740c"
 
+"@types/prismjs@^1.9.0":
+  version "1.9.0"
+  resolved "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.9.0.tgz#38af9491e2f105079a443703ee675fb27371ec94"
+
 "@types/react-dom@^16.0.5":
   version "16.0.5"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.0.5.tgz#a757457662e3819409229e8f86795ff37b371f96"
@@ -3407,7 +3415,7 @@ emotion-normalize@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/emotion-normalize/-/emotion-normalize-7.0.1.tgz#a34eb5b918050e6855659931bc8bc9324453948e"
 
-emotion@^9.1.1:
+emotion@^9.1.1, emotion@^9.1.2:
   version "9.1.2"
   resolved "https://registry.npmjs.org/emotion/-/emotion-9.1.2.tgz#b89ff80c8449a2eb146a4a0fc87f3e1aefedd253"
   dependencies:
@@ -6573,7 +6581,7 @@ react-dom@^16.3.1:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-react-emotion@^9.1.1:
+react-emotion@^9.1.1, react-emotion@^9.1.2:
   version "9.1.2"
   resolved "https://registry.npmjs.org/react-emotion/-/react-emotion-9.1.2.tgz#fca18bcb827809de2a5d73fb996b717ed4fada02"
   dependencies:
@@ -6613,6 +6621,10 @@ react-markdown@^3.3.0:
     unist-util-visit "^1.3.0"
     xtend "^4.0.1"
 
+react-powerplug@^0.1.5:
+  version "0.1.5"
+  resolved "https://registry.npmjs.org/react-powerplug/-/react-powerplug-0.1.5.tgz#f3dd7612c60efc55b6c7a2ddee284a8bcb6db783"
+
 react-router-dom@^4.2.2:
   version "4.2.2"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"