@dxos/react-ui 0.1.0

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+import React, { ComponentProps, ReactNode } from 'react';
+
+import { useId } from '../../hooks';
+import { MessageValence } from '../../props';
+import { valenceAlertColors } from '../../styles';
+
+export interface AlertProps extends Omit<ComponentProps<'div'>, 'title'> {
+  title: ReactNode;
+  assertive?: boolean;
+  valence?: MessageValence;
+  children?: ReactNode;
+}
+
+export const Alert = ({ title, children, assertive, valence, ...divProps }: AlertProps) => {
+  const labelId = useId('alertLabel');
+  return (
+    <div
+      role={assertive ? 'alert' : 'group'}
+      {...divProps}
+      className={cx('p-3 border rounded-md', valenceAlertColors(valence), divProps.className)}
+      aria-labelledby={labelId}
+    >
+      <p id={labelId} className='font-medium mb-2'>
+        {title}
+      </p>
+      {children}
+    </div>
+  );
+};

package/src/components/Alert/index.ts

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

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+import React from 'react';
+
+import { templateForComponent } from '../../testing';
+import { Avatar, AvatarProps } from './Avatar';
+
+export default {
+  title: 'react-ui/Avatar',
+  component: Avatar
+};
+
+const Template = ({ children, ...props }: AvatarProps) => {
+  return <Avatar {...props} />;
+};
+
+const defaultProps = {
+  fallbackValue: '',
+  label: <span />
+};
+
+export const Default = templateForComponent(Template)(defaultProps);
+Default.args = {
+  fallbackValue: '20970b563fc49b5bb194a6ffdff376031a3a11f9481360c071c3fed87874106b',
+  label: <span className='sr-only'>Hello</span>
+};

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,82 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import cx from 'classnames';
+import { toSvg } from 'jdenticon';
+import React, {
+  cloneElement,
+  ComponentProps,
+  ForwardedRef,
+  forwardRef,
+  PropsWithChildren,
+  ReactHTMLElement,
+  ReactNode,
+  useMemo
+} from 'react';
+
+import { useId } from '../../hooks';
+import { Size } from '../../props';
+import { getSize } from '../../styles';
+
+export interface AvatarProps extends ComponentProps<typeof AvatarPrimitive.Root> {
+  fallbackValue: string;
+  label: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
+  size?: Size;
+  variant?: 'square' | 'circle';
+  mediaSrc?: string;
+  children?: ReactNode;
+}
+
+const shapeStyles = {
+  circle: 'rounded-full',
+  square: 'rounded'
+};
+
+export const Avatar = forwardRef(
+  (
+    { mediaSrc, fallbackValue, label, variant = 'square', size = 10, ...rootProps }: PropsWithChildren<AvatarProps>,
+    ref: ForwardedRef<HTMLSpanElement>
+  ) => {
+    const labelId = useId('avatarLabel');
+    const imgSrc = useMemo(
+      () => `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(fallbackValue, size === 'px' ? 1 : size * 4))}`,
+      [fallbackValue]
+    );
+    return (
+      <>
+        <AvatarPrimitive.Root
+          {...rootProps}
+          className={cx('relative inline-flex', getSize(size), rootProps.className)}
+          aria-labelledby={labelId}
+          ref={ref}
+        >
+          {mediaSrc && (
+            <AvatarPrimitive.Image
+              src={mediaSrc}
+              alt='Avatar'
+              className={cx('h-full w-full object-cover overflow-hidden', shapeStyles[variant])}
+            />
+          )}
+          <AvatarPrimitive.Fallback
+            className={cx(
+              'flex h-full w-full items-center justify-center bg-white dark:bg-neutral-800 overflow-hidden',
+              shapeStyles[variant]
+            )}
+            delayMs={0}
+          >
+            <img role='none' alt={fallbackValue} src={imgSrc} className='h-full w-full' />
+          </AvatarPrimitive.Fallback>
+        </AvatarPrimitive.Root>
+        {typeof label === 'string' ? (
+          <span id={labelId} className='sr-only'>
+            {label}
+          </span>
+        ) : (
+          cloneElement(label, { id: labelId })
+        )}
+      </>
+    );
+  }
+);

