@dxos/react-ui 0.1.0

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import cx from 'classnames';
+import { X } from 'phosphor-react';
+import React, { ComponentProps, ReactNode, useCallback, useState } from 'react';
+
+import { defaultFocus, defaultHover } from '../../styles';
+
+export interface PopoverProps extends Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'children'> {
+  openTrigger: ReactNode;
+  children: ReactNode;
+  closeLabel?: string;
+  initiallyOpen?: boolean;
+  mountAsSibling?: boolean;
+}
+
+type KeyUpEvent = Parameters<Exclude<ComponentProps<typeof PopoverPrimitive.Trigger>['onKeyUp'], undefined>>[0];
+
+export const Popover = ({
+  openTrigger,
+  children,
+  closeLabel,
+  initiallyOpen,
+  mountAsSibling,
+  ...contentProps
+}: 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');
+    }
+  }, []);
+
+  const popoverContent = (
+    <PopoverPrimitive.Content
+      align='center'
+      {...contentProps}
+      className={cx(
+        '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,
+        contentProps.className
+      )}
+    >
+      <PopoverPrimitive.Arrow className='fill-current text-white dark:text-neutral-800' />
+      {children}
+      {closeLabel && (
+        <PopoverPrimitive.Close
+          className={cx(
+            'absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-sm p-1',
+            defaultFocus,
+            defaultHover({})
+          )}
+          aria-label={closeLabel}
+          data-keyupid='close'
+        >
+          <X className='h-4 w-4 text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-400' />
+        </PopoverPrimitive.Close>
+      )}
+    </PopoverPrimitive.Content>
+  );
+
+  return (
+    <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverPrimitive.Trigger asChild onKeyUp={onKeyUp} data-keyupid='open'>
+        {openTrigger}
+      </PopoverPrimitive.Trigger>
+      {mountAsSibling ? popoverContent : <PopoverPrimitive.Portal>{popoverContent}</PopoverPrimitive.Portal>}
+    </PopoverPrimitive.Root>
+  );
+};

package/src/components/Popover/index.ts

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

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

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

package/src/components/QrCode/QrCode.tsx

@@ -0,0 +1,42 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+import { QRCodeSVG } from 'qrcode.react';
+import React, { useCallback, ReactHTMLElement } from 'react';
+
+import { useId } from '../../hooks';
+import { Size } from '../../props';
+import { getSize } from '../../styles';
+import { Button, ButtonProps } from '../Button';
+import { Tooltip, TooltipProps } from '../Tooltip';
+
+export interface QrCodeProps
+  extends Omit<ButtonProps, 'onClick' | 'ref'>,
+    Pick<TooltipProps, 'side' | 'sideOffset' | 'collisionPadding'> {
+  value: string;
+  label: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
+  size?: Size;
+}
+
+export const QrCode = ({ value, label, size, side, sideOffset, collisionPadding, ...buttonProps }: QrCodeProps) => {
+  const labelId = useId('qr-label');
+  const copyValue = useCallback(() => {
+    void navigator.clipboard.writeText(value);
+  }, [value]);
+  return (
+    <Tooltip content={label} {...{ side, sideOffset, collisionPadding }}>
+      <Button
+        {...buttonProps}
+        className={cx('py-0 px-0 overflow-hidden', getSize(size ?? 32), buttonProps.className)}
+        onClick={copyValue}
+      >
+        <QRCodeSVG value={value} includeMargin role='none' className='w-full h-auto' />
+        <div id={labelId} className='sr-only'>
+          {label}
+        </div>
+      </Button>
+    </Tooltip>
+  );
+};

