docs(ui): add base for ui component showcase in docs (#4414)

platform/ui-next/src/components/BackgroundColorSelect/index.tsx

@@ -1,2 +1 @@
-// src/components/BackgroundColorSelect/index.ts
 export { default as BackgroundColorSelect } from './BackgroundColorSelect';

platform/ui-next/src/components/DataRow/DataRow.tsx

@@ -0,0 +1,196 @@
+import React, { useState } from 'react';
+import { Button } from '../../components/Button/Button';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '../../components/DropdownMenu';
+import { Icons } from '../../components/Icons/Icons';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from '../../components/Tooltip/Tooltip';
+
+interface DataRowProps {
+  number: number;
+  title: string;
+  description: string;
+  optionalField?: string;
+  colorHex?: string;
+  details?: string;
+  series?: string;
+  actionOptions: string[];
+  onAction: (action: string) => void;
+  isSelected?: boolean;
+  onSelect?: () => void;
+}
+
+const DataRow: React.FC<DataRowProps> = ({
+  number,
+  title,
+  description,
+  optionalField,
+  colorHex,
+  details,
+  series,
+  actionOptions,
+  onAction,
+  isSelected = false,
+  onSelect,
+}) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+  const isTitleLong = title.length > 25;
+
+  return (
+    <TooltipProvider>
+      {' '}
+      {/* Ensure TooltipProvider wraps the component */}
+      <div className="flex flex-col">
+        {/* Row 1 with 'group' class to enable group-hover */}
+        <div
+          className={`flex items-center ${
+            isSelected ? 'bg-popover' : 'bg-muted'
+          } group relative cursor-pointer ${isVisible ? '' : 'opacity-60'}`}
+          onClick={onSelect}
+        >
+          {/* Hover Overlay */}
+          <div className="bg-primary/20 pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100"></div>
+
+          {/* Number Box */}
+          <div
+            className={`flex h-7 max-h-7 w-7 flex-shrink-0 items-center justify-center rounded-l border-r border-black text-sm ${
+              isSelected ? 'bg-highlight text-black' : 'bg-muted text-muted-foreground'
+            } overflow-hidden`}
+          >
+            {number}
+          </div>
+
+          {/* Color Circle (Optional) */}
+          {colorHex && (
+            <div className="flex h-7 w-5 items-center justify-center">
+              <span
+                className="ml-2 h-2 w-2 rounded-full"
+                style={{ backgroundColor: colorHex }}
+              ></span>
+            </div>
+          )}
+
+          {/* Label with Conditional Tooltip */}
+          <div className="ml-2 flex-1 overflow-hidden">
+            {isTitleLong ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span
+                    className={`cursor-default text-sm ${
+                      isSelected ? 'text-highlight' : 'text-muted-foreground'
+                    } [overflow:hidden] [display:-webkit-box] [-webkit-line-clamp:2] [-webkit-box-orient:vertical]`}
+                  >
+                    {title}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="top"
+                  align="center"
+                >
+                  {title}
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <span
+                className={`text-sm ${
+                  isSelected ? 'text-highlight' : 'text-muted-foreground'
+                } [overflow:hidden] [display:-webkit-box] [-webkit-line-clamp:2] [-webkit-box-orient:vertical]`}
+              >
+                {title}
+              </span>
+            )}
+          </div>
+
+          {/* Actions and Visibility Toggle */}
+          <div className="relative ml-2 flex items-center space-x-1">
+            {/* Visibility Toggle Icon */}
+            {isVisible ? (
+              <Button
+                size="small"
+                variant="ghost"
+                className={`h-6 w-6 transition-opacity ${
+                  isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+                }`}
+                aria-label="Hide"
+                onClick={e => {
+                  e.stopPropagation(); // Prevent row selection on button click
+                  setIsVisible(false);
+                }}
+              >
+                <Icons.Hide className="h-6 w-6" />
+              </Button>
+            ) : (
+              <Button
+                size="small"
+                variant="ghost"
+                className="h-6 w-6 opacity-100"
+                aria-label="Show"
+                onClick={e => {
+                  e.stopPropagation(); // Prevent row selection on button click
+                  setIsVisible(true);
+                }}
+              >
+                <Icons.Show className="h-6 w-6" />
+              </Button>
+            )}
+
+            {/* Actions Dropdown Menu */}
+            <DropdownMenu onOpenChange={open => setIsDropdownOpen(open)}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  size="small"
+                  variant="ghost"
+                  className={`h-6 w-6 transition-opacity ${
+                    isSelected || isDropdownOpen
+                      ? 'opacity-100'
+                      : 'opacity-0 group-hover:opacity-100'
+                  }`}
+                  aria-label="Actions"
+                  onClick={e => e.stopPropagation()} // Prevent row selection on button click
+                >
+                  <Icons.More className="h-6 w-6" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>
+                  <Icons.Rename className="text-foreground" />
+                  <span className="pl-2">Rename</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Icons.Lock className="text-foreground" />
+                  <span className="pl-2">Lock</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Icons.Delete className="text-foreground" />
+                  <span className="pl-2">Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        {/* Row 2 (Details and Series) */}
+        {(details || series) && (
+          <div className="ml-7 bg-black px-2 py-1">
+            {/* Updated Flex Container: Changed 'items-center' to 'items-start' */}
+            <div className="text-secondary-foreground flex items-start justify-between whitespace-pre-line text-sm leading-normal">
+              <span>{details}</span>
+              {series && <span className="text-muted-foreground">{series}</span>}
+            </div>
+          </div>
+        )}
+      </div>
+    </TooltipProvider>
+  );
+};
+
+export default DataRow;

platform/ui-next/src/components/DataRow/index.ts

@@ -0,0 +1 @@
+export { default as DataRow } from './DataRow';

platform/ui-next/src/components/Icons/Icons.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
+import { Code } from 'lucide-react';
 
 type IconProps = React.HTMLAttributes<SVGElement>;
 
 export const Icons = {
   // Usage example: <Icons.ArrowLeft />
-
+  Code: Code,
   Add: (props: IconProps) => (
     <svg
       width="24px"

platform/ui-next/src/components/Input/Input.tsx

@@ -19,6 +19,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     );
   }
 );
+
 Input.displayName = 'Input';
 
 export { Input };

platform/ui-next/src/components/index.ts

@@ -23,6 +23,7 @@ import {
   DialogTitle,
   DialogDescription,
 } from './Dialog';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select';
 
 import { Combobox } from './Combobox';
 import { Popover, PopoverContent, PopoverTrigger, PopoverAnchor } from './Popover';
@@ -68,6 +69,8 @@ import {
   DropdownMenuRadioGroup,
 } from './DropdownMenu';
 import { Onboarding } from './Onboarding';
+import { BackgroundColorSelect } from './BackgroundColorSelect';
+import { DataRow } from './DataRow';
 
 export {
   Button,
@@ -147,4 +150,11 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
   Onboarding,
+  BackgroundColorSelect,
+  DataRow,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 };