@dxos/react-ui 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Vite plugin which configures a low-level design system for DXOS.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -17,6 +17,7 @@
     "@fontsource/roboto-flex": "^4.5.2",
     "@fontsource/space-grotesk": "^4.5.10",
     "@headlessui/react": "^1.7.3",
+    "@radix-ui/react-alert-dialog": "^1.0.2",
     "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-dialog": "^1.0.0",
     "@radix-ui/react-navigation-menu": "^1.1.1",
@@ -31,10 +32,11 @@
     "postcss": "^8.4.17",
     "qrcode.react": "^3.1.0",
     "tailwindcss": "^3.1.8",
+    "tailwindcss-logical": "^3.0.0",
     "tailwindcss-radix": "^2.6.0"
   },
   "devDependencies": {
-    "@dxos/vite-plugin": "0.1.0",
+    "@dxos/vite-plugin": "0.1.2",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.0.1",

package/src/components/AlertDialog/AlertDialog.stories.tsx

@@ -0,0 +1,35 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+import React from 'react';
+
+import { templateForComponent } from '../../testing';
+import { Button } from '../Button';
+import { AlertDialog, AlertDialogProps } from './AlertDialog';
+
+export default {
+  title: 'react-ui/AlertDialog',
+  component: AlertDialog
+};
+
+const Template = ({ children, ...props }: AlertDialogProps) => {
+  return <AlertDialog {...props}>{children}</AlertDialog>;
+};
+
+export const Default = templateForComponent(Template)({
+  openTrigger: '',
+  title: '',
+  confirmTrigger: <span />
+});
+Default.args = {
+  openTrigger: <Button>Reset device</Button>,
+  cancelTrigger: <Button>Cancel</Button>,
+  confirmTrigger: <Button variant='primary'>GO</Button>,
+  destructiveConfirmString: "I've definitely had my coffee",
+  destructiveConfirmInputProps: {
+    label: "Type “I've definitely had my coffee” to confirm"
+  },
+  title: 'Reset your device'
+};

package/src/components/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,127 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { Transition } from '@headlessui/react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import cx from 'classnames';
+import React, { cloneElement, Fragment, ReactHTMLElement, ReactNode, useEffect, useState } from 'react';
+
+import { defaultDescription, defaultFocus } from '../../styles';
+import { Input, InputProps } from '../Input';
+
+export interface AlertDialogProps {
+  title: ReactNode;
+  openTrigger?: ReactNode;
+  cancelTrigger?: ReactNode;
+  confirmTrigger: Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
+  destructiveConfirmString?: string;
+  destructiveConfirmInputProps?: Omit<InputProps, 'onChange' | 'initialValue'>;
+  titleVisuallyHidden?: boolean;
+  description?: ReactNode;
+  children?: ReactNode;
+  initiallyOpen?: boolean;
+  mountAsSibling?: boolean;
+}
+
+export const AlertDialog = ({
+  title,
+  titleVisuallyHidden,
+  description,
+  openTrigger,
+  cancelTrigger,
+  confirmTrigger,
+  destructiveConfirmString,
+  destructiveConfirmInputProps,
+  children,
+  initiallyOpen,
+  mountAsSibling
+}: AlertDialogProps) => {
+  const [isOpen, setIsOpen] = useState(!!initiallyOpen);
+  const [confirmDisabled, setConfirmDisabled] = useState(!!destructiveConfirmString);
+  const [confirmStringValue, setConfirmStringValue] = useState('');
+
+  useEffect(() => {
+    if (destructiveConfirmString) {
+      setConfirmDisabled(confirmStringValue !== destructiveConfirmString);
+    }
+  }, [confirmStringValue]);
+
+  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'
+      >
+        <AlertDialogPrimitive.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'
+      >
+        <AlertDialogPrimitive.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
+          )}
+        >
+          <AlertDialogPrimitive.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}
+          </AlertDialogPrimitive.Title>
+          {description && (
+            <AlertDialogPrimitive.Description className={cx('mt-2', defaultDescription)}>
+              {description}
+            </AlertDialogPrimitive.Description>
+          )}
+
+          {children}
+
+          {destructiveConfirmInputProps && <Input {...destructiveConfirmInputProps} onChange={setConfirmStringValue} />}
+
+          <div className='flex flex-wrap justify-end gap-4'>
+            {cancelTrigger && (
+              <AlertDialogPrimitive.Cancel asChild={typeof cancelTrigger !== 'string'}>
+                {cancelTrigger}
+              </AlertDialogPrimitive.Cancel>
+            )}
+            <AlertDialogPrimitive.Action asChild>
+              {cloneElement(confirmTrigger, { disabled: confirmDisabled })}
+            </AlertDialogPrimitive.Action>
+          </div>
+        </AlertDialogPrimitive.Content>
+      </Transition.Child>
+    </Transition.Root>
+  );
+
+  return (
+    <AlertDialogPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
+      {openTrigger && <AlertDialogPrimitive.Trigger asChild>{openTrigger}</AlertDialogPrimitive.Trigger>}
+      {mountAsSibling ? (
+        dialogOverlayAndContent
+      ) : (
+        <AlertDialogPrimitive.Portal>{dialogOverlayAndContent}</AlertDialogPrimitive.Portal>
+      )}
+    </AlertDialogPrimitive.Root>
+  );
+};

