add openfeature (#1113)

Adds an example for the OpenFeature Flags SDK adapter.

Author: dferber90

flags-sdk/experimentation-statsig/README.md

@@ -12,7 +12,7 @@ This demo uses two feature gates on Statsig to control the visibility of two ban
 Both gates are configured to show/hide each banner 50% of the time.
 
 Once you visit the page, you can see a variation of both/one/none of the banners.
-Since this example is using a stable id to identify users, you will see the same variation all the time.
+Since this example is using a stable id to identify users, you will see the same variation until you reset your id.
 
 To test different variations, you can use the Dev Tools at the bottom to reset the stable id and reload the page.
 This allows you to test different variations of the banners.

flags-sdk/openfeature/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "root": true,
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@typescript-eslint/require-await": "off",
+    "@typescript-eslint/no-misused-promises": "off",
+    "import/order": "off",
+    "camelcase": "off",
+    "no-console": "off"
+  }
+}

flags-sdk/openfeature/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

flags-sdk/openfeature/README.md

@@ -0,0 +1,54 @@
+# OpenFeature Flags SDK Example
+
+This example uses [OpenFeature](https://openfeature.dev/) for feature flags with the [Flags SDK](https://flags-sdk.dev) and the [Flags SDK OpenFeature adapter](https://flags-sdk.dev/docs/api-reference/adapters/openfeature) along with the [Flags Explorer](https://vercel.com/docs/workflow-collaboration/feature-flags/using-vercel-toolbar).
+
+## Demo
+
+[https://flags-sdk-openfeature.vercel.app/](https://flags-sdk-openfeature.vercel.app/)
+
+## How it works
+
+This demo uses two feature flags defined in code control the visibility of two banners on the page.
+Both flags are configured to show/hide each banner 50% of the time.
+
+Once you visit the page, you can see a variation of both/one/none of the banners.
+Since this example is using a stable id to identify users, you will see the same variation until you reset your id.
+
+To test different variations, you can use the Dev Tools at the bottom to reset the stable id and reload the page.
+This allows you to test different variations of the banners.
+
+If you deployed your own instance of this example you can also use the [Flags Explorer](https://vercel.com/docs/workflow-collaboration/feature-flags/using-vercel-toolbar) to test different variations by creating overrides.
+
+## Deploy this template
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fflags-sdk%2Fopenfeature&env=FLAGS_SECRET&envDescription=The+FLAGS_SECRET+will+be+used+by+the+Flags+Explorer+to+securely+overwrite+feature+flags.+Must+be+32+random+bytes%2C+base64-encoded.+Use+the+generated+value+or+set+your+own.&envLink=https%3A%2F%2Fvercel.com%2Fdocs%2Fworkflow-collaboration%2Ffeature-flags%2Fsupporting-feature-flags%23flags_secret-environment-variable&project-name=openfeature-flags-sdk-example&repository-name=openfeature-flags-sdk-example&)
+
+### Step 1: Link the project
+
+In order to use the Flags Explorer, you need to link the project on your local machine.
+
+```bash
+vercel link
+```
+
+Select the project from the list you just deployed.
+
+### Step 2: Pull all environment variables
+
+This allows the Flags SDK and the Flags Explorer to work correctly, by getting additional metadata.
+
+```bash
+vercel env pull
+```
+
+### Step 3: Install dependencies
+
+```bash
+npm install
+```
+
+### Step 4: Run the project
+
+```bash
+npm run dev
+```

flags-sdk/openfeature/app/.well-known/vercel/flags/route.ts

@@ -0,0 +1,16 @@
+import { type ApiData, verifyAccess } from 'flags'
+import { getProviderData } from 'flags/next'
+import { NextResponse, type NextRequest } from 'next/server'
+import * as flags from '../../../../flags'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic' // defaults to auto
+
+export async function GET(request: NextRequest) {
+  const access = await verifyAccess(request.headers.get('Authorization'))
+  if (!access) return NextResponse.json(null, { status: 401 })
+
+  // Forward info from Flags in Code
+  const providerData = await getProviderData(flags)
+  return NextResponse.json<ApiData>(providerData)
+}

flags-sdk/openfeature/app/[code]/add-to-cart.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { track } from '@vercel/analytics'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { addToCart } from '@/lib/actions'
+import { useProductDetailPageContext } from '@/components/utils/product-detail-page-context'
+import { AddToCartButton } from '@/components/product-detail-page/add-to-cart-button'
+
+export function AddToCart() {
+  const router = useRouter()
+  const { color, size } = useProductDetailPageContext()
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    track('add_to_cart:viewed')
+  }, [])
+
+  return (
+    <AddToCartButton
+      isLoading={isLoading}
+      onClick={async () => {
+        setIsLoading(true)
+        track('add_to_cart:clicked')
+        await addToCart({ id: 'shirt', color, size, quantity: 1 })
+        router.push('/cart')
+      }}
+    />
+  )
+}

