npm - flagmint-monorepo - Versions diffs - 1.0.11 - Mend

flagmint-monorepo 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/.github/workflows/publish.yml +31 -0
package/LICENSE +21 -0
package/README.md +609 -0
package/package.json +13 -0
package/packages/react-flagmint/package.json +43 -0
package/packages/react-flagmint/src/hooks/index.ts +66 -0
package/packages/react-flagmint/src/index.ts +1 -0
package/packages/react-flagmint/src/providers/FlagmintProvider.tsx +113 -0
package/packages/react-flagmint/src/store/store.ts +20 -0
package/packages/react-flagmint/src/types.ts +46 -0
package/packages/react-flagmint/tsconfig.json +16 -0
package/packages/react-flagmint/tsup.config.ts +17 -0
package/pnpm-workspace.yaml +3 -0
package/tsconfig.base.json +24 -0

package/.github/workflows/publish.yml ADDED Viewed

@@ -0,0 +1,31 @@
+name: Publish Package
+on:
+  release:
+    types: [published]      # add "prereleased" if you publish pre-releases too
+  workflow_dispatch:
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9
+          run_install: false
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org
+          cache: pnpm
+      - run: pnpm -v                # sanity check
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build
+      - run: pnpm test || true
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2025 Israel Edet
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,609 @@
+# flagmint-react-sdk
+A React wrapper for [flagmint-js-sdk](https://www.npmjs.com/package/flagmint-js-sdk) that provides React-specific hooks and context with fine-grained reactivity powered by Zustand.
+## ✨ Features
+- 🎯 **Fine-grained reactivity** - Only components using specific flags re-render when those flags change
+- 🚀 **SSR-safe** - No global state leakage between server requests
+- 📦 **TypeScript support** - Full type safety with generics for flag values and context
+- 🔀 **Dual export strategy** - Separate server-safe types and client-only hooks
+- ⚡ **Auto-initialization** - Direct integration with FlagClient from flagmint-js-sdk
+- 🔐 **Deferred initialization** - Perfect for authentication flows
+- 📱 **Framework agnostic** - Works with Next.js, Remix, Vite, and more
+## 📦 Installation
+```bash
+npm install react-flagmint flagmint-js-sdk
+# or
+pnpm add react-flagmint flagmint-js-sdk
+# or
+yarn add react-flagmint flagmint-js-sdk
+```
+## 🚀 Quick Start
+### 1. Basic Setup
+```tsx
+// app/providers.tsx (Next.js App Router)
+'use client'
+import { FlagmintProvider } from 'react-flagmint/client'
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <FlagmintProvider
+      options={{
+        apiKey: process.env.NEXT_PUBLIC_FLAGMINT_API_KEY!,
+        transportMode: 'websocket',
+        context: {
+          userId: 'user-123',
+          plan: 'premium'
+        }
+      }}
+    >
+      {children}
+    </FlagmintProvider>
+  )
+}
+```
+```tsx
+// app/layout.tsx
+import Providers from './providers'
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <body>
+        <Providers>
+          {children}
+        </Providers>
+      </body>
+    </html>
+  )
+}
+```
+### 2. Using Flags in Components
+```tsx
+// components/FeatureComponent.tsx
+'use client'
+import { useFlag, useFlags, useFlagmintReady } from 'react-flagmint/client'
+export default function FeatureComponent() {
+  const showNewFeature = useFlag('new-dashboard', false)
+  const userPlan = useFlag('user-plan', 'free')
+  const isReady = useFlagmintReady()
+  if (!isReady) {
+    return <div>Loading flags...</div>
+  }
+  return (
+    <div>
+      {showNewFeature && <NewDashboard />}
+      <div>Current plan: {userPlan}</div>
+    </div>
+  )
+}
+```
+## 📚 API Reference
+### FlagmintProvider
+The provider component that initializes the FlagClient and provides flag context to your app.
+```tsx
+<FlagmintProvider
+  options={FlagClientOptions}
+  initialFlags={{}}
+  deferInitialization={false}
+>
+  {children}
+</FlagmintProvider>
+```
+#### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `FlagClientOptions` | Required | Configuration for the FlagClient |
+| `initialFlags` | `Flags` | `{}` | Initial flag values for SSR/hydration |
+| `deferInitialization` | `boolean` | `false` | If true, wait for manual initialization |
+#### FlagClientOptions
+```tsx
+interface FlagClientOptions<C extends Record<string, any> = Record<string, any>> {
+  apiKey: string
+  context?: C
+  transportMode?: 'auto' | 'websocket' | 'long-polling'
+  enableOfflineCache?: boolean
+  persistContext?: boolean
+  onError?: (error: Error) => void
+  previewMode?: boolean
+  rawFlags?: Record<string, FlagValue>
+  deferInitialization?: boolean
+}
+```
+### Hooks
+#### useFlag(key, fallback?)
+Get a specific flag value with fine-grained reactivity.
+```tsx
+const showFeature = useFlag('feature-name', false)
+const userTier = useFlag('user-tier', 'free')
+const config = useFlag('app-config', { theme: 'light' })
+```
+**Parameters:**
+- `key: string` - The flag key
+- `fallback?: T` - Default value if flag is not found
+**Returns:** The flag value or fallback
+#### useFlags()
+Get all currently loaded flags.
+```tsx
+const allFlags = useFlags()
+console.log(allFlags) // { 'feature-a': true, 'user-tier': 'pro' }
+```
+**Returns:** Object containing all loaded flags
+#### useFlagmint()
+Get access to the FlagClient instance and utilities.
+```tsx
+const { client, isReady, isInitialized, updateContext } = useFlagmint()
+// Update user context
+await updateContext({ userId: 'new-user', plan: 'enterprise' })
+```
+**Returns:**
+```tsx
+{
+  client: FlagClient | null
+  isReady: boolean
+  isInitialized: boolean
+  updateContext: (context: Record<string, any>) => Promise<void>
+}
+```
+#### useFlagmintReady()
+Check if the FlagClient is ready to serve flags.
+```tsx
+const isReady = useFlagmintReady()
+if (!isReady) {
+  return <LoadingSpinner />
+}
+```
+#### useFlagClient()
+Get direct access to the FlagClient instance.
+```tsx
+const client = useFlagClient<MyFlagTypes>()
+const specificFlag = client?.getFlag('feature-x', false)
+```
+## 🔧 Usage Patterns
+### 1. Auto-initialization (Default)
+Best when user context is available immediately:
+```tsx
+function App() {
+  return (
+    <FlagmintProvider
+      options={{
+        apiKey: 'your-api-key',
+        context: {
+          userId: getCurrentUser().id,
+          plan: getCurrentUser().plan
+        }
+      }}
+    >
+      <Dashboard />
+    </FlagmintProvider>
+  )
+}
+```
+### 2. Deferred Initialization
+Perfect for authentication flows:
+```tsx
+// Provider with deferred initialization
+<FlagmintProvider
+  options={{
+    apiKey: 'your-api-key',
+    context: {} // Empty initially
+  }}
+  deferInitialization={true}
+>
+  <App />
+</FlagmintProvider>
+// Login component
+function LoginPage() {
+  const { updateContext } = useFlagmint()
+  const handleLogin = async (user) => {
+    // First update context with user info
+    await updateContext({
+      userId: user.id,
+      plan: user.plan,
+      locale: user.locale
+    })
+    // Flags are now available with user context
+    navigate('/dashboard')
+  }
+  return <LoginForm onLogin={handleLogin} />
+}
+```
+### 3. TypeScript Usage
+Define your flag types for better type safety:
+```tsx
+// types/flags.ts
+export interface AppFlags {
+  'show-beta-feature': boolean
+  'user-plan': 'free' | 'pro' | 'enterprise'
+  'theme-config': {
+    primaryColor: string
+    darkMode: boolean
+  }
+}
+export interface UserContext {
+  userId: string
+  plan: string
+  locale: string
+}
+// components/TypedComponent.tsx
+import { useFlag } from 'react-flagmint/client'
+import type { AppFlags } from '../types/flags'
+export default function TypedComponent() {
+  // TypeScript knows this returns boolean
+  const showBeta = useFlag<AppFlags['show-beta-feature']>('show-beta-feature', false)
+  // TypeScript knows this returns the union type
+  const plan = useFlag<AppFlags['user-plan']>('user-plan', 'free')
+  return (
+    <div>
+      {showBeta && <BetaFeature />}
+      <div>Plan: {plan}</div>
+    </div>
+  )
+}
+```
+### 4. Server-Side Rendering (SSR)
+#### Next.js App Router
+```tsx
+// app/providers.tsx
+'use client'
+import { FlagmintProvider } from 'react-flagmint/client'
+export default function Providers({ children, initialFlags = {} }) {
+  return (
+    <FlagmintProvider
+      options={{
+        apiKey: process.env.NEXT_PUBLIC_FLAGMINT_API_KEY!,
+        transportMode: 'websocket'
+      }}
+      initialFlags={initialFlags}
+    >
+      {children}
+    </FlagmintProvider>
+  )
+}
+// app/page.tsx
+import { FlagClient } from 'flagmint-js-sdk'
+import Providers from './providers'
+import ClientComponent from './ClientComponent'
+export default async function Page() {
+  // Optionally preload flags on server
+  let initialFlags = {}
+  try {
+    const serverClient = new FlagClient({
+      apiKey: process.env.FLAGMINT_API_KEY!,
+      context: { server: true }
+    })
+    await serverClient.ready()
+    initialFlags = await serverClient.getFlags() // If this method exists
+  } catch (error) {
+    console.warn('Failed to load initial flags:', error)
+  }
+  return (
+    <Providers initialFlags={initialFlags}>
+      <ClientComponent />
+    </Providers>
+  )
+}
+```
+### 5. Context Updates
+Update user context dynamically:
+```tsx
+function UserSettings() {
+  const { updateContext } = useFlagmint()
+  const currentTheme = useFlag('user-theme', 'light')
+  const handleThemeChange = async (newTheme: string) => {
+    // Update context - flags will be re-evaluated
+    await updateContext({ theme: newTheme })
+  }
+  const handlePlanUpgrade = async (newPlan: string) => {
+    await updateContext({ plan: newPlan })
+    // Component will re-render with new plan-based flags
+  }
+  return (
+    <div>
+      <ThemeSelector onChange={handleThemeChange} />
+      <PlanUpgrade onUpgrade={handlePlanUpgrade} />
+    </div>
+  )
+}
+```
+### 6. Loading States
+Handle loading states gracefully:
+```tsx
+function FeaturePage() {
+  const isReady = useFlagmintReady()
+  const showPremiumFeature = useFlag('premium-feature', false)
+  if (!isReady) {
+    return (
+      <div className="loading-container">
+        <Spinner />
+        <p>Loading personalized features...</p>
+      </div>
+    )
+  }
+  return (
+    <div>
+      <h1>Features</h1>
+      {showPremiumFeature ? (
+        <PremiumFeature />
+      ) : (
+        <UpgradeBanner />
+      )}
+    </div>
+  )
+}
+```
+### 7. Error Handling
+```tsx
+<FlagmintProvider
+  options={{
+    apiKey: 'your-api-key',
+    onError: (error) => {
+      console.error('Flagmint error:', error)
+      // Send to error reporting service
+      errorReporting.captureException(error)
+    }
+  }}
+>
+  <App />
+</FlagmintProvider>
+```
+## 🏗️ Framework Examples
+### Next.js (App Router)
+```tsx
+// app/layout.tsx
+import Providers from './providers'
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
+// app/providers.tsx
+'use client'
+import { FlagmintProvider } from 'react-flagmint/client'
+export default function Providers({ children }) {
+  return (
+    <FlagmintProvider
+      options={{
+        apiKey: process.env.NEXT_PUBLIC_FLAGMINT_API_KEY!,
+        transportMode: 'long-polling'
+      }}
+    >
+      {children}
+    </FlagmintProvider>
+  )
+}
+```
+### Vite + React
+```tsx
+// src/main.tsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { FlagmintProvider } from 'react-flagmint/client'
+import App from './App'
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <FlagmintProvider
+      options={{
+        apiKey: import.meta.env.VITE_FLAGMINT_API_KEY,
+        transportMode: 'websocket'
+      }}
+    >
+      <App />
+    </FlagmintProvider>
+  </React.StrictMode>
+)
+```
+### Remix
+```tsx
+// app/root.tsx
+import { FlagmintProvider } from 'react-flagmint/client'
+export default function App() {
+  return (
+    <html>
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <FlagmintProvider
+          options={{
+            apiKey: process.env.FLAGMINT_API_KEY!,
+            transportMode: 'long-polling'
+          }}
+        >
+          <Outlet />
+        </FlagmintProvider>
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+```
+## ⚡ Performance
+### Fine-grained Reactivity
+Only components that use specific flags will re-render when those flags change:
+```tsx
+// ✅ Good: Only re-renders when 'feature-a' changes
+function ComponentA() {
+  const featureA = useFlag('feature-a', false)
+  return <div>{featureA && <FeatureA />}</div>
+}
+// ✅ Good: Only re-renders when 'feature-b' changes
+function ComponentB() {
+  const featureB = useFlag('feature-b', false)
+  return <div>{featureB && <FeatureB />}</div>
+}
+// ❌ Avoid: Re-renders when ANY flag changes
+function ComponentAll() {
+  const allFlags = useFlags()
+  return <div>{allFlags['feature-a'] && <FeatureA />}</div>
+}
+```
+### Bundle Size
+- **react-flagmint**: ~3KB gzipped
+- **zustand**: ~2KB gzipped
+- **Total overhead**: ~5KB gzipped
+## 🔧 Development
+### Local Development
+```bash
+# Clone the monorepo
+git clone <repo-url>
+cd flagmint-monorepo
+# Install dependencies
+pnpm install
+# Build the library
+pnpm --filter react-flagmint build
+# Run the Next.js example
+pnpm dev:next
+```
+### Testing
+```bash
+# Run tests
+pnpm test
+# Type checking
+pnpm typecheck
+# Lint
+pnpm lint
+```
+## 📄 License
+MIT
+## 🤝 Contributing
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Add tests
+5. Submit a pull request
+## 📞 Support
+- 📧 Email: support@flagmint.com
+- 🐛 Issues: [GitHub Issues](https://github.com/jtad009/flagmint-react-sdk/issues)
+- 📖 Docs: [Documentation](https://docs.flagmint.com)
+---
+**Made with ❤️ by the Flagmint team**

package/package.json ADDED Viewed

@@ -0,0 +1,13 @@
+{
+  "name": "flagmint-monorepo",
+  "version": "1.0.11",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm --filter react-flagmint build",
+    "dev:next": "pnpm --filter nextjs-app dev",
+    "clean": "pnpm -r exec rm -rf dist node_modules"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  }
+}

package/packages/react-flagmint/package.json ADDED Viewed

@@ -0,0 +1,43 @@
+{
+  "name": "flagmint-react-sdk",
+  "version": "0.6.0",
+  "description": "React wrapper for flagmint-js-sdk",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "import": "./dist/client.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "pnpm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "zustand": "^4.4.0",
+    "flagmint-js-sdk": "1.0.11"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0"
+  }
+}

package/packages/react-flagmint/src/hooks/index.ts ADDED Viewed

@@ -0,0 +1,66 @@
+'use client';
+import { FlagValue } from "flagmint-js-sdk"
+import { useContext } from "react"
+import { StoreApi, useStore } from "zustand"
+import { FlagmintStoreContext } from "@/providers/FlagmintProvider"
+import { FlagStore, Flags } from "@/types"
+// Helper to get the store from context
+export function useFlagmintStore(): StoreApi<FlagStore> {
+  const store = useContext(FlagmintStoreContext)
+  if (!store) {
+    throw new Error('useFlagmintStore must be used within a FlagmintProvider')
+  }
+  return store
+}
+// Hook to get the client instance and update context
+export function useFlagmint() {
+  const store = useFlagmintStore()
+  const client = useStore(store, (state) => state.client)
+  const isInitialized = useStore(store, (state) => state.isInitialized)
+  const updateContext = async (context: Record<string, any>) => {
+    if (!client) {
+      throw new Error('Flagmint client not initialized')
+    }
+    await client.updateContext(context)
+  }
+  return {
+    client,
+    isInitialized,
+    updateContext
+  }
+}
+// Hook to get all flags - only re-renders when flags change
+export function useFlags(): Flags {
+  const store = useFlagmintStore()
+  return useStore(store, (state) => state.flags)
+}
+// Simplified useFlag - just read from the reactive store
+export function useFlag<T = FlagValue>(
+  key: string,
+  fallback?: T
+): T {
+  const store = useFlagmintStore()
+  // Subscribe to this specific flag in the store
+  const flagValue = useStore(store, (state) => state.flags[key])
+  // Return the flag value or fallback
+  return (flagValue ?? fallback) as T
+}
+// Hook to check if the client is ready
+export function useFlagmintReady(): boolean {
+  const store = useFlagmintStore()
+  // Subscribe to both isReady and isInitialized
+  const isReady = useStore(store, (state) => state.isReady)
+  const isInitialized = useStore(store, (state) => state.isInitialized)
+  return isReady && isInitialized
+}

package/packages/react-flagmint/src/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './types';

package/packages/react-flagmint/src/providers/FlagmintProvider.tsx ADDED Viewed

@@ -0,0 +1,113 @@
+'use client';
+import { FlagClient } from "flagmint-js-sdk"
+import { useMemo, useRef, useEffect, createContext } from "react"
+import { createFlagStore } from "@/store/store"
+import { FlagmintProviderProps, Flags, FlagStore } from "@/types"
+import { StoreApi } from "zustand"
+export const FlagmintStoreContext = createContext<StoreApi<FlagStore> | null>(null)
+/**
+ * Provides the Flagmint flag store to React components and keeps it synced with FlagClient updates.
+ * Lifecycle overview:
+ * - App loads → FlagClient constructed → initialize() begins.
+ * - Cached flags applied → subscribers notified → React renders cached values.
+ * - Transport set up → initial fetch → store updated → subscribers notified.
+ * - Subsequent server updates propagate via client.subscribe to re-render consumers.
+ * - When context changes (updateContext), flags are re-fetched and the store is refreshed.
+ *
+ * @param props Component props: children, client options, optional initial flags, and deferInitialization flag.
+ * @returns A provider that supplies the flag store context to its children.
+ */
+export function FlagmintProvider<
+  T extends FlagClient<T, C>,
+  C extends Record<string, any> = Record<string, any>
+>({
+  children,
+  options,
+  initialFlags = {},
+  deferInitialization = false
+}: FlagmintProviderProps<T, C>) {
+  // Create a new store instance for each provider (per-request in SSR)
+  const store = useMemo(() => createFlagStore(initialFlags), [initialFlags])
+  // Use ref to avoid recreating client on every render
+  const clientRef = useRef<FlagClient<T, C> | null>(null)
+  const initPromiseRef = useRef<Promise<FlagClient<T, C>> | null>(null)
+  const unsubscribeRef = useRef<(() => void) | null>(null)
+  // Initialization function similar to Vue plugin
+  const init = async (): Promise<FlagClient<T, C>> => {
+    if (clientRef.current) return clientRef.current // Avoid re-init
+    // Return existing promise if init is already in progress
+    if (initPromiseRef.current) return initPromiseRef.current
+    const { setClient, setReady, setInitialized, setFlags } = store.getState()
+    initPromiseRef.current = (async () => {
+      try {
+        // Create the FlagClient
+        const client = new FlagClient<T, C>(options)
+        // Wait for client to be ready
+        await client.ready()
+        // Get initial flags from client
+        const initialClientFlags = client.getFlags()
+        setFlags(initialClientFlags)
+        // Subscribe to flag changes - THIS IS THE KEY FIX
+        const unsubscribe = client.subscribe((updatedFlags: Flags) => {
+          console.log('FlagmintProvider - flags updated:', updatedFlags)
+          setFlags(updatedFlags)
+        })
+        unsubscribeRef.current = unsubscribe
+        clientRef.current = client
+        setClient(client)
+        setReady(true)
+        setInitialized(true)
+        console.log('FlagmintProvider - initialized with flags:', initialClientFlags)
+        return client
+      } catch (error) {
+        console.error('Failed to initialize Flagmint client:', error)
+        throw error
+      }
+    })()
+    return initPromiseRef.current
+  }
+  useEffect(() => {
+    if (!deferInitialization) {
+      init().catch(error => {
+        console.error('Auto-initialization failed:', error)
+      })
+    }
+    return () => {
+      // Unsubscribe from flag changes
+      if (unsubscribeRef.current) {
+        unsubscribeRef.current()
+        unsubscribeRef.current = null
+      }
+      // Destroy client
+      if (clientRef.current) {
+        clientRef.current.destroy?.()
+        clientRef.current = null
+        initPromiseRef.current = null
+      }
+    }
+  }, [deferInitialization])
+  return (
+    <FlagmintStoreContext.Provider value={store}>
+      {children}
+    </FlagmintStoreContext.Provider>
+  )
+}

package/packages/react-flagmint/src/store/store.ts ADDED Viewed

@@ -0,0 +1,20 @@
+'use client';
+import { createStore, StoreApi } from "zustand/vanilla";
+import { Flags, FlagStore } from "@/types";
+export function createFlagStore(initialFlags: Flags = {}): StoreApi<FlagStore> {
+   return createStore<FlagStore>((set, get) => ({
+    flags: initialFlags,
+    client: null,
+    isInitialized: false,
+    isReady: false,
+    setFlags: (flags) => set({ flags }),
+    setFlag: (key, value) => set((state) => ({
+      flags: { ...state.flags, [key]: value }
+    })),
+    setClient: (client) => set({ client }),
+    setInitialized: (initialized) => set({ isInitialized: initialized }),
+    setReady: (ready) => set({ isReady: ready })
+  }))
+}

package/packages/react-flagmint/src/types.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { FlagClient, FlagClientOptions } from "flagmint-js-sdk"
+import { ReactNode } from "react"
+export type FlagValue = string | number | boolean | object | null
+export interface Flags {
+  [key: string]: FlagValue
+}
+export interface CoreClientLike {
+  getFlags(): Promise<Flags> | Flags
+  getFlag(key: string, fallback?: FlagValue): Promise<FlagValue> | FlagValue
+  subscribe(callback: (flags: Flags) => void): () => void
+  updateContext(context: Record<string, any>): Promise<void> | void
+  init(): Promise<void> | void
+  close(): Promise<void> | void
+}
+export interface FlagmintProviderProps {
+  children: ReactNode
+  createClient?: () => CoreClientLike
+  client: CoreClientLike
+  initialFlags?: Flags
+}
+export interface FlagStore {
+  flags: Flags
+  client: FlagClient<any, any> | null
+  isInitialized: boolean
+  isReady: boolean
+  setFlags: (flags: Flags) => void
+  setFlag: (key: string, value: FlagValue) => void
+  setClient: (client: FlagClient<any, any> | null) => void
+  setInitialized: (initialized: boolean) => void
+  setReady: (ready: boolean) => void
+}
+export interface FlagmintProviderProps<
+  T = unknown,
+  C extends Record<string, any> = Record<string, any>
+> {
+  children: ReactNode
+  options: FlagClientOptions<C>
+  initialFlags?: Flags
+  deferInitialization?: boolean
+}

package/packages/react-flagmint/tsconfig.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "declaration": true,
+    "noEmit": false,
+    "jsx": "react-jsx",
+    "incremental": false,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules"]
+}

package/packages/react-flagmint/tsup.config.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import { defineConfig } from 'tsup'
+export default defineConfig({
+  entry: {
+    index: 'src/index.ts',
+  },
+  format: ['esm', 'cjs'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  treeshake: true,
+  target: 'es2019',
+  external: ['react', 'react-dom', 'zustand', 'flagmint-js-sdk'],
+  esbuildOptions(options) {
+    options.jsx = 'automatic'
+  }
+})

package/pnpm-workspace.yaml ADDED Viewed

@@ -0,0 +1,3 @@
+packages:
+  - 'packages/*'
+  - 'examples/*'

package/tsconfig.base.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2019",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", "dist", ".next"]
+}