react95-native-rabbl 0.1.1

package/src/components/Typography/Text.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Text as NativeText, StyleProp, TextStyle } from 'react-native';
+
+import { withTheme } from '../../core/theming';
+import { builtTextStyles } from '../../styles/styles';
+import type { Theme } from '../../types';
+
+export type TextProps = React.ComponentProps<typeof NativeText> & {
+  bold?: boolean;
+  children: React.ReactNode;
+  disabled?: boolean;
+  secondary?: boolean;
+  style?: StyleProp<TextStyle>;
+  theme: Theme;
+};
+
+// TODO: set proper lineHeight and make it so that it automatically adjusts for every fontSize
+const Text = ({
+  bold = false,
+  children,
+  disabled = false,
+  secondary = false,
+  theme,
+  style,
+  ...rest
+}: TextProps) => {
+  const textStyles = builtTextStyles(theme);
+
+  const getTextStyle = () => {
+    if (disabled) {
+      return textStyles.disabled;
+    }
+
+    if (secondary) {
+      return textStyles.secondary;
+    }
+
+    return textStyles.default;
+  };
+
+  return (
+    <NativeText
+      style={[
+        bold ? textStyles.bold : textStyles.regular,
+        getTextStyle(),
+        style,
+      ]}
+      {...rest}
+    >
+      {children}
+    </NativeText>
+  );
+};
+
+export default withTheme(Text);

package/src/components/Typography/Title.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { Divider } from '../..';
+import Text, { TextProps } from './Text';
+
+type Props = TextProps & {
+  align?: 'center' | 'left' | 'right';
+  theme: Theme;
+};
+
+const Title = ({ align = 'center', children, theme, ...rest }: Props) => {
+  const getAlignment = () => {
+    switch (align) {
+      case 'left':
+        return 'flex-start';
+      case 'right':
+        return 'flex-end';
+      default:
+        return 'center';
+    }
+  };
+
+  return (
+    <View style={[styles.wrapper]}>
+      <Divider style={[styles.divider]} />
+      <View
+        style={{
+          paddingLeft: align !== 'left' ? 8 : 0,
+          paddingRight: align !== 'right' ? 8 : 0,
+          backgroundColor: theme.material,
+          alignSelf: getAlignment(),
+        }}
+      >
+        <Text {...rest}>{children}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    width: '100%',
+  },
+  divider: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: '50%',
+    transform: [{ translateY: -1 }],
+  },
+});
+
+export default withTheme(Title);

package/src/components/Typography/index.ts

@@ -0,0 +1,3 @@
+export { default as Text } from './Text';
+export { default as Title } from './Title';
+export { default as Anchor } from './Anchor';

package/src/components/Window/Window.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { Panel, Button, Text, CloseIcon } from '../..';
+
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  // TODO: allow for inserting custom buttons to title bar?
+  active?: boolean;
+  children?: React.ReactNode;
+  onClose?: () => void;
+  onMaximize?: () => void;
+  onMinimize?: () => void;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+  title?: string;
+};
+
+const Window = ({
+  active = true,
+  children,
+  onClose,
+  onMaximize,
+  onMinimize,
+  style = {},
+  theme,
+  title = '',
+  ...rest
+}: Props) => {
+  return (
+    <Panel
+      theme={theme}
+      variant='raised'
+      elevation={4}
+      style={[styles.window, { backgroundColor: theme.material }, style]}
+      {...rest}
+    >
+      <View
+        style={[
+          styles.titleBar,
+          styles.flex,
+          {
+            backgroundColor: active
+              ? theme.headerBackground
+              : theme.headerNotActiveBackground,
+          },
+        ]}
+      >
+        <View style={[styles.flex]}>
+          <Text
+            theme={theme}
+            bold
+            // TODO: truncate window title when window is really small
+            ellipsizeMode='tail'
+            numberOfLines={1}
+            style={[
+              styles.titleBarText,
+              { color: active ? theme.headerText : theme.headerNotActiveText },
+            ]}
+          >
+            {title}
+          </Text>
+        </View>
+
+        <View style={[styles.flex]}>
+          <View style={[styles.flex, styles.buttonGroup]}>
+            {onMinimize && (
+              <Button
+                theme={theme}
+                onPress={onMinimize}
+                style={[styles.button]}
+              >
+                _
+              </Button>
+            )}
+            {onMaximize && (
+              <Button
+                theme={theme}
+                onPress={onMaximize}
+                style={[styles.button]}
+              >
+                []
+              </Button>
+            )}
+          </View>
+          {onClose && (
+            <Button theme={theme} onPress={onClose} style={[styles.button]}>
+              <CloseIcon />
+            </Button>
+          )}
+        </View>
+      </View>
+      {children}
+    </Panel>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignContent: 'center',
+    alignItems: 'center',
+  },
+  window: {
+    position: 'relative',
+    paddingVertical: 6,
+    paddingHorizontal: 6,
+  },
+  titleBar: {
+    height: 36,
+    margin: 2,
+    paddingRight: 4,
+    paddingLeft: 8,
+  },
+  titleBarText: {
+    flexShrink: 1,
+  },
+  buttonGroup: {
+    marginRight: 6,
+  },
+  button: {
+    height: 28,
+    width: 32,
+    padding: 0,
+  },
+});
+
+export default withTheme(Window);