flags-sdk/openfeature/app/[code]/cart/order-summary.tsx

@@ -0,0 +1,22 @@
+import { proceedToCheckoutColorFlag } from '@/flags'
+import { OrderSummarySection } from '@/components/shopping-cart/order-summary-section'
+import { ProceedToCheckout } from './proceed-to-checkout'
+
+export async function OrderSummary({
+  showSummerBanner,
+  freeDelivery,
+}: {
+  showSummerBanner: boolean
+  freeDelivery: boolean
+}) {
+  // This is a fast feature flag so we don't suspend on it
+  const proceedToCheckoutColor = await proceedToCheckoutColorFlag()
+
+  return (
+    <OrderSummarySection
+      showSummerBanner={showSummerBanner}
+      freeDelivery={freeDelivery}
+      proceedToCheckout={<ProceedToCheckout color={proceedToCheckoutColor} />}
+    />
+  )
+}

flags-sdk/openfeature/app/[code]/cart/page.tsx

@@ -0,0 +1,33 @@
+import { OrderSummary } from '@/app/[code]/cart/order-summary'
+import { Main } from '@/components/main'
+import { ShoppingCart } from '@/components/shopping-cart/shopping-cart'
+import {
+  productFlags,
+  showFreeDeliveryBannerFlag,
+  showSummerBannerFlag,
+} from '@/flags'
+
+export default async function CartPage({
+  params,
+}: {
+  params: Promise<{ code: string }>
+}) {
+  const { code } = await params
+  const showSummerBanner = await showSummerBannerFlag(code, productFlags)
+  const freeDeliveryBanner = await showFreeDeliveryBannerFlag(
+    code,
+    productFlags
+  )
+
+  return (
+    <Main>
+      <div className="lg:grid lg:grid-cols-12 lg:items-start lg:gap-x-12 xl:gap-x-16">
+        <ShoppingCart />
+        <OrderSummary
+          showSummerBanner={showSummerBanner}
+          freeDelivery={freeDeliveryBanner}
+        />
+      </div>
+    </Main>
+  )
+}

flags-sdk/openfeature/app/[code]/cart/proceed-to-checkout.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { ProceedToCheckoutButton } from '@/components/shopping-cart/proceed-to-checkout-button'
+import { track } from '@vercel/analytics'
+import { toast } from 'sonner'
+
+export function ProceedToCheckout({ color }: { color: string }) {
+  return (
+    <ProceedToCheckoutButton
+      color={color}
+      onClick={() => {
+        track('proceed_to_checkout:clicked')
+        toast('End reached', {
+          className: 'my-classname',
+          description: 'The checkout flow is not implemented in this template.',
+          duration: 5000,
+        })
+      }}
+    />
+  )
+}

flags-sdk/openfeature/app/[code]/layout.tsx

@@ -0,0 +1,45 @@
+import { deserialize, generatePermutations } from 'flags/next'
+import { FlagValues } from 'flags/react'
+import { productFlags, showFreeDeliveryBannerFlag } from '@/flags'
+import { FreeDelivery } from '@/app/free-delivery'
+import { DevTools } from '@/components/dev-tools'
+import { Footer } from '@/components/footer'
+import { Navigation } from '@/components/navigation'
+
+export async function generateStaticParams() {
+  // Returning an empty array here is important as it enables ISR, so
+  // the various combinations stay cached after they first time they were rendered.
+  //
+  // return [];
+
+  // Instead of returning an empty array you could also call generatePermutations
+  // to generate the permutations upfront.
+  const codes = await generatePermutations(productFlags)
+  return codes.map((code) => ({ code }))
+}
+
+export default async function Layout(props: {
+  children: React.ReactNode
+  params: Promise<{
+    code: string
+  }>
+}) {
+  const params = await props.params
+  const values = await deserialize(productFlags, params.code)
+
+  const showFreeDeliveryBanner = await showFreeDeliveryBannerFlag(
+    params.code,
+    productFlags
+  )
+
+  return (
+    <div className="bg-white">
+      <FreeDelivery show={showFreeDeliveryBanner} />
+      <Navigation />
+      {props.children}
+      <FlagValues values={values} />
+      <Footer />
+      <DevTools />
+    </div>
+  )
+}