@dxos/react-ui 0.1.41-next.adfd7c6 → 0.3.3-main.3ce60d4

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import React, { type FC, type PropsWithChildren, useState } from 'react';
+
+import { type Density } from '@dxos/react-ui-types';
+
+import { Select } from './Select';
+import { DensityProvider } from '../DensityProvider';
+
+faker.seed(1234);
+
+// TODO(burdon): Factor out density test.
+const createDensityTest =
+  (Component: FC<any>) =>
+  ({ ...props }) => {
+    const densities: Density[] = ['coarse', 'fine'];
+    return (
+      <div className='grid grid-cols-2'>
+        {densities.map((density) => (
+          <div key={density}>
+            <DensityProvider density={density}>
+              <Component {...props} />
+            </DensityProvider>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+type ItemProps = { id: string; text: string };
+
+const StorybookSelect = ({ items = [] }: PropsWithChildren<{ items: ItemProps[] }>) => {
+  const [value, setValue] = useState<string>();
+  return (
+    <Select.Root value={value} onValueChange={setValue}>
+      <Select.TriggerButton placeholder='Select value' />
+      <Select.Portal>
+        <Select.Content>
+          <Select.ScrollUpButton />
+          <Select.Viewport>
+            {items.map(({ id, text }) => (
+              <Select.Option key={id} value={id}>
+                {text}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+          <Select.ScrollDownButton />
+          <Select.Arrow />
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};
+
+export default {
+  component: createDensityTest(StorybookSelect),
+};
+
+export const Default = {
+  args: {
+    items: Array.from({ length: 16 }).map((_, i) => ({ id: `item-${i}`, text: faker.lorem.word() })),
+  },
+};

package/src/components/Select/Select.tsx

@@ -0,0 +1,223 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretDown, CaretUp, Check } from '@phosphor-icons/react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import React, { forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { Button, type ButtonProps } from '../Buttons';
+
+type SelectRootProps = SelectPrimitive.SelectProps;
+
+const SelectRoot = SelectPrimitive.Root;
+
+type SelectTriggerProps = SelectPrimitive.SelectTriggerProps;
+
+const SelectTrigger = SelectPrimitive.Trigger;
+
+type SelectValueProps = SelectPrimitive.SelectValueProps;
+
+const SelectValue = SelectPrimitive.Value;
+
+type SelectIconProps = SelectPrimitive.SelectIconProps;
+
+const SelectIcon = SelectPrimitive.Icon;
+
+type SelectPortalProps = SelectPrimitive.SelectPortalProps;
+
+const SelectPortal = SelectPrimitive.Portal;
+
+type SelectTriggerButtonProps = Omit<ButtonProps, 'children'> & Pick<SelectValueProps, 'placeholder'>;
+
+const SelectTriggerButton = forwardRef<HTMLButtonElement, ButtonProps>(({ placeholder, ...props }, forwardedRef) => {
+  return (
+    <SelectPrimitive.Trigger asChild ref={forwardedRef}>
+      <Button {...props}>
+        <SelectPrimitive.Value placeholder={placeholder} />
+        <SelectPrimitive.Icon className='pis-2'>
+          <CaretDown weight='bold' />
+        </SelectPrimitive.Icon>
+      </Button>
+    </SelectPrimitive.Trigger>
+  );
+});
+
+type SelectContentProps = ThemedClassName<SelectPrimitive.SelectContentProps>;
+
+const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <SelectPrimitive.Content
+        {...props}
+        className={tx('select.content', 'select__content', {}, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </SelectPrimitive.Content>
+    );
+  },
+);
+
+type SelectScrollUpButtonProps = ThemedClassName<SelectPrimitive.SelectScrollUpButtonProps>;
+
+const SelectScrollUpButton = forwardRef<HTMLDivElement, SelectScrollUpButtonProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <SelectPrimitive.SelectScrollUpButton
+        {...props}
+        className={tx('select.scrollButton', 'select__scroll-button--up', {}, classNames)}
+        ref={forwardedRef}
+      >
+        {children ?? <CaretUp weight='bold' />}
+      </SelectPrimitive.SelectScrollUpButton>
+    );
+  },
+);
+
+type SelectScrollDownButtonProps = ThemedClassName<SelectPrimitive.SelectScrollDownButtonProps>;
+
+const SelectScrollDownButton = forwardRef<HTMLDivElement, SelectScrollDownButtonProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <SelectPrimitive.SelectScrollDownButton
+        {...props}
+        className={tx('select.scrollButton', 'select__scroll-button--down', {}, classNames)}
+        ref={forwardedRef}
+      >
+        {children ?? <CaretDown weight='bold' />}
+      </SelectPrimitive.SelectScrollDownButton>
+    );
+  },
+);
+
+type SelectViewportProps = SelectPrimitive.SelectViewportProps;
+
+const SelectViewport = SelectPrimitive.Viewport;
+
+type SelectItemProps = ThemedClassName<SelectPrimitive.SelectItemProps>;
+
+const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  // TODO(burdon): Why 'option'?
+  return <SelectPrimitive.Item {...props} className={tx('select.item', 'option', {}, classNames)} ref={forwardedRef} />;
+});
+
+type SelectItemTextProps = SelectPrimitive.SelectItemTextProps;
+
+const SelectItemText = SelectPrimitive.ItemText;
+
+type SelectItemIndicatorProps = ThemedClassName<SelectPrimitive.SelectItemIndicatorProps>;
+
+const SelectItemIndicator = forwardRef<HTMLDivElement, SelectItemIndicatorProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <SelectPrimitive.ItemIndicator
+        {...props}
+        className={tx('select.itemIndicator', 'option__indicator', {}, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </SelectPrimitive.ItemIndicator>
+    );
+  },
+);
+
+type SelectOptionProps = SelectItemProps;
+
+const SelectOption = forwardRef<HTMLDivElement, SelectItemProps>(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+
+  return (
+    <SelectPrimitive.Item {...props} className={tx('select.item', 'option', {}, classNames)} ref={forwardedRef}>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      {/* TODO(burdon): Make optional; and shift left to align value with closed state. */}
+      <SelectPrimitive.ItemIndicator className={tx('select.itemIndicator', 'option__indicator', {}, classNames)}>
+        <Check weight='bold' />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  );
+});
+
+type SelectGroupProps = SelectPrimitive.SelectGroupProps;
+
+const SelectGroup = SelectPrimitive.Group;
+
+type SelectLabelProps = SelectPrimitive.SelectLabelProps;
+
+const SelectLabel = SelectPrimitive.Label;
+
+type SelectSeparatorProps = ThemedClassName<SelectPrimitive.SelectSeparatorProps>;
+
+const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <SelectPrimitive.Separator
+      {...props}
+      className={tx('select.separator', 'select__separator', {}, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+type SelectArrowProps = ThemedClassName<SelectPrimitive.SelectArrowProps>;
+
+const SelectArrow = forwardRef<SVGSVGElement, SelectArrowProps>(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+
+  return (
+    <SelectPrimitive.Arrow
+      {...props}
+      className={tx('select.arrow', 'select__arrow', {}, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+export const Select = {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  TriggerButton: SelectTriggerButton,
+  Value: SelectValue,
+  Icon: SelectIcon,
+  Portal: SelectPortal,
+  Content: SelectContent,
+  ScrollUpButton: SelectScrollUpButton,
+  ScrollDownButton: SelectScrollDownButton,
+  Viewport: SelectViewport,
+  Item: SelectItem,
+  ItemText: SelectItemText,
+  ItemIndicator: SelectItemIndicator,
+  Option: SelectOption,
+  Group: SelectGroup,
+  Label: SelectLabel,
+  Separator: SelectSeparator,
+  Arrow: SelectArrow,
+};
+
+export type {
+  SelectRootProps,
+  SelectTriggerProps,
+  SelectTriggerButtonProps,
+  SelectValueProps,
+  SelectIconProps,
+  SelectPortalProps,
+  SelectContentProps,
+  SelectScrollUpButtonProps,
+  SelectScrollDownButtonProps,
+  SelectViewportProps,
+  SelectItemProps,
+  SelectItemTextProps,
+  SelectItemIndicatorProps,
+  SelectOptionProps,
+  SelectGroupProps,
+  SelectLabelProps,
+  SelectSeparatorProps,
+  SelectArrowProps,
+};

package/src/components/Select/index.ts

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

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2023 DXOS.org
+//
+import {
+  Separator as SeparatorPrimitive,
+  type SeparatorProps as SeparatorPrimitiveProps,
+} from '@radix-ui/react-separator';
+import React from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+
+type SeparatorProps = ThemedClassName<SeparatorPrimitiveProps>;
+
+const Separator = ({ classNames, orientation = 'horizontal', ...props }: SeparatorProps) => {
+  const { tx } = useThemeContext();
+  return (
+    <SeparatorPrimitive
+      orientation={orientation}
+      {...props}
+      className={tx('separator.root', 'separator', { orientation }, classNames)}
+    />
+  );
+};
+
+export type { SeparatorProps };
+
+export { Separator };

package/src/components/Separator/index.ts

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

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

@@ -0,0 +1,42 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { Tag } from './Tag';
+
+export default {
+  component: Tag,
+  argTypes: {
+    palette: {
+      control: 'select',
+      options: [
+        'neutral',
+        'success',
+        'info',
+        'warning',
+        'error',
+        'red',
+        'orange',
+        'amber',
+        'yellow',
+        'lime',
+        'green',
+        'emerald',
+        'teal',
+        'cyan',
+        'sky',
+        'blue',
+        'indigo',
+        'violet',
+        'purple',
+        'fuchsia',
+        'pink',
+        'rose',
+      ],
+    },
+  },
+} as any;
+
+export const Default = { args: { children: 'Hello', palette: 'success' } };

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,23 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { type ChromaticPalette, type MessageValence, type NeutralPalette } from '@dxos/react-ui-types';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+
+export type TagProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.span>> & {
+  palette?: NeutralPalette | ChromaticPalette | MessageValence;
+  asChild?: boolean;
+};
+
+export const Tag = forwardRef<HTMLSpanElement, TagProps>(({ asChild, palette, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root = asChild ? Slot : Primitive.span;
+  return <Root {...props} className={tx('tag.root', 'tag', { palette }, classNames)} ref={forwardedRef} />;
+});

package/src/components/Tag/index.ts

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

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { createKeyborg } from 'keyborg';
+import React, { createContext, type PropsWithChildren, useEffect } from 'react';
+
+import { type Density, type Elevation, type ThemeFunction } from '@dxos/react-ui-types';
+
+import { TranslationsProvider, type TranslationsProviderProps } from './TranslationsProvider';
+import { hasIosKeyboard } from '../../util';
+import { DensityProvider } from '../DensityProvider';
+import { ElevationProvider } from '../ElevationProvider';
+
+export type ThemeMode = 'light' | 'dark';
+
+export interface ThemeContextValue {
+  tx: ThemeFunction<any>;
+  themeMode: ThemeMode;
+  hasIosKeyboard: boolean;
+}
+
+export type ThemeProviderProps = Omit<TranslationsProviderProps, 'children'> &
+  Partial<ThemeContextValue> &
+  PropsWithChildren<{
+    rootElevation?: Elevation;
+    rootDensity?: Density;
+  }>;
+
+export const ThemeContext = createContext<ThemeContextValue>({
+  tx: (_path, defaultClassName, _styleProps, ..._options) => defaultClassName,
+  themeMode: 'dark',
+  hasIosKeyboard: false,
+});
+
+const handleInputModalityChange = (isUsingKeyboard: boolean) => {
+  if (isUsingKeyboard) {
+    document.body.setAttribute('data-is-keyboard', 'true');
+  } else {
+    document.body.removeAttribute('data-is-keyboard');
+  }
+};
+
+export const ThemeProvider = ({
+  children,
+  fallback = null,
+  resourceExtensions,
+  appNs,
+  tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName,
+  themeMode = 'dark',
+  rootElevation = 'base',
+  rootDensity = 'coarse',
+}: ThemeProviderProps) => {
+  useEffect(() => {
+    if (document.defaultView) {
+      const kb = createKeyborg(document.defaultView);
+      kb.subscribe(handleInputModalityChange);
+      return () => kb.unsubscribe(handleInputModalityChange);
+    }
+  }, []);
+  return (
+    <ThemeContext.Provider value={{ tx, themeMode, hasIosKeyboard: hasIosKeyboard() }}>
+      <TranslationsProvider
+        {...{
+          fallback,
+          resourceExtensions,
+          appNs,
+        }}
+      >
+        <ElevationProvider elevation={rootElevation}>
+          <DensityProvider density={rootDensity}>{children}</DensityProvider>
+        </ElevationProvider>
+      </TranslationsProvider>
+    </ThemeContext.Provider>
+  );
+};

package/src/components/ThemeProvider/TranslationsProvider.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import i18Next, { type Resource } from 'i18next';
+import React, { type ReactNode, useEffect, createContext, useState, Suspense } from 'react';
+import { initReactI18next } from 'react-i18next';
+
+const initialLng = 'en-US';
+const initialNs = 'dxos-common';
+
+export const resources = {
+  [initialLng]: {
+    [initialNs]: {
+      'loading translations': 'Loading translations…',
+    },
+  },
+} as const;
+
+void i18Next.use(initReactI18next).init({
+  resources,
+  lng: initialLng,
+  defaultNS: initialNs,
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export interface TranslationsProviderProps {
+  children?: ReactNode;
+  fallback?: ReactNode;
+  resourceExtensions?: Resource[];
+  appNs?: string;
+}
+
+export const TranslationsContext = createContext({
+  appNs: initialNs,
+});
+
+export const TranslationsProvider = ({ fallback, resourceExtensions, children, appNs }: TranslationsProviderProps) => {
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    setLoaded(false);
+    if (resourceExtensions && resourceExtensions.length) {
+      resourceExtensions.forEach((resource) => {
+        Object.keys(resource).forEach((language) => {
+          Object.keys(resource[language]).forEach((ns) => {
+            i18Next.addResourceBundle(language, ns, resource[language][ns]);
+          });
+        });
+      });
+    }
+    setLoaded(true);
+  }, [resourceExtensions]);
+
+  // TODO(thure): This is not ideal, but i18next was causing `Suspense` to not render the fallback even when the child was asking for namespaces yet to be added.
+  // TODO(burdon): Fallbacks should only appear after a short delay, and if the displayed then be visible for 500mx to avoid startup flickering.
+  return (
+    <TranslationsContext.Provider value={{ appNs: appNs ?? initialNs }}>
+      <Suspense fallback={fallback}>{loaded ? children : fallback}</Suspense>
+    </TranslationsContext.Provider>
+  );
+};

package/src/components/ThemeProvider/index.ts

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

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

@@ -0,0 +1,61 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { type ReactNode, useState } from 'react';
+
+import { Toast } from './Toast';
+import { Button } from '../Buttons';
+
+type ActionTriggerProps = { altText: string; trigger: ReactNode };
+
+type StorybookToastProps = Partial<{
+  openTrigger: string;
+  title: string;
+  description: string;
+  actionTriggers: ActionTriggerProps[];
+  closeTrigger: ReactNode;
+}>;
+
+const StorybookToast = (props: StorybookToastProps) => {
+  const [open, setOpen] = useState(true);
+  return (
+    <Toast.Provider>
+      <Button onClick={() => setOpen(true)}>{props.openTrigger}</Button>
+      <Toast.Viewport />
+      <Toast.Root open={open} onOpenChange={setOpen}>
+        <Toast.Body>
+          <Toast.Title>{props.title}</Toast.Title>
+          <Toast.Description>{props.description}</Toast.Description>
+        </Toast.Body>
+        <Toast.Actions>
+          <Toast.Close asChild={typeof props.closeTrigger !== 'string'}>{props.closeTrigger}</Toast.Close>
+          {(props.actionTriggers || []).map(({ altText, trigger }: ActionTriggerProps, index: number) => (
+            <Toast.Action key={index} altText={altText} asChild={typeof trigger !== 'string'}>
+              {trigger}
+            </Toast.Action>
+          ))}
+        </Toast.Actions>
+      </Toast.Root>
+    </Toast.Provider>
+  );
+};
+
+export default {
+  component: StorybookToast,
+};
+
+export const 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 variant='primary'>Reload</Button> }],
+    closeTrigger: <Button>Close</Button>,
+  },
+  parameters: {
+    chromatic: { delay: 800 },
+  },
+};