react95-native-rabbl 0.1.1

package/src/components/SwitchBase/SwitchBase.tsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import {
+  StyleSheet,
+  TouchableHighlight,
+  ImageBackground,
+  View,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { buildBorderStyles } from '../../styles/styles';
+import { Border } from '../../styles/styleElements';
+import { Text, CheckmarkIcon } from '../..';
+
+const checkboxSize = 20;
+const radioSize = 20;
+
+export type SwitchStatus = 'checked' | 'unchecked' | 'indeterminate';
+
+export type SwitchProps = {
+  disabled?: boolean;
+  label?: string;
+  onPress?: () => void;
+  status: SwitchStatus;
+  style?: StyleProp<ViewStyle>;
+  variant?: 'default' | 'flat';
+  theme: Theme;
+};
+
+type Props = SwitchProps &
+  React.ComponentPropsWithRef<typeof TouchableHighlight> & {
+    component: 'radio' | 'checkbox';
+  };
+
+// TODO: see if ref is passed
+
+const SwitchBase = ({
+  component,
+  disabled = false,
+  label = '',
+  variant = 'default',
+  onPress = () => {},
+  status,
+  style = {},
+  theme,
+  ...rest
+}: Props) => {
+  const [isPressed, setIsPressed] = React.useState(false);
+  const isRadio = component === 'radio';
+  const switchSize = !isRadio ? checkboxSize : radioSize;
+  const boxSize = variant === 'flat' ? switchSize - 4 : switchSize;
+  const borderRadius = isRadio ? boxSize / 2 : 0;
+
+  const checked = status === 'checked';
+
+  const borders = buildBorderStyles(theme);
+  const renderCheckmark = () => {
+    if (checked) {
+      return isRadio ? (
+        <View
+          style={{
+            borderRadius: 6,
+            height: 6,
+            width: 6,
+            backgroundColor: disabled
+              ? theme.checkmarkDisabled
+              : theme.checkmark,
+          }}
+        />
+      ) : (
+        <CheckmarkIcon disabled={disabled} />
+      );
+    }
+    if (status === 'indeterminate') {
+      return (
+        <ImageBackground
+          style={[{ width: '100%', height: '100%' }]}
+          imageStyle={{
+            resizeMode: 'repeat',
+          }}
+          source={{
+            uri: {
+              default:
+                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NkYGD4z4AKGJG5IA4dFKA5AdVKFAdBVaK4iXIFAEiuCAWq9MdHAAAAAElFTkSuQmCC',
+              disabled:
+                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NsaW35z4AEaqprGJH5jHRQgGwfiI1uJYqDaKMAAHKtGjlbjgHwAAAAAElFTkSuQmCC',
+            }[disabled ? 'disabled' : 'default'],
+          }}
+        />
+      );
+    }
+
+    return <Text> </Text>;
+  };
+
+  const getBackgroundColor = () => {
+    if (variant === 'flat') {
+      return disabled ? theme.flatLight : theme.canvas;
+    }
+    return disabled ? theme.material : theme.canvas;
+  };
+
+  const getAccessibilityComponentType = () => {
+    if (isRadio) {
+      return checked ? 'radiobutton_checked' : 'radiobutton_unchecked';
+    }
+    return 'button';
+  };
+
+  return (
+    <TouchableHighlight
+      style={[styles.wrapper]}
+      onPress={onPress}
+      activeOpacity={1}
+      disabled={disabled}
+      onHideUnderlay={() => setIsPressed(false)}
+      onShowUnderlay={() => setIsPressed(true)}
+      // TODO: check if those accessibility properties are correct
+      accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
+      accessibilityComponentType={getAccessibilityComponentType()}
+      accessibilityRole={component}
+      accessibilityState={{ disabled, checked }}
+      accessibilityLiveRegion='polite'
+      underlayColor='none'
+      {...rest}
+    >
+      <View style={[styles.content, style]}>
+        <View
+          style={[
+            styles.switchSymbol,
+            {
+              width: boxSize,
+              height: boxSize,
+              backgroundColor: getBackgroundColor(),
+              borderRadius,
+              overflow: 'hidden',
+            },
+          ]}
+        >
+          {renderCheckmark()}
+          <Border
+            variant={variant === 'flat' ? 'flat' : 'cutout'}
+            radius={borderRadius}
+          />
+        </View>
+        {Boolean(label) && (
+          <View
+            style={[
+              styles.labelWrapper,
+              !disabled && isPressed
+                ? borders.focusOutline
+                : { borderWidth: 2, borderColor: 'transparent' },
+            ]}
+          >
+            <Text disabled={disabled} style={[styles.label]}>
+              {label}
+            </Text>
+          </View>
+        )}
+      </View>
+    </TouchableHighlight>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    width: 'auto',
+    alignSelf: 'flex-start',
+    padding: 4,
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: 'auto',
+  },
+  switchSymbol: {
+    marginRight: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  labelWrapper: {
+    paddingHorizontal: 4,
+  },
+  label: {
+    fontSize: 16,
+  },
+});
+
+const SwitchBaseWithTheme = withTheme(SwitchBase);
+export { SwitchBaseWithTheme as SwitchBase };

package/src/components/SwitchBase/index.ts

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

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,208 @@
+import React, { useState } from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+  TouchableHighlight,
+  View,
+} from 'react-native';
+
+import type { Theme, AnyValue } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import {
+  padding,
+  margin,
+  blockSizes,
+  buildBorderStyles,
+} from '../../styles/styles';
+import { Border } from '../../styles/styleElements';
+import { Text, Panel } from '../..';
+
+type TabsProps = {
+  children?: React.ReactNode;
+  onChange?: (value: AnyValue) => void;
+  stretch?: boolean;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  value: AnyValue;
+};
+
+const Tabs = ({
+  children,
+  onChange,
+  stretch = false,
+  style,
+  theme,
+  value,
+  ...rest
+}: TabsProps) => {
+  const childrenWithProps = React.Children.map(children, child => {
+    if (!React.isValidElement(child)) {
+      return null;
+    }
+    const tabProps = {
+      selected: child.props.value === value,
+      onPress: onChange,
+      stretch,
+    };
+    return React.cloneElement(child, tabProps);
+  });
+
+  return (
+    <View accessibilityRole='tablist' style={[styles.tabs, style]} {...rest}>
+      {childrenWithProps}
+      <View
+        style={[
+          styles.tabBodyBorder,
+          {
+            backgroundColor: theme.borderLight,
+            borderTopColor: theme.borderLightest,
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+type TabBodyProps = {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+};
+
+const Body = ({ children, style, ...rest }: TabBodyProps) => {
+  return (
+    <Panel style={[styles.body, style]} {...rest}>
+      {children}
+    </Panel>
+  );
+};
+
+type TabProps = {
+  children?: React.ReactNode;
+  onPress?: (value: AnyValue) => void;
+  selected?: boolean;
+  stretch?: boolean;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  value: AnyValue;
+};
+
+const Tab = ({
+  children,
+  onPress = () => {},
+  selected,
+  stretch,
+  style,
+  theme,
+  value,
+  ...rest
+}: TabProps) => {
+  const [isPressed, setIsPressed] = useState(false);
+
+  const borderStyles = buildBorderStyles(theme);
+
+  return (
+    <TouchableHighlight
+      onPress={() => onPress(value)}
+      onHideUnderlay={() => setIsPressed(false)}
+      onShowUnderlay={() => setIsPressed(true)}
+      underlayColor='none'
+      style={[
+        styles.tab,
+        { zIndex: selected ? 1 : 0 },
+        stretch ? { flexGrow: 1 } : { width: 'auto' },
+        selected ? margin(0, -8) : margin(0, 0),
+        style,
+      ]}
+      accessibilityTraits={selected ? ['button', 'selected'] : 'button'}
+      accessibilityComponentType='button'
+      accessibilityRole='tab'
+      accessibilityState={{
+        selected,
+      }}
+      {...rest}
+    >
+      <View
+        style={[
+          styles.tabContent,
+          {
+            height: selected ? blockSizes.md + 4 : blockSizes.md,
+          },
+          selected ? padding(0, 16) : padding(0, 10),
+        ]}
+      >
+        <Border
+          radius={6}
+          style={[
+            {
+              backgroundColor: theme.material,
+            },
+          ]}
+          sharedStyle={{
+            borderBottomWidth: 0,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+          }}
+        />
+        <Text>{children}</Text>
+        <View style={[styles.mask, { backgroundColor: theme.material }]} />
+        {isPressed && (
+          <View style={[styles.focusOutline, borderStyles.focusOutline]} />
+        )}
+      </View>
+    </TouchableHighlight>
+  );
+};
+
+const styles = StyleSheet.create({
+  tabs: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingHorizontal: 8,
+    zIndex: 1,
+    bottom: -2,
+  },
+  body: {
+    display: 'flex',
+    padding: 16,
+  },
+  tab: {
+    alignSelf: 'flex-end',
+  },
+  tabContent: {
+    justifyContent: 'center',
+    width: 'auto',
+  },
+  tabBodyBorder: {
+    height: 4,
+    position: 'absolute',
+    left: 4,
+    right: 4,
+    bottom: -2,
+    borderTopWidth: 2,
+  },
+  mask: {
+    height: 4,
+    position: 'absolute',
+    left: 4,
+    right: 4,
+    bottom: -2,
+  },
+  focusOutline: {
+    position: 'absolute',
+    left: 6,
+    top: 6,
+    bottom: 4,
+    right: 6,
+  },
+});
+const TabWithTheme = withTheme(Tab);
+const BodyWithTheme = withTheme(Body);
+
+Tabs.Tab = TabWithTheme;
+Tabs.Body = BodyWithTheme;
+
+export default withTheme(Tabs);

package/src/components/Tabs/index.ts

@@ -0,0 +1 @@
+export { default } from './Tabs';

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  View,
+  StyleProp,
+  StyleSheet,
+  TextInput as NativeTextInput,
+  ViewStyle,
+} from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { blockSizes, builtTextStyles } from '../../styles/styles';
+import { Border } from '../../styles/styleElements';
+
+type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
+  defaultValue?: string;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  value?: string;
+  variant?: 'default' | 'flat';
+};
+
+// TODO: implement scrollbars in TextInput
+
+const TextInput = ({
+  defaultValue,
+  disabled,
+  style = {},
+  theme,
+  value,
+  variant = 'default',
+  ...rest
+}: Props) => {
+  const hasValue = !!(value || defaultValue);
+
+  const isFlat = variant === 'flat';
+
+  const getBackgroundColor = () => {
+    if (isFlat) {
+      return disabled ? theme.flatLight : 'transparent';
+    }
+    return disabled ? theme.material : theme.canvas;
+  };
+
+  const textStyles = builtTextStyles(theme);
+  return (
+    <View style={[styles.wrapper, { padding: isFlat ? 2 : 4 }, style]}>
+      <Border theme={theme} variant={isFlat ? 'flat' : 'cutout'} />
+      <NativeTextInput
+        style={[
+          styles.input,
+          {
+            backgroundColor: getBackgroundColor(),
+          },
+          textStyles.regular,
+          disabled && hasValue ? textStyles.disabled : textStyles.default,
+        ]}
+        placeholderTextColor={theme.materialTextDisabled}
+        defaultValue={defaultValue}
+        value={value}
+        editable={!disabled}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...rest}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    minHeight: blockSizes.md,
+    justifyContent: 'center',
+  },
+  input: {
+    flex: 1,
+    paddingHorizontal: 4,
+  },
+});
+
+export default withTheme(TextInput);

