@compsych-ui-components/react-native 3.2.4

package/.swcrc

@@ -0,0 +1,21 @@
+{
+  "jsc": {
+    "target": "es2022",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    }
+  },
+  "module": {
+    "type": "nodenext"
+  },
+  "sourceMaps": true,
+  "exclude": [".*\\.spec\\.tsx?$"]
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@compsych-ui-components/react-native",
+  "version": "3.2.4",
+  "description": "React Native UI components for compsych",
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "@compsych-ui-components/shared": "*",
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0"
+  }
+}

package/project.json

@@ -0,0 +1,19 @@
+{
+  "name": "react-native",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/react-native/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/js:swc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/react-native",
+        "main": "packages/react-native/src/index.ts",
+        "tsConfig": "packages/react-native/tsconfig.lib.json"
+      },
+      "dependsOn": ["^build"]
+    }
+  },
+  "implicitDependencies": ["shared"]
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './lib/button';
+export type { ButtonProps } from './lib/button';

package/src/lib/button.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+import { showAlert } from '@compsych/shared';
+
+export interface ButtonProps {
+  label?: string;
+  alertMessage?: string;
+  onPress?: () => void;
+}
+
+export function Button({
+  label = 'Click me',
+  alertMessage = 'Hello from @compsych/react-native!',
+  onPress,
+}: ButtonProps) {
+  const handlePress = () => {
+    if (onPress) {
+      onPress();
+    } else {
+      showAlert(alertMessage);
+    }
+  };
+
+  return (
+    <Pressable
+      style={({ pressed }) => [styles.button, pressed && styles.pressed]}
+      onPress={handlePress}
+      accessibilityRole="button"
+    >
+      <Text style={styles.label}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    backgroundColor: '#1976d2',
+    borderRadius: 4,
+    alignItems: 'center',
+  },
+  pressed: {
+    backgroundColor: '#1565c0',
+  },
+  label: {
+    color: '#ffffff',
+    fontSize: 14,
+  },
+});

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declarationDir": "../../dist/out-tsc",
+    "jsx": "react-native",
+    "moduleResolution": "node"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

package/tsconfig.lib.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "types": []
+  },
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"]
+}