feat: new template

.changeset/little-days-think.md

@@ -0,0 +1,5 @@
+---
+'@rnef/welcome-screen': patch
+---
+
+feat: introduce new template for newly created RNEF projects

packages/welcome-screen/README.md

@@ -0,0 +1,7 @@
+# @rnef/welcome-screen
+
+A welcome screen component for React Native apps, used in the official template for newly created RNEF projects.
+
+## Documentation
+
+For detailed documentation about RNEF and its tools, visit [RNEF Documentation](https://rnef.dev)

packages/welcome-screen/eslint.config.js

@@ -0,0 +1,3 @@
+import baseConfig from '../../eslint.config.js';
+
+export default baseConfig;

packages/welcome-screen/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@rnef/welcome-screen",
+  "version": "0.7.17",
+  "type": "module",
+  "main": "./dist/src/index.jsx",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    "types": "./dist/src/index.d.ts",
+    "default": "./dist/src/index.jsx"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "publish:npm": "npm publish --access public",
+    "publish:verdaccio": "npm publish --registry http://localhost:4873 --userconfig ../../.npmrc"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "19.0.0",
+    "react-native": "0.79.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/welcome-screen/project.json

@@ -0,0 +1,15 @@
+{
+  "name": "welcome-screen",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/welcome-screen/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "options": {
+        "assets": ["packages/welcome-screen/src/assets/*.png"]
+      }
+    }
+  }
+}

packages/welcome-screen/src/index.tsx

@@ -0,0 +1,225 @@
+import React from 'react';
+import {
+  Animated,
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from 'react-native';
+// @ts-expect-error deep import without declaration
+import openURLInBrowser from 'react-native/Libraries/Core/Devtools/openURLInBrowser';
+
+const ICONS = {
+  book: require('./assets/book-open.png'),
+  logo: require('./assets/building-skyscraper.png'),
+  debug: require('./assets/debug-check.png'),
+  zap: require('./assets/zap.png'),
+} as const;
+
+function Card({
+  dark,
+  icon,
+  title,
+  description,
+}: {
+  dark: boolean;
+  description: string;
+  icon: keyof typeof ICONS;
+  title: string;
+}) {
+  return (
+    <View style={styles.featureCard}>
+      <View style={styles.featureIconContainer}>
+        <Image
+          source={ICONS[icon]}
+          style={styles.featureIcon}
+          resizeMode="contain"
+        />
+      </View>
+      <View style={styles.featureContent}>
+        <Text style={[styles.featureTitle, { color: dark ? '#fff' : '#000' }]}>
+          {title}
+        </Text>
+        <Text style={[styles.featureDescription]}>{description}</Text>
+      </View>
+    </View>
+  );
+}
+
+function WelcomeScreen() {
+  const isDarkMode = useColorScheme() === 'dark';
+  const bgColor = isDarkMode ? '#000' : '#fff';
+  const textColor = isDarkMode ? '#fff' : '#000';
+  const scaleValue = React.useRef(new Animated.Value(1)).current;
+  const animatedStyle = { transform: [{ scale: scaleValue }] };
+
+  const onPressIn = () => {
+    Animated.spring(scaleValue, {
+      toValue: 0.95,
+      useNativeDriver: true,
+      speed: 20,
+      bounciness: 5,
+    }).start();
+  };
+
+  const onPressOut = () => {
+    Animated.spring(scaleValue, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 20,
+      bounciness: 5,
+    }).start();
+  };
+
+  const onPress = () => {
+    openURLInBrowser('https://rnef.dev');
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: bgColor }]}>
+      <View style={styles.header}>
+        <View style={styles.logoContainer}>
+          <Image
+            source={ICONS['logo']}
+            style={styles.logo}
+            resizeMode="contain"
+          />
+        </View>
+        <Text style={[styles.title, { color: textColor }]}>
+          Welcome to React Native Enterprise Framework!
+        </Text>
+      </View>
+
+      <View style={styles.content}>
+        <View style={styles.featureList}>
+          <Card
+            dark={isDarkMode}
+            icon="zap"
+            title="Start building"
+            description="Open App.tsx, edit and see your changes live here"
+          />
+          <Card
+            dark={isDarkMode}
+            icon="debug"
+            title="Debug with DevTools"
+            description={`Press ${Platform.select({
+              ios: 'Cmd+D',
+              android: 'Ctrl+M',
+            })} to access Dev Menu to debug, reload and inspect your app`}
+          />
+          <Card
+            dark={isDarkMode}
+            icon="book"
+            title="Learn more"
+            description="Visit our documentation and learn about Remote Cache, Brownfield, and more by Callstack"
+          />
+        </View>
+        <View style={styles.footer}>
+          <Animated.View style={[styles.buttonContainer, animatedStyle]}>
+            <Pressable
+              onPressIn={onPressIn}
+              onPressOut={onPressOut}
+              onPress={onPress}
+              style={styles.button}
+            >
+              <Text style={styles.buttonText}>View Documentation</Text>
+            </Pressable>
+          </Animated.View>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 2,
+  },
+  header: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    padding: 24,
+  },
+  logoContainer: {
+    width: 80,
+    height: 80,
+    marginBottom: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logo: {
+    width: 48,
+    height: 48,
+  },
+  title: {
+    fontSize: 36,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color: '#000',
+  },
+  content: {
+    flex: 1.2,
+    justifyContent: 'flex-start',
+    marginHorizontal: 16,
+  },
+  featureList: {
+    flex: 1,
+    flexShrink: 1,
+  },
+  footer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  buttonContainer: {
+    marginBottom: 60,
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  button: {
+    backgroundColor: 'rgb(120,55,245)',
+    borderRadius: 12,
+    padding: 16,
+    alignItems: 'center',
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  featureCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+  },
+  featureIconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 12,
+    marginRight: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  featureIcon: {
+    width: 30,
+    height: 30,
+  },
+  featureContent: {
+    flex: 1,
+    flexShrink: 1,
+  },
+  featureTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 4,
+  },
+  featureDescription: {
+    fontSize: 14,
+    color: '#666',
+  },
+});
+
+export default WelcomeScreen;

packages/welcome-screen/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

packages/welcome-screen/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["vite.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

packages/welcome-screen/tsconfig.spec.json

@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "module": "NodeNext"
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

packages/welcome-screen/vite.config.ts

@@ -0,0 +1,28 @@
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/welcome-screen',
+
+  plugins: [nxViteTsPaths(), nxCopyAssetsPlugin(['*.md'])],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    passWithNoTests: true,
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/packages/welcome-screen',
+      provider: 'v8',
+    },
+  },
+});