@dxos/react-ui 0.1.20 → 0.1.22

package/src/components/NavMenu/NavMenu.tsx

@@ -1,203 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import React, { ComponentProps, ForwardedRef, forwardRef, ReactNode } from 'react';
-
-import { defaultFocus, defaultHover, defaultInlineSeparator } from '../../styles';
-import { mx } from '../../util';
-import { defaultButtonColors, primaryButtonColors } from '../Button';
-import { Tooltip, TooltipProps } from '../Tooltip';
-
-interface NavMenuItemSharedProps {
-  children: ReactNode;
-  active?: boolean;
-  separator?: false;
-}
-
-export interface NavMenuLinkItemProps extends NavMenuItemSharedProps {
-  triggerLinkProps: Omit<ComponentProps<typeof NavigationMenuPrimitive.Link>, 'children'>;
-  children: ReactNode;
-}
-
-export interface NavMenuTooltipLinkItemProps extends NavMenuLinkItemProps {
-  tooltip: Omit<TooltipProps, 'children'>;
-}
-
-export interface NavMenuInvokerItemProps extends NavMenuItemSharedProps {
-  content: ReactNode;
-  children: ReactNode;
-}
-
-export interface NavMenuSeparatorProps {
-  separator: true;
-}
-
-export type NavMenuItem =
-  | NavMenuTooltipLinkItemProps
-  | NavMenuLinkItemProps
-  | NavMenuInvokerItemProps
-  | NavMenuSeparatorProps;
-
-export interface NavMenuSlots {
-  root?: Omit<ComponentProps<typeof NavigationMenuPrimitive.Root>, 'children'>;
-  viewport?: Omit<ComponentProps<typeof NavigationMenuPrimitive.Viewport>, 'children'>;
-  list?: Omit<ComponentProps<typeof NavigationMenuPrimitive.List>, 'children'>;
-  indicator?: Omit<ComponentProps<typeof NavigationMenuPrimitive.Indicator>, 'children'>;
-  indicatorIcon?: Pick<ComponentProps<'div'>, 'className'>;
-}
-
-export interface NavMenuProps {
-  items: NavMenuItem[];
-  slots?: NavMenuSlots;
-}
-
-const NavMenuInvokerItem = forwardRef(
-  ({ content, children, active }: NavMenuInvokerItemProps, ref: ForwardedRef<HTMLLIElement>) => {
-    return (
-      <NavigationMenuPrimitive.Item ref={ref}>
-        <NavigationMenuPrimitive.Trigger
-          className={mx(
-            'px-3 py-2 text-sm rounded-md text-sm font-medium transition-color',
-            active ? primaryButtonColors : defaultButtonColors,
-            defaultFocus,
-            defaultHover({})
-          )}
-        >
-          {children}
-        </NavigationMenuPrimitive.Trigger>
-        <NavigationMenuPrimitive.Content
-          className={mx(
-            'absolute w-auto top-0 left-0 rounded-lg',
-            'radix-motion-from-start:animate-enter-from-left',
-            'radix-motion-from-end:animate-enter-from-right',
-            'radix-motion-to-start:animate-exit-to-left',
-            'radix-motion-to-end:animate-exit-to-right'
-          )}
-        >
-          {content}
-        </NavigationMenuPrimitive.Content>
-      </NavigationMenuPrimitive.Item>
-    );
-  }
-);
-
-const NavMenuLinkItem = forwardRef(
-  ({ triggerLinkProps, children, active }: NavMenuLinkItemProps, ref: ForwardedRef<HTMLLIElement>) => (
-    <NavigationMenuPrimitive.Item asChild ref={ref}>
-      <NavigationMenuPrimitive.Link
-        {...triggerLinkProps}
-        active={active}
-        className={mx(
-          'px-3 py-2 text-sm rounded-md transition-color',
-          active ? primaryButtonColors : defaultButtonColors,
-          active ? 'font-medium' : 'font-normal',
-          defaultFocus,
-          defaultHover({}),
-          triggerLinkProps.className
-        )}
-      >
-        {children}
-      </NavigationMenuPrimitive.Link>
-    </NavigationMenuPrimitive.Item>
-  )
-);
-
-const NavMenuTooltipLinkItem = forwardRef(
-  ({ tooltip, triggerLinkProps, active, children }: NavMenuTooltipLinkItemProps, ref: ForwardedRef<HTMLLIElement>) => (
-    <Tooltip {...tooltip}>
-      {/* todo: why does the Tooltip not show if you use <NavMenuLinkItem {…}/> here? */}
-      <NavigationMenuPrimitive.Item asChild ref={ref}>
-        <NavigationMenuPrimitive.Link
-          {...triggerLinkProps}
-          active={active}
-          className={mx(
-            'px-3 py-2 text-sm rounded-md transition-color',
-            active ? primaryButtonColors : defaultButtonColors,
-            active ? 'font-medium' : 'font-normal',
-            defaultFocus,
-            defaultHover({}),
-            triggerLinkProps.className
-          )}
-        >
-          {children}
-        </NavigationMenuPrimitive.Link>
-      </NavigationMenuPrimitive.Item>
-    </Tooltip>
-  )
-);
-
-export const NavMenuLink = NavigationMenuPrimitive.Link;
-
-export const NavMenuSeparatorItem = (_props: NavMenuSeparatorProps) => {
-  return <span role='none' className={mx(defaultInlineSeparator, 'bs-5')} />;
-};
-
-const isTooltipLinkItem = (o: any): o is NavMenuTooltipLinkItemProps => 'tooltip' in o;
-const isLinkItem = (o: any): o is NavMenuLinkItemProps => 'triggerLinkProps' in o;
-const isSeparator = (o: any): o is NavMenuSeparatorProps => 'separator' in o;
-
-export const NavMenu = ({ items, slots = {} }: NavMenuProps) => {
-  return (
-    <NavigationMenuPrimitive.Root {...slots.root} className={mx('flex justify-center', slots.root?.className)}>
-      <NavigationMenuPrimitive.List
-        {...slots.list}
-        className={mx(
-          'relative flex flex-row items-center gap-1 rounded-lg bg-white dark:bg-neutral-750 p-1 button-elevation overflow-x-auto',
-          slots.list?.className
-        )}
-      >
-        {items.map((item: NavMenuItem, i) => {
-          return isTooltipLinkItem(item) ? (
-            <NavMenuTooltipLinkItem key={i} {...item} />
-          ) : isLinkItem(item) ? (
-            <NavMenuLinkItem key={i} {...item} />
-          ) : isSeparator(item) ? (
-            <NavMenuSeparatorItem key={i} {...item} />
-          ) : (
-            <NavMenuInvokerItem key={i} {...item} />
-          );
-        })}
-
-        <NavigationMenuPrimitive.Indicator
-          {...slots.indicator}
-          className={mx(
-            'z-10 top-[100%] flex items-end justify-center h-2 overflow-hidden',
-            'radix-state-visible:animate-fade-in',
-            'radix-state-hidden:animate-fade-out',
-            'transition-[width_transform] duration-[250ms] ease-[ease]',
-            slots.indicator?.className
-          )}
-        >
-          <div
-            className={mx(
-              'top-1 relative bg-white dark:bg-neutral-750 w-2 h-2 rotate-45',
-              slots.indicatorIcon?.className
-            )}
-          />
-        </NavigationMenuPrimitive.Indicator>
-      </NavigationMenuPrimitive.List>
-
-      <div
-        className={mx('absolute flex justify-center', 'w-[140%] left-[-20%] top-[100%]')}
-        style={{
-          perspective: '2000px'
-        }}
-      >
-        <NavigationMenuPrimitive.Viewport
-          {...slots.viewport}
-          className={mx(
-            'relative mbs-2 shadow-lg rounded-md bg-white dark:bg-neutral-750 overflow-hidden',
-            'w-radix-navigation-menu-viewport',
-            'h-radix-navigation-menu-viewport',
-            'radix-state-open:animate-scale-in-content',
-            'radix-state-closed:animate-scale-out-content',
-            'origin-[top_center] transition-[width_height] duration-300 ease-[ease]',
-            slots.viewport?.className
-          )}
-        />
-      </div>
-    </NavigationMenuPrimitive.Root>
-  );
-};

