chore: add react-native workspace (#305)

.github/workflows/react-native.yml

@@ -0,0 +1,24 @@
+name: sdk/react-native
+
+on:
+  push:
+    branches: [main, 'feat/**']
+    paths-ignore:
+      - '**.md' #Do not need to run CI for markdown changes.
+  pull_request:
+    branches: [main, 'feat/**']
+    paths-ignore:
+      - '**.md'
+
+jobs:
+  build-test-react-native:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - id: shared
+        name: Shared CI Steps
+        uses: ./actions/ci
+        with:
+          workspace_name: '@launchdarkly/react-native-client-sdk'
+          workspace_path: packages/sdk/react-native

package.json

@@ -10,6 +10,7 @@
     "packages/sdk/server-node",
     "packages/sdk/cloudflare",
     "packages/sdk/cloudflare/example",
+    "packages/sdk/react-native",
     "packages/sdk/vercel",
     "packages/sdk/akamai-base",
     "packages/sdk/akamai-base/example",

packages/sdk/cloudflare/example/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example",
+  "name": "cloudflare-example",
   "version": "0.0.0",
   "type": "module",
   "module": "./dist/index.mjs",

packages/sdk/cloudflare/tsconfig.json

@@ -1,22 +1,23 @@
 {
   "compilerOptions": {
-    // Uses "." so it can load package.json.
-    "rootDir": ".",
-    "outDir": "dist",
-    "target": "ES2017",
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "declarationMap": true,
     "lib": ["es6"],
     "module": "ES6",
-    "strict": true,
+    "moduleResolution": "node",
     "noImplicitOverride": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "declaration": true,
-    "declarationMap": true, // enables importers to jump to source
+    "outDir": "dist",
     "resolveJsonModule": true,
+    // Uses "." so it can load package.json.
+    "rootDir": ".",
+    "skipLibCheck": true,
+    // enables importers to jump to source
+    "sourceMap": true,
+    "strict": true,
     "stripInternal": true,
-    "moduleResolution": "node",
-    "types": ["@cloudflare/workers-types", "jest", "node"],
-    "skipLibCheck": true
+    "target": "ES2017",
+    "types": ["@cloudflare/workers-types", "jest", "node"]
   },
   "exclude": ["**/*.test.ts", "dist", "node_modules", "__tests__", "example"]
 }

packages/sdk/react-native/CHANGELOG.md

@@ -0,0 +1,3 @@
+# Changelog
+
+All notable changes to the LaunchDarkly SDK for React Native will be documented in this file. This project adheres to [Semantic Versioning](https://semver.org).

packages/sdk/react-native/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2023 Catamorphic, Co.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

packages/sdk/react-native/README.md

@@ -0,0 +1,68 @@
+# LaunchDarkly React Native SDK
+
+:warning: UNSUPPORTED This SDK is in pre-release development and is not supported.
+
+[![NPM][sdk-react-native-npm-badge]][sdk-react-native-npm-link]
+[![Actions Status][sdk-react-native-ci-badge]][sdk-react-native-ci]
+[![Documentation][sdk-react-native-ghp-badge]][sdk-react-native-ghp-link]
+[![NPM][sdk-react-native-dm-badge]][sdk-react-native-npm-link]
+[![NPM][sdk-react-native-dt-badge]][sdk-react-native-npm-link]
+
+The LaunchDarkly React Native SDK is designed primarily for use in mobile environments. It follows the client-side LaunchDarkly model for multi-user contexts.
+
+This SDK is a replacement of [launchdarkly-react-native-client-sdk](https://github.com/launchdarkly/react-native-client-sdk). Please consider updating your application to use this package instead.
+
+For more information, see the [complete reference guide for this SDK](https://docs.launchdarkly.com/sdk/client-side/react-native).
+
+## Install
+
+```shell
+yarn add @launchdarkly/react-native-client-sdk
+```
+
+## Quickstart
+
+TODO
+
+```typescript
+import { init } from '@launchdarkly/react-native-client-sdk';
+
+// TODO
+```
+
+See the full [example app](https://github.com/launchdarkly/js-core/tree/main/packages/sdk/react-native/example).
+
+## Developing this SDK
+
+:information_source: You will need to setup your sdk key in the example dir. See the example [README](https://github.com/launchdarkly/js-core/blob/main/packages/sdk/react-native/example/README.md#L1).
+
+```shell
+# at js-core repo root
+yarn && yarn build
+
+# at sdk/react-native repo
+yarn android | ios
+```
+
+## About LaunchDarkly
+
+- LaunchDarkly is a continuous delivery platform that provides feature flags as a service and allows developers to iterate quickly and safely. We allow you to easily flag your features and manage them from the LaunchDarkly dashboard. With LaunchDarkly, you can:
+  - Roll out a new feature to a subset of your users (like a group of users who opt-in to a beta tester group), gathering feedback and bug reports from real-world use cases.
+  - Gradually roll out a feature to an increasing percentage of users, and track the effect that the feature has on key metrics (for instance, how likely is a user to complete a purchase if they have feature A versus feature B?).
+  - Turn off a feature that you realize is causing performance problems in production, without needing to re-deploy, or even restart the application with a changed configuration file.
+  - Grant access to certain features based on user attributes, like payment plan (eg: users on the ‘gold’ plan get access to more features than users in the ‘silver’ plan). Disable parts of your application to facilitate maintenance, without taking everything offline.
+- LaunchDarkly provides feature flag SDKs for a wide variety of languages and technologies. Read [our documentation](https://docs.launchdarkly.com/sdk) for a complete list.
+- Explore LaunchDarkly
+  - [launchdarkly.com](https://www.launchdarkly.com/ 'LaunchDarkly Main Website') for more information
+  - [docs.launchdarkly.com](https://docs.launchdarkly.com/ 'LaunchDarkly Documentation') for our documentation and SDK reference guides
+  - [apidocs.launchdarkly.com](https://apidocs.launchdarkly.com/ 'LaunchDarkly API Documentation') for our API documentation
+  - [blog.launchdarkly.com](https://blog.launchdarkly.com/ 'LaunchDarkly Blog Documentation') for the latest product updates
+
+[sdk-react-native-ci-badge]: https://github.com/launchdarkly/js-core/actions/workflows/react-native.yml/badge.svg
+[sdk-react-native-ci]: https://github.com/launchdarkly/js-core/actions/workflows/react-native.yml
+[sdk-react-native-npm-badge]: https://img.shields.io/npm/v/@launchdarkly/react-native-client-sdk.svg?style=flat-square
+[sdk-react-native-npm-link]: https://www.npmjs.com/package/@launchdarkly/react-native-client-sdk
+[sdk-react-native-ghp-badge]: https://img.shields.io/static/v1?label=GitHub+Pages&message=API+reference&color=00add8
+[sdk-react-native-ghp-link]: https://launchdarkly.github.io/js-core/packages/sdk/react-native/docs/
+[sdk-react-native-dm-badge]: https://img.shields.io/npm/dm/@launchdarkly/react-native-client-sdk.svg?style=flat-square
+[sdk-react-native-dt-badge]: https://img.shields.io/npm/dt/@launchdarkly/react-native-client-sdk.svg?style=flat-square

packages/sdk/react-native/example/.gitignore

@@ -0,0 +1,36 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+.env
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

packages/sdk/react-native/example/App.tsx

@@ -0,0 +1,44 @@
+import { CLIENT_SIDE_SDK_KEY } from '@env';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { init, type LDClientImpl } from '@launchdarkly/react-native-client-sdk';
+
+const context = { kind: 'user', key: 'test-user-1' };
+
+export default function App() {
+  const [ldc, setLdc] = useState<LDClientImpl>();
+  const [flag, setFlag] = useState<boolean>(false);
+
+  useEffect(() => {
+    init(CLIENT_SIDE_SDK_KEY, context)
+      .then((c) => {
+        setLdc(c);
+      })
+      .catch((e) => console.log(e));
+  }, []);
+
+  useEffect(() => {
+    const f = ldc?.boolVariation('dev-test-flag', false);
+    setFlag(f ?? false);
+  }, [ldc]);
+
+  return (
+    <View style={styles.container}>
+      <Text>{flag ? <>devTestFlag: {`${flag}`}</> : <>loading...</>}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+});

packages/sdk/react-native/example/README.md

@@ -0,0 +1,20 @@
+## LaunchDarkly React Native SDK example app
+
+To run the example app:
+
+1. Create a `.env` file at the same level as this README
+2. Add your client-side sdk key to that `.env` file:
+
+```shell
+CLIENT_SIDE_SDK_KEY=abcdef12456
+```
+
+3.  Finally
+
+```shell
+# android
+yarn && yarn android
+
+# ios
+yarn && yarn ios
+```

packages/sdk/react-native/example/app.json

@@ -0,0 +1,28 @@
+{
+  "expo": {
+    "name": "react-native-example",
+    "slug": "react-native-example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

packages/sdk/react-native/example/babel.config.js

@@ -0,0 +1,15 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module:react-native-dotenv',
+        {
+          safe: true,
+          allowUndefined: false,
+        },
+      ],
+    ],
+  };
+};

packages/sdk/react-native/example/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "react-native-example",
+  "version": "0.0.1",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android --clear",
+    "ios": "expo start --ios --clear",
+    "web": "expo start --web --clear",
+    "clean": "yarn cache clean && rm -rf node_modules"
+  },
+  "dependencies": {
+    "expo": "~49.0.16",
+    "expo-status-bar": "~1.7.1",
+    "react": "18.2.0",
+    "react-native": "0.72.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.14",
+    "@types/react-native-dotenv": "^0.2.1",
+    "react-native-dotenv": "^3.4.9",
+    "typescript": "^5.2.2"
+  }
+}

packages/sdk/react-native/example/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "typeRoots": ["./types"]
+  }
+}

packages/sdk/react-native/example/types/env.d.ts

@@ -0,0 +1,4 @@
+declare module '@env' {
+  // eslint-disable-next-line import/prefer-default-export
+  export const CLIENT_SIDE_SDK_KEY: string;
+}

packages/sdk/react-native/jest.config.json

@@ -0,0 +1,9 @@
+{
+  "transform": { "^.+\\.ts?$": "ts-jest" },
+  "testMatch": ["**/*.test.ts?(x)"],
+  "testPathIgnorePatterns": ["node_modules", "example", "dist"],
+  "modulePathIgnorePatterns": ["dist"],
+  "testEnvironment": "node",
+  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
+  "collectCoverageFrom": ["src/**/*.ts"]
+}

packages/sdk/react-native/link-dev.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+
+echo "===== Installing all dependencies..."
+yarn
+
+declare -a examples=(example)
+
+for example in "${examples[@]}"
+do
+  echo "===== Linking to $example"
+  MODULES_DIR=$example/node_modules
+  SDK_DIR=$MODULES_DIR/@launchdarkly/react-native-client-sdk
+  COMMON_DIR="$SDK_DIR"/node_modules/@launchdarkly/js-sdk-common
+  CLIENT_COMMON_DIR="$SDK_DIR"/node_modules/@launchdarkly/js-client-sdk-common
+
+  mkdir -p "$MODULES_DIR"
+  rm -rf "$SDK_DIR"
+  mkdir -p "$COMMON_DIR"
+  mkdir -p "$CLIENT_COMMON_DIR"
+
+  rsync -aq package.json "$SDK_DIR"
+  rsync -aq LICENSE "$SDK_DIR"
+  rsync -aq node_modules "$SDK_DIR"
+  rsync -aq src "$SDK_DIR"
+  rsync -av dist "$SDK_DIR"
+
+  rsync -aq ../../shared/common/ "$COMMON_DIR"
+  rm -rf "$CLIENT_COMMON_DIR"
+  rsync -aq ../../shared/sdk-client/ "$CLIENT_COMMON_DIR"
+done