package/src/components/QrCode/index.ts

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

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

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

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,84 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import cx from 'classnames';
+import React, { cloneElement, ComponentProps, ReactHTMLElement, ReactNode, useState } from 'react';
+
+import { defaultDescription, defaultFocus } from '../../styles';
+import { Button } from '../Button';
+
+export interface ToastProps extends Omit<ComponentProps<typeof ToastPrimitive.Root>, 'title'> {
+  title: ReactNode;
+  openTrigger?: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
+  closeTrigger?: ReactNode;
+  actionTriggers?: { altText: string; trigger: ReactNode }[];
+  titleVisuallyHidden?: boolean;
+  description?: ReactNode;
+  initiallyOpen?: boolean;
+}
+
+export const Toast = ({
+  title,
+  titleVisuallyHidden,
+  description,
+  openTrigger,
+  closeTrigger,
+  actionTriggers,
+  initiallyOpen,
+  ...rootProps
+}: ToastProps) => {
+  const [isOpen, setIsOpen] = useState(!!initiallyOpen);
+
+  return (
+    <>
+      {openTrigger &&
+        (typeof openTrigger === 'string' ? (
+          <Button onClick={() => setIsOpen(true)}>{openTrigger}</Button>
+        ) : (
+          cloneElement(openTrigger as Omit<ReactHTMLElement<HTMLElement>, 'ref'>, { onClick: () => setIsOpen(true) })
+        ))}
+      <ToastPrimitive.Root
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        {...rootProps}
+        className={cx(
+          'shadow-lg rounded-lg',
+          'bg-white dark:bg-neutral-800',
+          'radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right',
+          'radix-state-closed:animate-toast-hide',
+          'radix-swipe-end:animate-toast-swipe-out',
+          'translate-x-radix-toast-swipe-move-x',
+          'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]',
+          'elevated-buttons',
+          defaultFocus,
+          rootProps.className
+        )}
+      >
+        <div role='none' className='flex'>
+          <div role='none' className='w-0 flex-1 flex items-center pl-5 py-4 min-h-full'>
+            <div role='none' className='w-full radix flex flex-col justify-center min-h-full gap-1'>
+              <ToastPrimitive.Title className={cx('text-md font-medium', titleVisuallyHidden && 'sr-only')}>
+                {title}
+              </ToastPrimitive.Title>
+              {description && (
+                <ToastPrimitive.Description className={defaultDescription}>{description}</ToastPrimitive.Description>
+              )}
+            </div>
+          </div>
+          <div role='none' className='flex flex-col px-3 py-2 gap-1 items-stretch justify-center min-h-full'>
+            {(actionTriggers || []).map(({ altText, trigger }, index) => (
+              <ToastPrimitive.Action key={index} altText={altText} asChild={typeof trigger !== 'string'}>
+                {trigger}
+              </ToastPrimitive.Action>
+            ))}
+            {closeTrigger && (
+              <ToastPrimitive.Close asChild={typeof closeTrigger !== 'string'}>{closeTrigger}</ToastPrimitive.Close>
+            )}
+          </div>
+        </div>
+      </ToastPrimitive.Root>
+    </>
+  );
+};

