react95-native-rabbl 0.1.1

package/src/components/Icons/ArrowIcon.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { withTheme } from '../../core/theming';
+import type { Direction, Color, Theme } from '../../types';
+
+type Props = {
+  color?: Color;
+  direction?: Direction;
+  disabled?: boolean;
+  segments?: number;
+  shadowOffset?: number;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+};
+
+const pixelSize = 2;
+
+const ArrowIcon = ({
+  color,
+  direction = 'down',
+  disabled = false,
+  segments = 4,
+  shadowOffset,
+  style = {},
+  theme,
+  ...rest
+}: Props) => {
+  const segmentSizes = new Array(segments).fill(null).map((_, i) => 1 + i * 2);
+
+  if (['right', 'down'].includes(direction)) {
+    segmentSizes.reverse();
+  }
+  const isHorizontal = ['left', 'right'].includes(direction);
+
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        {
+          flexDirection: isHorizontal ? 'row' : 'column',
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      {segmentSizes.map((segmentSize, i) => (
+        <View
+          key={i}
+          style={[
+            styles.segment,
+            {
+              [isHorizontal ? 'height' : 'width']: pixelSize * segmentSize,
+              [isHorizontal ? 'width' : 'height']: pixelSize,
+              backgroundColor:
+                color ||
+                (disabled ? theme.materialTextDisabled : theme.materialText),
+              shadowColor: disabled
+                ? theme.materialTextDisabledShadow
+                : 'transparent',
+              shadowOffset: {
+                width: shadowOffset || pixelSize,
+                height: shadowOffset || pixelSize,
+              },
+              shadowOpacity: 1,
+              shadowRadius: 0,
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    alignItems: 'center',
+  },
+  segment: {
+    height: pixelSize,
+  },
+});
+
+export default withTheme(ArrowIcon);

package/src/components/Icons/CheckmarkIcon.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+type Props = {
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+};
+
+const pixelSize = 1.5;
+const segmentSize = 3 * pixelSize;
+
+const CheckmarkIcon = ({
+  disabled = false,
+  style = {},
+  theme,
+  ...rest
+}: Props) => {
+  const segmentOffsets = [2, 3, 4, 3, 2, 1, 0];
+
+  return (
+    <View style={[styles.wrapper, style]} {...rest}>
+      {segmentOffsets.map((offset, i) => (
+        <View
+          key={i}
+          style={[
+            styles.segment,
+            {
+              marginTop: offset * pixelSize,
+              backgroundColor: disabled
+                ? theme.checkmarkDisabled
+                : theme.checkmark,
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    flexDirection: 'row',
+  },
+  segment: {
+    width: pixelSize,
+    height: segmentSize,
+  },
+});
+
+export default withTheme(CheckmarkIcon);

package/src/components/Icons/ChevronIcon.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import { withTheme } from '../../core/theming';
+
+import type { Color, Direction, Theme } from '../../types';
+
+type Props = {
+  color?: Color;
+  direction?: Direction;
+  disabled?: boolean;
+  segments?: number;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+};
+
+const pixelSize = 2;
+
+const ChevronIcon = ({
+  color,
+  direction = 'down',
+  disabled = false,
+  segments = 5,
+  style = {},
+  theme,
+  ...rest
+}: Props) => {
+  const baseColor = color || theme.materialText;
+  let segmentSizes = new Array(segments).fill(null).map((_, i) => 1 + i * 2);
+
+  if (['right', 'down'].includes(direction)) {
+    segmentSizes = segmentSizes.reverse();
+  }
+  const isHorizontal = ['left', 'right'].includes(direction);
+
+  const SegmentPixel = () => (
+    <View
+      style={{
+        [isHorizontal ? 'width' : 'height']: pixelSize * 2,
+        [isHorizontal ? 'height' : 'width']: pixelSize,
+        backgroundColor: disabled ? theme.materialTextDisabled : baseColor,
+        shadowColor: disabled
+          ? theme.materialTextDisabledShadow
+          : 'transparent',
+        shadowOffset: {
+          width: pixelSize,
+          height: pixelSize,
+        },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+      }}
+    />
+  );
+
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        {
+          flexDirection: isHorizontal ? 'row' : 'column',
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      {segmentSizes.map((segmentSize, i) => (
+        <View
+          key={i}
+          style={[
+            {
+              [isHorizontal ? 'height' : 'width']: pixelSize * segmentSize,
+              [isHorizontal ? 'width' : 'height']: pixelSize,
+              flexDirection: isHorizontal ? 'column' : 'row',
+              justifyContent: 'space-between',
+            },
+          ]}
+        >
+          {segmentSize !== 1 && <SegmentPixel />}
+          <SegmentPixel />
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    alignItems: 'center',
+  },
+});
+
+export default withTheme(ChevronIcon);

package/src/components/Icons/CloseIcon.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+import { ChevronIcon } from '../..';
+
+type Props = {
+  disabled?: boolean;
+  segments?: number;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+};
+
+const CloseIcon = ({
+  disabled = false,
+  segments = 4,
+  style,
+  theme,
+  ...rest
+}: Props) => {
+  return (
+    <View style={[styles.wrapper, style]} {...rest}>
+      <ChevronIcon
+        theme={theme}
+        disabled={disabled}
+        segments={segments}
+        direction='right'
+      />
+      <ChevronIcon
+        theme={theme}
+        disabled={disabled}
+        segments={segments}
+        direction='left'
+        style={{ marginLeft: -2, marginRight: 2 }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+});
+
+export default withTheme(CloseIcon);

package/src/components/Icons/index.ts

@@ -0,0 +1,4 @@
+export { default as ArrowIcon } from './ArrowIcon';
+export { default as ChevronIcon } from './ChevronIcon';
+export { default as CheckmarkIcon } from './CheckmarkIcon';
+export { default as CloseIcon } from './CloseIcon';

package/src/components/Label/Label.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  Animated,
+  View,
+  ViewStyle,
+  TouchableWithoutFeedback,
+} from 'react-native';
+
+import { withTheme } from '../../core/theming';
+import shadow from '../../styles/shadow';
+import type { Theme } from '../../types';
+
+import { Text } from '../..';
+
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  accessible?: boolean;
+  children?: React.ReactNode;
+  elevation?: number;
+  onLongPress?: () => void;
+  onPress?: () => void;
+  radius?: number;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+};
+
+const Label = ({
+  accessible,
+  children,
+  elevation = 0,
+  onLongPress,
+  onPress,
+  radius = 4,
+  style = {},
+  theme,
+  ...rest
+}: Props) => {
+  return (
+    // TODO: fix this TS error
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    <Animated.View
+      {...rest}
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.tooltip,
+          borderRadius: radius,
+        },
+        shadow(elevation),
+        style,
+      ]}
+    >
+      <TouchableWithoutFeedback
+        delayPressIn={0}
+        disabled={!(onPress || onLongPress)}
+        onLongPress={onLongPress}
+        onPress={onPress}
+        accessible={accessible}
+      >
+        <Text>{children}</Text>
+      </TouchableWithoutFeedback>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    borderWidth: 2,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+});
+
+export default withTheme(Label);

package/src/components/Label/index.ts

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

package/src/components/List/List.tsx

@@ -0,0 +1,3 @@
+export { default as Section } from './ListSection';
+export { default as Accordion, Divider } from './ListAccordion';
+export { default as Item } from './ListItem';

package/src/components/List/ListAccordion.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import {
+  View,
+  ViewStyle,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
+  TouchableHighlight,
+} from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { Text, ChevronIcon } from '../..';
+import { blockSizes } from '../../styles/styles';
+import useControlledOrUncontrolled from '../../hooks/useControlledOrUncontrolled';
+
+// TODO: create LinkButton component that will have link colour that will serve as a clickable List.Item
+
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  children: React.ReactNode;
+  defaultExpanded?: boolean;
+  expanded?: boolean;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  subtitle?: string;
+  subtitleStyle?: StyleProp<TextStyle>;
+  theme: Theme;
+  title?: string;
+  titleStyle?: StyleProp<TextStyle>;
+};
+
+// TODO: add accessibilityState=expanded ?
+const ListAccordion = ({
+  children,
+  defaultExpanded,
+  expanded: expandedProp,
+  onPress,
+  style,
+  subtitle,
+  subtitleStyle,
+  theme,
+  title,
+  titleStyle,
+  ...rest
+}: Props) => {
+  const [expanded, setExpanded] = useControlledOrUncontrolled({
+    value: expandedProp,
+    defaultValue: defaultExpanded,
+  });
+
+  const handlePress = () => {
+    onPress?.();
+
+    if (expandedProp === undefined) {
+      setExpanded((currentExpanded: boolean) => !currentExpanded);
+    }
+  };
+
+  return (
+    <View
+      {...rest}
+      style={[styles.wrapper, { borderColor: theme.flatLight }, style]}
+    >
+      <TouchableHighlight onPress={handlePress} accessibilityRole='button'>
+        <View
+          style={[styles.header, { backgroundColor: theme.flatLight }]}
+          pointerEvents='none'
+        >
+          <View>
+            {title && (
+              <Text
+                bold
+                style={[styles.title, { color: theme.progress }, titleStyle]}
+              >
+                {title}
+              </Text>
+            )}
+            {subtitle && (
+              <Text secondary style={[styles.subtitle, subtitleStyle]}>
+                {subtitle}
+              </Text>
+            )}
+          </View>
+          <View style={styles.expandIcon}>
+            <ChevronIcon
+              theme={theme}
+              color={theme.progress}
+              segments={3}
+              direction={expanded ? 'up' : 'down'}
+            />
+            <ChevronIcon
+              theme={theme}
+              color={theme.progress}
+              segments={3}
+              style={{ marginVertical: 1 }}
+              direction={expanded ? 'up' : 'down'}
+            />
+          </View>
+        </View>
+      </TouchableHighlight>
+      {expanded && <View style={[styles.body]}>{children}</View>}
+    </View>
+  );
+};
+
+// TODO: do we need 'displayName' ?
+// ListAccordion.displayName = 'List.Accordion';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    borderWidth: 2,
+  },
+  header: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    minHeight: blockSizes.md,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  title: {
+    // TODO: create separate color variable for this? or should we use theme.materialColor instead?
+  },
+  subtitle: {
+    // TODO: make a Text component with standarized font sizes where normal is 16 / small 13 ...etc
+    fontSize: 13,
+    marginTop: 4,
+  },
+  expandIcon: {
+    marginRight: 4,
+  },
+  body: {},
+  divider: {
+    height: 2,
+    width: 'auto',
+  },
+});
+
+type DividerProps = {
+  theme: Theme;
+};
+
+const Divider = ({ theme }: DividerProps) => {
+  return (
+    <View style={[styles.divider, { backgroundColor: theme.flatLight }]} />
+  );
+};
+
+const DividerWithTheme = withTheme(Divider);
+
+export { DividerWithTheme as Divider };
+export default withTheme(ListAccordion);

package/src/components/List/ListItem.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  View,
+  ViewStyle,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
+  TouchableOpacity,
+} from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { blockSizes } from '../../styles/styles';
+
+import { Text } from '../..';
+
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  left?: React.ReactNode;
+  onPress?: () => void;
+  right?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  title?: string;
+  titleStyle?: StyleProp<TextStyle>;
+};
+
+const ListItem = ({
+  left,
+  onPress,
+  right,
+  style,
+  theme,
+  title,
+  titleStyle,
+  ...rest
+}: Props) => {
+  return (
+    <View style={style} {...rest}>
+      <TouchableOpacity onPress={onPress} accessibilityRole='button'>
+        <View style={[styles.content]}>
+          {left && <View style={[styles.left]}>{left}</View>}
+          {title && (
+            <Text style={[styles.title, { color: theme.progress }, titleStyle]}>
+              {title}
+            </Text>
+          )}
+          {right && <View style={[styles.right]}>{right}</View>}
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  content: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: blockSizes.md,
+    paddingVertical: 4,
+  },
+  title: {
+    fontSize: 16,
+  },
+  left: {
+    marginRight: 8,
+  },
+  right: {
+    marginLeft: 8,
+  },
+});
+
+export default withTheme(ListItem);

package/src/components/List/ListSection.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {
+  View,
+  ViewStyle,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
+} from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { Text } from '../..';
+
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  title?: string;
+  titleStyle?: StyleProp<TextStyle>;
+};
+
+const ListSection = ({
+  children,
+  style,
+  theme,
+  title,
+  titleStyle,
+  ...rest
+}: Props) => (
+  <View {...rest} style={[styles.container, style]}>
+    {title && (
+      <Text theme={theme} bold secondary style={[styles.title, titleStyle]}>
+        {title}
+      </Text>
+    )}
+    {children}
+  </View>
+);
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+  },
+  title: {
+    fontSize: 13,
+    marginVertical: 8,
+  },
+});
+
+export default withTheme(ListSection);

package/src/components/List/index.ts

@@ -0,0 +1,3 @@
+import * as List from './List';
+
+export default List;