package/src/components/Avatar/index.ts

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

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+import React, { PropsWithChildren } from 'react';
+
+import { templateForComponent } from '../../testing';
+import { Group } from '../Group';
+import { Button } from './Button';
+import { ButtonProps } from './ButtonProps';
+
+export default {
+  title: 'react-ui/Button',
+  component: Button
+};
+
+const Container = ({ children }: PropsWithChildren<{}>) => (
+  <>
+    <Group label={{ children: null }} elevation={0} className='flex gap-4 px-1 mb-4'>
+      {children}
+    </Group>
+    <Group label={{ children: null }} elevation={5} className='flex gap-4 px-1'>
+      {children}
+    </Group>
+  </>
+);
+
+const Template = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => (
+  <Container>
+    <Button {...args}>{children}</Button>
+    <Button {...args} disabled>
+      Disabled
+    </Button>
+  </Container>
+);
+
+export const Default = templateForComponent(Template)({});
+Default.args = { children: 'Hello', disabled: false, variant: 'default' };
+
+export const Primary = () => <Template {...{ variant: 'primary', children: 'Hello' }} />;
+
+export const Outline = () => <Template {...{ variant: 'outline', children: 'Hello' }} />;

package/src/components/Button/Button.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+import React, { forwardRef } from 'react';
+
+import { ButtonProps } from './ButtonProps';
+import { buttonStyles } from './buttonStyles';
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ children, ...props }, ref) => (
+  <button
+    ref={ref}
+    {...props}
+    className={cx(buttonStyles(props), props.className)}
+    {...(props.disabled && { disabled: true })}
+  >
+    {children}
+  </button>
+));

package/src/components/Button/ButtonProps.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { ComponentProps } from 'react';
+
+export interface ButtonProps extends ComponentProps<'button'> {
+  variant?: 'default' | 'primary' | 'outline';
+  disabled?: boolean;
+}

package/src/components/Button/buttonStyles.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+
+import { defaultDisabled, defaultFocus, defaultHover, defaultActive } from '../../styles';
+import { ButtonProps } from './ButtonProps';
+
+export const primaryButtonColors = 'bg-primary-600 text-white hover:bg-primary-650';
+export const defaultButtonColors = 'bg-white text-neutral-900 dark:bg-neutral-750 dark:text-neutral-50';
+
+export const buttonStyles = (props: ButtonProps) => {
+  const resolvedVariant = props.variant || 'default';
+  return cx(
+    'inline-flex select-none items-center justify-center rounded-md px-4 py-2 text-sm font-medium',
+    'transition-color duration-100',
+    defaultHover(props),
+    resolvedVariant === 'default' &&
+      'border border-neutral-100 dark:border-neutral-650 hover:focus:border-neutral-100 hover:border-transparent',
+    resolvedVariant === 'default' && defaultButtonColors,
+    resolvedVariant === 'primary' && 'border border-primary-550 hover:border-transparent',
+    resolvedVariant === 'primary' && primaryButtonColors,
+    resolvedVariant === 'outline' &&
+      'text-neutral-700 border border-neutral-600 font-medium rounded-lg text-sm text-center dark:border-neutral-300 dark:text-neutral-150',
+    defaultFocus,
+    props.disabled ? defaultDisabled : resolvedVariant !== 'outline' && 'button-elevation',
+    // Register all radix states
+    'group',
+    defaultActive
+  );
+};

package/src/components/Button/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './Button';
+export * from './buttonStyles';
+export * from './ButtonProps';

package/src/components/CompoundButton/CompoundButton.stories.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+import { ArrowRight, ClockCounterClockwise } from 'phosphor-react';
+import React, { PropsWithChildren } from 'react';
+
+import { templateForComponent } from '../../testing';
+import { CompoundButton, CompoundButtonProps } from './CompoundButton';
+
+export default {
+  title: 'react-ui/CompoundButton',
+  component: CompoundButton
+};
+
+const Container = ({ children }: PropsWithChildren<{}>) => <div className='flex gap-4'>{children}</div>;
+
+const Template = ({ ...args }: Omit<CompoundButtonProps, 'ref'>) => (
+  <Container>
+    <CompoundButton {...args} />
+    <CompoundButton {...args} disabled />
+  </Container>
+);
+
+export const Default = templateForComponent(Template)({});
+Default.args = {
+  children: 'Hello',
+  description: 'This is a compound button',
+  before: <ClockCounterClockwise className='w-5 h-5' />,
+  after: <ArrowRight className='w-5 h-5' />,
+  disabled: false
+};
+
+export const Primary = () => (
+  <Template
+    {...{
+      children: 'Hello',
+      description: 'This is a compound button',
+      before: <ClockCounterClockwise className='w-5 h-5' />,
+      after: <ArrowRight className='w-5 h-5' />,
+      disabled: false,
+      variant: 'primary'
+    }}
+  />
+);

