From d07667b7b7005e35d05994ce273851ae7b3528bc Mon Sep 17 00:00:00 2001
From: Pedro Nauck <pedronauck@gmail.com>
Date: Tue, 20 Mar 2018 02:59:11 -0300
Subject: [PATCH] chore: improve basic example

---
 examples/basic/.babelrc       |  9 ++++++--
 examples/basic/package.json   | 13 +++++++++---
 examples/basic/src/Alert.jsx  | 39 +++++++++++++++++++++++++++++------
 examples/basic/src/Button.jsx | 10 ++++-----
 4 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/examples/basic/.babelrc b/examples/basic/.babelrc
index a03337e8b..0a07ce6eb 100644
--- a/examples/basic/.babelrc
+++ b/examples/basic/.babelrc
@@ -1,9 +1,14 @@
 {
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
   "plugins": [
+    "emotion",
     ["module-resolver", {
       "alias": {
-        "playgrodd": "../../packages/playgrood/build/main",
-        "playgrodd-theme-default": "../../packages/playgrood/build/main/theme/default.js"
+        "playgrodd": "../../node_modules/playgrodd/dist/main/index.js",
+        "playgrodd-theme-default": "../../node_modules/playgrodd-theme-default/dist/index.js"
       }
     }]
   ]
diff --git a/examples/basic/package.json b/examples/basic/package.json
index 019733002..d6a009154 100644
--- a/examples/basic/package.json
+++ b/examples/basic/package.json
@@ -6,10 +6,17 @@
     "start": "playgrodd start"
   },
   "dependencies": {
-    "playgrodd": "^0.0.1"
+    "emotion": "^9.0.2",
+    "playgrodd": "^0.0.1",
+    "playgrodd-theme-default": "^0.0.1",
+    "prop-types": "^15.6.1",
+    "react-emotion": "^9.0.2"
   },
   "devDependencies": {
-    "babel-plugin-module-resolver": "^3.1.0",
-    "babel-preset-react": "^6.24.1"
+    "@babel/core": "7.0.0-beta.42",
+    "@babel/preset-env": "^7.0.0-beta.42",
+    "@babel/preset-react": "^7.0.0-beta.42",
+    "babel-plugin-emotion": "^9.0.1",
+    "babel-plugin-module-resolver": "^3.1.0"
   }
 }
diff --git a/examples/basic/src/Alert.jsx b/examples/basic/src/Alert.jsx
index 11dc5e256..024550137 100644
--- a/examples/basic/src/Alert.jsx
+++ b/examples/basic/src/Alert.jsx
@@ -1,8 +1,35 @@
-/**
- * @playgrodd
- * @name: Alert
- */
+import React, { Fragment } from 'react'
+import { doc } from 'playgrodd'
+import styled from 'react-emotion'
+import t from 'prop-types'
 
-import React from 'react'
+const kinds = {
+  info: '#5352ED',
+  positive: '#2ED573',
+  negative: '#FF4757',
+  warning: '#FFA502',
+}
 
-export const doc = () => <div>hello</div>
+const Alert = styled('div')`
+  padding: 5px 7px;
+  background: white;
+  border-radius: 3px;
+  color: white;
+  background: ${({ kind = 'info' }) => kinds[kind]};
+`
+
+Alert.propTypes = {
+  color: t.oneOf(['info', 'positive', 'negative', 'warning']),
+}
+
+doc('Alert')
+  .description('This component is used to show alerts')
+  .section('Basic usage', () => <Alert>Some message</Alert>)
+  .section('Using different kinds', () => (
+    <Fragment>
+      <Alert>Some message</Alert>
+      <Alert kind="positive">Some message</Alert>
+      <Alert kind="negative">Some message</Alert>
+      <Alert kind="warning">Some message</Alert>
+    </Fragment>
+  ))
diff --git a/examples/basic/src/Button.jsx b/examples/basic/src/Button.jsx
index 795f99cb2..e9665737e 100644
--- a/examples/basic/src/Button.jsx
+++ b/examples/basic/src/Button.jsx
@@ -1,8 +1,6 @@
-/**
- * @playgrodd
- * @name: Button
- */
-
 import React from 'react'
+import { doc } from 'playgrodd'
+
+const Button = ({ children }) => <button>{children}</button>
 
-export const doc = () => <button>click me</button>
+doc('Button').section(() => <Button>Click me</Button>)