package/src/components/Toast/index.ts

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

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+import { ChatTeardropText } from 'phosphor-react';
+import React from 'react';
+
+import { templateForComponent } from '../../testing';
+import { Tooltip, TooltipProps } from './Tooltip';
+
+export default {
+  title: 'react-ui/Tooltip',
+  component: Tooltip
+};
+
+const Template = ({ children, content }: TooltipProps) => {
+  return <Tooltip content={content}>{children}</Tooltip>;
+};
+
+export const Default = templateForComponent(Template)({
+  children: '',
+  content: ''
+});
+Default.args = {
+  children: <ChatTeardropText className='w-8 h-8' />,
+  content: 'Here’s a tooltip for you!'
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import cx from 'classnames';
+import React, { ComponentProps, ReactNode, useState } from 'react';
+
+import { useId } from '../../hooks';
+import { defaultTooltip } from '../../styles';
+
+export interface TooltipProps extends Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'children'> {
+  content: ReactNode;
+  children: ReactNode;
+  tooltipLabelsTrigger?: boolean;
+  mountAsSibling?: boolean;
+}
+
+export const Tooltip = ({ content, children, tooltipLabelsTrigger, mountAsSibling, ...contentProps }: TooltipProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const labelId = useId('tooltipLabel');
+
+  const tooltipContent = (
+    <TooltipPrimitive.Content
+      forceMount
+      {...contentProps}
+      className={cx(
+        'radix-side-top:animate-slide-down-fade',
+        'radix-side-right:animate-slide-left-fade',
+        'radix-side-bottom:animate-slide-up-fade',
+        'radix-side-left:animate-slide-right-fade',
+        'inline-flex items-center rounded-md px-4 py-2.5',
+        'shadow-lg bg-white dark:bg-neutral-800',
+        !isOpen && 'sr-only',
+        defaultTooltip,
+        contentProps.className
+      )}
+    >
+      <TooltipPrimitive.Arrow className='fill-current text-white dark:text-neutral-800' />
+      {content}
+    </TooltipPrimitive.Content>
+  );
+
+  return (
+    <TooltipPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
+      <TooltipPrimitive.Trigger asChild {...(tooltipLabelsTrigger && { 'aria-labelledby': labelId })}>
+        {children}
+      </TooltipPrimitive.Trigger>
+      {tooltipLabelsTrigger && (
+        <span id={labelId} className='sr-only'>
+          {content}
+        </span>
+      )}
+      {mountAsSibling ? tooltipContent : <TooltipPrimitive.Portal forceMount>{tooltipContent}</TooltipPrimitive.Portal>}
+    </TooltipPrimitive.Root>
+  );
+};

package/src/components/Tooltip/index.ts

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

package/src/components/UiProvider/UiProvider.tsx

@@ -0,0 +1,44 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import {
+  Provider as ToastProvider,
+  ToastProviderProps,
+  Viewport as ToastViewport,
+  ToastViewportProps
+} from '@radix-ui/react-toast';
+import { Provider as TooltipProvider, TooltipProviderProps } from '@radix-ui/react-tooltip';
+import cx from 'classnames';
+import React, { PropsWithChildren } from 'react';
+
+import { defaultFocus } from '../../styles';
+
+export type UiProviderProps = PropsWithChildren<{
+  tooltipProviderProps?: TooltipProviderProps;
+  toastProviderProps?: ToastProviderProps;
+  toastViewportProps?: ToastViewportProps;
+}>;
+
+export const UiProvider = ({
+  children,
+  tooltipProviderProps,
+  toastProviderProps,
+  toastViewportProps
+}: UiProviderProps) => {
+  return (
+    <ToastProvider {...toastProviderProps}>
+      <TooltipProvider delayDuration={0} {...tooltipProviderProps}>
+        {children}
+      </TooltipProvider>
+      <ToastViewport
+        {...toastViewportProps}
+        className={cx(
+          'z-50 fixed bottom-4 inset-x-4 w-auto md:top-4 md:right-4 md:left-auto md:bottom-auto md:w-full md:max-w-sm rounded-lg',
+          defaultFocus,
+          toastViewportProps?.className
+        )}
+      />
+    </ToastProvider>
+  );
+};

package/src/components/UiProvider/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './Alert';
+export * from './Avatar';
+export * from './Button';
+export * from './CompoundButton';
+export * from './Dialog';
+export * from './Group';
+export * from './Heading';
+export * from './Loading';
+export * from './Input';
+export * from './Main';
+export * from './NavMenu';
+export * from './Popover';
+export * from './QrCode';
+export * from './Toast';
+export * from './Tooltip';
+export * from './UiProvider';

package/src/hooks/index.ts

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

package/src/hooks/useId.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import alea from 'alea';
+import { useMemo } from 'react';
+
+interface PrngFactory {
+  new (seed?: string): () => number;
+}
+
+const Alea: PrngFactory = alea as unknown as PrngFactory;
+
+const prng = new Alea('@dxos/react-ui');
+
+const randomString = (n = 4) =>
+  prng()
+    .toString(16)
+    .slice(2, n + 2);
+
+export const useId = (namespace: string, n?: number) => useMemo(() => `${namespace}-${randomString(n)}`, []);

package/src/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './components';
+export * from './styles';
+export * from './props';
+export * from './hooks';