package/src/components/TextInput/index.ts

@@ -0,0 +1 @@
+export { default } from './TextInput';

package/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  ScrollView as RNScrollView,
+  ViewStyle,
+  StyleProp,
+} from 'react-native';
+import type {
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+} from 'react-native';
+
+import { ChevronIcon } from '../..';
+
+const chevronIconSize = 20;
+
+type ScrollViewProps = React.ComponentProps<typeof View> & {
+  children: React.ReactNode;
+  scrollViewProps?: React.ComponentProps<typeof RNScrollView>;
+  style?: StyleProp<ViewStyle>;
+};
+
+// TODO: performance improvements (callbacks, refs ...etc)
+const ScrollView = ({
+  children,
+  scrollViewProps = {},
+  style,
+  ...rest
+}: ScrollViewProps) => {
+  const [contentOffset, setContentOffset] = React.useState(0);
+  const [contentSize, setContentSize] = React.useState(0);
+  const [scrollViewSize, setScrollViewSize] = React.useState(0);
+
+  // TODO: that's a naive approach. if it causes problems
+  // trigger a callback when last child becomes fully visible
+  const lastElementVisible =
+    contentOffset + scrollViewSize < contentSize - chevronIconSize;
+
+  const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    scrollViewProps.onScroll?.(e);
+    setContentOffset(e.nativeEvent.contentOffset.x);
+  };
+
+  const handleContentSizeChange = (width: number, height: number) => {
+    scrollViewProps.onContentSizeChange?.(width, height);
+    setContentSize(width);
+  };
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    scrollViewProps.onLayout?.(e);
+    setScrollViewSize(e.nativeEvent.layout.width);
+  };
+
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        {
+          flexDirection: 'row',
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      <View style={[styles.content]}>
+        <RNScrollView
+          {...scrollViewProps}
+          showsHorizontalScrollIndicator={false}
+          scrollEventThrottle={100}
+          onScroll={handleScroll}
+          onContentSizeChange={handleContentSizeChange}
+          onLayout={handleLayout}
+          horizontal
+        >
+          {children}
+        </RNScrollView>
+      </View>
+      <View style={styles.chevronIcon}>
+        {lastElementVisible && (
+          <>
+            <ChevronIcon
+              segments={3}
+              direction='right'
+              style={{ marginRight: 1 }}
+            />
+            <ChevronIcon segments={3} direction='right' />
+          </>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    display: 'flex',
+    position: 'relative',
+  },
+  content: {
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  chevronIcon: {
+    justifyContent: 'center',
+    flexDirection: 'row',
+    alignSelf: 'flex-start',
+    width: chevronIconSize,
+  },
+});
+
+export default ScrollView;

package/src/components/Toolbar/index.ts

@@ -0,0 +1 @@
+export { default } from './Toolbar';

package/src/components/Typography/Anchor.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { Text } from '../..';
+
+// TODO: separate Anchor props from React95 Text component
+
+type Props = React.ComponentProps<typeof Text> & {
+  theme: Theme;
+  underline?: boolean;
+};
+
+const Anchor = ({
+  children,
+  style,
+  theme,
+  underline = false,
+  ...rest
+}: Props) => {
+  return (
+    <Text
+      style={[
+        {
+          color: theme.anchor,
+          textDecorationLine: underline ? 'underline' : 'none',
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export default withTheme(Anchor);

package/src/components/Typography/Text.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { Text } from '../..';
+
+const mockOpenUrl = jest.fn(url => Promise.resolve(url));
+
+describe('<Text />', () => {
+  beforeEach(() => {
+    mockOpenUrl.mockClear();
+
+    jest.doMock('react-native/Libraries/Linking/Linking', () => ({
+      openURL: mockOpenUrl,
+    }));
+  });
+
+  it('should render children', () => {
+    const { getByText } = render(<Text>Potato</Text>);
+
+    expect(getByText('Potato')).toBeTruthy();
+  });
+
+  it('should render custom styles', () => {
+    const style = { color: 'papayawhip' };
+
+    const { getByText } = render(<Text style={style}>Potato</Text>);
+
+    expect(getByText('Potato')).toHaveStyle(style);
+  });
+});