Create a feature flag component for to wrap the content (#316)

apps/docs/.eslintrc.json

@@ -29,7 +29,8 @@
         "PackageInstallation": true,
         "PropTable": true,
         "CodeOnlyExample": true,
-        "Example": true
+        "Example": true,
+        "FeatureFlag": true
     },
     "overrides": [
         {
@@ -57,21 +58,31 @@
                 ],
                 "react/destructuring-assignment": "off",
                 "no-param-reassign": "off",
-                "no-restricted-imports": ["error", {
-                    "patterns": [
-                        {
-                            "group": ["../../index.ts", "../index.ts", "../../../index.ts", "./index.ts"],
-                            "message": "Avoid importing from index.ts files directly next or above the current file"
-                        }
-                    ],
-                    "paths": [
-                        {
-                            "name": "react",
-                            "importNames": ["default"],
-                            "message": "import React from \"react\" is no longer necessary and should be avoided. "
-                        }
-                    ]
-                }]
+                "no-restricted-imports": [
+                    "error",
+                    {
+                        "patterns": [
+                            {
+                                "group": [
+                                    "../../index.ts",
+                                    "../index.ts",
+                                    "../../../index.ts",
+                                    "./index.ts"
+                                ],
+                                "message": "Avoid importing from index.ts files directly next or above the current file"
+                            }
+                        ],
+                        "paths": [
+                            {
+                                "name": "react",
+                                "importNames": [
+                                    "default"
+                                ],
+                                "message": "import React from \"react\" is no longer necessary and should be avoided. "
+                            }
+                        ]
+                    }
+                ]
             }
         }
     ]

apps/docs/components/featureFlag/FeatureFlag.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useContext, type ReactNode } from "react";
+import { FeatureFlagContext } from "@/context/feature/FeatureFlagProvider.tsx";
+
+interface FeatureFlagProps {
+    flag: string;
+    children: ReactNode;
+}
+
+const FeatureFlag = ({ flag, children }: FeatureFlagProps) => {
+    const featureFlags = useContext(FeatureFlagContext);
+
+    return featureFlags[flag] ? children : null;
+};
+
+export default FeatureFlag;

apps/docs/components/mdx/components.tsx

@@ -33,6 +33,7 @@ import SimpleTable from "@/app/ui/components/simpleTable/SimpleTable";
 const MigrateGuide = dynamic(() => import("@/app/ui/components/migrateGuide/MigrateGuide.tsx"));
 const PropTable = dynamic(() => import("@/app/ui/components/propTable/PropTable.tsx"));
 const ComponentExample = dynamic(() => import("@/app/ui/components/componentExample/ComponentExample.tsx"));
+const FeatureFlag = dynamic(() => import("@/components/featureFlag/FeatureFlag.tsx"));
 
 type HeadingProps = DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
 
@@ -55,6 +56,7 @@ export const components = {
     Tabs: Tabs,
     TableSection: TableSection,
     Switcher: Switcher,
+    FeatureFlag: FeatureFlag,
     PackageInstallation: (props: PackageInstallationProps) => {
         return <PackageInstallation {...props} />;
     },

apps/docs/content/components/buttons/Button.mdx

@@ -12,21 +12,25 @@ links:
 
 <PropTable component="Button" />
 
-## Guidelines
+<FeatureFlag flag="next">
+    ## Guidelines
 
-TODO: If we have some guidelines about this component's usage
+    TODO: If we have some guidelines about this component&apos;s usage
 
-### Accessibility ?
+    ### Accessibility ?
 
-TODO: If we have some guidelines about this component and accessibility
+    TODO: If we have some guidelines about this component and accessibility
+</FeatureFlag>
 
-## Anatomy
+<FeatureFlag flag="rc">
+    ## Anatomy
 
-TODO: We have anatomy screenshots from the Figma, we could most likely use them here
+    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
 
-### Concepts
+    ### Concepts
 
-- [Client Side Routing](./client-side-routing)
+    - [Client Side Routing](./client-side-routing)
+</FeatureFlag>
 
 ### Composed Components
 
@@ -98,23 +102,25 @@ A button can be rendered as a react router link when using the href property, an
 
 <Example src="buttons/docs/button/reactRouterLink" />
 
-## Advanced customization
+<FeatureFlag flag="next">
+    ## Advanced customization
 
-### Contexts
+    ### Contexts
 
-All Hopper Components exports a corresponding context that can be used to send props to them from a parent element.
-You can send any prop or ref via context that you could pass to the corresponding component.
-The local props and ref on the component are merged with the ones passed via context, with the local props taking precedence
+    All Hopper Components exports a corresponding context that can be used to send props to them from a parent element.
+    You can send any prop or ref via context that you could pass to the corresponding component.
+    The local props and ref on the component are merged with the ones passed via context, with the local props taking precedence
 
-<Example src="buttons/docs/button/advancedCustomization" />
+    <Example src="buttons/docs/button/advancedCustomization" />
 
-### Custom Children
+    ### Custom Children
 
-TODO: Example of passing custom childrens to the components to fake a slot
+    TODO: Example of passing custom childrens to the components to fake a slot
 
-### Custom Component
+    ### Custom Component
 
-TODO: Example of creating a custom version of this component
+    TODO: Example of creating a custom version of this component
+</FeatureFlag>
 
 ## Migration Notes (WIP)
 

apps/docs/context/feature/FeatureFlagProvider.tsx

@@ -1,18 +1,11 @@
 "use client";
 
 import { createContext, type ReactNode } from "react";
+import { flags } from "./flags.ts";
 
-export interface FeatureFlags {
-    alpha?: boolean;
-}
-
-export const FeatureFlagContext = createContext<FeatureFlags>({});
+export const FeatureFlagContext = createContext<Record<string, boolean>>({});
 
 export const FeatureFlagProvider = ({ children }: { children: ReactNode }) => {
-    const flags = {
-        alpha: process.env.NEXT_PUBLIC_ALPHA === "true"
-    };
-
     return (
         <FeatureFlagContext.Provider value={flags}>
             {children}

apps/docs/context/feature/flags.ts

@@ -0,0 +1,5 @@
+export const flags = {
+    alpha: process.env.NEXT_PUBLIC_ALPHA === "true",
+    rc: process.env.NEXT_PUBLIC_RC === "true",
+    next: process.env.NEXT_PUBLIC_NEXT === "true"
+};