feat(growthbook): add new package to mutualise GrowthBook init (#1416)

* feat(abtest): add new package to mutualise GrowthBook init

* docs(changeset): add changeset

* fix(naming): change naming of the package and add missing files

* fix(package): rename package to match others

* test(growthbook): add test with jest on provider and hook

* feat(growthbook): review comment on typings

* docs(growthbook): add doc of package in global Readme

* docs(growthbook): fixup typo in package readme

* test(provider): add missing test case on init

* fix(typings): fix typescript issues on mock

---------

Co-authored-by: Antoine Caron <[email protected]>
Co-authored-by: philibeaux <[email protected]>

Author: Slashgear

.changeset/funny-mayflies-fix.md

@@ -0,0 +1,5 @@
+---
+'@scaleway/ab-test': major
+---
+
+Initialize the AB test common package for integration of GrowthBook inside Scaleway frontend apps

README.md

@@ -72,6 +72,13 @@ scaleway-lib is a set of NPM packages used at Scaleway.
   ![npm bundle size](https://img.shields.io/bundlephobia/min/@scaleway/use-segment)
   ![npm](https://img.shields.io/npm/v/@scaleway/use-segment)
 
+- [`@scaleway/use-growthbok`](./packages/use-growthbok/README.md):
+  A tiny hook to handle Growthbook Feature flag and A/B test tool.
+
+  ![npm](https://img.shields.io/npm/dm/@scaleway/use-growthbok)
+  ![npm bundle size](https://img.shields.io/bundlephobia/min/@scaleway/use-growthbok)
+  ![npm](https://img.shields.io/npm/v/@scaleway/use-growthbok)
+
 - [`@scaleway/use-gtm`](./packages/use-gtm/README.md):
   A tiny hook to handle gtm.
 

packages/jest-helpers/README.md

@@ -78,7 +78,8 @@ Internally it uses the `renderWithTheme` generated from above.
 ```tsx
 const shouldMatchEmotionSnapshot = (
   component: ReactNode, // The component to render
-  options: { // In an object to make it backward-compatible and don't introduce any API breaking changes
+  options: {
+    // In an object to make it backward-compatible and don't introduce any API breaking changes
     options?: RenderOptions // RenderOptions from @testing-library/react
     transform?: (node: ReturnType<typeof render>) => Promise<void> | void // (a)sync function execute between the render and the expect. You can use this if you need mockAllIsIntersecting
     theme?: Theme // Optional theme to use which will be passed to the Wrapper above

packages/outdated-browser/README.md

@@ -16,6 +16,7 @@ This package is intended to be used in tandem with a bundler
 Only one parameter is required, a regex of accepted browser user agents
 
 Example with webpack:
+
 ```js
 import { getUserAgentRegExp } from 'browserslist-useragent-regexp'
 

packages/tsconfig/README.md

@@ -12,6 +12,6 @@ Add to your `.tsconfig.json`
 
 ```json
 {
-	"extends": "@scaleway/tsconfig"
+  "extends": "@scaleway/tsconfig"
 }
 ```

packages/use-dataloader/src/__tests__/useDataLoader.test.tsx

@@ -37,8 +37,9 @@ const wrapperWithCacheKey = ({ children }: { children?: ReactNode }) => (
 
 const wrapperWithOnError =
   (onError: (err: Error) => void) =>
-  ({ children }: { children?: ReactNode }) =>
+  ({ children }: { children?: ReactNode }) => (
     <DataLoaderProvider onError={onError}>{children}</DataLoaderProvider>
+  )
 
 describe('useDataLoader', () => {
   test('should render correctly without options', async () => {

packages/use-growthbook/.eslintrc.cjs

@@ -0,0 +1,10 @@
+const { join } = require('path')
+
+module.exports = {
+  rules: {
+    'import/no-extraneous-dependencies': [
+      'error',
+      { packageDir: [__dirname, join(__dirname, '../../')] },
+    ],
+  },
+}

packages/use-growthbook/.npmignore

@@ -0,0 +1,5 @@
+**/__tests__/**
+examples/
+src
+.eslintrc.cjs
+!.npmignore

packages/use-growthbook/README.md

@@ -0,0 +1,52 @@
+# `@scaleway/use-growthbook`
+
+Tiny adapter to easily add [GrowthBook](https://www.growthbook.io/) to your React Application.
+The idea of this package is to propose a _facade pattern_ above GrowthBook React SDK.
+
+## Install
+
+```bash
+$ pnpm add @scaleway/use-growthbook
+```
+
+## How to use
+
+### First add the provider to your application roots
+
+```js
+import { AbTestProvider } from '@scaleway/use-growthbook'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <AbTestProvider
+      config={{ apiHost: 'string', clientKey: 'string', enableDevMode: true }}
+      anonymousId="123456789"
+      trackingCallback={(experiment, result) => console.log(experiment, result)}
+      errorCallback={console.error}
+    >
+      <App />
+    </AbTestProvider>
+  </React.StrictMode>,
+  document.getElementById('root'),
+)
+```
+
+### Attributes
+
+A hook `useAbTestAttributes` is available to get currentAttributes and to set new ones dynamically.
+
+### API
+
+Exported utils from GrowthBook React are listed here:
+
+- FeatureString
+- FeaturesReady
+- IfFeatureEnabled
+- useExperiment
+- useFeature
+- withRunExperiment
+- useFeatureIsOn
+- useFeatureValue

packages/use-growthbook/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@scaleway/use-growthbook",
+  "version": "0.0.0",
+  "description": "Utility package to expose AB test tool",
+  "type": "module",
+  "engines": {
+    "node": ">=14.x"
+  },
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "default": "./dist/index.js"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scaleway/scaleway-lib",
+    "directory": "packages/growthbook"
+  },
+  "license": "MIT",
+  "keywords": [
+    "ab",
+    "feature flags"
+  ],
+  "dependencies": {
+    "@growthbook/growthbook-react": "0.17.0"
+  },
+  "devDependencies": {
+    "react": "18.2.0"
+  },
+  "peerDependencies": {
+    "react": "18.x"
+  }
+}