@dxos/react-ui 0.9.0 → 0.9.1-staging.ee54ba693a

package/src/components/Tooltip/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './TextTooltip';
 export * from './Tooltip';
 export * from './tooltipContent';

package/src/components/index.ts

@@ -18,7 +18,6 @@ export * from './Icon';
 export * from './Image';
 export * from './Input';
 export * from './Link';
-export * from './List';
 export * from './Main';
 export * from './MediaPlayer';
 export * from './Menu';

package/src/exemplars/tabster.stories.tsx

@@ -4,8 +4,8 @@
 
 import {
   useArrowNavigationGroup,
-  useFocusFinders,
   useFocusableGroup,
+  useFocusFinders,
   useMergedTabsterAttributes_unstable,
 } from '@fluentui/react-tabster';
 import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite';

package/src/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export { type Resource, type TFunction } from 'i18next';
+export { type Resource, type TFunction } from '@dxos/i18n';
 export { Trans } from 'react-i18next';
 
 export * from '@dxos/react-hooks';

package/src/primitives/ThemeProvider/TranslationsProvider.tsx

@@ -3,31 +3,14 @@
 //
 
 import { type Locale, enUS as dtLocaleEnUs } from 'date-fns/locale';
-import i18Next, { type Resource } from 'i18next';
 import React, { type ReactNode, Suspense, createContext, useContext, useEffect, useState } from 'react';
-import { initReactI18next, useTranslation as useI18NextTranslation } from 'react-i18next';
+import { I18nextProvider, useTranslation as useI18NextTranslation } from 'react-i18next';
+
+import { type Resource, addResources, i18n } from '@dxos/i18n';
 
-const initialLng = 'en-US';
 const initialNs = 'dxos-common';
 const initialDtLocale = dtLocaleEnUs;
 
-export const resources = {
-  [initialLng]: {
-    [initialNs]: {
-      'loading translations': 'Loading translations…',
-    },
-  },
-} as const satisfies Resource;
-
-void i18Next.use(initReactI18next).init({
-  resources,
-  lng: initialLng,
-  defaultNS: initialNs,
-  interpolation: {
-    escapeValue: false,
-  },
-});
-
 export interface TranslationsProviderProps {
   children?: ReactNode;
   // TODO(wittjosiah): Rename to `placeholder` to match ClientProvider?
@@ -59,14 +42,9 @@ export const TranslationsProvider = ({
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     setLoaded(false);
+    // Convenience for standalone/storybook callers; the i18next instance lifecycle is owned by `@dxos/i18n`.
     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]);
-          });
-        });
-      });
+      addResources(resourceExtensions);
     }
 
     setLoaded(true);
@@ -75,8 +53,10 @@ export const TranslationsProvider = ({
   // 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, dtLocale: dtLocale ?? initialDtLocale }}>
-      <Suspense fallback={fallback}>{loaded ? children : fallback}</Suspense>
-    </TranslationsContext.Provider>
+    <I18nextProvider i18n={i18n}>
+      <TranslationsContext.Provider value={{ appNs: appNs ?? initialNs, dtLocale: dtLocale ?? initialDtLocale }}>
+        <Suspense fallback={fallback}>{loaded ? children : fallback}</Suspense>
+      </TranslationsContext.Provider>
+    </I18nextProvider>
   );
 };

package/src/testing/Loading.tsx

