Merge pull request #5 from bearkfear/feature/tooltip

feat: enhance form item stories with tooltips and improve table build…

Author: gabrieldallafavera

packages/formbuilder/lib/model/field.ts

@@ -18,6 +18,11 @@ export type FormField<
 	size: number;
 	placeholder?: string;
 	helperText?: string;
+	tooltip?: {
+		trigger: React.ReactNode;
+		content: React.ReactNode;
+		side?: "top" | "right" | "bottom" | "left";
+	};
 	className?: string;
 	style?: React.CSSProperties;
 	/**

packages/formbuilder/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@4bits/formbuilder",
-	"version": "1.6.17",
+	"version": "1.6.18",
 	"private": false,
 	"main": "dist/index.js",
 	"module": "dist/index.mjs",
@@ -40,4 +40,4 @@
 		"format": "biome format --fix",
 		"tsc": "tsc --noEmit"
 	}
-}
+}

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@4bits/ui",
-	"version": "1.14.68",
+	"version": "1.14.69",
 	"private": false,
 	"main": "dist/index.js",
 	"module": "dist/esm/index.js",
@@ -90,4 +90,4 @@
 		"tsc": "tsc --noEmit",
 		"ci:fix": "biome check --fix && biome format --fix && tsc --noEmit"
 	}
-}
+}

packages/ui/src/components/ui/form/builder/form-anatomy.tsx

@@ -21,6 +21,7 @@ import { cn } from "../../../../lib/utils";
 import { HelperText } from "../helper-text";
 import { Label } from "../label";
 import { FormControl } from "./form-control";
+import { Tooltip } from "../../tooltip";
 
 export function FormAnatomy<
 	TFieldValues extends FieldValues = FieldValues,
@@ -77,6 +78,18 @@ export function FormAnatomy<
 						{props.fieldConfig.leftAddon}
 						{FormItemControl}
 						{props.fieldConfig.label !== undefined && FormItemLabel}
+						{props.fieldConfig.tooltip && (
+							<Tooltip.Provider skipDelayDuration={0} delayDuration={0}>
+								<Tooltip.Root>
+									<Tooltip.Trigger>
+										{props.fieldConfig.tooltip.trigger}
+									</Tooltip.Trigger>
+									<Tooltip.Content side={props.fieldConfig.tooltip.side}>
+										{props.fieldConfig.tooltip.content}
+									</Tooltip.Content>
+								</Tooltip.Root>
+							</Tooltip.Provider>
+						)}
 					</div>
 					{FormItemHelperText}
 				</div>
@@ -99,6 +112,18 @@ export function FormAnatomy<
 					<div className="flex space-x-2">
 						{props.fieldConfig.leftAddon}
 						{props.fieldConfig.label !== undefined && FormItemLabel}
+						{props.fieldConfig.tooltip && (
+							<Tooltip.Provider skipDelayDuration={0} delayDuration={0}>
+								<Tooltip.Root>
+									<Tooltip.Trigger>
+										{props.fieldConfig.tooltip.trigger}
+									</Tooltip.Trigger>
+									<Tooltip.Content side={props.fieldConfig.tooltip.side}>
+										{props.fieldConfig.tooltip.content}
+									</Tooltip.Content>
+								</Tooltip.Root>
+							</Tooltip.Provider>
+						)}
 					</div>
 					{props.fieldConfig.rightAddon}
 				</div>

packages/ui/src/components/ui/table-builder/header/column-item.tsx

@@ -2,35 +2,48 @@
 
 import { cn } from "../../../../lib/utils";
 import { Table } from "../../table";
+import { Tooltip } from "../../tooltip";
 import type { Column, Columns, SortableType } from "../types";
 import { ButtonSort } from "./button-sort";
 
 type ColumnDefaultProps<C extends Columns> = SortableType<C> & {
-  column: Column;
+	column: Column;
 };
 
 export function ColumnItem<C extends Columns>({
-  column,
-  sortable,
+	column,
+	sortable,
 }: ColumnDefaultProps<C>) {
-  return (
-    <Table.Head key={column.id} className={column.className}>
-      <div
-        className={cn(
-          "flex space-x-1 items-center",
-          column.position && `justify-${column.position}`
-        )}
-      >
-        <div className="text-xs">{column.title}</div>
-        {sortable?.cols.includes(column.id) && (
-          <ButtonSort
-            columnId={column.id}
-            sortBy={sortable.sortBy}
-            sortDirection={sortable.sortDirection}
-            onSort={sortable.onSort}
-          />
-        )}
-      </div>
-    </Table.Head>
-  );
+	return (
+		<Table.Head key={column.id} className={column.className}>
+			<div
+				className={cn(
+					"flex space-x-1 items-center",
+					column.position && `justify-${column.position}`,
+				)}
+			>
+				<div className="text-xs">{column.title}</div>
+
+				{column.tooltip && (
+					<Tooltip.Provider skipDelayDuration={0} delayDuration={0}>
+						<Tooltip.Root>
+							<Tooltip.Trigger>{column.tooltip.trigger}</Tooltip.Trigger>
+							<Tooltip.Content side={column.tooltip.side}>
+								{column.tooltip.content}
+							</Tooltip.Content>
+						</Tooltip.Root>
+					</Tooltip.Provider>
+				)}
+
+				{sortable?.cols.includes(column.id) && (
+					<ButtonSort
+						columnId={column.id}
+						sortBy={sortable.sortBy}
+						sortDirection={sortable.sortDirection}
+						onSort={sortable.onSort}
+					/>
+				)}
+			</div>
+		</Table.Head>
+	);
 }

packages/ui/src/components/ui/table-builder/types.ts

@@ -8,6 +8,11 @@ export type Column = {
 	id: string;
 	className?: string;
 	position?: "start" | "center" | "end";
+	tooltip?: {
+		trigger: ReactNode;
+		content: ReactNode;
+		side?: "top" | "right" | "bottom" | "left";
+	};
 };
 
 export type Columns = readonly Column[];