@dxos/react-ui 0.1.20 → 0.1.22

package/src/components/Toast/Toast.tsx

@@ -1,106 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import * as ToastPrimitive from '@radix-ui/react-toast';
-import React, { cloneElement, ComponentProps, ReactHTMLElement, ReactNode, useState } from 'react';
-
-import { defaultDescription, defaultFocus } from '../../styles';
-import { mx } from '../../util';
-import { Button } from '../Button';
-
-export interface ToastSlots {
-  root?: Omit<ComponentProps<typeof ToastPrimitive.Root>, 'children'>;
-  heading?: Omit<ComponentProps<'div'>, 'children'>;
-  headingInner?: Omit<ComponentProps<'div'>, 'children'>;
-  title?: Omit<ComponentProps<typeof ToastPrimitive.Title>, 'children'>;
-  description?: Omit<ComponentProps<typeof ToastPrimitive.Description>, 'children'>;
-  actions?: Omit<ComponentProps<'div'>, 'children'>;
-}
-
-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;
-  slots?: ToastSlots;
-}
-
-export const Toast = ({
-  title,
-  titleVisuallyHidden,
-  description,
-  openTrigger,
-  closeTrigger,
-  actionTriggers,
-  initiallyOpen,
-  slots = {}
-}: 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}
-        {...slots.root}
-        className={mx(
-          'shadow-lg rounded-lg elevated-buttons flex',
-          '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]',
-          defaultFocus,
-          slots.root?.className
-        )}
-      >
-        <div
-          role='none'
-          {...slots.heading}
-          className={mx('w-0 flex-1 flex items-center pl-5 py-4 min-h-full', slots.heading?.className)}
-        >
-          <div
-            role='none'
-            {...slots.headingInner}
-            className={mx('w-full radix flex flex-col justify-center min-h-full gap-1', slots.headingInner?.className)}
-          >
-            <ToastPrimitive.Title className={mx('text-md font-medium', titleVisuallyHidden && 'sr-only')}>
-              {title}
-            </ToastPrimitive.Title>
-            {description && (
-              <ToastPrimitive.Description className={defaultDescription}>{description}</ToastPrimitive.Description>
-            )}
-          </div>
-        </div>
-        <div
-          role='none'
-          {...slots.actions}
-          className={mx(
-            'flex flex-col px-3 py-2 gap-1 items-stretch justify-center min-h-full',
-            slots.actions?.className
-          )}
-        >
-          {(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>
-      </ToastPrimitive.Root>
-    </>
-  );
-};

package/src/components/Toast/index.ts

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

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

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

@@ -1,88 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import * as PortalPrimitive from '@radix-ui/react-portal';
-import { Button as ToolbarButtonItem } from '@radix-ui/react-toolbar';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import React, { ComponentProps, ReactNode, useState } from 'react';
-
-import { useId } from '../../hooks';
-import { defaultTooltip } from '../../styles';
-import { mx } from '../../util';
-
-export interface TooltipSlots {
-  content?: Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'children'>;
-  arrow?: Pick<ComponentProps<typeof TooltipPrimitive.Arrow>, 'className'>;
-}
-
-export interface TooltipProps {
-  content: ReactNode;
-  children: ReactNode;
-  side?: TooltipPrimitive.TooltipContentProps['side'];
-  compact?: boolean;
-  tooltipLabelsTrigger?: boolean;
-  mountAsSibling?: boolean;
-  triggerIsInToolbar?: boolean;
-  zIndex?: string;
-  slots?: TooltipSlots;
-}
-
-export const Tooltip = ({
-  content,
-  children,
-  side,
-  compact,
-  tooltipLabelsTrigger,
-  mountAsSibling,
-  triggerIsInToolbar,
-  zIndex = 'z-[2]',
-  slots = {}
-}: TooltipProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const labelId = useId('tooltipLabel');
-
-  const tooltipContent = (
-    <TooltipPrimitive.Content
-      forceMount
-      {...slots.content}
-      side={side ?? slots.content?.side ?? 'top'}
-      className={mx(
-        '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',
-        zIndex,
-        !compact && 'px-4 py-2.5',
-        'shadow-lg bg-white dark:bg-neutral-800',
-        !isOpen && 'sr-only',
-        defaultTooltip,
-        slots.content?.className
-      )}
-    >
-      <TooltipPrimitive.Arrow className={mx('fill-current text-white dark:text-neutral-800', slots.arrow?.className)} />
-      {content}
-    </TooltipPrimitive.Content>
-  );
-
-  const triggerContent = (
-    <TooltipPrimitive.Trigger asChild {...(tooltipLabelsTrigger && { 'aria-labelledby': labelId })}>
-      {children}
-    </TooltipPrimitive.Trigger>
-  );
-
-  return (
-    <TooltipPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
-      {triggerIsInToolbar ? <ToolbarButtonItem asChild>{triggerContent}</ToolbarButtonItem> : triggerContent}
-      {tooltipLabelsTrigger && (
-        <PortalPrimitive.Root asChild>
-          <span id={labelId} className='sr-only'>
-            {content}
-          </span>
-        </PortalPrimitive.Root>
-      )}
-      {mountAsSibling ? tooltipContent : <TooltipPrimitive.Portal forceMount>{tooltipContent}</TooltipPrimitive.Portal>}
-    </TooltipPrimitive.Root>
-  );
-};

