chore: split out shared components into shared-ui package (#171)

* Adding sample app workspace config

* Adding sample components and exports to shared-ui

examples/shared/index.ts

@@ -0,0 +1,28 @@
+// components
+export { BackButton } from './src/components/BackButton';
+export { CTAPressable } from './src/components/CTAPressable';
+export { CTATouchableOpacity } from './src/components/CTATouchableOpacity';
+export { CTATouchableWithoutFeedback } from './src/components/CTATouchableWithoutFeedback';
+export { Header } from './src/components/Header';
+export { Spacer } from './src/components/Spacer';
+
+// Screens
+export { BottomSheetScreen } from './src/screens/BottomSheet.screen';
+export { ExpandablePressableScreen } from './src/screens/ExpandablePressableScreen';
+export { FlatListScreen } from './src/screens/FlatList.screen';
+export { FlatListDynamicScreen } from './src/screens/FlatListDynamic.screen';
+export { FlatListStaticScreen } from './src/screens/FlatListStatic.screen';
+export { FormScreen } from './src/screens/Form.screen';
+export { HomeScreen } from './src/screens/Home.screen';
+export { PressableScreen } from './src/screens/Pressable.screen';
+export { TextScreen } from './src/screens/Text.screen';
+export { TouchableOpacityScreen } from './src/screens/TouchableOpacity.screen';
+export { TouchableWithoutFeedbackScreen } from './src/screens/TouchableWithoutFeedback.screen';
+export { UseAMAContextScreen } from './src/screens/UseAMAContext.screen';
+export { UseAnimationScreen } from './src/screens/UseAnimationScreen';
+export { UseReanimatedTimingScreen } from './src/screens/UseReanimatedTimingScreen';
+export { UseTimedActionScreen } from './src/screens/UseTimedAction.screen';
+
+// other
+
+export { theme } from './src/theme';

examples/shared/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@examples/shared-ui",
+  "version": "0.0.1",
+  "description": "Example Apps shared UI components",
+  "private": true,
+  "react-native": "index",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "rimraf dist && tsc",
+    "postinstall": "yarn build",
+		"type:watch": "tsc --watch",
+    "type:check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react-native-svg": "13.9.0",
+    "@react-native-ama/animations": "*",
+    "@react-native-ama/core": "*",
+    "@react-native-ama/extras": "*",
+    "@react-native-ama/forms": "*",
+    "@react-native-ama/lists": "*",
+    "@react-native-ama/react-native": "*"
+  },
+  "devDependencies": {
+    "rimraf": "^3.0.2",
+    "typescript": "^5.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "@react-navigation/native": ">=5.0.0"
+  }
+}

examples/shared/src/components/BackButton.tsx

