chore/refactor

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '385a3bc35227dd8c6db4');
+<?php return array('dependencies' => array(), 'version' => 'fded1dd0104503e8f17a');

build/settings.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices'), 'version' => 'ea1e4914b928d6c2fdee');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices'), 'version' => '1848ecc99e698c191ee9');

includes/Api/Flags.php

@@ -83,10 +83,10 @@ public function get_all_flags() {
 	/**
 	 * Insert / Update flags in options table.
 	 *
-	 * @param WP_REST_Request $request API request.
+	 * @param WP_REST_Request $request Request object.
 	 * @return mixed List of flags.
 	 * 
-	 * @phpstan-param WP_REST_Request<array{flags?: array}> $request
+	 * @phpstan-param WP_REST_Request<array{flags?: array{id?: int, name?: string, enabled?: bool}[]}> $request
 	 */
 	public function post_flags( WP_REST_Request $request ) {
 		$input_data = $request->get_json_params();
@@ -109,8 +109,8 @@ public function post_flags( WP_REST_Request $request ) {
 	 *
 	 * @param WP_REST_Request $request Request object.
 	 * @return bool
-	 * 
-	 * @phpstan-param WP_REST_Request<array{flags?: array}> $request
+	 *
+	 * @phpstan-param WP_REST_Request<array{flags?: array{id?: int, name?: string, enabled?: bool}[]}> $request
 	 */
 	public function validate_flag_input( WP_REST_Request $request ) {
 		$input_data = $request->get_json_params();
@@ -137,8 +137,7 @@ public function validate_flag_input( WP_REST_Request $request ) {
 				match ( $key ) {
 					'id' => is_int( $value ),
 					'name' => is_string( $value ),
-					'enabled' => is_bool( $value ),
-					default => false,
+					'enabled' => is_bool( $value )
 				};
 			}
 		}

includes/Helper.php

@@ -21,20 +21,24 @@ class Helper {
 	/**
 	 * Flag search helper, returns true if flag is found and enabled.
 	 *
-	 * @param array  $flags flags array.
-	 * @param string $field field to search.
-	 * @param string $flag name of the flag.
+	 * @param array<int, array{id: int, name: string, enabled: bool}> $flags flags array.
+	 * @param string                                                  $field field to search.
+	 * @param string                                                  $flag name of the flag.
 	 * @return boolean
 	 * @since 1.0.0
 	 */
 	public function search_flag( $flags, $field, $flag ) {
-		if ( is_array( $flags ) ) {
-			foreach ( $flags as $value ) {
-				if ( $value[ $field ] === $flag && true === $value['enabled'] ) {
-					return true;
-				}
+
+		if ( 0 === count( $flags ) ) {
+			return false;
+		}
+
+		foreach ( $flags as $value ) {
+			if ( $value[ $field ] === $flag && true === $value['enabled'] ) {
+				return true;
 			}
 		}
+
 		return false;
 	}
 }

includes/Settings.php

@@ -48,8 +48,10 @@ public function register_settings() {
 
 	/**
 	 * Render page
+	 * 
+	 * @return void
 	 */
-	public function render_page() {
+	public function render_page(): void {
 		echo '<div id="mr_feature_flags_settings_screen"></div>';
 	}
 }

phpstan.neon.dist

@@ -1,6 +1,3 @@
-includes:
-	- phpstan-baseline.neon
-
 parameters:
     level: max
     paths:

plugin.php

@@ -153,7 +153,9 @@ static function ( $links ) {
 
 /**
  * Uninstall method for the plugin.
+ * 
+ * @return void
  */
-function mr_feature_flags_uninstall() {
+function mr_feature_flags_uninstall(): void {
 	delete_option( Flag::$option_name );
 }

src/components/FlagRow.tsx

@@ -112,19 +112,13 @@ const FlagRow = ({
 				<Flex justify={'flex-start'}>
 					<FlexItem>
 						<TextControl
-							style={{ width: 180 }}
+							className="mr-feature-flags-input"
 							ref={inputRef}
 							value={item.name}
 							onChange={(value) => handleFlagEdit(value, item.id)}
 						/>
 					</FlexItem>
-					<FlexItem
-						style={{
-							marginTop: 7,
-							marginLeft: 40,
-							minWidth: 150,
-						}}
-					>
+					<FlexItem className="mr-feature-flags-toggle">
 						<ToggleControl
 							checked={item.enabled}
 							disabled={!!errorMessage}
@@ -133,7 +127,7 @@ const FlagRow = ({
 						/>
 					</FlexItem>
 
-					<FlexItem style={{ marginLeft: 60 }}>
+					<FlexItem className="mr-feature-flags-sdk">
 						<Button
 							variant="secondary"
 							label={__(
@@ -147,7 +141,7 @@ const FlagRow = ({
 							{__('</> SDK', 'mr-feature-flags')}
 						</Button>
 					</FlexItem>
-					<FlexItem style={{ marginBottom: 6, marginLeft: 50 }}>
+					<FlexItem className="mr-feature-flags-delete">
 						<Button
 							icon={'trash'}
 							isDestructive

src/components/Header.tsx

@@ -10,7 +10,7 @@ export default function (): JSX.Element {
 			<FlexItem style={{ marginLeft: 160 }}>
 				<h4>{__('Status', 'mr-feature-flags')}</h4>
 			</FlexItem>
-			<FlexItem style={{ marginLeft: 170 }}>
+			<FlexItem style={{ marginLeft: 160 }}>
 				<h4>{__('SDK Settings', 'mr-feature-flags')}</h4>
 			</FlexItem>
 			<FlexItem style={{ marginLeft: 30 }}>

src/components/common/Clipboard.tsx

@@ -2,15 +2,7 @@ import { useCopyToClipboard } from '@wordpress/compose';
 import { useState, useEffect } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 
-type CSSStyle = Record<string, string | number>;
-
-const Clipboard = ({
-	text,
-	style,
-}: {
-	text: string;
-	style: CSSStyle;
-}): JSX.Element => {
+const Clipboard = ({ text }: { text: string }): JSX.Element => {
 	const [hasCopied, setHasCopied] = useState(false);
 
 	useEffect(() => {
@@ -37,10 +29,11 @@ const Clipboard = ({
 		<>
 			<Button
 				icon={hasCopied ? 'yes-alt' : 'clipboard'}
-				style={style}
+				className="mr-feature-flags-clipboard-base"
 				isPressed={false}
 				variant={'tertiary'}
 				ref={clipRef}
+				label="Copy to clipboard"
 			/>
 		</>
 	);

src/components/snippets/JsSnippet.tsx

@@ -18,15 +18,7 @@ domReady(function () {
 	return (
 		<div className="mr-feature-flag-js-snippet-container">
 			<h3>{__('JavaScript Snippet', 'mr-feature-flags')}</h3>
-			<Clipboard
-				text={jsSnippet}
-				style={{
-					color: 'darkgray',
-					float: 'right',
-					position: 'relative',
-					right: 40,
-				}}
-			/>
+			<Clipboard text={jsSnippet} />
 			<Snippet data={jsSnippet} language={'typescript'} />
 		</div>
 	);

src/components/snippets/PhpSnippet.tsx

@@ -5,23 +5,15 @@ import Clipboard from '../common/Clipboard';
 
 export default function ({ flag }: { flag: string }): JSX.Element {
 	const phpSnippet = useMemo(() => {
-		return `if ( class_exists( '\\MR\\FeatureFlags\\Flag' ) && \\MR\\FeatureFlags\\Flag::is_enabled( '${flag}' ) ) {
+		return `use MR\\FeatureFlags\\Flag;
+if ( class_exists( '\\MR\\FeatureFlags\\Flag' ) && Flag::is_enabled( '${flag}' ) ) {
 	// php code goes here...
 }`;
 	}, [flag]);
 	return (
 		<div className="mr-feature-flag-php-snippet-container">
 			<h3>{__('PHP Snippet', 'mr-feature-flags')}</h3>
-			<Clipboard
-				text={phpSnippet}
-				style={{
-					color: 'darkgray',
-					float: 'right',
-					position: 'relative',
-					right: 40,
-					top: 24,
-				}}
-			/>
+			<Clipboard text={phpSnippet} />
 			<Snippet data={phpSnippet} language={'php'} />
 		</div>
 	);