@dxos/react-ui 0.1.20 → 0.1.22

package/src/components/Avatar/index.ts

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

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

@@ -1,45 +0,0 @@
-//
-// 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' }} />;
-
-export const Ghost = () => <Template {...{ variant: 'ghost', children: 'Hello' }} />;

package/src/components/Button/Button.tsx

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

package/src/components/Button/ButtonGroup.tsx

@@ -1,23 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import React, { ComponentProps, ReactNode } from 'react';
-
-import { mx } from '../../util';
-
-export interface ButtonGroupProps extends ComponentProps<'div'> {
-  children?: ReactNode;
-}
-
-export const ButtonGroup = ({ children, ...divProps }: ButtonGroupProps) => {
-  return (
-    <div
-      role='none'
-      {...divProps}
-      className={mx('button-elevation [&>*]:grouped-buttons rounded-md', divProps.className)}
-    >
-      {children}
-    </div>
-  );
-};

package/src/components/Button/ButtonProps.ts

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

package/src/components/Button/buttonStyles.ts

@@ -1,35 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { defaultDisabled, defaultFocus, defaultHover, defaultActive } from '../../styles';
-import { mx } from '../../util';
-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 ghostButtonColors = '';
-
-export const buttonStyles = (props: ButtonProps) => {
-  const resolvedVariant = props.variant || 'default';
-  return mx(
-    'inline-flex select-none items-center justify-center text-sm font-medium rounded-md transition-color duration-100',
-    props.compact ? 'p-1.5' : 'pli-4 plb-2',
-    defaultHover(props),
-    resolvedVariant === 'default' && 'border border-neutral-100 dark:border-neutral-650',
-    resolvedVariant !== 'ghost' && !props.disabled && 'hover:focus:border-neutral-100 hover:border-transparent',
-    resolvedVariant === 'default' && defaultButtonColors,
-    resolvedVariant === 'ghost' && ghostButtonColors,
-    resolvedVariant === 'primary' && 'border border-primary-550 hover:border-transparent',
-    resolvedVariant === 'primary' && primaryButtonColors,
-    resolvedVariant === 'outline' &&
-      'text-neutral-700 border border-neutral-600 dark:border-neutral-300 dark:text-neutral-150',
-    defaultFocus,
-    props.disabled
-      ? defaultDisabled
-      : resolvedVariant !== 'outline' && resolvedVariant !== 'ghost' && 'button-elevation',
-    // Register all radix states
-    'group',
-    defaultActive
-  );
-};

package/src/components/Button/index.ts

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

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

@@ -1,46 +0,0 @@
-//
-// 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

