Add fixture app (#212)

* Add initial fixture app and config

* Fix lint errors

* Add fixture app contents

* Limit fixture lint to ts and tsx files

* Fix to run on Android emulator

* Code cleanup

.eslintrc

@@ -6,7 +6,7 @@
     "plugin:@shopify/prettier"
   ],
   "parserOptions": {
-    "project": "tsconfig.eslint.json"
+    "ecmaVersion": 6
   },
   "rules": {
     "import/extensions": "off",
@@ -20,10 +20,9 @@
     "func-style": "off",
     "react/display-name": "off",
     "id-length": "off",
-    "@shopify/restrict-full-import": [
-      "error",
-      "lodash"
-    ],
+    "@shopify/restrict-full-import": ["error", "lodash"],
+    "no-process-env": "off",
+    "@shopify/jsx-no-hardcoded-content": "off",
     "@typescript-eslint/naming-convention": [
       "off",
       {
@@ -32,5 +31,6 @@
         "prefix": ["T"]
       }
     ]
-  }
+  },
+  "ignorePatterns": ["node_modules", "dist"]
 }

.vscode/settings.json

@@ -2,7 +2,7 @@
   "javascript.validate.enable": false,
   "css.validate": false,
   "scss.validate": false,
-  "typescript.tsdk": "./node_modules/typescript/lib",
+  "typescript.tsdk": "node_modules/typescript/lib",
   "files.exclude": {
     "**/.git": true,
     "**/.svn": true,
@@ -24,5 +24,8 @@
     "source.fixAll.eslint": true
   },
   "editor.formatOnSave": true,
+  "[typescriptreact]": {
+    "editor.formatOnSave": true
+  },
   "eslint.validate": ["typescript", "typescriptreact"]
 }

fixture/.gitignore

@@ -0,0 +1,15 @@
+*.binlog
+*.hprof
+*.xcworkspace/
+*.zip
+.DS_Store
+.gradle/
+.idea/
+.vs/
+.xcode.env
+Pods/
+build/
+dist/
+local.properties
+msbuild.binlog
+node_modules/

fixture/.watchmanconfig

@@ -0,0 +1 @@
+{}

fixture/App.tsx

@@ -0,0 +1,63 @@
+import React, {useState} from 'react';
+import {
+  ThemeProvider,
+  createBox,
+  createText,
+  createRestyleComponent,
+  createVariant,
+  VariantProps,
+} from '@shopify/restyle';
+import {SafeAreaView, Switch} from 'react-native';
+
+import {theme, darkTheme, Theme} from './theme';
+
+const Box = createBox<Theme>();
+const Text = createText<Theme>();
+
+const Card = createRestyleComponent<
+  VariantProps<Theme, 'cardVariants'> & React.ComponentProps<typeof Box>,
+  Theme
+>([createVariant({themeKey: 'cardVariants'})], Box);
+
+const App = () => {
+  const [darkMode, setDarkMode] = useState(false);
+
+  const selectedTheme = darkMode ? darkTheme : theme;
+
+  return (
+    <ThemeProvider theme={selectedTheme}>
+      <Box backgroundColor="background" flex={1}>
+        <SafeAreaView style={{flex: 1}}>
+          <Box flex={1} paddingHorizontal="m" gap="s">
+            <Text variant="header">Welcome</Text>
+            <Card variant="primary">
+              <Text variant="body">
+                This is a simple example displaying how to use Restyle
+              </Text>
+            </Card>
+            <Card variant="secondary">
+              <Text variant="body">
+                You can find the theme in theme.ts. Update the theme values to
+                see how it changes this screen
+              </Text>
+            </Card>
+            <Card
+              variant="primary"
+              flexDirection="row"
+              justifyContent="space-between"
+              alignItems="center"
+            >
+              <Text variant="body">Toggle dark mode</Text>
+              <Switch
+                value={darkMode}
+                onValueChange={(value: boolean) => setDarkMode(value)}
+              />
+            </Card>
+          </Box>
+        </SafeAreaView>
+      </Box>
+    </ThemeProvider>
+  );
+};
+
+export default App;

fixture/android/build.gradle

@@ -0,0 +1,26 @@
+buildscript {
+    def androidTestAppDir = "../node_modules/react-native-test-app/android"
+    apply(from: "${androidTestAppDir}/dependencies.gradle")
+
+    repositories {
+        mavenCentral()
+        google()
+    }
+
+    dependencies {
+        getReactNativeDependencies().each { dependency ->
+            classpath(dependency)
+        }
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url("${rootDir}/../node_modules/react-native/android")
+        }
+        mavenCentral()
+        google()
+    }
+}

fixture/android/gradle.properties

@@ -0,0 +1,45 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the Gradle Daemon. The setting is
+# particularly useful for configuring JVM memory settings for build performance.
+# This does not affect the JVM settings for the Gradle client VM.
+# The default is `-Xmx512m -XX:MaxMetaspaceSize=256m`.
+org.gradle.jvmargs=-Xmx2g -XX:MaxMetaspaceSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+
+# When configured, Gradle will fork up to org.gradle.workers.max JVMs to execute
+# projects in parallel. To learn more about parallel task execution, see the
+# section on Gradle build performance:
+# https://docs.gradle.org/current/userguide/performance.html#parallel_execution.
+# Default is `false`.
+#org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true
+
+# Version of Flipper to use with React Native. Default value is whatever React
+# Native defaults to. To disable Flipper, set it to `false`.
+#FLIPPER_VERSION=0.125.0
+
+# Enable Fabric at runtime.
+#USE_FABRIC=1
+
+# Enable new architecture, i.e. Fabric + TurboModule - implies USE_FABRIC=1.
+# Note that this is incompatible with web debugging.
+#newArchEnabled=true
+
+# Uncomment the line below if building react-native from source
+#ANDROID_NDK_VERSION=21.4.7075529
+
+# Version of Kotlin to build against.
+#KOTLIN_VERSION=1.7.10

fixture/android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-bin.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists