chore: adding more samples for precomp

samples/react/src/SamplesPage.tsx

@@ -1,7 +1,15 @@
 import { ReactNode, useEffect } from 'react';
 
 const SAMPLES = [
-  import('./samples/PrecomputedClientBasic'),
+  // Precomputed Evaluations Client
+  import('./samples/precomputed-client/PrecomputedInitialize'),
+  import('./samples/precomputed-client/PrecomputedClientBasic'),
+  import('./samples/precomputed-client/PrecomputedClientCheckGate'),
+  import('./samples/precomputed-client/PrecomputedClientGetDynamicConfig'),
+  import('./samples/precomputed-client/PrecomputedClientGetLayer'),
+  import('./samples/precomputed-client/PrecomputedClientGetLogEvent'),
+  import('./samples/precomputed-client/PrecomputedClientShutdown'),
+
   import('./samples/OnDeviceClientBasic'),
   import('./samples/BootstrapInit'),
 ];

samples/react/src/samples/PrecomputedClientBasic.tsx → samples/react/src/samples/precomputed-client/PrecomputedClientBasic.tsx

@@ -2,7 +2,7 @@
 import { PrecomputedEvaluationsClient } from '@statsig/precomputed-evaluations';
 
 // </snippet>
-import { STATSIG_CLIENT_KEY as YOUR_CLIENT_KEY } from '../Contants';
+import { STATSIG_CLIENT_KEY as YOUR_CLIENT_KEY } from '../../Contants';
 
 // prettier-ignore
 export default async function Sample(): Promise<void> {

samples/react/src/samples/precomputed-client/PrecomputedClientCheckGate.tsx

@@ -0,0 +1,12 @@
+import { myStatsigClient } from './PrecomputedClientInstance';
+
+// prettier-ignore
+export default async function Sample(): Promise<void> {
+// <snippet>
+if (myStatsigClient.checkGate("new_homepage_design")) {
+  // Gate is on, show new home page
+} else {
+  // Gate is off, show old home page
+}
+// </snippet>
+}

samples/react/src/samples/precomputed-client/PrecomputedClientGetDynamicConfig.tsx

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { myStatsigClient } from './PrecomputedClientInstance';
+
+// prettier-ignore
+export default async function Sample(): Promise<void> {
+// <snippet>
+const dynamicConfig = myStatsigClient.getDynamicConfig("awesome_product_details");
+const itemName = dynamicConfig.value["product_name"] ?? "Some Fallback";
+const price = dynamicConfig.value["price"] ?? 10.0;
+
+if (dynamicConfig.value["is_discount_enabled"] === true) {
+  // apply some discount logic
+}
+// </snippet>
+}

samples/react/src/samples/precomputed-client/PrecomputedClientGetLayer.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { myStatsigClient } from './PrecomputedClientInstance';
+
+// prettier-ignore
+export default async function Sample(): Promise<void> {
+// <snippet>
+// Values via getLayer
+
+const layer = myStatsigClient.getLayer("user_promo_experiments");
+
+const promoTitle = layer.getValue("title") ?? "Welcome to Statsig!";
+const discount = layer.getValue("discount") ?? 0.1;
+// </snippet>
+
+viaGetExperiment()
+}
+
+// prettier-ignore
+function viaGetExperiment() {
+// <snippet>
+
+// or, via getExperiment
+
+const titleExperiment = myStatsigClient.getExperiment("new_user_promo_title");
+const priceExperiment = myStatsigClient.getExperiment("new_user_promo_price");
+
+const promoTitle = titleExperiment.value["title"] ?? "Welcome to Statsig!";
+const discount = priceExperiment.value["discount"] ?? 0.1;
+// </snippet>
+}

samples/react/src/samples/precomputed-client/PrecomputedClientGetLogEvent.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { myStatsigClient } from './PrecomputedClientInstance';
+
+// prettier-ignore
+export default async function Sample(): Promise<void> {
+// <snippet>
+myStatsigClient.logEvent({
+  eventName: 'add_to_cart',
+  value: 'SKU_12345',
+  metadata: {
+    price: '9.99',
+    item_name: 'diet_coke_48_pack',
+  },
+});
+// </snippet>
+}

samples/react/src/samples/precomputed-client/PrecomputedClientInstance.ts

@@ -0,0 +1,8 @@
+import { PrecomputedEvaluationsClient } from '@statsig/precomputed-evaluations';
+
+import { STATSIG_CLIENT_KEY } from '../../Contants';
+
+export const myStatsigClient = new PrecomputedEvaluationsClient(
+  STATSIG_CLIENT_KEY,
+  { userID: '' },
+);

samples/react/src/samples/precomputed-client/PrecomputedClientShutdown.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { myStatsigClient } from './PrecomputedClientInstance';
+
+// prettier-ignore
+export default async function Sample(): Promise<void> {
+// <snippet>
+await myStatsigClient.shutdown();
+// </snippet>
+}

samples/react/src/samples/precomputed-client/PrecomputedInitialize.tsx

@@ -0,0 +1,18 @@
+// <snippet>
+import { PrecomputedEvaluationsClient } from '@statsig/precomputed-evaluations';
+
+// </snippet>
+import { STATSIG_CLIENT_KEY as YOUR_CLIENT_KEY } from '../../Contants';
+
+// prettier-ignore
+export default async function Sample(): Promise<void> {
+// <snippet>
+const myStatsigClient = new PrecomputedEvaluationsClient(
+  YOUR_CLIENT_KEY, 
+  { userID: 'a-user' },
+  { environment: { tier: 'development' } } // (optional) Configure SDK via StatsigOptions here
+);
+
+await myStatsigClient.initialize();
+// </snippet>
+}