From 2694151f1722b1040ac7f50b9a8afc3772f797ea Mon Sep 17 00:00:00 2001
From: Mohan Raj <mohanraj.pachaiyappan@news.co.uk>
Date: Sat, 25 Mar 2023 18:33:51 +0000
Subject: [PATCH 1/4] add ts snippet

---
 src/components/SdkModal.tsx |  8 ++++++--
 src/components/Snippet.tsx  | 10 ++++++++--
 src/components/TsPanel.tsx  | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 src/components/TsPanel.tsx

diff --git a/src/components/SdkModal.tsx b/src/components/SdkModal.tsx
index ce16d96..032a82c 100644
--- a/src/components/SdkModal.tsx
+++ b/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 TsPanel from './TsPanel';
 
 interface SdkModalProps {
 	item: Flag;
@@ -84,7 +85,7 @@ domReady(function () {
 					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>
@@ -101,7 +102,10 @@ domReady(function () {
 					variant={'tertiary'}
 					ref={jsRef}
 				/>
-				<Snippet data={jsSnippet} />
+				<Snippet data={jsSnippet} language={'typescript'} />
+			</div>
+			<div className="mr-feature-flags-ts-snipper-container">
+				<TsPanel />
 			</div>
 		</Modal>
 	);
diff --git a/src/components/Snippet.tsx b/src/components/Snippet.tsx
index ccb8dbe..25bb9a9 100644
--- a/src/components/Snippet.tsx
+++ b/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>
 	);
diff --git a/src/components/TsPanel.tsx b/src/components/TsPanel.tsx
new file mode 100644
index 0000000..af55808
--- /dev/null
+++ b/src/components/TsPanel.tsx
@@ -0,0 +1,37 @@
+import { PanelBody, PanelRow } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+
+import Snippet from './Snippet';
+
+const TsPanel = (): JSX.Element => {
+	const jsSnippet = useMemo(() => {
+		return `declare namespace mrFeatureFlag {
+    interface flags {
+        id: number;
+        name: string;
+        enabled: boolean;
+    }
+    export interface FeatureFlagProps {
+        isEnabled: (flag: string) => boolean;
+        flags: flags[];
+    }
+}
+
+declare global {
+    interface Window {
+        mrFeatureFlags: mrFeatureFlag.FeatureFlagProps;
+    }
+}
+
+export {};`;
+	}, []);
+	return (
+		<PanelBody title="Typescript support" initialOpen={false}>
+			<PanelRow>
+				<Snippet data={jsSnippet} language={'typescript'} />
+			</PanelRow>
+		</PanelBody>
+	);
+};
+
+export default TsPanel;

From c213e0da204875b832e447e4cd5fc2637f80d1d7 Mon Sep 17 00:00:00 2001
From: Mohan Raj <mohanraj.pachaiyappan@news.co.uk>
Date: Sat, 25 Mar 2023 20:28:19 +0000
Subject: [PATCH 2/4] add ts support and fix clipboard button

---
 src/components/SdkModal.tsx  | 19 ++++++--------
 src/components/TsPanel.tsx   | 37 --------------------------
 src/components/TsSupport.tsx | 50 ++++++++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 48 deletions(-)
 delete mode 100644 src/components/TsPanel.tsx
 create mode 100644 src/components/TsSupport.tsx

diff --git a/src/components/SdkModal.tsx b/src/components/SdkModal.tsx
index 032a82c..66ce828 100644
--- a/src/components/SdkModal.tsx
+++ b/src/components/SdkModal.tsx
@@ -4,7 +4,7 @@ import { useMemo, useState, useEffect } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { Flag } from '../../types';
 import { __ } from '@wordpress/i18n';
-import TsPanel from './TsPanel';
+import TsSupport from './TsSupport';
 
 interface SdkModalProps {
 	item: Flag;
@@ -74,12 +74,10 @@ 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'}
@@ -92,11 +90,10 @@ domReady(function () {
 				<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'}
@@ -105,7 +102,7 @@ domReady(function () {
 				<Snippet data={jsSnippet} language={'typescript'} />
 			</div>
 			<div className="mr-feature-flags-ts-snipper-container">
-				<TsPanel />
+				<TsSupport flag={item} />
 			</div>
 		</Modal>
 	);
diff --git a/src/components/TsPanel.tsx b/src/components/TsPanel.tsx
deleted file mode 100644
index af55808..0000000
--- a/src/components/TsPanel.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { PanelBody, PanelRow } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-
-import Snippet from './Snippet';
-
-const TsPanel = (): JSX.Element => {
-	const jsSnippet = useMemo(() => {
-		return `declare namespace mrFeatureFlag {
-    interface flags {
-        id: number;
-        name: string;
-        enabled: boolean;
-    }
-    export interface FeatureFlagProps {
-        isEnabled: (flag: string) => boolean;
-        flags: flags[];
-    }
-}
-
-declare global {
-    interface Window {
-        mrFeatureFlags: mrFeatureFlag.FeatureFlagProps;
-    }
-}
-
-export {};`;
-	}, []);
-	return (
-		<PanelBody title="Typescript support" initialOpen={false}>
-			<PanelRow>
-				<Snippet data={jsSnippet} language={'typescript'} />
-			</PanelRow>
-		</PanelBody>
-	);
-};
-
-export default TsPanel;
diff --git a/src/components/TsSupport.tsx b/src/components/TsSupport.tsx
new file mode 100644
index 0000000..cdfae8d
--- /dev/null
+++ b/src/components/TsSupport.tsx
@@ -0,0 +1,50 @@
+import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Flag } from '../../types';
+
+import Snippet from './Snippet';
+
+const TsSupport = ({ flag }: { flag: Flag }): JSX.Element => {
+	const tsSnippet = useMemo(() => {
+		return `
+declare namespace mrFeatureFlags {
+    export interface FeatureFlagProps {
+        isEnabled: (flag: string) => boolean;
+    }
+}
+declare global {
+    interface Window {
+        mrFeatureFlags: mrFeatureFlags.FeatureFlagProps;
+    }
+}
+export {};`;
+	}, []);
+
+	const tsIgnoreSnippet = useMemo(() => {
+		return `import domReady from '@wordpress/dom-ready';
+        domReady(function () {
+            //@ts-ignore
+            if (window.mrFeatureFlags.isEnabled('${flag.name}')) {
+                // js code goes here...
+            }
+         });`;
+	}, [flag.name]);
+
+	return (
+		<div className="mr-feature-flag-php-snippet-container">
+			<h3>{__('TypeScript support', 'mr-feature-flags')}</h3>
+			<p>
+				Create `flags.d.ts` file at the root of the plugin / theme to
+				add typescript declaration for feature flags.
+			</p>
+			<Snippet data={tsSnippet} language={'typescript'} />
+			<p>
+				Alternatively, you can ignore typescript warning using below
+				approach
+			</p>
+			<Snippet data={tsIgnoreSnippet} language={'typescript'} />
+		</div>
+	);
+};
+
+export default TsSupport;

From b07638100183694b6812b996ffccb928debdd451 Mon Sep 17 00:00:00 2001
From: Mohan Raj <mohanraj.pachaiyappan@news.co.uk>
Date: Sun, 26 Mar 2023 05:23:37 +0100
Subject: [PATCH 3/4] enhance ts support modal with styles?

---
 src/components/SdkModal.tsx  | 11 +++++++----
 src/components/TsSupport.tsx | 30 +++++++-----------------------
 src/styles/settings.scss     |  7 +++++++
 3 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/components/SdkModal.tsx b/src/components/SdkModal.tsx
index 66ce828..b8f4145 100644
--- a/src/components/SdkModal.tsx
+++ b/src/components/SdkModal.tsx
@@ -43,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]);
@@ -102,7 +105,7 @@ domReady(function () {
 				<Snippet data={jsSnippet} language={'typescript'} />
 			</div>
 			<div className="mr-feature-flags-ts-snipper-container">
-				<TsSupport flag={item} />
+				<TsSupport />
 			</div>
 		</Modal>
 	);
diff --git a/src/components/TsSupport.tsx b/src/components/TsSupport.tsx
index cdfae8d..cd412be 100644
--- a/src/components/TsSupport.tsx
+++ b/src/components/TsSupport.tsx
@@ -1,14 +1,12 @@
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Flag } from '../../types';
 
 import Snippet from './Snippet';
 
-const TsSupport = ({ flag }: { flag: Flag }): JSX.Element => {
+const TsSupport = (): JSX.Element => {
 	const tsSnippet = useMemo(() => {
-		return `
-declare namespace mrFeatureFlags {
-    export interface FeatureFlagProps {
+		return `declare namespace mrFeatureFlags {
+	export interface FeatureFlagProps {
         isEnabled: (flag: string) => boolean;
     }
 }
@@ -20,29 +18,15 @@ declare global {
 export {};`;
 	}, []);
 
-	const tsIgnoreSnippet = useMemo(() => {
-		return `import domReady from '@wordpress/dom-ready';
-        domReady(function () {
-            //@ts-ignore
-            if (window.mrFeatureFlags.isEnabled('${flag.name}')) {
-                // js code goes here...
-            }
-         });`;
-	}, [flag.name]);
-
 	return (
-		<div className="mr-feature-flag-php-snippet-container">
+		<div className="mr-feature-flags-php-snippet-container">
 			<h3>{__('TypeScript support', 'mr-feature-flags')}</h3>
 			<p>
-				Create `flags.d.ts` file at the root of the plugin / theme to
-				add typescript declaration for feature flags.
+				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'} />
-			<p>
-				Alternatively, you can ignore typescript warning using below
-				approach
-			</p>
-			<Snippet data={tsIgnoreSnippet} language={'typescript'} />
 		</div>
 	);
 };
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 3b90bab..632812f 100644
--- a/src/styles/settings.scss
+++ b/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;
+}

From a3e6f6f8ba65f62425896747c5e61ca815044bc0 Mon Sep 17 00:00:00 2001
From: Mohan Raj <mohanraj.pachaiyappan@news.co.uk>
Date: Sun, 26 Mar 2023 05:25:02 +0100
Subject: [PATCH 4/4] scss formatting

---
 src/styles/settings.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 632812f..450f83c 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -22,9 +22,9 @@
 	margin-top: 20px;
 }
 
-.mr-feature-flags-slug{
+.mr-feature-flags-slug {
 	background-color: #007cba;
-    border-radius: 6px;
-    padding: 3px;
-    color: #fff;
+	border-radius: 6px;
+	padding: 3px;
+	color: #fff;
 }