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.jsx → 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>
+)

packages/docz-theme-default/src/components/Highlight.jsx → 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,24 +27,24 @@ export class Highlight extends PureComponent {
     return (
       <pre
         className={className}
-        ref={ref => {
-          this.el = ref
+        ref={node => {
+          this.el = node
         }}
       >
         <code>{this.props.children}</code>
       </pre>
     )
   }
 
-  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} />
+)