@@ -24,11 +24,12 @@ export const Loading = ({ data }: LoadingProps) => {
   }, []);
 
   return (
-    <div className='w-full p-2'>
+    <div className='grid p-2'>
       <div
         className={mx(
           'flex flex-col w-full p-2 border-2 border-teal-500 rounded-md',
           'opacity-0 transition delay-1000 duration-1000',
+          'overflow-auto',
           visible && 'opacity-100',
         )}
       >

package/src/testing/decorators/withLayout.tsx

@@ -54,13 +54,13 @@ const layouts: Record<ContainerType, FC<ContainerProps>> = {
   ),
 
   centered: ({ classNames, children }: ContainerProps) => (
-    <div className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-black')}>
+    <div className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-trim-surface')}>
       <div className={mx('flex flex-col bg-base-surface', classNames)}>{children}</div>
     </div>
   ),
 
   column: ({ classNames, children }: ContainerProps) => (
-    <div className='fixed inset-0 flex overflow-hidden justify-center bg-black'>
+    <div className='fixed inset-0 flex overflow-hidden justify-center bg-trim-surface'>
       <div className={mx('flex flex-col w-[40rem] bg-base-surface', classNames)}>{children}</div>
     </div>
   ),

package/src/theme/defaultTheme.ts

@@ -17,8 +17,6 @@ import { focusTheme } from '../components/Focus/Focus.theme';
 import { iconTheme } from '../components/Icon/Icon.theme';
 import { inputTheme } from '../components/Input/Input.theme';
 import { linkTheme } from '../components/Link/Link.theme';
-import { listTheme } from '../components/List/List.theme';
-import { treegridTheme } from '../components/List/Treegrid.theme';
 import { mainTheme } from '../components/Main/Main.theme';
 import { menuTheme } from '../components/Menu/Menu.theme';
 import { messageTheme } from '../components/Message/Message.theme';
@@ -62,7 +60,6 @@ export const defaultTheme: Theme<Record<string, any>> = {
   iconButton: iconButtonTheme,
   input: inputTheme,
   link: linkTheme,
-  list: listTheme,
   main: mainTheme,
   message: messageTheme,
   menu: menuTheme,
@@ -77,7 +74,6 @@ export const defaultTheme: Theme<Record<string, any>> = {
   toast: toastTheme,
   toolbar: toolbarTheme,
   tooltip: tooltipTheme,
-  treegrid: treegridTheme,
 };
 
 export const defaultTx = bindTheme(defaultTheme);

package/src/theme/index.ts

@@ -17,8 +17,6 @@ export * from '../components/Focus/Focus.theme';
 export * from '../components/Icon/Icon.theme';
 export * from '../components/Input/Input.theme';
 export * from '../components/Link/Link.theme';
-export * from '../components/List/List.theme';
-export * from '../components/List/Treegrid.theme';
 export * from '../components/Main/Main.theme';
 export * from '../components/Menu/Menu.theme';
 export * from '../components/Message/Message.theme';

package/src/translations.ts

@@ -14,18 +14,36 @@ export const translations = [
         'toolbar-drag-handle.label': 'Drag to rearrange',
         'toolbar-close.label': 'Close',
         'toolbar-delete.label': 'Delete',
+
+        'system-button.star.label': 'Star',
+        'system-button.unstar.label': 'Unstar',
+        'system-button.bookmark.label': 'Bookmark',
+        'system-button.unbookmark.label': 'Remove bookmark',
+        'system-button.expand.label': 'Expand',
+        'system-button.collapse.label': 'Collapse',
+        'system-button.add.label': 'Add',
+        'system-button.delete.label': 'Delete',
+        'system-button.edit.label': 'Edit',
+        'system-button.close.label': 'Close',
+        'system-button.upload.label': 'Upload',
+        'system-button.download.label': 'Download',
+        'system-button.clipboard.label': 'Copy',
+
         'carousel-viewport.label': 'Carousel',
         'carousel-prev.label': 'Previous slide',
         'carousel-next.label': 'Next slide',
         'carousel-indicators.label': 'Carousel slides',
         'carousel-go-to.label': 'Go to slide {{index}}',
+
         'date-picker.placeholder.single.label': 'Pick a date',
         'date-picker.placeholder.range.label': 'Pick a date range',
         'date-picker.placeholder.multiple.label': 'Pick dates',
         'date-picker.clear.label': 'Clear',
+
         'calendar.nav.previous.label': 'Previous month',
         'calendar.nav.next.label': 'Next month',
         'calendar.footer.today.label': 'Today',
+
         'trigger-button.label': 'Open',
       },
     },

package/src/util/slots.ts

@@ -4,15 +4,15 @@
 
 import {
   Children,
-  createElement,
-  forwardRef,
-  type ForwardRefExoticComponent,
+  type CSSProperties,
   type ForwardedRef,
+  type ForwardRefExoticComponent,
   type HTMLAttributes,
-  isValidElement,
   type ReactNode,
   type RefAttributes,
-  type CSSProperties,
+  createElement,
+  forwardRef,
+  isValidElement,
 } from 'react';
 
 import { log } from '@dxos/log';

package/dist/lib/browser/chunk-5SPBSIWS.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/translations.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui';\n\nexport const translations = [\n  {\n    'en-US': {\n      [translationKey]: {\n        'toolbar-menu.label': 'Action menu',\n        'toolbar-drag-handle.label': 'Drag to rearrange',\n        'toolbar-close.label': 'Close',\n        'toolbar-delete.label': 'Delete',\n        'carousel-viewport.label': 'Carousel',\n        'carousel-prev.label': 'Previous slide',\n        'carousel-next.label': 'Next slide',\n        'carousel-indicators.label': 'Carousel slides',\n        'carousel-go-to.label': 'Go to slide {{index}}',\n        'date-picker.placeholder.single.label': 'Pick a date',\n        'date-picker.placeholder.range.label': 'Pick a date range',\n        'date-picker.placeholder.multiple.label': 'Pick dates',\n        'date-picker.clear.label': 'Clear',\n        'calendar.nav.previous.label': 'Previous month',\n        'calendar.nav.next.label': 'Next month',\n        'calendar.footer.today.label': 'Today',\n        'trigger-button.label': 'Open',\n      },\n    },\n  },\n] as const satisfies Resource[];\n"],
-  "mappings": ";AAMO,IAAMA,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB;QAChB,sBAAsB;QACtB,6BAA6B;QAC7B,uBAAuB;QACvB,wBAAwB;QACxB,2BAA2B;QAC3B,uBAAuB;QACvB,uBAAuB;QACvB,6BAA6B;QAC7B,wBAAwB;QACxB,wCAAwC;QACxC,uCAAuC;QACvC,0CAA0C;QAC1C,2BAA2B;QAC3B,+BAA+B;QAC/B,2BAA2B;QAC3B,+BAA+B;QAC/B,wBAAwB;MAC1B;IACF;EACF;;",
-  "names": ["translationKey", "translations"]
-}