chore: design changes

Codeinwp · Jul 7, 2023 · bfa1eb0 · bfa1eb0
1 parent f722f39
commit bfa1eb0
Show file tree

Hide file tree

Showing 7 changed files with 300 additions and 85 deletions.
diff --git a/src/blocks/blocks/content-generator/edit.js b/src/blocks/blocks/content-generator/edit.js
@@ -36,8 +36,8 @@ const { attributes: defaultAttributes } = metadata;
 
 const PRESETS = {
 	form: {
-		title: 'Form Generator',
-		description: 'Write what type of form do you want to have.'
+		title: __( 'Suggested form structure', 'otter-blocks' ),
+		mainAction: __( 'Preview Form', 'otter-blocks' )
 	}
 };
 
@@ -152,8 +152,8 @@ const ContentGenerator = ({
 			<div { ...blockProps }>
 				<PromptPlaceholder
 					promptName={attributes.generationType}
-					title={PRESETS?.[attributes.generationType]?.title}
-					description={PRESETS?.[attributes.generationType]?.description}
+					resultAreaTitle={PRESETS?.[attributes.generationType]?.title}
+					resutActionLabel={PRESETS?.[attributes.generationType]?.mainAction}
 					value={prompt}
 					onValueChange={setPrompt}
 					onSuccess={onSuccess}

diff --git a/src/blocks/blocks/content-generator/editor.scss b/src/blocks/blocks/content-generator/editor.scss
@@ -1,7 +1,6 @@
 .wp-block-themeisle-blocks-content-generator {
 	padding: 10px;
 	border-radius: 10px;
-	background-color: #1ee5de;
 
 	.block-editor-inner-blocks {
 		padding: 10px;

diff --git a/src/blocks/blocks/content-generator/index.js b/src/blocks/blocks/content-generator/index.js
@@ -9,7 +9,7 @@ import { registerBlockType } from '@wordpress/blocks';
  * Internal dependencies
  */
 import metadata from './block.json';
-import { progressIcon as icon } from '../../helpers/icons.js';
+import { aiGeneration as icon } from '../../helpers/icons.js';
 import edit from './edit.js';
 import './editor.scss';
 

diff --git a/src/blocks/components/prompt/editor.scss b/src/blocks/components/prompt/editor.scss
@@ -36,3 +36,81 @@
 		font-size: 1.2em;
 	}
 }
+
+.prompt-input__container {
+	display: flex;
+	flex-direction: row;
+	gap: 10px;
+	align-items: center;
+	justify-content: center;
+	margin-top: 10px;
+
+	.prompt-input__input__container {
+		display: flex;
+		flex-direction: row;
+		gap: 10px;
+		flex-grow: 1;
+		align-items: center;
+
+		border: 1px solid #949494;
+		padding: 14px;
+	}
+
+	.prompt-input__input {
+		margin: 0;
+		font-size: 18px;
+		border: unset;
+		flex-grow: 1;
+		outline: unset;
+	}
+
+	.prompt-input__submit__container button {
+		font-size: 18px;
+		padding: 26px;
+	}
+}
+
+.prompt-result__container {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	margin-top: 10px;
+
+	background-color: white;
+	border-radius: 2px;
+	border: 1px solid #1E1E1E;
+	width: 100%;
+	max-width: 800px;
+	padding: 10px;
+
+	.prompt-result__header {
+		display: flex;
+		flex-direction: row;
+		gap: 10px;
+		align-items: center;
+
+		.prompt-result__header__title {
+			font-size: 1.2em;
+			font-weight: bold;
+			flex-grow: 1;
+		}
+	}
+
+	.prompt-result__actions {
+		display: flex;
+		flex-direction: row;
+		gap: 10px;
+		align-items: center;
+		border-top: 1px solid #DDD;
+		padding-top: 10px;
+
+		.prompt-result__actions__navigation {
+			display: flex;
+			flex-direction: row;
+			gap: 10px;
+			align-items: center;
+			flex-grow: 1;
+			justify-content: flex-end;
+		}
+	}
+}
diff --git a/src/blocks/components/prompt/index.tsx b/src/blocks/components/prompt/index.tsx
@@ -10,6 +10,9 @@ import {
 	retrieveEmbeddedPrompt,
 	sendPromptToOpenAI
 } from '../../helpers/prompt';
+import PromptInput from './prompt-input';
+import { closeSmall, redo, undo } from '@wordpress/icons';
+import { ReactNode } from 'react';
 
 type PromptOnSuccessActions = {
 	clearHistory: () => void
@@ -24,6 +27,8 @@ type PromptPlaceholderProps = {
 	value: string
 	onValueChange: ( text: string ) => void
 	onSuccess?: PromptOnSuccess
+	resultAreaTitle?: string
+	resutActionLabel?: string
 };
 
 export const apiKeyName = 'themeisle_open_ai_api_key';
@@ -47,6 +52,78 @@ const BlockGenerationArea = ( props: { result?: string }) => {
 	);
 };
 
+const PromptResultArea = (
+	props: {
+		children?: ReactNode
+		mainActionName?: string
+		mainAction?: () => void
+		onRegenerate?: () => void
+		onPrevResult?: () => void
+		onNextResult?: () => void
+		currentResultIndex?: number
+		totalResults: number
+		title?: string
+		onClose?: () => void
+	}
+) => {
+	return (
+		<div className="prompt-result__container">
+			<div className="prompt-result__header">
+				<div className="prompt-result__header__title">
+					{ props?.title ?? __( 'Result', 'otter-blocks' ) }
+				</div>
+				<div className="prompt-result__header__actions">
+					<Button
+						variant="tertiary"
+						onClick={ props.onClose }
+						icon={closeSmall}
+					/>
+				</div>
+			</div>
+			<div className="prompt-result__content">
+				{ props.children }
+			</div>
+			<div className="prompt-result__actions">
+				<Button
+					variant="primary"
+					onClick={ props.mainAction }
+				>
+					{ props.mainActionName ?? __( 'Preview Generated Content', 'otter-blocks' ) }
+				</Button>
+				<Button
+					variant={'secondary'}
+					onClick={ props.onRegenerate }
+				>
+					{ __( 'Regenerate', 'otter-blocks' ) }
+				</Button>
+				<div className="prompt-result__actions__navigation">
+					{
+						0 < props.totalResults && (
+							<Fragment>
+								<Button
+									variant={'tertiary'}
+									icon={undo}
+									onClick={ props.onPrevResult }
+								/>
+
+								<div className="prompt-result__actions__navigation__current">
+									{ props.currentResultIndex } / { props.totalResults }
+								</div>
+
+								<Button
+									variant={'tertiary'}
+									icon={redo}
+									onClick={ props.onNextResult }
+								/>
+							</Fragment>
+						)
+					}
+				</div>
+			</div>
+		</div>
+	);
+};
+
 const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 	const { title, description, value, onValueChange, onSuccess, promptName } = props;
 
@@ -62,6 +139,8 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 	const [ resultHistory, setResultHistory ] = useState<string[]>([]);
 	const [ resultHistoryIndex, setResultHistoryIndex ] = useState<number>( 0 );
 
+	const [ showResultArea, setShowResultArea ] = useState<boolean>( true );
+
 	const onSuccessActions = {
 		clearHistory: () => {
 			setResult( undefined );
@@ -151,6 +230,7 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 
 			setResult( result );
 			setResultHistory([ ...resultHistory, result ]);
+			setShowResultArea( true );
 		});
 	}
 
@@ -222,88 +302,37 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 	}
 
 	return (
-		<Placeholder
-			className="prompt-placeholder"
-			label={title ?? __( 'Content Generator', 'otter-blocks' )}
-			instructions={description ?? __( 'Write what type of form do you want to have.', 'otter-blocks' )}
-		>
-			<TextControl value={value} onChange={onValueChange} />
-
-			<div className="prompt-placeholder__submit">
-				<Button
-					variant="primary"
-					onClick={onSubmit}
-					isBusy={'loading' === generationStatus}
-				>
-
-					{ 'loading' !== generationStatus &&  __( 'Generate', 'otter-blocks' ) }
-					{ 'loading' === generationStatus && (
-						<Fragment>
-							<span>{ __( 'Generating...', 'otter-blocks' ) }</span>
-						</Fragment>
-					) }
-				</Button>
-				{
-					0 < resultHistory.length && (
-						<Fragment>
-							{
-								1 < resultHistory.length && (
-									<span className="history-display">
-										{ `${resultHistoryIndex + 1}/${resultHistory.length}` }
-									</span>
-								)
-							}
-
-							{
-								0 < resultHistoryIndex && (
-									<Button
-										variant="secondary"
-										onClick={() => {
-											setResultHistoryIndex( resultHistoryIndex - 1 );
-										}}
-									>
-										{ __( 'Previous', 'otter-blocks' ) }
-									</Button>
-								)
-
-							}
-
-							{
-								resultHistoryIndex < resultHistory.length - 1 && (
-									<Button
-										variant="secondary"
-										onClick={() => {
-											setResultHistoryIndex( resultHistoryIndex + 1 );
-										}}
-									>
-										{ __( 'Next', 'otter-blocks' ) }
-									</Button>
-								)
-							}
-
-						</Fragment>
-					)
-				}
-			</div>
-
-			<BlockGenerationArea result={ result } />
-
+		<div>
 			{
-				result && (
-					<div>
-						<Button
-							variant="primary"
-							onClick={() => {
+				showResultArea && (
+					<PromptResultArea
+						title={ props.resultAreaTitle }
+						mainAction={
+							() => {
 								onSuccess?.( result, onSuccessActions );
-							}}
-						>
-							{ __( 'Preview', 'otter-blocks' ) }
-						</Button>
-
-					</div>
+							}
+						}
+						currentResultIndex={ resultHistoryIndex }
+						totalResults={ resultHistory.length }
+						onPrevResult={() => {
+							setResultHistoryIndex( resultHistoryIndex - 1 );
+						}}
+						onNextResult={() => {
+							setResultHistoryIndex( resultHistoryIndex + 1 );
+						}}
+						onClose={() => {
+							setShowResultArea( false );
+						}}
+						mainActionName={props.resultAreaTitle}
+					>
+						<BlockGenerationArea result={ result } />
+					</PromptResultArea>
 				)
 			}
-		</Placeholder>
+
+			<PromptInput value={value} onValueChange={onValueChange} onGenerate={onSubmit} status={generationStatus} />
+		</div>
+
 	);
 };
 

diff --git a/src/blocks/components/prompt/prompt-input.tsx b/src/blocks/components/prompt/prompt-input.tsx
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { aiGeneration } from '../../helpers/icons';
+
+type PromptInputProps = {
+	value: string;
+	onValueChange: ( value: string ) => void;
+	status: string;
+	onGenerate: () => void;
+}
+const PromptInput = ( props: PromptInputProps ) => {
+	return (
+		<div className="prompt-input__container">
+			<div className="prompt-input__input__container">
+				<Icon icon={aiGeneration} width={24} />
+				<input className="prompt-input__input" value={ props.value } onChange={ ( e ) => props.onValueChange( e.target.value ) } />
+			</div>
+			<div className="prompt-input__submit__container">
+				<Button
+					variant="secondary"
+					onClick={props.onGenerate}
+					isBusy={'loading' === props.status}
+					disabled={ 'loading' === props.status}
+				>
+					{__( 'Generate', 'otter-blocks' )}
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default PromptInput;