refactor app

Signed-off-by: Thomas Poignant <[email protected]>

examples/openfeature_react/react-app/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/openfeature_react/react-app/src/App.tsx

@@ -33,7 +33,6 @@ function Page() {
     OpenFeature.setContext(ctx);
   }
 
-
   return (
     <>
       <div className="flex justify-center items-center pt-10">

examples/openfeature_react/react-app/src/components/account-selector.tsx

@@ -0,0 +1,18 @@
+import {existingUsers} from "../service/login.tsx";
+
+export const AccountSelector = ({onChange}: { onChange: (name: string) => void }) => {
+  return <div>
+    <form className="max-w-md mx-auto flex">
+      <span className={"min-w-20 pt-2 text-gray-200 "}>Login as:</span>
+      <select id="users"
+              onChange={() => onChange((document.getElementById("users") as HTMLSelectElement).value)}
+              className="min-w-xs bg-gray-50 border border-gray-300 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+        {
+          existingUsers.map((user) => {
+            return <option key={user.name} value={user.name}>{user.name}</option>
+          })
+        }
+      </select>
+    </form>
+  </div>
+}

examples/openfeature_react/react-app/src/components/badges.tsx

@@ -0,0 +1,10 @@
+import {OpenFeature, useFlag} from "@openfeature/react-sdk";
+
+export const Badges = () => {
+  const {value: badgeClass} = useFlag("badge-class", "");
+  const userType = OpenFeature.getContext().userType ?? "" as string;
+
+  return <div className="flex justify-center items-center">
+    {badgeClass && <span className={badgeClass}>{userType.toString()}</span>}
+  </div>
+}

examples/openfeature_react/react-app/src/service/login.tsx

@@ -0,0 +1,32 @@
+import {EvaluationContext} from "@openfeature/react-sdk";
+
+export const existingUsers: [{ name: string, ctx: EvaluationContext }] = [
+  {
+    name: "Anonymous",
+    ctx: {targetingKey: "anonymous"}
+  },
+  {
+    name: "User 1",
+    ctx: {targetingKey: "user-1", userType: "dev", email: "[email protected]"}
+  },
+  {
+    name: "User 2",
+    ctx: {targetingKey: "user-2", userType: "dev", email: "[email protected]"}
+  },
+  {
+    name: "User 3",
+    ctx: {targetingKey: "user-3", userType: "admin", company: "GO Feature Flag"}
+  },
+  {
+    name: "User 4",
+    ctx: {targetingKey: "user-4", userType: "customer", location: "Paris"}
+  },
+  {
+    name: "User 5",
+    ctx: {targetingKey: "user-5"}
+  }
+]
+
+export const login = (userName: string): EvaluationContext => {
+  return existingUsers.find(user => user.name === userName)?.ctx ?? {targetingKey: "anonymous"}
+}

examples/openfeature_react/react-app/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}