feat(playgrodd-theme-default): use typescript instead of javascript

packages/playgrodd-theme-default/.librc

@@ -0,0 +1,3 @@
+{
+  "external": ["react", "react-dom", "react-router-dom"]
+}

packages/playgrodd-theme-default/package.json

@@ -5,22 +5,21 @@
   "main": "dist/index.js",
   "umd:main": "dist/index.umd.js",
   "module": "dist/index.m.js",
-  "source": "src/index.jsx",
+  "source": "src/index.tsx",
   "scripts": {
     "dev": "libundler watch",
     "build": "libundler build -s",
     "build:prod": "yarn run build -p --hash --gzip"
   },
   "dependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
-  },
-  "peerDependencies": {
     "playgrodd": "^0.0.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-router-dom": "^4.2.2"
   },
+  "peerDependencies": {
+    "playgrodd": "^0.0.1"
+  },
   "devDependencies": {
     "@babel/core": "7.0.0-beta.42",
     "@babel/preset-env": "^7.0.0-beta.42",

packages/playgrodd-theme-default/src/components/List.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+import { Docs } from 'playgrodd'
+
+export const List = () => (
+  <Docs>
+    {docs => (
+      <ul>
+        {docs.map(doc => (
+          <li key={doc.id}>
+            <Link to={doc.route}>{doc.name}</Link>
+          </li>
+        ))}
+      </ul>
+    )}
+  </Docs>
+)

packages/playgrodd-theme-default/src/components/View.tsx

@@ -0,0 +1,22 @@
+import React, { Fragment } from 'react'
+
+import { Preview } from 'playgrodd'
+
+export const View = () => (
+  <Preview>
+    {({ id, name, docDescription, sections }) => (
+      <Fragment key={id}>
+        <h2>{name}</h2>
+        {docDescription && <p>{docDescription}</p>}
+        {sections &&
+          sections.length > 0 &&
+          sections.map(section => (
+            <Fragment key={section.id}>
+              <h3>{section.title}</h3>
+              <div>{section.render()}</div>
+            </Fragment>
+          ))}
+      </Fragment>
+    )}
+  </Preview>
+)

packages/playgrodd-theme-default/src/index.jsx

@@ -1,19 +0,0 @@
-import * as React from 'react'
-import { Link } from 'react-router-dom'
-
-import { createTheme, Playgrodd, Preview } from 'playgrodd'
-
-export const Theme = createTheme(() => (
-  <div>
-    <h1>Default theme</h1>
-    <ul>
-      <li>
-        <Link to="/src/Alert">Alert</Link>
-      </li>
-      <li>
-        <Link to="/src/Button">Button</Link>
-      </li>
-    </ul>
-    <Preview />
-  </div>
-))

packages/playgrodd-theme-default/src/index.tsx

@@ -0,0 +1,13 @@
+import React, { Fragment } from 'react'
+import { createTheme } from 'playgrodd'
+
+import { List } from './components/List'
+import { View } from './components/View'
+
+export const Theme = createTheme(() => (
+  <Fragment>
+    <h1>Default theme</h1>
+    <List />
+    <View />
+  </Fragment>
+))

packages/playgrodd-theme-default/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/main",
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "types": ["node"],
+    "typeRoots": ["node_modules/@types"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/**"]
+}