@appquality/unguess-design-system 3.1.79 → 3.1.80

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v3.1.80 (Tue May 07 2024)
+
+#### 🐛 Bug Fix
+
+- Allow search in trascript [#326](https://github.com/AppQuality/unguess-design-system/pull/326) ([@cannarocks](https://github.com/cannarocks))
+- feat: Add search functionality to highlight component [#325](https://github.com/AppQuality/unguess-design-system/pull/325) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v3.1.79 (Mon May 06 2024)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -3912,6 +3912,33 @@ const UgGrid = styled__default["default"](reactGrid.Grid) `
  */
 const Grid = (props) => jsxRuntime.jsx(UgGrid, Object.assign({}, props));
 
+const HighlightContext = React.createContext(null);
+const HighlightContextProvider = ({ term, children, }) => {
+    const [searchTerm, setsearchTerm] = React.useState(term !== null && term !== void 0 ? term : "");
+    React.useEffect(() => {
+        setsearchTerm(term !== null && term !== void 0 ? term : "");
+    }, [term]);
+    const HighlightContextValue = React.useMemo(() => ({
+        searchTerm,
+    }), [searchTerm]);
+    return (jsxRuntime.jsx(HighlightContext.Provider, Object.assign({ value: HighlightContextValue }, { children: children })));
+};
+const useHighlightContext = () => {
+    const context = React.useContext(HighlightContext);
+    if (!context)
+        throw new Error("Provider not found for HighlightContextProvider");
+    return context; // Now we can use the context in the component, SAFELY.
+};
+
+const Searchable = ({ start, text, }) => {
+    const { searchTerm } = useHighlightContext();
+    if (searchTerm) {
+        const parts = text.split(new RegExp(`(${searchTerm})`, "gi"));
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts.map((part, index) => part.toLowerCase() === searchTerm.toLowerCase() ? (jsxRuntime.jsx("mark", { children: part }, index)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: part }))) }));
+    }
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
+};
+
 const StyledWord = styled__default["default"](reactTypography.Span) `
   font-size: ${({ theme, size }) => theme.fontSizes[size !== null && size !== void 0 ? size : "md"]};
   padding: ${({ theme }) => theme.space.xxs} 0;
@@ -3991,7 +4018,7 @@ const Highlight = (props) => {
             document.removeEventListener("selectionchange", handleSelectionChange);
         };
     }, [ref, props, handleSelectionChange]);
-    return jsxRuntime.jsx(WordsContainer, Object.assign({ ref: ref }, { children: props.children }));
+    return (jsxRuntime.jsxs(HighlightContextProvider, Object.assign({ term: props.search }, { children: [jsxRuntime.jsx(WordsContainer, Object.assign({ ref: ref }, { children: props.children })), ";"] })));
 };
 const Word = (props) => {
     var _a;
@@ -4000,7 +4027,7 @@ const Word = (props) => {
         props.currentTime < props.end;
     // Is there an observation that contains this word?
     const observation = (_a = props.observations) === null || _a === void 0 ? void 0 : _a.find((obs) => props.start >= obs.start && props.end <= obs.end);
-    return (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { observation: observation, "data-start": props.start, "data-end": props.end, className: !!observation ? "highlighted" : "" }, (!!observation ? { tag: "observation" } : {}), { children: [isActive ? jsxRuntime.jsx(ActiveWord, { children: props.children }) : props.children, !observation && " "] })));
+    return (jsxRuntime.jsxs(StyledWord, Object.assign({}, props, { observation: observation, "data-start": props.start, "data-end": props.end, className: !!observation ? "highlighted" : "" }, (!!observation ? { tag: "observation" } : {}), { children: [isActive ? (jsxRuntime.jsx(ActiveWord, { children: jsxRuntime.jsx(Searchable, { start: props.start, text: props.text }) })) : (jsxRuntime.jsx(Searchable, { start: props.start, text: props.text })), !observation && " "] })));
 };
 Highlight.Word = Word;
 

package/build/stories/highlight/_types.d.ts

@@ -18,6 +18,7 @@ export interface HighlightArgs {
         to: number;
         text: string;
     }) => void;
+    search?: string;
 }
 export interface Observation {
     id: number;
@@ -31,6 +32,7 @@ export interface WordProps extends ISpanProps {
     end: number;
     currentTime?: number;
     observations?: Observation[];
+    text: string;
     /** Adjusts the font size. By default font size is medium */
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
 }

package/build/stories/highlight/highlightContext.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export type HighlightContextType = {
+    searchTerm: string;
+};
+export declare const HighlightContext: React.Context<HighlightContextType | null>;
+export declare const HighlightContextProvider: ({ term, children, }: {
+    term?: string | undefined;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useHighlightContext: () => HighlightContextType;

package/build/stories/highlight/index.d.ts

@@ -1,5 +1,5 @@
-import { HighlightArgs, WordProps } from "./_types";
 import { PropsWithChildren } from "react";
+import { HighlightArgs, WordProps } from "./_types";
 /**
  *  Use Highlight to use highlight interation on any text element
  */

package/build/stories/highlight/index.stories.d.ts

@@ -7,9 +7,11 @@ interface StoryArgs extends HighlightArgs {
         speaker: number;
     }[];
     currentTime: number;
+    includeSearch?: boolean;
 }
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
 export declare const VideoSync: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
+export declare const WithSearch: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, StoryArgs>;
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, HighlightArgs & {
     children?: import("react").ReactNode;
 }>;

package/build/stories/highlight/searchable.d.ts

@@ -0,0 +1,4 @@
+export declare const Searchable: ({ start, text, }: {
+    start: number;
+    text: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.79",
+  "version": "3.1.80",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",