package/src/components/Window/index.ts

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

package/src/core/Provider.tsx

@@ -0,0 +1,52 @@
+/* eslint-disable react/destructuring-assignment */
+import * as React from 'react';
+// import { AccessibilityInfo } from 'react-native';
+import { ThemeProvider } from './theming';
+import PortalHost from '../components/Portal/PortalHost';
+
+import original from '../styles/themes/original';
+
+import type { Theme } from '../types';
+
+type Props = {
+  children: React.ReactNode;
+  theme?: Theme;
+};
+
+const Provider = ({ ...props }: Props) => {
+  // const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState<boolean>(
+  //   false,
+  // );
+
+  // React.useEffect(() => {
+  //   if (!props.theme) {
+  //     AccessibilityInfo.addEventListener(
+  //       'reduceMotionChanged',
+  //       setReduceMotionEnabled,
+  //     );
+  //   }
+  //   return () => {
+  //     if (!props.theme) {
+  //       AccessibilityInfo.removeEventListener(
+  //         'reduceMotionChanged',
+  //         setReduceMotionEnabled,
+  //       );
+  //     }
+  //   };
+  // }, [props.theme]);
+
+  const getTheme = () => {
+    const { theme: providedTheme } = props;
+
+    return providedTheme || original;
+  };
+
+  const { children } = props;
+  return (
+    <PortalHost>
+      <ThemeProvider theme={getTheme()}>{children}</ThemeProvider>
+    </PortalHost>
+  );
+};
+
+export default Provider;

package/src/core/theming.tsx

@@ -0,0 +1,8 @@
+import { createTheming } from '@callstack/react-theme-provider';
+
+import type { Theme } from '../types';
+import original from '../styles/themes/original';
+
+export const { ThemeProvider, withTheme, useTheme } = createTheming<Theme>(
+  original as Theme,
+);

package/src/hooks/useAsyncReference.ts

@@ -0,0 +1,22 @@
+import React, { useState, useRef } from 'react';
+import type { AnyValue } from '../types';
+
+interface UpdateStateFunction extends Function {
+  (n: AnyValue): void;
+}
+
+export default function useAsyncReference(
+  value: AnyValue,
+): [React.RefObject<AnyValue>, UpdateStateFunction] {
+  const ref = useRef(value);
+  const [, rerender] = useState(false);
+
+  function updateState(newState: UpdateStateFunction) {
+    if (!Object.is(ref.current, newState)) {
+      ref.current = newState;
+      rerender(s => !s);
+    }
+  }
+
+  return [ref, updateState];
+}

package/src/hooks/useControlledOrUncontrolled.ts

@@ -0,0 +1,23 @@
+import { useState, useCallback } from 'react';
+import type { AnyValue } from '../types';
+
+type Props = {
+  value: AnyValue;
+  defaultValue: AnyValue;
+};
+
+export default ({
+  value,
+  defaultValue,
+}: Props): [AnyValue, (newValue: AnyValue) => void] => {
+  const isControlled = value !== undefined;
+  const [controlledValue, setControlledValue] = useState(defaultValue);
+
+  const handleChangeIfUncontrolled = useCallback(newValue => {
+    if (!isControlled) {
+      setControlledValue(newValue);
+    }
+  }, []);
+
+  return [isControlled ? value : controlledValue, handleChangeIfUncontrolled];
+};

package/src/index.ts

