@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.1

package/src/components/experimental/Table.tsx

@@ -0,0 +1,239 @@
+/* eslint-disable react/no-multi-comp */
+import type { UniversalTextProps } from '@yahoo/uds/tokens';
+import type {
+  ForwardedRef,
+  HTMLAttributes,
+  PropsWithChildren,
+  TableHTMLAttributes,
+  TdHTMLAttributes,
+} from 'react';
+import React, { forwardRef, isValidElement } from 'react';
+
+import { getStyles } from '../../styles/styler';
+import type { BoxProps, TextProps } from '..';
+import { Box, Text } from '..';
+
+/**
+ * TableColumn
+ * A TableColumn is a definition of a column in a table.
+ */
+type TableColumn<T> = {
+  title?: string;
+  dataIndex: keyof T;
+  render?: (value: T[keyof T], record: T, index: number) => React.ReactNode;
+};
+
+type TableRootProps = TableHTMLAttributes<HTMLTableElement> &
+  BoxProps & {
+    /** Sets whether an element is treated as a block or inline box and the
+     *  layout used for its children, such as flow layout, grid or flex.
+     *  @default "table"
+     */
+    display?: BoxProps['display'];
+  };
+const TableRoot = forwardRef(function TableRoot(
+  {
+    children,
+    className,
+    display = 'table',
+    overflow = 'hidden',
+    borderColor = 'muted',
+    borderRadius = 'md',
+    ...props
+  }: PropsWithChildren<TableRootProps>,
+  ref: ForwardedRef<HTMLTableElement>,
+) {
+  return (
+    <Box
+      asChild
+      borderColor={borderColor}
+      borderRadius={borderRadius}
+      className={className}
+      overflow={overflow}
+      display={display}
+      {...props}
+    >
+      <table ref={ref}>{children}</table>
+    </Box>
+  );
+});
+
+TableRoot.displayName = 'TableRoot';
+
+/* -------------------------------------------------------------------------- */
+/*                                  Table.Row                                 */
+/* -------------------------------------------------------------------------- */
+type TableRowProps = HTMLAttributes<HTMLTableRowElement> & BoxProps;
+const TableRow = forwardRef(function TableRow(
+  { children, display = 'table-row', ...props }: PropsWithChildren<TableRowProps>,
+  ref: ForwardedRef<HTMLTableRowElement>,
+) {
+  return (
+    <Box asChild display={display} {...props}>
+      <tr ref={ref}>{children}</tr>
+    </Box>
+  );
+});
+
+TableRow.displayName = 'TableRow';
+
+/* -------------------------------------------------------------------------- */
+/*                                Table.Header                                */
+/* -------------------------------------------------------------------------- */
+type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement> & BoxProps;
+const TableHeader = forwardRef(function TableHeader(
+  { children, display = 'table-header-group', ...props }: PropsWithChildren<TableHeaderProps>,
+  ref: ForwardedRef<HTMLTableSectionElement>,
+) {
+  return (
+    <Box asChild display={display} {...props}>
+      <thead ref={ref}>{children}</thead>
+    </Box>
+  );
+});
+
+TableHeader.displayName = 'TableHeader';
+
+/* -------------------------------------------------------------------------- */
+/*                                 Table.Body                                 */
+/* -------------------------------------------------------------------------- */
+type TableBodyProps = HTMLAttributes<HTMLTableSectionElement> & BoxProps;
+const TableBody = forwardRef(function TableBody(
+  { children, display = 'table-row-group', ...props }: PropsWithChildren<TableBodyProps>,
+  ref: ForwardedRef<HTMLTableSectionElement>,
+) {
+  return (
+    <Box asChild display={display} {...props}>
+      <tbody ref={ref}>{children}</tbody>
+    </Box>
+  );
+});
+
+TableBody.displayName = 'TableBody';
+
+/* -------------------------------------------------------------------------- */
+/*                                 Table.Cell                                 */
+/* -------------------------------------------------------------------------- */
+type HTMLTableCellProps = Omit<
+  TdHTMLAttributes<HTMLTableCellElement>,
+  'color' | 'height' | 'width'
+>;
+interface TableCellProps extends Omit<UniversalTextProps, 'color'>, HTMLTableCellProps {
+  /** asHeaderCell will return a th element instead of a td element.
+   *  If asHeaderCell is row, it will return a th element with scope="row"
+   *  @default false
+   */
+  asHeaderCell?: boolean | 'column' | 'row';
+  color?: TextProps['color'];
+}
+
+const TableCell = forwardRef(function TableCell(
+  {
+    // TODO: spread props here like we do in Text
+    // Or setup a macro to collect all the props into buckets
+    // @example: https://gist.github.com/jakeleboeuf/f3d871efdb74947105e8c1185fa8e82e
+    // TextProps
+    asHeaderCell,
+    className,
+    display = 'table-cell',
+    spacing = '3',
+    borderBottomColor = 'muted',
+    color = 'primary',
+    // TableCellProps
+    ...props
+  }: PropsWithChildren<TableCellProps>,
+  ref: ForwardedRef<HTMLTableCellElement | HTMLTableHeaderCellElement>,
+) {
+  const classNames = getStyles({ textAlign: 'start', className });
+  const CellComponent = asHeaderCell ? 'th' : 'td';
+  const cellScope = asHeaderCell === 'row' ? 'row' : asHeaderCell ? 'column' : undefined;
+  const textVariant: TextProps['variant'] = asHeaderCell ? 'headline1' : 'body1';
+
+  return (
+    <Text
+      asChild
+      variant={textVariant}
+      color={color}
+      display={display}
+      spacing={spacing}
+      borderBottomColor={borderBottomColor}
+      borderBottomWidth="thin"
+      className={classNames}
+    >
+      <CellComponent scope={cellScope} {...props} ref={ref} />
+    </Text>
+  );
+});
+
+TableCell.displayName = 'TableCell';
+
+/* -------------------------------------------------------------------------- */
+/*              Assign the sub-components to the Table component              */
+/* -------------------------------------------------------------------------- */
+Table.Root = TableRoot;
+Table.Row = TableRow;
+Table.Header = TableHeader;
+Table.Body = TableBody;
+Table.Cell = TableCell;
+
+/* -------------------------------------------------------------------------- */
+/*                                    Table                                   */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Table component props
+ * @template T The type of data in the table.
+ */
+type TableProps<T> = {
+  /** An array of data for the table. Each item represents a row in the table.
+   * The keys of each item should match the `dataIndex` of the columns.
+   */
+  data: T[];
+  /** An array of columns for the table. Each item defines a column in the table.
+   * The `dataIndex` should match the key of the data item.
+   */
+  columns: TableColumn<T>[];
+} & TableRootProps;
+
+/**
+ * The Table component renders a table with the given data and columns.
+ * If you want more control over the table, or want to handle virtualization,
+ * drag-n-drop, etc, Please can use the sub-components directly and build your own!
+ */
+function Table<T>({ data, columns, ...props }: TableProps<T>) {
+  return (
+    <Table.Root {...props}>
+      <Table.Header>
+        <Table.Row>
+          {columns.map((column, index) => (
+            <Table.Cell key={index} asHeaderCell="column">
+              {column.title}
+            </Table.Cell>
+          ))}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {data.map((record, rowIndex) => (
+          <Table.Row key={rowIndex}>
+            {columns.map((column, colIndex) => {
+              const cellData = record[column.dataIndex];
+              return (
+                <Table.Cell key={colIndex}>
+                  {column.render
+                    ? column.render(cellData, record, rowIndex)
+                    : isValidElement(cellData)
+                      ? cellData
+                      : String(cellData)}
+                </Table.Cell>
+              );
+            })}
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  );
+}
+
+Table.displayName = 'Table';
+
+export { Table, type TableColumn, type TableProps };

package/src/components/experimental/client/Accordion.tsx

@@ -0,0 +1,77 @@
+import { ChevronRight } from '@yahoo/uds-icons';
+// SpringMotionConfig is in the global App scope, so we must use `m` from `motion/react` instead of `motion` (https://motion.dev/docs/react-reduce-bundle-size#reduce-size).
+import { AnimatePresence, m } from 'motion/react';
+
+import { cx } from '../../../styles/styler';
+import type { PressableProps, TextProps, VStackProps } from '../..';
+import { Icon, Pressable, SpringMotionConfig, Text, VStack } from '../..';
+
+interface AccordionProps extends PressableProps {
+  label: string;
+  open?: boolean;
+  onClick?: () => void;
+  _content?: VStackProps;
+  textProps?: TextProps;
+}
+
+function Accordion({
+  label,
+  children,
+  onClick,
+  open,
+  spacingHorizontal = '4',
+  _content,
+  className,
+  textProps,
+  ...props
+}: AccordionProps) {
+  return (
+    <SpringMotionConfig layoutVariant="smooth" layoutSpeed="3">
+      <Pressable
+        display="flex"
+        flexDirection="row"
+        alignItems="center"
+        justifyContent="space-between"
+        spacingVertical="4"
+        spacingHorizontal={spacingHorizontal}
+        borderRadius="md"
+        onClick={onClick}
+        className={cx('hover:bg-secondary/80', 'w-full', className)}
+        {...props}
+      >
+        <Text variant="title4" color="primary" {...(textProps || {})}>
+          {label}
+        </Text>
+
+        <AnimatePresence initial={false}>
+          <m.div
+            initial="collapsed"
+            animate={open ? 'open' : 'collapsed'}
+            exit="collapsed"
+            variants={{ open: { rotate: 90 }, collapsed: { rotate: 0 } }}
+            data-testid="chevron-motion"
+          >
+            <Icon name={ChevronRight} variant="fill" size="sm" color="primary" />
+          </m.div>
+        </AnimatePresence>
+      </Pressable>
+      <AnimatePresence initial={false}>
+        <m.div
+          key="content"
+          initial="collapsed"
+          animate={open ? 'open' : 'collapsed'}
+          exit="collapsed"
+          variants={{ open: { height: 'auto' }, collapsed: { height: 0, overflow: 'hidden' } }}
+        >
+          <VStack spacingHorizontal={spacingHorizontal} {..._content}>
+            {children}
+          </VStack>
+        </m.div>
+      </AnimatePresence>
+    </SpringMotionConfig>
+  );
+}
+
+Accordion.displayName = 'Accordion';
+
+export { Accordion, type AccordionProps };

package/src/components/experimental/client/AvoidMotionLibraryProvider.tsx

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+
+const AvoidMotionLibrary = createContext<boolean>(false);
+const AvoidMotionLibraryProvider = AvoidMotionLibrary.Provider;
+
+const useAvoidMotionLibrary = () => {
+  return useContext(AvoidMotionLibrary);
+};
+
+export { AvoidMotionLibraryProvider, useAvoidMotionLibrary };

package/src/components/experimental/client/Modal.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable react/no-multi-comp */
+import type { DialogProps, DialogStore as ModalStore } from '@ariakit/react';
+import { Dialog, DialogDismiss, useDialogStore } from '@ariakit/react';
+import { Cross } from '@yahoo/uds-icons';
+
+import { cx } from '../../../styles/styler';
+import { HStack, Text, VStack } from '../..';
+import { IconButton } from '../../client/IconButton';
+
+type ModalProps = DialogProps;
+
+function useModalStore(params?: Parameters<typeof useDialogStore>[0]) {
+  return useDialogStore({ animated: true, ...params });
+}
+
+interface ModalHeaderProps extends React.PropsWithChildren {
+  handleClose?: () => void;
+}
+
+function ModalHeader({ children, handleClose }: ModalHeaderProps) {
+  return (
+    <HStack alignItems="center" justifyContent="space-between">
+      <Text variant="headline1" color="primary">
+        {children}
+      </Text>
+      <IconButton
+        aria-label="Close"
+        size="sm"
+        variant="tertiary"
+        name={Cross}
+        onClick={handleClose}
+      />
+    </HStack>
+  );
+}
+
+ModalHeader.displayName = 'ModalHeader';
+
+function Modal({ className, ...props }: ModalProps) {
+  return (
+    <VStack
+      borderRadius="md"
+      position="fixed"
+      backgroundColor="primary"
+      dropShadow="md"
+      className={cx(
+        'inset-8 top-[250px] z-50 mx-auto h-fit w-[600px] origin-center scale-95 opacity-0 transition duration-150 data-[enter]:scale-100 data-[enter]:opacity-100',
+        className,
+      )}
+      spacing="8"
+      asChild
+      overflow="hidden"
+    >
+      <Dialog
+        backdrop={
+          <div className="data-[enter]:bg-primary opacity-0 backdrop-blur-0 transition duration-150 data-[enter]:opacity-60 data-[enter]:backdrop-blur-sm" />
+        }
+        {...props}
+      />
+    </VStack>
+  );
+}
+
+Modal.displayName = 'Modal';
+
+const ModalDismiss: typeof DialogDismiss = DialogDismiss;
+
+export { Modal, ModalDismiss, ModalHeader, type ModalProps, type ModalStore, useModalStore };

package/src/components/experimental/client/Popover.tsx

@@ -0,0 +1,63 @@
+import type { PopoverProps as OriginalPopoverProps } from '@ariakit/react';
+import {
+  Popover as OriginalPopover,
+  PopoverAnchor as OriginalPopoverAnchor,
+  PopoverArrow as OriginalPopoverArrow,
+  PopoverDescription as OriginalPopoverDescription,
+  PopoverDisclosure as OriginalPopoverDisclosure,
+  PopoverDisclosureArrow as OriginalPopoverDisclosureArrow,
+  PopoverDismiss as OriginalPopoverDismiss,
+  PopoverHeading as OriginalPopoverHeading,
+  PopoverProvider as OriginalPopoverProvider,
+  usePopoverStore,
+} from '@ariakit/react';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+
+import { HStack, Text } from '../..';
+
+interface PopoverHeadingProps extends PropsWithChildren {
+  leading?: React.ReactNode;
+  trailing?: React.ReactNode;
+}
+
+function PopoverHeading({ children, leading, trailing }: PopoverHeadingProps) {
+  return (
+    <HStack>
+      {leading}
+      <Text variant="headline1" color="primary" asChild>
+        <OriginalPopoverHeading>{children}</OriginalPopoverHeading>
+      </Text>
+      {trailing}
+    </HStack>
+  );
+}
+
+PopoverHeading.displayName = 'PopoverHeading';
+
+type PopoverProps = Omit<OriginalPopoverProps, 'key'>;
+
+const Popover = OriginalPopover;
+const PopoverArrow: typeof OriginalPopoverArrow = OriginalPopoverArrow;
+const PopoverAnchor: typeof OriginalPopoverAnchor = OriginalPopoverAnchor;
+const PopoverDescription: typeof OriginalPopoverDescription = OriginalPopoverDescription;
+const PopoverDismiss: typeof OriginalPopoverDismiss = OriginalPopoverDismiss;
+const PopoverProvider: typeof OriginalPopoverProvider = OriginalPopoverProvider;
+const PopoverDisclosure: typeof OriginalPopoverDisclosure = OriginalPopoverDisclosure;
+const PopoverDisclosureArrow: typeof OriginalPopoverDisclosureArrow =
+  OriginalPopoverDisclosureArrow;
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverDescription,
+  PopoverDisclosure,
+  PopoverDisclosureArrow,
+  PopoverDismiss,
+  PopoverHeading,
+  type PopoverHeadingProps,
+  type PopoverProps,
+  PopoverProvider,
+  usePopoverStore,
+};