Merge pull request #15 from bootwindproject/feat/datadisplay

feat: data display example
bootwindui · Dec 12, 2023 · 9ec3bdd · 9ec3bdd
2 parents edde857 + 52642cb
commit 9ec3bdd
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 51 deletions.
diff --git 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/tooltip/src/lib/tooltip-content.tsx b/packages/tooltip/src/lib/tooltip-content.tsx
@@ -0,0 +1,29 @@
+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(
+        '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}>
+                {children}
+        </div>
+    )
+}
diff --git a/packages/tooltip/src/lib/tooltip-trigger.tsx 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>
+)
diff --git a/packages/tooltip/src/lib/tooltip.tsx b/packages/tooltip/src/lib/tooltip.tsx
@@ -1,46 +1,18 @@
+import { cn } from "@bootwind/common";
 import React, { ReactNode } from "react";
 
 export interface TooltipProps {
-  position: "top" | "bottom" | "right" | "left";
-  content: ReactNode;
+  content?: ReactNode;
   children: ReactNode;
-  color?: "dark" | "light";
+  variant?: "dark" | "light",
+  position?: "top" | "bottom" | "right" | "left";
 }
 
-const Tooltip: React.FC<TooltipProps> = ({ children, content, position, color = "dark" }) => {
+const Tooltip: React.FC<TooltipProps> = ({ children }) => {
+
   return (
-    <div className="mb-14">
-      <div className="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>
-        </div>
-      </div>
+    <div className="tooltip-wrapper group relative inline-block"> 
+        {children}
     </div>
   );
 };

diff --git 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,45 +17,52 @@ 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',
-    color: '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',
-    color: 'light'
 };
 
 export const Dark = Template.bind({});
 Dark.args = {
     position: 'bottom',
     content: 'Dark Tooltip',
-    color: 'dark'
+    variant: 'dark'
 };
diff --git 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',

diff --git a/packages/ui/src/scss/main.scss b/packages/ui/src/scss/main.scss
@@ -4,4 +4,11 @@
 
 body {
     font-family: 'Inter';
+}
+a {
+    @apply text-indigo-600;
+}
+
+.tooltip-wrapper:hover .tooltip-content {
+    display: block
 }
diff --git a/packages/ui/src/stories/examples/DataDisplay.stories.tsx 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>
+    )
+}
+
diff --git 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"]
     }
   }
 }