@@ -1,53 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import React, { ReactNode } from 'react';
-
-import { useId } from '../../hooks';
-import { defaultDescription, primaryDescription } from '../../styles';
-import { mx } from '../../util';
-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={mx(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={mx('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

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

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

@@ -1,37 +0,0 @@
-//
-// 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

@@ -1,157 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { Transition } from '@headlessui/react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X } from 'phosphor-react';
-import React, { ComponentProps, Fragment, ReactNode, useState } from 'react';
-
-import { defaultDescription, defaultFocus, defaultHover, getSize } from '../../styles';
-import { mx } from '../../util';
-import { Tooltip } from '../Tooltip';
-
-export interface DialogSlots {
-  overlay?: Pick<ComponentProps<typeof DialogPrimitive.Overlay>, 'className'>;
-  content?: Omit<ComponentProps<typeof DialogPrimitive.Content>, 'children'>;
-  title?: Omit<ComponentProps<typeof DialogPrimitive.Content>, 'children'>;
-  description?: Omit<ComponentProps<typeof DialogPrimitive.Description>, 'children'>;
-  close?: Pick<ComponentProps<typeof DialogPrimitive.Close>, 'className'>;
-  closeIcon?: ComponentProps<typeof X>;
-  closeTriggers?: Omit<ComponentProps<'div'>, 'children'>;
-}
-
-export interface DialogProps {
-  title: ReactNode;
-  openTrigger?: ReactNode;
-  closeTriggers?: [ReactNode, ...ReactNode[]];
-  titleVisuallyHidden?: boolean;
-  description?: ReactNode;
-  children?: ReactNode;
-  closeLabel?: string;
-  initiallyOpen?: boolean;
-  mountAsSibling?: boolean;
-  slots?: DialogSlots;
-}
-
-export const Dialog = ({
-  title,
-  titleVisuallyHidden,
-  description,
-  openTrigger,
-  children,
-  closeTriggers,
-  closeLabel,
-  initiallyOpen,
-  mountAsSibling,
-  slots = {}
-}: DialogProps) => {
-  const [isOpen, setIsOpen] = useState(!!initiallyOpen);
-
-  const dialogOverlayAndContent = (
-    <Transition.Root show={isOpen}>
-      <Transition.Child
-        as={Fragment}
-        enter='linear duration-300'
-        enterFrom='opacity-0'
-        enterTo='opacity-100'
-        leave='linear duration-200'
-        leaveFrom='opacity-100'
-        leaveTo='opacity-0'
-      >
-        <DialogPrimitive.Overlay
-          forceMount
-          {...slots.overlay}
-          className={mx('fixed inset-0 z-20 bg-black/50', slots.overlay?.className)}
-        />
-      </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
-          {...slots.content}
-          className={mx(
-            '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,
-            slots.content?.className
-          )}
-        >
-          <DialogPrimitive.Title
-            {...slots.title}
-            className={mx(
-              'text-2xl font-display font-medium text-neutral-900 dark:text-neutral-100 rounded-md',
-              titleVisuallyHidden && 'sr-only',
-              defaultFocus,
-              slots.content?.className
-            )}
-            tabIndex={0}
-          >
-            {title}
-          </DialogPrimitive.Title>
-          {description && (
-            <DialogPrimitive.Description
-              {...slots.description}
-              className={mx('mt-2', defaultDescription, slots.description?.className)}
-            >
-              {description}
-            </DialogPrimitive.Description>
-          )}
-
-          {children}
-
-          {closeLabel && (
-            <Tooltip zIndex='z-[51]' content={closeLabel}>
-              <DialogPrimitive.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
-                )}
-              >
-                <X
-                  className={mx(
-                    getSize(4),
-                    'text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-400',
-                    slots.closeIcon?.className
-                  )}
-                />
-              </DialogPrimitive.Close>
-            </Tooltip>
-          )}
-          {closeTriggers && (
-            <div
-              {...slots.closeTriggers}
-              className={mx('flex flex-wrap justify-end gap-4', slots.closeTriggers?.className)}
-            >
-              {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

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

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

@@ -1,25 +0,0 @@
-//
-// 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

@@ -1,32 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import React, { ReactNode } from 'react';
-
-import { useId } from '../../hooks';
-import { defaultGroup } from '../../styles';
-import { mx } from '../../util';
-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;
-}
-
-export const Group = ({ elevation = 3, children, label, labelVisuallyHidden, ...rootSlot }: GroupProps) => {
-  const labelId = useId('groupLabel');
-  return (
-    <div
-      role='group'
-      aria-labelledby={labelId}
-      {...rootSlot}
-      className={mx(defaultGroup({ elevation }), rootSlot?.className)}
-    >
-      <Heading {...label} id={labelId} className={mx(labelVisuallyHidden && 'sr-only', 'mb-2', label?.className)} />
-      {children}
-    </div>
-  );
-};

package/src/components/Group/index.ts

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

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

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

package/src/components/Heading/Heading.tsx

@@ -1,29 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import React, { createElement, PropsWithChildren, ReactNode } from 'react';
-
-import { mx } from '../../util';
-
-export interface HeadingProps extends React.ComponentProps<'h1'> {
-  level?: 1 | 2 | 3 | 4 | 5 | 6;
-  children?: ReactNode;
-}
-
-const levelClassNameMap = new Map<number, string>([
-  [1, 'text-5xl'],
-  [2, 'text-4xl'],
-  [3, 'text-3xl'],
-  [4, 'text-2xl'],
-  [5, 'text-xl'],
-  [6, 'text-lg']
-]);
-
-export const Heading = ({ level, ...rootSlot }: PropsWithChildren<HeadingProps>) => {
-  const resolvedLevel = level || 1;
-  return createElement(`h${resolvedLevel}`, {
-    ...rootSlot,
-    className: mx('font-bold font-display', levelClassNameMap.get(resolvedLevel), rootSlot.className)
-  });
-};

package/src/components/Heading/index.ts

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

package/src/components/Input/BarePinInput.tsx

@@ -1,67 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { CodeInput, getSegmentCssWidth } from 'rci';
-import React, { forwardRef, useCallback, ComponentProps } from 'react';
-
-import { useForwardedRef, useIsFocused } from '../../hooks';
-import { staticInput } from '../../styles/input';
-import { mx } from '../../util';
-import { InputProps, InputSlots } from './InputProps';
-
-const bareInputStyleProps = {
-  padding: '8px',
-  spacing: '8px',
-  fontFamily: ''
-};
-
-export type BarePinInputProps = Omit<InputProps, 'ref' | 'label' | 'onChange' | 'slots'> &
-  Pick<ComponentProps<typeof CodeInput>, 'onChange' | 'value' | 'length'> & { inputSlot: InputSlots['input'] };
-
-// TODO(thure): supplying a `value` prop to CodeInput does not yield correct controlled input interactivity; this may be an issue with RCI (filed as https://github.com/leonardodino/rci/issues/25).
-export const BarePinInput = forwardRef<HTMLInputElement, BarePinInputProps>(
-  (
-    { initialValue, size, validationMessage, validationValence, value, onChange, placeholder, disabled, inputSlot },
-    ref
-  ) => {
-    const width = getSegmentCssWidth('13px');
-    const inputRef = useForwardedRef(ref);
-    const inputFocused = useIsFocused(inputRef);
-
-    const renderSegment = useCallback<ComponentProps<typeof CodeInput>['renderSegment']>(
-      ({ state, index }) => (
-        <div
-          key={index}
-          className={staticInput({
-            focused: inputFocused && !!state,
-            disabled,
-            ...(validationMessage && { validationValence })
-          })}
-          data-state={state}
-          style={{ width, height: '100%' }}
-        />
-      ),
-      [inputFocused, validationValence, validationMessage, disabled]
-    );
-
-    return (
-      <CodeInput
-        {...{
-          spellCheck: false,
-          ...bareInputStyleProps,
-          ...inputSlot,
-          placeholder,
-          onChange,
-          inputRef,
-          renderSegment,
-          className: mx(
-            'font-mono selection:bg-transparent mli-auto',
-            disabled && 'cursor-not-allowed',
-            inputSlot?.className
-          )
-        }}
-      />
-    );
-  }
-);