From 1fc750083742023224b0acfac85ba9f2a7223d31 Mon Sep 17 00:00:00 2001
From: okbel <curciobelen@gmail.com>
Date: Thu, 22 Mar 2018 12:36:46 -0300
Subject: [PATCH] More

---
 docs/source/05-03-Plugins-API.md | 162 ++++++++++++++++++++++++-------
 1 file changed, 125 insertions(+), 37 deletions(-)

diff --git a/docs/source/05-03-Plugins-API.md b/docs/source/05-03-Plugins-API.md
index 4c90a0aa2..c15b040cd 100644
--- a/docs/source/05-03-Plugins-API.md
+++ b/docs/source/05-03-Plugins-API.md
@@ -1,15 +1,8 @@
 # Plugins API
 We created a set of utilities to make it easier to create and add functionality to plugins.
-
 Feel free to check all the utilities here:  `talk/plugin-api`.
 
 ## Actions
-
-### Import 
-```
-import {notify} 'plugin-api/beta/actions';
-```
-
 #### Admin
 * `viewUserDetail`
 
@@ -25,16 +18,46 @@ import {notify} 'plugin-api/beta/actions';
 * `setSort`
 * `showSignInDialog``
 
+### Import 
+```
+import {notify} 'plugin-api/beta/actions';
+```
+
+### Usage 
+```js
+// Trigger a notification
+notify('success', t('suspenduser.notify_suspend_until', username, timeago(until))
+
+// mapDispatchToProps
+const mapDispatchToProps = dispatch => ({
+  ...bindActionCreators(
+    {
+      notify,
+    },
+    dispatch
+  ),
+});
+
+```
+
+
 ## Components
+* `Slot`
+You probably won’t need to use the `<Slot/>` component in your plugin. But there’s a chance you might want to add a Slot so another plugin gets injected in your plugin.
+
+### Props
+* `fill ` :  <String | Array> Name of the slot
+* `defaultComponent` : <Element | Array> The default component if no plugin component is provided to the Slot
+* `size` : <Number | Array> - How many components this Slot should show -  Slot size or an Array of slot size
+* `passthrough`: <Object> - The properties that you want to pass to the Slot, therefore to the plugins.
+* `className` :  <String> - Slot’s class name
+
 ### Import 
 ```
 import {Slot} 'plugin-api/beta/components';
 ```
 
-
-* `Slot`
-You probably won’t need to use the `<Slot/>` component in your plugin. But there’s a chance you might want to add a Slot so another plugin gets injected in your plugin.
-
+### Usage
 ```js
 const slotPassthrough = {
   clearHeightCache,
@@ -54,6 +77,12 @@ const slotPassthrough = {
 
 * `IfSlotIsEmpty`
 
+### Import 
+```
+import {IfSlotIsEmpty} 'plugin-api/beta/components';
+```
+
+### Usage
 ```js
 <IfSlotIsEmpty
   slot="adminCommentContent"
@@ -63,6 +92,19 @@ const slotPassthrough = {
 
 * `IfSlotIsNotEmpty`
 
+### Import 
+```
+import {IfSlotIsNotEmpty} 'plugin-api/beta/components';
+```
+
+### Usage
+```js
+<IfSlotIsNotEmpty
+  slot="adminCommentContent"
+  passthrough={slotPassthrough}
+/>
+```
+
 * `ClickOutside`
 This utility handle click events outside the component. 
 
@@ -81,7 +123,6 @@ import { ClickOutside } from 'plugin-api/beta/client/components';
 </ClickOutside>
 ```
 
-
 * `CommentAuthorName`
 * `CommentTimestamp`
 * `CommentDetail`
@@ -91,20 +132,17 @@ import { ClickOutside } from 'plugin-api/beta/client/components';
 * `Recaptcha`
 
 ## HOCS - Higher Order Components
-### Import 
-```
-import {withReaction} 'plugin-api/beta/hoc';
-```
-
-### Hocs
 *`withGraphQLExtension`* 
 
 This HOC allows components to register GraphQLExtensions for the framework. IMPORTANT: The extensions are only picked up when the component is used in a slot.
 
+### Import 
 ```js
-import {withGraphQLExtension} 'plugin-api/beta/hoc';
+import { withGraphQLExtension } from 'plugin-api/beta/hoc';
+```
 
-// MyComponent.js
+### Usage
+```js
 withGraphQLExtension({
   mutations: {
     UpdateNotificationSettings: () => ({
@@ -127,9 +165,33 @@ export default {
 *  `withReaction`
 Provides you utilities to create components that interact with Reactions.
 
+Check this tutorial to know more about the usage of `withReaction` [Creating a Basic Pride Reaction Plugin | Talk Documentation](https://docs.coralproject.net/talk/building-basic-plugin/)
+
+### Import 
+```js
+import { withReaction } from 'plugin-api/beta/hoc';
+```
+
+### Usage 
+```js
+export default withReaction('pride')(PrideButton);
+```
+
+
 * `withTags`
 Provides you utilities to create components that interact with Tags.
 
+### Import 
+```js
+import { withTags } from 'plugin-api/beta/hoc';
+```
+
+### Usage 
+```js
+export default withTags('featured')(FeaturedButton);
+```
+
+
 * `withSortOption`
 * `withEmit`
 * `excludeIf`
@@ -152,9 +214,50 @@ Provides you utilities to create components that interact with Tags.
 * `withSetCommentStatus`
 * `compose`
 
-## Coral UI
-### Import 
+## Services
+
+* `t`
+To manage translations.
+
+### Import
+```js
+import { t } from 'coral-framework/services/perms';
 ```
+
+* `timeago`
+Handle time with [timeago](https://github.com/hustcc/timeago.js)
+
+### Import
+```js
+import { timeago } from 'coral-framework/services/perms';
+```
+
+* `can`
+A permissions utility.
+
+### Import
+```js
+import { can } from 'coral-framework/services/perms';
+```
+
+### Usage
+```js
+{can(currentUser, 'UPDATE_CONFIG') && (
+  <Link
+    className={cn('talk-admin-nav-configure', styles.navLink)}
+    to="/admin/configure"
+    activeClassName={styles.active}
+  >
+    {t('configure.configure')}
+  </Link>
+)}
+```
+
+## Coral UI
+Coral UI is a set of components to help you build your UI. This powers our core.
+
+### Import 
+```js
 import {Button} 'plugin-api/beta/components/ui';
 ```
 
@@ -190,18 +293,3 @@ import {Button} 'plugin-api/beta/components/ui';
 * `Dropdown`
 * `Option`
 * `BareButton`
-
-## Services
-### Import 
-```
-import {t, timeago, can} 'plugin-api/beta/services';
-```
-
-* `t`
-To manage translations.
-
-* `timeago`
-Handle time with [timeago](https://github.com/hustcc/timeago.js)
-
-* `can`
-A permissions utility.