@dxos/react-ui-stack 0.6.14-staging.934c9de → 0.6.14-staging.9b873ce

package/src/components/Section.tsx

@@ -1,378 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { useFocusableGroup, useTabsterAttributes } from '@fluentui/react-tabster';
-import { ArrowLineDown, ArrowLineUp, ArrowSquareOut, CaretUpDown, Trash } from '@phosphor-icons/react';
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-import React, {
-  forwardRef,
-  useState,
-  type ForwardRefExoticComponent,
-  type RefAttributes,
-  type FC,
-  type PropsWithChildren,
-  type ComponentPropsWithRef,
-} from 'react';
-
-import {
-  Button,
-  DropdownMenu,
-  Icon,
-  type Label,
-  List,
-  ListItem,
-  ScrollArea,
-  type ThemedClassName,
-  Toolbar,
-  toLocalizedString,
-  useTranslation,
-} from '@dxos/react-ui';
-import { useAttendableAttributes } from '@dxos/react-ui-attention';
-import { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from '@dxos/react-ui-deck';
-import {
-  type MosaicActiveType,
-  type MosaicDataItem,
-  type MosaicTileComponent,
-  type MosaicTileProps,
-  useMosaic,
-} from '@dxos/react-ui-mosaic';
-import {
-  focusRing,
-  getSize,
-  hoverableControlItem,
-  hoverableControls,
-  hoverableFocusedWithinControls,
-  mx,
-} from '@dxos/react-ui-theme';
-
-import { CaretDownUp } from './CaretDownUp';
-import { stackColumns } from './style-fragments';
-import { translationKey } from '../translations';
-
-const sectionActionDimensions = 'p-1 shrink-0 min-bs-0 is-[--rail-action] bs-min';
-
-export type StackSectionContent = MosaicDataItem;
-
-export type CollapsedSections = Record<string, boolean>;
-
-export type AddSectionPosition = 'before' | 'after' | 'beforeAll' | 'afterAll';
-
-export type StackContextValue<TData extends StackSectionContent = StackSectionContent> = {
-  SectionContent: FC<{ data: TData }>;
-  separation?: boolean;
-  isResizable?: boolean;
-  transform?: (item: MosaicDataItem, type?: string) => StackSectionItem;
-  onDeleteSection?: (path: string) => void;
-  onAddSection?: (path: string, position: AddSectionPosition) => void;
-  onNavigateToSection?: (object: MosaicDataItem) => void;
-  onCollapseSection?: (id: string, collapsed: boolean) => void;
-};
-
-export type StackItem = MosaicDataItem & {
-  items: StackSectionItem[];
-};
-
-export type StackSectionItem = MosaicDataItem & {
-  object: StackSectionContent;
-  // TODO(wittjosiah): Use effect schema? Share schema with echo.
-  view?: {
-    title?: string;
-    size?: SectionSize;
-    height?: number;
-    collapsed?: boolean;
-    custom?: Record<string, any>;
-  };
-  // TODO(wittjosiah): Common type? Factor out?
-  metadata?: {
-    icon?: string;
-    placeholder?: Label;
-    viewActions?: (item: StackSectionItem) => StackAction;
-  };
-};
-
-export type StackAction = {
-  icon: string;
-  label: Label;
-  onClick: () => void;
-};
-
-export type SectionSize = 'intrinsic' | 'extrinsic';
-
-export type SectionProps = PropsWithChildren<
-  {
-    // Data props.
-    id: string;
-    title: string;
-
-    // Tile props.
-    active?: MosaicActiveType;
-  } & Pick<
-    MosaicTileProps,
-    'draggableProps' | 'draggableStyle' | 'onDelete' | 'onNavigate' | 'onAddAfter' | 'onAddBefore'
-  > &
-    Pick<StackContextValue, 'separation' | 'isResizable' | 'onCollapseSection'> &
-    Pick<Required<StackSectionItem>['view'], 'collapsed' | 'size'> &
-    Pick<Required<StackSectionItem>['metadata'], 'icon'>
->;
-
-const resizeHandleStyles = mx(resizeHandle, resizeHandleHorizontal, 'is-full bs-[--rail-action] col-start-2');
-
-export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLLIElement>> = forwardRef<
-  HTMLLIElement,
-  SectionProps
->(
-  (
-    {
-      id,
-      title,
-      icon = 'ph--placeholder--regular',
-      size = 'intrinsic',
-      collapsed,
-      active,
-      isResizable,
-      draggableProps,
-      draggableStyle,
-      onDelete,
-      onNavigate,
-      onAddBefore,
-      onAddAfter,
-      onCollapseSection,
-      children,
-    },
-    forwardedRef,
-  ) => {
-    const { t } = useTranslation(translationKey);
-    const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
-    const sectionActionsToolbar = useTabsterAttributes({
-      groupper: {},
-      focusable: {},
-      mover: { cyclic: true, direction: 1, memorizeCurrent: false },
-    });
-    const sectionContentGroup = useFocusableGroup({});
-    const attendableAttrs = useAttendableAttributes(id);
-
-    return (
-      <CollapsiblePrimitive.Root
-        asChild
-        open={!collapsed}
-        onOpenChange={(nextOpen) => onCollapseSection?.(id, !nextOpen)}
-      >
-        <ListItem.Root
-          ref={forwardedRef}
-          id={id}
-          {...attendableAttrs}
-          classNames={[
-            'grid col-span-2 group/section',
-            active === 'overlay' ? stackColumns : 'grid-cols-subgrid snap-start',
-          ]}
-          style={draggableStyle}
-        >
-          <div
-            role='none'
-            className={mx(
-              'grid col-span-2 grid-cols-subgrid',
-              'bg-base attention-surface',
-              hoverableControls,
-              hoverableFocusedWithinControls,
-              (active === 'origin' || active === 'rearrange' || active === 'destination') && 'opacity-0',
-            )}
-          >
-            <div
-              role='toolbar'
-              aria-orientation='vertical'
-              aria-label={t('section controls label')}
-              {...(!active && { tabIndex: 0 })}
-              {...(!active && sectionActionsToolbar)}
-              className={mx(
-                'grid grid-cols-subgrid ch-focus-ring rounded-sm grid-rows-[min-content_min-content_1fr] m-1',
-                'group-has-[[role=toolbar][aria-orientation=horizontal]]/section:pbs-[--rail-action]',
-              )}
-            >
-              <div role='none' className='sticky -block-start-px bg-[--sticky-bg]'>
-                <DropdownMenu.Root
-                  {...{
-                    open: optionsMenuOpen,
-                    onOpenChange: setOptionsMenuOpen,
-                  }}
-                >
-                  <DropDownMenuDragHandleTrigger active={!!active} variant='ghost' classNames='m-0' {...draggableProps}>
-                    <Icon icon={icon} size={5} classNames='transition-opacity' />
-                  </DropDownMenuDragHandleTrigger>
-                  <DropdownMenu.Portal>
-                    <DropdownMenu.Content>
-                      <DropdownMenu.Viewport>
-                        {collapsed ? (
-                          <DropdownMenu.Item onClick={onNavigate} data-testid='section.navigate-to'>
-                            <ArrowSquareOut className={mx(getSize(5), 'mr-2')} />
-                            <span className='grow'>{t('navigate to section label')}</span>
-                          </DropdownMenu.Item>
-                        ) : (
-                          <CollapsiblePrimitive.Trigger asChild>
-                            <DropdownMenu.Item>
-                              <CaretDownUp className={mx(getSize(5), 'mr-2')} />
-                              <span className='grow'>{t('collapse label')}</span>
-                            </DropdownMenu.Item>
-                          </CollapsiblePrimitive.Trigger>
-                        )}
-                        <DropdownMenu.Item onClick={onAddBefore} data-testid='section.add-before'>
-                          <ArrowLineUp className={mx(getSize(5), 'mr-2')} />
-                          <span className='grow'>{t('add section before label')}</span>
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item onClick={onAddAfter} data-testid='section.add-after'>
-                          <ArrowLineDown className={mx(getSize(5), 'mr-2')} />
-                          <span className='grow'>{t('add section after label')}</span>
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item onClick={() => onDelete?.()} data-testid='section.remove'>
-                          <Trash className={mx(getSize(5), 'mr-2')} />
-                          <span className='grow'>{t('remove section label')}</span>
-                        </DropdownMenu.Item>
-                      </DropdownMenu.Viewport>
-                      <DropdownMenu.Arrow />
-                    </DropdownMenu.Content>
-                  </DropdownMenu.Portal>
-                </DropdownMenu.Root>
-                {collapsed ? (
-                  <CollapsiblePrimitive.Trigger asChild>
-                    <Button variant='ghost' classNames={sectionActionDimensions}>
-                      <span className='sr-only'>{t('expand label')}</span>
-                      <CaretUpDown className={getSize(4)} />
-                    </Button>
-                  </CollapsiblePrimitive.Trigger>
-                ) : (
-                  <Button
-                    variant='ghost'
-                    classNames={sectionActionDimensions}
-                    onClick={onNavigate}
-                    data-testid='section.navigate-to'
-                  >
-                    <ArrowSquareOut className={mx(getSize(4))} />
-                    <span className='sr-only'>{t('navigate to section label')}</span>
-                  </Button>
-                )}
-              </div>
-            </div>
-
-            {/* Main content */}
-
-            <ListItem.Heading
-              classNames={collapsed ? ['grid grid-rows-subgrid grid-cols-subgrid items-center', focusRing] : 'sr-only'}
-              {...(collapsed && { ...sectionContentGroup, tabIndex: 0 })}
-            >
-              {/*
-                TODO(thure): This needs to be made extensible; Markdown document titles especially are difficult.
-                  Using `Surface` in a UI package like this would be unprecedented and needs motivation.
-                  Refactoring to use subcomponents is complicated by sections being a sortable Mosaic Tile.
-                  Reevaluate when work on collections (Folders, Stacks, etc) settles.
-              */}
-              <span className='truncate'>{title}</span>
-            </ListItem.Heading>
-            {size === 'intrinsic' ? (
-              <CollapsiblePrimitive.Content
-                {...(!collapsed && {
-                  ...sectionContentGroup,
-                  tabIndex: 0,
-                })}
-                // TODO(burdon): Add margin to fragment?
-                className={mx(focusRing, 'm-[2px]')}
-              >
-                {children}
-              </CollapsiblePrimitive.Content>
-            ) : (
-              <CollapsiblePrimitive.Content asChild>
-                <ScrollArea.Root
-                  type='always'
-                  {...(!collapsed && { ...sectionContentGroup, tabIndex: 0 })}
-                  classNames={mx(focusRing, 'is-full has-[[data-radix-scroll-area-viewport]]:pbe-4')}
-                >
-                  <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
-                  <ScrollArea.Scrollbar
-                    orientation='horizontal'
-                    variant='coarse'
-                    classNames='hidden has-[div]:flex !inline-end-[max(.25rem,var(--radix-scroll-area-corner-width))]'
-                  >
-                    <ScrollArea.Thumb />
-                  </ScrollArea.Scrollbar>
-                  <ScrollArea.Scrollbar orientation='vertical' variant='coarse' classNames='hidden has-[div]:flex'>
-                    <ScrollArea.Thumb />
-                  </ScrollArea.Scrollbar>
-                  <ScrollArea.Corner />
-                </ScrollArea.Root>
-              </CollapsiblePrimitive.Content>
-            )}
-          </div>
-          {isResizable && !collapsed && (
-            <button className={resizeHandleStyles}>
-              <span className='sr-only'>{t('resize section label')}</span>
-            </button>
-          )}
-        </ListItem.Root>
-      </CollapsiblePrimitive.Root>
-    );
-  },
-);
-
-export type SectionToolbarProps = ThemedClassName<ComponentPropsWithRef<'div'>>;
-
-// TODO(burdon): block-start
-export const sectionToolbarLayout =
-  'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';
-
-export const SectionToolbar = ({ children, classNames }: SectionToolbarProps) => {
-  return (
-    <Toolbar.Root orientation='horizontal' classNames={[sectionToolbarLayout, hoverableControlItem, classNames]}>
-      {children}
-    </Toolbar.Root>
-  );
-};
-
-export const SectionTile: MosaicTileComponent<
-  StackSectionItem,
-  HTMLLIElement
-  // TODO(wittjosiah): If props is specified there is a type error with Mosaic.Container.
-  // { itemContext: StackContextValue }
-> = forwardRef(({ path, type, active, draggableStyle, draggableProps, item, itemContext }, forwardedRef) => {
-  const { t } = useTranslation(translationKey);
-  const { activeItem } = useMosaic();
-
-  const separation = !!itemContext?.separation;
-  const isResizable = !!itemContext?.isResizable;
-  const { transform, onDeleteSection, onNavigateToSection, onAddSection, onCollapseSection, SectionContent } =
-    itemContext as StackContextValue;
-
-  const transformedItem = transform
-    ? transform(
-        item,
-        // TODO(wittjosiah): `active` doesn't always seem to be accurate here.
-        activeItem?.item.id === item.id ? activeItem?.type : type,
-      )
-    : item;
-
-  const placeholder = transformedItem.metadata?.placeholder ?? ['untitled section title', { ns: translationKey }];
-  const title = transformedItem.view?.title ?? toLocalizedString(placeholder, t);
-
-  const section = (
-    <Section
-      ref={forwardedRef}
-      title={title}
-      id={transformedItem.id}
-      size={transformedItem.view?.size}
-      icon={transformedItem.metadata?.icon}
-      collapsed={transformedItem.view?.collapsed}
-      separation={separation}
-      active={active}
-      draggableProps={draggableProps}
-      draggableStyle={draggableStyle}
-      onCollapseSection={onCollapseSection}
-      isResizable={isResizable}
-      onDelete={() => onDeleteSection?.(path)}
-      onNavigate={() => onNavigateToSection?.(transformedItem)}
-      onAddAfter={() => onAddSection?.(path, 'after')}
-      onAddBefore={() => onAddSection?.(path, 'before')}
-    >
-      {SectionContent && <SectionContent data={transformedItem.object} />}
-    </Section>
-  );
-
-  return active === 'overlay' ? <List>{section}</List> : section;
-});

package/src/components/style-fragments.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export const stackColumns = 'grid-cols-[var(--rail-size)_calc(100%-var(--rail-size))]';

package/src/next/Stack.stories.tsx

@@ -1,148 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { type Meta, type StoryObj } from '@storybook/react';
-import React, { useState, useCallback } from 'react';
-
-import { withTheme } from '@dxos/storybook-utils';
-
-import { Stack } from './Stack';
-import { StackItem } from './StackItem';
-
-type CardItem = {
-  id: string;
-  type: 'card';
-  content: string;
-};
-
-type ColumnItem = {
-  id: string;
-  type: 'column';
-  title: string;
-  cards: CardItem[];
-};
-
-const KanbanBlock = ({ item }: { item: CardItem }) => {
-  return (
-    <div className='is-64 bs-24 bg-input rounded-lg border border-separator shadow-sm grid place-content-center'>
-      <span className='text-sm font-medium'>{item.content}</span>
-    </div>
-  );
-};
-
-const StorybookStack = () => {
-  const [columns, setColumns] = useState<ColumnItem[]>([
-    {
-      id: 'col-0',
-      type: 'column',
-      title: 'To Do',
-      cards: [
-        { id: 'banana', type: 'card', content: 'Banana' },
-        { id: 'pickle', type: 'card', content: 'Pickle' },
-        { id: 'wombat', type: 'card', content: 'Wombat' },
-        { id: 'kazoo', type: 'card', content: 'Kazoo' },
-      ],
-    },
-    {
-      id: 'col-1',
-      type: 'column',
-      title: 'In Progress',
-      cards: [
-        { id: 'noodle', type: 'card', content: 'Noodle' },
-        { id: 'squish', type: 'card', content: 'Squish' },
-        { id: 'wobble', type: 'card', content: 'Wobble' },
-        { id: 'floof', type: 'card', content: 'Floof' },
-      ],
-    },
-    {
-      id: 'col-2',
-      type: 'column',
-      title: 'Done',
-      cards: [
-        { id: 'snorkel', type: 'card', content: 'Snorkel' },
-        { id: 'bloop', type: 'card', content: 'Bloop' },
-        { id: 'wiggle', type: 'card', content: 'Wiggle' },
-        { id: 'zoop', type: 'card', content: 'Zoop' },
-      ],
-    },
-  ]);
-
-  const reorderItem = useCallback((sourceId: string, targetId: string, closestEdge: Edge | null) => {
-    setColumns((prevColumns) => {
-      const newColumns = [...prevColumns];
-      const sourceColumn = newColumns.find(
-        (col) => col.id === sourceId || col.cards.some((card) => card.id === sourceId),
-      );
-      const targetColumn = newColumns.find(
-        (col) => col.id === targetId || col.cards.some((card) => card.id === targetId),
-      );
-
-      if (sourceColumn && targetColumn) {
-        if (sourceId.startsWith('col-') && targetId.startsWith('col-')) {
-          // Reordering columns
-          const sourceIndex = newColumns.findIndex((col) => col.id === sourceId);
-          const targetIndex = newColumns.findIndex((col) => col.id === targetId);
-          const [movedColumn] = newColumns.splice(sourceIndex, 1);
-          const insertIndex = closestEdge === 'right' ? targetIndex + 1 : targetIndex;
-          newColumns.splice(insertIndex, 0, movedColumn);
-        } else {
-          // Reordering cards within a column
-          const sourceCardIndex = sourceColumn.cards.findIndex((card) => card.id === sourceId);
-          const targetCardIndex = targetColumn.cards.findIndex((card) => card.id === targetId);
-          const [movedCard] = sourceColumn.cards.splice(sourceCardIndex, 1);
-
-          let insertIndex;
-          if (sourceColumn === targetColumn && sourceCardIndex < targetCardIndex) {
-            insertIndex = closestEdge === 'bottom' ? targetCardIndex : targetCardIndex - 1;
-          } else {
-            insertIndex = closestEdge === 'bottom' ? targetCardIndex + 1 : targetCardIndex;
-          }
-          targetColumn.cards.splice(insertIndex, 0, movedCard);
-        }
-      }
-
-      return newColumns;
-    });
-  }, []);
-
-  return (
-    <Stack orientation={'horizontal'} classNames='gap-1'>
-      {columns.map((column) => (
-        <StackItem
-          key={column.id}
-          item={column}
-          orientation={'horizontal'}
-          classNames='p-4 bg-deck rounded-md'
-          onReorder={reorderItem}
-        >
-          <Stack orientation={'vertical'} classNames='gap-1'>
-            {column.cards.map((card) => (
-              <StackItem key={card.id} item={card} orientation={'vertical'} onReorder={reorderItem}>
-                <KanbanBlock item={card} />
-              </StackItem>
-            ))}
-          </Stack>
-        </StackItem>
-      ))}
-    </Stack>
-  );
-};
-
-type Story = StoryObj<typeof StorybookStack>;
-
-export const Default: Story = {
-  args: {
-    orientation: 'horizontal',
-  },
-};
-
-const meta: Meta<typeof StorybookStack> = {
-  title: 'ui/react-ui-stack-next/Stack',
-  component: StorybookStack,
-  decorators: [withTheme],
-  argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
-};
-
-export default meta;

package/src/next/Stack.tsx

@@ -1,30 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { Children, type CSSProperties, type ComponentPropsWithoutRef } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-type Orientation = 'horizontal' | 'vertical';
-
-export type StackProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
-  orientation?: Orientation;
-};
-
-export const Stack = ({ children, classNames, style, orientation, ...props }: StackProps) => {
-  const childrenCount = Children.count(children);
-
-  const styles: CSSProperties = {
-    [orientation === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows']:
-      `repeat(${childrenCount}, min-content)`,
-    ...style,
-  };
-
-  return (
-    <div className={mx('grid relative', classNames)} aria-orientation={orientation} style={styles} {...props}>
-      {children}
-    </div>
-  );
-};

package/src/next/StackItem.tsx

@@ -1,78 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import {
-  attachClosestEdge,
-  type Edge,
-  extractClosestEdge,
-} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
-import React, { useEffect, useRef, useState, type ComponentPropsWithoutRef } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { type StackProps } from './Stack';
-
-export type StackItemProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
-  item: { id: string; type: 'column' | 'card' };
-  orientation?: StackProps['orientation'];
-  onReorder: (sourceId: string, targetId: string, closestEdge: Edge | null) => void;
-};
-
-export const StackItem = ({ item, children, classNames, orientation, onReorder, ...props }: StackItemProps) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [closestEdge, setEdge] = useState<Edge | null>(null);
-
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
-    const element = ref.current;
-
-    return combine(
-      draggable({ element, getInitialData: () => ({ id: item.id, type: item.type }) }),
-      dropTargetForElements({
-        element,
-        getData: ({ input, element }) => {
-          return attachClosestEdge(
-            { id: item.id, type: item.type },
-            { input, element, allowedEdges: orientation === 'vertical' ? ['top', 'bottom'] : ['left', 'right'] },
-          );
-        },
-        onDragEnter: ({ self, source }) => {
-          if (source.data.type === self.data.type) {
-            setEdge(extractClosestEdge(self.data));
-          }
-        },
-        onDrag: ({ self, source }) => {
-          if (source.data.type === self.data.type) {
-            setEdge(extractClosestEdge(self.data));
-          }
-        },
-        onDragLeave: () => setEdge(null),
-        onDrop: ({ self, source }) => {
-          setEdge(null);
-          if (source.data.type === self.data.type) {
-            onReorder(source.data.id as string, self.data.id as string, extractClosestEdge(self.data));
-          }
-        },
-      }),
-    );
-  }, [orientation, item, onReorder]);
-
-  return (
-    <div
-      ref={ref}
-      className={mx('relative', orientation === 'horizontal' ? 'grid-cols-subgrid' : 'grid-rows-subgrid', classNames)}
-      {...props}
-    >
-      {children}
-      {closestEdge && <DropIndicator edge={closestEdge} />}
-    </div>
-  );
-};

package/src/next/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './Stack';