package/src/components/CompoundButton/CompoundButton.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+import React, { ReactNode } from 'react';
+
+import { useId } from '../../hooks';
+import { defaultDescription, primaryDescription } from '../../styles';
+import { ButtonProps, buttonStyles } from '../Button';
+
+export interface CompoundButtonProps extends ButtonProps {
+  children?: ReactNode;
+  description?: ReactNode;
+  before?: ReactNode;
+  after?: ReactNode;
+}
+
+export const CompoundButton = ({ children, description, before, after, ...buttonProps }: CompoundButtonProps) => {
+  const variant = buttonProps.variant || 'default';
+  const labelId = useId('compoundButton-label');
+  const descriptionId = useId('compoundButton-description');
+  return (
+    <button
+      {...buttonProps}
+      className={cx(buttonStyles(buttonProps), 'flex items-center gap-4 py-2.5', buttonProps.className)}
+      aria-labelledby={labelId}
+      {...(description && { 'aria-describedby': descriptionId })}
+    >
+      {before && (
+        <div role='none' className='grow-0'>
+          {before}
+        </div>
+      )}
+      <div role='none' className='grow flex flex-col gap-1 text-left'>
+        <p id={labelId}>{children}</p>
+        {description && (
+          <p
+            id={descriptionId}
+            className={cx('text-xs font-normal mb-1', variant === 'primary' ? primaryDescription : defaultDescription)}
+          >
+            {description}
+          </p>
+        )}
+      </div>
+      {after && (
+        <div role='none' className='grow-0'>
+          {after}
+        </div>
+      )}
+    </button>
+  );
+};

package/src/components/CompoundButton/index.ts

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

package/src/components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+import React from 'react';
+
+import { templateForComponent } from '../../testing';
+import { Button } from '../Button';
+import { Dialog, DialogProps } from './Dialog';
+
+export default {
+  title: 'react-ui/Dialog',
+  component: Dialog
+};
+
+const Template = ({ children, ...props }: DialogProps) => {
+  return <Dialog {...props}>{children}</Dialog>;
+};
+
+export const Default = templateForComponent(Template)({
+  openTrigger: '',
+  title: '',
+  closeTriggers: ['']
+});
+Default.args = {
+  openTrigger: <Button>Open dialog</Button>,
+  closeTriggers: [
+    <Button key='cancel'>Close trigger 1</Button>,
+    <Button key='save' variant='primary'>
+      Close trigger 2
+    </Button>
+  ],
+  title: 'Dialog title',
+  children: 'Dialog content',
+  closeLabel: 'Close'
+};

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,124 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { Transition } from '@headlessui/react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import cx from 'classnames';
+import { X } from 'phosphor-react';
+import React, { Fragment, ReactNode, useState } from 'react';
+
+import { defaultDescription, defaultFocus, defaultHover } from '../../styles';
+import { Tooltip } from '../Tooltip';
+
+export interface DialogProps {
+  title: ReactNode;
+  openTrigger?: ReactNode;
+  closeTriggers?: [ReactNode, ...ReactNode[]];
+  titleVisuallyHidden?: boolean;
+  description?: ReactNode;
+  children?: ReactNode;
+  closeLabel?: string;
+  initiallyOpen?: boolean;
+  mountAsSibling?: boolean;
+}
+
+export const Dialog = ({
+  title,
+  titleVisuallyHidden,
+  description,
+  openTrigger,
+  children,
+  closeTriggers,
+  closeLabel,
+  initiallyOpen,
+  mountAsSibling
+}: DialogProps) => {
+  const [isOpen, setIsOpen] = useState(!!initiallyOpen);
+
+  const dialogOverlayAndContent = (
+    <Transition.Root show={isOpen}>
+      <Transition.Child
+        as={Fragment}
+        enter='ease-out duration-300'
+        enterFrom='opacity-0'
+        enterTo='opacity-100'
+        leave='ease-in duration-200'
+        leaveFrom='opacity-100'
+        leaveTo='opacity-0'
+      >
+        <DialogPrimitive.Overlay forceMount className='fixed inset-0 z-20 bg-black/50' />
+      </Transition.Child>
+      <Transition.Child
+        as={Fragment}
+        enter='ease-out duration-300'
+        enterFrom='opacity-0 scale-95'
+        enterTo='opacity-100 scale-100'
+        leave='ease-in duration-200'
+        leaveFrom='opacity-100 scale-100'
+        leaveTo='opacity-0 scale-95'
+      >
+        <DialogPrimitive.Content
+          forceMount
+          className={cx(
+            'fixed z-50',
+            'w-[95vw] max-w-md rounded-xl p-4 md:w-full',
+            'top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
+            'shadow-2xl bg-white dark:bg-neutral-800 elevated-buttons',
+            defaultFocus
+          )}
+        >
+          <DialogPrimitive.Title
+            className={cx(
+              'text-2xl font-display font-medium text-neutral-900 dark:text-neutral-100 rounded-md',
+              titleVisuallyHidden && 'sr-only',
+              defaultFocus
+            )}
+            tabIndex={0}
+          >
+            {title}
+          </DialogPrimitive.Title>
+          {description && (
+            <DialogPrimitive.Description className={cx('mt-2', defaultDescription)}>
+              {description}
+            </DialogPrimitive.Description>
+          )}
+
+          {children}
+
+          {closeLabel && (
+            <Tooltip content={closeLabel}>
+              <DialogPrimitive.Close
+                className={cx(
+                  'absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-sm p-1',
+                  defaultFocus,
+                  defaultHover({})
+                )}
+              >
+                <X className='h-4 w-4 text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-400' />
+              </DialogPrimitive.Close>
+            </Tooltip>
+          )}
+          {closeTriggers && (
+            <div className='flex flex-wrap justify-end gap-4'>
+              {closeTriggers.map((closeTrigger, key) => (
+                <DialogPrimitive.Close key={key}>{closeTrigger}</DialogPrimitive.Close>
+              ))}
+            </div>
+          )}
+        </DialogPrimitive.Content>
+      </Transition.Child>
+    </Transition.Root>
+  );
+
+  return (
+    <DialogPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
+      {openTrigger && <DialogPrimitive.Trigger asChild>{openTrigger}</DialogPrimitive.Trigger>}
+      {mountAsSibling ? (
+        dialogOverlayAndContent
+      ) : (
+        <DialogPrimitive.Portal>{dialogOverlayAndContent}</DialogPrimitive.Portal>
+      )}
+    </DialogPrimitive.Root>
+  );
+};

