Update file-upload-manager.md, listViewComponentSource.ts, navigation…

….tsx, Introduction.tsx, useResponsiveWidth.ts, ResponsiveModal.tsx, tmdbService.ts, package.json, Layout.tsx, FileUploadManager.tsx, tab.tsx, table.tsx, BrowserHeader.tsx
UretzkyZvi · Jan 8, 2024 · e1669f0 · e1669f0
1 parent 6f91e57
commit e1669f0
Show file tree

Hide file tree

Showing 32 changed files with 2,276 additions and 411 deletions.
diff --git a/__azurite_db_table__.json b/__azurite_db_table__.json
@@ -0,0 +1 @@
+{"filename":"c:\\projects\\nexwind-components\\__azurite_db_table__.json","collections":[{"name":"$TABLES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"account":{"name":"account","dirty":false,"values":[]},"table":{"name":"table","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$TABLES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]},{"name":"$SERVICES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{},"constraints":null,"uniqueNames":["accountName"],"transforms":{},"objType":"$SERVICES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]}],"databaseVersion":1.5,"engineVersion":1.5,"autosave":true,"autosaveInterval":5000,"autosaveHandle":null,"throttledSaves":true,"options":{"persistenceMethod":"fs","autosave":true,"autosaveInterval":5000,"serializationMethod":"normal","destructureDelimiter":"$<\n"},"persistenceMethod":"fs","persistenceAdapter":null,"verbose":false,"events":{"init":[null],"loaded":[],"flushChanges":[],"close":[],"changes":[],"warning":[]},"ENV":"NODEJS"}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,11 +7,14 @@
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.17",
     "@types/react-router-dom": "^5.3.3",
+    "@uiw/react-code-preview": "^5.1.2",
+    "@uiw/react-markdown-preview": "^5.0.6",
     "clsx": "^2.0.0",
     "d3": "^7.8.5",
     "date-fns": "^3.0.6",
     "framer-motion": "^10.16.16",
     "github-markdown-css": "^5.5.0",
+    "hls.js": "^1.4.14",
     "lodash": "^4.17.21",
     "lucide-react": "^0.298.0",
     "prismjs": "^1.29.0",
@@ -22,6 +25,7 @@
     "react-router-dom": "^6.21.0",
     "react-scripts": "5.0.1",
     "react-transition-group": "^4.4.5",
+    "react-youtube": "^10.1.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",

diff --git a/public/dist/output.css b/public/dist/output.css
diff --git a/public/docs/ui/file-upload-manager.md b/public/docs/ui/file-upload-manager.md
@@ -1,5 +1,4 @@
 
-# File Upload Manager Component Guide
 
 ## Introduction
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { BrowserRouter   as Router, Route, Routes } from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import HomePage from "./pages/HomePage";
 import ListViewPage from "./pages/ListViewPage";
 import FormPage from "./pages/FormPage";
@@ -8,26 +8,27 @@ import IntroductionPage from "./pages/Introduction";
 import FileUploadPage from "./pages/FileUploadPage";
 import ContributePage from "./pages/ContributePage";
 import MoviePage from "./pages/MoviePage";
-
+import CardsPage from "./pages/CardsPage";
+import Showcase from "./pages/Showcase";
+import VideoPlayerPage from "./pages/VideoPlayerPage";
 
