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.title &&

{section.title}

} +const DocSection: SFC = ({ section }) => ( +
+ {section.title &&

{section.title}

} + + {({ toggle, on }: ToggleProps) => ( - {showingCode ? ( + {on ? ( {section.code} ) : (
{section.render()}
)} - + -
- ) - } -} - -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 ( - - {name} - - - {filepath} - - {description && {description}} - {sections && - sections.length > 0 && - sections.map(section => ( - - ))} - - ) - } -} + )} + +
+) + +export const Doc: SFC = ({ + id, + name, + filepath, + description, + sections, +}) => ( + + {name} + + + {filepath} + + {description && {description}} + {sections && + sections.length > 0 && + sections.map(section => ( + + ))} + +) 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 { + 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 ( 
 {
-          this.el = ref
+        ref={node => {
+          this.el = node
         }}
       >
         {this.props.children}
@@ -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, location: Location) =>
+  match && match.url === location.pathname
+
+export const Link: SFC = 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 
-}
-
-const Links = ({ docs }) =>
-  docs.map(doc => (
-    
  • 
-      {doc.name}
-    
    • 
-  ))
-
-const GroupedLinks = ({ categories, docs }) =>
-  categories.map(category => (
-    
-      {category}
-       doc.category && doc.category === category)}
-      />
-    
-  ))
-
-export const Menu = () => (
-  
-    {({ loading, categories, docs }) =>
-      loading ? (
-        
    loading..
    
-      ) : (
-        
-          
-             !doc.category)} />
-            
-          
-        
-      )
-    }
-      
-)
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 = ({ docs }) => (
+  
+    {docs.map(doc => (
+      
  • 
+        {doc.name}
+      
    • 
+    ))}
+      
+)
+
+export const Menu = () => (
+  
+    {({ categories, docs }) => (
+      
+        
+           !doc.category)} />
+          {categories.map(category => (
+            
+              {category}
+               doc.category && doc.category === category
+                )}
+              />
+            
+          ))}
+        
+      
+    )}
+  
+)
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"