format

website/src/components/molecules/codeBox.tsx

@@ -3,6 +3,8 @@ import { isString, isDefined, tryCatch } from '@elbwalker/utils';
 import { Highlight, themes as prismThemes } from 'prism-react-renderer';
 import Editor from 'react-simple-code-editor';
 import { useState } from 'react';
+import prettier from 'prettier/standalone';
+import parserBabel from 'prettier/parser-babel';
 
 interface FormatValueProps {
   intent?: number;
@@ -66,6 +68,7 @@ const CodeBox: React.FC<CodeBoxProps> = ({
 }) => {
   const [copied, setCopied] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
+  const [isFormatHovered, setIsFormatHovered] = useState(false);
 
   const handleCopy = async () => {
     tryCatch(async () => {
@@ -75,6 +78,34 @@ const CodeBox: React.FC<CodeBoxProps> = ({
     })();
   };
 
+  const handleFormat = tryCatch(() => {
+    // Check if the content is a complete statement
+    const isCompleteStatement = /^[a-zA-Z_$][a-zA-Z0-9_$]*\s*=/.test(
+      value.trim(),
+    );
+
+    // If it's not a complete statement, wrap it in a return statement
+    const contentToFormat = isCompleteStatement ? value : `return ${value}`;
+
+    const formattedValue = prettier.format(contentToFormat, {
+      parser: 'babel',
+      plugins: [parserBabel],
+      semi: true,
+      singleQuote: true,
+      trailingComma: 'es5',
+      printWidth: 80,
+      tabWidth: 2,
+      useTabs: false,
+    });
+
+    // Remove the 'return ' prefix if we added it
+    const finalValue = isCompleteStatement
+      ? formattedValue
+      : formattedValue.replace(/^return\s+/, '');
+
+    onChange?.(finalValue);
+  });
+
   const highlightCode = (code: string) => (
     <Highlight theme={prismThemes.palenight} code={code} language={language}>
       {({ tokens, getLineProps, getTokenProps }) => (
@@ -102,32 +133,64 @@ const CodeBox: React.FC<CodeBoxProps> = ({
         <div className="font-bold px-2 py-1 bg-base-100 text-base flex justify-between items-center">
           <span>{label}</span>
           <div className="relative">
-            <button
-              onClick={handleCopy}
-              onMouseEnter={() => setIsHovered(true)}
-              onMouseLeave={() => setIsHovered(false)}
-              className="text-gray-500 hover:text-gray-300 transition-colors border-none bg-transparent p-1"
-              aria-label="Copy code"
-            >
-              <svg
-                className="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
-                />
-              </svg>
-            </button>
-            {(isHovered || copied) && (
-              <div className="absolute right-full mr-1 top-1/2 -translate-y-1/2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs py-1 px-1 rounded shadow-sm border border-gray-200 dark:border-gray-600 whitespace-nowrap">
-                {copied ? 'Copied!' : 'Copy'}
+            <div className="relative flex items-center gap-1">
+              <div className="relative">
+                <button
+                  onClick={handleFormat}
+                  onMouseEnter={() => setIsFormatHovered(true)}
+                  onMouseLeave={() => setIsFormatHovered(false)}
+                  className="text-gray-500 hover:text-gray-300 transition-colors border-none bg-transparent p-1"
+                  aria-label="Format code"
+                >
+                  <svg
+                    className="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M4 6h16M4 12h16m-7 6h7"
+                    />
+                  </svg>
+                </button>
+                {isFormatHovered && (
+                  <div className="absolute right-full mr-1 top-1/2 -translate-y-1/2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs py-1 px-1 rounded shadow-sm border border-gray-200 dark:border-gray-600 whitespace-nowrap">
+                    Format
+                  </div>
+                )}
               </div>
-            )}
+              <div className="relative">
+                <button
+                  onClick={handleCopy}
+                  onMouseEnter={() => setIsHovered(true)}
+                  onMouseLeave={() => setIsHovered(false)}
+                  className="text-gray-500 hover:text-gray-300 transition-colors border-none bg-transparent p-1"
+                  aria-label="Copy code"
+                >
+                  <svg
+                    className="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                    />
+                  </svg>
+                </button>
+                {(isHovered || copied) && (
+                  <div className="absolute right-full mr-1 top-1/2 -translate-y-1/2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs py-1 px-1 rounded shadow-sm border border-gray-200 dark:border-gray-600 whitespace-nowrap">
+                    {copied ? 'Copied!' : 'Copy'}
+                  </div>
+                )}
+              </div>
+            </div>
           </div>
         </div>
       )}