@newskit-render/feature-flags 0.0.0-d55b7d88

package/README.md

@@ -0,0 +1,155 @@
+# @newskit-render/feature-flags
+
+A package for adding feature flags to projects generated by newskit-render.
+
+## How to use:
+
+`yarn add @newskit-render/feature-flags` or <br />
+`npm install --save @newskit-render/feature-flags` <br /><br />
+
+There are two ways that feature flags can be utilized.
+
+### getFeatureFlags() in getServerSideProps
+
+The most performant way to use feature flags is to call `getFeatureFlags()` in `getServersideProps` and then use them throughout the page. This way the implementation will only be available for the current page and and wouldn't effect the rest of the site.
+To do so you will need to initialize the package by calling `createFeatureFlagsInstance` with the sdkKey from optimizely.
+Best practice is to store your sdk key in environment variables, the examples below utilize that method.
+For local use, you cadd the Optimizely SDK key from your project in your `.env.local` file like so
+`OPTIMIZELY_SDK_KEY="123"`.
+In case you don't have project or access to the Optimizely platform please contact the Experimentation team.
+Optionally the config can be switched to suit your need. More on this can be found [here](#createFeatureFlagsInstance).<br /> <br />
+An example implementation would be as follows:
+
+`pages/index.ts`
+
+```
+import {getFeatureFlags, createFeatureFlagsInstance} from '@newskit-render/feature-flags';
+
+export async function getServerSideProps(context) {
+  // code
+  createFeatureFlagsInstance({ optimizelyConfig: { sdkKey: process.env.OPTIMIZELY_SDK_KEY } })
+  // code
+
+  const [resultFromOtherQueries, featureFlagsResult] = await Promise.allSettled([
+     // other queries,
+     getFeatureFlags()
+  ])
+
+  const featureFlags = featureFlagsResult.value;
+
+  return {
+    props: {
+      // other data
+      featureFlags
+    },
+  }
+}
+```
+
+The package also provides a helper function that conbines getFeatureFlags, createFeatureFlagsInstance in one.
+
+```
+import {initAndGetFeatureFlag} from '@newskit-render/feature-flags';
+
+export async function getServerSideProps(context) {
+  const [resultFromOtherQueries, featureFlags] = await Promise.allSettled([
+     // other queries,
+     initAndGetFeatureFlag(process.env.OPTIMIZELY_SDK_KEY)
+  ])
+
+  return {
+    props: {
+      // other data
+      featureFlags
+    },
+  }
+}
+```
+
+`samplePage/index.tsx`
+
+```
+import React from 'react'
+import { FeatureFlag } from '@newskit-render/feature-flags'
+
+const SectionPage: React.FC<{
+  page: Page
+  // pageprops...
+  featureFlags?: FeatureFlag[]
+}> = ({ page, pageprops..., featureFlags }) => {
+
+  return(
+      <Layout>
+        {featureFlags && featureFlags['test_flag'] && <p>FEATURE FLAG IS HEREEE</p>}
+        <Cell>
+          // ...content
+        </Cell>
+      </Layout>
+ )}
+
+export default SamplePage
+
+``` 
+
+### hooks in getInitialProps
+
+Alternatively, feature flags can be applied on the whole app. To do so, you'll need to instantiate the package in `getInitialProps` of the main app, then call `getFeatureFlags` and pass the result to the whole app.
+By calling the `useFeatureFlagsContext` hook, the list of featureFlags can be accessed from any point of the site.
+<br /> <br />
+Below we explore a solution, where we use it in the header of the app.
+
+`pages/_app.tsx`
+
+```
+import { getFeatureFlags, FeatureFlagsContextProvider, FeatureFlag, createFeatureFlagsInstance } from '@newskit-render/feature-flags';
+
+function MyApp({ featureFlags }: {featureFlags: FeatureFlag[]}) {
+  return (
+    <FeatureFlagsContextProvider context={ featureFlags } >
+      <App />
+    </FeatureFlagsContextProvider>
+  )
+}
+MyApp.getInitialProps = async () => {
+    createFeatureFlagsInstance({ optimizelyConfig: { sdkKey: process.env.OPTIMIZELY_SDK_KEY } })
+  const featureFlags = await getFeatureFlags();
+  return { featureFlags }
+}
+
+export default MyApp
+```
+
+`header/index.tsx`
+
+```
+import { useFeatureFlagsContext } from '@newskit-render/feature-flags';
+
+const Header: React.FC<{ user: UserData }> = ({ user }) => {
+  const featureFlags = useFeatureFlagsContext();
+
+  return (
+    <>
+      <StyledHeader>
+        <MainGrid>
+          <Cell xs={12}>
+              // ...nav buttons
+              {featureFlags && featureFlags['test_flag'] && <p>FEATURE FLAGG</p>}
+              // ...nav buttons
+              </Stack>
+            </Stack>
+          </Cell>
+        </MainGrid>
+      </StyledHeader>
+    </>
+  )
+}
+
+export default Header
+```
+
+### createFeatureFlagsInstance
+
+`createFeatureFlagsInstance` takes config object as parameter. The config object consists of [`optimizelyConfig`](https://docs.developers.optimizely.com/full-stack/v4.0/docs/initialize-sdk-javascript-node#section-parameters), `userId`, `defaultFeatureFlags`, `logLevel`. The only requirement for the feature flags to be instantiated is passing optimizely sdk key to `optimizelyConfig`. Further, the whole config can be changed to suit your needs.
+`userId` serves as optimizely user identity.
+`defaultFeatureFlags` are used in the event that optimizely doesn't load up and initial values are required.
+`logLevel` serves to configure the optimizely logger if you wish to use it. It accepts `critical`, `error`, `warning`, `debug` or `info`

package/dist/cjs/__tests__/utils.tests.d.ts

@@ -0,0 +1 @@
+export {};