bugfix: removed the string "hidden" from all react code to stop tailwind

from injecting styles
devflowinc · Dec 18, 2024 · d84a9bc · d84a9bc
1 parent 914a635
commit d84a9bc
Show file tree

Hide file tree

Showing 6 changed files with 1,047 additions and 1,053 deletions.
diff --git a/clients/search-component/package.json b/clients/search-component/package.json
@@ -57,7 +57,7 @@
     "react-dom": "^18.3.1",
     "tailwind": "^4.0.0",
     "tailwindcss": "^3.4.11",
-    "tailwindcss-scoped-preflight": "^3.4.4",
+    "tailwindcss-scoped-preflight": "^3.4.10",
     "typescript": "^5.6.2",
     "typescript-eslint": "^8.3.0"
   },

diff --git a/clients/search-component/src/TrieveModal/Chat/Carousel.tsx b/clients/search-component/src/TrieveModal/Chat/Carousel.tsx
@@ -7,35 +7,6 @@ import React, {
 } from "react";
 
 const styles = {
-  root: {
-    width: "100%",
-    overflow: "hidden",
-  },
-  scroll: {
-    display: "flex",
-    overflowX: "hidden",
-    scrollSnapType: "x mandatory",
-    scrollBehavior: "smooth",
-    width: "100%",
-    listStyle: "none",
-    padding: 0,
-    margin: 0,
-  },
-  item: {
-    flex: "0 0 auto",
-    padding: "1rem",
-    scrollSnapAlign: "start",
-    boxSizing: "border-box",
-  },
-  itemSnapPoint: {
-    scrollSnapAlign: "start",
-  },
-  controls: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    marginTop: "5px",
-  },
   nextPrevButton: {
     fontSize: "16px",
     cursor: "pointer",
@@ -109,15 +80,13 @@ export const Carousel = ({ children }: { children: React.ReactNode }) => {
   const goToPage = (pageIndex: number) => setCurrentPage(pageIndex);
 
   return (
-    <div style={styles.root}>
-      <ul style={styles.scroll} ref={scrollRef}>
+    <div className="carousel-root">
+      <ul className="carousel-scroll" ref={scrollRef}>
         {allProductsCarousel.map((child, index) => (
           <li
-            className="carousel-item"
+            className={child ? "carousel-item carousel-item-visibile" : "carousel-item carousel-item-hidden"}
             style={{
-              ...styles.item,
               width: `calc(100% / ${itemsPerPage})`,
-              visibility: child ? "visible" : "hidden",
             }}
             key={index}
           >
@@ -126,7 +95,7 @@ export const Carousel = ({ children }: { children: React.ReactNode }) => {
         ))}
       </ul>
       {numPages > 1 && (
-        <div style={styles.controls}>
+        <div className="carousel-controls">
           <button
             style={{
               ...styles.nextPrevButton,

diff --git a/clients/search-component/src/TrieveModal/Search/SearchMode.tsx b/clients/search-component/src/TrieveModal/Search/SearchMode.tsx
@@ -102,7 +102,7 @@ export const SearchMode = () => {
   }, [results]);
 
   return (
-    <Suspense fallback={<div className="hidden"> </div>}>
+    <Suspense fallback={<div className="suspense-fallback"> </div>}>
       <div
         className={`close-modal-button search ${props.type}`}
         onClick={() => setOpen(false)}

diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css
@@ -33,6 +33,10 @@ body {
       @apply pl-2 flex gap-2 w-full overflow-x-auto;
     }
 
+    .suspense-fallback {
+      @apply hidden;
+    }
+
     ::-webkit-scrollbar {
       width: 6px;
       height: 6px;
@@ -309,6 +313,44 @@ body {
       .additional-image-links {
         @apply gap-2 mt-4 mb-4 flex flex-row;
 
+        .carousel-root {
+          width: 100%;
+          overflow: hidden;
+        }
+
+        .carousel-scroll {
+          display: flex;
+          overflow-x: hidden;
+          scroll-snap-type: x-mandatory;
+          scroll-behavior: smooth;
+          width: 100%;
+          list-style: none;
+          padding: 0;
+          margin: 0;
+        }
+
+        .carousel-item {
+          flex: 0 0 auto;
+          padding: 1rem;
+          scroll-snap-align: start;
+          box-sizing: border-box;
+        }
+
+        .carousel-item-hidden {
+          visibility: hidden;
+        }
+
+        .carousel-item-visibile {
+          visibility: visible;
+        }
+
+        .carousel-controls {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-top: 5px;
+        }
+
         a {
           @apply hover:bg-zinc-200 text-zinc-700 hover:text-zinc-950 rounded px-2 text-xs py-1 line-clamp-2 overflow-ellipsis grid-rows-2 w-fit;
         }

diff --git a/clients/search-component/tailwind.config.js b/clients/search-component/tailwind.config.js
@@ -17,6 +17,7 @@ export default {
           "#trieve-search-component",
           "#trieve-search-modal",
           "#trieve-search-modal-overlay",
+          "#open-trieve-modal"
         ],
         {
           rootStyles: true,