Feature react sdk (#58)

* feat: User guidance for  React SDK

Author: frankzhaopeng

src/components/Rule/condition.test.tsx

@@ -292,7 +292,7 @@ test('RuleContent datetime input', (done) => {
     );
 
     await userEvent.click(screen.getByPlaceholderText('Please select'));
-    await userEvent.click(screen.getByText(`20`));
+    await userEvent.click(screen.getByText('20'));
 
     await userEvent.click(screen.getAllByText('UTC +8')[0]);
     await userEvent.click(screen.getByText('UTC +3'));

src/images/react.svg

@@ -421,6 +421,10 @@
   "getstarted.miniprogram.third.step.title": "Step 3: Use the instance to get your setting value",
   "getstarted.miniprogram.third.step.name.one": "You can get variation value from globalData object, SDK will update globalData.toggles object automatically",
   "getstarted.miniprogram.third.step.name.second": "You can also use the SDK API to check which value this user will receive for a given feature toggle",
+  "getstarted.react.first.step.title": "Step1: Use create-react-app to create a new React application",
+  "getstarted.react.second.step.title": "Step2: Install SDK",
+  "getstarted.react.third.step.title": "Step3: Import FPProvider in App.js",
+  "getstarted.react.fourth.step.title": "Step4: Create a new file home.js in the same directory as App.js, import withFPConsumer in home.js",
 
   "platform.warning.text": "According to the Cybersecurity Law, it is prohibited to use FeatureProbe for illegal financial lending, cryptocurrency, gambling and any applications containing Telemarketing Scams functions, once discovered, you will be immediately stopped from using FeatureProbe and reported to the Cyber Security Department.",
 

src/locales/en-US.json

@@ -421,6 +421,10 @@
   "getstarted.miniprogram.third.step.title": "第三步：使用功能开关",
   "getstarted.miniprogram.third.step.name.one": "您可以从 globalData 对象中获取变量值，SDK会自动更新 globalData.toggles 对象",
   "getstarted.miniprogram.third.step.name.second": "您还可以使用 SDK 对外暴露的 API 来获取开关返回值",
+  "getstarted.react.first.step.title": "第一步：使用create-react-app新建一个React项目",
+  "getstarted.react.second.step.title": "第二步：安装SDK",
+  "getstarted.react.third.step.title": "第三步：在App.js中引入FPProvider",
+  "getstarted.react.fourth.step.title": "第四步：在App.js同级目录下创建home.js，并在home.js中引入withFPConsumer",
 
   "platform.warning.text": "根据国家相关规定，严禁将FeatureProbe用于违法金融借贷、区块链虚拟币、博彩以及任何含有网络电信诈骗功能的应用程序，一旦被发现，将会立即停止你使用FeantureProbe相关功能，并上报给网络安全监管部门。",
 

src/locales/zh-CN.json

@@ -14,6 +14,7 @@ import android from 'images/android.svg';
 import swift from 'images/swift.svg';
 import apple from 'images/apple.svg';
 import miniprogram from 'images/wechat-miniprogram.png';
+import reactLogo from 'images/react.svg';
 import styles from '../Steps/index.module.scss';
 import { SdkLanguage } from '../StepSecond';
 
@@ -29,6 +30,7 @@ const SDK_LOGOS: {[key in SdkLanguage]: string} = {
   'Swift': swift,
   'Objective-C': apple,
   'Mini Program': miniprogram,
+  'React': reactLogo,
 };
 
 const SERVER_SIDE_SDKS = [
@@ -74,6 +76,10 @@ const CLIENT_SIDE_SDKS = [
   {
     name: 'Mini Program',
     logo: miniprogram,
+  },
+  {
+    name: 'React',
+    logo: reactLogo,
   }
 ];
 

src/pages/getStarted/components/StepFirst/index.tsx

@@ -21,11 +21,12 @@ import {
   getRustCode,
   getSwiftCode,
   getMiniProgramCode,
+  getReactCode,
 } from '../constants';
 import styles from '../Steps/index.module.scss';
 
-export type SdkLanguage = 'Java'
-    // | 'Java'
+export type SdkLanguage = 
+    'Java'
     | 'Python'
     | 'Rust'
     | 'Go'
@@ -34,7 +35,8 @@ export type SdkLanguage = 'Java'
     | 'Swift'
     | 'Objective-C'
     | 'JavaScript'
-    | 'Mini Program';
+    | 'Mini Program'
+    | 'React';
 
 interface IProps {
   rules: IRule[]
@@ -258,6 +260,20 @@ const StepSecond = (props: IProps) => {
             remoteUrl,
           }));
           break;
+        case 'React':
+            saveLanguage('javascript');
+            result.forEach(item => {
+              userWithCode += `user.with("${item}", /* ${item} */);\n  `;
+            });
+            saveOptions(getReactCode({
+              clientSdkKey,
+              toggleKey,
+              returnType,
+              intl,
+              userWithCode,
+              remoteUrl,
+            }));
+            break;
       }
     }
   }, [rules, sdkVersion, currentSDK, clientSdkKey, serverSdkKey, toggleKey, returnType, intl, remoteUrl]);

src/pages/getStarted/components/StepSecond/index.tsx

@@ -409,3 +409,60 @@ const value = app.globalData.toggles[${toggleKey}].value;
     }
   ];
 };
+
+export const getReactCode = (options: IOption) => {
+  const { intl, clientSdkKey, userWithCode, returnType, toggleKey, remoteUrl } = options;
+  return [
+    {
+      title: intl.formatMessage({id: 'getstarted.react.first.step.title'}),
+      code: 'npx create-react-app react-demo && cd react-demo'
+    },
+    {
+      title: intl.formatMessage({id: 'getstarted.react.second.step.title'}),
+      code: 'npm install featureprobe-client-sdk-react --save'
+    },
+    {
+      title: intl.formatMessage({id: 'getstarted.react.third.step.title'}),
+      code:
+`import { FPProvider } from 'featureprobe-client-sdk-react';
+import Home from './home';
+
+function App() {
+  const user = new FPUser();
+  ${userWithCode}
+  return (
+    <FPProvider 
+      config={{
+        remoteUrl: "${remoteUrl}",
+        clientSdkKey: "${clientSdkKey}",
+        user,
+      }}
+    >
+      <Home />
+    </FPProvider>
+  );
+}
+
+export default App;
+`
+    },
+    {
+      title: intl.formatMessage({id: 'getstarted.react.fourth.step.title'}),
+      code:
+`import { withFPConsumer } from 'featureprobe-client-sdk-client';
+
+const Home = ({ toggles, client }) => {
+  ${returnType === 'boolean' ? `const value = client?.boolValue("${toggleKey}", false);` : ''}${returnType === 'number' ? `const value = client?.numberValue("${toggleKey}", 1.0);` : ''}${returnType === 'string' ? `const value = client?.stringValue("${toggleKey}", "s");` : ''}${returnType === 'json' ? `const value = client.jsonValue("${toggleKey}", {});` : ''}
+  return (
+    <div>
+      <div>You can use toggle value like this: \${value}</div>
+      <div>You can also get toggle detail from toggles object like this: \${toggles?.["${toggleKey}"]}</div>
+    </div>
+  )
+};
+
+export default withFPConsumer(Home);
+`
+    },
+  ];
+};