From 2cd1776ded38cf460419492a062b5fc2c4077621 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 21 Feb 2024 16:42:09 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs:=20add=20js=20doc=20comment?=
 =?UTF-8?q?=20and=20add=20inline=20notification=20component=20to=20the=20e?=
 =?UTF-8?q?xample=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InlineNotification/InlineNotification.tsx | 19 ++++++++
 .../frontend/src/pages/components/index.tsx   | 19 +++++++-
 .../renders/inlineNotifications.tsx           | 43 +++++++++++++++++++
 3 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 packages/frontend/src/pages/components/renders/inlineNotifications.tsx

diff --git a/packages/frontend/src/components/shared/InlineNotification/InlineNotification.tsx b/packages/frontend/src/components/shared/InlineNotification/InlineNotification.tsx
index e98c4ea3..573d9d12 100644
--- a/packages/frontend/src/components/shared/InlineNotification/InlineNotification.tsx
+++ b/packages/frontend/src/components/shared/InlineNotification/InlineNotification.tsx
@@ -10,11 +10,29 @@ import { cloneIcon } from 'utils/cloneIcon';
 export interface InlineNotificationProps
   extends ComponentPropsWithoutRef<'div'>,
     InlineNotificationTheme {
+  /**
+   * The title of the notification
+   */
   title: string;
+  /**
+   * The description of the notification
+   */
   description?: string;
+  /**
+   * The icon to display in the notification
+   * @default <InfoSquareIcon />
+   */
   icon?: ReactNode;
 }
 
+/**
+ * A notification that is displayed inline with the content
+ *
+ * @example
+ * ```tsx
+ * <InlineNotification title="Notification title goes here" />
+ * ```
+ */
 export const InlineNotification = ({
   className,
   title,
@@ -32,6 +50,7 @@ export const InlineNotification = ({
     icon: iconClass,
   } = inlineNotificationTheme({ size, variant, hasDescription: !!description });
 
+  // Render custom icon or default icon
   const renderIcon = useCallback(() => {
     if (!icon) return <InfoSquareIcon className={iconClass()} />;
     return cloneIcon(icon, { className: iconClass() });
diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index 456f433e..d2611141 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -6,6 +6,10 @@ import { Checkbox } from 'components/shared/Checkbox';
 import { PlusIcon } from 'components/shared/CustomIcon';
 import React, { useState } from 'react';
 import { Value } from 'react-calendar/dist/cjs/shared/types';
+import {
+  renderInlineNotificationWithDescriptions,
+  renderInlineNotifications,
+} from './renders/inlineNotifications';
 
 const avatarSizes: AvatarVariants['size'][] = [18, 20, 24, 28, 32, 36, 40, 44];
 const avatarVariants: AvatarVariants['type'][] = ['gray', 'orange', 'blue'];
@@ -40,7 +44,7 @@ const Page = () => {
 
   return (
     <div className="relative h-full min-h-full">
-      <div className="flex flex-col items-center justify-center max-w-7xl mx-auto px-20 py-20">
+      <div className="flex flex-col items-center justify-center container mx-auto px-20 py-20">
         <h1 className="text-4xl font-bold">Manual Storybook</h1>
         <p className="mt-4 text-lg text-center text-gray-500">
           Get started by editing{' '}
@@ -197,6 +201,19 @@ const Page = () => {
               </div>
             </div>
           </div>
+
+          <div className="w-full h border border-gray-200 px-20 my-10" />
+
+          {/* Inline notification */}
+          <div className="flex flex-col gap-10 items-center justify-between">
+            <h1 className="text-2xl font-bold">Inline Notification</h1>
+            <div className="flex gap-1 flex-wrap">
+              {renderInlineNotifications()}
+            </div>
+            <div className="flex gap-1 flex-wrap">
+              {renderInlineNotificationWithDescriptions()}
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/frontend/src/pages/components/renders/inlineNotifications.tsx b/packages/frontend/src/pages/components/renders/inlineNotifications.tsx
new file mode 100644
index 00000000..fc36b914
--- /dev/null
+++ b/packages/frontend/src/pages/components/renders/inlineNotifications.tsx
@@ -0,0 +1,43 @@
+import { InlineNotification } from 'components/shared/InlineNotification';
+import { InlineNotificationTheme } from 'components/shared/InlineNotification/InlineNotification.theme';
+import React from 'react';
+
+const inlineNotificationVariants = [
+  'info',
+  'danger',
+  'warning',
+  'success',
+  'generic',
+];
+const inlineNotificationSizes = ['md', 'sm'];
+
+export const renderInlineNotifications = () => {
+  return inlineNotificationVariants.map((variant) => (
+    <div className="space-y-2" key={variant}>
+      {inlineNotificationSizes.map((size) => (
+        <InlineNotification
+          size={size as InlineNotificationTheme['size']}
+          variant={variant as InlineNotificationTheme['variant']}
+          key={`${variant}-${size}`}
+          title="Notification title goes here"
+        />
+      ))}
+    </div>
+  ));
+};
+
+export const renderInlineNotificationWithDescriptions = () => {
+  return inlineNotificationVariants.map((variant) => (
+    <div className="space-y-2" key={variant}>
+      {inlineNotificationSizes.map((size) => (
+        <InlineNotification
+          size={size as InlineNotificationTheme['size']}
+          variant={variant as InlineNotificationTheme['variant']}
+          key={`${variant}-${size}`}
+          title="Notification title goes here"
+          description="Description goes here"
+        />
+      ))}
+    </div>
+  ));
+};