@cdx-ui/components 0.0.1-beta.183 → 0.0.1-beta.185

package/src/components/Table/index.web.tsx

@@ -0,0 +1,367 @@
+import { forwardRef, type ComponentPropsWithoutRef, type CSSProperties } from 'react';
+import { View } from 'react-native';
+import {
+  Slot,
+  dataAttributes,
+  mapViewPropsToDom,
+  mergeDataAttributes,
+  mergeDomDataAttributes,
+  domDataAttributes,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import {
+  tableBodyVariants,
+  tableCaptionVariants,
+  tableCellVariants,
+  tableContainerVariants,
+  tableFooterVariants,
+  tableHeadVariants,
+  tableHeaderVariants,
+  tableRootVariants,
+  tableRowVariants,
+} from './styles';
+import type {
+  TableCaptionProps,
+  TableCellProps,
+  TableHeadProps,
+  TableProps,
+  TableRowProps,
+  TableSectionProps,
+} from './types';
+import {
+  ParentContext,
+  useTableStyleContext,
+  useTableVariantContext,
+} from './useTableStyleContext';
+
+export type {
+  TableCaptionProps,
+  TableCellProps,
+  TableHeadProps,
+  TableProps,
+  TableRowProps,
+  TableSectionProps,
+} from './types';
+export type { TableVariantProps } from './styles';
+
+type WebTableProps = TableProps & ComponentPropsWithoutRef<'table'>;
+type WebTableCaptionProps = TableCaptionProps & ComponentPropsWithoutRef<'caption'>;
+type WebTableSectionProps = TableSectionProps &
+  ComponentPropsWithoutRef<'thead' | 'tbody' | 'tfoot'>;
+type WebTableRowProps = TableRowProps & ComponentPropsWithoutRef<'tr'>;
+type WebTableHeadProps = TableHeadProps & ComponentPropsWithoutRef<'th'>;
+type WebTableCellProps = TableCellProps & ComponentPropsWithoutRef<'td'>;
+
+const tableHostProps = (props: object, slot: string) => {
+  const mapped = mapViewPropsToDom(props);
+  return {
+    ...mapped,
+    ...mergeDomDataAttributes(
+      props as Record<string, unknown>,
+      mapped,
+      domDataAttributes({ slot }),
+    ),
+  };
+};
+
+const TableRoot = forwardRef<HTMLTableElement, WebTableProps>(
+  ({ asChild, className, children, style, fullBleed = false, ...props }, ref) => {
+    const ctx = useTableVariantContext(fullBleed);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <ParentContext.Provider value={ctx}>
+          <Comp
+            ref={ref}
+            className={cn(tableContainerVariants(), tableRootVariants(), className)}
+            style={style}
+            {...props}
+            {...mergeDataAttributes(props, dataAttributes({ slot: 'table' }))}
+          >
+            {children}
+          </Comp>
+        </ParentContext.Provider>
+      );
+    }
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <View className={tableContainerVariants()}>
+          <table
+            ref={ref}
+            className={cn(tableRootVariants(), className)}
+            style={style as CSSProperties | undefined}
+            {...tableHostProps(props, 'table')}
+          >
+            {children}
+          </table>
+        </View>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+TableRoot.displayName = 'Table';
+
+const TableCaption = forwardRef<HTMLTableCaptionElement, WebTableCaptionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableCaptionVariants(), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-caption' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <caption
+        ref={ref}
+        className={computedClassName}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-caption')}
+      >
+        {children}
+      </caption>
+    );
+  },
+);
+
+TableCaption.displayName = 'Table.Caption';
+
+const TableHeader = forwardRef<HTMLTableSectionElement, WebTableSectionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableHeaderVariants(), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-header' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <thead
+        ref={ref}
+        className={computedClassName}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-header')}
+      >
+        {children}
+      </thead>
+    );
+  },
+);
+
+TableHeader.displayName = 'Table.Header';
+
+const TableBody = forwardRef<HTMLTableSectionElement, WebTableSectionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableBodyVariants(), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-body' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <tbody
+        ref={ref}
+        className={computedClassName}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-body')}
+      >
+        {children}
+      </tbody>
+    );
+  },
+);
+
+TableBody.displayName = 'Table.Body';
+
+const TableFooter = forwardRef<HTMLTableSectionElement, WebTableSectionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableFooterVariants(), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-footer' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <tfoot
+        ref={ref}
+        className={computedClassName}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-footer')}
+      >
+        {children}
+      </tfoot>
+    );
+  },
+);
+
+TableFooter.displayName = 'Table.Footer';
+
+const TableRow = forwardRef<HTMLTableRowElement, WebTableRowProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableRowVariants(), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-row' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <tr
+        ref={ref}
+        className={computedClassName}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-row')}
+      >
+        {children}
+      </tr>
+    );
+  },
+);
+
+TableRow.displayName = 'Table.Row';
+
+const TableHead = forwardRef<HTMLTableCellElement, WebTableHeadProps>(
+  ({ asChild, className, children, style, scope = 'col', ...props }, ref) => {
+    const { fullBleed } = useTableStyleContext();
+    const computedClassName = cn(tableHeadVariants({ fullBleed }), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          scope={scope}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-head' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <th
+        ref={ref}
+        className={computedClassName}
+        scope={scope}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-head')}
+      >
+        {children}
+      </th>
+    );
+  },
+);
+
+TableHead.displayName = 'Table.Head';
+
+const TableCell = forwardRef<HTMLTableCellElement, WebTableCellProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { fullBleed } = useTableStyleContext();
+    const computedClassName = cn(tableCellVariants({ fullBleed }), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-cell' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <td
+        ref={ref}
+        className={computedClassName}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-cell')}
+      >
+        {children}
+      </td>
+    );
+  },
+);
+
+TableCell.displayName = 'Table.Cell';
+
+type TableCompoundComponent = typeof TableRoot & {
+  Caption: typeof TableCaption;
+  Header: typeof TableHeader;
+  Body: typeof TableBody;
+  Footer: typeof TableFooter;
+  Row: typeof TableRow;
+  Head: typeof TableHead;
+  Cell: typeof TableCell;
+};
+
+export const Table = Object.assign(TableRoot, {
+  Caption: TableCaption,
+  Header: TableHeader,
+  Body: TableBody,
+  Footer: TableFooter,
+  Row: TableRow,
+  Head: TableHead,
+  Cell: TableCell,
+}) as TableCompoundComponent;

