📝 docs: add js doc comment and add inline notification component to the example page

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() });

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>

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