@expo/html-elements 0.12.2 → 0.12.4

package/src/elements/Layout.tsx

@@ -0,0 +1,72 @@
+import React, { ComponentType } from 'react';
+import { Platform } from 'react-native';
+
+import View, { ViewProps } from '../primitives/View';
+
+function createView(nativeProps: ViewProps = {}): ComponentType<ViewProps> {
+  return function Dom(props: ViewProps) {
+    return <View {...nativeProps} {...props} />;
+  };
+}
+
+export const Div = createView();
+
+export const Nav = createView(
+  Platform.select({
+    web: {
+      role: 'navigation',
+    },
+  })
+);
+export const Footer = createView(
+  Platform.select({
+    web: {
+      role: 'contentinfo',
+    },
+  })
+);
+export const Aside = createView(
+  Platform.select({
+    web: {
+      role: 'complementary',
+    },
+  })
+);
+export const Header = createView(
+  Platform.select({
+    web: {
+      role: 'banner',
+    },
+    default: {
+      accessibilityRole: 'header',
+    },
+  })
+);
+export const Main = createView(
+  Platform.select({
+    web: {
+      role: 'main',
+    },
+  })
+);
+export const Article = createView(
+  Platform.select({
+    web: {
+      role: 'article',
+    },
+  })
+);
+export const Section = createView({
+  role: 'summary', // region?
+});
+
+if (__DEV__) {
+  Div.displayName = 'Div';
+  Nav.displayName = 'Nav';
+  Footer.displayName = 'Footer';
+  Aside.displayName = 'Aside';
+  Header.displayName = 'Header';
+  Main.displayName = 'Main';
+  Article.displayName = 'Article';
+  Section.displayName = 'Section';
+}

package/src/elements/Lists.tsx

@@ -0,0 +1,45 @@
+import React, { ComponentType, PropsWithChildren } from 'react';
+import { Platform } from 'react-native';
+
+import Text, { TextProps } from '../primitives/Text';
+import View, { ViewProps } from '../primitives/View';
+
+function createView(nativeProps: ViewProps = {}): ComponentType<ViewProps> {
+  return function Dom(props: ViewProps) {
+    return <View {...nativeProps} {...props} />;
+  };
+}
+
+export const UL = createView(
+  Platform.select({
+    web: {
+      role: 'list',
+    },
+  })
+);
+
+if (__DEV__) {
+  UL.displayName = 'UL';
+}
+
+function isTextProps(props: any): props is TextProps {
+  // Treat <li></li> as a Text element.
+  return typeof props.children === 'string';
+}
+
+type LIProps = TextProps | ViewProps;
+
+export function LI(props: PropsWithChildren<LIProps>) {
+  if (isTextProps(props)) {
+    const role: LIProps['role'] = Platform.select({
+      web: 'listitem',
+      default: props.role,
+    });
+    return <Text {...props} role={role} />;
+  }
+  const role: LIProps['role'] = Platform.select({
+    web: 'listitem',
+    default: props.role,
+  });
+  return <View {...props} role={role} />;
+}

package/src/elements/Rules.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import View, { ViewProps } from '../primitives/View';
+
+export function HR(props: ViewProps) {
+  return <View {...props} style={[styles.hr, props.style]} />;
+}
+
+const styles = StyleSheet.create({
+  hr: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#9A9A9A',
+    borderBottomColor: '#EEEEEE',
+    marginVertical: 8,
+  },
+});

package/src/elements/Rules.web.tsx

@@ -0,0 +1,7 @@
+import createElement from 'react-native-web/dist/exports/createElement';
+
+import { ViewProps } from '../primitives/View';
+
+export function HR(props: ViewProps) {
+  return createElement('hr', props);
+}

package/src/elements/Table.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import { em } from '../css/units';
+import { TableText, TableTextProps } from '../primitives/Table';
+import Text, { TextProps } from '../primitives/Text';
+import View, { ViewProps } from '../primitives/View';
+
+export function Table(props: ViewProps) {
+  return <View {...props} />;
+}
+
+export function THead(props: ViewProps) {
+  return <View {...props} />;
+}
+
+export function TBody(props: ViewProps) {
+  return <View {...props} />;
+}
+
+export function TFoot(props: ViewProps) {
+  return <View {...props} />;
+}
+
+export function TH(props: TableTextProps) {
+  return <TableText {...props} style={[styles.th, props.style]} />;
+}
+
+export function TR(props: ViewProps) {
+  return <View {...props} style={[styles.tr, props.style]} />;
+}
+
+export function TD(props: TableTextProps) {
+  return <TableText {...props} style={[styles.td, props.style]} />;
+}
+
+export function Caption(props: TextProps) {
+  return <Text {...props} style={[styles.caption, props.style]} />;
+}
+
+const styles = StyleSheet.create({
+  caption: {
+    textAlign: 'center',
+    fontSize: em(1) as number,
+  },
+  th: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    flex: 1,
+    fontSize: em(1) as number,
+  },
+  tr: {
+    flexDirection: 'row',
+  },
+  td: {
+    flex: 1,
+    fontSize: em(1) as number,
+  },
+});