package/src/components/NavMenu/index.ts

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

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

@@ -1,49 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import '@dxosTheme';
-import React from 'react';
-
-import { defaultFocus, defaultHover, defaultActive } from '../../styles';
-import { templateForComponent } from '../../testing';
-import { mx } from '../../util';
-import { Avatar } from '../Avatar';
-import { Button } from '../Button';
-import { Popover, PopoverProps } from './Popover';
-
-export default {
-  title: 'react-ui/Popover',
-  component: Popover
-};
-
-const Template = ({ children, ...props }: PopoverProps) => {
-  return <Popover {...props}>{children}</Popover>;
-};
-
-export const Default = templateForComponent(Template)({
-  openTrigger: '',
-  closeLabel: '',
-  children: ''
-});
-Default.args = {
-  openTrigger: <Button>Open popover</Button>,
-  children: 'Popover content'
-};
-
-export const AvatarTrigger = templateForComponent(Template)({
-  openTrigger: (
-    <Avatar
-      slots={{
-        root: {
-          tabIndex: 0,
-          className: mx('button-elevation cursor-pointer rounded-md', defaultHover({}), defaultFocus, defaultActive)
-        }
-      }}
-      label={<span className='sr-only'>Open popover</span>}
-      fallbackValue='open popover'
-    />
-  ),
-  closeLabel: 'Close',
-  children: 'Popover content'
-});

