@gv-tech/design-system 2.3.0 → 2.5.0

package/packages/ui-native/src/sheet.tsx

@@ -0,0 +1,127 @@
+import * as DialogPrimitive from '@rn-primitives/dialog';
+import { X } from 'lucide-react-native';
+import * as React from 'react';
+import { Platform, StyleSheet, View, type ViewStyle } from 'react-native';
+import Animated, { FadeIn, FadeOut, SlideInRight, SlideOutRight } from 'react-native-reanimated';
+
+import { type DialogContentProps } from './dialog';
+import { cn } from './lib/utils';
+import { Text } from './text';
+
+const Sheet = DialogPrimitive.Root;
+
+const SheetTrigger = DialogPrimitive.Trigger;
+
+const SheetClose = DialogPrimitive.Close;
+
+const SheetPortal = DialogPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Overlay
+      style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}
+      asChild
+      ref={ref}
+      {...props}
+    >
+      <Animated.View
+        entering={FadeIn.duration(150)}
+        exiting={FadeOut.duration(150)}
+        className={cn('absolute inset-0 z-50 bg-black/80  web:cursor-default', className)}
+      />
+    </DialogPrimitive.Overlay>
+  );
+});
+SheetOverlay.displayName = DialogPrimitive.Overlay?.displayName || 'SheetOverlay';
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps & {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    overlayClassName?: string;
+    overlayStyle?: ViewStyle;
+  }
+>(({ className, children, side = 'right', overlayClassName, overlayStyle, ...props }, ref) => {
+  const isWeb = Platform.OS === 'web';
+  // TODO: Add support for other sides
+  const entering = isWeb ? undefined : SlideInRight;
+  const exiting = isWeb ? undefined : SlideOutRight;
+
+  return (
+    <SheetPortal>
+      <SheetOverlay className={overlayClassName} style={overlayStyle} />
+      <DialogPrimitive.Content ref={ref} asChild {...props}>
+        <Animated.View
+          entering={entering}
+          exiting={exiting}
+          className={cn(
+            'absolute z-50 h-full w-3/4 gap-4 bg-background p-6 shadow-lg web:cursor-default web:duration-200 web:ease-in-out',
+            side === 'right' &&
+              'right-0 top-0 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
+            side === 'left' &&
+              'left-0 top-0 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
+            side === 'top' &&
+              'top-0 w-full border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+            side === 'bottom' &&
+              'bottom-0 w-full border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+            className,
+          )}
+        >
+          {children}
+          <DialogPrimitive.Close
+            className={cn(
+              'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary',
+              'web:absolute web:right-4 web:top-4',
+            )}
+          >
+            <X size={24} className="text-muted-foreground" />
+            <Text className="sr-only">Close</Text>
+          </DialogPrimitive.Close>
+        </Animated.View>
+      </DialogPrimitive.Content>
+    </SheetPortal>
+  );
+});
+SheetContent.displayName = DialogPrimitive.Content?.displayName || 'SheetContent';
+
+const SheetHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
+  <View className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold text-foreground', className)} {...props} />
+));
+SheetTitle.displayName = DialogPrimitive.Title?.displayName || 'SheetTitle';
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+SheetDescription.displayName = DialogPrimitive.Description?.displayName || 'SheetDescription';
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};

package/packages/ui-native/src/skeleton.test.tsx

@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Skeleton } from './skeleton';
+
+// Mock reanimated
+/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any */
+vi.mock('react-native-reanimated', () => {
+  const React = require('react');
+  return {
+    default: {
+      View: ({ children, style, ...props }: any) => React.createElement('div', { style, ...props }, children),
+    },
+    useAnimatedStyle: () => ({}),
+    useSharedValue: (val: any) => ({ value: val }),
+    withRepeat: (val: any) => val,
+    withSequence: (...args: any[]) => args[0],
+    withTiming: (val: any) => val,
+    FadeIn: { duration: () => ({}) },
+    FadeOut: { duration: () => ({}) },
+  };
+});
+/* eslint-enable @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any */
+
+describe('Skeleton (Native Implementation)', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Skeleton className="w-10 h-10" />);
+    expect(container.firstChild).toBeDefined();
+  });
+});