package/src/elements/Table.web.tsx

@@ -0,0 +1,38 @@
+import React, { ComponentType } from 'react';
+
+import View from '../primitives/RNWView';
+import { ViewProps } from '../primitives/View';
+
+function createView(nativeProps: ViewProps & { __element: string }): ComponentType<ViewProps> {
+  return function Dom(props: ViewProps) {
+    // @ts-expect-error - View and ViewProps have no properties in common
+    return <View {...nativeProps} {...props} />;
+  };
+}
+
+export const Table = createView({ __element: 'table' });
+
+export const THead = createView({ __element: 'thead' });
+
+export const TBody = createView({ __element: 'tbody' });
+
+export const TFoot = createView({ __element: 'tfoot' });
+
+export const TH = createView({ __element: 'th' });
+
+export const TR = createView({ __element: 'tr' });
+
+export const TD = createView({ __element: 'td' });
+
+export const Caption = createView({ __element: 'caption' });
+
+if (__DEV__) {
+  Table.displayName = 'Table';
+  THead.displayName = 'THead';
+  TBody.displayName = 'TBody';
+  TFoot.displayName = 'TFoot';
+  TH.displayName = 'TH';
+  TR.displayName = 'TR';
+  TD.displayName = 'TD';
+  Caption.displayName = 'Caption';
+}

package/src/elements/Text.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { StyleSheet, Platform } from 'react-native';
+
+import { BlockQuoteProps, QuoteProps, TimeProps } from './Text.types';
+import { em } from '../css/units';
+import Text, { TextProps } from '../primitives/Text';
+import View, { ViewProps } from '../primitives/View';
+
+export function P({ style, ...props }: TextProps) {
+  return <Text {...props} style={[styles.p, style]} />;
+}
+
+export function B({ style, ...props }: TextProps) {
+  return <Text {...props} style={[styles.b, style]} />;
+}
+
+export function S({ style, ...props }: TextProps) {
+  return <Text {...props} style={[styles.s, style]} />;
+}
+
+export function I({ style, ...props }: TextProps) {
+  return <Text {...props} style={[styles.i, style]} />;
+}
+
+export function Q({ children, cite, style, ...props }: QuoteProps) {
+  return (
+    <Text {...props} style={[styles.q, style]}>
+      "{children}"
+    </Text>
+  );
+}
+
+export function BlockQuote({ style, cite, ...props }: BlockQuoteProps) {
+  return <View {...props} style={[styles.blockQuote, style]} />;
+}
+
+export function BR({ style, ...props }: TextProps) {
+  return <Text {...props} style={[styles.br, style]} />;
+}
+
+export function Mark({ style, ...props }: TextProps) {
+  return <Text {...props} style={[styles.mark, style]} />;
+}
+
+export function Code({ style, ...props }: TextProps) {
+  return <Text {...props} style={[styles.code, style]} />;
+}
+
+function isTextProps(props: any): props is TextProps {
+  return typeof props.children === 'string';
+}
+
+type PreProps = TextProps | ViewProps;
+
+export function Pre(props: PreProps) {
+  if (isTextProps(props)) {
+    return <Text {...props} style={[styles.code, styles.pre, props.style]} />;
+  }
+  return <View {...props} style={[styles.pre, props.style]} />;
+}
+
+// Extract dateTime to prevent passing it to the native Text element
+export function Time({ dateTime, ...props }: TimeProps) {
+  return <Text {...props} />;
+}
+
+export const Strong = B;
+export const Del = S;
+export const EM = I;
+export const Span = Text;
+
+const styles = StyleSheet.create({
+  p: {
+    // @ts-ignore
+    marginVertical: em(1),
+  },
+  b: {
+    fontWeight: 'bold',
+  },
+  q: {
+    fontStyle: 'italic',
+  },
+  code: {
+    fontFamily: Platform.select({ default: 'Courier', ios: 'Courier New', android: 'monospace' }),
+    fontWeight: '500',
+  },
+  pre: {
+    // @ts-ignore
+    marginVertical: em(1),
+  },
+  blockQuote: {
+    // @ts-ignore
+    marginVertical: em(1),
+  },
+  br: {
+    width: 0,
+    // @ts-ignore
+    height: em(0.5),
+  },
+  s: {
+    textDecorationLine: 'line-through',
+    textDecorationStyle: 'solid',
+  },
+  mark: {
+    backgroundColor: 'yellow',
+    color: 'black',
+  },
+  i: {
+    fontStyle: 'italic',
+  },
+});

