Created example project

This project shows how to use this library across all platforms and data types! It's also useful for testing out new backends you may create on your own.~
Wave-Play · Sep 25, 2022 · 9c9d7ad · 9c9d7ad
1 parent 130d2b2
commit 9c9d7ad
Show file tree

Hide file tree

Showing 24 changed files with 11,966 additions and 0 deletions.
diff --git a/examples/basic-example/.expo-shared/assets.json b/examples/basic-example/.expo-shared/assets.json
@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}
diff --git a/examples/basic-example/.gitignore b/examples/basic-example/.gitignore
@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
diff --git a/examples/basic-example/App.tsx b/examples/basic-example/App.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { PilotArea, PilotRoute } from '@waveplay/pilot';
+import * as HomePage from './pages';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+export default function App() {
+  return (
+		<SafeAreaProvider>
+			<PilotArea>
+				<PilotRoute path={'/'} component={HomePage.default} default={true}/>
+			</PilotArea>
+		</SafeAreaProvider>
+  );
+}
diff --git a/examples/basic-example/README.md b/examples/basic-example/README.md
@@ -0,0 +1,25 @@
+<h1 align="center">Stashy: Basic Example</h1>
+
+This is a simple TypeScript project using NextJS and Expo to show how to save and retrieve data from Stashy in the browser, React Native, and NextJS server side.
+
+## Usage
+
+First things first, install dependencies.
+
+```bash
+yarn install
+```
+
+To run this example on the web:
+
+```bash
+yarn start:next
+```
+
+To run this example on native:
+
+```bash
+yarn start:expo
+```
+
+You can run both `start:next` and `start:expo` at the same time.
diff --git a/examples/basic-example/app.json b/examples/basic-example/app.json
@@ -0,0 +1,35 @@
+{
+  "expo": {
+    "name": "Stashy: Basic example",
+    "slug": "stashy-basic-example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.waveplay.stashybasicexample"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      },
+      "package": "com.waveplay.stashybasicexample"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}
diff --git a/examples/basic-example/assets/adaptive-icon.png b/examples/basic-example/assets/adaptive-icon.png
diff --git a/examples/basic-example/assets/favicon.png b/examples/basic-example/assets/favicon.png
diff --git a/examples/basic-example/assets/icon.png b/examples/basic-example/assets/icon.png
diff --git a/examples/basic-example/assets/splash.png b/examples/basic-example/assets/splash.png
diff --git a/examples/basic-example/babel.config.js b/examples/basic-example/babel.config.js
@@ -0,0 +1,9 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: [
+			'babel-preset-expo',
+			['module:metro-react-native-babel-preset', { useTransformReactJSXExperimental: true }]
+		]
+  };
+};
diff --git a/examples/basic-example/components/number-button.tsx b/examples/basic-example/components/number-button.tsx
@@ -0,0 +1,45 @@
+import { COLOR, COLOR_BACKGROUND } from '../core/constants';
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+
+interface NumberButtonProps {
+	index: number
+	number: number
+	onPress: (number: number) => void
+	selected?: boolean
+}
+const NumberButton = (props: NumberButtonProps) => {
+	const { index, number, onPress, selected } = props;
+
+	return (
+		<TouchableOpacity key={number} style={[styles.container, {
+			backgroundColor: selected ? COLOR_BACKGROUND : undefined,
+			borderColor: COLOR_BACKGROUND,
+			borderWidth: selected ? 0 : 2,
+			marginLeft: index === 0 ? 0 : 8
+		}]} onPress={() => {console.log(`Pressing ${number}`); onPress(number)}}>
+			<Text style={styles.text}>{number}</Text>
+		</TouchableOpacity>
+	)
+};
+export default NumberButton;
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		height: 48,
+		display: 'flex',
+		alignItems: 'center',
+		justifyContent: 'center',
+		textAlign: 'center',
+		borderRadius: 24,
+		paddingLeft: 16,
+		paddingRight: 16,
+		marginTop: 16
+	},
+	text: {
+		color: COLOR,
+		fontSize: 20,
+		fontWeight: '600'
+	}
+});
diff --git a/examples/basic-example/core/constants.ts b/examples/basic-example/core/constants.ts
@@ -0,0 +1,4 @@
+
+// Color contants
+export const COLOR = '#FF6F00';
+export const COLOR_BACKGROUND = '#FFD54F';
diff --git a/examples/basic-example/core/use-safe-area.native.ts b/examples/basic-example/core/use-safe-area.native.ts
@@ -0,0 +1,3 @@
+import { useSafeAreaInsets as useSafeAreaInsets2 } from 'react-native-safe-area-context';
+
+export const useSafeAreaInsets = useSafeAreaInsets2;
diff --git a/examples/basic-example/core/use-safe-area.ts b/examples/basic-example/core/use-safe-area.ts
@@ -0,0 +1,4 @@
+export const useSafeAreaInsets = () => ({
+	top: 0,
+	bottom: 0
+});
diff --git a/examples/basic-example/index.js b/examples/basic-example/index.js
@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);
diff --git a/examples/basic-example/metro.config.js b/examples/basic-example/metro.config.js
@@ -0,0 +1,7 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+
+const defaultConfig = getDefaultConfig(__dirname);
+defaultConfig.resolver.sourceExts.push('cjs');
+
+module.exports = defaultConfig;
diff --git a/examples/basic-example/next-env.d.ts b/examples/basic-example/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/basic-example/next.config.js b/examples/basic-example/next.config.js
@@ -0,0 +1,39 @@
+const withTM = require('next-transpile-modules')(['@expo/next-adapter', '@waveplay/pilot', '@waveplay/stashy', 'react-native-web']);
+const nextBuildId = require('next-build-id');
+
+const nextConfig = {
+	experimental: {
+		forceSwcTransforms: true,
+		swcTraceProfiling: true,
+		swcPlugins: [
+			['@nissy-dev/swc-plugin-react-native-web', { 'commonjs': false }]
+		]
+	},
+	generateBuildId: () => nextBuildId({ dir: __dirname, describe: true }),
+	webpack: (config) => {
+		return {
+			...config,
+			resolve: {
+				...config.resolve || {},
+				alias: {
+					...config.resolve.alias || {},
+					'react-native': 'react-native-web'
+				},
+				extensions: [
+					'.web.ts',
+					'.web.tsx',
+					'.js',
+					'.jsx',
+					'.ts',
+					'.tsx'
+				],
+				fallback: {
+					...config.resolve.fallback || {},
+					fs: false
+				}
+			}
+		};
+	}
+};
+
+module.exports = withTM(nextConfig);
diff --git a/examples/basic-example/package.json b/examples/basic-example/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "stashy-example",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "build:next": "next build",
+    "start:expo": "expo start",
+    "start:next": "next dev",
+    "start": "expo start --dev-client",
+    "android": "expo run:android",
+    "ios": "expo run:ios"
+  },
+  "dependencies": {
+    "@expo/next-adapter": "4.0.12",
+    "@react-native-async-storage/async-storage": "^1.17.10",
+    "@waveplay/pilot": "1.1.0",
+    "@waveplay/stashy": "1.3.2",
+    "expo": "~46.0.9",
+    "expo-splash-screen": "~0.16.2",
+    "expo-status-bar": "~1.4.0",
+    "next": "12.2.5",
+    "nookies": "^2.5.2",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.5",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-web": "0.18.9"
+  },
+  "devDependencies": {
+    "@babel/core": "7.12.9",
+    "@nissy-dev/swc-plugin-react-native-web": "0.2.4",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-native": "0.69.5",
+    "next-build-id": "3.0.0",
+    "next-compose-plugins": "2.2.1",
+    "next-transpile-modules": "9.0.0",
+    "typescript": "^4.8.3",
+    "webpack": "5.74.0"
+  }
+}
diff --git a/examples/basic-example/pages/_document.tsx b/examples/basic-example/pages/_document.tsx
@@ -0,0 +1,27 @@
+/**
+ * © 2021 WavePlay <[email protected]>
+ */
+import React from 'react';
+import { getInitialProps } from '@expo/next-adapter/document';
+import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
+
+export default class CustomDocument extends Document {
+  static async getInitialProps(context: DocumentContext) {
+    const initialProps = await Document.getInitialProps(context);
+    return initialProps;
+  }
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+};
+CustomDocument.getInitialProps = getInitialProps;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { useSafeAreaInsets as useSafeAreaInsets2 } from 'react-native-safe-area-context';

		export const useSafeAreaInsets = useSafeAreaInsets2;