From 9d6294f84b1606932c191e941378574a540a4678 Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Tue, 12 Dec 2023 15:10:15 +0800
Subject: [PATCH 1/4] feat(example): data display card with table

---
 packages/card/src/lib/card.tsx                | 21 ++++++--
 packages/ui/src/scss/main.scss                |  3 ++
 .../stories/examples/DataDisplay.stories.tsx  | 51 +++++++++++++++++++
 tsconfig.base.json                            |  6 +--
 4 files changed, 73 insertions(+), 8 deletions(-)
 create mode 100644 packages/ui/src/stories/examples/DataDisplay.stories.tsx

diff --git a/packages/card/src/lib/card.tsx b/packages/card/src/lib/card.tsx
index 44e5946..c2a32a2 100644
--- a/packages/card/src/lib/card.tsx
+++ b/packages/card/src/lib/card.tsx
@@ -5,24 +5,35 @@ export interface CardProps {
   title?: string | ReactNode
   options?: string | ReactNode 
   children?: string | ReactNode
+  noPadding?: boolean
+  cardHeaderBorder?: boolean
   className?: string
+  subtitle?: string
 }
 import { cn } from '@bootwind/common'
 export function Card({
   options,
   title,
   children,
-  className
+  noPadding = false,
+  className,
+  cardHeaderBorder = false,
+  subtitle
 }: CardProps) {
   return (
-    <div className={cn("shadow-xl rounded-[20px]", className)}>
-      <div className="card-header  p-5 flex justify-between">
-        <h4 className="card-title font-normal text-slate-500 leading-normal">{ title }</h4>
+    <div className={cn("shadow-xl rounded-[10px] bg-white", className)}>
+      <div className={cn("card-header p-5 flex justify-between", cardHeaderBorder ? 'border-b border-gray-200' : '')}>
+        <div className="card-header-left">
+          <h4 className="card-title font-normal text-gray-900 leading-normal">{ title }</h4>
+          {subtitle && (
+            <p className="card-subtitle text-sm font-normal text-gray-500 leading-normal">{ subtitle }</p>
+          )}
+        </div>
         <div className="card-options">
           { options }
         </div>
       </div>
-      <div className="card-body p-5 pt-0">
+      <div className={cn(`card-body pt-0`, noPadding ? 'p-0' : 'p-5')}>
         { children }
       </div>
     </div>
diff --git a/packages/ui/src/scss/main.scss b/packages/ui/src/scss/main.scss
index f5ed47d..ecf16bb 100644
--- a/packages/ui/src/scss/main.scss
+++ b/packages/ui/src/scss/main.scss
@@ -4,4 +4,7 @@
 
 body {
     font-family: 'Inter';
+}
+a {
+    @apply text-indigo-600;
 }
\ No newline at end of file
diff --git a/packages/ui/src/stories/examples/DataDisplay.stories.tsx b/packages/ui/src/stories/examples/DataDisplay.stories.tsx
new file mode 100644
index 0000000..105d789
--- /dev/null
+++ b/packages/ui/src/stories/examples/DataDisplay.stories.tsx
@@ -0,0 +1,51 @@
+import { Meta } from "@storybook/react";
+import { Card } from '@bootwind/card'
+import { Table, TableBody, TableCell, TableRow } from '@bootwind/table'
+import { HiPaperClip } from 'react-icons/hi2'
+
+export default {
+    title: 'Examples/DataDisplay',
+    argTypes: {},
+} as Meta;
+
+export const CardWithTable = () => {
+    return (
+        <Card noPadding title="Applicant Information" className="max-w-[800px] overflow-hidden" subtitle="Personal details and application."  cardHeaderBorder>
+            <Table variant="striped">
+                <TableBody>
+                    <TableRow>
+                        <TableCell>Full name</TableCell>
+                        <TableCell>Margot Foster</TableCell>
+                    </TableRow>
+                    <TableRow>
+                        <TableCell>Application for</TableCell>
+                        <TableCell>Email address</TableCell>
+                    </TableRow>
+                    <TableRow>
+                        <TableCell width={200}>Salary expecatation</TableCell>
+                        <TableCell>$120,000</TableCell>
+                    </TableRow>
+                    <TableRow>
+                        <TableCell>About</TableCell>
+                        <TableCell>Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu. </TableCell>
+                    </TableRow>
+                    <TableRow>
+                        <TableCell>Attachments</TableCell>
+                        <TableCell>
+                            <ul>
+                                <li className="flex between items-center gap-2 justify-between">
+                                    <div className="name flex items-center">
+                                        <HiPaperClip/>
+                                        <span>resume_backend_developer.zip</span>
+                                    </div>
+                                    <a href="#">Download</a>
+                                </li>
+                            </ul>
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+        </Card>
+    )
+}
+  
\ No newline at end of file
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 35efbee..193cd63 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -23,9 +23,9 @@
       "@bootwind/toast": ["./packages/toast/src/index.ts"],
       "@bootwind/typography": ["packages/typography/src/index.ts"],
       "@bootwind/ui": ["./packages/ui/src/index.ts"],
-      "slider": ["packages/slider/src/index.ts"],
-      "table": ["packages/table/src/index.ts"],
-      "tooltip": ["packages/tooltip/src/index.ts"]
+      "@bootwind/slider": ["packages/slider/src/index.ts"],
+      "@bootwind/table": ["packages/table/src/index.ts"],
+      "@bootwind/tooltip": ["packages/tooltip/src/index.ts"]
     }
   }
 }

