@linktr.ee/create-link-app 2.0.0 → 2.2.0

package/dist/webpack/simulator.js

@@ -1,373 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const iframe_resizer_react_1 = __importDefault(require("iframe-resizer-react"));
-const extension_dev_data_1 = __importDefault(require("@linktr.ee/extension-dev-data"));
-const Global = (0, styled_components_1.createGlobalStyle) `
-  html, body, #root { height: 100%; }
-  body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: #111317; }
-`;
-const Page = styled_components_1.default.div `
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-  padding: 24px;
-  box-sizing: border-box;
-`;
-// Simulated Linktree mobile device frame
-const Phone = styled_components_1.default.div `
-  width: 394px; /* close to iPhone 14 width incl padding */
-  max-width: 94vw;
-  height: 800px;
-  border-radius: 28px;
-  background: radial-gradient(120% 110% at 50% 0%, #1f2143 0%, #2b2048 40%, #345a78 100%);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
-  color: #f5e8ff;
-  position: relative;
-  overflow: hidden;
-  &:before {
-    content: '';
-    position: absolute;
-    inset: -40% -20% 30% -20%;
-    background: radial-gradient(60% 40% at 50% 20%, rgba(214, 163, 255, 0.45) 0%, rgba(214, 163, 255, 0.18) 35%, rgba(0, 0, 0, 0) 80%);
-    pointer-events: none;
-  }
-`;
-const HeaderChrome = styled_components_1.default.div `
-  position: absolute;
-  top: 12px;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 18px;
-`;
-const Notch = styled_components_1.default.div `
-  position: absolute;
-  top: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 120px;
-  height: 22px;
-  background: rgba(0, 0, 0, 0.42);
-  border-radius: 12px;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
-`;
-const RoundIcon = styled_components_1.default.div `
-  width: 36px;
-  height: 36px;
-  border-radius: 9999px;
-  display: grid;
-  place-items: center;
-  background: rgba(255, 255, 255, 0.08);
-  color: #e8d7ff;
-  font-size: 16px;
-  backdrop-filter: blur(2px);
-`;
-const ScrollArea = styled_components_1.default.div `
-  position: absolute;
-  inset: 56px 0 0;
-  overflow-y: auto;
-  padding: 24px 22px 28px;
-  box-sizing: border-box;
-`;
-const Profile = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-`;
-const Avatar = styled_components_1.default.div `
-  width: 90px;
-  height: 90px;
-  border-radius: 9999px;
-  overflow: hidden;
-  border: 3px solid rgba(255, 255, 255, 0.25);
-  background: linear-gradient(135deg, #a5b4fc, #f0abfc);
-  display: grid;
-  place-items: center;
-  color: #1f1147;
-  font-weight: 800;
-  font-size: 28px;
-`;
-const Name = styled_components_1.default.div `
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 28px;
-  font-weight: 700;
-  letter-spacing: 0.2px;
-`;
-const Badge = styled_components_1.default.span `
-  display: inline-flex;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: #7dd3fc;
-  color: #0a2540;
-  font-size: 12px;
-  align-items: center;
-  justify-content: center;
-`;
-const Bio = styled_components_1.default.div `
-  font-size: 14px;
-  opacity: 0.9;
-`;
-const Card = styled_components_1.default.div `
-  background: rgba(255, 255, 255, 0.18);
-  color: #2a1c44;
-  border-radius: 20px;
-  padding: 14px 14px;
-  display: grid;
-  grid-template-columns: 36px 1fr 24px;
-  align-items: center;
-  gap: 12px;
-  margin: 12px 0;
-  backdrop-filter: blur(4px);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 0 rgba(0, 0, 0, 0.15);
-`;
-const CardTitle = styled_components_1.default.div `
-  color: #2a1c44;
-  font-weight: 700;
-  font-size: 16px;
-`;
-const CardSub = styled_components_1.default.div `
-  color: #2a1c44;
-  opacity: 0.8;
-  font-size: 12px;
-  margin-top: 2px;
-`;
-const CardIcon = styled_components_1.default.div `
-  width: 36px;
-  height: 36px;
-  border-radius: 12px;
-  display: grid;
-  place-items: center;
-  background: rgba(255, 255, 255, 0.55);
-  color: #2a1c44;
-  font-size: 16px;
-  font-weight: 700;
-`;
-const Kebab = styled_components_1.default.div `
-  opacity: 0.8;
-  color: #2a1c44;
-  display: grid;
-  place-items: center;
-  font-size: 18px;
-`;
-const SocialRow = styled_components_1.default.div `
-  display: flex;
-  gap: 28px;
-  justify-content: center;
-  margin: 26px 0 12px;
-  opacity: 0.95;
-`;
-const Footer = styled_components_1.default.div `
-  text-align: center;
-  font-size: 12px;
-  opacity: 0.75;
-  color: #d8c9ec;
-  margin-top: 18px;
-`;
-// Dedicated container for extension embeds to better mirror production
-const ExtensionCard = styled_components_1.default.div `
-  background: rgba(255, 255, 255, 0.95);
-  color: #0a0a0a;
-  border-radius: 20px;
-  padding: 0;
-  margin: 12px 0;
-  overflow: hidden;
-  position: relative;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 0 rgba(0, 0, 0, 0.15);
-`;
-function kebab() {
-    return react_1.default.createElement("span", { "aria-hidden": true }, "\u22EE");
-}
-function Simulator() {
-    const [loading, setLoading] = (0, react_1.useState)(true);
-    const [loadFailed, setLoadFailed] = (0, react_1.useState)(false);
-    const iframeRef = (0, react_1.useRef)(null);
-    const loadTimeoutRef = (0, react_1.useRef)(null);
-    const APP_LOAD_TIMEOUT_MILLISECONDS = 8000;
-    const MAX_IFRAME_HEIGHT = 900;
-    const targetOrigin = (0, react_1.useMemo)(() => {
-        try {
-            return __ALLOW_ANY_ORIGIN__ ? '*' : window.location.origin;
-        }
-        catch {
-            return '*';
-        }
-    }, []);
-    const initialiseData = (0, react_1.useCallback)(() => {
-        if (!iframeRef.current?.contentWindow)
-            return;
-        const payload = {
-            type: 'extension-data',
-            data: {
-                __environment: {
-                    RECAPTCHA_SITE_KEY: 'dev-invisible',
-                    GRAPH_ENDPOINT: `${window.location.origin}/graphql`,
-                    GRAPHQL_CLIENT_NAME: '@linktr.ee/create-link-app',
-                    GRAPHQL_CLIENT_VERSION: 'dev',
-                    COUNTRY_CODE: 'US',
-                    PROFILE: 'dev-user',
-                },
-                __linkUrl: extension_dev_data_1.default?.url ?? '',
-                __thumbnail: extension_dev_data_1.default?.thumbnail ?? '',
-                __linkParams: null,
-                displayType: 'accordion',
-                ...extension_dev_data_1.default,
-            },
-        };
-        iframeRef.current.contentWindow.postMessage(payload, targetOrigin);
-    }, [targetOrigin]);
-    (0, react_1.useEffect)(() => {
-        const handler = (event) => {
-            const type = (event?.data && event.data.type) || '';
-            if (!type)
-                return;
-            if (iframeRef.current?.contentWindow && event.source !== iframeRef.current.contentWindow)
-                return;
-            switch (type) {
-                case 'extension-loaded': {
-                    initialiseData();
-                    break;
-                }
-                case 'extension-ready': {
-                    setLoading(false);
-                    try {
-                        const node = document.getElementById('extension-iframe-sim');
-                        (node || iframeRef.current)?.contentWindow?.focus();
-                    }
-                    catch { }
-                    break;
-                }
-                case 'extension-error': {
-                    setLoading(false);
-                    setLoadFailed(true);
-                    break;
-                }
-                case 'interaction-event': {
-                    // eslint-disable-next-line no-console
-                    console.info('[Simulator] interaction-event', event.data?.data);
-                    break;
-                }
-                default:
-                    break;
-            }
-        };
-        window.addEventListener('message', handler);
-        return () => window.removeEventListener('message', handler);
-    }, [initialiseData]);
-    (0, react_1.useEffect)(() => {
-        if (loading) {
-            if (loadTimeoutRef.current)
-                window.clearTimeout(loadTimeoutRef.current);
-            loadTimeoutRef.current = window.setTimeout(() => {
-                setLoadFailed(true);
-            }, APP_LOAD_TIMEOUT_MILLISECONDS);
-        }
-        return () => {
-            if (loadTimeoutRef.current)
-                window.clearTimeout(loadTimeoutRef.current);
-        };
-    }, [loading]);
-    const iframeSrc = (0, react_1.useMemo)(() => `${window.location}?embed`, []);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Global, null),
-        react_1.default.createElement(Page, null,
-            react_1.default.createElement(Phone, null,
-                react_1.default.createElement(Notch, null),
-                react_1.default.createElement(HeaderChrome, null,
-                    react_1.default.createElement(RoundIcon, { title: "Settings" }, "\u2699\uFE0F"),
-                    react_1.default.createElement(RoundIcon, { title: "Notifications" }, "\uD83D\uDD14")),
-                react_1.default.createElement(ScrollArea, null,
-                    react_1.default.createElement(Profile, null,
-                        react_1.default.createElement(Avatar, null, "SC"),
-                        react_1.default.createElement(Name, null,
-                            "Sample Creator ",
-                            react_1.default.createElement(Badge, { title: "Verified" }, "\u2713")),
-                        react_1.default.createElement(Bio, null, "Digital creator")),
-                    react_1.default.createElement(ExtensionCard, null,
-                        loadFailed && (react_1.default.createElement("div", { style: {
-                                position: 'absolute',
-                                inset: 0,
-                                display: 'grid',
-                                placeItems: 'center',
-                                background: 'rgba(31,17,71,0.06)',
-                                color: '#92400e',
-                                zIndex: 2,
-                            } }, "Failed to load link app")),
-                        loading && !loadFailed && (react_1.default.createElement("div", { style: {
-                                position: 'absolute',
-                                inset: 0,
-                                display: 'grid',
-                                placeItems: 'center',
-                                background: 'rgba(31,17,71,0.03)',
-                                color: '#4c1d95',
-                                zIndex: 1,
-                            } }, "Loading\u2026")),
-                        react_1.default.createElement(iframe_resizer_react_1.default, { id: "extension-iframe-sim", style: { height: '0px', width: '1px', minWidth: '100%' }, maxHeight: MAX_IFRAME_HEIGHT, checkOrigin: false, src: iframeSrc, onResized: () => {
-                                /* no-op: iFrameResizer manages height */
-                            }, allow: ['clipboard-write'].join(' '), heightCalculationMethod: "max", sandbox: [
-                                'allow-popups',
-                                'allow-popups-to-escape-sandbox',
-                                'allow-top-navigation',
-                                'allow-same-origin',
-                                'allow-scripts',
-                                'allow-forms',
-                            ].join(' '), forwardRef: (node) => {
-                                iframeRef.current = node;
-                            } })),
-                    react_1.default.createElement(Card, null,
-                        react_1.default.createElement(CardIcon, null, "\uD83D\uDCBB"),
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement(CardTitle, null, "Featured link"),
-                            react_1.default.createElement(CardSub, null, "example.com")),
-                        react_1.default.createElement(Kebab, null, kebab())),
-                    react_1.default.createElement(Card, null,
-                        react_1.default.createElement(CardIcon, null, "\uD83D\uDCAC"),
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement(CardTitle, null, "Follow me")),
-                        react_1.default.createElement(Kebab, null, kebab())),
-                    react_1.default.createElement(Card, null,
-                        react_1.default.createElement(CardIcon, null, "\u2709\uFE0F"),
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement(CardTitle, null, "Contact")),
-                        react_1.default.createElement(Kebab, null, kebab())),
-                    react_1.default.createElement(SocialRow, null,
-                        react_1.default.createElement("span", { title: "Social A" }, "in"),
-                        react_1.default.createElement("span", { title: "Social B" }, "\uD835\uDD4F"),
-                        react_1.default.createElement("span", { title: "Social C" }, "\uD83D\uDC7B")),
-                    react_1.default.createElement(Footer, null, "Report \u00B7 Privacy"))))));
-}
-exports.default = Simulator;

package/templates/react/package.json

@@ -1,16 +0,0 @@
-{
-  "private": true,
-  "scripts": {
-    "build": "create-link-app build",
-    "login": "create-link-app login",
-    "logout": "create-link-app logout",
-    "upload": "create-link-app deploy",
-    "storybook": "create-link-app storybook",
-    "dev": "create-link-app dev",
-    "prepack": "create-link-app build --native"
-  },
-  "devDependencies": {
-    "@linktr.ee/create-link-app": "latest",
-    "@linktr.ee/ui-link-kit": "latest"
-  }
-}

package/templates/react/src/index.jsx

@@ -1,12 +0,0 @@
-import './tailwind.css'
-
-function App({ __linkUrl, __layout }) {
-  return (
-    <div>
-      <p>{__linkUrl}</p>
-      <p>{__layout}</p>
-    </div>
-  )
-}
-
-export default App

package/templates/react/src/tailwind.css

@@ -1,5 +0,0 @@
-/* tailwind.css */
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;