package/src/components/AlertDialog/index.ts

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

package/src/components/Avatar/Avatar.tsx

@@ -61,7 +61,7 @@ export const Avatar = forwardRef(
           )}
           <AvatarPrimitive.Fallback
             className={cx(
-              'flex h-full w-full items-center justify-center bg-white dark:bg-neutral-800 overflow-hidden',
+              'shrink-0 flex h-full w-full items-center justify-center bg-white dark:bg-neutral-800 overflow-hidden',
               shapeStyles[variant]
             )}
             delayMs={0}

package/src/components/Button/Button.tsx

@@ -8,13 +8,15 @@ 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>
-));
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, compact, variant, rounding, ...props }, ref) => (
+    <button
+      ref={ref}
+      {...props}
+      className={cx(buttonStyles({ compact, variant, rounding, disabled: props.disabled }), props.className)}
+      {...(props.disabled && { disabled: true })}
+    >
+      {children}
+    </button>
+  )
+);

package/src/components/Button/ButtonProps.ts

@@ -6,5 +6,7 @@ import { ComponentProps } from 'react';
 
 export interface ButtonProps extends ComponentProps<'button'> {
   variant?: 'default' | 'primary' | 'outline';
+  compact?: boolean;
+  rounding?: string;
   disabled?: boolean;
 }

package/src/components/Button/buttonStyles.ts

@@ -13,7 +13,9 @@ export const defaultButtonColors = 'bg-white text-neutral-900 dark:bg-neutral-75
 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',
+    'inline-flex select-none items-center justify-center text-sm font-medium',
+    props.rounding ?? 'rounded-md',
+    props.compact ? 'p-1.5' : 'pli-4 plb-2',
     'transition-color duration-100',
     defaultHover(props),
     resolvedVariant === 'default' &&
