react95-native-rabbl 0.1.1

package/src/components/Button/Button.tsx

@@ -0,0 +1,236 @@
+import React, { useState } from 'react';
+import {
+  StyleSheet,
+  // TODO: use Pressable instead of TouchableHighlight?
+  TouchableHighlight,
+  View,
+  ImageBackground,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import type { Sizes, Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+import { blockSizes, buildBorderStyles } from '../../styles/styles';
+
+import { Text } from '../..';
+
+export const testId = 'button';
+
+export type ButtonVariants = 'menu' | 'flat' | 'default' | 'raised';
+
+type ButtonProps = React.ComponentPropsWithRef<typeof View> & {
+  accessibilityLabel?: string;
+  active?: boolean;
+  children: React.ReactNode;
+  disabled?: boolean;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  primary?: boolean;
+  size?: Sizes;
+  square?: boolean;
+  style?: StyleProp<ViewStyle>;
+  variant?: ButtonVariants;
+  theme: Theme;
+};
+
+const Button = ({
+  accessible,
+  accessibilityLabel,
+  active = false,
+  children,
+  disabled = false,
+  onPress,
+  onLongPress,
+  primary = false,
+  size = 'md',
+  square = false,
+  style = {},
+  variant = 'default',
+  theme,
+  ...rest
+}: ButtonProps) => {
+  const [isPressed, setIsPressed] = useState(false);
+
+  const getWidth = () => {
+    return square ? blockSizes[size] : 'auto';
+  };
+
+  const isFlat = variant === 'flat';
+
+  const getBackgroundColor = () => {
+    if (isFlat) {
+      return disabled ? theme.flatLight : 'transparent';
+    }
+    return theme.material;
+  };
+
+  return (
+    <View
+      style={[
+        styles.wrapper,
+        { height: blockSizes[size], width: getWidth() },
+        style,
+      ]}
+      testID={testId}
+      {...rest}
+    >
+      <Borders
+        theme={theme}
+        isPressed={isPressed}
+        variant={variant}
+        primary={primary}
+        active={active}
+        style={{
+          backgroundColor: getBackgroundColor(),
+        }}
+      />
+
+      <TouchableHighlight
+        style={[
+          styles.content,
+          { paddingHorizontal: square ? 0 : 10 },
+          { marginTop: active || isPressed ? 2 : 0 },
+        ]}
+        onPress={onPress}
+        onLongPress={onLongPress}
+        disabled={disabled}
+        // TODO: use onHideUnderlay or onPressIn?
+        onHideUnderlay={() => setIsPressed(false)}
+        onShowUnderlay={() => setIsPressed(true)}
+        underlayColor='none'
+        accessibilityLabel={accessibilityLabel}
+        accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
+        accessibilityComponentType='button'
+        accessibilityRole='button'
+        accessibilityState={{ disabled }}
+        accessible={accessible}
+      >
+        <View pointerEvents='none'>
+          {typeof children === 'string' ? (
+            <Text disabled={!isFlat && disabled} secondary={isFlat && disabled}>
+              {children}
+            </Text>
+          ) : (
+            children
+          )}
+        </View>
+      </TouchableHighlight>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+  },
+
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default withTheme(Button);
+
+// Borders acts like a pseudo element that
+// will be positioned absolutely in it's parent element
+
+type BorderProps = {
+  isPressed?: boolean;
+  variant?: ButtonVariants;
+  primary?: boolean;
+  active?: boolean;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+};
+
+// TODO: pass theme as an argument instead of using context ?
+const Borders = ({
+  isPressed = false,
+  variant = 'default',
+  primary = false,
+  active = false,
+  style = {},
+  theme,
+}: BorderProps) => {
+  let wrapper: StyleProp<ViewStyle> = [];
+  let outer;
+  let inner;
+  let focus;
+
+  const borders = buildBorderStyles(theme);
+  if (variant === 'default') {
+    wrapper = primary ? [borders.outline] : [];
+    outer = [borders.defaultOuter];
+    inner = [borders.defaultInner];
+    focus = isPressed ? [borders.focusOutline] : [];
+  } else if (variant === 'raised') {
+    wrapper = primary ? [borders.outline] : [];
+    outer = [borders.outsideOuter];
+    inner = [borders.outsideInner];
+    focus = isPressed ? [borders.focusOutline] : [];
+  } else if (variant === 'menu' && (active || isPressed)) {
+    wrapper = [borders.well];
+  } else if (variant === 'flat') {
+    wrapper = primary ? [borders.outline] : [];
+    outer = [borders.flat];
+    inner = isPressed ? [borders.focusOutline] : [];
+  }
+
+  return (
+    <View
+      style={[
+        borderStyles.position,
+        active || isPressed ? borderStyles.invert : {},
+        ...wrapper,
+        style,
+      ]}
+    >
+      {Array.isArray(outer) && (
+        <View style={[borderStyles.position, ...outer]}>
+          {Array.isArray(inner) && inner.length > 0 && (
+            <View style={[borderStyles.position, ...inner]}>
+              {Array.isArray(focus) && !active && (
+                <View
+                  style={[
+                    borderStyles.position,
+                    { margin: primary ? 0 : 2 },
+                    ...focus,
+                  ]}
+                />
+              )}
+              {active && (
+                <ImageBackground
+                  style={[borderStyles.position]}
+                  imageStyle={{
+                    resizeMode: 'repeat',
+                  }}
+                  source={{
+                    // TODO: create util function for generating checkered background
+                    uri:
+                      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIUlEQVQoU2P8////fwYkwMjIyIjCp4MCZPtAbAwraa8AAEGrH/nfAIhgAAAAAElFTkSuQmCC',
+                  }}
+                />
+              )}
+            </View>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const borderStyles = StyleSheet.create({
+  position: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+
+  invert: {
+    transform: [{ rotate: '180deg' }],
+  },
+});

package/src/components/Button/index.ts

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

package/src/components/Card/Card.spec.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { Card, Text } from '../..';
+
+describe('<Card />', () => {
+  it('should render children', () => {
+    const { getByText } = render(
+      <Card>
+        <Text>Banana dance</Text>
+      </Card>,
+    );
+
+    expect(getByText('Banana dance')).toBeTruthy();
+  });
+
+  it('should render custom styles', () => {
+    const style = { backgroundColor: 'teal' };
+
+    const { getByTestId } = render(
+      <Card style={style} testID='card'>
+        <Text>Card</Text>
+      </Card>,
+    );
+
+    expect(getByTestId('card')).toHaveStyle(style);
+  });
+});
+
+describe('<Card.Content />', () => {
+  it('should render children', () => {
+    const { getByText } = render(
+      <Card>
+        <Card.Content>
+          <Text>Banana dance</Text>
+        </Card.Content>
+      </Card>,
+    );
+
+    expect(getByText('Banana dance')).toBeTruthy();
+  });
+
+  it('should render custom styles', () => {
+    const style = { backgroundColor: 'teal' };
+
+    const { getByTestId } = render(
+      <Card>
+        <Card.Content style={style} testID='content' />
+      </Card>,
+    );
+
+    expect(getByTestId('content')).toHaveStyle(style);
+  });
+});

package/src/components/Card/Card.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { StyleProp, StyleSheet, ViewStyle, View } from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import CardContent from './CardContent';
+
+// TODO: add following props:
+// onLongPress,
+// onPress,
+
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  children?: React.ReactNode;
+  elevation?: number;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+};
+
+const Card = ({
+  children,
+  elevation: elevationProp = 1,
+  style = {},
+  theme,
+  ...rest
+}: Props) => {
+  const elevation = elevationProp * 2;
+  return (
+    <View style={[styles.wrapper, style]} {...rest}>
+      <View
+        style={[
+          styles.inner,
+          {
+            marginRight: elevation,
+            marginBottom: elevation,
+          },
+        ]}
+      >
+        {elevation !== 0 && (
+          <View
+            style={[
+              styles.shadow,
+              {
+                top: elevation,
+                left: elevation,
+                width: '100%',
+                height: '100%',
+                backgroundColor: theme.borderDarkest,
+              },
+            ]}
+          />
+        )}
+        <View
+          style={[
+            styles.card,
+            {
+              backgroundColor: theme.canvas,
+              borderColor: theme.borderDarkest,
+            },
+          ]}
+        >
+          {children}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    position: 'relative',
+  },
+  inner: {
+    flexGrow: 1,
+  },
+  card: {
+    borderWidth: 2,
+    flexGrow: 1,
+  },
+  shadow: {
+    position: 'absolute',
+  },
+});
+
+Card.Content = CardContent;
+
+export default withTheme(Card);

package/src/components/Card/CardContent.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyleProp, StyleSheet, ViewStyle, View } from 'react-native';
+
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+};
+
+const CardContent = ({ children, style = {}, ...rest }: Props) => {
+  return (
+    <View style={[styles.wrapper, style]} {...rest}>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    padding: 8,
+  },
+});
+
+export default CardContent;

package/src/components/Card/index.ts

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

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SwitchBase, SwitchProps } from '../SwitchBase';
+
+import { withTheme } from '../../core/theming';
+
+const Checkbox = (props: SwitchProps) => {
+  return <SwitchBase component='checkbox' {...props} />;
+};
+
+export default withTheme(Checkbox);

package/src/components/Checkbox/index.ts

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

package/src/components/ColorButton/ColorButton.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import type { Theme, $RemoveChildren, Color } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { Button, Divider, ArrowIcon } from '../..';
+
+type Props = $RemoveChildren<typeof Button> & {
+  color?: Color;
+  theme: Theme;
+};
+
+const previewHeight = 20;
+
+const ColorButton = ({ disabled, color, theme, ...rest }: Props) => {
+  return (
+    <Button variant='raised' disabled={disabled} {...rest}>
+      <View style={styles.row}>
+        <View
+          style={[
+            styles.colorPreview,
+            {
+              backgroundColor: color || 'transparent',
+              borderWidth: 2,
+              borderColor: disabled
+                ? theme.materialTextDisabled
+                : theme.materialText,
+              shadowColor: disabled
+                ? theme.materialTextDisabledShadow
+                : 'transparent',
+              shadowOffset: {
+                width: 1,
+                height: 1,
+              },
+              shadowOpacity: 1,
+              shadowRadius: 0,
+            },
+          ]}
+        />
+        <Divider orientation='vertical' size={previewHeight} />
+        <ArrowIcon
+          theme={theme}
+          direction='down'
+          disabled={disabled}
+          segments={3}
+          style={styles.dropdownIcon}
+        />
+      </View>
+    </Button>
+  );
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+  },
+  colorPreview: {
+    width: 36,
+    marginRight: 6,
+  },
+  dropdownIcon: {
+    alignSelf: 'center',
+    marginRight: 2,
+    marginLeft: 4,
+  },
+});
+
+export default withTheme(ColorButton);

package/src/components/ColorButton/index.ts

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

package/src/components/ColorPicker/ColorPicker.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import {
+  StyleSheet,
+  TouchableHighlight,
+  View,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import type { Theme, Color } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { Border } from '../../styles/styleElements';
+
+const colorPreviewSize = 34;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function chunk(arr: any[], chunkSize: number) {
+  const R = [];
+  for (let i = 0, len = arr.length; i < len; i += chunkSize)
+    R.push(arr.slice(i, i + chunkSize));
+  return R;
+}
+
+type Props = {
+  colors: Color[];
+  colorsPerRow?: number;
+  onChange?: (value: Color) => void;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  value?: Color;
+  wide?: boolean;
+};
+
+const ColorPicker = ({
+  colors,
+  colorsPerRow = 5,
+  onChange,
+  style,
+  theme,
+  value,
+  wide = false,
+  ...rest
+}: Props) => {
+  const handleColorPress = (v: Color) => {
+    onChange?.(v);
+  };
+  const rows = chunk(colors, colorsPerRow);
+
+  return (
+    <View style={style} {...rest}>
+      {rows.map((rowColors, i) => (
+        <View style={styles.row} key={i}>
+          {rowColors.map(color => {
+            // TODO: pick more visible cborders olors for selected item
+            const isSelected = color === value;
+            return (
+              <TouchableHighlight
+                key={color}
+                onPress={() => handleColorPress(color)}
+                style={[
+                  styles.colorPreview,
+                  {
+                    width: (wide ? 1.4 : 1) * colorPreviewSize,
+                    height: colorPreviewSize,
+                    borderWidth: 2,
+                    borderColor: isSelected
+                      ? theme.materialText
+                      : 'transparent',
+                  },
+                ]}
+              >
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: color,
+                    borderWidth: isSelected ? 2 : 0,
+                    borderColor: theme.canvas,
+                  }}
+                >
+                  <View
+                    style={{
+                      flex: 1,
+                      borderWidth: isSelected ? 2 : 0,
+                      borderColor: theme.materialText,
+                    }}
+                  >
+                    {!isSelected && <Border variant='cutout' theme={theme} />}
+                  </View>
+                </View>
+              </TouchableHighlight>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+  },
+  colorPreview: {
+    width: colorPreviewSize,
+    height: colorPreviewSize,
+  },
+});
+
+export default withTheme(ColorPicker);

package/src/components/ColorPicker/index.ts

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

package/src/components/Desktop/Desktop.spec.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { Desktop, Text } from '../..';
+
+describe('<Desktop />', () => {
+  it('should render children in "screen"', () => {
+    const { getByTestId } = render(
+      <Desktop>
+        <Text>Desktop content</Text>
+      </Desktop>,
+    );
+
+    expect(getByTestId('desktopScreen')).toHaveTextContent('Desktop content');
+  });
+
+  it('should render custom styles', () => {
+    const style = { backgroundColor: 'teal' };
+
+    const { getByTestId } = render(<Desktop style={style} testID='card' />);
+
+    expect(getByTestId('card')).toHaveStyle(style);
+  });
+
+  it('should render custom screenStyles', () => {
+    const style = { backgroundColor: 'teal' };
+
+    const { getByTestId } = render(<Desktop screenStyle={style} />);
+
+    expect(getByTestId('desktopScreen')).toHaveStyle(style);
+  });
+});