package/src/components/Popover/Popover.tsx

@@ -1,110 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { Button as ToolbarButtonItem } from '@radix-ui/react-toolbar';
-import { X } from 'phosphor-react';
-import React, { ComponentProps, ReactNode, useCallback, useState } from 'react';
-
-import { defaultActive, defaultFocus, defaultHover, getSize } from '../../styles';
-import { mx } from '../../util';
-
-export interface PopoverSlots {
-  content?: Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'children'>;
-  arrow?: Pick<ComponentProps<typeof PopoverPrimitive.Arrow>, 'className'>;
-  close?: Omit<ComponentProps<typeof PopoverPrimitive.Close>, 'children'>;
-  closeIcon?: ComponentProps<typeof X>;
-  trigger?: Omit<ComponentProps<typeof PopoverPrimitive.Trigger>, 'children'>;
-}
-
-export interface PopoverProps {
-  openTrigger: ReactNode;
-  children: ReactNode;
-  closeLabel?: string;
-  initiallyOpen?: boolean;
-  mountAsSibling?: boolean;
-  triggerIsInToolbar?: boolean;
-  slots?: PopoverSlots;
-}
-
-type KeyUpEvent = Parameters<Exclude<ComponentProps<typeof PopoverPrimitive.Trigger>['onKeyUp'], undefined>>[0];
-
-export const Popover = ({
-  openTrigger,
-  children,
-  closeLabel,
-  initiallyOpen,
-  mountAsSibling,
-  triggerIsInToolbar,
-  slots = {}
-}: PopoverProps) => {
-  const [isOpen, setIsOpen] = useState(!!initiallyOpen);
-  const onKeyUp = useCallback(
-    (e: KeyUpEvent) => {
-      const keyUpId = (document.activeElement as HTMLElement).dataset.keyupid;
-      if (keyUpId && e.key === ' ') {
-        setIsOpen(keyUpId === 'open');
-      }
-      slots.trigger?.onKeyUp?.(e);
-    },
-    [slots.trigger?.onKeyUp]
-  );
-
-  const popoverContent = (
-    <PopoverPrimitive.Content
-      align='center'
-      {...slots.content}
-      className={mx(
-        'radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down',
-        'rounded-lg p-4 shadow-xl elevated-buttons',
-        'bg-white dark:bg-neutral-800',
-        defaultFocus,
-        slots.content?.className
-      )}
-    >
-      <PopoverPrimitive.Arrow className={mx('fill-current text-white dark:text-neutral-800', slots.arrow?.className)} />
-      {children}
-      {closeLabel && (
-        <PopoverPrimitive.Close
-          {...slots.close}
-          className={mx(
-            'absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-sm p-1',
-            defaultFocus,
-            defaultHover({}),
-            slots.close?.className
-          )}
-          aria-label={closeLabel}
-          data-keyupid='close'
-        >
-          <X
-            {...slots.closeIcon}
-            className={mx(
-              getSize(4),
-              'text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-400',
-              slots.closeIcon?.className
-            )}
-          />
-        </PopoverPrimitive.Close>
-      )}
-    </PopoverPrimitive.Content>
-  );
-
-  const trigger = (
-    <PopoverPrimitive.Trigger
-      {...slots.trigger}
-      onKeyUp={onKeyUp}
-      data-keyupid='open'
-      className={mx(defaultHover({}), defaultFocus, defaultActive, slots.trigger?.className)}
-    >
-      {openTrigger}
-    </PopoverPrimitive.Trigger>
-  );
-
-  return (
-    <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
-      {triggerIsInToolbar ? <ToolbarButtonItem asChild>{trigger}</ToolbarButtonItem> : trigger}
-      {mountAsSibling ? popoverContent : <PopoverPrimitive.Portal>{popoverContent}</PopoverPrimitive.Portal>}
-    </PopoverPrimitive.Root>
-  );
-};

