feat: display a badge in top of all samples when the theme is a draft (…

…#5820)
public-ui · Dec 21, 2023 · fc7fd33 · fc7fd33
2 parents c8e8011 + ec2a024
commit fc7fd33
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/samples/react/src/App.tsx b/packages/samples/react/src/App.tsx
@@ -3,9 +3,9 @@ import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
 import { Route as MyRoute, Routes as MyRoutes } from './shares/types';
 
 import { Option } from '@public-ui/components';
-import { KolAlert } from '@public-ui/react';
+import { KolAlert, KolBadge } from '@public-ui/react';
 import { ROUTES } from './shares/routes';
-import { Theme, THEME_OPTIONS } from './shares/theme';
+import { isDraftTheme, Theme, THEME_OPTIONS } from './shares/theme';
 import PackageJson from '@public-ui/components/package.json';
 import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
 import { Sidebar } from './components/Sidebar';
@@ -103,7 +103,7 @@ ROUTE_LIST.forEach((route) => {
 export const App: FC = () => {
 	const routerLocation = useLocation();
 	const [searchParams, setSearchParams] = useSearchParams();
-	const theme = searchParams.get('theme') ?? getTheme();
+	const theme: Theme = (searchParams.get('theme') as Theme) ?? getTheme();
 	const hideMenus = searchParams.has('hideMenus');
 
 	setTheme(theme as Theme); // set for `getTheme` usages within the application
@@ -133,6 +133,7 @@ export const App: FC = () => {
 				)}
 
 				<div className="p-4" id="route-container">
+					{!hideMenus && isDraftTheme(theme) && <KolBadge className="mb-3" _label="DRAFT" _color="#db5461" />}
 					<Routes>
 						{ROUTE_TREE}
 						<Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />

diff --git a/packages/samples/react/src/shares/theme.ts b/packages/samples/react/src/shares/theme.ts
@@ -2,6 +2,10 @@ import { SelectOption } from '@public-ui/components';
 
 export type Theme = 'bmf' | 'default' | 'ecl-ec' | 'ecl-eu' | 'itzbund' | 'th' | 'unstyled';
 
+const drafts: Theme[] = ['ecl-ec', 'ecl-eu', 'itzbund', 'th'];
+
+export const isDraftTheme = (theme: Theme) => drafts.includes(theme);
+
 export const isTheme = (value: unknown) => {
 	return (
 		typeof value === 'string' &&