package/src/components/Dialog/index.ts

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

package/src/components/Group/Group.stories.tsx

@@ -0,0 +1,25 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+import React from 'react';
+
+import { templateForComponent } from '../../testing';
+import { Group, GroupProps } from './Group';
+
+export default {
+  title: 'react-ui/Group',
+  component: Group
+};
+
+const Template = ({ children, ...props }: GroupProps) => {
+  return <Group {...props}>{children}</Group>;
+};
+
+export const Default = templateForComponent(Template)({ label: {} });
+Default.args = {
+  label: { level: 3, children: 'Hello' },
+  children: 'This is a group.',
+  elevation: 3
+};

package/src/components/Group/Group.tsx

@@ -0,0 +1,48 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+import React, { ReactNode } from 'react';
+
+import { useId } from '../../hooks';
+import { Heading, HeadingProps } from '../Heading';
+
+export interface GroupProps extends React.ComponentProps<'div'> {
+  label: HeadingProps;
+  labelVisuallyHidden?: boolean;
+  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  children?: ReactNode;
+}
+
+const elevationClassNameMap = new Map<number, string>([
+  [0, 'shadow-none'],
+  [1, 'shadow-sm'],
+  [2, 'shadow'],
+  [3, 'shadow-md'],
+  [4, 'shadow-lg'],
+  [5, 'shadow-xl'],
+  [6, 'shadow-2xl']
+]);
+
+export const Group = ({ elevation, children, label, labelVisuallyHidden, className, ...props }: GroupProps) => {
+  const labelId = useId('groupLabel');
+  return (
+    <div
+      role='group'
+      aria-labelledby={labelId}
+      className={cx(
+        'rounded-lg p-4',
+        elevation === 0
+          ? 'bg-transparent border border-neutral-200 dark:border-neutral-700'
+          : 'bg-white dark:bg-neutral-800 elevated-buttons',
+        elevationClassNameMap.get(typeof elevation === 'undefined' ? 3 : elevation),
+        className
+      )}
+      {...props}
+    >
+      <Heading {...label} id={labelId} className={cx(labelVisuallyHidden && 'sr-only', 'mb-2', label?.className)} />
+      {children}
+    </div>
+  );
+};

package/src/components/Group/index.ts

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

package/src/components/Heading/Heading.stories.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+import React from 'react';
+
+import { templateForComponent } from '../../testing';
+import { Heading, HeadingProps } from './Heading';
+
+export default {
+  title: 'react-ui/Heading',
+  component: Heading
+};
+
+const Template = ({ children, ...props }: HeadingProps) => {
+  return <Heading {...props}>{children}</Heading>;
+};
+
+const defaultProps = { level: 1 as const };
+
+export const Default = templateForComponent(Template)(defaultProps);
+Default.args = { level: 1, children: 'Hello' };
+
+export const Level2 = () => <Template level={2}>Hello</Template>;
+export const Level3 = () => <Template level={3}>Hello</Template>;
+export const Level4 = () => <Template level={4}>Hello</Template>;
+export const Level5 = () => <Template level={5}>Hello</Template>;
+export const Level6 = () => <Template level={6}>Hello</Template>;