feat: added an environment ribbon

ribbon-studios · Jan 20, 2024 · e16f0b0 · e16f0b0
1 parent 3afa387
commit e16f0b0
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 12 deletions.
diff --git a/app/campaigns/page.tsx b/app/campaigns/page.tsx
@@ -1,9 +1,10 @@
-import { FeatureFlag, FeatureFlagService } from '@/backend/services/feature-flags.service';
+import { EnvironmentService, FeatureFlag } from '@/backend/services/environment.service';
+import { redirect } from 'next/navigation';
 
 export default async function Campaigns() {
-  const isDisabled = FeatureFlagService.disabled(FeatureFlag.Campaigns);
+  const isDisabled = EnvironmentService.disabled(FeatureFlag.Campaigns);
 
-  if (isDisabled) return null;
+  if (isDisabled) return redirect('/');
 
   return <div className="flex flex-wrap justify-center gap-4">WIP</div>;
 }
diff --git a/app/games/page.tsx b/app/games/page.tsx
@@ -1,9 +1,10 @@
-import { FeatureFlag, FeatureFlagService } from '@/backend/services/feature-flags.service';
+import { EnvironmentService, FeatureFlag } from '@/backend/services/environment.service';
+import { redirect } from 'next/navigation';
 
 export default async function Games() {
-  const isDisabled = FeatureFlagService.disabled(FeatureFlag.Games);
+  const isDisabled = EnvironmentService.disabled(FeatureFlag.Games);
 
-  if (isDisabled) return null;
+  if (isDisabled) return redirect('/');
 
   return <div className="flex flex-wrap justify-center gap-4">WIP</div>;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,8 @@
+import { EnvironmentService } from '@/backend/services/environment.service';
 import { Footer } from '@/components/Footer';
 import { Header } from '@/components/Header';
 import { cn } from '@/lib/utils';
+import { Ribbon } from '@rain-cafe/ribbon';
 import type { Metadata } from 'next';
 import { SessionProvider } from 'next-auth/react';
 import { Roboto } from 'next/font/google';
@@ -32,12 +34,15 @@ export const metadata: Metadata = {
   },
 };
 
+const { ribbon } = EnvironmentService;
+
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const session = await auth();
 
   return (
     <html lang="en">
       <body className={cn('flex flex-col min-h-screen font-sans antialiased dark', font.variable)}>
+        {ribbon && <Ribbon {...ribbon}>{ribbon.label}</Ribbon>}
         <div
           className={cn('max-w-screen-2xl w-full flex flex-col gap-4 p-4 pt-12 mx-auto min-h-screen', font.variable)}
         >

diff --git a/backend/services/feature-flags.service.ts → backend/services/environment.service.ts b/backend/services/feature-flags.service.ts → backend/services/environment.service.ts
@@ -16,6 +16,12 @@ export type FeatureFlagValue =
       [key in Environment]?: boolean;
     };
 
+type RibbonConfig = {
+  label: string;
+  backgroundColor: string;
+  color: string;
+};
+
 const FEATURE_FLAGS: Record<FeatureFlag, FeatureFlagValue> = {
   [FeatureFlag.Campaigns]: {
     [Environment.Local]: true,
@@ -31,12 +37,25 @@ const FEATURE_FLAGS: Record<FeatureFlag, FeatureFlagValue> = {
   },
 };
 
-export const environment: Environment =
+export const ENVIRONMENT: Environment =
   process.env.ENVIRONMENT && Object.values(Environment).includes(process.env.ENVIRONMENT as Environment)
     ? (process.env.ENVIRONMENT as Environment)
     : Environment.Local;
 
-export class FeatureFlagService {
+export const RIBBON_CONFIGS: Partial<Record<Environment, RibbonConfig>> = {
+  [Environment.Local]: {
+    label: 'Local',
+    backgroundColor: '#186a3a',
+    color: 'white',
+  },
+  [Environment.Alpha]: {
+    label: 'Alpha',
+    backgroundColor: '#4a235a',
+    color: 'white',
+  },
+};
+
+export class EnvironmentService {
   /**
    * Retrieves the feature flag for the current environment
    * @param flag The flag to retrieve
@@ -48,7 +67,7 @@ export class FeatureFlagService {
 
     if (typeof value === 'boolean') return value;
 
-    return value[environment] ?? defaultValue;
+    return value[ENVIRONMENT] ?? defaultValue;
   }
 
   /**
@@ -58,6 +77,10 @@ export class FeatureFlagService {
    * @returns if the feature flag is disabled
    */
   static disabled(flag: FeatureFlag, defaultValue?: boolean): boolean {
-    return !FeatureFlagService.enabled(flag, defaultValue);
+    return !EnvironmentService.enabled(flag, defaultValue);
+  }
+
+  static get ribbon(): RibbonConfig | undefined {
+    return RIBBON_CONFIGS[ENVIRONMENT];
   }
 }
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { FeatureFlag, FeatureFlagService } from '@/backend/services/feature-flags.service';
+import { EnvironmentService, FeatureFlag } from '@/backend/services/environment.service';
 import { cn } from '@/lib/utils';
 import { classNames } from '@rain-cafe/react-utils';
 import { BadgePlus, Dices, LucideIcon, Menu, NotebookPen, Swords, X } from 'lucide-react';
@@ -38,7 +38,7 @@ const links: Header.Link[] = (
       flag: FeatureFlag.Characters,
     },
   ] satisfies Header.Link[]
-).filter((link) => !link.flag || FeatureFlagService.enabled(link.flag));
+).filter((link) => !link.flag || EnvironmentService.enabled(link.flag));
 
 export function Header() {
   const pathname = usePathname();

diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@rain-cafe/react-utils": "^1.2.0",
+    "@rain-cafe/ribbon": "^1.0.3",
     "bcrypt": "^5.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",