fix: CodePreview - show explicit false props (themesberg#985)

fix: code preview - show explicit false props; removing `sortProps` since it defaults to `true`

Co-authored-by: Sebastian Sutu <[email protected]>

Author: SutuSebastian

app/components/code-preview.tsx

@@ -14,7 +14,7 @@ import { Tooltip } from '~/src';
 const reactElementToJSXStringOptions: Options = {
   filterProps: ['key', 'ref'],
   showFunctions: true,
-  sortProps: true,
+  useBooleanShorthandSyntax: false,
 };
 
 interface CodePreviewProps extends PropsWithChildren, ComponentProps<'div'> {
@@ -62,6 +62,7 @@ export const CodePreview: FC<CodePreviewProps> = ({
   code = deleteJSXSpaces(code);
   code = deleteSVGs(code);
   code = replaceWebpackImportsOnFunctions(code);
+  code = explicitTruthyPropsToShorthandSyntax(code);
   code = `'use client';
 
 import { ${importFlowbiteReact ?? firstComponentDisplayName(code)} } from 'flowbite-react';
@@ -231,3 +232,7 @@ const slugToUpperCamelCase = (str: string) => {
     .replaceAll(/\b[a-z]/g, (letter) => letter.toUpperCase())
     .replaceAll(/\s/g, '');
 };
+
+const explicitTruthyPropsToShorthandSyntax = (str: string) => {
+  return str.replaceAll(/={true}/g, '');
+};