@@ -0,0 +1,38 @@
+export { default as AppBar } from './components/AppBar';
+export { default as Button } from './components/Button';
+export { default as Card } from './components/Card';
+export { default as Checkbox } from './components/Checkbox';
+export { default as ColorButton } from './components/ColorButton';
+export { default as ColorPicker } from './components/ColorPicker';
+export { default as Desktop } from './components/Desktop';
+export { default as Divider } from './components/Divider';
+export { default as FAB } from './components/FAB';
+export { default as Fieldset } from './components/Fieldset';
+export { default as Hourglass } from './components/Hourglass';
+export { default as Label } from './components/Label';
+export { default as List } from './components/List';
+export { default as Menu } from './components/Menu';
+export { default as NumberInput } from './components/NumberInput';
+export { default as Panel } from './components/Panel';
+export { default as Portal } from './components/Portal';
+export { default as Progress } from './components/Progress';
+export { default as Radio } from './components/Radio';
+export { default as ScrollPanel } from './components/ScrollPanel';
+export { default as ScrollView } from './components/ScrollView';
+export { default as Slider } from './components/Slider';
+export { default as Snackbar } from './components/Snackbar';
+export { default as Tabs } from './components/Tabs';
+export { default as TextInput } from './components/TextInput';
+export { default as Toolbar } from './components/Toolbar';
+export { default as Window } from './components/Window';
+export { Select, SelectBox } from './components/Select';
+export { Text, Title, Anchor } from './components/Typography';
+
+export * from './components/Icons';
+export { default as themes } from './styles/themes';
+
+export { Theme } from './types';
+export { fontNames } from './styles/styles';
+
+export { useTheme, withTheme, ThemeProvider } from './core/theming';
+export { default as Provider } from './core/Provider';

package/src/styles/shadow.tsx

@@ -0,0 +1,36 @@
+// shadow util copied from https://github.com/callstack/react-native-paper/
+
+const SHADOW_COLOR = '#000000';
+const SHADOW_OPACITY = 0.24;
+
+export default function shadow(elevation = 0) {
+  if (elevation === 0) {
+    return {};
+  }
+
+  let height;
+  let radius;
+  switch (elevation) {
+    case 1:
+      height = 0.5;
+      radius = 0.75;
+      break;
+    case 2:
+      height = 0.75;
+      radius = 1.5;
+      break;
+    default:
+      height = elevation - 1;
+      radius = elevation;
+  }
+
+  return {
+    shadowColor: SHADOW_COLOR,
+    shadowOffset: {
+      width: 0,
+      height,
+    },
+    shadowOpacity: SHADOW_OPACITY,
+    shadowRadius: radius,
+  };
+}

package/src/styles/styleElements.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable import/prefer-default-export */
+import React from 'react';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+
+import { withTheme } from '../core/theming';
+
+import { buildBorderStyles } from './styles';
+import type { Theme } from '../types';
+
+// Borders acts like a pseudo element that
+// will be positioned absolutely in it's parent element
+type BorderProps = {
+  invert?: boolean;
+  variant?: 'default' | 'well' | 'raised' | 'cutout' | 'flat';
+  style?: StyleProp<ViewStyle>;
+  sharedStyle?: StyleProp<ViewStyle>;
+  radius?: number;
+  children?: React.ReactNode;
+  theme: Theme;
+};
+
+const Border = ({
+  invert = false,
+  variant = 'default',
+  style = {},
+  sharedStyle = {},
+  radius = 0,
+  theme,
+  children,
+}: BorderProps) => {
+  const wrapper: StyleProp<ViewStyle> = [];
+  let outer;
+  let inner;
+
+  const themedBorders = buildBorderStyles(theme);
+
+  if (variant === 'default') {
+    outer = [themedBorders.defaultOuter];
+    inner = [themedBorders.defaultInner];
+  } else if (variant === 'raised') {
+    outer = [themedBorders.outsideOuter];
+    inner = [themedBorders.outsideInner];
+  } else if (variant === 'well') {
+    outer = [themedBorders.well, borderStyles.invert];
+  } else if (variant === 'cutout') {
+    outer = [themedBorders.cutoutOuter];
+    inner = [themedBorders.cutoutInner];
+  } else if (variant === 'flat') {
+    outer = [themedBorders.flat];
+  }
+
+  const getSharedStyles = (() => {
+    let r = radius + 4;
+
+    return () => {
+      r -= 2;
+      return [
+        borderStyles.position,
+        sharedStyle,
+        {
+          borderRadius: radius ? r : 0,
+        },
+      ];
+    };
+  })();
+
+  return (
+    <View
+      style={[
+        getSharedStyles(),
+        invert ? borderStyles.invert : {},
+        ...wrapper,
+        style,
+      ]}
+    >
+      {outer ? (
+        <View style={[getSharedStyles(), ...outer]}>
+          {inner ? (
+            <View style={[getSharedStyles(), ...inner]}>{children}</View>
+          ) : (
+            children
+          )}
+        </View>
+      ) : (
+        children
+      )}
+    </View>
+  );
+};
+
+const borderStyles = StyleSheet.create({
+  position: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  invert: {
+    transform: [{ rotate: '180deg' }],
+  },
+});
+
+const BorderWithTheme = withTheme(Border);
+export { BorderWithTheme as Border };