@@ -0,0 +1,43 @@
+import { Pressable } from '@react-native-ama/core';
+import { useNavigation } from '@react-navigation/native';
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { theme } from '../theme';
+
+export const BackButton = () => {
+  const navigation = useNavigation();
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      onPress={navigation.goBack}
+      accessibilityLabel="Back"
+      style={styles.button}>
+      <Svg width={32} height={32} viewBox="0 0 8.467 8.467">
+        <Path
+          d="M5.283 1.907l-2.251 2.25L5.434 6.56"
+          fill="none"
+          stroke="#000"
+          strokeWidth={0.79378125}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit={4}
+          strokeDasharray="none"
+          strokeOpacity={1}
+        />
+      </Svg>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: theme.color.white,
+    minWidth: 48,
+    minHeight: 48,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

examples/shared/src/components/CTAPressable.tsx

@@ -0,0 +1,125 @@
+import { Pressable as AMAPressable } from '@react-native-ama/core';
+import type { PressableProps } from '@react-native-ama/core';
+import React from 'react';
+import {
+  AccessibilityState,
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+} from 'react-native';
+
+import { theme } from '../theme';
+
+type CTAPressableProps = Omit<
+  PressableProps,
+  'children' | 'accessibilityRole' | 'accessibilityLabel'
+> & {
+  title: string;
+  accessibilityLabel?: string;
+  textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | undefined;
+} & {
+  marginLeft?: number;
+  marginRight?: number;
+} & {
+  checked?: AccessibilityState['checked'];
+  selected?: boolean;
+  expanded?: boolean;
+};
+
+export const CTAPressable = ({
+  title,
+  onPress,
+  disabled,
+  textTransform,
+  marginLeft,
+  marginRight,
+  accessibilityLabel,
+  ...rest
+}: CTAPressableProps) => {
+  return (
+    <AMAPressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel || title}
+      disabled={disabled}
+      style={({ pressed }) => {
+        const buttonStyles = getButtonStyle({
+          pressed,
+          disabled,
+          // @ts-ignore
+          checked: rest?.checked,
+          // @ts-ignore
+          selected: rest?.selected,
+        });
+
+        return [
+          styles.button,
+          buttonStyles,
+          { marginLeft, marginRight },
+          rest.style,
+        ];
+      }}
+      onPress={onPress}>
+      {rest.busy ? <ActivityIndicator color={theme.color.white} /> : null}
+      <Text
+        style={[styles.text, { textTransform }]}
+        accessibilityElementsHidden={rest.accessibilityElementsHidden}
+        importantForAccessibility={rest.importantForAccessibility}>
+        {title}
+      </Text>
+    </AMAPressable>
+  );
+};
+
+function getButtonStyle({
+  pressed,
+  disabled,
+  checked,
+  selected,
+}: {
+  pressed: boolean;
+  disabled?: boolean | null;
+  checked?: AccessibilityState['checked'];
+  selected?: boolean;
+}) {
+  if (disabled) {
+    return styles.disabled;
+  } else if (pressed) {
+    return styles.pressed;
+  } else if (checked) {
+    return checked === 'mixed' ? styles.mixed : styles.checked;
+  } else if (selected) {
+    return styles.selected;
+  }
+
+  return {};
+}
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: theme.padding.normal,
+    paddingHorizontal: theme.padding.big,
+    backgroundColor: theme.color.black,
+    minHeight: 48,
+    minWidth: 48,
+  },
+  pressed: {
+    backgroundColor: theme.color.hover,
+  },
+  checked: {
+    backgroundColor: theme.color.checked,
+  },
+  mixed: {
+    backgroundColor: theme.color.mixed,
+  },
+  selected: {
+    backgroundColor: theme.color.selected,
+  },
+  disabled: {
+    backgroundColor: theme.color.disabled,
+  },
+  text: {
+    textAlign: 'center',
+    color: theme.color.white,
+    fontSize: theme.fontSize.medium,
+  },
+});

examples/shared/src/components/CTATouchableOpacity.tsx

@@ -0,0 +1,104 @@
+import {
+  TouchableOpacity,
+  type TouchableOpacityProps,
+} from '@react-native-ama/react-native';
+import React from 'react';
+import {
+  AccessibilityState,
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+} from 'react-native';
+
+import { theme } from '../theme';
+
+type CTATouchableOpacityProps = Omit<
+  TouchableOpacityProps,
+  'accessibilityLabel' | 'accessibilityRole'
+> & {
+  title: string;
+  accessibilityLabel?: string;
+  textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | undefined;
+} & {
+  marginLeft?: number;
+  marginRight?: number;
+} & {
+  checked?: AccessibilityState['checked'];
+  selected?: boolean;
+  expanded?: boolean;
+};
+
+export const CTATouchableOpacity = ({
+  title,
+  onPress,
+  disabled,
+  textTransform,
+  marginLeft,
+  marginRight,
+  accessibilityLabel,
+  ...rest
+}: CTATouchableOpacityProps) => {
+  const style = {
+    ...styles.button,
+    ...getButtonStyle(disabled, rest?.checked, rest?.selected),
+  };
+
+  return (
+    <TouchableOpacity
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? title}
+      disabled={disabled}
+      style={style}
+      onPress={onPress}
+      {...rest}>
+      {rest.busy ? <ActivityIndicator color={theme.color.white} /> : null}
+      <Text style={[styles.text, { textTransform }]}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+function getButtonStyle(
+  disabled?: AccessibilityState['disabled'] | null,
+  checked?: AccessibilityState['checked'],
+  selected?: AccessibilityState['selected'],
+) {
+  if (disabled) {
+    return styles.disabled;
+  } else if (checked) {
+    return checked === 'mixed' ? styles.mixed : styles.checked;
+  } else if (selected) {
+    return styles.selected;
+  }
+
+  return {};
+}
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: theme.padding.normal,
+    backgroundColor: theme.color.black,
+    flex: 1,
+    minHeight: 48,
+    minWidth: 48,
+  },
+  pressed: {
+    backgroundColor: theme.color.hover,
+  },
+  checked: {
+    backgroundColor: theme.color.checked,
+  },
+  mixed: {
+    backgroundColor: theme.color.mixed,
+  },
+  selected: {
+    backgroundColor: theme.color.selected,
+  },
+  disabled: {
+    backgroundColor: theme.color.disabled,
+  },
+  text: {
+    textAlign: 'center',
+    color: theme.color.white,
+    fontSize: theme.fontSize.medium,
+  },
+});