astro-tractstack 2.0.0-rc.0

package/templates/src/components/compositor/elements/BgImage.tsx

@@ -0,0 +1,118 @@
+import type { BgImageNode, ViewportKey } from '@/types/compositorTypes';
+
+interface BgImageProps {
+  payload: BgImageNode;
+  viewportKey?: ViewportKey;
+}
+
+export const BgImage = ({ payload, viewportKey }: BgImageProps) => {
+  // Use base64Data if available (pending upload), otherwise use src (uploaded file)
+  const imageSrc = payload.base64Data || payload.src;
+
+  // Helper to check if the image should be hidden on a specific viewport
+  const isHiddenOnViewport = (
+    viewport: 'Mobile' | 'Tablet' | 'Desktop'
+  ): boolean => {
+    const key = `hiddenViewport${viewport}` as keyof BgImageNode;
+    return !!payload[key];
+  };
+
+  // Check if we should render as normal image
+  const isFlexImage =
+    payload.position === 'left' || payload.position === 'right';
+
+  // For viewport-specific rendering
+  if (
+    viewportKey === 'mobile' ||
+    viewportKey === 'tablet' ||
+    viewportKey === 'desktop'
+  ) {
+    const viewportCapitalized =
+      viewportKey.charAt(0).toUpperCase() + viewportKey.slice(1);
+    const hiddenViewportKey =
+      `hiddenViewport${viewportCapitalized}` as keyof BgImageNode;
+
+    // Skip rendering if this viewport should be hidden
+    if (payload[hiddenViewportKey]) {
+      return null;
+    }
+
+    if (isFlexImage) {
+      return (
+        <img
+          src={imageSrc}
+          {...(payload.srcSet ? { srcSet: payload.srcSet } : {})}
+          alt={payload.alt || 'Background image'}
+          className={`h-full w-full object-${payload.objectFit || 'cover'}`}
+          style={{ objectFit: payload.objectFit || 'cover' }}
+        />
+      );
+    }
+
+    return (
+      <div
+        className="absolute left-0 top-0 h-full w-full"
+        style={{
+          backgroundImage: `url(${imageSrc})`,
+          backgroundSize: payload.objectFit || 'cover',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+          zIndex: 0,
+        }}
+        role="img"
+        aria-label={payload.alt || 'Background image'}
+      />
+    );
+  }
+
+  // Build responsive class based on visibility settings
+  const buildResponsiveClass = (): string => {
+    const hiddenMobile = isHiddenOnViewport('Mobile');
+    const hiddenTablet = isHiddenOnViewport('Tablet');
+    const hiddenDesktop = isHiddenOnViewport('Desktop');
+
+    const classes = [];
+
+    if (hiddenMobile) classes.push('hidden xs:hidden');
+    else classes.push('block');
+
+    if (hiddenTablet) classes.push('md:hidden');
+    else if (hiddenMobile) classes.push('md:block');
+
+    if (hiddenDesktop) classes.push('xl:hidden');
+    else if (hiddenTablet) classes.push('xl:block');
+
+    return classes.join(' ');
+  };
+
+  // Render based on position
+  if (isFlexImage) {
+    return (
+      <img
+        src={imageSrc}
+        {...(payload.srcSet ? { srcSet: payload.srcSet } : {})}
+        alt={payload.alt || 'Background image'}
+        className={`h-full w-full object-${payload.objectFit || 'cover'} ${buildResponsiveClass()}`}
+        style={{ objectFit: payload.objectFit || 'cover' }}
+      />
+    );
+  }
+
+  // Render as background (default)
+  return (
+    <div
+      className={`absolute left-0 top-0 h-full w-full ${buildResponsiveClass()}`}
+      style={{
+        backgroundImage: `url(${imageSrc})`,
+        backgroundSize: payload.objectFit || 'cover',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        zIndex: 0,
+      }}
+      role="img"
+      aria-label={payload.alt || 'Background image'}
+    />
+  );
+};
+
+export default BgImage;

package/templates/src/components/compositor/elements/BgVisualBreak.tsx

