@dxos/react-ui 0.1.41-next.adfd7c6 → 0.3.3-main.5b114d4

package/src/components/Main/useSwipeToDismiss.ts

@@ -0,0 +1,103 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// This implementation is based upon https://github.com/hosembafer/react-swipe-to-dismiss, commit d88deafe910a6bd1400cf8fa90459a76cf4f71d3
+
+import { type RefObject, useCallback, useEffect, useState } from 'react';
+
+enum MotionState {
+  IDLE,
+  DEBOUNCING,
+  FOLLOWING,
+}
+
+type Options = Partial<{
+  onDismiss: () => void;
+  dismissThreshold: number;
+  debounceThreshold: number;
+  side: 'inline-start' | 'inline-end';
+  offset: number;
+}>;
+
+export const useSwipeToDismiss = (
+  ref: RefObject<HTMLElement | null>,
+  { onDismiss, dismissThreshold = 64, debounceThreshold = 8, offset = 0 /* side = 'inline-start' */ }: Options,
+) => {
+  const $root = ref.current;
+  // todo(thure): Implement other sides.
+  // const dK = direction === 'inline-start' ? 1 : -1;
+
+  const [motionState, setMotionState] = useState<MotionState>(MotionState.IDLE);
+  const [gestureStartX, setGestureStartX] = useState(0);
+
+  const setIdle = useCallback(() => {
+    setMotionState(MotionState.IDLE);
+    $root?.style.removeProperty('inset-inline-start');
+    $root?.style.setProperty('transition-duration', '200ms');
+  }, [$root]);
+
+  const setFollowing = useCallback(() => {
+    setMotionState(MotionState.FOLLOWING);
+    $root?.style.setProperty('transition-duration', '0ms');
+  }, [$root]);
+
+  const handlePointerDown = useCallback(
+    ({ screenX }: PointerEvent) => {
+      if (motionState === MotionState.IDLE) {
+        setMotionState(MotionState.DEBOUNCING);
+        setGestureStartX(screenX);
+      }
+    },
+    [motionState],
+  );
+
+  const handlePointerMove = useCallback(
+    ({ screenX }: PointerEvent) => {
+      if ($root) {
+        const delta = Math.min(screenX - gestureStartX, 0);
+        switch (motionState) {
+          case MotionState.FOLLOWING:
+            if (Math.abs(delta) > dismissThreshold) {
+              setIdle();
+              onDismiss?.();
+            } else {
+              $root.style.setProperty('inset-inline-start', `${offset + delta}px`);
+            }
+            break;
+          case MotionState.DEBOUNCING:
+            if (Math.abs(delta) > debounceThreshold) {
+              setFollowing();
+            }
+            break;
+        }
+      }
+    },
+    [$root, motionState, gestureStartX],
+  );
+
+  const handlePointerUp = useCallback(() => {
+    setIdle();
+  }, [setIdle]);
+
+  useEffect(() => {
+    $root?.addEventListener('pointerdown', handlePointerDown);
+    return () => {
+      $root?.removeEventListener('pointerdown', handlePointerDown);
+    };
+  }, [$root, handlePointerDown]);
+
+  useEffect(() => {
+    $root && document.documentElement.addEventListener('pointermove', handlePointerMove);
+    return () => {
+      document.documentElement.removeEventListener('pointermove', handlePointerMove);
+    };
+  }, [$root, handlePointerMove]);
+
+  useEffect(() => {
+    $root && document.documentElement.addEventListener('pointerup', handlePointerUp);
+    return () => {
+      document.documentElement.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, [$root, handlePointerUp]);
+};

package/src/components/Message/Message.stories.tsx

@@ -0,0 +1,39 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { Info } from '@phosphor-icons/react';
+import React from 'react';
+
+import { type MessageValence } from '@dxos/react-ui-types';
+
+import { Message } from './Message';
+
+type StoryMessageProps = {
+  valence: MessageValence;
+  title: string;
+  body: string;
+};
+
+const StoryMessage = ({ valence, title, body }: StoryMessageProps) => (
+  <Message.Root valence={valence}>
+    <Message.Title>
+      <Info className='inline w-5 h-5 mb-1' weight='duotone' /> {title}
+    </Message.Title>
+    <Message.Body>{body}</Message.Body>
+  </Message.Root>
+);
+
+export default {
+  component: StoryMessage,
+};
+
+export const Default = {
+  args: {
+    valence: 'error',
+    title: 'Alert title',
+    body: 'Alert content',
+  },
+};

package/src/components/Message/Message.tsx

@@ -0,0 +1,109 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { useId } from '@dxos/react-hooks';
+import { type MessageValence, type Elevation } from '@dxos/react-ui-types';
+
+import { useElevationContext, useThemeContext } from '../../hooks';
+
+type MessageRootProps = ComponentPropsWithRef<typeof Primitive.div> & {
+  valence?: MessageValence;
+  elevation?: Elevation;
+  asChild?: boolean;
+  titleId?: string;
+  descriptionId?: string;
+};
+
+type MessageContextValue = { titleId?: string; descriptionId: string };
+const MESSAGE_NAME = 'Message';
+const [MessageProvider, useMessageContext] = createContext<MessageContextValue>(MESSAGE_NAME);
+
+const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
+  (
+    {
+      asChild,
+      valence,
+      elevation: propsElevation,
+      className,
+      titleId: propsTitleId,
+      descriptionId: propsDescriptionId,
+      children,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const { tx } = useThemeContext();
+    const titleId = useId('message__title', propsTitleId);
+    const descriptionId = useId('message__description', propsDescriptionId);
+    const elevation = useElevationContext(propsElevation);
+    const Root = asChild ? Slot : Primitive.div;
+    return (
+      <MessageProvider {...{ titleId, descriptionId }}>
+        <Root
+          {...props}
+          className={tx('message.root', 'message', { valence, elevation }, className)}
+          aria-labelledby={titleId}
+          aria-describedby={descriptionId}
+          ref={forwardedRef}
+        >
+          {children}
+        </Root>
+      </MessageProvider>
+    );
+  },
+);
+
+MessageRoot.displayName = MESSAGE_NAME;
+
+type MessageTitleProps = Omit<ComponentPropsWithRef<typeof Primitive.h2>, 'id'> & { asChild?: boolean };
+
+const MESSAGE_TITLE_NAME = 'MessageTitle';
+
+const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
+  ({ asChild, className, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
+    const Root = asChild ? Slot : Primitive.h2;
+    return (
+      <Root {...props} className={tx('message.title', 'message__title', {}, className)} id={titleId} ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+MessageTitle.displayName = MESSAGE_TITLE_NAME;
+
+type MessageBodyProps = Omit<ComponentPropsWithRef<typeof Primitive.h2>, 'id'> & { asChild?: boolean };
+
+const MESSAGE_BODY_NAME = 'MessageBody';
+
+const MessageBody = forwardRef<HTMLParagraphElement, MessageBodyProps>(
+  ({ asChild, className, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
+    const Root = asChild ? Slot : Primitive.p;
+    return (
+      <Root
+        {...props}
+        className={tx('message.body', 'message__body', {}, className)}
+        id={descriptionId}
+        ref={forwardedRef}
+      >
+        {children}
+      </Root>
+    );
+  },
+);
+
+MessageBody.displayName = MESSAGE_BODY_NAME;
+
+export const Message = { Root: MessageRoot, Title: MessageTitle, Body: MessageBody };
+
+export type { MessageRootProps, MessageTitleProps, MessageBodyProps };

package/src/components/Message/index.ts

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

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import React, { type PropsWithChildren, type ReactNode } from 'react';
+
+import { Popover } from './Popover';
+import { Button } from '../Buttons';
+
+faker.seed(1234);
+
+const StorybookPopover = ({ openTrigger, children }: PropsWithChildren<{ openTrigger: ReactNode }>) => {
+  return (
+    <Popover.Root defaultOpen>
+      <Popover.Trigger asChild>{openTrigger}</Popover.Trigger>
+      <Popover.Content>
+        <Popover.Viewport>
+          <p className='pli-2 plb-1 min-is-[18rem] max-is-[38rem]'>{children}</p>
+        </Popover.Viewport>
+        <Popover.Arrow />
+      </Popover.Content>
+    </Popover.Root>
+  );
+};
+
+export default {
+  component: StorybookPopover,
+};
+
+export const Default = {
+  args: {
+    openTrigger: <Button>Open popover</Button>,
+    children: faker.lorem.paragraphs(3),
+  },
+};

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,123 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  Root as PopoverRootPrimitive,
+  type PopoverProps as PopoverRootPrimitiveProps,
+  type PopoverContentProps as PopoverContentPrimitiveProps,
+  PopoverContent as PopoverContentPrimitive,
+  type PopoverTriggerProps as PopoverTriggerPrimitiveProps,
+  PopoverTrigger as PopoverTriggerPrimitive,
+  type PopoverAnchorProps as PopoverAnchorPrimitiveProps,
+  PopoverAnchor as PopoverAnchorPrimitive,
+  type PopoverPortalProps as PopoverPortalPrimitiveProps,
+  PopoverPortal as PopoverPortalPrimitive,
+  type PopoverArrowProps as PopoverArrowPrimitiveProps,
+  PopoverArrow as PopoverArrowPrimitive,
+  type PopoverCloseProps as PopoverClosePrimitiveProps,
+  PopoverClose as PopoverClosePrimitive,
+} from '@radix-ui/react-popover';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithRef, forwardRef, type FunctionComponent } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../ElevationProvider';
+
+type PopoverRootProps = PopoverRootPrimitiveProps;
+
+const PopoverRoot: FunctionComponent<PopoverRootProps> = PopoverRootPrimitive;
+
+type PopoverPortalProps = PopoverPortalPrimitiveProps;
+
+const PopoverPortal = PopoverPortalPrimitive;
+
+type PopoverTriggerProps = PopoverTriggerPrimitiveProps;
+
+const PopoverTrigger = PopoverTriggerPrimitive;
+
+type PopoverAnchorProps = PopoverAnchorPrimitiveProps;
+
+const PopoverAnchor = PopoverAnchorPrimitive;
+
+type PopoverCloseProps = PopoverClosePrimitiveProps;
+
+const PopoverClose = PopoverClosePrimitive;
+
+type PopoverArrowProps = ThemedClassName<PopoverArrowPrimitiveProps>;
+
+const PopoverArrow = forwardRef<SVGSVGElement, PopoverArrowProps>(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <PopoverArrowPrimitive
+      {...props}
+      className={tx('popover.arrow', 'popover__arrow', {}, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+type PopoverContentProps = ThemedClassName<PopoverContentPrimitiveProps>;
+
+const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <PopoverContentPrimitive
+        sideOffset={4}
+        collisionPadding={8}
+        {...props}
+        className={tx('popover.content', 'popover', {}, classNames)}
+        ref={forwardedRef}
+      >
+        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+      </PopoverContentPrimitive>
+    );
+  },
+);
+
+type PopoverViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  asChild?: boolean;
+  constrainInline?: boolean;
+  constrainBlock?: boolean;
+};
+
+const PopoverViewport = forwardRef<HTMLDivElement, PopoverViewportProps>(
+  ({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.div;
+    return (
+      <Root
+        {...props}
+        className={tx('popover.viewport', 'popover__viewport', { constrainInline, constrainBlock }, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Root>
+    );
+  },
+);
+
+export const Popover = {
+  Root: PopoverRoot,
+  Portal: PopoverPortal,
+  Trigger: PopoverTrigger,
+  Anchor: PopoverAnchor,
+  Arrow: PopoverArrow,
+  Close: PopoverClose,
+  Content: PopoverContent,
+  Viewport: PopoverViewport,
+};
+
+export type {
+  PopoverRootProps,
+  PopoverPortalProps,
+  PopoverTriggerProps,
+  PopoverAnchorProps,
+  PopoverArrowProps,
+  PopoverCloseProps,
+  PopoverContentProps,
+  PopoverViewportProps,
+};

package/src/components/Popover/index.ts

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

package/src/components/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { ProgressBar } from './ProgressBar';
+
+export default {
+  component: ProgressBar,
+  actions: { argTypesRegex: '^on.*' },
+};
+
+export const Normal = (props: any) => {
+  return (
+    <div className='flex flex-col gap-5'>
+      <ProgressBar progress={0} {...props} />
+      <ProgressBar progress={0.3} {...props} />
+      <ProgressBar progress={0.7} {...props} />
+      <ProgressBar progress={1} {...props} />
+    </div>
+  );
+};
+
+export const Indeterminate = (props: any) => {
+  return (
+    <>
+      <ProgressBar className='m-4' indeterminate {...props} />
+    </>
+  );
+};

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+export type ProgressBarProps = {
+  indeterminate?: boolean;
+  progress?: number;
+  className?: string;
+};
+
+export const ProgressBar = (props: ProgressBarProps) => {
+  const { className, indeterminate = false, progress = 0 } = props;
+  return (
+    <span
+      role='none'
+      className={'w-20 h-1 inline-block relative bg-neutral-400/25 rounded-full' + (className ? ' ' + className : '')}
+    >
+      <span
+        className={
+          'absolute left-0 top-0 bottom-0 inline-block bg-neutral-400 rounded-full' +
+          (indeterminate ? ' animate-progress-indeterminate' : '')
+        }
+        {...(indeterminate ? {} : { style: { width: `${(progress * 100).toFixed(0)}%` } })}
+      />
+    </span>
+  );
+};

package/src/components/ProgressBar/index.ts

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

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import React, { type PropsWithChildren } from 'react';
+
+import { groupSurface, surfaceElevation } from '@dxos/react-ui-theme';
+
+import { ScrollArea } from './ScrollArea';
+
+faker.seed(1234);
+
+const StorybookScrollArea = ({ children }: PropsWithChildren<{}>) => {
+  return (
+    <ScrollArea.Root
+      classNames={['is-[300px] bs-[400px] rounded', groupSurface, surfaceElevation({ elevation: 'group' })]}
+    >
+      <ScrollArea.Viewport classNames='rounded p-4'>
+        <p>{children}</p>
+      </ScrollArea.Viewport>
+      <ScrollArea.Scrollbar orientation='horizontal'>
+        <ScrollArea.Thumb />
+      </ScrollArea.Scrollbar>
+      <ScrollArea.Scrollbar orientation='vertical'>
+        <ScrollArea.Thumb />
+      </ScrollArea.Scrollbar>
+      <ScrollArea.Corner />
+    </ScrollArea.Root>
+  );
+};
+
+export default {
+  component: StorybookScrollArea,
+};
+
+export const Default = {
+  args: {
+    children: faker.lorem.paragraphs(5),
+  },
+};

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,105 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  Root as ScrollAreaPrimitiveRoot,
+  type ScrollAreaProps as ScrollAreaPrimitiveRootProps,
+  Viewport as ScrollAreaPrimitiveViewport,
+  type ScrollAreaViewportProps as ScrollAreaPrimitiveViewportProps,
+  Scrollbar as ScrollAreaPrimitiveScrollbar,
+  type ScrollAreaScrollbarProps as ScrollAreaPrimitiveScrollbarProps,
+  Thumb as ScrollAreaPrimitiveThumb,
+  type ScrollAreaThumbProps as ScrollAreaPrimitiveThumbProps,
+  Corner as ScrollAreaPrimitiveCorner,
+  type ScrollAreaCornerProps as ScrollAreaPrimitiveCornerProps,
+} from '@radix-ui/react-scroll-area';
+import React, { forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+
+type ScrollAreaRootProps = ThemedClassName<ScrollAreaPrimitiveRootProps>;
+
+const ScrollAreaRoot = forwardRef<HTMLDivElement, ScrollAreaRootProps>(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <ScrollAreaPrimitiveRoot
+      {...props}
+      className={tx('scrollArea.root', 'scroll-area', {}, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+type ScrollAreaViewportProps = ThemedClassName<ScrollAreaPrimitiveViewportProps>;
+
+const ScrollAreaViewport = forwardRef<HTMLDivElement, ScrollAreaViewportProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ScrollAreaPrimitiveViewport
+        {...props}
+        className={tx('scrollArea.viewport', 'scroll-area', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type ScrollAreaScrollbarProps = ThemedClassName<ScrollAreaPrimitiveScrollbarProps>;
+
+const ScrollAreaScrollbar = forwardRef<HTMLDivElement, ScrollAreaScrollbarProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ScrollAreaPrimitiveScrollbar
+        {...props}
+        className={tx('scrollArea.scrollbar', 'scroll-area__scrollbar', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type ScrollAreaThumbProps = ThemedClassName<ScrollAreaPrimitiveThumbProps>;
+
+const ScrollAreaThumb = forwardRef<HTMLDivElement, ScrollAreaThumbProps>(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <ScrollAreaPrimitiveThumb
+      {...props}
+      className={tx('scrollArea.thumb', 'scroll-area__thumb', {}, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+type ScrollAreaCornerProps = ThemedClassName<ScrollAreaPrimitiveCornerProps>;
+
+const ScrollAreaCorner = forwardRef<HTMLDivElement, ScrollAreaCornerProps>(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <ScrollAreaPrimitiveCorner
+      {...props}
+      className={tx('scrollArea.corner', 'scroll-area__corner', {}, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+export const ScrollArea = {
+  Root: ScrollAreaRoot,
+  Viewport: ScrollAreaViewport,
+  Scrollbar: ScrollAreaScrollbar,
+  Thumb: ScrollAreaThumb,
+  Corner: ScrollAreaCorner,
+};
+
+export type {
+  ScrollAreaRootProps,
+  ScrollAreaViewportProps,
+  ScrollAreaScrollbarProps,
+  ScrollAreaThumbProps,
+  ScrollAreaCornerProps,
+};

package/src/components/ScrollArea/index.ts

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