Enhance ts support snippet

src/components/SdkModal.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState, useEffect } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { Flag } from '../../types';
 import { __ } from '@wordpress/i18n';
+import TsSupport from './TsSupport';
 
 interface SdkModalProps {
 	item: Flag;
@@ -42,14 +43,17 @@ const SdkModal = ({ item, closeSdkModal }: SdkModalProps): JSX.Element => {
 	const jsSnippet = useMemo(() => {
 		return `import domReady from '@wordpress/dom-ready';
 domReady(function () {
-	if (window.mrFeatureFlags.isEnabled('${item.name}')) {
+	if (
+		typeof window?.mrFeatureFlags !== 'undefined' &&
+		window.mrFeatureFlags.isEnabled('Menus')
+	) {
 		// js code goes here...
 	}
- });`;
+});`;
 	}, [item.name]);
 
 	const phpSnippet = useMemo(() => {
-		return `if ( MR\\FeatureFlags\\Utils::is_enabled( '${item.name}' ) ) {
+		return `if ( class_exists( 'MR\\FeatureFlags\\Utils' ) && MR\\FeatureFlags\\Utils::is_enabled( '${item.name}' ) ) {
 	// php code goes here...
 }`;
 	}, [item.name]);
@@ -73,35 +77,35 @@ domReady(function () {
 				<Button
 					icon={hasPhpCopied ? 'yes-alt' : 'clipboard'}
 					style={{
-						position: 'absolute',
-						right: 40,
-						width: 40,
-						height: 40,
-						top: 142,
 						color: 'darkgray',
+						float: 'right',
+						position: 'relative',
+						right: 40,
 					}}
 					isPressed={false}
 					variant={'tertiary'}
 					ref={phpRef}
 				/>
-				<Snippet data={phpSnippet} />
+				<Snippet data={phpSnippet} language={'php'} />
 			</div>
 			<div className="mr-feature-flag-js-snippet-container">
 				<h3>{__('JavaScript Snippet', 'mr-feature-flags')}</h3>
 				<Button
 					icon={hasJsCopied ? 'yes-alt' : 'clipboard'}
 					style={{
-						position: 'absolute',
-						right: 40,
-						width: 40,
-						height: 40,
 						color: 'darkgray',
+						float: 'right',
+						position: 'relative',
+						right: 40,
 					}}
 					isPressed={false}
 					variant={'tertiary'}
 					ref={jsRef}
 				/>
-				<Snippet data={jsSnippet} />
+				<Snippet data={jsSnippet} language={'typescript'} />
+			</div>
+			<div className="mr-feature-flags-ts-snipper-container">
+				<TsSupport />
 			</div>
 		</Modal>
 	);

src/components/Snippet.tsx

@@ -1,9 +1,15 @@
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
-const Snippet = ({ data }: { data: string }): JSX.Element => {
+const Snippet = ({
+	data,
+	language,
+}: {
+	data: string;
+	language: string;
+}): JSX.Element => {
 	return (
-		<SyntaxHighlighter language="javascript" style={a11yDark}>
+		<SyntaxHighlighter language={language} style={a11yDark}>
 			{data}
 		</SyntaxHighlighter>
 	);

src/components/TsSupport.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+import Snippet from './Snippet';
+
+const TsSupport = (): JSX.Element => {
+	const tsSnippet = useMemo(() => {
+		return `declare namespace mrFeatureFlags {
+	export interface FeatureFlagProps {
+        isEnabled: (flag: string) => boolean;
+    }
+}
+declare global {
+    interface Window {
+        mrFeatureFlags: mrFeatureFlags.FeatureFlagProps;
+    }
+}
+export {};`;
+	}, []);
+
+	return (
+		<div className="mr-feature-flags-php-snippet-container">
+			<h3>{__('TypeScript support', 'mr-feature-flags')}</h3>
+			<p>
+				Create a file named{' '}
+				<span className="mr-feature-flags-slug">flags.d.ts</span> at the
+				root of the plugin / theme and add below declaration.
+			</p>
+			<Snippet data={tsSnippet} language={'typescript'} />
+		</div>
+	);
+};
+
+export default TsSupport;

src/styles/settings.scss

@@ -21,3 +21,10 @@
 #mr-feature-flag-submit-controls {
 	margin-top: 20px;
 }
+
+.mr-feature-flags-slug {
+	background-color: #007cba;
+	border-radius: 6px;
+	padding: 3px;
+	color: #fff;
+}