package/src/components/Tooltip/index.ts

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

package/src/components/UiProvider/UiProvider.tsx

@@ -1,44 +0,0 @@
-//
-// 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 React, { PropsWithChildren } from 'react';
-
-import { defaultFocus } from '../../styles';
-import { mx } from '../../util';
-
-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={mx(
-          '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 flex flex-col gap-2',
-          defaultFocus,
-          toastViewportProps?.className
-        )}
-      />
-    </ToastProvider>
-  );
-};

package/src/components/UiProvider/index.ts

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

package/src/components/index.ts

@@ -1,21 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-export * from './Alert';
-export * from './AlertDialog';
-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 './NavMenu';
-export * from './Popover';
-export * from './QrCode';
-export * from './Tag';
-export * from './Toast';
-export * from './Tooltip';
-export * from './UiProvider';

package/src/config/index.ts

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

package/src/config/tailwind.ts

@@ -1,250 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import tailwindcssForms from '@tailwindcss/forms';
-import { resolve } from 'node:path';
-import type { Config } 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';
-
-export const tailwindConfig = ({
-  env = 'production',
-  root = './',
-  content = []
-}: {
-  env?: string;
-  root?: string;
-  content?: string[];
-}): Config => ({
-  darkMode: 'class',
-  theme: {
-    fontFamily: {
-      body: ['Roboto FlexVariable', ...defaultConfig.theme.fontFamily.sans],
-      display: ['Space GroteskVariable', 'Roboto FlexVariable', ...defaultConfig.theme.fontFamily.sans],
-      mono: ['Fira CodeVariable', ...defaultConfig.theme.fontFamily.mono]
-    },
-    extend: {
-      colors: {
-        success: tailwindColors.emerald,
-        warning: tailwindColors.amber,
-        error: tailwindColors.rose,
-        info: tailwindColors.cyan,
-        neutral: {
-          // Key color #707076
-          // Hue torsion 0.0º
-          // C*CP black 0.80, C*CP white 0.88
-          950: '#101012',
-          900: '#1b1b1e',
-          850: '#252529',
-          800: '#303034',
-          750: '#3b3b3f',
-          700: '#46464b',
-          650: '#525257',
-          600: '#5e5e64',
-          550: '#6a6a70',
-          500: '#77767d',
-          450: '#838389',
-          400: '#909096',
-          350: '#9d9da4',
-          300: '#ababb1',
-          250: '#b8b8be',
-          200: '#c6c6cc',
-          150: '#d4d4d9',
-          100: '#e2e2e7',
-          50: '#f1f1f4'
-        },
-        primary: {
-          // Key color #00e0e0
-          // Hue torsion -73.5º
-          // C*CP black 1.0, C*CP white 1.0
-          950: '#110c2a',
-          900: '#101940',
-          850: '#0b2453',
-          800: '#003164',
-          750: '#003e70',
-          700: '#004b7c',
-          650: '#005887',
-          600: '#006693',
-          550: '#00749e',
-          500: '#0082a9',
-          450: '#0091b3',
-          400: '#00a0be',
-          350: '#00afc7',
-          300: '#00bed0',
-          250: '#00ced8',
-          200: '#00dedf',
-          150: '#3cede4',
-          100: '#69fae8',
-          50: '#b9ffee'
-        },
-        transparent: 'transparent',
-        current: 'currentColor',
-        white: '#ffffff',
-        black: '#000000'
-      },
-      fontSize: {
-        // Base size 16px
-        // Scale 1.125
-        xs: ['0.790rem', { lineHeight: '1rem' }],
-        sm: ['0.889rem', { lineHeight: '1.25rem' }],
-        base: ['1rem', { lineHeight: '1.5rem' }],
-        lg: ['1.125rem', { lineHeight: '1.75rem' }],
-        xl: ['1.266rem', { lineHeight: '1.75rem' }],
-        '2xl': ['1.424rem', { lineHeight: '2rem' }],
-        '3xl': ['1.602rem', { lineHeight: '2.25rem' }],
-        '4xl': ['1.802rem', { lineHeight: '2.5rem' }],
-        '5xl': ['2.027rem', { lineHeight: '2.5rem' }],
-        '6xl': ['2.281rem', { lineHeight: '2.5rem' }],
-        '7xl': ['2.566rem', { lineHeight: '2.75rem' }],
-        '8xl': ['2.887rem', { lineHeight: '3rem' }],
-        '9xl': ['3.247rem', { lineHeight: '3.25rem' }]
-      },
-      outlineWidth: {
-        3: '3px'
-      },
-      boxShadow: {
-        slider: '0 0 0 5px rgba(0, 0, 0, 0.3)'
-      },
-      keyframes: {
-        // Dropdown menu
-        'scale-in': {
-          '0%': { opacity: '0', transform: 'scale(0)' },
-          '100%': { opacity: '1', transform: 'scale(1)' }
-        },
-        'slide-down': {
-          '0%': { opacity: '0', transform: 'translateY(-10px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' }
-        },
-        'slide-up': {
-          '0%': { opacity: '0', transform: 'translateY(10px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' }
-        },
-        // Tooltip
-        'slide-up-fade': {
-          '0%': { opacity: '0', transform: 'translateY(2px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' }
-        },
-        'slide-right-fade': {
-          '0%': { opacity: '0', transform: 'translateX(-2px)' },
-          '100%': { opacity: '1', transform: 'translateX(0)' }
-        },
-        'slide-down-fade': {
-          '0%': { opacity: '0', transform: 'translateY(-2px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' }
-        },
-        'slide-left-fade': {
-          '0%': { opacity: '0', transform: 'translateX(2px)' },
-          '100%': { opacity: '1', transform: 'translateX(0)' }
-        },
-        // Navigation menu
-        'enter-from-right': {
-          '0%': { transform: 'translateX(200px)', opacity: '0' },
-          '100%': { transform: 'translateX(0)', opacity: '1' }
-        },
-        'enter-from-left': {
-          '0%': { transform: 'translateX(-200px)', opacity: '0' },
-          '100%': { transform: 'translateX(0)', opacity: '1' }
-        },
-        'exit-to-right': {
-          '0%': { transform: 'translateX(0)', opacity: '1' },
-          '100%': { transform: 'translateX(200px)', opacity: '0' }
-        },
-        'exit-to-left': {
-          '0%': { transform: 'translateX(0)', opacity: '1' },
-          '100%': {
-            transform: 'translateX(-200px)',
-            opacity: '0'
-          }
-        },
-        'scale-in-content': {
-          '0%': {
-            transform: 'rotateX(-30deg) scale(0.9)',
-            opacity: '0'
-          },
-          '100%': {
-            transform: 'rotateX(0deg) scale(1)',
-            opacity: '1'
-          }
-        },
-        'scale-out-content': {
-          '0%': {
-            transform: 'rotateX(0deg) scale(1)',
-            opacity: '1'
-          },
-          '100%': {
-            transform: 'rotateX(-10deg) scale(0.95)',
-            opacity: '0'
-          }
-        },
-        'fade-in': {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' }
-        },
-        'fade-out': {
-          '0%': { opacity: '1' },
-          '100%': { opacity: '0' }
-        },
-        // Toast
-        'toast-hide': {
-          '0%': { opacity: '1' },
-          '100%': { opacity: '0' }
-        },
-        'toast-slide-in-right': {
-          '0%': { transform: 'translateX(calc(100% + 1rem))' },
-          '100%': { transform: 'translateX(0)' }
-        },
-        'toast-slide-in-bottom': {
-          '0%': { transform: 'translateY(calc(100% + 1rem))' },
-          '100%': { transform: 'translateY(0)' }
-        },
-        'toast-swipe-out': {
-          '0%': {
-            transform: 'translateX(var(--radix-toast-swipe-end-x))'
-          },
-          '100%': {
-            transform: 'translateX(calc(100% + 1rem))'
-          }
-        },
-        // Shimmer
-        'shimmer-loop': {
-          '100%': {
-            transform: 'translateX(100%)'
-          }
-        }
-      },
-      animation: {
-        // Dropdown menu
-        'scale-in': 'scale-in 0.2s ease-in-out',
-        'slide-down': 'slide-down 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
-        'slide-up': 'slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
-        // Tooltip
-        'slide-up-fade': 'slide-up-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
-        'slide-right-fade': 'slide-right-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
-        'slide-down-fade': 'slide-down-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
-        'slide-left-fade': 'slide-left-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
-        // Navigation menu
-        'enter-from-right': 'enter-from-right 0.25s ease',
-        'enter-from-left': 'enter-from-left 0.25s ease',
-        'exit-to-right': 'exit-to-right 0.25s ease',
-        'exit-to-left': 'exit-to-left 0.25s ease',
-        'scale-in-content': 'scale-in-content 0.2s ease',
-        'scale-out-content': 'scale-out-content 0.2s ease',
-        'fade-in': 'fade-in 0.2s ease',
-        'fade-out': 'fade-out 0.2s ease',
-        // Toast
-        'toast-hide': 'toast-hide 100ms ease-in forwards',
-        'toast-slide-in-right': 'toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-        'toast-slide-in-bottom': 'toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-        'toast-swipe-out': 'toast-swipe-out 100ms ease-out forwards',
-        // Shimmer
-        shimmer: 'shimmer-loop 2s infinite'
-      }
-    }
-  },
-  plugins: [tailwindcssLogical, tailwindcssForms, tailwindcssRadix()],
-  ...(env === 'development' && { mode: 'jit' }),
-  content: [resolve(root, 'node_modules/@dxos/react-ui/dist/**/*.mjs'), ...content]
-});

