@linktr.ee/linkapp 0.0.35 → 0.0.37

package/dev-server/preview/Preview.tsx

@@ -1,276 +0,0 @@
-import { Portal } from "@radix-ui/react-portal";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import IframeResizer, { IFrameComponent } from "iframe-resizer-react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "../components/ui/dialog";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "../components/ui/tabs";
-import { cn, renderCssVariables } from "../lib/utils";
-import { SettingsPreview } from "../components/SettingsPreview";
-import { THEME_PRESETS } from "../shared/theme-presets";
-
-export default function Preview() {
-  // Initialize state from localStorage
-  const [selectedTab, setSelectedTab] = useState<"sheet" | "featured" | "settings">(() => {
-    const saved = localStorage.getItem("linkapp-preview-tab");
-    return (saved as "sheet" | "featured" | "settings") || "sheet";
-  });
-  const [selectedTheme, setSelectedTheme] = useState<keyof typeof THEME_PRESETS>(() => {
-    const saved = localStorage.getItem("linkapp-preview-theme");
-    return (saved as keyof typeof THEME_PRESETS) || "default";
-  });
-  const [selectedGroupLayoutOption, setSelectedGroupLayoutOption] = useState<string | undefined>(() => {
-    const saved = localStorage.getItem("linkapp-preview-groupLayoutOption");
-    return saved || undefined;
-  });
-
-  // Popup dialog state
-  const [isPopupOpen, setIsPopupOpen] = useState(false);
-
-  // Generate unique IDs for iframes using timestamp
-  const sheetIframeId = useMemo(() => `preview-iframe-sheet-${Date.now()}`, []);
-  const featuredIframeId = useMemo(() => `preview-iframe-featured-${Date.now()}`, []);
-  const popupIframeId = useMemo(() => `preview-iframe-popup-${Date.now()}`, []);
-
-  // Save selected tab to localStorage
-  useEffect(() => {
-    localStorage.setItem("linkapp-preview-tab", selectedTab);
-  }, [selectedTab]);
-
-  // Save selected theme to localStorage
-  useEffect(() => {
-    localStorage.setItem("linkapp-preview-theme", selectedTheme);
-  }, [selectedTheme]);
-
-  // Save selected groupLayoutOption to localStorage
-  useEffect(() => {
-    if (selectedGroupLayoutOption) {
-      localStorage.setItem("linkapp-preview-groupLayoutOption", selectedGroupLayoutOption);
-    } else {
-      localStorage.removeItem("linkapp-preview-groupLayoutOption");
-    }
-  }, [selectedGroupLayoutOption]);
-
-  // Handle iframe resize events
-  const handleResized = useCallback(
-    (ev: { iframe: IFrameComponent; height: number; width: number; type: string }): void => {
-      // IframeResizer automatically handles height adjustments
-      // This callback is available for debugging if needed
-    },
-    []
-  );
-
-  // Handle postMessage from featured iframe for EXPAND_LINK_APP
-  const handleMessage = useCallback((event: MessageEvent) => {
-    if (
-      event.data &&
-      typeof event.data === 'object' &&
-      event.data.source === 'linkapp' &&
-      event.data.type === 'EXPAND_LINK_APP'
-    ) {
-      setIsPopupOpen(true);
-    }
-  }, []);
-
-  // Add message listener
-  useEffect(() => {
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, [handleMessage]);
-
-
-  const renderedCssVariables = useMemo(() => {
-    const themeVariables = THEME_PRESETS[selectedTheme] || THEME_PRESETS.default
-    return renderCssVariables(themeVariables.variables);
-  }, [selectedTheme])
-
-  return (
-    <>
-      <style>{`:root {
-        ${renderedCssVariables}
-        }`}</style>
-
-    <div
-      className={cn("min-h-screen", {
-        "bg-black/50": selectedTab === "classic",
-        "bg-linktree-frame": selectedTab === "featured",
-      })}
-      id="preview"
-    >
-      <Tabs
-        value={selectedTab}
-        onValueChange={(value) =>
-          setSelectedTab(value as "sheet" | "featured" | "settings")
-        }
-      >
-        <Portal>
-          <div
-            className="fixed top-0 left-0 right-0 p-4 flex justify-center gap-4 bg-background border-b"
-            style={{ zIndex: 1000000 }}
-          >
-            <TabsList>
-              <TabsTrigger value="sheet">Sheet</TabsTrigger>
-              <TabsTrigger value="featured">Featured</TabsTrigger>
-              <TabsTrigger value="settings">Settings</TabsTrigger>
-            </TabsList>
-
-            {/* Theme Switcher */}
-            <div className="flex items-center gap-2">
-              <label htmlFor="theme-select" className="text-sm font-medium">
-                Theme:
-              </label>
-              <select
-                id="theme-select"
-                value={selectedTheme}
-                onChange={(e) =>
-                  setSelectedTheme(e.target.value as keyof typeof THEME_PRESETS)
-                }
-                className="h-9 px-3 py-1 text-sm border border-input bg-background rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
-              >
-                {Object.entries(THEME_PRESETS).map(([key, theme]) => (
-                  <option key={key} value={key}>
-                    {theme.name}
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            {/* Group Layout Option Switcher - Only show for Featured tab */}
-            {selectedTab === "featured" && (
-              <div className="flex items-center gap-2">
-                <label htmlFor="groupLayoutOption-select" className="text-sm font-medium">
-                  Layout:
-                </label>
-                <select
-                  id="groupLayoutOption-select"
-                  value={selectedGroupLayoutOption || "default"}
-                  onChange={(e) =>
-                    setSelectedGroupLayoutOption(e.target.value === "default" ? undefined : e.target.value)
-                  }
-                  className="h-9 px-3 py-1 text-sm border border-input bg-background rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
-                >
-                  <option value="default">Default</option>
-                  <option value="carousel">Carousel</option>
-                </select>
-              </div>
-            )}
-          </div>
-        </Portal>
-
-        {/* Main Content with Padding for Fixed Tabs */}
-        <div className="pt-20">
-          <TabsContent value="sheet" className="m-0">
-            {/* Sheet Modal - Always Open */}
-            <Dialog open={true} modal={false}>
-              <DialogContent
-                className="h-[calc(100dvh-2rem)] max-w-[608px] md:min-h-[25vh] md:h-[80%] md:max-h-[900px] overflow-auto"
-                showCloseButton={false}
-              >
-                <DialogHeader className="sticky top-0 bg-white px-4">
-                  <div className="grid h-16 grid-cols-[32px_auto_32px] items-center gap-4">
-                    <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
-                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className=" " role="img" aria-hidden="true"><path fill="currentColor" d="m10.65 3.85.35.36.7-.71-.35-.35-3-3h-.7l-3 3-.36.35.71.7.35-.35L7.5 1.71V10h1V1.7l2.15 2.15ZM1 5.5l.5-.5H4v1H2v9h12V6h-2V5h2.5l.5.5v10l-.5.5h-13l-.5-.5v-10Z"></path></svg>
-                    </button>
-
-                    <DialogTitle className="self-center truncate py-3 text-center">
-                      Sheet
-                    </DialogTitle>
-
-                    <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
-                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className=" " role="img" aria-hidden="true"><path fill="currentColor" d="m13.63 3.12.37-.38-.74-.74-.38.37.75.75ZM2.37 12.89l-.37.37.74.74.38-.37-.75-.75Zm.75-10.52L2.74 2 2 2.74l.37.38.75-.75Zm9.76 11.26.38.37.74-.74-.37-.38-.75.75Zm0-11.26L2.38 12.9l.74.74 10.5-10.51-.74-.75Zm-10.5.75 10.5 10.5.75-.73L3.12 2.37l-.75.75Z"></path></svg>
-                    </button>
-                  </div>
-                </DialogHeader>
-
-                <div className="flex h-[calc(100%-64px)] flex-1 flex-col justify-between overflow-hidden">
-                  <div className="h-full overflow-y-auto overflow-x-hidden">
-                    <IframeResizer
-                      key={`sheet-${selectedTheme}`}
-                      id={sheetIframeId}
-                      src={`/sheet?theme=${selectedTheme}`}
-                      style={{ height: '0px', width: '1px', minWidth: '100%', border: 0 }}
-                      checkOrigin={false}
-                      onResized={handleResized}
-                      heightCalculationMethod="max"
-                    />
-                  </div>
-                </div>
-              </DialogContent>
-            </Dialog>
-          </TabsContent>
-
-          <TabsContent value="featured" className="m-0 flex justify-center p-8">
-            {/* Featured Iframe - Max Width 524px */}
-            <div className="w-full max-w-[580px] flex flex-col px-[28px] py-7 items-center bg-linktree-profile-bg">
-
-              <div className="w-full max-w-[524px]">
-                <div className="bg-linktree-button-bg hover:bg-linktree-button-bg-hover border-linktree-button-border text-linktree-button-text rounded-linktree-button shadow-linktree-button overflow-hidden">
-                  <IframeResizer
-                    key={`featured-${selectedTheme}-${selectedGroupLayoutOption || 'default'}`}
-                    id={featuredIframeId}
-                    src={`/featured?theme=${selectedTheme}${selectedGroupLayoutOption ? `&groupLayoutOption=${selectedGroupLayoutOption}` : ''}`}
-                    style={{ height: '0px', width: '1px', minWidth: '100%', border: 0 }}
-                    checkOrigin={false}
-                    onResized={handleResized}
-                    heightCalculationMethod="max"
-                  />
-                </div>
-              </div>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="settings" className="m-0">
-            <SettingsPreview settings={__SETTINGS_CONFIG__} />
-          </TabsContent>
-        </div>
-      </Tabs>
-
-      {/* Popup Dialog for EXPAND_LINK_APP message */}
-      <Dialog open={isPopupOpen} onOpenChange={setIsPopupOpen} modal={false}>
-        <DialogContent
-          className="h-[calc(100dvh-2rem)] max-w-[608px] md:min-h-[25vh] md:h-[80%] md:max-h-[900px] overflow-auto"
-          showCloseButton={false}
-        >
-          <DialogHeader className="sticky top-0 bg-white px-4">
-            <div className="grid h-16 grid-cols-[32px_auto_32px] items-center gap-4">
-              <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className=" " role="img" aria-hidden="true"><path fill="currentColor" d="m10.65 3.85.35.36.7-.71-.35-.35-3-3h-.7l-3 3-.36.35.71.7.35-.35L7.5 1.71V10h1V1.7l2.15 2.15ZM1 5.5l.5-.5H4v1H2v9h12V6h-2V5h2.5l.5.5v10l-.5.5h-13l-.5-.5v-10Z"></path></svg>
-              </button>
-
-              <DialogTitle className="self-center truncate py-3 text-center">
-                Sheet
-              </DialogTitle>
-
-              <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className=" " role="img" aria-hidden="true"><path fill="currentColor" d="m13.63 3.12.37-.38-.74-.74-.38.37.75.75ZM2.37 12.89l-.37.37.74.74.38-.37-.75-.75Zm.75-10.52L2.74 2 2 2.74l.37.38.75-.75Zm9.76 11.26.38.37.74-.74-.37-.38-.75.75Zm0-11.26L2.38 12.9l.74.74 10.5-10.51-.74-.75Zm-10.5.75 10.5 10.5.75-.73L3.12 2.37l-.75.75Z"></path></svg>
-              </button>
-            </div>
-          </DialogHeader>
-
-          <div className="flex h-[calc(100%-64px)] flex-1 flex-col justify-between overflow-hidden">
-            <div className="h-full overflow-y-auto overflow-x-hidden">
-              <IframeResizer
-                key={`popup-${selectedTheme}`}
-                id={popupIframeId}
-                src={`/sheet?theme=${selectedTheme}`}
-                style={{ height: '0px', width: '1px', minWidth: '100%', border: 0 }}
-                checkOrigin={false}
-                onResized={handleResized}
-                heightCalculationMethod="max"
-              />
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-    </>
-  );
-}