@aws-amplify/ui-react-native 1.0.0 → 1.1.0

package/src/primitives/RadioGroup/index.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup';
+export { RadioGroupProps, RadioGroupStyles } from './types';

package/src/primitives/RadioGroup/styles.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+
+import { StrictTheme } from '../../theme';
+import { RadioGroupStyles } from './types';
+
+export const getThemedStyles = (theme: StrictTheme): RadioGroupStyles => {
+  const { components } = theme;
+
+  return StyleSheet.create({
+    container: {
+      ...components?.radioGroup?.container,
+    },
+    label: {
+      /**
+       * The RadioGroup label inherits its styles from the Label primitive,
+       * and also supports customization via a Theme.
+       */
+      ...components?.radioGroup?.label,
+    },
+  });
+};

package/src/primitives/RadioGroup/types.ts

@@ -0,0 +1,27 @@
+import { TextStyle, ViewProps, ViewStyle } from 'react-native';
+import { RadioProps } from '../Radio';
+
+export type Direction = 'vertical' | 'horizontal';
+
+export interface RadioGroupProps<T>
+  extends Pick<
+      RadioProps<T>,
+      | 'accessibilityRole'
+      | 'disabled'
+      | 'label'
+      | 'labelPosition'
+      | 'labelStyle'
+      | 'onChange'
+      | 'size'
+    >,
+    ViewProps {
+  children: React.ReactElement<RadioProps<T>>[];
+  direction?: Direction;
+  initialValue?: T;
+  onValueChange?: (value?: T) => void;
+}
+
+export interface RadioGroupStyles {
+  container?: ViewStyle;
+  label?: TextStyle;
+}

package/src/primitives/Tabs/Tab.tsx

@@ -0,0 +1,49 @@
+import React, { useCallback } from 'react';
+import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';
+
+import { useTheme } from '../../theme';
+import { Button } from '../Button';
+import { getThemedStyles } from './styles';
+import { TabProps } from './types';
+
+export default function Tab({
+  children,
+  selected,
+  style,
+  textStyle,
+  indicatorPosition,
+  ...rest
+}: TabProps): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme, indicatorPosition);
+
+  const selectedStyles = selected ? themedStyle.selected : null;
+
+  const containerStyle = useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
+      const readonlyStyle = selected ? themedStyle.readonly : null;
+      const pressedStateStyle =
+        (typeof style === 'function' ? style({ pressed }) : style) ?? null;
+
+      // include `pressedStateStyle` last to override other styles
+      return [
+        themedStyle.tab,
+        readonlyStyle,
+        selectedStyles,
+        pressedStateStyle,
+      ];
+    },
+    [selected, selectedStyles, style, themedStyle]
+  );
+
+  return (
+    <Button
+      {...rest}
+      accessibilityRole="tab"
+      style={containerStyle}
+      textStyle={[themedStyle.tabText, textStyle, selectedStyles]}
+    >
+      {children}
+    </Button>
+  );
+}

package/src/primitives/Tabs/Tabs.tsx

@@ -0,0 +1,43 @@
+import React, { Children, cloneElement, isValidElement } from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
+import { TabProps, TabsProps } from './types';
+
+export default function Tabs({
+  children,
+  indicatorPosition = 'bottom',
+  onChange,
+  selectedIndex = 0,
+  style,
+  ...rest
+}: TabsProps): JSX.Element {
+  const theme = useTheme();
+  const themedStyle = getThemedStyles(theme, indicatorPosition);
+
+  const handleOnChange = (nextIndex: number) => {
+    onChange?.(nextIndex);
+  };
+
+  return (
+    <View
+      {...rest}
+      accessibilityRole="tablist"
+      style={[themedStyle.tabList, style]}
+    >
+      {Children.map(children, (child, index) => {
+        if (isValidElement<TabProps>(child)) {
+          return cloneElement<TabProps>(child, {
+            onPress: (event) => {
+              child.props.onPress?.(event);
+              handleOnChange(index);
+            },
+            indicatorPosition,
+            selected: index === selectedIndex,
+          });
+        }
+      })}
+    </View>
+  );
+}