package/packages/ui-native/src/skeleton.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { cn } from './lib/utils';
+
+function Skeleton({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) {
+  const opacity = useSharedValue(0.5);
+
+  React.useEffect(() => {
+    opacity.value = withRepeat(
+      withSequence(withTiming(0.2, { duration: 500 }), withTiming(0.5, { duration: 500 })),
+      -1,
+      true,
+    );
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return <Animated.View className={cn('rounded-md bg-muted', className)} style={animatedStyle} {...props} />;
+}
+
+export { Skeleton };

package/packages/ui-native/src/slider.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export const Slider = () => {
+  return (
+    <View>
+      <Text>slider is not yet implemented for React Native</Text>
+    </View>
+  );
+};

package/packages/ui-native/src/sonner.tsx

@@ -0,0 +1,9 @@
+import { Text, View } from 'react-native';
+
+export const Toaster = () => {
+  return (
+    <View>
+      <Text>Toaster (Sonner) is not yet implemented for React Native</Text>
+    </View>
+  );
+};

package/packages/ui-native/src/switch.tsx

@@ -0,0 +1,34 @@
+import { SwitchBaseProps } from '@gv-tech/ui-core';
+import * as SwitchPrimitive from '@rn-primitives/switch';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+
+export interface SwitchProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'checked' | 'onCheckedChange'>,
+    SwitchBaseProps {}
+
+const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(
+  ({ className, checked, onCheckedChange, ...props }, ref) => (
+    <SwitchPrimitive.Root
+      className={cn(
+        'peer inline-flex h-6 w-11 shrink-0 cursor-pointer flex-row items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        className,
+      )}
+      {...props}
+      checked={checked ?? false}
+      onCheckedChange={onCheckedChange || (() => {})}
+      ref={ref}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  ),
+);
+Switch.displayName = SwitchPrimitive.Root?.displayName || 'Switch';
+
+export { Switch };

package/packages/ui-native/src/table.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { cn } from './lib/utils';
+import { Text } from './text';
+
+const Table = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
+  ),
+);
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+  ({ className, ...props }, ref) => <View ref={ref} className={cn('border-b border-border', className)} {...props} />,
+);
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+  ({ className, ...props }, ref) => <View ref={ref} className={cn('flex-1', className)} {...props} />,
+);
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('bg-muted/50 font-medium [&>tr]:last:border-b-0', className)} {...props} />
+  ),
+);
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(
+        'flex-row border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn(
+        'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...props} />
+  ),
+);
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+  ),
+);
+TableCaption.displayName = 'TableCaption';
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/packages/ui-native/src/tabs.tsx