@@ -22,7 +24,7 @@ export const buttonStyles = (props: ButtonProps) => {
     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',
+      'text-neutral-700 border border-neutral-600 dark:border-neutral-300 dark:text-neutral-150',
     defaultFocus,
     props.disabled ? defaultDisabled : resolvedVariant !== 'outline' && 'button-elevation',
     // Register all radix states

package/src/components/Group/Group.tsx

@@ -6,6 +6,7 @@ import cx from 'classnames';
 import React, { ReactNode } from 'react';
 
 import { useId } from '../../hooks';
+import { defaultGroup } from '../../styles/group';
 import { Heading, HeadingProps } from '../Heading';
 
 export interface GroupProps extends React.ComponentProps<'div'> {
@@ -15,32 +16,10 @@ export interface GroupProps extends React.ComponentProps<'div'> {
   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) => {
+export const Group = ({ elevation = 3, 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}
-    >
+    <div role='group' aria-labelledby={labelId} className={cx(defaultGroup({ elevation }), className)} {...props}>
       <Heading {...label} id={labelId} className={cx(labelVisuallyHidden && 'sr-only', 'mb-2', label?.className)} />
       {children}
     </div>

package/src/components/NavMenu/NavMenu.tsx

@@ -6,7 +6,7 @@ import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import cx from 'classnames';
 import React, { ComponentProps, ForwardedRef, forwardRef, ReactNode } from 'react';
 
-import { defaultFocus, defaultHover } from '../../styles';
+import { defaultFocus, defaultHover, defaultInlineSeparator } from '../../styles';
 import { defaultButtonColors, primaryButtonColors } from '../Button';
 import { Tooltip, TooltipProps } from '../Tooltip';
 
@@ -122,7 +122,7 @@ const NavMenuTooltipLinkItem = forwardRef(
 export const NavMenuLink = NavigationMenuPrimitive.Link;
 
 export const NavMenuSeparatorItem = (_props: NavMenuSeparatorProps) => {
-  return <span role='none' className='h-5 border-l border-neutral-300 dark:border-neutral-700' />;
+  return <span role='none' className={cx(defaultInlineSeparator, 'bs-5')} />;
 };
 
 const isTooltipLinkItem = (o: any): o is NavMenuTooltipLinkItemProps => 'tooltip' in o;
@@ -132,7 +132,7 @@ const isSeparator = (o: any): o is NavMenuSeparatorProps => 'separator' in o;
 export const NavMenu = ({ items, ...rootProps }: NavMenuProps) => {
   return (
     <NavigationMenuPrimitive.Root {...rootProps} className={cx('flex justify-center', rootProps.className)}>
-      <NavigationMenuPrimitive.List className='relative flex flex-row items-center gap-2 rounded-lg bg-white dark:bg-neutral-800 p-2 button-elevation overflow-x-auto'>
+      <NavigationMenuPrimitive.List className='relative flex flex-row items-center gap-1 rounded-lg bg-white dark:bg-neutral-750 p-1 button-elevation overflow-x-auto'>
         {items.map((item: NavMenuItem, i) => {
           return isTooltipLinkItem(item) ? (
             <NavMenuTooltipLinkItem key={i} {...item} />
@@ -154,7 +154,7 @@ export const NavMenu = ({ items, ...rootProps }: NavMenuProps) => {
             'transition-[width_transform] duration-[250ms] ease-[ease]'
           )}
         >
-          <div className='top-1 relative bg-white dark:bg-neutral-800 w-2 h-2 rotate-45' />
+          <div className='top-1 relative bg-white dark:bg-neutral-750 w-2 h-2 rotate-45' />
         </NavigationMenuPrimitive.Indicator>
       </NavigationMenuPrimitive.List>
 
@@ -166,7 +166,7 @@ export const NavMenu = ({ items, ...rootProps }: NavMenuProps) => {
       >
         <NavigationMenuPrimitive.Viewport
           className={cx(
-            'relative mt-2 shadow-lg rounded-md bg-white dark:bg-neutral-800 overflow-hidden',
+            'relative mt-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',

package/src/components/QrCode/QrCode.tsx

@@ -28,8 +28,9 @@ export const QrCode = ({ value, label, size, side, sideOffset, collisionPadding,
   return (
     <Tooltip content={label} {...{ side, sideOffset, collisionPadding }}>
       <Button
+        compact
         {...buttonProps}
-        className={cx('py-0 px-0 overflow-hidden', getSize(size ?? 32), buttonProps.className)}
+        className={cx('overflow-hidden p-0', getSize(size ?? 32), buttonProps.className)}
         onClick={copyValue}
       >
         <QRCodeSVG value={value} includeMargin role='none' className='w-full h-auto' />

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

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

@@ -0,0 +1,32 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+import React, { PropsWithChildren, ReactNode } from 'react';
+
+import { MessageValence } from '../../props';
+
+export interface TagProps extends React.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', ...props }: PropsWithChildren<TagProps>) => {
+  return (
+    <span
+      {...props}
+      className={cx('text-xs font-semibold px-2.5 py-0.5 rounded', valenceColorMap[valence], props.className)}
+    >
+      {children}
+    </span>
+  );
+};

package/src/components/{Main → Tag}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './Main';
+export * from './Tag';

package/src/components/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './Alert';
+export * from './AlertDialog';
 export * from './Avatar';
 export * from './Button';
 export * from './CompoundButton';
@@ -11,10 +12,10 @@ 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 './Tag';
 export * from './Toast';
 export * from './Tooltip';
 export * from './UiProvider';

package/src/plugin.ts

@@ -6,6 +6,7 @@ import tailwindcssForms from '@tailwindcss/forms';
 import autoprefixer from 'autoprefixer';
 import { resolve } from 'path';
 import tailwindcss from 'tailwindcss';
+import tailwindcssLogical from 'tailwindcss-logical';
 import tailwindcssRadix from 'tailwindcss-radix';
 import tailwindColors from 'tailwindcss/colors';
 import defaultConfig from 'tailwindcss/stubs/defaultConfig.stub.js';
@@ -251,7 +252,7 @@ export const themePlugin = (options: VitePluginTailwindOptions) => {
                     }
                   }
                 },
-                plugins: [tailwindcssForms, tailwindcssRadix()],
+                plugins: [tailwindcssLogical, tailwindcssForms, tailwindcssRadix()],
                 ...(env.mode === 'development' && { mode: 'jit' }),
                 content: [resolve(root || './', 'node_modules/@dxos/react-ui/dist/**/*.js'), ...config.content]
               }),

package/src/props/Elevation.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export type Elevation = 0 | 1 | 2 | 3 | 4 | 5 | 6;

package/src/props/MessageValence.ts

@@ -2,4 +2,4 @@
 // Copyright 2022 DXOS.org
 //
 
-export type MessageValence = 'success' | 'info' | 'warning' | 'error';
+export type MessageValence = 'success' | 'info' | 'warning' | 'error' | 'neutral';

package/src/props/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './Elevation';
 export * from './MessageValence';
 export * from './Size';

package/src/styles/group.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+
+import { Elevation } from '../props';
+
+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 defaultGroup = ({ elevation }: { elevation: Elevation }) => {
+  return 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(elevation)
+  );
+};

package/src/styles/index.ts

@@ -5,7 +5,9 @@
 export * from './active';
 export * from './disabled';
 export * from './focus';
+export * from './group';
 export * from './hover';
+export * from './ornament';
 export * from './size';
 export * from './text';
 export * from './valence';

package/src/styles/ornament.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export const defaultInlineSeparator = 'border-is border-neutral-300 dark:border-neutral-700';
+export const defaultBlockSeparator = 'border-bs border-neutral-300 dark:border-neutral-700';

package/src/typings.d.ts

@@ -4,4 +4,5 @@
 
 declare module 'tailwindcss/stubs/defaultConfig.stub.js';
 declare module 'tailwindcss-radix';
+declare module 'tailwindcss-logical';
 declare module 'react-jdenticon';

package/src/components/Main/Main.tsx

@@ -1,14 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import cx from 'classnames';
-import React, { ComponentProps, PropsWithChildren } from 'react';
-
-export const Main = ({ children, className, ...mainProps }: PropsWithChildren<ComponentProps<'main'>>) => {
-  return (
-    <main {...mainProps} className={cx('mt-8 px-8 space-y-4', className)}>
-      {children}
-    </main>
-  );
-};