Add docs for react apps

.gitignore

@@ -4,4 +4,7 @@ yarn-error.log
 
 talk.mdx
 draft.mdx
-talk
+talk
+
+.docz
+/docs

fixtures/react-docs/docs.mdx

@@ -0,0 +1,90 @@
+---
+name: CodeSurfer
+route: /
+---
+
+import CodeSurfer from '../../packages/code-surfer/src/code-surfer'
+import { Playground, PropsTable } from 'docz'
+
+
+# CodeSurfer
+
+If you want to use CodeSurfer from a React App you are in the right place. If you want to use it from mdx-deck go to the [CodeSurfer home](https://codesurfer.js.org).
+
+## Install
+
+Add `code-surfer` to your dependencies:
+
+```sh
+$ yarn add code-surfer
+```
+
+Also, if you want to show code directly from a file (and you are using webpack), add `raw-loader` as a dev dependency:
+```sh
+$ yarn add --dev raw-loader
+```
+
+## Usage
+
+```jsx
+import React from "react";
+import ReactDOM from "react-dom";
+import CodeSurfer from "code-surfer";
+
+const code = `...`;
+
+const App = () => (
+  <div style={{height: 100}}>
+    <CodeSurfer code={code} step={{ lines: [1] }} />
+  </div>
+);
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(<App />, rootElement);
+```
+
+Or load the code from a file with webpack:
+
+```jsx
+const App = () => (
+  <div style={{height: 100}}>
+    <CodeSurfer code={require("!raw-loader!./my-code.js")} step={{ lines: [1] }} />
+  </div>
+);
+```
+
+## Props
+
+<PropsTable of={CodeSurfer} />
+
+## Playground
+
+<Playground>
+  {() => {
+    const code = [
+      "function myFunc() {",
+      "  this.myVar = 0;",
+      "  setTimeout(() => {",
+      "    this.myVar++;",
+      "    console.log(this.myVar) // 1",
+      "  }, 0);",
+      "}"
+    ].join("\\n");
+
+    return (
+      <div style={{ height: '150px', background: '#222' }}>
+        <CodeSurfer
+          code={code}
+          step={{
+            lines: [1, 7],
+            range: [3, 5],
+            tokens: { 2: [3, 4, 6] },
+          }}
+          showNumbers
+          dark
+        />
+      </div>
+    );
+  }}
+</Playground>
+

fixtures/react-docs/doczrc.js

@@ -0,0 +1,7 @@
+export default {
+  title: "CodeSurfer for React",
+  src: "../..",
+  files: "fixtures/react-docs/**/*.mdx",
+  base: "/react-docs/",
+  dest: "./dist"
+};

fixtures/react-docs/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "react-docs-fixture",
+  "version": "0.4.1",
+  "author": "pomber",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "start": "docz dev",
+    "build": "docz build"
+  },
+  "dependencies": {
+    "code-surfer": "^0.4.1",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.2"
+  },
+  "devDependencies": {
+    "docz": "^0.11.0"
+  }
+}

packages/code-surfer/package.json

@@ -8,7 +8,7 @@
   ],
   "scripts": {
     "build": "babel ./src -d ./dist --ignore test.js",
-    "build:watch": "yarn build --watch",
+    "build:watch": "yarn build --watch --source-maps",
     "test": "jest",
     "test:watch": "jest --watchAll"
   },
@@ -17,6 +17,7 @@
     "prism-react-renderer": "^0.1.3"
   },
   "peerDependencies": {
+    "prop-types": ">=15.0.0",
     "react": ">=15.0.0"
   },
   "devDependencies": {

packages/code-surfer/src/code-surfer.js

@@ -5,6 +5,7 @@ import lightTheme from "prism-react-renderer/themes/duotoneLight";
 import * as Scroller from "./scroller";
 import { css } from "glamor";
 import getTokensPerLine from "./step-parser";
+import PropTypes from "prop-types";
 
 const selectedRules = css({
   opacity: 1,
@@ -83,4 +84,31 @@ const CodeSurfer = ({
   );
 };
 
+CodeSurfer.propTypes = {
+  /** The code you want to show */
+  code: PropTypes.string.isRequired,
+  /** The lines/tokens to highlight */
+  step: PropTypes.shape({
+    lines: PropTypes.arrayOf(PropTypes.number),
+    range: PropTypes.arrayOf(PropTypes.number),
+    ranges: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
+    tokens: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.number))
+  }),
+  /** Any language supported in [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) */
+  lang: PropTypes.string,
+  /** Whether to show line numbers or not */
+  showNumbers: PropTypes.bool,
+  /** If you have a dark background set this prop to true (it will use the default dark theme) */
+  dark: PropTypes.bool,
+  /** Use a theme from react-prism-renderer */
+  theme: PropTypes.object,
+  /** Use your own font-family */
+  monospace: PropTypes.string
+};
+
+CodeSurfer.defaultProps = {
+  lang: "jsx",
+  step: {}
+};
+
 export default CodeSurfer;

website/public/index.html

@@ -13,6 +13,7 @@
   <a href="sample/">Sample</a>
   <a href="theming/">Theming</a>
   <a href="storybook/">Storybook</a>
+  <a href="react-docs/">React Docs</a>
 
 </body>