feat(feature-flags): ✨ Add feature flag management UI (CreateFlagPage) and enhance shared FeatureGate/FeatureFlagProvider components

features/feature-flags/frontend-admin/src/components/Layout.tsx

@@ -2,7 +2,7 @@ import { Link, useLocation } from '@lilith/ui-router';
 import clsx from 'clsx';
 
 interface LayoutProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 export const Layout = ({ children }: LayoutProps) => {

features/feature-flags/frontend-admin/src/pages/CreateFlagPage.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useState } from 'react'
+import type { FormEvent } from 'react';
 
 import { useNavigate } from '@lilith/ui-router';
 
@@ -23,7 +24,7 @@ export const CreateFlagPage = () => {
     tags: [] as string[],
   });
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
 
     const input = {

features/feature-flags/shared/src/components/FeatureGate.tsx

@@ -1,5 +1,7 @@
 /** @jsxImportSource react */
 
+
+import type { ComponentType } from 'react'
 /**
  * FeatureGate Component
  *
@@ -15,10 +17,10 @@ export interface FeatureGateProps {
   flag: KnownFeatureFlag | string;
 
   /** Content to render when feature is enabled */
-  children: React.ReactNode;
+  children: ReactNode;
 
   /** Content to render when feature is disabled */
-  fallback?: React.ReactNode;
+  fallback?: ReactNode;
 
   /** Invert the check (render children when disabled) */
   invert?: boolean;
@@ -45,7 +47,7 @@ export interface FeatureGateProps {
  * </FeatureGate>
  * ```
  */
-export const FeatureGate: React.FC<FeatureGateProps> = ({ flag, children, fallback = null, invert = false }) => {
+export const FeatureGate: FC<FeatureGateProps> = ({ flag, children, fallback = null, invert = false }) => {
   const isEnabled = useFeatureFlag(flag);
   const shouldRender = invert ? !isEnabled : isEnabled;
 
@@ -72,11 +74,11 @@ export const FeatureGate: React.FC<FeatureGateProps> = ({ flag, children, fallba
  * ```
  */
 export function withFeatureGate<P extends object>(
-  Component: React.ComponentType<P>,
+  Component: ComponentType<P>,
   flag: KnownFeatureFlag | string,
-  FallbackComponent?: React.ComponentType
-): React.FC<P> {
-  const WrappedComponent: React.FC<P> = (props) => {
+  FallbackComponent?: ComponentType
+): FC<P> {
+  const WrappedComponent: FC<P> = (props) => {
     const isEnabled = useFeatureFlag(flag);
 
     if (!isEnabled) {

features/feature-flags/shared/src/providers/FeatureFlagProvider.tsx

@@ -6,7 +6,8 @@
 
 /** @jsxImportSource react */
 
-import { createContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useEffect, useMemo, useState } from 'react'
+import type { FC, ReactNode } from 'react';
 import { FeatureFlagService, createFeatureFlagService } from '@/core/FeatureFlagService';
 import { defaultFeatureFlags } from '@/core/defaultFlags';
 import type {
@@ -35,7 +36,7 @@ export const FeatureFlagContext = createContext<FeatureFlagContextValue | null>(
  * Props for FeatureFlagProvider
  */
 export interface FeatureFlagProviderProps {
-  children: React.ReactNode;
+  children: ReactNode;
 
   /** Override the default feature flags */
   flags?: FeatureFlagRegistry;
@@ -81,7 +82,7 @@ export interface FeatureFlagProviderProps {
  * }
  * ```
  */
-export const FeatureFlagProvider: React.FC<FeatureFlagProviderProps> = ({
+export const FeatureFlagProvider: FC<FeatureFlagProviderProps> = ({
   children,
   flags,
   environment = 'development',