@@ -0,0 +1,74 @@
+import { TabsBaseProps, TabsContentBaseProps, TabsListBaseProps, TabsTriggerBaseProps } from '@gv-tech/ui-core';
+import * as TabsPrimitive from '@rn-primitives/tabs';
+import * as React from 'react';
+
+import { cn } from './lib/utils';
+import { TextClassContext } from './text';
+
+const Tabs = TabsPrimitive.Root;
+
+export interface TabsProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, 'onValueChange' | 'value'>, TabsBaseProps {}
+export interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, TabsListBaseProps {}
+export interface TabsTriggerProps
+  extends
+    Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, 'children' | 'disabled'>,
+    TabsTriggerBaseProps {}
+export interface TabsContentProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, TabsContentBaseProps {}
+
+const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(
+  ({ className, ...props }, ref) => (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(
+        'h-10 inline-flex flex-row items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TabsList.displayName = TabsPrimitive.List?.displayName || 'TabsList';
+
+const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(
+  ({ className, ...props }, ref) => {
+    const { value } = TabsPrimitive.useRootContext();
+    return (
+      <TextClassContext.Provider
+        value={cn(
+          'text-sm native:text-base font-medium text-muted-foreground web:transition-all',
+          value === props.value && 'text-foreground',
+        )}
+      >
+        <TabsPrimitive.Trigger
+          ref={ref}
+          className={cn(
+            'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+            props.disabled && 'opacity-50',
+            value === props.value && 'bg-background shadow-sm shadow-foreground/10',
+            className,
+          )}
+          {...props}
+        />
+      </TextClassContext.Provider>
+    );
+  },
+);
+TabsTrigger.displayName = TabsPrimitive.Trigger?.displayName || 'TabsTrigger';
+
+const TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, TabsContentProps>(
+  ({ className, ...props }, ref) => (
+    <TabsPrimitive.Content
+      ref={ref}
+      className={cn(
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TabsContent.displayName = TabsPrimitive.Content?.displayName || 'TabsContent';
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/packages/ui-native/src/text.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Text } from './text';
+
+describe('Text (Native Implementation)', () => {
+  it('renders correctly', () => {
+    render(<Text>Hello World</Text>);
+    expect(screen.getByText('Hello World')).toBeDefined();
+  });
+
+  it('applies variant classes', () => {
+    render(<Text variant="h1">Heading</Text>);
+    expect(screen.getByText('Heading')).toBeDefined();
+  });
+
+  it('renders children correctly', () => {
+    render(
+      <Text>
+        <Text>Nested</Text>
+      </Text>,
+    );
+    expect(screen.getByText('Nested')).toBeDefined();
+  });
+});

package/packages/ui-native/src/text.tsx

@@ -0,0 +1,43 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { Text as RNText } from 'react-native';
+
+import type { TextBaseProps } from '@gv-tech/ui-core';
+import { cn } from './lib/utils';
+
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+const textVariants = cva('text-foreground', {
+  variants: {
+    variant: {
+      h1: 'text-4xl font-extrabold tracking-tight',
+      h2: 'text-3xl font-semibold tracking-tight',
+      h3: 'text-2xl font-semibold tracking-tight',
+      h4: 'text-xl font-semibold tracking-tight',
+      body: 'text-base leading-7',
+      bodySmall: 'text-sm leading-6',
+      caption: 'text-xs text-muted-foreground',
+      label: 'text-sm font-medium',
+      overline: 'text-xs font-semibold uppercase tracking-widest text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'body',
+  },
+});
+
+export interface TextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText>, VariantProps<typeof textVariants>, TextBaseProps {}
+
+const Text = React.forwardRef<React.ElementRef<typeof RNText>, TextProps>(
+  ({ className, variant = 'body', children, ...props }, ref) => {
+    return (
+      <RNText ref={ref} className={cn(textVariants({ variant, className }))} {...props}>
+        {children}
+      </RNText>
+    );
+  },
+);
+Text.displayName = 'Text';
+
+export { Text, TextClassContext, textVariants };

package/packages/ui-native/src/textarea.test.tsx

@@ -0,0 +1,27 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Textarea } from './textarea';
+
+describe('Textarea (Native Implementation)', () => {
+  it('renders correctly', () => {
+    render(<Textarea placeholder="Enter text" />);
+    expect(screen.getByPlaceholderText('Enter text')).toBeDefined();
+  });
+
+  it('handles onChangeText', () => {
+    const onChangeText = vi.fn();
+    render(<Textarea placeholder="Enter text" onChangeText={onChangeText} />);
+
+    const textarea = screen.getByPlaceholderText('Enter text');
+    fireEvent.change(textarea, { target: { value: 'Hello World' } });
+
+    expect(onChangeText).toHaveBeenCalledWith('Hello World');
+  });
+
+  it('has multiline enabled', () => {
+    const { container } = render(<Textarea placeholder="Enter text" />);
+    const textarea = container.querySelector('textarea');
+    // In react-native-web, TextInput with multiline renders as a textarea
+    expect(textarea).toBeDefined();
+  });
+});

package/packages/ui-native/src/textarea.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { TextInput } from 'react-native';
+
+import { cn } from './lib/utils';
+
+export type TextareaProps = React.ComponentPropsWithoutRef<typeof TextInput>;
+
+const Textarea = React.forwardRef<React.ElementRef<typeof TextInput>, TextareaProps>(
+  ({ className, placeholderClassName, ...props }, ref) => {
+    return (
+      <TextInput
+        ref={ref}
+        multiline
+        numberOfLines={props.numberOfLines || 3}
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus:border-ring disabled:opacity-50',
+          className,
+        )}
+        placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
+        textAlignVertical="top"
+        {...props}
+      />
+    );
+  },
+);
+
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/packages/ui-native/src/theme-provider.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return <View style={{ flex: 1 }}>{children}</View>;
+}

package/packages/ui-native/src/theme-toggle.tsx

@@ -0,0 +1,11 @@
+import { Text, TouchableOpacity, View } from 'react-native';
+
+export function ThemeToggle() {
+  return (
+    <TouchableOpacity onPress={() => {}}>
+      <View style={{ padding: 10, backgroundColor: '#eee', borderRadius: 5 }}>
+        <Text>Toggle Theme</Text>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/packages/ui-native/src/toast.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Toast, ToastDescription, ToastTitle } from './toast';
+
+// Mock primitives
+/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any */
+vi.mock('@rn-primitives/toast', () => {
+  const React = require('react');
+  return {
+    Root: ({ children, className }: any) => React.createElement('div', { className }, children),
+    Title: ({ children, className }: any) => React.createElement('div', { className }, children),
+    Description: ({ children, className }: any) => React.createElement('div', { className }, children),
+    Close: ({ children, className }: any) => React.createElement('button', { className }, children),
+    Action: ({ children, className }: any) => React.createElement('button', { className }, children),
+  };
+});
+/* eslint-enable @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any */
+
+// Mock reanimated
+/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any */
+vi.mock('react-native-reanimated', () => {
+  const React = require('react');
+  return {
+    default: {
+      View: ({ children, ...props }: any) => React.createElement('div', props, children),
+    },
+    FadeInUp: {},
+    FadeOutDown: {},
+    Layout: {},
+  };
+});
+/* eslint-enable @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any */
+
+// Mock lucide
+vi.mock('lucide-react-native', () => ({
+  X: () => null,
+}));
+
+describe('Toast (Native Implementation)', () => {
+  it('renders correctly', () => {
+    render(
+      <Toast open={true} onOpenChange={() => {}}>
+        <ToastTitle>Toast Title</ToastTitle>
+        <ToastDescription>Toast Description</ToastDescription>
+      </Toast>,
+    );
+    expect(screen.getByText('Toast Title')).toBeDefined();
+    expect(screen.getByText('Toast Description')).toBeDefined();
+  });
+
+  it('applies variant classes', () => {
+    const { container } = render(
+      <Toast open={true} onOpenChange={() => {}} variant="destructive">
+        <ToastTitle>Error</ToastTitle>
+      </Toast>,
+    );
+    // In our mock, variant translates to classNames via cn()
+    // We expect bg-destructive for destructive variant
+    expect(container.firstChild).toBeDefined();
+  });
+});