@reactberry/system 2.0.0-beta

package/src/blocks/Table/useTableControls.ts

@@ -0,0 +1,331 @@
+"use client";
+import { useState, useMemo, useCallback } from "react";
+
+export type SortDirection = "asc" | "desc" | null;
+
+export interface UseTableControlsOptions<T> {
+  /** Initial data array */
+  data: T[];
+  /** Initial items per page */
+  initialItemsPerPage?: number;
+  /** Initial sort key */
+  initialSortKey?: string | null;
+  /** Initial sort direction */
+  initialSortDirection?: SortDirection;
+  /** Custom sort function */
+  customSort?: (data: T[], key: string, direction: "asc" | "desc") => T[];
+}
+
+export interface UseTableControlsReturn<T> {
+  // Sorted and paginated data
+  currentData: T[];
+  // Sorting
+  sortKey: string | null;
+  sortDirection: SortDirection;
+  handleSort: (key: string, direction: SortDirection) => void;
+  // Pagination
+  currentPage: number;
+  totalPages: number;
+  totalItems: number;
+  itemsPerPage: number;
+  handlePageChange: (page: number) => void;
+  handlePageSizeChange: (pageSize: number) => void;
+  // Utilities
+  resetPagination: () => void;
+  resetSorting: () => void;
+  resetAll: () => void;
+}
+
+/**
+ * Hook for managing table sorting and pagination
+ *
+ * @example
+ * ```tsx
+ * const tableControls = useTableControls({
+ *   data: users,
+ *   initialItemsPerPage: 10
+ * });
+ *
+ * return (
+ *   <>
+ *     <Table>
+ *       <TableHeader>
+ *         <TableRow>
+ *           <SortableTableHeader
+ *             sortKey="name"
+ *             currentSortKey={tableControls.sortKey}
+ *             currentSortDirection={tableControls.sortDirection}
+ *             onSort={tableControls.handleSort}
+ *           >
+ *             Name
+ *           </SortableTableHeader>
+ *         </TableRow>
+ *       </TableHeader>
+ *       <TableBody>
+ *         {tableControls.currentData.map(user => (
+ *           <TableRow key={user.id}>
+ *             <TableCell>{user.name}</TableCell>
+ *           </TableRow>
+ *         ))}
+ *       </TableBody>
+ *     </Table>
+ *     <TablePagination
+ *       currentPage={tableControls.currentPage}
+ *       totalPages={tableControls.totalPages}
+ *       totalItems={tableControls.totalItems}
+ *       itemsPerPage={tableControls.itemsPerPage}
+ *       onPageChange={tableControls.handlePageChange}
+ *       onPageSizeChange={tableControls.handlePageSizeChange}
+ *     />
+ *   </>
+ * );
+ * ```
+ */
+export function useTableControls<T>({
+  data,
+  initialItemsPerPage = 10,
+  initialSortKey = null,
+  initialSortDirection = null,
+  customSort,
+}: UseTableControlsOptions<T>): UseTableControlsReturn<T> {
+  // Sorting state
+  const [sortKey, setSortKey] = useState<string | null>(initialSortKey);
+  const [sortDirection, setSortDirection] =
+    useState<SortDirection>(initialSortDirection);
+
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState(0);
+  const [itemsPerPage, setItemsPerPage] = useState(initialItemsPerPage);
+
+  // Default sort function
+  const defaultSort = useCallback(
+    (data: T[], key: string, direction: "asc" | "desc"): T[] => {
+      return [...data].sort((a, b) => {
+        const aValue = (a as any)[key];
+        const bValue = (b as any)[key];
+
+        // Handle null/undefined values
+        if (aValue === null || aValue === undefined) return 1;
+        if (bValue === null || bValue === undefined) return -1;
+
+        // Handle different types
+        if (typeof aValue === "string" && typeof bValue === "string") {
+          const comparison = aValue
+            .toLowerCase()
+            .localeCompare(bValue.toLowerCase());
+          return direction === "asc" ? comparison : -comparison;
+        }
+
+        if (aValue < bValue) return direction === "asc" ? -1 : 1;
+        if (aValue > bValue) return direction === "asc" ? 1 : -1;
+        return 0;
+      });
+    },
+    [],
+  );
+
+  // Sort data
+  const sortedData = useMemo(() => {
+    if (!sortKey || !sortDirection) return data;
+
+    const sortFunction = customSort || defaultSort;
+    return sortFunction(data, sortKey, sortDirection);
+  }, [data, sortKey, sortDirection, customSort, defaultSort]);
+
+  // Calculate pagination
+  const totalItems = sortedData.length;
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+  // Ensure current page is valid
+  const validCurrentPage = Math.min(currentPage, Math.max(0, totalPages - 1));
+
+  // Paginate data
+  const currentData = useMemo(() => {
+    const start = validCurrentPage * itemsPerPage;
+    return sortedData.slice(start, start + itemsPerPage);
+  }, [sortedData, validCurrentPage, itemsPerPage]);
+
+  // Handlers
+  const handleSort = useCallback((key: string, direction: SortDirection) => {
+    setSortKey(direction ? key : null);
+    setSortDirection(direction);
+    // Reset to first page when sorting changes
+    setCurrentPage(0);
+  }, []);
+
+  const handlePageChange = useCallback((page: number) => {
+    setCurrentPage(page);
+  }, []);
+
+  const handlePageSizeChange = useCallback((pageSize: number) => {
+    setItemsPerPage(pageSize);
+    // Reset to first page when page size changes
+    setCurrentPage(0);
+  }, []);
+
+  // Utility functions
+  const resetPagination = useCallback(() => {
+    setCurrentPage(0);
+    setItemsPerPage(initialItemsPerPage);
+  }, [initialItemsPerPage]);
+
+  const resetSorting = useCallback(() => {
+    setSortKey(initialSortKey);
+    setSortDirection(initialSortDirection);
+  }, [initialSortKey, initialSortDirection]);
+
+  const resetAll = useCallback(() => {
+    resetPagination();
+    resetSorting();
+  }, [resetPagination, resetSorting]);
+
+  return {
+    // Data
+    currentData,
+    // Sorting
+    sortKey,
+    sortDirection,
+    handleSort,
+    // Pagination
+    currentPage: validCurrentPage,
+    totalPages,
+    totalItems,
+    itemsPerPage,
+    handlePageChange,
+    handlePageSizeChange,
+    // Utilities
+    resetPagination,
+    resetSorting,
+    resetAll,
+  };
+}
+
+/**
+ * Hook for filtering table data
+ *
+ * @example
+ * ```tsx
+ * const { filteredData, filters, updateFilter, resetFilters } = useTableFilters({
+ *   data: users,
+ *   filterFunctions: {
+ *     search: (item, value) =>
+ *       item.name.toLowerCase().includes(value.toLowerCase()) ||
+ *       item.email.toLowerCase().includes(value.toLowerCase()),
+ *     status: (item, value) => value === 'all' || item.status === value,
+ *     department: (item, value) => value === 'all' || item.department === value
+ *   },
+ *   initialFilters: {
+ *     search: '',
+ *     status: 'all',
+ *     department: 'all'
+ *   }
+ * });
+ * ```
+ */
+export interface UseTableFiltersOptions<T, F extends Record<string, any>> {
+  /** Data to filter */
+  data: T[];
+  /** Filter functions for each filter key */
+  filterFunctions: {
+    [K in keyof F]: (item: T, value: F[K]) => boolean;
+  };
+  /** Initial filter values */
+  initialFilters: F;
+}
+
+export interface UseTableFiltersReturn<T, F> {
+  /** Filtered data */
+  filteredData: T[];
+  /** Current filter values */
+  filters: F;
+  /** Update a single filter */
+  updateFilter: <K extends keyof F>(key: K, value: F[K]) => void;
+  /** Update multiple filters at once */
+  updateFilters: (filters: Partial<F>) => void;
+  /** Reset all filters to initial values */
+  resetFilters: () => void;
+  /** Check if any filters are active */
+  hasActiveFilters: boolean;
+}
+
+export function useTableFilters<T, F extends Record<string, any>>({
+  data,
+  filterFunctions,
+  initialFilters,
+}: UseTableFiltersOptions<T, F>): UseTableFiltersReturn<T, F> {
+  const [filters, setFilters] = useState<F>(initialFilters);
+
+  // Apply filters
+  const filteredData = useMemo(() => {
+    return data.filter((item) => {
+      for (const [key, filterFn] of Object.entries(filterFunctions)) {
+        const filterValue = filters[key as keyof F];
+        if (!filterFn(item, filterValue)) {
+          return false;
+        }
+      }
+      return true;
+    });
+  }, [data, filters, filterFunctions]);
+
+  // Update single filter
+  const updateFilter = useCallback(<K extends keyof F>(key: K, value: F[K]) => {
+    setFilters((prev) => ({ ...prev, [key]: value }));
+  }, []);
+
+  // Update multiple filters
+  const updateFilters = useCallback((newFilters: Partial<F>) => {
+    setFilters((prev) => ({ ...prev, ...newFilters }));
+  }, []);
+
+  // Reset filters
+  const resetFilters = useCallback(() => {
+    setFilters(initialFilters);
+  }, [initialFilters]);
+
+  // Check if any filters are active
+  const hasActiveFilters = useMemo(() => {
+    return Object.entries(filters).some(([key, value]) => {
+      return value !== initialFilters[key as keyof F];
+    });
+  }, [filters, initialFilters]);
+
+  return {
+    filteredData,
+    filters,
+    updateFilter,
+    updateFilters,
+    resetFilters,
+    hasActiveFilters,
+  };
+}
+
+/**
+ * Combine filtering with table controls
+ *
+ * @example
+ * ```tsx
+ * const filters = useTableFilters({ ... });
+ * const controls = useTableControls({
+ *   data: filters.filteredData,
+ *   ...
+ * });
+ * ```
+ */
+export function useFilteredTableControls<T, F extends Record<string, any>>(
+  filterOptions: UseTableFiltersOptions<T, F>,
+  controlOptions: Omit<UseTableControlsOptions<T>, "data">,
+) {
+  const filters = useTableFilters(filterOptions);
+  const controls = useTableControls({
+    ...controlOptions,
+    data: filters.filteredData,
+  });
+
+  return {
+    ...filters,
+    ...controls,
+    // Override data with the current page data
+    data: controls.currentData,
+  };
+}

