Add HighlightedText component

src/components/highlighted-text/HighlightedText.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HighlightedText } from "./HighlightedText";
+
+const meta: Meta<typeof HighlightedText> = {
+  title: "Components/HighlightedText",
+  component: HighlightedText,
+};
+
+export default meta;
+type Story = StoryObj<typeof HighlightedText>;
+
+export const Default: Story = {
+  args: {
+    text: "Lorem test string Test string",
+    highlight: "TesT",
+  },
+};

src/components/highlighted-text/HighlightedText.tsx

@@ -0,0 +1,35 @@
+import React, { ComponentProps } from "react";
+import { splitTextWithHighlight } from "../../utils";
+
+import styles from "./styles/index.module.scss";
+
+interface IHighlightedTextProps {
+  text: string;
+  highlight?: string;
+  className?: ComponentProps<"div">["className"];
+}
+
+export const HighlightedText: React.FC<IHighlightedTextProps> = (props) => {
+  const { highlight, text, className } = props;
+
+  if (!highlight) {
+    return text;
+  }
+
+  const parts = splitTextWithHighlight(text, highlight);
+
+  return (
+    <span className={className}>
+      {parts.map((part, index) => {
+        if (part.toLowerCase() === highlight.toLowerCase()) {
+          return (
+            <span className={styles.highlight_text} key={`h-text-${index}`}>
+              {part}
+            </span>
+          );
+        }
+        return <span key={`nh-text-${index}`}>{part}</span>;
+      })}
+    </span>
+  );
+};

src/components/highlighted-text/index.ts

@@ -0,0 +1 @@
+export * from "./HighlightedText";

src/components/highlighted-text/styles/index.module.scss

@@ -0,0 +1,4 @@
+.highlight_text {
+  background-color: var(--pv-color-attention-tint-4);
+  color: var(--pv-color-attention-shade-3);
+}

src/utils/index.ts

@@ -31,3 +31,13 @@ export function formatBytes(bytes: number, decimals = 2) {
 
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
+
+export function escapeRegexCharacters(str: string) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+export function splitTextWithHighlight(text: string, highlight: string) {
+  const escapedHighlight = escapeRegexCharacters(highlight);
+  const highlightRegex = new RegExp(`(${escapedHighlight})`, "gi");
+  return text.split(highlightRegex);
+}