package/src/elements/Text.types.ts

@@ -0,0 +1,21 @@
+import { TextProps } from '../primitives/Text';
+import { ViewProps } from '../primitives/View';
+
+export type QuoteProps = React.PropsWithChildren<TextProps & { cite?: string }>;
+
+export type BlockQuoteProps = React.PropsWithChildren<ViewProps & { cite?: string }>;
+
+export type TimeProps = React.PropsWithChildren<TextProps & { dateTime?: string }>;
+
+export type LinkProps = React.PropsWithChildren<
+  TextProps & {
+    /** @platform web */
+    href?: string;
+    /** @platform web */
+    target?: string;
+    /** @platform web */
+    rel?: string;
+    /** @platform web */
+    download?: boolean | string;
+  }
+>;

package/src/elements/__tests__/Anchor.test.ios.tsx

@@ -0,0 +1,10 @@
+import 'react-native';
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+
+import { A } from '../Anchor';
+
+it('renders A', () => {
+  const { toJSON } = render(<A href="#" target="_parent" />);
+  expect(toJSON()).toMatchSnapshot();
+});

package/src/elements/__tests__/Anchor.test.web.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+import * as React from 'react';
+
+import { A } from '../Anchor';
+
+it('renders A', () => {
+  render(<A href="#" target="_parent" />);
+
+  const anchor = screen.getByRole('link');
+  expect(anchor).toBeDefined();
+});

package/src/elements/__tests__/Headings.test.ios.tsx

@@ -0,0 +1,13 @@
+import 'react-native';
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+
+import * as Headings from '../Headings';
+
+const headingComponentNames = Object.keys(Headings);
+
+it.each(headingComponentNames)('renders %s', (name) => {
+  const Heading = Headings[name];
+  const { toJSON } = render(<Heading />);
+  expect(toJSON()).toMatchSnapshot();
+});

package/src/elements/__tests__/Layout.test.ios.tsx