package/src/blocks/Tag/index.tsx

@@ -0,0 +1,27 @@
+import { Text } from "@/design-system/elements";
+
+type TagProps = {
+  [key: string]: any;
+};
+
+export const Tag = ({ children, ...props }: TagProps) => {
+  return (
+    <Text
+      as="div"
+      display="flex"
+      alignItems="center"
+      gap="xxsmall"
+      p="xs"
+      py="xxxs"
+      color="secondary"
+      fontSize="small"
+      fontWeight="600"
+      shape="rounded"
+      width="fit-content"
+      flex="none"
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};

package/src/blocks/TextBreak/index.tsx

@@ -0,0 +1,96 @@
+"use client"
+import { Box, Text } from "@/design-system/elements"
+import { IconDotsAnim } from "@/design-system/icons"
+
+type TextBreakProps = {
+  message?: string
+  colorSchema?: string
+  loading?: boolean
+  showBreaks?: boolean
+  position?: "left" | "center" | "right"
+  children?: React.ReactNode
+  contentProps?: {
+    [key: string]: any
+  }
+  breakProps?: {
+    [key: string]: any
+  }
+
+  [key: string]: any
+}
+
+export default function TextBreak({
+  message,
+  loading,
+  showBreaks = true,
+  colorSchema = "default",
+  position = "center",
+  children,
+  contentProps = {},
+  breakProps = {},
+  ...props
+}: TextBreakProps) {
+  const noticePalette: any = {
+    default: ["tertiary", "secondary"],
+    attention: ["currentColor", "red"],
+    accent: ["currentColor", "accent"],
+  }
+
+  const content = message || children
+  const leftBreakFlex =
+    position === "right" ? "auto" : position === "center" ? "auto" : "0"
+  const rightBreakFlex =
+    position === "left" ? "auto" : position === "center" ? "auto" : "0"
+
+  return (
+    <Text
+      as="div"
+      color={noticePalette[colorSchema][1]}
+      display="flex"
+      alignItems={"center"}
+      width="100%"
+      fontSize="xsmall"
+      gap="xsmall"
+      {...props}
+    >
+      {showBreaks && position !== "left" && (
+        <Box
+          flex={leftBreakFlex}
+          width={"auto"}
+          height={"1px"}
+          bg={noticePalette[colorSchema][0]}
+          opacity="0.25"
+          {...breakProps}
+        />
+      )}
+      {content && (
+        <Text
+          as="div"
+          display="flex"
+          alignItems={"center"}
+          flex="none"
+          gap="xsmall"
+          px={position === "left" ? 0 : "small"}
+          py="xxxsmall"
+          shape="pill"
+          {...contentProps}
+        >
+          {loading && (
+            <IconDotsAnim color="currentColor" width="20" height="20" />
+          )}
+          <Text flex="none">{content}</Text>
+        </Text>
+      )}
+      {showBreaks && position !== "right" && (
+        <Box
+          flex={rightBreakFlex}
+          width={"auto"}
+          height={"1px"}
+          bg={noticePalette[colorSchema][0]}
+          opacity="0.25"
+          {...breakProps}
+        />
+      )}
+    </Text>
+  )
+}

package/src/blocks/TextReveal/index.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useMemo, useRef } from "react";
+import { motion, type MotionValue, useScroll, useTransform } from "motion/react";
+import styled from "styled-components";
+
+import { Text, type TextProps } from "@/design-system/elements";
+import { useReducedMotion } from "@/design-system/hooks/useReducedMotion";
+
+type ScrollOffset = NonNullable<Parameters<typeof useScroll>[0]>["offset"];
+
+export interface TextRevealProps extends Omit<TextProps, "children" | "as"> {
+  children: string;
+  baseOpacity?: number;
+  offset?: ScrollOffset;
+  revealEnd?: number;
+}
+
+const DEFAULT_OFFSET: ScrollOffset = ["start end", "end start"];
+
+interface RevealedWordProps {
+  children: string;
+  progress: MotionValue<number>;
+  range: [number, number];
+  baseOpacity: number;
+}
+
+const Word = styled.span`
+  position: relative;
+  display: inline-grid;
+  margin-right: 0.25em;
+  margin-bottom: 0.1em;
+`;
+
+const WordBase = styled.span<{ $baseOpacity: number }>`
+  grid-area: 1 / 1;
+  opacity: ${(props) => props.$baseOpacity};
+`;
+
+const WordForeground = styled(motion.span)`
+  grid-area: 1 / 1;
+  color: currentColor;
+`;
+
+function RevealedWord({ children, progress, range, baseOpacity }: RevealedWordProps) {
+  const opacity = useTransform(progress, range, [0, 1]);
+
+  return (
+    <Word aria-hidden="true">
+      <WordBase $baseOpacity={baseOpacity}>{children}</WordBase>
+      <WordForeground style={{ opacity }}>{children}</WordForeground>
+    </Word>
+  );
+}
+
+export default function TextReveal({
+  children,
+  baseOpacity = 0.18,
+  offset = DEFAULT_OFFSET,
+  revealEnd = 0.88,
+  ...props
+}: TextRevealProps) {
+  const textRef = useRef<HTMLDivElement | null>(null);
+  const prefersReducedMotion = useReducedMotion();
+  const words = useMemo(
+    () => children.trim().split(/\s+/).filter(Boolean),
+    [children],
+  );
+
+  const { scrollYProgress } = useScroll({
+    target: textRef,
+    offset,
+  });
+
+  const clampedRevealEnd = Math.max(0.1, Math.min(revealEnd, 1));
+
+  if (prefersReducedMotion) {
+    return (
+      <Text as="div" ref={textRef} {...props}>
+        {children}
+      </Text>
+    );
+  }
+
+  return (
+    <Text as="div" ref={textRef} aria-label={children} {...props}>
+      {words.map((word, index) => {
+        const start = (index / words.length) * clampedRevealEnd;
+        const end = ((index + 1) / words.length) * clampedRevealEnd;
+
+        return (
+          <RevealedWord
+            key={`${word}-${index}`}
+            progress={scrollYProgress}
+            range={[start, end]}
+            baseOpacity={baseOpacity}
+          >
+            {word}
+          </RevealedWord>
+        );
+      })}
+    </Text>
+  );
+}

