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

package/src/components/experimental/Table.tsx

@@ -1,239 +0,0 @@
-/* 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

@@ -1,77 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,68 +0,0 @@
-/* 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

@@ -1,63 +0,0 @@
-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,
-};