From d1cd144dfc3ee63dc38bfe486a70cd282268c509 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 21 Feb 2024 16:40:12 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20create=20inline=20?=
 =?UTF-8?q?notification=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InlineNotification.theme.ts               | 78 +++++++++++++++++++
 .../InlineNotification/InlineNotification.tsx | 49 ++++++++++++
 .../shared/InlineNotification/index.ts        |  1 +
 3 files changed, 128 insertions(+)
 create mode 100644 packages/frontend/src/components/shared/InlineNotification/InlineNotification.theme.ts
 create mode 100644 packages/frontend/src/components/shared/InlineNotification/InlineNotification.tsx
 create mode 100644 packages/frontend/src/components/shared/InlineNotification/index.ts

diff --git a/packages/frontend/src/components/shared/InlineNotification/InlineNotification.theme.ts b/packages/frontend/src/components/shared/InlineNotification/InlineNotification.theme.ts
new file mode 100644
index 00000000..43536b55
--- /dev/null
+++ b/packages/frontend/src/components/shared/InlineNotification/InlineNotification.theme.ts
@@ -0,0 +1,78 @@
+import { VariantProps, tv } from 'tailwind-variants';
+
+export const inlineNotificationTheme = tv({
+  slots: {
+    wrapper: ['rounded-xl', 'flex', 'gap-2', 'items-start', 'w-full', 'border'],
+    content: ['flex', 'flex-col', 'gap-1'],
+    title: [],
+    description: [],
+    icon: ['flex', 'items-start'],
+  },
+  variants: {
+    variant: {
+      info: {
+        wrapper: ['border-border-info-light', 'bg-base-bg-emphasized-info'],
+        title: ['text-elements-on-emphasized-info'],
+        description: ['text-elements-on-emphasized-info'],
+        icon: ['text-elements-info'],
+      },
+      danger: {
+        wrapper: ['border-border-danger-light', 'bg-base-bg-emphasized-danger'],
+        title: ['text-elements-on-emphasized-danger'],
+        description: ['text-elements-on-emphasized-danger'],
+        icon: ['text-elements-danger'],
+      },
+      warning: {
+        wrapper: [
+          'border-border-warning-light',
+          'bg-base-bg-emphasized-warning',
+        ],
+        title: ['text-elements-on-emphasized-warning'],
+        description: ['text-elements-on-emphasized-warning'],
+        icon: ['text-elements-warning'],
+      },
+      success: {
+        wrapper: [
+          'border-border-success-light',
+          'bg-base-bg-emphasized-success',
+        ],
+        title: ['text-elements-on-emphasized-success'],
+        description: ['text-elements-on-emphasized-success'],
+        icon: ['text-elements-success'],
+      },
+      generic: {
+        wrapper: ['border-border-separator', 'bg-base-bg-emphasized'],
+        title: ['text-elements-high-em'],
+        description: ['text-elements-on-emphasized-info'],
+        icon: ['text-elements-high-em'],
+      },
+    },
+    size: {
+      sm: {
+        wrapper: ['px-2', 'py-2'],
+        title: ['leading-4', 'text-xs'],
+        description: ['leading-4', 'text-xs'],
+        icon: ['h-4', 'w-4'],
+      },
+      md: {
+        wrapper: ['px-3', 'py-3'],
+        title: ['leading-5', 'tracking-[-0.006em]', 'text-sm'],
+        description: ['leading-5', 'tracking-[-0.006em]', 'text-sm'],
+        icon: ['h-5', 'w-5'],
+      },
+    },
+    hasDescription: {
+      true: {
+        title: ['font-medium'],
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'generic',
+    size: 'md',
+  },
+});
+
+export type InlineNotificationTheme = VariantProps<
+  typeof inlineNotificationTheme
+>;
diff --git a/packages/frontend/src/components/shared/InlineNotification/InlineNotification.tsx b/packages/frontend/src/components/shared/InlineNotification/InlineNotification.tsx
new file mode 100644
index 00000000..e98c4ea3
--- /dev/null
+++ b/packages/frontend/src/components/shared/InlineNotification/InlineNotification.tsx
@@ -0,0 +1,49 @@
+import React, { ReactNode, useCallback } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import {
+  InlineNotificationTheme,
+  inlineNotificationTheme,
+} from './InlineNotification.theme';
+import { InfoSquareIcon } from 'components/shared/CustomIcon';
+import { cloneIcon } from 'utils/cloneIcon';
+
+export interface InlineNotificationProps
+  extends ComponentPropsWithoutRef<'div'>,
+    InlineNotificationTheme {
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+}
+
+export const InlineNotification = ({
+  className,
+  title,
+  description,
+  size,
+  variant,
+  icon,
+  ...props
+}: InlineNotificationProps) => {
+  const {
+    wrapper,
+    content,
+    title: titleClass,
+    description: descriptionClass,
+    icon: iconClass,
+  } = inlineNotificationTheme({ size, variant, hasDescription: !!description });
+
+  const renderIcon = useCallback(() => {
+    if (!icon) return <InfoSquareIcon className={iconClass()} />;
+    return cloneIcon(icon, { className: iconClass() });
+  }, [icon])();
+
+  return (
+    <div {...props} className={wrapper({ className })}>
+      {renderIcon}
+      <div className={content()}>
+        <p className={titleClass()}>{title}</p>
+        {description && <p className={descriptionClass()}>{description}</p>}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/frontend/src/components/shared/InlineNotification/index.ts b/packages/frontend/src/components/shared/InlineNotification/index.ts
new file mode 100644
index 00000000..fbe7bbd4
--- /dev/null
+++ b/packages/frontend/src/components/shared/InlineNotification/index.ts
@@ -0,0 +1 @@
+export * from './InlineNotification';