chore(docs): create a feature flag component for to wrap the content

Added an example in button.mdx to define what will be displayed.

- alpha: feedback round
- rc: documentation release
- next: in next iteration

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'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"
+};