@stream-io/video-react-sdk 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/src/i18n/types.d.ts

@@ -0,0 +1,45 @@
+import type { Streami18nState as CoreStreami18nState, LooseTranslationDictionaryOf, RelativeTimeCatalog, StreamTFunctionFor, TranslationDictionaryOf, TranslationKeyOf } from '@stream-io/i18n';
+import type { TranslationCatalog as GeneratedCatalog } from './keys';
+/**
+ * The SDK's i18n types, instantiated from the generic helpers in `@stream-io/i18n`.
+ *
+ * The derivations live in core so both video SDKs (and Chat) share one implementation; the *catalog*
+ * stays here, because it is generated from this package's own `t()` call sites. That split is why
+ * core's helpers are generic over the catalog rather than driven by module augmentation — two
+ * catalogs have to be able to coexist in one TypeScript program, which a monorepo typechecking the
+ * web and React Native SDKs in one pass does.
+ *
+ * `relativeTime.*` is intersected in because it is core's copy, not ours: `timestampFormatter`
+ * renders "Today" / "3d ago" through `t()`, and without these keys in the catalog an integrator
+ * could not type a dictionary that translates them.
+ */
+export type TranslationCatalog = GeneratedCatalog & RelativeTimeCatalog;
+/**
+ * Keys resolved from bundled data rather than from an inline `defaultValue`.
+ *
+ * `never`, because `runtimeDefaults.ts` is empty — every key this SDK uses is written literally
+ * with its English copy at the call site. `timestamp.*` / `duration.*` are matched by prefix inside
+ * core and need no entry here.
+ *
+ * **It must never become `string`.** `string` collapses the prose overload in `StreamTFunctionFor`,
+ * which silently disables all key checking: every `t('typo.key', 'copy')` would compile. Widen it
+ * only to a literal prefix template (`` `foo.${string}` ``) when a real bundled key appears.
+ */
+export type BundledKey = never;
+export type TranslationKey = TranslationKeyOf<TranslationCatalog>;
+export type TranslationDictionary = TranslationDictionaryOf<TranslationCatalog>;
+export type LooseTranslationDictionary = LooseTranslationDictionaryOf<TranslationCatalog>;
+export type StreamTFunction = StreamTFunctionFor<TranslationCatalog, BundledKey>;
+/**
+ * The value held by `Streami18n.state`, parameterized for this SDK's catalog.
+ *
+ * Exported because `state` is public: a consumer subscribing to it needs to name the type for a
+ * module-scope selector. Core's default-parameterized `Streami18nState` is not a substitute — `t` is
+ * contravariant in its key parameter, so that one is not assignable to this.
+ */
+export type Streami18nState = CoreStreami18nState<TranslationCatalog, BundledKey>;
+/**
+ * Re-exported so an integrator can type a formatter, a locale config or a date parser without
+ * taking a direct dependency on `@stream-io/i18n`.
+ */
+export type { CustomFormatters, DateTimeParserModule, DayjsLocaleConfig, DurationFormatterOptions, DynamicTranslationKey, FormatterFactory, LooseTranslateFunction, PredefinedFormatters, TDateTimeParser, TDateTimeParserInput, TDateTimeParserOutput, TimestampFormatterOptions, } from '@stream-io/i18n';

package/dist/src/i18n/useStreami18n.d.ts

@@ -0,0 +1,19 @@
+import { Streami18n } from './Streami18n';
+import type { TranslationContextValue } from './TranslationContext';
+import type { LooseTranslationDictionary } from './types';
+export type UseStreami18nParams = {
+    /** An instance the integrator configured. One is created when absent. */
+    i18nInstance?: Streami18n;
+    /** The language the SDK's copy renders in. Changing it switches languages in place. */
+    language?: string;
+    /** Dictionaries to register, keyed by language code. Partial dictionaries are safe. */
+    translations?: Record<string, LooseTranslationDictionary>;
+};
+/**
+ * Resolves the translation context value: creates or adopts a {@link Streami18n} instance,
+ * registers the supplied dictionaries, initializes it and keeps `t` fresh across language changes.
+ *
+ * `init()` and the store subscription belong to `useStreami18nState` in `@stream-io/i18n/react`,
+ * shared with the React Native SDK.
+ */
+export declare const useStreami18n: ({ i18nInstance, language, translations, }: UseStreami18nParams) => TranslationContextValue;