package/src/components/Popover/index.ts

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

package/src/components/QrCode/QrCode.stories.tsx

@@ -1,42 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import '@dxosTheme';
-import React from 'react';
-
-import { templateForComponent } from '../../testing';
-import { QrCode, QrCodeProps, CompactQrCode, CompactQrCodeProps } from './QrCode';
-
-export default {
-  title: 'react-ui/QrCode',
-  component: QrCode
-};
-
-const Template = (props: QrCodeProps) => {
-  return <QrCode {...props} />;
-};
-
-const CompactTemplate = (props: CompactQrCodeProps) => {
-  return <CompactQrCode {...props} />;
-};
-
-export const Default = templateForComponent(Template)({
-  value: '',
-  label: ''
-});
-Default.args = {
-  label: 'Click to copy this code’s value',
-  value: 'https://dxos.org'
-};
-
-export const Compact = templateForComponent(CompactTemplate)({
-  value: '',
-  copyLabel: '',
-  displayQrLabel: ''
-});
-Compact.args = {
-  copyLabel: 'Copy',
-  displayQrLabel: 'Display QR',
-  value: 'https://dxos.org'
-};

package/src/components/QrCode/QrCode.tsx

@@ -1,165 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { QrCode as QrCodeIcon, CopySimple } from 'phosphor-react';
-import { QRCodeSVG } from 'qrcode.react';
-import React, { useCallback, ReactHTMLElement, ComponentProps } from 'react';
-
-import { useId } from '../../hooks';
-import { Size } from '../../props';
-import { getSize } from '../../styles';
-import { mx } from '../../util';
-import { Button, ButtonGroup } from '../Button';
-import { Tooltip, TooltipSlots } from '../Tooltip';
-
-interface SharedQrCodeProps {
-  value: string;
-  buttonCompact?: boolean;
-}
-
-interface FullQrCodeSlots {
-  tooltipContent?: TooltipSlots['content'];
-  tooltipArrow?: TooltipSlots['arrow'];
-  button?: Omit<ComponentProps<'button'>, 'ref' | 'children'>;
-  qrSvg?: ComponentProps<typeof QRCodeSVG>;
-}
-
-export interface FullQrCodeProps extends SharedQrCodeProps {
-  label: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
-  size?: Size;
-  slots?: FullQrCodeSlots;
-}
-
-export type QrCodeProps = FullQrCodeProps;
-
-interface CompactQrCodeSlots {
-  qrTooltipContent?: TooltipSlots['content'];
-  qrTooltipArrow?: TooltipSlots['arrow'];
-  qrButton?: Omit<ComponentProps<'button'>, 'ref' | 'children'>;
-  copyTooltipContent?: TooltipSlots['content'];
-  copyTooltipArrow?: TooltipSlots['arrow'];
-  copyButton?: Omit<ComponentProps<'button'>, 'ref' | 'children'>;
-  qrSvg?: ComponentProps<typeof QRCodeSVG>;
-}
-
-export interface CompactQrCodeProps extends SharedQrCodeProps {
-  displayQrLabel: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
-  copyLabel: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
-  slots?: CompactQrCodeSlots;
-}
-
-export const FullQrCode = ({ value, label, size, buttonCompact = true, slots = {} }: FullQrCodeProps) => {
-  const labelId = useId('qr-label');
-  const copyValue = useCallback(() => {
-    void navigator.clipboard.writeText(value);
-  }, [value]);
-  return (
-    <Tooltip content={label} {...slots.tooltipContent}>
-      <Button
-        compact={buttonCompact}
-        {...slots.button}
-        className={mx('overflow-hidden p-0', getSize(size ?? 32), slots.button?.className)}
-        onClick={copyValue}
-      >
-        <QRCodeSVG
-          includeMargin
-          role='none'
-          {...slots.qrSvg}
-          value={value}
-          className={mx('w-full h-auto', slots.qrSvg?.className)}
-        />
-        <div id={labelId} className='sr-only'>
-          {label}
-        </div>
-      </Button>
-    </Tooltip>
-  );
-};
-
-export const CompactQrCode = ({ value, displayQrLabel, copyLabel, buttonCompact, slots = {} }: CompactQrCodeProps) => {
-  const labelId = useId('qr-label');
-  const copyValue = useCallback(() => {
-    void navigator.clipboard.writeText(value);
-  }, [value]);
-  return (
-    <>
-      <ButtonGroup className='inline-flex grow md:hidden'>
-        <span className='sr-only' id={labelId}>
-          {displayQrLabel}
-        </span>
-        <Tooltip
-          compact
-          slots={{ content: { ...slots.qrTooltipContent, side: slots?.qrTooltipContent?.side ?? 'left' } }}
-          content={
-            <div role='none' className='overflow-hidden rounded-md'>
-              <QRCodeSVG
-                includeMargin
-                role='none'
-                {...slots.qrSvg}
-                value={value}
-                className={mx(getSize(32), slots.qrSvg?.className)}
-              />
-            </div>
-          }
-        >
-          <Button
-            compact={buttonCompact}
-            {...slots.qrButton}
-            className={mx('border-ie-0 grow rounded-is-md', slots.qrButton?.className)}
-            aria-labelledby={labelId}
-          >
-            <QrCodeIcon className={getSize(5)} />
-          </Button>
-        </Tooltip>
-        <Tooltip content={copyLabel} tooltipLabelsTrigger slots={{ content: slots.qrTooltipContent }}>
-          <Button
-            compact={buttonCompact}
-            {...slots.copyButton}
-            className={mx('rounded-ie-md grow', slots.copyButton?.className)}
-            onClick={copyValue}
-          >
-            <CopySimple className={getSize(5)} />
-          </Button>
-        </Tooltip>
-      </ButtonGroup>
-      <ButtonGroup className='hidden md:inline-flex'>
-        <Tooltip
-          compact
-          slots={{ content: { ...slots.qrTooltipContent, side: slots?.qrTooltipContent?.side ?? 'left' } }}
-          content={
-            <div role='none' className='overflow-hidden rounded-md'>
-              <QRCodeSVG
-                includeMargin
-                role='none'
-                {...slots.qrSvg}
-                value={value}
-                className={mx(getSize(32), slots.qrSvg?.className)}
-              />
-            </div>
-          }
-        >
-          <Button
-            compact={buttonCompact}
-            {...slots.qrButton}
-            className={mx('border-ie-0 flex gap-1 rounded-is-md', slots.qrButton?.className)}
-          >
-            <QrCodeIcon className={getSize(5)} />
-            {displayQrLabel}
-          </Button>
-        </Tooltip>
-        <Button
-          compact={buttonCompact}
-          {...slots.copyButton}
-          className={mx('flex gap-1 rounded-ie-md', slots.copyButton?.className)}
-          onClick={copyValue}
-        >
-          <CopySimple className={getSize(5)} />
-          {copyLabel}
-        </Button>
-      </ButtonGroup>
-    </>
-  );
-};
-
-export const QrCode = FullQrCode;