package/src/blocks/Thumbnail/index.tsx

@@ -0,0 +1,26 @@
+"use client";
+import React from "react";
+import Box, { BoxProps } from "@/design-system/elements/box";
+import Image from "next/image";
+
+interface ThumbnailProps extends Omit<BoxProps, "as"> {
+  src: string;
+  alt: string;
+}
+
+const Thumbnail: React.FC<ThumbnailProps> = ({ src, alt, ...rest }) => {
+  return (
+    <Box position="relative" overflow="hidden" {...rest}>
+      <Box
+        as={Image}
+        src={src}
+        alt={alt}
+        fill
+        sizes="100rem"
+        style={{ objectFit: "cover" }}
+      />
+    </Box>
+  );
+};
+
+export default Thumbnail;

package/src/blocks/Ticker/index.tsx

@@ -0,0 +1,112 @@
+"use client";
+import React from "react";
+import { animate, motion, useMotionValue } from "motion/react";
+import { Box } from "@/design-system/elements";
+import useMeasure from "react-use-measure";
+
+interface TickerProps {
+  children: React.ReactNode;
+  fastDuration?: number;
+  slowDuration?: number;
+  direction?: "left" | "right";
+  gap?: string | number;
+  className?: string;
+}
+
+export default function Ticker({
+  children,
+  fastDuration = 25,
+  slowDuration = 75,
+  direction = "left",
+  gap = "medium",
+}: TickerProps) {
+  const [duration, setDuration] = React.useState(fastDuration);
+  const [ref, { width }] = useMeasure();
+  const xTranslation = useMotionValue(0);
+  const [mustFinish, setMustFinish] = React.useState(false);
+  const [rerender, setRerender] = React.useState(false);
+
+  // Convert direction string to multiplier
+  const directionMultiplier = direction === "left" ? -1 : 1;
+
+  // Convert children to array
+  const childrenArray = React.Children.toArray(children);
+
+  React.useEffect(() => {
+    if (!width) return;
+
+    let controls;
+    const finalPosition = (width / 2) * directionMultiplier;
+
+    if (mustFinish) {
+      const currentPosition = xTranslation.get();
+      const remainingDistance = finalPosition - currentPosition;
+      const progressRatio = Math.abs(remainingDistance / finalPosition);
+
+      controls = animate(xTranslation, finalPosition, {
+        ease: "linear",
+        duration: duration * progressRatio,
+        onComplete: () => {
+          setMustFinish(false);
+          setRerender(!rerender);
+          xTranslation.set(0);
+        },
+      });
+    } else {
+      controls = animate(xTranslation, finalPosition, {
+        ease: "linear",
+        duration: duration,
+        repeat: Infinity,
+        repeatType: "loop",
+        onRepeat: () => {
+          xTranslation.set(0);
+        },
+      });
+    }
+
+    return () => controls.stop();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rerender, duration, width, directionMultiplier, mustFinish]);
+
+  const renderItems = React.useCallback(() => {
+    // Create two sets of items to ensure smooth looping
+    const itemSet = (
+      <Box display="flex" gap={gap}>
+        {childrenArray.map((item, index) => (
+          <Box key={`set-${index}`}>{item}</Box>
+        ))}
+      </Box>
+    );
+
+    return (
+      <>
+        {itemSet}
+        {itemSet}
+      </>
+    );
+  }, [childrenArray, gap]);
+
+  return (
+    <Box width="100%" height="100%" overflow="hidden">
+      <Box
+        as={motion.div}
+        ref={ref}
+        style={{ x: xTranslation }}
+        display="flex"
+        gap={gap}
+        width="fit-content"
+        onHoverStart={() => {
+          setMustFinish(true);
+          setDuration(slowDuration);
+        }}
+        onHoverEnd={() => {
+          setMustFinish(true);
+          setDuration(fastDuration);
+        }}
+      >
+        {renderItems()}
+      </Box>
+    </Box>
+  );
+}