chore: Add React SDK FDv2 data saving mode example (#1425)

## Summary

Adds `packages/sdk/react/examples/example-fdv2`, a minimal Vite + React
app for exercising the React SDK's FDv2 **data saving mode**
(`dataSystem`) configuration -- the React counterpart to the existing
browser and React Native `example-fdv2` apps. Intended for manual
testing of the EAP feature.

What it does:
- Enables the FDv2 data system via the provider's `ldOptions`
(`dataSystem: {}`) in `src/LDClient.tsx`, with a commented
manual-mode-switching variant.
- Evaluates a flag with `useBoolVariation` (updates live).
- Drives `setConnectionMode` (streaming / polling / offline / one-shot /
background / automatic), `setStreaming`, and `identify` (context
switching) through `useLDClient()`.
- Includes an action log.

Also registers the new workspace in the root `package.json`.

### Run it
```bash
yarn workspaces foreach -pR --topological-dev --from '@launchdarkly/react-sdk' run build
LAUNCHDARKLY_CLIENT_SIDE_ID=your-id yarn workspace @launchdarkly/react-sdk-example-fdv2 start
```

### Validation
- `vite build` succeeds (30 modules bundle cleanly).
- The `dataSystem` config typechecks against the React SDK.
- `tsc` reports one pre-existing `@types/react` skew error (`bigint` not
assignable to `ReactNode`) that also affects the existing `hello-react`
example; it does not affect the Vite dev/build runtime.

### Notes
- Stacked on the FDv2 EAP branch
(`sdk-2460/fdv2-eap-browser-react-native`, PR #1419) because the example
relies on the public `dataSystem` option that the EAP work exposes.
Rebase onto `main` once #1419 merges.
- The example pins `@launchdarkly/react-sdk` to the workspace version
(resolves to the local build), consistent with the other example-fdv2
apps.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes affect CI contract-test harness versions and RN SDK config
translation for FDv2; runtime SDK behavior is mostly doc/API surface,
but mis-mapped `dataSystem` in contract tests could hide regressions.
> 
> **Overview**
> Adds a new Vite + React **data saving mode** example at
`packages/sdk/react/examples/features/data-saving-mode`, registers it in
the root workspace and `release-please-config.json`, and documents
manual EAP testing (`dataSystem`, `setConnectionMode`, `setStreaming`,
`identify`).
> 
> **FDv2 EAP documentation:** Replaces `@internal` / experimental
warnings on `dataSystem` and FDv2 `setConnectionMode` /
`getConnectionMode` in shared `LDOptions`, browser, and React Native
with **Early Access** messaging and a link to the data-saving-mode docs;
FDv2 examples drop `@ts-ignore` where types are now public.
> 
> **Contract test CI:** Browser workflow runs **FDv1** then **FDv2**
harness (`version: v3`, separate suppressions) without stopping the
service between runs. React Native CI drops the pinned harness tarball,
passes `GITHUB_TOKEN`, and runs FDv1 + FDv2 via the official harness
downloader; `ClientEntity` maps harness `dataSystem` (connection modes,
initializers/synchronizers, payload filter) into RN `LDOptions`, with
FDv1 streaming/polling config unchanged when `dataSystem` is absent.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
ff9253f. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: kinyoklion

package.json

@@ -22,6 +22,7 @@
     "packages/sdk/fastly/example",
     "packages/sdk/react",
     "packages/sdk/react/contract-tests",
+    "packages/sdk/react/examples/features/data-saving-mode",
     "packages/sdk/react/examples/features/bootstrap",
     "packages/sdk/react/examples/hello-react",
     "packages/sdk/react/examples/react-server-example",

packages/sdk/react/examples/features/data-saving-mode/.env.example

@@ -0,0 +1,5 @@
+# Set when running yarn start / yarn build
+# (e.g. LAUNCHDARKLY_CLIENT_SIDE_ID=xxx LAUNCHDARKLY_FLAG_KEY=my-flag yarn start).
+
+LAUNCHDARKLY_CLIENT_SIDE_ID=
+LAUNCHDARKLY_FLAG_KEY=sample-feature

packages/sdk/react/examples/features/data-saving-mode/.gitignore

@@ -0,0 +1,19 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# production
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/sdk/react/examples/features/data-saving-mode/README.md

@@ -0,0 +1,39 @@
+# LaunchDarkly React SDK FDv2 example
+
+A minimal [Vite](https://vitejs.dev/) + React app that exercises the React SDK's
+FDv2 **data saving mode** (`dataSystem`) configuration.
+
+> [!NOTE]
+> Data saving mode is a LaunchDarkly Early Access Program (EAP) feature. The
+> `dataSystem` option and its behaviors are not stable and may change before
+> General Availability.
+
+## What it demonstrates
+
+- Enabling the FDv2 data system through the provider's `ldOptions`
+  (`dataSystem: {}`), in [`src/LDClient.tsx`](./src/LDClient.tsx).
+- Evaluating a flag with `useBoolVariation`, which updates live as the data
+  system delivers changes.
+- Switching the connection mode at runtime (`streaming`, `polling`, `offline`,
+  `one-shot`, `background`, or automatic) via `useLDClient().setConnectionMode`.
+- Toggling streaming via `setStreaming`.
+- Switching the evaluation context via `identify`.
+
+## Run it
+
+This example uses the workspace build of `@launchdarkly/react-sdk`. From the
+repository root, build the SDK and its dependencies first:
+
+```bash
+yarn workspaces foreach -pR --topological-dev --from '@launchdarkly/react-sdk' run build
+```
+
+Then start the example with your client-side ID (and optionally a flag key):
+
+```bash
+LAUNCHDARKLY_CLIENT_SIDE_ID=your-client-side-id \
+LAUNCHDARKLY_FLAG_KEY=your-flag-key \
+yarn workspace @launchdarkly/react-sdk-example-data-saving-mode start
+```
+
+Open the URL Vite prints (default <http://localhost:5173>).

packages/sdk/react/examples/features/data-saving-mode/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LaunchDarkly React SDK FDv2 Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

packages/sdk/react/examples/features/data-saving-mode/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@launchdarkly/react-sdk-example-data-saving-mode",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@launchdarkly/react-sdk": "4.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "tsc": "tsc"
+  },
+  "devDependencies": {
+    "@types/node": "^16.18.18",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^4",
+    "typescript": "^5.0.0",
+    "vite": "^6"
+  }
+}

packages/sdk/react/examples/features/data-saving-mode/src/App.css

@@ -0,0 +1,59 @@
+.App {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 24px 16px 48px;
+}
+
+.App h1 {
+  font-size: 22px;
+}
+
+.App h2 {
+  font-size: 15px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: #5a5f6b;
+  margin-bottom: 6px;
+}
+
+.status {
+  font-style: italic;
+  color: #5a5f6b;
+}
+
+section {
+  border-top: 1px solid #e1e3e8;
+  padding: 12px 0;
+}
+
+.buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.buttons button {
+  background-color: #405bff;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.buttons button:hover {
+  background-color: #2f47cc;
+}
+
+.log {
+  background-color: #1a1a1a;
+  color: #ffa500;
+  font-family: monospace;
+  font-size: 12px;
+  border-radius: 6px;
+  padding: 10px;
+  max-height: 200px;
+  overflow: auto;
+  white-space: pre-wrap;
+}

packages/sdk/react/examples/features/data-saving-mode/src/App.tsx

@@ -0,0 +1,127 @@
+import { useState } from 'react';
+
+import {
+  useBoolVariation,
+  useInitializationStatus,
+  useLDClient,
+} from '@launchdarkly/react-sdk';
+import type { FDv2ConnectionMode, LDContext } from '@launchdarkly/react-sdk';
+
+import './App.css';
+
+// Set FLAG_KEY to the feature flag key you want to evaluate.
+const FLAG_KEY = import.meta.env.LAUNCHDARKLY_FLAG_KEY ?? 'sample-feature';
+
+// FDv2 connection modes the data system can use.
+const CONNECTION_MODES: FDv2ConnectionMode[] = [
+  'streaming',
+  'polling',
+  'offline',
+  'one-shot',
+  'background',
+];
+
+const CONTEXTS: LDContext[] = [
+  { kind: 'user', key: 'example-user-key', name: 'Sandy' },
+  { kind: 'user', key: 'example-user-key-2', name: 'Alex' },
+];
+
+function App() {
+  const { status } = useInitializationStatus();
+  const flagValue = useBoolVariation(FLAG_KEY, false);
+  const ldc = useLDClient();
+
+  const [mode, setMode] = useState<string>('automatic');
+  const [streaming, setStreaming] = useState<string>('default');
+  const [contextIndex, setContextIndex] = useState(0);
+  const [log, setLog] = useState<string[]>([]);
+
+  const addLog = (line: string) =>
+    setLog((prev) => [`${new Date().toISOString().slice(11, 23)}  ${line}`, ...prev].slice(0, 25));
+
+  const onSetConnectionMode = (next?: FDv2ConnectionMode) => {
+    ldc.setConnectionMode(next);
+    setMode(next ?? 'automatic');
+    addLog(`setConnectionMode(${next ?? 'undefined'})`);
+  };
+
+  const onSetStreaming = (next?: boolean) => {
+    ldc.setStreaming(next);
+    setStreaming(next === undefined ? 'default' : String(next));
+    addLog(`setStreaming(${next === undefined ? 'undefined' : next})`);
+  };
+
+  const onSwitchContext = async () => {
+    const next = (contextIndex + 1) % CONTEXTS.length;
+    setContextIndex(next);
+    addLog(`identify(${JSON.stringify(CONTEXTS[next])})`);
+    const result = await ldc.identify(CONTEXTS[next]);
+    addLog(`identify result: ${result.status}`);
+  };
+
+  const ready = status !== 'initializing';
+  let statusMessage = 'Initializing…';
+  if (status === 'complete') {
+    statusMessage = 'SDK successfully initialized.';
+  } else if (status === 'failed') {
+    statusMessage = 'SDK failed to initialize. Check your client-side ID and network.';
+  }
+
+  return (
+    <div className="App">
+      <h1>LaunchDarkly React FDv2 Demo</h1>
+      <p className="status">{statusMessage}</p>
+
+      <section>
+        <h2>Flag</h2>
+        <p>
+          <code>{FLAG_KEY}</code> = <strong>{ready ? String(flagValue) : '…'}</strong>
+        </p>
+      </section>
+
+      <section>
+        <h2>Connection mode</h2>
+        <p>
+          Current: <strong>{mode}</strong>
+        </p>
+        <div className="buttons">
+          {CONNECTION_MODES.map((m) => (
+            <button key={m} onClick={() => onSetConnectionMode(m)}>
+              {m}
+            </button>
+          ))}
+          <button onClick={() => onSetConnectionMode(undefined)}>automatic (clear)</button>
+        </div>
+      </section>
+
+      <section>
+        <h2>Streaming</h2>
+        <p>
+          Current: <strong>{streaming}</strong>
+        </p>
+        <div className="buttons">
+          <button onClick={() => onSetStreaming(true)}>setStreaming(true)</button>
+          <button onClick={() => onSetStreaming(false)}>setStreaming(false)</button>
+          <button onClick={() => onSetStreaming(undefined)}>setStreaming(undefined)</button>
+        </div>
+      </section>
+
+      <section>
+        <h2>Context</h2>
+        <p>
+          Current: <code>{JSON.stringify(CONTEXTS[contextIndex])}</code>
+        </p>
+        <div className="buttons">
+          <button onClick={onSwitchContext}>Switch context (identify)</button>
+        </div>
+      </section>
+
+      <section>
+        <h2>Log</h2>
+        <pre className="log">{log.join('\n')}</pre>
+      </section>
+    </div>
+  );
+}
+
+export default App;

packages/sdk/react/examples/features/data-saving-mode/src/LDClient.tsx

@@ -0,0 +1,32 @@
+import { createLDReactProvider, LDContext, LDReactProviderOptions } from '@launchdarkly/react-sdk';
+
+const LAUNCHDARKLY_CLIENT_SIDE_ID = import.meta.env.LAUNCHDARKLY_CLIENT_SIDE_ID ?? '';
+
+// The initial evaluation context. This context should appear on your
+// LaunchDarkly contexts dashboard soon after you run the demo.
+export const initialContext: LDContext = {
+  kind: 'user',
+  key: 'example-user-key',
+  name: 'Sandy',
+};
+
+const options: LDReactProviderOptions = {
+  ldOptions: {
+    // Enable the FDv2 data system. An empty object opts in with default
+    // behavior: a streaming connection for real-time flag updates, with
+    // polling as a fallback.
+    //
+    // Data saving mode is an Early Access feature. To pin a specific
+    // connection mode instead, use manual mode switching, for example:
+    //   dataSystem: {
+    //     automaticModeSwitching: { type: 'manual', initialConnectionMode: 'polling' },
+    //   },
+    dataSystem: {},
+  },
+};
+
+export const LDReactProvider = createLDReactProvider(
+  LAUNCHDARKLY_CLIENT_SIDE_ID,
+  initialContext,
+  options,
+);

packages/sdk/react/examples/features/data-saving-mode/src/index.css

@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  background-color: #f4f5f8;
+  color: #21242b;
+}