From e7eec7b081536426c410e1e50d332e4acdb2a7c6 Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Tue, 12 Dec 2023 15:38:02 +0800
Subject: [PATCH 2/4] refactor: tooltip classes

---
 packages/tooltip/src/lib/tooltip.tsx          | 51 ++++++++-----------
 .../tooltip/src/stories/tooltip.stories.tsx   |  6 +--
 packages/ui/.storybook/preview.ts             |  1 -
 3 files changed, 23 insertions(+), 35 deletions(-)

diff --git a/packages/tooltip/src/lib/tooltip.tsx b/packages/tooltip/src/lib/tooltip.tsx
index a3a4193..42d9ee2 100644
--- a/packages/tooltip/src/lib/tooltip.tsx
+++ b/packages/tooltip/src/lib/tooltip.tsx
@@ -1,46 +1,35 @@
+import { cn } from "@bootwind/common";
 import React, { ReactNode } from "react";
 
 export interface TooltipProps {
   position: "top" | "bottom" | "right" | "left";
   content: ReactNode;
   children: ReactNode;
-  color?: "dark" | "light";
+  variant?: "dark" | "light";
 }
 
-const Tooltip: React.FC<TooltipProps> = ({ children, content, position, color = "dark" }) => {
+const Tooltip: React.FC<TooltipProps> = ({ children, content, position, variant = "dark" }) => {
+  const positionClasses = {
+    right: 'left-full top-1/2 z-20 ml-3 -translate-y-1/2',
+    top: 'bottom-full left-1/2 z-20 mb-3 -translate-x-1/2',
+    left: 'right-full top-1/2 z-20 mr-3 -translate-y-1/2',
+    bottom: 'left-1/2 top-full z-20 mt-3 -translate-x-1/2',
+  }
+  const classes = cn(
+    'absolute rounded whitespace-nowrap px-4 py-[6px] text-sm font-semibold  opacity-0 group-hover:opacity-100',
+    variant === 'dark' ? 'bg-black text-white' : 'bg-white text-black',
+    positionClasses[position]
+  )
   return (
-    <div className="mb-14">
-      <div className="group relative inline-block">
+    <div className="tooltip-wrapper group relative inline-block"> 
         <div className="inline-flex">{children}</div>
-        <div className="shadow-md">
-          <div
-            className={` ${(position === "right" &&
-              `absolute left-full top-1/2 z-20 ml-3 -translate-y-1/2 whitespace-nowrap rounded ${color === 'dark' ? 'bg-black' : 'bg-white'} px-4 py-[6px] text-sm font-semibold text-${color === 'dark' ? 'white' : 'black'} opacity-0 group-hover:opacity-100`) ||
-              (position === "top" &&
-                `absolute bottom-full left-1/2 z-20 mb-3 -translate-x-1/2 whitespace-nowrap rounded ${color === 'dark' ? 'bg-black' : 'bg-white'} px-4 py-[6px] text-sm font-semibold text-${color === 'dark' ? 'white' : 'black'} opacity-0 group-hover:opacity-100`) ||
-              (position === "left" &&
-                `absolute right-full top-1/2 z-20 mr-3 -translate-y-1/2 whitespace-nowrap rounded ${color === 'dark' ? 'bg-black' : 'bg-white'} px-4 py-[6px] text-sm font-semibold text-${color === 'dark' ? 'white' : 'black'} opacity-0 group-hover:opacity-100`) ||
-              (position === "bottom" &&
-                `absolute left-1/2 top-full z-20 mt-3 -translate-x-1/2 whitespace-nowrap rounded ${color === 'dark' ? 'bg-black' : 'bg-white'} px-4 py-[6px] text-sm font-semibold text-${color === 'dark' ? 'white' : 'black'} opacity-0 group-hover:opacity-100`)
-              }`}
-          >
-            <span
-              className={` ${(position === "right" &&
-                `absolute left-[-3px] top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm ${color === 'dark' ? 'bg-black' : 'bg-white'}`) ||
-                (position === "top" &&
-                  `absolute bottom-[-3px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm ${color === 'dark' ? 'bg-black' : 'bg-white'}`) ||
-                (position === "left" &&
-                  `absolute right-[-3px] top-1/2 -z-10 h-2 w-2 -translate-y-1/2 rotate-45 rounded-sm ${color === 'dark' ? 'bg-black' : 'bg-white'}`) ||
-                (position === "bottom" &&
-                  `absolute left-1/2 top-[-3px] -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm ${color === 'dark' ? 'bg-black' : 'bg-white'}`)
-                } `}
-            ></span>
-            <div className={`w-40 whitespace-normal text-center`}>
-              {content}
-            </div>
+        <div
+          className={classes}
+        >
+          <div className={`w-40 whitespace-normal text-center`}>
+            {content}
           </div>
         </div>
-      </div>
     </div>
   );
 };
diff --git a/packages/tooltip/src/stories/tooltip.stories.tsx b/packages/tooltip/src/stories/tooltip.stories.tsx
index 0dde06b..cb55f43 100644
--- a/packages/tooltip/src/stories/tooltip.stories.tsx
+++ b/packages/tooltip/src/stories/tooltip.stories.tsx
@@ -29,7 +29,7 @@ export const Bottom = Template.bind({});
 Bottom.args = {
     position: 'bottom',
     content: 'This is a custom tooltip content',
-    color: 'light'
+    variant: 'light'
 };
 
 export const Left = Template.bind({});
@@ -48,12 +48,12 @@ export const Light = Template.bind({});
 Light.args = {
     position: 'bottom',
     content: 'Light Tooltip',
-    color: 'light'
+    variant: 'light'
 };
 
 export const Dark = Template.bind({});
 Dark.args = {
     position: 'bottom',
     content: 'Dark Tooltip',
-    color: 'dark'
+    variant: 'dark'
 };
\ No newline at end of file
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index 4000c71..e29840f 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -5,7 +5,6 @@ const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: {
-      default: 'bootwind',
       values: [
         {
           name: 'bootwind',

From a9bee1741b48c681d5041e61709a92267299bbd4 Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Tue, 12 Dec 2023 16:11:29 +0800
Subject: [PATCH 3/4] refactor: tooltip component with TooltipTrigger and
 TooltipContent

---
 packages/tooltip/src/lib/tooltip-content.tsx  | 31 +++++++++++++++++++
 packages/tooltip/src/lib/tooltip-trigger.tsx  |  9 ++++++
 packages/tooltip/src/lib/tooltip.tsx          | 27 +++-------------
 .../tooltip/src/stories/tooltip.stories.tsx   | 19 +++++++++---
 packages/ui/src/scss/main.scss                |  4 +++
 5 files changed, 63 insertions(+), 27 deletions(-)
 create mode 100644 packages/tooltip/src/lib/tooltip-content.tsx
 create mode 100644 packages/tooltip/src/lib/tooltip-trigger.tsx

diff --git a/packages/tooltip/src/lib/tooltip-content.tsx b/packages/tooltip/src/lib/tooltip-content.tsx
new file mode 100644
index 0000000..2f5aa0c
--- /dev/null
+++ b/packages/tooltip/src/lib/tooltip-content.tsx
@@ -0,0 +1,31 @@
+import { cn } from "@bootwind/common"
+import { ReactNode } from "react"
+
+export interface TooltipContentProps {
+    children: string | ReactNode
+    className?: string
+    variant?: "dark" | "light",
+    position?: "top" | "bottom" | "right" | "left";
+
+}
+
+export const TooltipContent = ({ children, className, variant, position = "top" }: TooltipContentProps) => {
+    const positionClasses = {
+        right: 'left-full top-1/2 z-20 ml-3 -translate-y-1/2',
+        top: 'bottom-full left-1/2 z-20 mb-3 -translate-x-1/2',
+        left: 'right-full top-1/2 z-20 mr-3 -translate-y-1/2',
+        bottom: 'left-1/2 top-full z-20 mt-3 -translate-x-1/2',
+    }
+    const classes = cn(
+        'absolute rounded whitespace-nowrap px-4 py-[6px] text-sm font-semibold  opacity-0 group-hover:opacity-100',
+        variant === 'dark' ? 'bg-black text-white' : 'bg-white text-black',
+        positionClasses[position]
+    )
+    return (
+        <div className={classes}>
+            <div className={`w-40 whitespace-normal text-center`}>
+                {children}
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/packages/tooltip/src/lib/tooltip-trigger.tsx b/packages/tooltip/src/lib/tooltip-trigger.tsx
new file mode 100644
index 0000000..091b9a6
--- /dev/null
+++ b/packages/tooltip/src/lib/tooltip-trigger.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from "react"
+
+export interface TooltipTriggerProps {
+    children: string | ReactNode
+}
+
+export const TooltipTrigger = ({children}: TooltipTriggerProps) => (
+    <div className="tooltip-trigger inline-flex " >{children}</div>
+)
\ No newline at end of file
diff --git a/packages/tooltip/src/lib/tooltip.tsx b/packages/tooltip/src/lib/tooltip.tsx
index 42d9ee2..ea1f201 100644
--- a/packages/tooltip/src/lib/tooltip.tsx
+++ b/packages/tooltip/src/lib/tooltip.tsx
@@ -2,34 +2,17 @@ import { cn } from "@bootwind/common";
 import React, { ReactNode } from "react";
 
 export interface TooltipProps {
-  position: "top" | "bottom" | "right" | "left";
   content: ReactNode;
   children: ReactNode;
-  variant?: "dark" | "light";
+  variant?: "dark" | "light",
+  position?: "top" | "bottom" | "right" | "left";
 }
 
-const Tooltip: React.FC<TooltipProps> = ({ children, content, position, variant = "dark" }) => {
-  const positionClasses = {
-    right: 'left-full top-1/2 z-20 ml-3 -translate-y-1/2',
-    top: 'bottom-full left-1/2 z-20 mb-3 -translate-x-1/2',
-    left: 'right-full top-1/2 z-20 mr-3 -translate-y-1/2',
-    bottom: 'left-1/2 top-full z-20 mt-3 -translate-x-1/2',
-  }
-  const classes = cn(
-    'absolute rounded whitespace-nowrap px-4 py-[6px] text-sm font-semibold  opacity-0 group-hover:opacity-100',
-    variant === 'dark' ? 'bg-black text-white' : 'bg-white text-black',
-    positionClasses[position]
-  )
+const Tooltip: React.FC<TooltipProps> = ({ children, content }) => {
+  
   return (
     <div className="tooltip-wrapper group relative inline-block"> 
-        <div className="inline-flex">{children}</div>
-        <div
-          className={classes}
-        >
-          <div className={`w-40 whitespace-normal text-center`}>
-            {content}
-          </div>
-        </div>
+        {children}
     </div>
   );
 };
diff --git a/packages/tooltip/src/stories/tooltip.stories.tsx b/packages/tooltip/src/stories/tooltip.stories.tsx
index cb55f43..5e7bed7 100644
--- a/packages/tooltip/src/stories/tooltip.stories.tsx
+++ b/packages/tooltip/src/stories/tooltip.stories.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import Tooltip, { TooltipProps } from '../lib/tooltip';
 import { Button } from "@bootwind/button"
+import { TooltipTrigger } from '../lib/tooltip-trigger';
+import { TooltipContent } from '../lib/tooltip-content';
 
 export default {
     title: 'Components/Tooltip',
@@ -15,40 +17,47 @@ export default {
 
 const Template: Story<TooltipProps> = (args) => (
     <Tooltip {...args}>
-        <Button>Hover me to see the tooltip</Button>
+        <TooltipTrigger>
+            <Button>Hover me to see the tooltip</Button>
+        </TooltipTrigger>
+        <TooltipContent position={args.position} variant={args.variant}>
+            {args.content}
+        </TooltipContent>
     </Tooltip>
 );
 
 export const Top = Template.bind({});
 Top.args = {
-    position: 'top',
+    position: "top",
     content: 'Tooltip Text',
+    variant: 'dark'
 };
 
 export const Bottom = Template.bind({});
 Bottom.args = {
-    position: 'bottom',
+    position: "bottom",
     content: 'This is a custom tooltip content',
-    variant: 'light'
+    variant: 'dark'
 };
 
 export const Left = Template.bind({});
 Left.args = {
     position: 'left',
     content: 'Tooltip Text',
+    variant: 'dark'
 };
 
 export const Right = Template.bind({});
 Right.args = {
     position: 'right',
     content: 'Tooltip Text',
+    variant: 'dark'
 };
 
 export const Light = Template.bind({});
 Light.args = {
     position: 'bottom',
     content: 'Light Tooltip',
-    variant: 'light'
 };
 
 export const Dark = Template.bind({});
diff --git a/packages/ui/src/scss/main.scss b/packages/ui/src/scss/main.scss
index ecf16bb..e62d204 100644
--- a/packages/ui/src/scss/main.scss
+++ b/packages/ui/src/scss/main.scss
@@ -7,4 +7,8 @@ body {
 }
 a {
     @apply text-indigo-600;
+}
+
+.tooltip-trigger:hover ~ .tooltip-content {
+    opacity: 1
 }
\ No newline at end of file

From 52642cbe0b843466b6f97d1ff8a971d88dd6ab25 Mon Sep 17 00:00:00 2001
From: zuramai <saugi.dev@gmail.com>
Date: Tue, 12 Dec 2023 16:45:40 +0800
Subject: [PATCH 4/4] fix: tooltip colors and sizing

---
 packages/tooltip/src/lib/tooltip-content.tsx | 6 ++----
 packages/tooltip/src/lib/tooltip.tsx         | 4 ++--
 packages/ui/src/scss/main.scss               | 4 ++--
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/tooltip/src/lib/tooltip-content.tsx b/packages/tooltip/src/lib/tooltip-content.tsx
index 2f5aa0c..6052cac 100644
--- a/packages/tooltip/src/lib/tooltip-content.tsx
+++ b/packages/tooltip/src/lib/tooltip-content.tsx
@@ -17,15 +17,13 @@ export const TooltipContent = ({ children, className, variant, position = "top"
         bottom: 'left-1/2 top-full z-20 mt-3 -translate-x-1/2',
     }
     const classes = cn(
-        'absolute rounded whitespace-nowrap px-4 py-[6px] text-sm font-semibold  opacity-0 group-hover:opacity-100',
-        variant === 'dark' ? 'bg-black text-white' : 'bg-white text-black',
+        'tooltip-content hidden absolute rounded whitespace-nowrap w-auto px-4 py-[6px] text-center text-sm font-semibold shadow-slate-300',
+        variant === 'dark' ? 'bg-[#2D3643] text-white' : 'bg-[#E9EFF6] text-slate-600',
         positionClasses[position]
     )
     return (
         <div className={classes}>
-            <div className={`w-40 whitespace-normal text-center`}>
                 {children}
-            </div>
         </div>
     )
 }
\ No newline at end of file
diff --git a/packages/tooltip/src/lib/tooltip.tsx b/packages/tooltip/src/lib/tooltip.tsx
index ea1f201..8104a51 100644
--- a/packages/tooltip/src/lib/tooltip.tsx
+++ b/packages/tooltip/src/lib/tooltip.tsx
@@ -2,13 +2,13 @@ import { cn } from "@bootwind/common";
 import React, { ReactNode } from "react";
 
 export interface TooltipProps {
-  content: ReactNode;
+  content?: ReactNode;
   children: ReactNode;
   variant?: "dark" | "light",
   position?: "top" | "bottom" | "right" | "left";
 }
 
-const Tooltip: React.FC<TooltipProps> = ({ children, content }) => {
+const Tooltip: React.FC<TooltipProps> = ({ children }) => {
   
   return (
     <div className="tooltip-wrapper group relative inline-block"> 
diff --git a/packages/ui/src/scss/main.scss b/packages/ui/src/scss/main.scss
index e62d204..41b28a5 100644
--- a/packages/ui/src/scss/main.scss
+++ b/packages/ui/src/scss/main.scss
@@ -9,6 +9,6 @@ a {
     @apply text-indigo-600;
 }
 
-.tooltip-trigger:hover ~ .tooltip-content {
-    opacity: 1
+.tooltip-wrapper:hover .tooltip-content {
+    display: block
 }
\ No newline at end of file