package/src/components/Table/styles.ts

@@ -0,0 +1,90 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+export const tableContainerVariants = cva('relative w-full overflow-auto');
+
+export const tableRootVariants = cva('w-full caption-bottom body-md text-content-primary');
+
+export const tableNativeRootVariants = cva(
+  'min-w-full flex-col caption-bottom body-md text-content-primary',
+);
+
+export const tableCaptionVariants = cva('mt-4 body-sm text-content-secondary');
+
+export const tableNativeCaptionVariants = cva('mt-4 body-sm text-content-secondary');
+
+export const tableHeaderVariants = cva('border-stroke-secondary [&_tr]:border-b');
+
+export const tableBodyVariants = cva('[&_tr:last-child]:border-0');
+
+export const tableFooterVariants = cva(
+  'border-t border-stroke-secondary bg-surface-secondary body-md font-medium [&>tr]:last:border-b-0',
+);
+
+export const tableRowVariants = cva(
+  'border-b border-stroke-secondary web:transition-colors web:hover:bg-surface-secondary/50',
+);
+
+export const tableHeadVariants = cva(
+  'h-11 px-2 text-left align-middle font-medium text-content-secondary body-md',
+  {
+    variants: {
+      fullBleed: {
+        true: 'first:pl-0 last:pr-0',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      fullBleed: false,
+    },
+  },
+);
+
+export const tableCellVariants = cva('p-2 align-middle body-md text-content-primary', {
+  variants: {
+    fullBleed: {
+      true: 'first:pl-0 last:pr-0',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    fullBleed: false,
+  },
+});
+
+export const tableNativeRowVariants = cva(
+  'min-w-full flex-row flex-nowrap border-b border-stroke-secondary',
+);
+
+export const tableNativeHeadVariants = cva(
+  'min-h-11 overflow-hidden px-2 items-start justify-center font-medium text-content-secondary body-md',
+  {
+    variants: {
+      fullBleed: {
+        true: 'first:pl-0 last:pr-0',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      fullBleed: false,
+    },
+  },
+);
+
+export const tableNativeCellVariants = cva(
+  'overflow-hidden p-2 items-start justify-center body-md text-content-primary',
+  {
+    variants: {
+      fullBleed: {
+        true: 'first:pl-0 last:pr-0',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      fullBleed: false,
+    },
+  },
+);
+
+export const tableNativeFooterVariants = cva('bg-surface-secondary');
+
+export type TableVariantProps = VariantProps<typeof tableHeadVariants>;

package/src/components/Table/types.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import type { TextProps, ViewProps } from 'react-native';
+import type { TableVariantProps } from './styles';
+
+export interface TableProps extends ViewProps, TableVariantProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface TableCaptionProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface TableSectionProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface TableRowProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface TableHeadProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+  colSpan?: number;
+  rowSpan?: number;
+  scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
+}
+
+export interface TableCellProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+  colSpan?: number;
+  rowSpan?: number;
+}

package/src/components/Table/useTableStyleContext.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import type { TableVariantProps } from './styles';
+
+export const TABLE_SCOPE = 'TABLE';
+
+export const useTableStyleContext = () => useStyleContext(TABLE_SCOPE) as TableVariantProps;
+
+export const useTableVariantContext = (fullBleed: TableVariantProps['fullBleed'] = false) => {
+  const parent = useParentContext();
+  return useMemo(() => ({ ...parent, [TABLE_SCOPE]: { fullBleed } }), [parent, fullBleed]);
+};
+
+export { ParentContext };

package/src/components/index.ts

@@ -45,6 +45,7 @@ export * from './Slider';
 export * from './VirtualizedList';
 export * from './Switch';
 export * from './Tabs';
+export * from './Table';
 export * from './Textarea';
 export * from './Tile';
 export * from './Toast';