Add example cards for HTML and Markdown Rendering

package.json

@@ -141,6 +141,7 @@
     "@reach/auto-id": "^0.18.0",
     "@restart/ui": "^1.0.1",
     "@tailwindcss/forms": "^0.5.0",
+    "@uiw/react-md-editor": "^3.23.3",
     "@yext/analytics": "^0.5.0",
     "classnames": "^2.3.1",
     "lodash": "^4.17.21",

test-site/package.json

@@ -12,13 +12,13 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "eslint-config-react-app": "file:../node_modules/eslint-config-react-app",
     "@types/mapbox-gl": "^2.7.6",
     "@types/node": "^16.11.26",
     "@types/react": "^17.0.42",
     "@types/react-dom": "^17.0.14",
     "@types/uuid": "^8.3.4",
     "autoprefixer": "^10.4.4",
+    "eslint-config-react-app": "file:../node_modules/eslint-config-react-app",
     "postcss": "^8.4.12",
     "react-scripts": "5.0.0",
     "tailwindcss": "^3.0.23",

test-site/src/components/HTMLExampleCard.tsx

@@ -0,0 +1,43 @@
+import { CardProps, useCardAnalyticsCallback, useCardFeedbackCallback } from '@yext/search-ui-react';
+import { useCallback } from 'react';
+import '../styles/resetStyles.css'
+
+const builtInCssClasses = {
+    container: 'flex flex-col justify-between border border-gray-200 rounded-lg mb-4 p-4 shadow-sm',
+    header: 'flex text-neutral-dark',
+    title: 'text-lg font-medium',
+    thumbsFeedbackContainer: 'flex justify-end mt-4 text-sm text-gray-500 font-medium',
+};
+
+// change to the field name that contains html string
+const htmlFieldName = "c_richTextV2Data";
+interface CustomRawDataType {
+    name: string,
+    description: string
+    [htmlFieldName]: any
+}
+
+function renderRichTextDescription(richTextHTML: string | undefined) {
+    if ( richTextHTML )
+    {
+        return <div className={"reset-style"} dangerouslySetInnerHTML={{ __html: richTextHTML }} />;
+    }
+    return null;
+}
+
+export function HTMLExampleCard(props: CardProps<CustomRawDataType>): JSX.Element {
+    const { result } = props;
+    const onClickTitle = useCardAnalyticsCallback(result, 'TITLE_CLICK');
+    const cardFeedbackCallback = useCardFeedbackCallback(result);
+    const onClick = useCallback(() => {
+        cardFeedbackCallback('THUMBS_UP');
+    }, [cardFeedbackCallback]);
+    return (
+        <div className={builtInCssClasses.container}>
+            <p className={builtInCssClasses.header}>HTML Card</p>
+            <button onClick={onClickTitle} className={builtInCssClasses.title}>{result.rawData.name}</button>
+            {renderRichTextDescription(result.rawData?.[htmlFieldName]?.html)}
+            <button onClick={onClick} className={builtInCssClasses.thumbsFeedbackContainer}>Feedback</button>
+        </div>
+    );
+}

test-site/src/components/MarkdownRenderCard.tsx

@@ -0,0 +1,42 @@
+import { CardProps, useCardAnalyticsCallback, useCardFeedbackCallback } from '@yext/search-ui-react';
+import { useCallback } from 'react';
+import '../styles/resetStyles.css'
+import MDEditor from "@uiw/react-md-editor";
+
+
+
+const builtInCssClasses = {
+    container: 'flex flex-col justify-between border border-gray-200 rounded-lg mb-4 p-4 shadow-sm',
+    header: 'flex text-neutral-dark',
+    title: 'text-lg font-medium',
+    thumbsFeedbackContainer: 'flex justify-end mt-4 text-sm text-gray-500 font-medium',
+};
+
+
+const markdownFieldName  = "c_markdownData";
+
+interface CustomRawDataType {
+    name: string,
+    description: string,
+    [markdownFieldName]: any
+}
+
+export function MarkdownExampleCard(props: CardProps<CustomRawDataType>): JSX.Element {
+    const { result } = props;
+    const onClickTitle = useCardAnalyticsCallback(result, 'TITLE_CLICK');
+    const cardFeedbackCallback = useCardFeedbackCallback(result);
+    const onClick = useCallback(() => {
+        cardFeedbackCallback('THUMBS_UP');
+    }, [cardFeedbackCallback]);
+
+    return (
+        <div className={`${builtInCssClasses.container} `}>
+            <p className={builtInCssClasses.header}>Markdown Render Card</p>
+            <button onClick={onClickTitle} className={builtInCssClasses.title}>{result.rawData.name}</button>
+            <div className="container reset-style" data-color-mode="light">
+                <MDEditor.Markdown source={result.rawData?.[markdownFieldName]?.markdown} />
+            </div>
+            <button onClick={onClick} className={builtInCssClasses.thumbsFeedbackContainer}>Feedback</button>
+        </div>
+    );
+}

test-site/src/styles/resetStyles.css

@@ -0,0 +1,4 @@
+/* Revert CSS style of target element and its children */
+.reset-style, .reset-style * {
+    all: revert;
+}