chore(docz-theme-default): use typescript instead of javascript

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'

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"
   }
 }

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)
+interface DocSectionProps {
+  section: Section
+}
 
-    this.state = {
-      showingCode: false,
-    }
-  }
+interface ToggleProps {
+  toggle: () => void
+  on: boolean
+}
 
-  handleToggleCode = () =>
-    this.setState({ showingCode: !this.state.showingCode })
-
-  render() {
-    const { section } = this.props
-    const { showingCode } = this.state
-
-    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>
-    )
-  }
-}
+      )}
+    </Toggle>
+  </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>
-    )
-  }
-}
+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>
+)

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)
   }
 }

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} />
+)

packages/docz-theme-default/src/components/Menu.jsx

@@ -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>
-)

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>
+)

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'
 

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'
 

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');

packages/docz-theme-default/src/styles/prism-github.ts

@@ -1,5 +1,6 @@
 import { injectGlobal } from 'react-emotion'
 
+// tslint:disable
 injectGlobal`
 /*
 

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

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

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/**"]
+}

packages/docz-theme-default/tslint.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tslint.json"
+}

packages/docz/doc.d.ts

@@ -1 +1 @@
-export { Doc, DocObj, Entry } from './dist/Doc'
+export { Doc, DocObj, Entry, Section } from './dist/Doc'

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"