@elvora/react-native 1.0.0-rc.1

package/src/Watermark.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+
+export interface WatermarkProps extends ViewProps {
+  content: string;
+  color?: string;
+  rotate?: number;
+  gapX?: number;
+  gapY?: number;
+  fontSize?: number;
+  children?: ReactNode;
+}
+
+/**
+ * Watermark — repeats text diagonally across the children. Implemented with a
+ * grid of `<Text>` nodes since RN doesn't expose CSS background patterns.
+ */
+export function Watermark(props: WatermarkProps) {
+  const {
+    content,
+    color = 'rgba(0,0,0,0.15)',
+    rotate = -22,
+    gapX = 140,
+    gapY = 100,
+    fontSize = 14,
+    children,
+    style,
+    ...rest
+  } = props;
+  const rows = 12;
+  const cols = 6;
+  return (
+    <View style={[{ position: 'relative', overflow: 'hidden' }, style]} {...rest}>
+      {children}
+      <View
+        pointerEvents="none"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          opacity: 0.7,
+        }}
+      >
+        {Array.from({ length: rows }).map((_, ri) => (
+          <View
+            key={ri}
+            style={{
+              flexDirection: 'row',
+              position: 'absolute',
+              top: ri * gapY,
+              left: 0,
+              right: 0,
+            }}
+          >
+            {Array.from({ length: cols }).map((__, ci) => (
+              <Text
+                key={ci}
+                style={{
+                  position: 'absolute',
+                  left: ci * gapX + (ri % 2 ? gapX / 2 : 0),
+                  color,
+                  fontSize,
+                  transform: [{ rotate: `${rotate}deg` }],
+                }}
+              >
+                {content}
+              </Text>
+            ))}
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}

package/src/index.ts

@@ -0,0 +1,221 @@
+export { ElvoraProvider, useTheme, useElvoraContext } from './ElvoraProvider';
+export type { ElvoraProviderProps } from './ElvoraProvider';
+
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+
+export { IconButton } from './IconButton';
+export type { IconButtonProps } from './IconButton';
+
+export { Input } from './Input';
+export type { InputProps } from './Input';
+
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';
+
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+
+export { Radio, RadioGroup } from './Radio';
+export type { RadioProps, RadioGroupProps } from './Radio';
+
+export { Switch } from './Switch';
+export type { SwitchProps } from './Switch';
+
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';
+
+export { Label } from './Label';
+export type { LabelProps } from './Label';
+
+export { Icon } from './Icon';
+export type { IconProps } from './Icon';
+
+export { Divider } from './Divider';
+export type { DividerProps } from './Divider';
+
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';
+
+export { Tag } from './Tag';
+export type { TagProps } from './Tag';
+
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
+
+export { Progress } from './Progress';
+export type { ProgressProps } from './Progress';
+
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
+
+// Phase 2 — Layout
+export { Box } from './Box';
+export type { BoxProps } from './Box';
+export { Stack, HStack, VStack } from './Stack';
+export type { StackProps } from './Stack';
+export { Grid, GridItem } from './Grid';
+export type { GridProps, GridItemProps } from './Grid';
+export { Container } from './Container';
+export type { ContainerProps } from './Container';
+export { Card, CardHeader, CardBody, CardFooter } from './Card';
+export type { CardProps } from './Card';
+
+// Phase 2 — Feedback
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';
+export { Empty } from './Empty';
+export type { EmptyProps } from './Empty';
+export { Result } from './Result';
+export type { ResultProps, ResultStatus } from './Result';
+
+// Phase 2 — Overlays
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';
+export { Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';
+export { Popover } from './Popover';
+export type { PopoverProps } from './Popover';
+export { ToastProvider, useToast } from './Toast';
+export type { ToastProviderProps, ToastApi, ToastOptions } from './Toast';
+
+// Phase 3 — Navigation
+export { Tabs } from './Tabs';
+export type { TabsProps, TabsTab } from './Tabs';
+export { Menu } from './Menu';
+export type { MenuProps, MenuItem } from './Menu';
+export { Dropdown } from './Dropdown';
+export type { DropdownProps, DropdownItem } from './Dropdown';
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';
+export { Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';
+export { Steps } from './Steps';
+export type { StepsProps, Step } from './Steps';
+export { Anchor } from './Anchor';
+export type { AnchorProps, AnchorLink } from './Anchor';
+export { BackTop } from './BackTop';
+export type { BackTopProps } from './BackTop';
+
+// Phase 4 — Data Entry
+export { Form, FormField, useFormField } from './Form';
+export type { FormProps, FormFieldProps } from './Form';
+export { NumberInput } from './NumberInput';
+export type { NumberInputProps } from './NumberInput';
+export { Segmented } from './Segmented';
+export type { SegmentedProps, SegmentedOption } from './Segmented';
+export { Slider } from './Slider';
+export type { SliderProps } from './Slider';
+export { Rate } from './Rate';
+export type { RateProps } from './Rate';
+export { Upload, makeUploadFile } from './Upload';
+export type { UploadProps, UploadFile } from './Upload';
+export { AutoComplete } from './AutoComplete';
+export type { AutoCompleteProps, AutoCompleteOption } from './AutoComplete';
+export { ColorPicker } from './ColorPicker';
+export type { ColorPickerProps } from './ColorPicker';
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps, DateValue } from './DatePicker';
+export { TimePicker } from './TimePicker';
+export type { TimePickerProps, TimeValue } from './TimePicker';
+export { DateRangePicker } from './DateRangePicker';
+export type { DateRangePickerProps, DateRange } from './DateRangePicker';
+export { Cascader } from './Cascader';
+export type { CascaderProps, CascaderOption } from './Cascader';
+export { TreeSelect } from './TreeSelect';
+export type { TreeSelectProps, TreeNode } from './TreeSelect';
+export { Mentions } from './Mentions';
+export type { MentionsProps, MentionItem } from './Mentions';
+export { Transfer } from './Transfer';
+export type { TransferProps, TransferItem } from './Transfer';
+
+// Phase 5 — Data Display
+export { Table } from './Table';
+export type { TableProps, TableColumn, SortOrder } from './Table';
+export { Tree } from './Tree';
+export type { TreeProps, TreeNode as TreeDataNode } from './Tree';
+export { List } from './List';
+export type { ListProps } from './List';
+export { Descriptions } from './Descriptions';
+export type { DescriptionsProps, DescriptionItem } from './Descriptions';
+export { Calendar } from './Calendar';
+export type { CalendarProps } from './Calendar';
+export { Statistic } from './Statistic';
+export type { StatisticProps } from './Statistic';
+export { Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel';
+export { Image } from './Image';
+export type { ImageProps } from './Image';
+export { Timeline } from './Timeline';
+export type { TimelineProps, TimelineItem, TimelineItemStatus } from './Timeline';
+export { Collapse } from './Collapse';
+export type { CollapseProps, CollapseItem } from './Collapse';
+export { Accordion } from './Accordion';
+export type { AccordionProps, AccordionItem } from './Accordion';
+export { Tour } from './Tour';
+export type { TourProps, TourStep } from './Tour';
+
+// Phase 6 — Advanced & MUI extras
+export { FloatButton } from './FloatButton';
+export type { FloatButtonProps } from './FloatButton';
+export { Watermark } from './Watermark';
+export type { WatermarkProps } from './Watermark';
+export { QRCode } from './QRCode';
+export type { QRCodeProps } from './QRCode';
+export { Splitter } from './Splitter';
+export type { SplitterProps } from './Splitter';
+export { Affix } from './Affix';
+export type { AffixProps } from './Affix';
+export { SpeedDial } from './SpeedDial';
+export type { SpeedDialProps, SpeedDialAction } from './SpeedDial';
+export { Backdrop } from './Backdrop';
+export type { BackdropProps } from './Backdrop';
+export { ImageList } from './ImageList';
+export type { ImageListProps, ImageListItem } from './ImageList';
+export { SimplePagination, MiniPagination } from './PaginationVariants';
+export type { SimplePaginationProps, MiniPaginationProps } from './PaginationVariants';
+export { Stepper } from './Stepper';
+export type { StepperProps, StepperStep } from './Stepper';
+export { ToggleButton } from './ToggleButton';
+export type { ToggleButtonProps } from './ToggleButton';
+export { ButtonGroup } from './ButtonGroup';
+export type {
+  ButtonGroupProps,
+  ButtonGroupOrientation,
+  ButtonGroupSelectionMode,
+} from './ButtonGroup';
+export { ChipInput } from './ChipInput';
+export type { ChipInputProps } from './ChipInput';
+
+// Phase 7 — Pro / DataGrid
+export { ProTable } from './ProTable';
+export type { ProTableProps, ProTableColumn, ProTableToolbar } from './ProTable';
+export { ProForm } from './ProForm';
+export type {
+  ProFormProps,
+  ProFormField,
+  ProFormFieldType,
+  ProFormSelectOption,
+} from './ProForm';
+export { ProLayout } from './ProLayout';
+export type { ProLayoutProps, ProLayoutMenuItem, ProLayoutUser } from './ProLayout';
+export { DataGrid } from './DataGrid';
+export type { DataGridProps, DataGridColumn, DataGridSortOrder } from './DataGrid';
+
+export type {
+  ElvoraTheme,
+  ThemeColors,
+  IntentScale,
+  ElvoraSize,
+  ElvoraVariant,
+  ElvoraStatus,
+  ElvoraTone,
+  Direction,
+  Placement,
+  Orientation,
+} from '@elvora/core';

package/src/smoke.test.tsx

@@ -0,0 +1,113 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { ElvoraProvider } from './ElvoraProvider';
+
+import { Input } from './Input';
+import { Textarea } from './Textarea';
+import { Checkbox } from './Checkbox';
+import { Switch } from './Switch';
+import { Badge } from './Badge';
+import { Tag } from './Tag';
+import { Spinner } from './Spinner';
+import { Progress } from './Progress';
+import { Alert } from './Alert';
+import { Card, CardBody, CardHeader } from './Card';
+import { Empty } from './Empty';
+import { Stack } from './Stack';
+import { Box } from './Box';
+import { Divider } from './Divider';
+import { Avatar } from './Avatar';
+
+function wrap(node: ReactNode) {
+  return render(<ElvoraProvider>{node}</ElvoraProvider>);
+}
+
+describe('RN smoke — primitives render under the stub', () => {
+  it('Input emits onChangeText', () => {
+    const onChangeText = vi.fn();
+    wrap(<Input value="" onChangeText={onChangeText} placeholder="search" />);
+    fireEvent.change(screen.getByPlaceholderText('search'), { target: { value: 'hi' } });
+    expect(onChangeText).toHaveBeenCalledWith('hi');
+  });
+
+  it('Textarea renders a multiline placeholder', () => {
+    wrap(<Textarea value="" placeholder="bio" />);
+    expect(screen.getByPlaceholderText('bio')).toBeInTheDocument();
+  });
+
+  it('Checkbox toggles on click', () => {
+    const onChange = vi.fn();
+    wrap(<Checkbox isChecked={false} onChange={onChange}>Accept</Checkbox>);
+    fireEvent.click(screen.getByRole('checkbox'));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it('Switch exposes role=switch', () => {
+    wrap(<Switch isChecked />);
+    expect(screen.getAllByRole('switch').length).toBeGreaterThan(0);
+  });
+
+  it('Badge renders its label', () => {
+    wrap(<Badge>3</Badge>);
+    expect(screen.getByText('3')).toBeInTheDocument();
+  });
+
+  it('Tag renders its label', () => {
+    wrap(<Tag>beta</Tag>);
+    expect(screen.getByText('beta')).toBeInTheDocument();
+  });
+
+  it('Spinner renders a progressbar', () => {
+    wrap(<Spinner />);
+    expect(screen.getAllByRole('progressbar').length).toBeGreaterThan(0);
+  });
+
+  it('Progress renders a progressbar', () => {
+    wrap(<Progress value={50} />);
+    expect(screen.getAllByRole('progressbar').length).toBeGreaterThan(0);
+  });
+
+  it('Alert renders title and description', () => {
+    wrap(<Alert status="info" title="FYI">Body</Alert>);
+    expect(screen.getByText('FYI')).toBeInTheDocument();
+    expect(screen.getByText('Body')).toBeInTheDocument();
+  });
+
+  it('Card composes header/body', () => {
+    wrap(
+      <Card>
+        <CardHeader>Title</CardHeader>
+        <CardBody>Body</CardBody>
+      </Card>,
+    );
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Body')).toBeInTheDocument();
+  });
+
+  it('Empty renders a default title', () => {
+    wrap(<Empty />);
+    expect(screen.getByText(/No data/i)).toBeInTheDocument();
+  });
+
+  it('Stack lays out children', () => {
+    wrap(
+      <Stack>
+        <Box><Badge>A</Badge></Box>
+        <Box><Badge>B</Badge></Box>
+      </Stack>,
+    );
+    expect(screen.getByText('A')).toBeInTheDocument();
+    expect(screen.getByText('B')).toBeInTheDocument();
+  });
+
+  it('Divider renders without crashing', () => {
+    const { container } = wrap(<Divider />);
+    expect(container.firstChild).not.toBeNull();
+  });
+
+  it('Avatar renders initials when no src is given', () => {
+    wrap(<Avatar name="Ada Lovelace" />);
+    expect(screen.getByText(/AL/i)).toBeInTheDocument();
+  });
+});