fix(docz): remove props broked props component samples

src/docz/README.md → README.md

@@ -108,7 +108,6 @@ Whenever possible, please make a pull request with the implementation instead of
 
 > If the feature is big, open an issue first for discussion.
 
-
 ## License
 
 This project is licensed under the terms of the

src/docz/Advertise.mdx

@@ -4,13 +4,10 @@ route: /advertise
 ---
 
 import Advertise from '../core/Advertise'
-import { Playground, Props } from 'docz'
+import { Playground } from 'docz'
 
 # Advertise
 
-## Properties
-<Props of={ Advertise } />
-
 ## Demo
 <Playground style={ { padding: '10px', backgroundColor: 'silver' } }>
     <Advertise

src/docz/Box.mdx

@@ -4,13 +4,10 @@ route: /box
 ---
 
 import Box from '../core/Box'
-import { Playground, Props } from 'docz'
+import { Playground, } from 'docz'
 
 # Box
 
-## Properties
-<Props of={ Box } />
-
 ## Demo
 <Playground style={ { padding: '10px', backgroundColor: 'silver' } }>
     <Box>

src/docz/Header.mdx

@@ -4,13 +4,10 @@ route: /header
 ---
 
 import Header from '../core/Header'
-import { Playground, Props } from 'docz'
+import { Playground } from 'docz'
 
 # Header
 
-## Properties
-<Props of={ Header } />
-
 ## Demo
 <Playground>
     <Header style={ { marginBottom: '12px' } } position='relative'>

src/docz/Index.mdx

@@ -0,0 +1,106 @@
+---
+name: Index
+route: /
+---
+import imageUrl from '../../logo.png'
+
+<!-- Logo -->
+<div style={{ display: 'flex', justifyContent: 'center', marginTop: '30px' }}>
+  <img width="150" src={imageUrl} alt="Flipper-UI logo" />
+  <h1 align="center" style={{ marginLeft: "4px"}}>Flipper-UI</h1>
+</div>
+
+## Installation
+
+Flipper-UI is available as an [npm package](https://www.npmjs.com/package/flipper-ui).
+
+```sh
+// with npm
+npm install flipper-ui
+
+// with yarn
+yarn add flipper-ui
+```
+
+## Usage
+
+Here is a quick example to get you started, **it's all you need**:
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Button } from 'flipper-ui'
+
+function App() {
+  return (
+    <Button variant="contained" color="primary">
+      Hello World
+    </Button>
+  );
+}
+
+ReactDOM.render(<App />, document.querySelector('#app'));
+```
+
+## Components
+
+- [x] Advertise
+- [x] AppBar/Header
+- [x] AutoComplete
+- [x] Avatar
+- [x] Badge
+- [x] Box
+- [x] Button
+- [x] Checkbox
+- [x] Chip
+- [x] Collapse
+- [x] DatePicker
+- [x] Dialog
+- [x] Divider
+- [x] Expansion Panel
+- [x] Menu
+- [x] Fade
+- [x] Floating Action Button
+- [x] Grow
+- [x] Icon
+- [x] Icon Button
+- [x] List
+- [x] ListItem
+- [x] Paper
+- [x] Progress
+- [x] Sidebar/Drawer
+- [x] Switcher
+- [x] Radio
+- [x] RadioGroup
+- [x] Select
+- [x] Slide
+- [x] Snackbar
+- [x] Table
+- [x] Tabs
+- [x] TextArea
+- [x] TextField
+- [x] Tooltip
+- [x] Typography
+- [x] Zoom
+
+## Next Components
+
+- [ ] Carousel/Gallery
+- [ ] Tree
+
+## Documentation
+
+Check out our [documentation website](https://nginformatica.github.io/flipper-ui/).
+
+## Contributing
+
+Bug reports, feature requests and other contributions are more than welcome! <br/>
+Whenever possible, please make a pull request with the implementation instead of just requesting it.
+
+> If the feature is big, open an issue first for discussion.
+
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](/LICENSE).

src/docz/Sidebar.mdx

@@ -8,13 +8,10 @@ import Container from '../core/Container'
 import List from '../core/List'
 import ListItem from '../core/ListItem'
 import { Backup as IconBackup } from '../icons'
-import { Playground, Props } from 'docz'
+import { Playground } from 'docz'
 
 # Sidebar
 
-## Properties
-<Props of={ Sidebar } />
-
 ## Normal
 <Playground>
     <Container

src/docz/Stepper.mdx

@@ -5,13 +5,10 @@ route: /stepper
 
 import Stepper from '../core/Stepper'
 import { Delete } from '../icons'
-import { Playground, Props } from 'docz'
+import { Playground } from 'docz'
 
 # Stepper
 
-## Properties
-<Props of={ Stepper } />
-
 ## Demo
 <Playground>
     <Stepper

src/docz/Tabs.mdx

@@ -5,13 +5,10 @@ route: /tabs
 
 import Tabs from '../core/Tabs'
 import Tab from '../core/Tab'
-import { Playground, Props } from 'docz'
+import { Playground } from 'docz'
 
 # Tabs
 
-## Properties
-<Props of={ Tabs } />
-
 ## Demo
 <Playground>
     <Tabs value={ 0 }>

src/docz/Tooltip.mdx

@@ -5,14 +5,11 @@ route: /tooltip
 
 import Tooltip from '../core/Tooltip'
 import Button from '../core/Button'
-import { Playground, Props } from 'docz'
+import { Playground } from 'docz'
 import { Add as IconAdd } from '../icons'
 
 # Tooltip
 
-## Properties
-<Props of={ Tooltip } />
-
 ## Simple tooltip
 <Playground>
     <Tooltip title='Tooltip'>