@@ -0,0 +1,102 @@
+import { Svg } from './Svg';
+import type { VisualBreakNode, ViewportKey } from '@/types/compositorTypes';
+
+interface BgPaneProps {
+  payload: VisualBreakNode;
+  viewportKey: ViewportKey;
+}
+
+const BgPane = ({ payload, viewportKey }: BgPaneProps) => {
+  // For specific viewport rendering
+  if (
+    viewportKey === 'mobile' ||
+    viewportKey === 'tablet' ||
+    viewportKey === 'desktop'
+  ) {
+    const capitalizedViewport =
+      viewportKey.charAt(0).toUpperCase() + viewportKey.slice(1);
+    const hiddenViewportKey =
+      `hiddenViewport${capitalizedViewport}` as keyof VisualBreakNode;
+    const breakKey = `break${capitalizedViewport}` as keyof VisualBreakNode;
+
+    // Check if this viewport should be hidden
+    if (payload[hiddenViewportKey]) {
+      return null;
+    }
+
+    const breakData = payload[breakKey] as
+      | {
+          collection: string;
+          image: string;
+          svgFill: string;
+        }
+      | undefined;
+
+    if (!breakData) {
+      return null;
+    }
+    return (
+      <div className="grid" style={{ fill: breakData.svgFill || 'none' }}>
+        <Svg
+          shapeName={`${breakData.collection}${breakData.image}`}
+          viewportKey={viewportKey}
+          id={`${viewportKey}-${breakData.collection}${breakData.image}`}
+        />
+      </div>
+    );
+  }
+
+  // For responsive rendering
+  const baseClasses = {
+    mobile: 'md:hidden',
+    tablet: 'hidden md:block xl:hidden',
+    desktop: 'hidden xl:block',
+  };
+
+  const breakpoints = ['mobile', 'tablet', 'desktop'] as const;
+
+  return (
+    <>
+      {breakpoints.map((breakpoint) => {
+        const capitalizedBreakpoint =
+          breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1);
+        const hiddenViewportKey =
+          `hiddenViewport${capitalizedBreakpoint}` as keyof VisualBreakNode;
+
+        if (payload[hiddenViewportKey]) {
+          return null;
+        }
+
+        const breakData = payload[
+          `break${capitalizedBreakpoint}` as keyof VisualBreakNode
+        ] as
+          | {
+              collection: string;
+              image: string;
+              svgFill: string;
+            }
+          | undefined;
+
+        if (!breakData) {
+          return null;
+        }
+
+        return (
+          <div
+            key={breakpoint}
+            className={baseClasses[breakpoint]}
+            style={{ fill: breakData.svgFill || 'none' }}
+          >
+            <Svg
+              shapeName={`${breakData.collection}${breakData.image}`}
+              viewportKey={breakpoint}
+              id={`${breakpoint}-${breakData.collection}${breakData.image}`}
+            />
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default BgPane;

package/templates/src/components/compositor/elements/BunnyVideo.tsx

@@ -0,0 +1,63 @@
+interface BunnyVideoProps {
+  embedUrl: string;
+  title: string;
+  className?: string;
+}
+
+const BunnyVideo = ({ embedUrl, title, className = '' }: BunnyVideoProps) => {
+  // Check if a string is a valid URL
+  const isValidUrl = (url: string): boolean => {
+    try {
+      new URL(url);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  // Render placeholder when URL is invalid
+  if (!isValidUrl(embedUrl)) {
+    return (
+      <div
+        className={`flex aspect-video w-full items-center justify-center bg-gray-100 ${className}`}
+      >
+        <div className="p-4 text-center">
+          <div className="text-mydarkgrey mb-2">Video URL not set</div>
+          <div className="text-mygrey text-sm">
+            Configure this widget with a valid Bunny Stream URL
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Build URL with default parameters for preview
+  let videoUrl;
+  try {
+    videoUrl = new URL(embedUrl);
+    videoUrl.searchParams.set('autoplay', '0');
+    videoUrl.searchParams.set('preload', 'false');
+    videoUrl.searchParams.set('responsive', 'true');
+  } catch (e) {
+    return (
+      <div
+        className={`flex aspect-video w-full items-center justify-center bg-gray-100 ${className}`}
+      >
+        <div className="text-mydarkgrey text-center">Invalid video URL</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`relative w-full ${className}`}>
+      <iframe
+        src={videoUrl.toString()}
+        className="aspect-video w-full"
+        title={title}
+        allow="autoplay; fullscreen"
+      />
+    </div>
+  );
+};
+
+export default BunnyVideo;

package/templates/src/components/compositor/elements/IdentifyAs.tsx

@@ -0,0 +1,66 @@
+import { classNames } from '@/utils/helpers';
+
+const SingleIdentifyAs = ({
+  value,
+  noprompt,
+}: {
+  value: { slug: string; target: string; extra: string };
+  noprompt: boolean;
+}) => {
+  const thisTitle = noprompt ? `Tell me more!` : value.target;
+
+  return (
+    <div className="mt-3 block w-fit">
+      <div
+        className={classNames(
+          `bg-gray-100 ring-orange-500 hover:bg-orange-200`,
+          `rounded-md px-3 py-2 text-lg text-black shadow-sm ring-1 ring-inset`
+        )}
+      >
+        <div className="flex items-center">
+          <span
+            aria-label="Color swatch for belief"
+            className={classNames(
+              `motion-safe:animate-pulse`,
+              `bg-orange-500`,
+              `inline-block h-2 w-2 flex-shrink-0 rounded-full`
+            )}
+          />
+          <span className="ml-3 block w-fit whitespace-normal text-left">
+            {thisTitle}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const IdentifyAs = ({
+  value,
+  classNames = '',
+}: {
+  value: { slug: string; target: string; extra: string };
+  classNames: string;
+}) => {
+  const targets =
+    typeof value.target === `string`
+      ? value.target.split(',').map((t) => t.trim())
+      : value.target;
+  const extra = value && typeof value.extra === `string` ? value.extra : null;
+  const noprompt = extra === ``;
+
+  return (
+    <>
+      {extra ? <span className={classNames}>{extra}</span> : null}
+      <div className="flex flex-wrap gap-2">
+        {targets.map((target, index) => (
+          <SingleIdentifyAs
+            key={`${value.slug}-${index}`}
+            value={{ ...value, target }}
+            noprompt={noprompt}
+          />
+        ))}
+      </div>
+    </>
+  );
+};

package/templates/src/components/compositor/elements/PlayButton.tsx

@@ -0,0 +1,19 @@
+export const PlayButton = () => {
+  return (
+    <svg
+      viewBox="0 0 459 459"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      className="inline-block"
+      style={{ height: `1em` }}
+    >
+      <path
+        d="M229.5,0C102.751,0,0,102.751,0,229.5S102.751,459,229.5,459S459,356.249,459,229.5S356.249,0,229.5,0z M310.292,239.651
+        l-111.764,76.084c-3.761,2.56-8.63,2.831-12.652,0.704c-4.022-2.128-6.538-6.305-6.538-10.855V153.416
+        c0-4.55,2.516-8.727,6.538-10.855c4.022-2.127,8.891-1.857,12.652,0.704l111.764,76.084c3.359,2.287,5.37,6.087,5.37,10.151
+        C315.662,233.564,313.652,237.364,310.292,239.651z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/templates/src/components/compositor/elements/SignUp.tsx

@@ -0,0 +1,179 @@
+import { Select } from '@ark-ui/react/select';
+import { Portal } from '@ark-ui/react/portal';
+import { createListCollection } from '@ark-ui/react/collection';
+import ChevronUpDownIcon from '@heroicons/react/20/solid/ChevronUpDownIcon';
+import CheckIcon from '@heroicons/react/20/solid/CheckIcon';
+
+export interface SignupProps {
+  persona: string;
+  prompt: string;
+  clarifyConsent: boolean;
+  id: string;
+}
+
+// Static contact persona data
+const contactPersona = [
+  {
+    id: 'major',
+    title: 'Major Updates Only',
+    description: 'Will only send major updates and do so infrequently.',
+  },
+  {
+    id: 'all',
+    title: 'All Updates',
+    description: 'Be fully in the know!',
+  },
+  {
+    id: 'open',
+    title: 'DMs open',
+    description: "Leave your contact details and we'll get in touch!",
+  },
+];
+
+export const SignUp = ({
+  persona,
+  prompt,
+  clarifyConsent,
+  id,
+}: SignupProps) => {
+  // Static values for visual representation
+  const personaSelected =
+    contactPersona.find((p) => p.id === persona) || contactPersona[0];
+
+  // Create collection for Ark UI Select
+  const personaCollection = createListCollection({
+    items: contactPersona,
+    itemToValue: (item) => item.id,
+    itemToString: (item) => item.title,
+  });
+
+  return (
+    <div className="rounded-md border border-gray-200 bg-white p-4 shadow-inner">
+      <h3 className="mb-4 text-lg font-bold text-gray-900">{prompt}</h3>
+
+      <form className="space-y-4">
+        <div>
+          <label
+            htmlFor={`${id}-firstname`}
+            className="mb-1 block text-sm font-bold text-gray-700"
+          >
+            First Name
+          </label>
+          <input
+            type="text"
+            id={`${id}-firstname`}
+            name="firstname"
+            placeholder="First name"
+            autoComplete="given-name"
+            disabled
+            className="w-full cursor-not-allowed rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 opacity-50 shadow-sm focus:border-cyan-600 focus:outline-none focus:ring-2 focus:ring-cyan-600"
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor={`${id}-email`}
+            className="mb-1 block text-sm font-bold text-gray-700"
+          >
+            Email Address
+          </label>
+          <input
+            type="email"
+            id={`${id}-email`}
+            name="email"
+            placeholder="Email address"
+            autoComplete="email"
+            disabled
+            className="w-full cursor-not-allowed rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 opacity-50 shadow-sm focus:border-cyan-600 focus:outline-none focus:ring-2 focus:ring-cyan-600"
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor={`${id}-codeword`}
+            className="mb-1 block text-sm font-bold text-gray-700"
+          >
+            Code Word
+          </label>
+          <input
+            type="password"
+            id={`${id}-codeword`}
+            name="codeword"
+            placeholder="Choose a code word"
+            autoComplete="new-password"
+            disabled
+            className="w-full cursor-not-allowed rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 opacity-50 shadow-sm focus:border-cyan-600 focus:outline-none focus:ring-2 focus:ring-cyan-600"
+          />
+          <p className="mt-1 text-xs text-gray-500">
+            Remember this code word to manage your preferences later.
+          </p>
+        </div>
+
+        {clarifyConsent && (
+          <div>
+            <Select.Root
+              collection={personaCollection}
+              value={[personaSelected.id]}
+              positioning={{ sameWidth: true }}
+              disabled
+            >
+              <div className="mb-1 block text-sm font-bold text-gray-700">
+                Contact Preferences
+              </div>
+              <Select.Control className="relative">
+                <Select.Trigger className="relative w-full cursor-not-allowed rounded-md bg-white py-2 pl-3 pr-10 text-left opacity-50 shadow-md focus:outline-none">
+                  <Select.ValueText className="block truncate">
+                    {personaSelected.title}
+                  </Select.ValueText>
+                  <Select.Indicator className="absolute inset-y-0 right-0 flex items-center pr-2">
+                    <ChevronUpDownIcon
+                      className="h-5 w-5 text-gray-400"
+                      aria-hidden="true"
+                    />
+                  </Select.Indicator>
+                </Select.Trigger>
+              </Select.Control>
+              <Portal>
+                <Select.Positioner>
+                  <Select.Content className="z-50 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+                    {personaCollection.items.map((option) => (
+                      <Select.Item
+                        key={option.id}
+                        item={option}
+                        className="relative cursor-default select-none py-2 pl-10 pr-4 text-black"
+                      >
+                        <div className="flex flex-col">
+                          <Select.ItemText className="block truncate font-bold">
+                            {option.title}
+                          </Select.ItemText>
+                          <span className="text-xs text-black">
+                            {option.description}
+                          </span>
+                        </div>
+                        <Select.ItemIndicator className="absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
+                          <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                        </Select.ItemIndicator>
+                      </Select.Item>
+                    ))}
+                  </Select.Content>
+                </Select.Positioner>
+              </Portal>
+            </Select.Root>
+          </div>
+        )}
+
+        <div>
+          <button
+            type="button"
+            disabled
+            className="w-full cursor-not-allowed rounded-md bg-cyan-700 px-4 py-2 text-sm font-bold text-white opacity-50 shadow-sm"
+          >
+            Sign up
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default SignUp;

package/templates/src/components/compositor/elements/Svg.tsx

@@ -0,0 +1,33 @@
+import { SvgBreaks } from '@/constants/shapes';
+
+export const Svg = ({
+  shapeName,
+  viewportKey,
+  id,
+}: {
+  shapeName: string;
+  viewportKey: string;
+  id: string;
+}) => {
+  const shapeData =
+    //typeof SvgPanes[shapeName] !== `undefined` &&
+    //  typeof SvgPanes[shapeName][viewportKey] !== `undefined`
+    //  ? SvgPanes[shapeName][viewportKey]
+    //  :
+    typeof SvgBreaks[shapeName] !== `undefined` ? SvgBreaks[shapeName] : null;
+  if (!shapeData) return <></>;
+  return (
+    <svg
+      id={`svg__${id}`}
+      data-name={`svg__${shapeName}--${viewportKey}`}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={`0 0 ${shapeData.viewBox[0]} ${shapeData.viewBox[1]}`}
+      className={`svg svg__${shapeName} svg__${shapeName}--${viewportKey}`}
+    >
+      <desc>decorative background</desc>
+      <g>
+        <path d={shapeData.path} />
+      </g>
+    </svg>
+  );
+};

package/templates/src/components/compositor/elements/ToggleBelief.tsx

@@ -0,0 +1,36 @@
+import { Switch } from '@ark-ui/react';
+import { classNames } from '@/utils/helpers';
+
+export const ToggleBelief = ({ prompt }: { prompt: string }) => {
+  return (
+    <div className={classNames(`mt-6 flex items-center`)}>
+      <Switch.Root
+        checked={false}
+        disabled={true}
+        className="inline-flex items-center"
+      >
+        <Switch.Control
+          className={classNames(
+            `bg-myblue`,
+            `relative inline-flex h-6 w-11 flex-shrink-0`,
+            `cursor-not-allowed opacity-50`,
+            `rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-cyan-600 focus:ring-offset-2`
+          )}
+        >
+          <Switch.Thumb
+            className={classNames(
+              `motion-safe:animate-wig translate-x-0`,
+              `pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition-transform duration-200 ease-in-out`
+            )}
+          />
+        </Switch.Control>
+        <Switch.HiddenInput />
+        <div className="ml-3 flex h-6 items-center">
+          <Switch.Label className="cursor-default">
+            <span>{prompt}</span>
+          </Switch.Label>
+        </div>
+      </Switch.Root>
+    </div>
+  );
+};

package/templates/src/components/compositor/elements/YouTubeWrapper.tsx

@@ -0,0 +1,33 @@
+export const YouTubeWrapper = ({
+  embedCode,
+  title,
+}: {
+  embedCode: string;
+  title: string;
+}) => {
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '0',
+        paddingBottom: '56.25%',
+      }}
+    >
+      <iframe
+        src={`https://www.youtube.com/embed/${embedCode}`}
+        title={title}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          border: 'none',
+        }}
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      />
+    </div>
+  );
+};

package/templates/src/components/compositor/nodes/BgPaneWrapper.tsx

@@ -0,0 +1,35 @@
+import { getCtx } from '@/stores/nodes';
+import { viewportKeyStore } from '@/stores/storykeep';
+import {
+  isBgImageNode,
+  isArtpackImageNode,
+} from '@/utils/compositor/typeGuards';
+import BgVisualBreak from '@/components/compositor/elements/BgVisualBreak';
+import BgImage from '@/components/compositor/elements/BgImage';
+import type { NodeProps } from '@/types/nodeProps';
+import type { BgImageNode, VisualBreakNode } from '@/types/compositorTypes';
+
+export const BgPaneWrapper = (props: NodeProps) => {
+  const node = getCtx(props).allNodes.get().get(props.nodeId);
+  if (!node) return null;
+
+  const viewport = viewportKeyStore.get().value;
+
+  const handleClick = (e: React.MouseEvent) => {
+    getCtx(props).setClickedNodeId(props.nodeId, true);
+    e.stopPropagation();
+  };
+
+  if (isBgImageNode(node) || isArtpackImageNode(node)) {
+    return <BgImage payload={node as BgImageNode} viewportKey={viewport} />;
+  } else {
+    return (
+      <div onClick={handleClick}>
+        <BgVisualBreak
+          payload={node as VisualBreakNode}
+          viewportKey={viewport}
+        />
+      </div>
+    );
+  }
+};