chore: Migrate flagsmith to @Flagsmith/flagsmith and @flagsmith/react-native (#6924)

Author: kyle-ssg

docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/javascript.md

@@ -15,7 +15,7 @@ Example applications for a variety of JavaScript frameworks such as React, Vue a
 ### NPM
 
 ```bash
-npm i flagsmith --save
+npm i @flagsmith/flagsmith --save
 ```
 
 ### NPM for React Native
@@ -29,7 +29,7 @@ AsyncStorage to be provided (e.g. @react-native-community/async-storage) in orde
 :::
 
 ```bash
-npm i react-native-flagsmith --save
+npm i @flagsmith/react-native --save
 ```
 
 ## Basic Usage
@@ -41,7 +41,7 @@ settings page.
 ### Example: Initialising the SDK
 
 ```javascript
-import flagsmith from 'flagsmith or react-native-flagsmith'; //Add this line if you're using flagsmith via npm
+import flagsmith from '@flagsmith/flagsmith or @flagsmith/react-native'; //Add this line if you're using flagsmith via npm
 
 flagsmith.init({
  environmentID: '<YOUR_CLIENT_SIDE_ENVIRONMENT_KEY>',
@@ -82,7 +82,7 @@ You can define default flag values when initialising the SDK. This ensures that
 the event that it [cannot receive a response from our API](/best-practices/defensive-coding).
 
 ```javascript
-import flagsmith from 'flagsmith or react-native-flagsmith'; //Add this line if you're using flagsmith via npm
+import flagsmith from '@flagsmith/flagsmith or @flagsmith/react-native'; //Add this line if you're using flagsmith via npm
 
 try {
     flagsmith.init({
@@ -136,7 +136,7 @@ When you initialise the client without an identity, it will fetch the flags for
 `preventFetch:true`).
 
 ```javascript
-import flagsmith from 'flagsmith';
+import flagsmith from '@flagsmith/flagsmith';
 
 flagsmith.init({
  environmentID: '<YOUR_CLIENT_SIDE_ENVIRONMENT_KEY>',
@@ -170,7 +170,7 @@ flagsmith.init({
 });
 
 /*
-Can be called either after you're done initialising the project or in flagsmith.init with its identity and trait properties 
+Can be called either after you're done initialising the project or in flagsmith.init with its identity and trait properties
 to prevent flags being fetched twice.
 */
 flagsmith.identify('flagsmith_sample_user'); //This will create a user in the dashboard if they don't already exist
@@ -182,7 +182,7 @@ Initialising the client with an identity property will retrieve the user's flags
 You can also specify traits at this point which could determine the flags that come back based on segment overrides.
 
 ```javascript
-import flagsmith from 'flagsmith';
+import flagsmith from '@flagsmith/flagsmith';
 
 flagsmith.init({
  environmentID: '<YOUR_CLIENT_SIDE_ENVIRONMENT_KEY>',
@@ -279,7 +279,7 @@ export function createFlagsmithInstance (): IFlagsmith
 Usage:
 
 ```javascript
-import { createFlagsmithInstance } from 'flagsmith';
+import { createFlagsmithInstance } from '@flagsmith/flagsmith';
 const flagsmith = createFlagsmithInstance();
 const flagsmithB = createFlagsmithInstance();
 
@@ -340,7 +340,7 @@ We can now enforce these types:
 
 ```typescript
 // enforces you passing the correct key to flagsmith.getValue(flag:FlagOptions), flagsmith.getTrait(trait:TraitOptions)
-import flagsmith from 'flagsmith';
+import flagsmith from '@flagsmith/flagsmith';
 const typedFlagsmith = flagsmith as IFlagsmith<FlagOptions, TraitOptions>;
 
 // Similarly for the useFlagsmith hook is typed with useFlagsmith(flags:FlagOptions[],traits:TraitOptions[])

docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/nextjs-and-ssr.md

@@ -23,7 +23,7 @@ An example application for Next.js middleware can be found
 ### NPM
 
 ```bash
-npm i flagsmith --save
+npm i @flagsmith/flagsmith --save
 ```
 
 ## Basic Usage
@@ -34,7 +34,7 @@ settings page.
 ## Comparing SSR and client-side Flagsmith usage
 
 The SDK is initialised and used in the same way as the [JavaScript](/integrating-with-flagsmith/sdks/client-side-sdks/javascript) and [React](/integrating-with-flagsmith/sdks/client-side-sdks/react)
-SDK. The main difference is that Flagsmith should be imported from `flagsmith/isomorphic`.
+SDK. The main difference is that Flagsmith should be imported from `@flagsmith/flagsmith/isomorphic`.
 
 The main flow with Next.js and any JavaScript-based SSR can be as follows:
 
@@ -56,9 +56,9 @@ state. Below is an example for the **app** router as well as the **pages** route
 
 import { ReactNode, useRef } from "react";
 
-import { FlagsmithProvider } from "flagsmith/react";
-import { IState } from "flagsmith/types";
-import { createFlagsmithInstance } from "flagsmith/isomorphic";
+import { FlagsmithProvider } from "@flagsmith/flagsmith/react";
+import { IState } from "@flagsmith/flagsmith/types";
+import { createFlagsmithInstance } from "@flagsmith/flagsmith/isomorphic";
 
 export const FeatureFlagProvider = ({
   serverState,
@@ -79,7 +79,7 @@ export const FeatureFlagProvider = ({
 // src/app/layout.jsx
 import { ReactNode } from "react";
 import { FeatureFlagProvider } from './components/FeatureFlagProvider';
-import flagsmith from "flagsmith/isomorphic";
+import flagsmith from "@flagsmith/flagsmith/isomorphic";
 
 export default async function RootLayout({
   children,
@@ -111,8 +111,8 @@ export default async function RootLayout({
 
 ```javascript
 // src/pages/_app.jsx
-import { FlagsmithProvider } from 'flagsmith/react';
-import { createFlagsmithInstance } from 'flagsmith/isomorphic';
+import { FlagsmithProvider } from '@flagsmith/flagsmith/react';
+import { createFlagsmithInstance } from '@flagsmith/flagsmith/isomorphic';
 function MyApp({ Component, pageProps, flagsmithState }) {
  const flagsmithRef = useRef(createFlagsmithInstance());
  return (
@@ -140,7 +140,7 @@ export default MyApp;
 ```javascript
 'use client'; // Only required by the app router version.
 
-import { useFlags } from 'flagsmith/react';
+import { useFlags } from '@flagsmith/flagsmith/react';
 
 export function MyComponent() {
  const flags = useFlags(['font_size'], ['example_trait']); // only causes re-render if specified flag values / traits change
@@ -157,14 +157,14 @@ From this point on, the SDK usage is the same as the [React SDK Guide](/integrat
 
 ### Example: Flagsmith with Next.js middleware
 
-The Flagsmith JS client includes `flagsmith/next-middleware`, it can be used just like the regular library within
+The Flagsmith JS client includes `@flagsmith/flagsmith/next-middleware`, it can be used just like the regular library within
 Next.js middleware.
 
 ```javascript
 // middleware.ts
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
-import flagsmith from 'flagsmith/next-middleware';
+import flagsmith from '@flagsmith/flagsmith/next-middleware';
 
 export async function middleware(request: NextRequest) {
  const identity = request.cookies.get('user');

docs/docs/integrating-with-flagsmith/sdks/client-side-sdks/react.md

@@ -18,7 +18,7 @@ Example applications for a variety of React, React Native and Next.js can be fou
 ### NPM
 
 ```bash
-npm i flagsmith --save
+npm i @flagsmith/flagsmith --save
 ```
 
 ### NPM for React Native
@@ -32,7 +32,7 @@ AsyncStorage to be provided (e.g. @react-native-community/async-storage) in orde
 :::
 
 ```bash
-npm i react-native-flagsmith --save
+npm i @flagsmith/react-native --save
 ```
 
 ## Basic Usage
@@ -46,8 +46,8 @@ Wrapping your application with our FlagsmithProvider component provides a React
 that you can use the hooks `useFlagsmith` and `useFlags`.
 
 ```javascript
-import flagsmith from 'flagsmith'
-import {FlagsmithProvider} from 'flagsmith/react'
+import flagsmith from '@flagsmith/flagsmith'
+import {FlagsmithProvider} from '@flagsmith/flagsmith/react'
 
 export function AppRoot() {
   <FlagsmithProvider options={{
@@ -75,7 +75,7 @@ Components that have been wrapped in a FlagsmithProvider will be able to evaluat
 well as user traits via the `useFlags` hook.
 
 ```javascript
-import { useFlags } from 'flagsmith/react';
+import { useFlags } from '@flagsmith/flagsmith/react';
 
 export function MyComponent() {
  const flags = useFlags(['font_size'], ['example_trait']); // only causes re-render if specified flag values / traits change
@@ -112,7 +112,7 @@ Components that have been wrapped in a FlagsmithProvider will be able to access
 
 ```javascript
 import React from 'react';
-import { useFlags, useFlagsmith } from 'flagsmith/react';
+import { useFlags, useFlagsmith } from '@flagsmith/flagsmith/react';
 
 export function MyComponent() {
  const flags = useFlags(['font_size'], ['example_trait']); // only causes re-render if specified flag values / traits change

frontend/.claude/context/feature-flags/feature-flags.md

@@ -71,7 +71,7 @@ class MyClassComponent extends Component {
 For reference, the project also supports direct `useFlags` hook, but **Utils.getFlagsmithHasFeature is preferred**:
 
 ```typescript
-import { useFlags } from 'flagsmith/react'
+import { useFlags } from '@flagsmith/flagsmith/react'
 
 const MyComponent = () => {
   const flags = useFlags(['feature_name'])

frontend/.claude/context/ui-patterns.md

@@ -98,7 +98,7 @@ const MyPage = () => {
 When specifically requested, this pattern shows tabs only when feature flag is enabled:
 
 ```typescript
-import { useFlags } from 'flagsmith/react'
+import { useFlags } from '@flagsmith/flagsmith/react'
 import { Tabs } from 'components/base/forms/Tabs'
 import Utils from 'common/utils/utils'
 const MyPage = () => {

frontend/common/code-help/create-user/create-user-next.js

@@ -7,7 +7,7 @@ module.exports = (
 // Option 1: Identify clientside
 //Home Page
 import flagsmith from '${LIB_NAME}/isomorphic';
-import { useFlags, useFlagsmith } from 'flagsmith/react';
+import { useFlags, useFlagsmith } from '@flagsmith/flagsmith/react';
 
 export default function HomePage() {
   const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change

frontend/common/code-help/init/init-next-app-router.js

@@ -38,9 +38,9 @@ export default async function RootLayout({
 "use client";
 
 import { ReactNode, useRef } from "react";
-import { FlagsmithProvider } from "flagsmith/react";
-import { IState } from "flagsmith/types";
-import { createFlagsmithInstance } from "flagsmith/isomorphic";
+import { FlagsmithProvider } from "@flagsmith/flagsmith/react";
+import { IState } from "@flagsmith/flagsmith/types";
+import { createFlagsmithInstance } from "@flagsmith/flagsmith/isomorphic";
 
 export const FeatureFlagProvider = ({
   serverState,
@@ -61,7 +61,7 @@ export const FeatureFlagProvider = ({
 // app/page.tsx
 "use client";
 
-import { useFlags } from 'flagsmith/react';
+import { useFlags } from '@flagsmith/flagsmith/react';
 
 export default function HomePage() {
   const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change

frontend/common/code-help/init/init-next-pages-router.js

@@ -4,7 +4,7 @@ module.exports = (
   { FEATURE_NAME, FEATURE_NAME_ALT, LIB_NAME, NPM_CLIENT },
 ) => `// pages/_app.js
 import ${LIB_NAME} from "${NPM_CLIENT}/isomorphic";
-import { FlagsmithProvider } from 'flagsmith/react';
+import { FlagsmithProvider } from '@flagsmith/flagsmith/react';
 
 export default function App({ Component, pageProps, flagsmithState } {
   return (
@@ -35,8 +35,8 @@ App.getInitialProps = async () => {
 }
 
 // pages/index.js
-import flagsmith from 'flagsmith/isomorphic';
-import { useFlags, useFlagsmith } from 'flagsmith/react';
+import flagsmith from '@flagsmith/flagsmith/isomorphic';
+import { useFlags, useFlagsmith } from '@flagsmith/flagsmith/react';
 
 export default function HomePage() {
   const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change

frontend/common/code-help/init/init-react.js

@@ -5,7 +5,7 @@ module.exports = (
   { FEATURE_NAME, FEATURE_NAME_ALT, LIB_NAME, NPM_CLIENT },
 ) => `// App root
 import ${LIB_NAME} from "${NPM_CLIENT}";
-import { FlagsmithProvider } from 'flagsmith/react';
+import { FlagsmithProvider } from '@flagsmith/flagsmith/react';
 
 export default function App() {
   return (

frontend/common/code-help/traits/traits-next.js

@@ -7,7 +7,7 @@ module.exports = (
 // Option 1: Identify clientside
 //Home Page
 import flagsmith from '${LIB_NAME}/isomorphic';
-import { useFlags, useFlagsmith } from 'flagsmith/react';
+import { useFlags, useFlagsmith } from '@flagsmith/flagsmith/react';
 
 export default function HomePage() {
   const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change