package/src/components/QrCode/index.ts

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

package/src/components/Tag/Tag.stories.tsx

@@ -1,23 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import '@dxosTheme';
-import React from 'react';
-
-import { templateForComponent } from '../../testing';
-import { Tag, TagProps } from './Tag';
-
-export default {
-  title: 'react-ui/Tag',
-  component: Tag
-};
-
-const Template = ({ children, ...props }: TagProps) => {
-  return <Tag {...props}>{children}</Tag>;
-};
-
-const defaultProps = {};
-
-export const Default = templateForComponent(Template)(defaultProps);
-Default.args = { children: 'Hello' };

package/src/components/Tag/Tag.tsx

@@ -1,32 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import React, { ComponentProps, PropsWithChildren, ReactNode } from 'react';
-
-import { MessageValence } from '../../props';
-import { mx } from '../../util';
-
-export interface TagProps extends ComponentProps<'span'> {
-  valence?: MessageValence;
-  children?: ReactNode;
-}
-
-const valenceColorMap: Record<MessageValence, string> = {
-  neutral: 'bg-neutral-100 text-neutral-800 dark:bg-neutral-700 dark:text-neutral-300',
-  success: 'bg-success-100 text-success-800 dark:bg-success-700 dark:text-success-300',
-  info: 'bg-info-100 text-info-800 dark:bg-info-700 dark:text-info-300',
-  warning: 'bg-warning-100 text-warning-800 dark:bg-warning-700 dark:text-warning-300',
-  error: 'bg-error-100 text-error-800 dark:bg-error-700 dark:text-error-300'
-};
-
-export const Tag = ({ children, valence = 'neutral', ...rootSlot }: PropsWithChildren<TagProps>) => {
-  return (
-    <span
-      {...rootSlot}
-      className={mx('text-xs font-semibold px-2.5 py-0.5 rounded', valenceColorMap[valence], rootSlot?.className)}
-    >
-      {children}
-    </span>
-  );
-};

package/src/components/Tag/index.ts

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

package/src/components/Toast/Toast.stories.tsx

@@ -1,31 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import '@dxosTheme';
-import React from 'react';
-
-import { templateForComponent } from '../../testing';
-import { Button } from '../Button';
-import { Toast, ToastProps } from './Toast';
-
-export default {
-  title: 'react-ui/Toast',
-  component: Toast
-};
-
-const Template = ({ ...props }: ToastProps) => {
-  return <Toast {...props} />;
-};
-
-export const Default = templateForComponent(Template)({
-  title: ''
-});
-
-Default.args = {
-  openTrigger: 'Open toast',
-  title: 'Hi, this is a toast',
-  description: 'This goes away on its own with a timer.',
-  actionTriggers: [{ altText: 'Press F5 to reload the page', trigger: <Button>Reload</Button> }],
-  closeTrigger: <Button>Close</Button>
-};