package/src/primitives/Tabs/__tests__/Tab.spec.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { StyleSheet, Text, ViewStyle } from 'react-native';
+import { render, renderHook } from '@testing-library/react-native';
+
+import { useTheme } from '../../../theme';
+import { Tab } from '..';
+import { getThemedStyles } from '../styles';
+
+const customStyles = StyleSheet.create({
+  tabStyle: {
+    backgroundColor: 'lavender',
+    borderTopColor: 'rebeccapurple',
+  },
+});
+
+describe('Tab', () => {
+  it('renders default Tab as expected', () => {
+    const { toJSON } = render(<Tab>Default Tab</Tab>);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders as expected with a component passed as children', () => {
+    const { toJSON } = render(
+      <Tab>
+        <Text>Text component</Text>
+      </Tab>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders as expected when Tab is selected', () => {
+    const { getByRole, toJSON } = render(<Tab selected>Selected Tab</Tab>);
+
+    expect(toJSON()).toMatchSnapshot();
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const tab = getByRole('tab');
+    // select second index as `Button` applies its own style first
+    expect((tab.props.style as ViewStyle[])[4]).toStrictEqual([
+      themedStyle.tab,
+      themedStyle.readonly,
+      themedStyle.selected,
+      null,
+    ]);
+  });
+
+  it('can apply custom styling', () => {
+    const { getByRole, toJSON } = render(
+      <Tab style={customStyles.tabStyle}>Styled Tab</Tab>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const tab = getByRole('tab');
+    // select second index as `Button` applies its own style first
+    expect((tab.props.style as ViewStyle[])[4]).toStrictEqual([
+      themedStyle.tab,
+      null,
+      null,
+      customStyles.tabStyle,
+    ]);
+  });
+});

package/src/primitives/Tabs/__tests__/Tabs.spec.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { fireEvent, render, renderHook } from '@testing-library/react-native';
+
+import { useTheme } from '../../../theme';
+import { Tab, Tabs } from '..';
+import { getThemedStyles } from '../styles';
+
+const onChangeMock = jest.fn();
+
+const ControlledTabs = ({
+  onChangeCallback,
+  selectedIndex,
+}: {
+  onChangeCallback?: jest.Mock<any, any>;
+  selectedIndex?: number;
+}) => {
+  const [index, setIndex] = useState(selectedIndex);
+  const onChangeHandler = (nextIndex: number) => {
+    setIndex(nextIndex);
+    onChangeCallback?.(nextIndex);
+  };
+
+  return (
+    <Tabs onChange={onChangeHandler} selectedIndex={index}>
+      <Tab>Sign In</Tab>
+      <Tab>Create Account</Tab>
+      <Tab disabled>Disabled Tab</Tab>
+    </Tabs>
+  );
+};
+
+describe('Tabs', () => {
+  beforeEach(() => {
+    onChangeMock.mockClear();
+  });
+
+  it('can be used as a controlled component', () => {
+    const { queryAllByRole } = render(
+      <ControlledTabs onChangeCallback={onChangeMock} />
+    );
+
+    const tabs = queryAllByRole('tab');
+    fireEvent.press(tabs[1]);
+    expect(onChangeMock).toBeCalledWith(1);
+    fireEvent.press(tabs[0]);
+    expect(onChangeMock).toBeCalledWith(0);
+  });
+
+  it('does not allow disabled Tabs to be selected', () => {
+    const { queryAllByRole } = render(
+      <ControlledTabs onChangeCallback={onChangeMock} />
+    );
+
+    const tabs = queryAllByRole('tab');
+    fireEvent.press(tabs[2]);
+    expect(onChangeMock).not.toHaveBeenCalled();
+    expect(tabs[2].props.accessibilityState).toHaveProperty('disabled', true);
+  });
+
+  it('applies theme and custom styling', () => {
+    const customStyles = { backgroundColor: 'blue' };
+    const { getByRole, toJSON } = render(
+      <Tabs style={customStyles}>
+        <Tab>Sign In</Tab>
+        <Tab>Create Account</Tab>
+      </Tabs>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    const { result } = renderHook(() => useTheme());
+    const themedStyle = getThemedStyles(result.current);
+
+    const tablist = getByRole('tablist');
+
+    expect(tablist.props.style).toStrictEqual([
+      themedStyle.tabList,
+      customStyles,
+    ]);
+  });
+});

package/src/primitives/Tabs/__tests__/__snapshots__/Tab.spec.tsx.snap

@@ -0,0 +1,298 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tab can apply custom styling 1`] = `
+<View
+  accessibilityRole="tab"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderRadius": 4,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 12,
+      },
+      Object {
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderWidth": 1,
+      },
+      null,
+      null,
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderBottomColor": "hsl(210, 5%, 87%)",
+          "borderBottomWidth": 2,
+          "borderRadius": 0,
+          "borderWidth": 0,
+          "flexBasis": 0,
+          "flexGrow": 1,
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        null,
+        null,
+        Object {
+          "backgroundColor": "lavender",
+          "borderTopColor": "rebeccapurple",
+        },
+      ],
+    ]
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+          "fontSize": 16,
+          "fontWeight": "700",
+          "textAlign": "center",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+          },
+          undefined,
+          null,
+        ],
+      ]
+    }
+  >
+    Styled Tab
+  </Text>
+</View>
+`;
+
+exports[`Tab renders as expected when Tab is selected 1`] = `
+<View
+  accessibilityRole="tab"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderRadius": 4,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 12,
+      },
+      Object {
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderWidth": 1,
+      },
+      null,
+      null,
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderBottomColor": "hsl(210, 5%, 87%)",
+          "borderBottomWidth": 2,
+          "borderRadius": 0,
+          "borderWidth": 0,
+          "flexBasis": 0,
+          "flexGrow": 1,
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "opacity": 1,
+        },
+        Object {
+          "backgroundColor": "hsl(0, 0%, 100%)",
+          "borderBottomColor": "hsl(190, 95%, 30%)",
+          "color": "hsl(190, 95%, 30%)",
+        },
+        null,
+      ],
+    ]
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+          "fontSize": 16,
+          "fontWeight": "700",
+          "textAlign": "center",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+          },
+          undefined,
+          Object {
+            "backgroundColor": "hsl(0, 0%, 100%)",
+            "borderBottomColor": "hsl(190, 95%, 30%)",
+            "color": "hsl(190, 95%, 30%)",
+          },
+        ],
+      ]
+    }
+  >
+    Selected Tab
+  </Text>
+</View>
+`;
+
+exports[`Tab renders as expected with a component passed as children 1`] = `
+<View
+  accessibilityRole="tab"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderRadius": 4,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 12,
+      },
+      Object {
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderWidth": 1,
+      },
+      null,
+      null,
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderBottomColor": "hsl(210, 5%, 87%)",
+          "borderBottomWidth": 2,
+          "borderRadius": 0,
+          "borderWidth": 0,
+          "flexBasis": 0,
+          "flexGrow": 1,
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        null,
+        null,
+        null,
+      ],
+    ]
+  }
+>
+  <Text>
+    Text component
+  </Text>
+</View>
+`;
+
+exports[`Tab renders default Tab as expected 1`] = `
+<View
+  accessibilityRole="tab"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
+        "borderRadius": 4,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 12,
+      },
+      Object {
+        "borderColor": "hsl(210, 8%, 55%)",
+        "borderWidth": 1,
+      },
+      null,
+      null,
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderBottomColor": "hsl(210, 5%, 87%)",
+          "borderBottomWidth": 2,
+          "borderRadius": 0,
+          "borderWidth": 0,
+          "flexBasis": 0,
+          "flexGrow": 1,
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        null,
+        null,
+        null,
+      ],
+    ]
+  }
+>
+  <Text
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+          "fontSize": 16,
+          "fontWeight": "700",
+          "textAlign": "center",
+        },
+        Array [
+          Object {
+            "color": "hsl(210, 25%, 25%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+          },
+          undefined,
+          null,
+        ],
+      ]
+    }
+  >
+    Default Tab
+  </Text>
+</View>
+`;