-interface Item {
-  id: number;
-  name: string;
-}
 function App() {
-
   return (
-    <Router  basename="/nexwind-components">
+    <Router basename="/nexwind-components">
       <Routes>
         <Route index path="/" element={<HomePage />} />
-        <Route path="/introduction" element={<IntroductionPage/>} />
-        <Route path="/list-view" element={<ListViewPage/>} />
-        <Route path="/forms" element={<FormPage/>} />
-        <Route path="/date-picker" element={<DatePickerPage/>} />
-        <Route path="/table" element={<TablePage/>} />
-        <Route path="/file-uploader" element={<FileUploadPage/>} />
-        <Route path="/contribute"  element={<ContributePage/>}/>
-        <Route path='/showcase/movie-browse' element={<MoviePage/>} />
+        <Route path="/introduction" element={<IntroductionPage />} />
+        <Route path="/list-view" element={<ListViewPage />} />
+        <Route path="/forms" element={<FormPage />} />
+        <Route path="/date-picker" element={<DatePickerPage />} />
+        <Route path="/table" element={<TablePage />} />
+        <Route path="/file-uploader" element={<FileUploadPage />} />
+        <Route path="/contribute" element={<ContributePage />} />
+        <Route path="/video-player" element={<VideoPlayerPage/>} />
+        <Route path="/showcase/movie-browse" element={<MoviePage />} />
+        <Route path="/cards" element={<CardsPage />} />
+        <Route path="/showcase" element={<Showcase/>} />
+
         <Route path="*" element={<h1>Not Found</h1>} />
         {/* Add more routes as needed */}
       </Routes>

diff --git a/src/components/browser/BrowserHeader.tsx b/src/components/browser/BrowserHeader.tsx
@@ -4,17 +4,12 @@ import DeviceSizeControls from "./DeviceSizeControls";
 
 
 interface BrowserHeaderProps {
-  setMobileSize: () => void;
-  setTabletSize: () => void;
-  setDesktopSize: () => void;
+
   saved: boolean;
   copyToClipboard: () => void;
 }
 
 const BrowserHeader: React.FC<BrowserHeaderProps> = ({
-  setMobileSize,
-  setTabletSize,
-  setDesktopSize,
   saved,
   copyToClipboard,
 }) => {
@@ -28,11 +23,7 @@ const BrowserHeader: React.FC<BrowserHeaderProps> = ({
           <div className="flex items-center justify-center w-4 h-4 bg-green-500 rounded-full"></div>
         </div>
         <div className="flex flex-row items-center space-x-2">
-          <DeviceSizeControls
-            setMobileSize={setMobileSize}
-            setTabletSize={setTabletSize}
-            setDesktopSize={setDesktopSize}
-          />
+
           <CopyToClipboardButton
             saved={saved}
             copyToClipboard={copyToClipboard}

diff --git a/src/components/browser/ResponsiveModal.tsx b/src/components/browser/ResponsiveModal.tsx
@@ -13,7 +13,7 @@ const ResponsiveModal: React.FC<ResponsiveModalProps> = ({
 }) => {
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="h-[60dvh] md:h-[50dvh] lg:h-[40dvh] rounded-lg border-2 border-black">
+      <div className="rounded-lg border-2 border-black">
         {children}
       </div>
     </Modal>

diff --git a/src/components/browser/browser.tsx b/src/components/browser/browser.tsx
@@ -17,117 +17,43 @@ import ResponsiveModal from "./ResponsiveModal";
 import useClipboard from "../../hooks/useClipboard";
 import useResponsiveWidth from "../../hooks/useResponsiveWidth";
 
-const heights = {
-  small: "h-auto",
-  medium: "h-[40dvh]",
-  big: "h-[66dvh]",
-};
-
 interface BrowserProps {
   children?: React.ReactNode;
   componentSource: string;
-  height?: keyof typeof heights;
 }
 
-const Browser: FC<BrowserProps> = ({
-  children,
-  componentSource,
-  height = "big",
-}) => {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const handleResizeRef = useRef<HTMLDivElement>(null);
-  const { width, setMobileSize, setTabletSize } = useResponsiveWidth();
-  const [isModalOpen, setIsModalOpen] = useState(false);
+const Browser: FC<BrowserProps> = ({ children, componentSource }) => {
   const [tabIndex, setTabIndex] = useState(0);
-  const setDesktopSize = () => {
-    setIsModalOpen(true);
-  };
-
-  const closeModal = () => {
-    setIsModalOpen(false);
-  };
-
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (iframe && iframe.contentDocument) {
-      const document = iframe.contentDocument;
-      const body = document.body;
-      body.innerHTML = "";
-
-      // Fetch and inject Tailwind CSS into iframe
-      fetch("/nexwind-components/dist/output.css") // Update this path
-        .then((response) => response.text())
-        .then((css) => {
-          const styleSheet = document.createElement("style");
-          styleSheet.textContent = css;
-          document.head.appendChild(styleSheet);
-        });
-
-      const container = document.createElement("div");
-      const root = createRoot(container);
-      root.render(<>{children}</>);
-      body.appendChild(container);
-    }
-  }, [children, width, isModalOpen, tabIndex]);
+  const { saved, copyToClipboard } = useClipboard();
 
   useEffect(() => {
     Prism.highlightAll();
   }, [tabIndex]);
-  const { saved, copyToClipboard } = useClipboard();
+
   return (
-    <div
-      className={`relative  grow  rounded-lg border-2 border-black `}
-      ref={handleResizeRef}
-    >
-      {/* Header with controls */}
+    <div className={`relative grow rounded-lg border-2 border-black`}>
       <BrowserHeader
-        setMobileSize={setMobileSize}
-        setTabletSize={setTabletSize}
-        setDesktopSize={setDesktopSize}
         saved={saved}
         copyToClipboard={() => copyToClipboard(componentSource)}
       />
 
-      {/* Main content area */}
-      <div className={`${heights[height]} flex m-auto my-6 flex-1`}>
-        <div className="flex m-4 flex-1">
-          <Tabs titles={["Preview", "Code"]} onTabChange={setTabIndex}>
-            {/* Preview Tab */}
-            <div className={`${heights[height]} flex m-auto my-6 flex-1`}>
-              <div className="flex m-4 flex-1 " style={{ width  }}>
-                <iframe ref={iframeRef} className="w-full h-[calc(100%-50px)]" />
-              </div>
-            </div>
+      <div className="flex flex-col m-auto my-6 flex-grow">
+        <Tabs titles={["Preview", "Code"]} onTabChange={setTabIndex}>
+          {/* Preview Tab */}
 
-            {/* Code Tab */}
-            <CodeTab componentSource={componentSource} width={width} />
-          </Tabs>
-        </div>
-      </div>
-      <ResponsiveModal isOpen={isModalOpen} onClose={closeModal}>
-        <BrowserHeader
-          setMobileSize={setMobileSize}
-          setTabletSize={setTabletSize}
-          setDesktopSize={setDesktopSize}
-          saved={saved}
-          copyToClipboard={() => copyToClipboard(componentSource)}
-        />
-        <div className={`h-[48dvh] flex  my-2 `}>
-          <div className="flex m-4 w-full">
-            <Tabs
-              titles={["Preview", "Code"]}
-              onTabChange={(i) => setTabIndex(i)}
-            >
-              {/* Preview Tab */}
-              <div className="flex m-4 flex-1 h-full" style={{ width }}>
-                <iframe ref={iframeRef} className="w-full h-full" />
-              </div>
-              {/* Code Tab */}
-              <CodeTab componentSource={componentSource} width={width} />
-            </Tabs>
+          <div className="mx-auto max-w-7xl p-4 sm:px-6 lg:px-8">
+            <div className="mx-auto max-w-3xl">{children}</div>
           </div>
-        </div>
-      </ResponsiveModal>
+
+          {/* Code Tab */}
+          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div className="mx-auto max-w-3xl">
+
+              <CodeTab componentSource={componentSource} />
+            </div>
+          </div>
+        </Tabs>
+      </div>
     </div>
   );
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"filename":"c:\\projects\\nexwind-components\\__azurite_db_table__.json","collections":[{"name":"$TABLES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"account":{"name":"account","dirty":false,"values":[]},"table":{"name":"table","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$TABLES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]},{"name":"$SERVICES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{},"constraints":null,"uniqueNames":["accountName"],"transforms":{},"objType":"$SERVICES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]}],"databaseVersion":1.5,"engineVersion":1.5,"autosave":true,"autosaveInterval":5000,"autosaveHandle":null,"throttledSaves":true,"options":{"persistenceMethod":"fs","autosave":true,"autosaveInterval":5000,"serializationMethod":"normal","destructureDelimiter":"$<\n"},"persistenceMethod":"fs","persistenceAdapter":null,"verbose":false,"events":{"init":[null],"loaded":[],"flushChanges":[],"close":[],"changes":[],"warning":[]},"ENV":"NODEJS"}
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,4 @@

		# File Upload Manager Component Guide

		## Introduction

Expand Down