package/index.ts

@@ -7,7 +7,7 @@ export * from './src/core';
 
 export * from './src/components';
 export * from './src/wrappers';
-export * from './src/translations';
+export * from './src/i18n';
 export {
   useHorizontalScrollPosition,
   useVerticalScrollPosition,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "main": "./dist/index.cjs.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/index.d.ts",
@@ -21,8 +21,13 @@
   "scripts": {
     "clean": "rimraf dist",
     "start": "rollup -c -w",
-    "build": "rimraf dist && NODE_ENV=production rollup -c && yarn copy-css",
-    "copy-css": "cp -R ../../node_modules/@stream-io/video-styling/dist/* dist/"
+    "build": "rimraf dist && yarn build-translations && NODE_ENV=production rollup -c && yarn copy-css",
+    "copy-css": "cp -R ../../node_modules/@stream-io/video-styling/dist/* dist/",
+    "build-translations": "node scripts/generate-i18n-keys.mts && yarn run -T prettier --write --log-level warn src/i18n/keys.ts",
+    "validate-translations": "yarn build-translations && git diff --exit-code -- src/i18n/keys.ts src/i18n/__tests__/catalog.fixture.json",
+    "i18n:export": "node scripts/generate-i18n-keys.mts --json en.json",
+    "test": "vitest",
+    "test-ci": "vitest run"
   },
   "repository": {
     "type": "git",
@@ -32,6 +37,7 @@
   "files": [
     "dist",
     "src",
+    "!src/**/__tests__",
     "assets",
     "index.ts",
     "embedded.ts",
@@ -49,24 +55,22 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@stream-io/video-client": "2.0.0-beta.0",
-    "@stream-io/video-filters-web": "0.9.0",
-    "@stream-io/video-react-bindings": "2.0.0-beta.0",
-    "chart.js": "^4.5.1",
-    "clsx": "^2.1.1",
-    "react-chartjs-2": "^5.3.1"
+    "@stream-io/i18n": "^1.0.2",
+    "@stream-io/video-client": "2.0.0-beta.1",
+    "@stream-io/video-filters-web": "1.0.0-beta.0",
+    "@stream-io/video-react-bindings": "2.0.0-beta.1",
+    "clsx": "^2.1.1"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
-    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@stream-io/audio-filters-web": "^0.10.4",
+    "@stream-io/audio-filters-web": "^1.0.0-beta.0",
     "@stream-io/typescript-config": "^0.0.0",
-    "@stream-io/video-styling": "^2.0.0-beta.0",
+    "@stream-io/video-styling": "^2.0.0-beta.1",
     "@types/node": "^25.9.5",
     "@types/react": "~19.2.18",
     "@types/react-dom": "~19.2.4",
@@ -74,6 +78,7 @@
     "react-dom": "19.2.8",
     "rimraf": "^6.1.3",
     "rollup": "^4.62.4",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
   }
 }

package/src/components/Avatar/Avatar.tsx

@@ -1,39 +1,64 @@
 import { ComponentProps, CSSProperties, useState } from 'react';
 import clsx from 'clsx';
 
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+
 export type AvatarData = {
   imageSrc?: string;
   name?: string;
   style?: CSSProperties & Record<string, string | number>;
 };
 
-export type AvatarProps = AvatarData & ComponentProps<'img'>;
+export type AvatarVariantProps = {
+  size?: AvatarSize;
+  showOutline?: boolean;
+};
+
+export type AvatarProps = AvatarData &
+  ComponentProps<'img'> &
+  AvatarVariantProps;
+
+const variantClasses = ({ size = 'md', showOutline }: AvatarVariantProps) => [
+  `str-video__avatar--size-${size}`,
+  showOutline && 'str-video__avatar--outlined',
+];
 
 export const Avatar = ({
   imageSrc,
   name,
   style,
   className,
+  size = 'md',
+  showOutline,
   ...rest
 }: AvatarProps) => {
   const [error, setError] = useState(false);
 
+  if (!imageSrc || error) {
+    return name ? (
+      <AvatarFallback
+        className={className}
+        style={style}
+        names={name.split(/\s+/).filter(Boolean)}
+        size={size}
+        showOutline={showOutline}
+      />
+    ) : null;
+  }
+
   return (
-    <>
-      {(!imageSrc || error) && name && (
-        <AvatarFallback className={className} style={style} names={[name]} />
-      )}
-      {imageSrc && !error && (
-        <img
-          onError={() => setError(true)}
-          alt="avatar"
-          className={clsx('str-video__avatar', className)}
-          src={imageSrc}
-          style={style}
-          {...rest}
-        />
+    <img
+      onError={() => setError(true)}
+      alt="avatar"
+      className={clsx(
+        'str-video__avatar',
+        variantClasses({ size, showOutline }),
+        className,
       )}
-    </>
+      src={imageSrc}
+      style={style}
+      {...rest}
+    />
   );
 };
 
@@ -41,20 +66,29 @@ type AvatarFallbackProps = {
   names: string[];
   className?: string;
   style?: CSSProperties & Record<string, string | number>;
-};
+} & AvatarVariantProps;
+
 export const AvatarFallback = ({
   className,
   names,
   style,
+  size = 'md',
+  showOutline,
 }: AvatarFallbackProps) => {
+  const isCompact = size === 'xs' || size === 'sm';
+
   return (
     <div
-      className={clsx('str-video__avatar--initials-fallback', className)}
+      className={clsx(
+        'str-video__avatar--initials-fallback',
+        variantClasses({ size, showOutline }),
+        className,
+      )}
       style={style}
     >
       <div>
-        {names[0][0]}
-        {names[1]?.[0]}
+        {names[0]?.[0]}
+        {!isCompact && names[1]?.[0]}
       </div>
     </div>
   );

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
+import clsx from 'clsx';
+
+import { Icon } from '../Icon';
+
+export type BadgeVariant =
+  'default' | 'primary' | 'error' | 'neutral' | 'inverse';
+
+export type BadgeSize = 'xs' | 'sm' | 'md';
+
+export type BadgeProps = ComponentPropsWithoutRef<'span'> & {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  icon?: string;
+};
+
+/**
+ * A compact badge for counts, notifications and error markers.
+ *
+ * Without `icon` it is a pill that grows with its content; with `icon` it is a
+ * circle of the size given by `size`.
+ *
+ * The badge carries no positioning of its own — whatever it annotates places
+ * it. For the call controls, rendering a badge among `CompositeButton`'s
+ * children anchors it to the top-right corner of the button.
+ */
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  function BadgeRender(
+    { variant = 'default', size = 'sm', icon, className, children, ...rest },
+    ref,
+  ) {
+    return (
+      <span
+        ref={ref}
+        className={clsx(
+          'str-video__badge',
+          `str-video__badge--${variant}`,
+          `str-video__badge--size-${size}`,
+          icon && 'str-video__badge--icon',
+          className,
+        )}
+        {...rest}
+      >
+        {icon ? <Icon icon={icon} /> : children}
+      </span>
+    );
+  },
+);

package/src/components/Badge/index.ts

@@ -0,0 +1 @@
+export * from './Badge';

package/src/components/Button/Button.tsx

@@ -0,0 +1,49 @@
+import { ComponentPropsWithoutRef, forwardRef } from 'react';
+import clsx from 'clsx';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'destructive';
+
+export type ButtonAppearance = 'solid' | 'outline' | 'ghost';
+
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export type ButtonProps = ComponentPropsWithoutRef<'button'> & {
+  variant?: ButtonVariant;
+  appearance?: ButtonAppearance;
+  size?: ButtonSize;
+  active?: boolean;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function ButtonRender(
+    {
+      variant = 'primary',
+      appearance = 'solid',
+      size = 'md',
+      active,
+      className,
+      type = 'button',
+      children,
+      ...rest
+    },
+    ref,
+  ) {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={clsx(
+          'str-video__button',
+          `str-video__button--${variant}`,
+          `str-video__button--${appearance}`,
+          `str-video__button--size-${size}`,
+          className,
+        )}
+        {...rest}
+        aria-pressed={active ?? rest['aria-pressed']}
+      >
+        {children}
+      </button>
+    );
+  },
+);

package/src/components/Button/CompositeButton.tsx

@@ -8,11 +8,13 @@ import {
   ReactElement,
 } from 'react';
 import { Placement } from '@floating-ui/react';
+import { useI18n } from '../../i18n';
 
+import { Button, ButtonAppearance, ButtonSize, ButtonVariant } from './Button';
 import { IconButton } from './IconButton';
 import { isComponentType } from '../../utilities';
 
-export type IconButtonWithMenuProps<E extends HTMLElement = HTMLButtonElement> =
+export type CompositeButtonProps<E extends HTMLElement = HTMLButtonElement> =
   PropsWithChildren<{
     active?: boolean;
     Menu?: ComponentType | ReactElement | null;
@@ -21,91 +23,98 @@ export type IconButtonWithMenuProps<E extends HTMLElement = HTMLButtonElement> =
     menuPlacement?: Placement;
     menuOffset?: number;
     ToggleMenuButton?: ComponentType<ToggleMenuButtonProps<E>>;
-    variant?: 'primary' | 'secondary';
+    variant?: ButtonVariant;
+    appearance?: ButtonAppearance;
+    size?: Exclude<ButtonSize, 'xs'>;
     onMenuToggle?: (menuShown: boolean) => void;
   }> &
     ComponentProps<'button'>;
 
-export const CompositeButton = forwardRef<
-  HTMLDivElement,
-  IconButtonWithMenuProps
->(function CompositeButtonRender(
-  {
-    disabled,
-    caption,
-    children,
-    className,
-    active,
-    Menu,
-    menuPlacement,
-    menuOffset,
-    title,
-    ToggleMenuButton = DefaultToggleMenuButton,
-    variant,
-    onClick,
-    onMenuToggle,
-    ...restButtonProps
-  },
-  ref,
-) {
-  return (
-    <div
-      className={clsx('str-video__composite-button', className, {
-        'str-video__composite-button--caption': caption,
-        'str-video__composite-button--menu': Menu,
-      })}
-      title={title}
-      ref={ref}
-    >
+export const CompositeButton = forwardRef<HTMLDivElement, CompositeButtonProps>(
+  function CompositeButtonRender(
+    {
+      appearance,
+      caption,
+      children,
+      className,
+      disabled,
+      Menu,
+      menuOffset,
+      menuPlacement,
+      onMenuToggle,
+      active,
+      size = 'md',
+      title,
+      ToggleMenuButton = CompositeCaret,
+      variant = 'secondary',
+      ...buttonProps
+    },
+    ref,
+  ) {
+    return (
       <div
-        className={clsx('str-video__composite-button__button-group', {
-          'str-video__composite-button__button-group--active': active,
-          'str-video__composite-button__button-group--active-primary':
-            active && variant === 'primary',
-          'str-video__composite-button__button-group--active-secondary':
-            active && variant === 'secondary',
-          'str-video__composite-button__button-group--disabled': disabled,
-        })}
+        ref={ref}
+        title={title}
+        className={clsx(
+          'str-video__composite-button',
+          `str-video__composite-button--${variant}`,
+          `str-video__composite-button--size-${size}`,
+          `str-video__composite-button--${appearance ?? 'solid'}`,
+          Menu && 'str-video__composite-button--menu',
+          className,
+        )}
       >
-        <button
-          type="button"
-          className="str-video__composite-button__button"
-          onClick={(e) => {
-            e.preventDefault();
-            onClick?.(e);
-          }}
-          disabled={disabled}
-          {...restButtonProps}
-        >
-          {children}
-        </button>
-        {Menu && (
-          <MenuToggle
-            offset={menuOffset}
-            placement={menuPlacement}
-            ToggleButton={ToggleMenuButton}
-            onToggle={onMenuToggle}
+        <div className="str-video__composite-button__group">
+          <Button
+            variant={variant}
+            appearance={appearance}
+            size={size}
+            disabled={disabled}
+            active={active}
+            className="str-video__composite-button__action str-video__button--icon-only"
+            {...buttonProps}
           >
-            {isComponentType(Menu) ? <Menu /> : Menu}
-          </MenuToggle>
+            {children}
+          </Button>
+          {Menu &&
+            (disabled ? (
+              <CompositeCaret menuShown={false} disabled />
+            ) : (
+              <MenuToggle
+                offset={menuOffset}
+                placement={menuPlacement}
+                ToggleButton={ToggleMenuButton}
+                onToggle={onMenuToggle}
+              >
+                {isComponentType(Menu) ? <Menu /> : Menu}
+              </MenuToggle>
+            ))}
+        </div>
+        {caption && (
+          <span className="str-video__composite-button__caption">
+            {caption}
+          </span>
         )}
       </div>
-      {caption && (
-        <div className="str-video__composite-button__caption">{caption}</div>
-      )}
-    </div>
-  );
-});
+    );
+  },
+);
 
-const DefaultToggleMenuButton = forwardRef<
+const CompositeCaret = forwardRef<
   HTMLButtonElement,
-  ToggleMenuButtonProps
->(function DefaultToggleMenuButtonRender({ menuShown }, ref) {
+  { menuShown: boolean; disabled?: boolean }
+>(function CompositeCaretRender({ menuShown, disabled }, ref) {
+  const { t } = useI18n();
+
   return (
     <IconButton
-      className={clsx('str-video__menu-toggle-button', {
-        'str-video__menu-toggle-button--active': menuShown,
-      })}
+      className="str-video__composite-button__caret"
+      size="xs"
+      appearance="ghost"
+      disabled={disabled}
+      aria-label={t('common.toggleMenu.ariaLabel', 'Toggle menu')}
+      aria-haspopup="menu"
+      aria-expanded={menuShown}
       icon={menuShown ? 'caret-down' : 'caret-up'}
       ref={ref}
     />

package/src/components/Button/IconButton.tsx

@@ -1,33 +1,23 @@
-import { ComponentProps, ForwardedRef, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import clsx from 'clsx';
 
-import { Icon, IconProps } from '../Icon';
+import { Button, ButtonProps } from './Button';
+import { Icon } from '../Icon';
 
-export type ButtonWithIconProps = {
-  enabled?: boolean;
-  variant?: string;
-} & ComponentProps<'button'> &
-  IconProps;
+export type IconButtonProps = Omit<ButtonProps, 'children'> & {
+  icon: string;
+};
 
-export const IconButton = forwardRef(function IconButtonRender(
-  props: ButtonWithIconProps,
-  ref: ForwardedRef<HTMLButtonElement>,
-) {
-  const { icon, enabled, variant, onClick, className, ...rest } = props;
-  return (
-    <button
-      className={clsx('str-video__call-controls__button', className, {
-        [`str-video__call-controls__button--variant-${variant}`]: variant,
-        'str-video__call-controls__button--enabled': enabled,
-      })}
-      onClick={(e) => {
-        e.preventDefault();
-        onClick?.(e);
-      }}
-      ref={ref}
-      {...rest}
-    >
-      <Icon icon={icon} />
-    </button>
-  );
-});
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButtonRender({ icon, className, ...props }, ref) {
+    return (
+      <Button
+        ref={ref}
+        className={clsx('str-video__button--icon-only', className)}
+        {...props}
+      >
+        <Icon icon={icon} />
+      </Button>
+    );
+  },
+);

package/src/components/Button/index.ts

@@ -1,3 +1,3 @@
-export * from './CompositeButton';
+export * from './Button';
 export * from './IconButton';
-export * from './TextButton';
+export * from './CompositeButton';

package/src/components/CallControls/AcceptCallButton.tsx

@@ -32,9 +32,11 @@ export const AcceptCallButton = ({
   );
   return (
     <IconButton
+      className="str-video__accept-call-button"
+      size="sm"
       disabled={disabled}
       icon="call-accept"
-      variant="success"
+      variant="secondary"
       data-testid="accept-call-button"
       onClick={handleClick}
     />