package/src/styles/styles.ts

@@ -0,0 +1,129 @@
+import { StyleSheet } from 'react-native';
+
+import type { Theme } from '../types';
+
+export const fontNames = {
+  normal: 'MS Sans Serif',
+  bold: 'MS Sans Serif Bold',
+};
+
+const commonBorderStyle = { borderWidth: 2 };
+
+export const buildBorderStyles = (theme: Theme) =>
+  StyleSheet.create({
+    focusSecondaryOutline: {
+      ...commonBorderStyle,
+      borderStyle: 'dotted',
+      borderColor: theme.focusSecondary,
+    },
+    focusOutline: {
+      ...commonBorderStyle,
+      borderStyle: 'dotted',
+      borderColor: theme.borderDarkest,
+    },
+    outline: {
+      ...commonBorderStyle,
+      borderColor: theme.borderDarkest,
+    },
+    defaultOuter: {
+      ...commonBorderStyle,
+      borderLeftColor: theme.borderLightest,
+      borderTopColor: theme.borderLightest,
+      borderRightColor: theme.borderDarkest,
+      borderBottomColor: theme.borderDarkest,
+    },
+    defaultInner: {
+      ...commonBorderStyle,
+      borderLeftColor: theme.borderLight,
+      borderTopColor: theme.borderLight,
+      borderRightColor: theme.borderDark,
+      borderBottomColor: theme.borderDark,
+    },
+    outsideOuter: {
+      ...commonBorderStyle,
+      borderLeftColor: theme.borderLight,
+      borderTopColor: theme.borderLight,
+      borderRightColor: theme.borderDarkest,
+      borderBottomColor: theme.borderDarkest,
+    },
+    outsideInner: {
+      ...commonBorderStyle,
+      borderLeftColor: theme.borderLightest,
+      borderTopColor: theme.borderLightest,
+      borderRightColor: theme.borderDark,
+      borderBottomColor: theme.borderDark,
+    },
+    cutoutOuter: {
+      ...commonBorderStyle,
+      borderLeftColor: theme.borderDark,
+      borderTopColor: theme.borderDark,
+      borderRightColor: theme.borderLightest,
+      borderBottomColor: theme.borderLightest,
+    },
+    cutoutInner: {
+      ...commonBorderStyle,
+      borderLeftColor: theme.borderDarkest,
+      borderTopColor: theme.borderDarkest,
+      borderRightColor: theme.borderLight,
+      borderBottomColor: theme.borderLight,
+    },
+    well: {
+      ...commonBorderStyle,
+      borderLeftColor: theme.borderLightest,
+      borderTopColor: theme.borderLightest,
+      borderRightColor: theme.borderDark,
+      borderBottomColor: theme.borderDark,
+    },
+    flat: {
+      ...commonBorderStyle,
+      borderColor: theme.flatDark,
+    },
+  });
+
+export const builtTextStyles = (theme: Theme) =>
+  StyleSheet.create({
+    regular: {
+      fontFamily: 'MS Sans Serif',
+      fontSize: 16,
+    },
+    bold: {
+      fontFamily: 'MS Sans Serif Bold',
+      fontSize: 16,
+    },
+    secondary: {
+      color: theme.materialTextDisabled,
+    },
+    default: {
+      color: theme.materialText,
+    },
+    disabled: {
+      color: theme.materialTextDisabled,
+      textShadowColor: theme.materialTextDisabledShadow,
+      textShadowOffset: { width: 1, height: 1 },
+      textShadowRadius: 0,
+    },
+  });
+
+export const blockSizes = {
+  sm: 28,
+  md: 36,
+  lg: 44,
+};
+
+export function padding(a: number, b?: number, c?: number, d?: number) {
+  return {
+    paddingTop: a,
+    paddingRight: b || a,
+    paddingBottom: c || a,
+    paddingLeft: d || b || a,
+  };
+}
+
+export function margin(a: number, b?: number, c?: number, d?: number) {
+  return {
+    marginTop: a,
+    marginRight: b || a,
+    marginBottom: c || a,
+    marginLeft: d || b || a,
+  };
+}