@@ -0,0 +1,40 @@
+import 'react-native';
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+
+import { Article, Aside, Footer, Header, Main, Nav, Section } from '../Layout';
+
+it('renders Footer', () => {
+  const { toJSON } = render(<Footer />);
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('renders Nav', () => {
+  const { toJSON } = render(<Nav />);
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('renders Aside', () => {
+  const { toJSON } = render(<Aside />);
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('renders Header', () => {
+  const { toJSON } = render(<Header />);
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('renders Main', () => {
+  const { toJSON } = render(<Main />);
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('renders Section', () => {
+  const { toJSON } = render(<Section />);
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('renders Article', () => {
+  const { toJSON } = render(<Article />);
+  expect(toJSON()).toMatchSnapshot();
+});

package/src/elements/__tests__/Layout.test.web.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import * as React from 'react';
+
+import { Article, Aside, Footer, Header, Main, Nav, Section } from '../Layout';
+
+it('renders Footer', () => {
+  render(<Footer />);
+
+  const footer = screen.getByRole('contentinfo');
+  expect(footer).toBeDefined();
+});
+
+it('renders Nav', () => {
+  render(<Nav />);
+
+  const nav = screen.getByRole('navigation');
+  expect(nav).toBeDefined();
+});
+
+it('renders Aside', () => {
+  render(<Aside />);
+
+  const aside = screen.getByRole('complementary');
+  expect(aside).toBeDefined();
+});
+
+it('renders Header', () => {
+  render(<Header />);
+
+  const header = screen.getByRole('banner');
+  expect(header).toBeDefined();
+});
+
+it('renders Main', () => {
+  render(<Main />);
+  const main = screen.getByRole('main');
+  expect(main).toBeDefined();
+});
+
+it('renders Section', () => {
+  render(<Section />);
+  const section = screen.getByRole('region');
+  expect(section).toBeDefined();
+});
+
+it('renders Article', () => {
+  render(<Article />);
+  const article = screen.getByRole('article');
+  expect(article).toBeDefined();
+});

package/src/elements/__tests__/Lists.test.native.tsx

@@ -0,0 +1,17 @@
+import 'react-native';
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+
+import { LI, UL } from '../Lists';
+
+it('renders UL nested in LI', () => {
+  const { toJSON } = render(
+    <LI>
+      <LI>item</LI>
+      <UL>
+        <LI>item</LI>
+      </UL>
+    </LI>
+  );
+  expect(toJSON()).toMatchSnapshot();
+});

package/src/elements/__tests__/Lists.test.web.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import * as React from 'react';
+
+import { LI, UL } from '../Lists';
+
+it('renders UL nested in UL', () => {
+  render(
+    <UL testID="ul">
+      <LI>item</LI>
+      <UL>
+        <LI>item</LI>
+      </UL>
+    </UL>
+  );
+
+  const ul = screen.getByTestId('ul');
+  expect(ul).toBeDefined();
+});
+
+it('renders a single UL with multiple LI children', () => {
+  render(
+    <UL>
+      <LI>item 1</LI>
+      <LI>item 2</LI>
+      <LI>item 3</LI>
+    </UL>
+  );
+
+  const listItems = screen.getAllByRole('listitem');
+  expect(listItems[0]).toHaveTextContent(/item 1/);
+  expect(listItems[1]).toHaveTextContent(/item 2/);
+  expect(listItems[2]).toHaveTextContent(/item 3/);
+  expect(listItems[2]).toHaveTextContent('item 3');
+});
+
+it('renders an empty UL without crashing', () => {
+  render(<UL />);
+  const ul = screen.getByRole('list');
+  expect(ul).toBeDefined();
+  expect(ul.children).toHaveLength(0);
+});

package/src/elements/__tests__/Rules.test.native.tsx

@@ -0,0 +1,10 @@
+import 'react-native';
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+
+import { HR } from '../Rules';
+
+it('renders HR', () => {
+  const { toJSON } = render(<HR />);
+  expect(toJSON()).toMatchSnapshot();
+});

package/src/elements/__tests__/Rules.test.web.tsx

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import * as React from 'react';
+
+import { HR } from '../Rules';
+
+it('renders HR', () => {
+  render(<HR />);
+});

package/src/elements/__tests__/Table.test.ios.tsx

@@ -0,0 +1,45 @@
+import 'react-native';
+import { render } from '@testing-library/react-native';
+import * as React from 'react';
+
+import { Table, THead, TBody, TFoot, TR, TH, TD, Caption } from '../Table';
+
+it('renders Table', () => {
+  const { toJSON } = render(<Table />);
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('renders THead', () => {
+  const { toJSON } = render(<THead />);
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('renders TBody', () => {
+  const { toJSON } = render(<TBody />);
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('renders TFoot', () => {
+  const { toJSON } = render(<TFoot />);
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('renders TH', () => {
+  const { toJSON } = render(<TH>Header</TH>);
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('renders TR', () => {
+  const { toJSON } = render(<TR />);
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('renders TD', () => {
+  const { toJSON } = render(<TD>Column</TD>);
+  expect(toJSON()).toMatchSnapshot();
+});
+
+it('renders Caption', () => {
+  const { toJSON } = render(<Caption>Caption</Caption>);
+  expect(toJSON()).toMatchSnapshot();
+});

package/src/elements/__tests__/Table.test.web.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import * as React from 'react';
+
+import { Table, THead, TBody, TFoot, TR, TH, TD, Caption } from '../Table';
+
+const originalConsoleError = console.error;
+beforeEach(() => {
+  // Suppress console.error messages
+  console.error = jest.fn(originalConsoleError);
+});
+afterAll(() => {
+  // Restore console.error messages
+  console.error = originalConsoleError;
+});
+
+it('renders Table', () => {
+  render(<Table />);
+  const table = screen.getByRole('table');
+  expect(table).toBeDefined();
+  // Ensure no console errors
+  expect(console.error).not.toHaveBeenCalled();
+});
+
+it('renders complex table', () => {
+  render(
+    <Table>
+      <Caption>Caption</Caption>
+      <THead>
+        <TR>
+          <TH>Header</TH>
+        </TR>
+      </THead>
+      <TBody>
+        <TR>
+          <TD>Row</TD>
+        </TR>
+      </TBody>
+      <TFoot>
+        <TR>
+          <TD>Footer</TD>
+        </TR>
+      </TFoot>
+    </Table>
+  );
+  const th = screen.getByRole('columnheader');
+  expect(th).toBeDefined();
+  // Ensure no console errors
+  expect(console.error).not.toHaveBeenCalled();
+});