From 7f6bf525ad5a7ffe9100171b06d81b2c9d02bcd6 Mon Sep 17 00:00:00 2001
From: Jorge Acero <julianacero98@gmail.com>
Date: Sat, 11 Sep 2021 12:19:01 -0500
Subject: [PATCH] fix(tsdoc): tsdoc added for ComponentShield

---
 README.md                          |  6 ++---
 src/components/ComponentShield.tsx | 38 ++++++++++++++++++++++++++----
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index cc6d404..a1cd0f5 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
   NextShield
 </h1>
 
-😉 The shield that every Next.js project needs.
+😉 The shield that every Next.js app needs.
 
 ## Motivation
 
@@ -27,6 +27,6 @@ After creating a lot of apps with the same boilerplate code for authentication &
 
 You can find the documentation at the [official website](https://imjulianeral.github.io/next-shield/).
 
-## Examples
+<!-- ## Examples
 
-[Firebase Example](https://github.com/imjulianeral/next-shield/tree/main/example/ts-fire-example)
+[Firebase Example](https://github.com/imjulianeral/next-shield/tree/main/example/ts-fire-example) -->
diff --git a/src/components/ComponentShield.tsx b/src/components/ComponentShield.tsx
index 22a74fb..0b964e5 100644
--- a/src/components/ComponentShield.tsx
+++ b/src/components/ComponentShield.tsx
@@ -3,15 +3,43 @@ import React from 'react'
 import {
   ComponentShieldAuthProps,
   ComponentShieldBaseProps,
-  ComponentShieldProps,
   ComponentShieldRBACProps,
+  ComponentShieldProps,
 } from '../types/Component'
 
+/**
+ * 🛡️ A Shield for your Components, it handles when a component shows or not based on the auth state or the user's role
+ *
+ * @param ComponentShieldProps {@link ComponentShieldProps | see here}
+ * @returns Children Components | {@link JSX.Element}
+ *
+ *
+ * @example
+ * ```tsx
+ *  // Basic Example
+ *  <ComponentShield showIf={true}>
+ *    <p>You are authorized</p>
+ *  </ComponentShield>
+ *
+ *  // Fallback Example
+ *  <ComponentShield showIf={false} fallback={<p>You are unauthorized</p>}>
+ *    <p>You are authorized</p>
+ *  </ComponentShield>
+ *
+ *  // RBAC Example
+ *  <ComponentShield RBAC showForRole="ADMIN" userRole="ADMIN">
+ *    <p>You are an ADMIN</p>
+ *  </ComponentShield>
+ * ```
+ *
+ * @packageDocumentation
+ */
+
 export function ComponentShield(props: ComponentShieldBaseProps): JSX.Element
 export function ComponentShield(props: ComponentShieldAuthProps): JSX.Element
 export function ComponentShield(props: ComponentShieldRBACProps): JSX.Element
 export function ComponentShield(props: ComponentShieldProps) {
-  const { showForRole, showIf, fallback, RBAC, userRole, children } = props
+  const { showForRole, showIf, fallback = null, RBAC, userRole, children } = props
 
   if (RBAC) return <>{showForRole === userRole ? children : null}</>
   if (showIf) return <>{children}</>
@@ -22,9 +50,9 @@ export function ComponentShield(props: ComponentShieldProps) {
 // function Debug() {
 //   return (
 //     <>
-//       <ComponentShield showIf={true}>
-//         <p>Default</p>
-//       </ComponentShield>
+// <ComponentShield showIf={true}>
+//   <p>Default</p>
+// </ComponentShield>
 //       <ComponentShield RBAC showForRole="" userRole="">
 //         <p>RBAC</p>
 //       </ComponentShield>