package/src/esbuild-plugin.ts

@@ -1,42 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import autoprefixer from 'autoprefixer';
-import type { Plugin } from 'esbuild';
-import stylePlugin from 'esbuild-style-plugin';
-import { mkdir, cp } from 'node:fs/promises';
-import { resolve, relative, join, basename } from 'node:path';
-import tailwindcss from 'tailwindcss';
-
-import { tailwindConfig } from './config';
-
-export const ThemePlugins = (options: { content: string[]; outdir: string }): Plugin[] => {
-  return [
-    // TODO (thure): This really shouldn’t be this way, but after hours of searching for a reasonable way to do this I came up empty. The prior art I found was mainly this thread, though it’s only tangentially related: https://github.com/evanw/esbuild/issues/800#issuecomment-786151076
-    {
-      name: 'esbuild-plugin-dxos-ui-theme-resolvers',
-      setup: async (build) => {
-        const fontsDir = join(options.outdir, 'node_modules/@dxos/react-ui/fonts');
-        try {
-          await mkdir(fontsDir);
-        } catch (_e) {}
-        build.onResolve({ filter: /\.woff2$/ }, async (args) => {
-          const depPath = resolve(args.resolveDir, args.path);
-          const destPath = join(fontsDir, basename(args.path));
-          try {
-            await cp(depPath, destPath);
-          } catch (_e) {}
-          return { path: `./${relative(options.outdir, join('fonts', basename(args.path)))}`, external: true };
-        });
-      }
-    },
-    // TODO (thure): theme.css must be part of entryPoints in order to be processed with `stylePlugin`, but this should not be necessary. ESBuild would not load theme.css using stylePlugin if referenced within index.ts(x) as with the Vite plugin.
-    // TODO (thure): Note also that because it is an entryPoint, the developer has to reference the built theme.css from `index.html`, which is inflexible and possibly inconvenient.
-    stylePlugin({
-      postcss: {
-        plugins: [tailwindcss(tailwindConfig({ env: process.env.NODE_ENV, content: options.content })), autoprefixer]
-      }
-    })
-  ];
-};

package/src/hooks/index.ts

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

package/src/hooks/useForwardedRef.ts

@@ -1,22 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { useRef, useEffect } from 'react';
-
-export const useForwardedRef = <T>(ref: React.ForwardedRef<T>) => {
-  const innerRef = useRef<T>(null);
-
-  useEffect(() => {
-    if (!ref) {
-      return;
-    }
-    if (typeof ref === 'function') {
-      ref(innerRef.current);
-    } else {
-      ref.current = innerRef.current;
-    }
-  });
-
-  return innerRef;
-};

package/src/hooks/useId.ts

@@ -1,21 +0,0 @@
-//
-// 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');
-
-export const randomString = (n = 4) =>
-  prng()
-    .toString(16)
-    .slice(2, n + 2);
-
-export const useId = (namespace: string, n?: number) => useMemo(() => `${namespace}-${randomString(n)}`, []);