@hanzo/ui 4.7.0 → 4.8.3

package/blocks/components/video-block.tsx

@@ -0,0 +1,138 @@
+'use client'
+import React, { useEffect, useLayoutEffect, useState } from 'react'
+
+import Image from 'next/image'
+
+import type { Dimensions, TShirtSize, TShirtDimensions } from '../../types'
+import { constrain, asNum, cn } from '../../util'
+import type { VideoBlock } from '../def'
+import { VideoPlayer } from '../../primitives/index-common'
+
+import type BlockComponentProps from './block-component-props'
+
+const VideoBlockComponent: React.FC<BlockComponentProps & {
+  usePoster?: boolean
+  size?: TShirtSize
+  constrainTo?: Dimensions
+}> = ({
+  block,
+  className='',
+  agent,
+  usePoster=false,
+  size='md',
+  constrainTo
+}) => {
+
+  const [_dim, setDim] = useState<Dimensions | undefined>(undefined)
+
+  const onResize = () => { 
+    setDim({
+      w: window.innerWidth,
+      h: window.innerHeight
+    }) 
+  } 
+
+  const windowDefined = typeof window !== 'undefined'
+
+  useEffect(() => { 
+    if (window && agent === 'desktop') {
+      window.addEventListener('resize', onResize) 
+      return () => window.removeEventListener('resize', onResize) 
+    }
+  }, [windowDefined]) 
+
+  useLayoutEffect(() => { 
+    onResize() 
+  }, [])
+
+
+  if (block.blockType !== 'video') {
+    return <>video block required</>
+  }
+
+  const b = block as VideoBlock
+  const ar = b.dim.md.w / b.dim.md.h
+  if (agent === 'phone') {
+    if (b.sizing?.mobile?.vw) {
+      // serverside, or at least while the video is loading,
+      // generate the css for the correctly sized poster image
+      if (!_dim) {
+        const width = `${b.sizing.mobile.vw}vw`
+        return <div className='dummy-div' style={{
+          maxWidth: '100%',
+          maxHeight: '100%',
+          width,
+          height: `calc(${width}/${ar})`,
+          backgroundImage: `url(${b.poster!})`,
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat', 
+        }} />
+      }
+      else {
+        const width = ((b.sizing.mobile.vw / 100) * _dim.w)
+        const dim  = {
+          h: width / ar,
+          w: width
+        }
+        return ((
+          <VideoPlayer 
+            className={cn('mx-auto', className)} 
+            sources={b.sources} 
+            width={dim.w} 
+            height={dim.h} 
+            {...b.videoProps} 
+          />
+        ))
+      }
+    }
+  }
+  else if (b.sizing?.vh) {
+      // serverside, generate the css for the correctly sized poster image
+    if (!_dim) {
+      const height = `${b.sizing.vh}vh`
+      return <div className='dummy-div' style={{
+        maxWidth: '100%',
+        maxHeight: '100%',
+        height: height,
+        width: `calc(${height}*${ar})`,
+        backgroundImage: `url(${b.poster!})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat', 
+      }} />
+    }
+    else {
+
+      const height = ((b.sizing.vh / 100) * _dim.h)
+      const dim  = {
+        h: height,
+        w: height * ar
+      }
+      return ((
+        <VideoPlayer 
+          className={cn('mx-auto', className)} 
+          sources={b.sources} 
+          width={dim.w} 
+          height={dim.h} 
+          {...b.videoProps} 
+        />
+      ))
+    }
+  }
+  
+  const videoDims = b.dim as TShirtDimensions
+  const dim = ((size && size in videoDims) ? videoDims[size] : videoDims.md) as Dimensions
+  const conDim = (constrainTo ? constrain(dim, constrainTo) : dim) 
+  return usePoster ? (
+    <Image src={b.poster!} alt='image' width={conDim.w} height={conDim.h} className={className}/>
+  ) : (
+    <VideoPlayer 
+      className={cn('mx-auto', className)} 
+      sources={b.sources} 
+      width={conDim.w} 
+      height={conDim.h} 
+      {...b.videoProps} 
+    />
+  )
+}
+
+export default VideoBlockComponent

package/blocks/data-display/activity-feed.tsx

@@ -0,0 +1,242 @@
+'use client'
+
+import { cn } from '@hanzo/ui/util'
+import { Avatar, AvatarFallback, AvatarImage } from '@hanzo/ui/primitives'
+import { Badge } from '@hanzo/ui/primitives'
+import { Card, CardContent, CardHeader, CardTitle } from '@hanzo/ui/primitives'
+import type { LucideIcon } from 'lucide-react'
+
+interface Activity {
+  id: string | number
+  user: {
+    name: string
+    avatar?: string
+    email?: string
+  }
+  action: string
+  target?: string
+  timestamp: Date | string
+  type?: 'default' | 'success' | 'warning' | 'error' | 'info'
+  icon?: LucideIcon
+  metadata?: Record<string, any>
+}
+
+interface ActivityFeedProps extends React.ComponentPropsWithoutRef<'div'> {
+  activities: Activity[]
+  title?: string
+  variant?: 'default' | 'timeline' | 'compact'
+  showDate?: boolean
+}
+
+export function ActivityFeed({
+  className,
+  activities,
+  title,
+  variant = 'default',
+  showDate = true,
+  ...props
+}: ActivityFeedProps) {
+  const formatTime = (timestamp: Date | string) => {
+    const date = new Date(timestamp)
+    const now = new Date()
+    const diff = now.getTime() - date.getTime()
+    
+    const minutes = Math.floor(diff / 60000)
+    const hours = Math.floor(diff / 3600000)
+    const days = Math.floor(diff / 86400000)
+    
+    if (minutes < 1) return 'Just now'
+    if (minutes < 60) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
+    if (hours < 24) return `${hours} hour${hours > 1 ? 's' : ''} ago`
+    if (days < 7) return `${days} day${days > 1 ? 's' : ''} ago`
+    
+    return date.toLocaleDateString()
+  }
+
+  const getTypeStyles = (type?: Activity['type']) => {
+    switch (type) {
+      case 'success':
+        return 'border-green-500 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100'
+      case 'warning':
+        return 'border-yellow-500 bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100'
+      case 'error':
+        return 'border-red-500 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100'
+      case 'info':
+        return 'border-blue-500 bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-100'
+      default:
+        return ''
+    }
+  }
+
+  const getUserInitials = (name: string) => {
+    return name
+      .split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase()
+  }
+
+  if (variant === 'timeline') {
+    return (
+      <div className={cn('space-y-4', className)} {...props}>
+        {title && <h3 className="text-lg font-semibold">{title}</h3>}
+        <div className="relative">
+          <div className="absolute left-6 top-0 h-full w-0.5 bg-border" />
+          <div className="space-y-6">
+            {activities.map((activity, i) => {
+              const Icon = activity.icon
+              return (
+                <div key={activity.id || i} className="relative flex gap-4">
+                  <div className="relative z-10 flex h-12 w-12 items-center justify-center">
+                    <div className="absolute h-3 w-3 rounded-full bg-background border-2 border-primary" />
+                  </div>
+                  <div className="flex-1 space-y-1">
+                    <div className="flex items-start justify-between">
+                      <div className="space-y-1">
+                        <p className="text-sm">
+                          <span className="font-semibold">{activity.user.name}</span>{' '}
+                          {activity.action}
+                          {activity.target && (
+                            <span className="font-medium"> {activity.target}</span>
+                          )}
+                        </p>
+                        {activity.metadata && (
+                          <div className="flex flex-wrap gap-2">
+                            {Object.entries(activity.metadata).map(([key, value]) => (
+                              <Badge key={key} variant="secondary" className="text-xs">
+                                {key}: {value}
+                              </Badge>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                      {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+                    </div>
+                    {showDate && (
+                      <p className="text-xs text-muted-foreground">
+                        {formatTime(activity.timestamp)}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (variant === 'compact') {
+    return (
+      <Card className={className} {...props}>
+        {title && (
+          <CardHeader>
+            <CardTitle>{title}</CardTitle>
+          </CardHeader>
+        )}
+        <CardContent className="p-0">
+          <div className="divide-y">
+            {activities.map((activity, i) => {
+              const Icon = activity.icon
+              return (
+                <div
+                  key={activity.id || i}
+                  className={cn(
+                    'flex items-center gap-3 px-6 py-3',
+                    getTypeStyles(activity.type)
+                  )}
+                >
+                  <Avatar className="h-8 w-8">
+                    <AvatarImage src={activity.user.avatar} />
+                    <AvatarFallback className="text-xs">
+                      {getUserInitials(activity.user.name)}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm truncate">
+                      <span className="font-medium">{activity.user.name}</span>{' '}
+                      {activity.action}
+                      {activity.target && (
+                        <span className="font-medium"> {activity.target}</span>
+                      )}
+                    </p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+                    {showDate && (
+                      <p className="text-xs text-muted-foreground">
+                        {formatTime(activity.timestamp)}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  // Default variant
+  return (
+    <div className={cn('space-y-4', className)} {...props}>
+      {title && <h3 className="text-lg font-semibold">{title}</h3>}
+      <div className="space-y-4">
+        {activities.map((activity, i) => {
+          const Icon = activity.icon
+          return (
+            <div
+              key={activity.id || i}
+              className={cn(
+                'flex gap-4 rounded-lg border p-4',
+                getTypeStyles(activity.type)
+              )}
+            >
+              <Avatar>
+                <AvatarImage src={activity.user.avatar} />
+                <AvatarFallback>
+                  {getUserInitials(activity.user.name)}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1 space-y-1">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <p className="text-sm">
+                      <span className="font-semibold">{activity.user.name}</span>{' '}
+                      {activity.action}
+                      {activity.target && (
+                        <span className="font-medium"> {activity.target}</span>
+                      )}
+                    </p>
+                    {activity.user.email && (
+                      <p className="text-xs text-muted-foreground">
+                        {activity.user.email}
+                      </p>
+                    )}
+                  </div>
+                  {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+                </div>
+                {activity.metadata && (
+                  <div className="flex flex-wrap gap-2 pt-2">
+                    {Object.entries(activity.metadata).map(([key, value]) => (
+                      <Badge key={key} variant="secondary" className="text-xs">
+                        {key}: {value}
+                      </Badge>
+                    ))}
+                  </div>
+                )}
+                {showDate && (
+                  <p className="text-xs text-muted-foreground">
+                    {formatTime(activity.timestamp)}
+                  </p>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/blocks/data-display/data-table.tsx

@@ -0,0 +1,235 @@
+'use client'
+
+import { useState } from 'react'
+import { cn } from '@hanzo/ui/util'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@hanzo/ui/primitives'
+import { Button } from '@hanzo/ui/primitives'
+import { Input } from '@hanzo/ui/primitives'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@hanzo/ui/primitives'
+import { ChevronUp, ChevronDown, Search } from 'lucide-react'
+
+interface Column<T> {
+  key: string
+  header: string
+  accessor: (row: T) => any
+  sortable?: boolean
+  searchable?: boolean
+  render?: (value: any, row: T) => React.ReactNode
+}
+
+interface DataTableProps<T> extends React.ComponentPropsWithoutRef<'div'> {
+  data: T[]
+  columns: Column<T>[]
+  pageSize?: number
+  searchable?: boolean
+  title?: string
+  description?: string
+  onRowClick?: (row: T) => void
+}
+
+export function DataTable<T>({
+  className,
+  data,
+  columns,
+  pageSize = 10,
+  searchable = true,
+  title,
+  description,
+  onRowClick,
+  ...props
+}: DataTableProps<T>) {
+  const [currentPage, setCurrentPage] = useState(1)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [sortColumn, setSortColumn] = useState<string | null>(null)
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
+  const [itemsPerPage, setItemsPerPage] = useState(pageSize)
+
+  // Filter data based on search
+  const filteredData = searchTerm
+    ? data.filter((row) =>
+        columns.some((column) => {
+          if (column.searchable === false) return false
+          const value = column.accessor(row)
+          return value?.toString().toLowerCase().includes(searchTerm.toLowerCase())
+        })
+      )
+    : data
+
+  // Sort data
+  const sortedData = [...filteredData].sort((a, b) => {
+    if (!sortColumn) return 0
+    
+    const column = columns.find((col) => col.key === sortColumn)
+    if (!column) return 0
+    
+    const aValue = column.accessor(a)
+    const bValue = column.accessor(b)
+    
+    if (aValue === bValue) return 0
+    
+    const comparison = aValue < bValue ? -1 : 1
+    return sortDirection === 'asc' ? comparison : -comparison
+  })
+
+  // Paginate data
+  const totalPages = Math.ceil(sortedData.length / itemsPerPage)
+  const startIndex = (currentPage - 1) * itemsPerPage
+  const paginatedData = sortedData.slice(startIndex, startIndex + itemsPerPage)
+
+  const handleSort = (columnKey: string) => {
+    if (sortColumn === columnKey) {
+      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortColumn(columnKey)
+      setSortDirection('asc')
+    }
+  }
+
+  return (
+    <div className={cn('space-y-4', className)} {...props}>
+      {(title || description || searchable) && (
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            {title && <h3 className="text-lg font-semibold">{title}</h3>}
+            {description && (
+              <p className="text-sm text-muted-foreground">{description}</p>
+            )}
+          </div>
+          {searchable && (
+            <div className="relative w-full sm:w-64">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search..."
+                value={searchTerm}
+                onChange={(e) => {
+                  setSearchTerm(e.target.value)
+                  setCurrentPage(1)
+                }}
+                className="pl-8"
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((column) => (
+                <TableHead
+                  key={column.key}
+                  className={column.sortable ? 'cursor-pointer select-none' : ''}
+                  onClick={() => column.sortable && handleSort(column.key)}
+                >
+                  <div className="flex items-center gap-2">
+                    {column.header}
+                    {column.sortable && sortColumn === column.key && (
+                      <>
+                        {sortDirection === 'asc' ? (
+                          <ChevronUp className="h-4 w-4" />
+                        ) : (
+                          <ChevronDown className="h-4 w-4" />
+                        )}
+                      </>
+                    )}
+                  </div>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedData.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No data available
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedData.map((row, i) => (
+                <TableRow
+                  key={i}
+                  className={onRowClick ? 'cursor-pointer' : ''}
+                  onClick={() => onRowClick?.(row)}
+                >
+                  {columns.map((column) => (
+                    <TableCell key={column.key}>
+                      {column.render
+                        ? column.render(column.accessor(row), row)
+                        : column.accessor(row)}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {totalPages > 1 && (
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>Rows per page:</span>
+            <Select
+              value={itemsPerPage.toString()}
+              onValueChange={(value) => {
+                setItemsPerPage(parseInt(value))
+                setCurrentPage(1)
+              }}
+            >
+              <SelectTrigger className="h-8 w-16">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="5">5</SelectItem>
+                <SelectItem value="10">10</SelectItem>
+                <SelectItem value="25">25</SelectItem>
+                <SelectItem value="50">50</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">
+              Showing {startIndex + 1}-{Math.min(startIndex + itemsPerPage, sortedData.length)} of {sortedData.length}
+            </span>
+            <div className="flex gap-1">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(currentPage - 1)}
+                disabled={currentPage === 1}
+              >
+                Previous
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage(currentPage + 1)}
+                disabled={currentPage === totalPages}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}