chore: improve basic example

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"
       }
     }]
   ]

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"
   }
 }

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>
+  ))

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>)