astro-tractstack 2.0.0-rc.0

package/templates/src/components/compositor/nodes/tagElements/NodeBasicTag_eraser.tsx

@@ -0,0 +1,62 @@
+import { type JSX, type MouseEvent, type KeyboardEvent } from 'react';
+import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
+import { getCtx } from '@/stores/nodes';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { RenderChildren } from '../RenderChildren';
+import { tagTitles } from '@/types/compositorTypes';
+import type { NodeProps } from '@/types/nodeProps';
+
+type NodeTagProps = NodeProps & { tagName: keyof JSX.IntrinsicElements };
+
+export const NodeBasicTagEraser = (props: NodeTagProps) => {
+  const nodeId = props.nodeId;
+  const children = getCtx(props).getChildNodeIDs(props.nodeId);
+
+  const Tag = props.tagName;
+  const tagTitle =
+    tagTitles[props.tagName as keyof typeof tagTitles] || props.tagName;
+
+  const handleClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    getCtx(props).setClickedNodeId(nodeId);
+  };
+
+  const EraserUI = () => (
+    <div
+      className={`pointer-events-none absolute left-2 top-2 z-50 flex items-center gap-2 transition-opacity`}
+    >
+      <div className="rounded-full bg-gray-200 px-2 py-1 text-sm text-gray-800">
+        {tagTitle}
+      </div>
+      <div className="flex items-center gap-1 rounded bg-white px-2 py-1 text-sm text-red-700 shadow-sm transition-colors group-focus-within:bg-red-700 group-focus-within:text-white group-hover:bg-red-700 group-hover:text-white">
+        <TrashIcon className="h-4 w-4" />
+        Click anywhere to delete
+      </div>
+    </div>
+  );
+
+  return (
+    <div
+      className="group relative cursor-pointer"
+      onClick={handleClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleClick(e as unknown as MouseEvent);
+        }
+      }}
+    >
+      <div className="absolute inset-0">
+        <div className="h-full w-full opacity-50 mix-blend-difference outline-dashed outline-4 outline-red-700 group-focus-within:opacity-100 group-hover:opacity-100" />
+      </div>
+      <EraserUI />
+      <Tag
+        className={`${getCtx(props).getNodeClasses(nodeId, viewportKeyStore.get().value)} pt-12`}
+      >
+        <RenderChildren children={children} nodeProps={props} />
+      </Tag>
+    </div>
+  );
+};

package/templates/src/components/compositor/nodes/tagElements/NodeBasicTag_insert.tsx

@@ -0,0 +1,120 @@
+import { getCtx } from '@/stores/nodes';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { RenderChildren } from '../RenderChildren';
+import type { NodeProps } from '@/types/nodeProps';
+import { tagTitles } from '@/types/compositorTypes';
+import { getTemplateNode } from '@/utils/compositor/nodesHelper';
+import { type JSX, type MouseEvent } from 'react';
+
+type NodeTagProps = NodeProps & { tagName: keyof JSX.IntrinsicElements };
+
+export const NodeBasicTagInsert = (props: NodeTagProps) => {
+  const { value: toolAddMode } = getCtx(props).toolAddModeStore.get();
+  const nodeId = props.nodeId;
+  const { allowInsertBefore, allowInsertAfter } =
+    props.tagName !== 'li'
+      ? getCtx(props).allowInsert(nodeId, toolAddMode)
+      : getCtx(props).allowInsertLi(nodeId, toolAddMode);
+  const children = getCtx(props).getChildNodeIDs(props.nodeId);
+
+  const Tag = props.tagName;
+  const newTagTitle = tagTitles[toolAddMode];
+
+  const handleInsertAbove = (e: MouseEvent) => {
+    e.stopPropagation();
+    const templateNode = getTemplateNode(
+      getCtx(props).toolAddModeStore.get().value
+    );
+    const newNodeId = getCtx(props).addTemplateNode(
+      props.nodeId,
+      templateNode,
+      props.nodeId,
+      'before'
+    );
+    if (newNodeId && templateNode.tagName)
+      handleInsertSignal(templateNode.tagName, newNodeId);
+  };
+
+  const handleInsertBelow = (e: MouseEvent) => {
+    e.stopPropagation();
+    const templateNode = getTemplateNode(
+      getCtx(props).toolAddModeStore.get().value
+    );
+    const newNodeId = getCtx(props).addTemplateNode(
+      props.nodeId,
+      templateNode,
+      props.nodeId,
+      'after'
+    );
+    if (newNodeId && templateNode.tagName)
+      handleInsertSignal(templateNode.tagName, newNodeId);
+  };
+
+  const handleInsertSignal = (tagName: string, nodeId: string) => {
+    getCtx(props).handleInsertSignal(tagName, nodeId);
+  };
+
+  const handleClickIntercept = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const InsertButtons = () => (
+    <div
+      className={`absolute left-2 top-2 z-10 flex items-center gap-2 transition-opacity`}
+    >
+      {(allowInsertBefore || allowInsertAfter) && (
+        <div className="rounded-full bg-gray-200 px-2 py-1 text-sm text-gray-800">
+          Insert {newTagTitle}
+        </div>
+      )}
+      {allowInsertBefore && (
+        <button
+          onClick={handleInsertAbove}
+          className="z-10 rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+        >
+          + Above
+        </button>
+      )}
+      {allowInsertAfter && (
+        <button
+          onClick={handleInsertBelow}
+          className="z-10 rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+        >
+          + Below
+        </button>
+      )}
+      {!allowInsertBefore && !allowInsertAfter && (
+        <button
+          className="rounded bg-white px-2 py-1 text-sm text-cyan-700 opacity-50 shadow-sm transition-colors"
+          disabled={true}
+        >
+          + Can't Insert {newTagTitle} Here
+        </button>
+      )}
+    </div>
+  );
+
+  return (
+    <div className="group relative">
+      <div className="relative">
+        {/* Click interceptor layer */}
+        <div
+          className="absolute inset-0 z-10"
+          onClick={handleClickIntercept}
+          onMouseDown={handleClickIntercept}
+          onMouseUp={handleClickIntercept}
+        />
+        <div className="absolute inset-0">
+          <div className="h-full w-full opacity-50 mix-blend-difference outline-dashed outline-4 outline-cyan-600 group-focus-within:opacity-100 group-hover:opacity-100" />
+        </div>
+        <InsertButtons />
+        <Tag
+          className={`${getCtx(props).getNodeClasses(nodeId, viewportKeyStore.get().value)} pt-12`}
+        >
+          <RenderChildren children={children} nodeProps={props} />
+        </Tag>
+      </div>
+    </div>
+  );
+};

package/templates/src/components/compositor/nodes/tagElements/NodeBasicTag_settings.tsx

@@ -0,0 +1,62 @@
+import { type JSX } from 'react';
+import ArrowDownIcon from '@heroicons/react/24/outline/ArrowDownIcon';
+import ArrowUpIcon from '@heroicons/react/24/outline/ArrowUpIcon';
+import { getCtx } from '@/stores/nodes';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { RenderChildren } from '../RenderChildren';
+import type { FlatNode } from '@/types/compositorTypes';
+import type { NodeProps } from '@/types/nodeProps';
+
+type NodeTagProps = NodeProps & { tagName: keyof JSX.IntrinsicElements };
+
+export const NodeBasicTagSettings = (props: NodeTagProps) => {
+  const nodeId = props.nodeId;
+  const node = getCtx(props).allNodes.get().get(nodeId) as FlatNode;
+  const children = getCtx(props).getChildNodeIDs(props.nodeId);
+  const Tag = props.tagName;
+
+  const canMove = (/*direction: "before" | "after"*/): boolean => {
+    // only block level can move
+    if (node.tagName === 'li') {
+      return false;
+    }
+    return true;
+  };
+
+  const SettingsButtons = () => (
+    <div
+      className={`absolute left-2 top-2 z-10 flex items-center gap-2 transition-opacity`}
+    >
+      {canMove(/*"after"*/) && (
+        <button onClick={() => getCtx().moveNode(nodeId, 'after')}>
+          <div className="inline-flex items-center rounded-b-md bg-gray-200 px-2 py-1 text-sm text-gray-800">
+            <ArrowDownIcon className="mr-1 h-6 w-6" />
+          </div>
+        </button>
+      )}
+      {canMove(/*"before"*/) && (
+        <button onClick={() => getCtx().moveNode(nodeId, 'before')}>
+          <div className="inline-flex items-center rounded-b-md bg-gray-200 px-2 py-1 text-sm text-gray-800">
+            <ArrowUpIcon className="mr-1 h-6 w-6" />
+          </div>
+        </button>
+      )}
+    </div>
+  );
+
+  return (
+    <div className="group relative">
+      <div className="relative">
+        <div className="absolute inset-0">
+          <div className="h-full w-full opacity-50 outline-dashed outline-4 outline-cyan-600 group-focus-within:opacity-100 group-hover:opacity-100" />
+        </div>
+        <SettingsButtons />
+        <Tag
+          className={`${getCtx(props).getNodeClasses(nodeId, viewportKeyStore.get().value)} pt-12`}
+        >
+          <RenderChildren children={children} nodeProps={props} />
+        </Tag>
+      </div>
+    </div>
+  );
+};

package/templates/src/components/compositor/nodes/tagElements/NodeButton.tsx

@@ -0,0 +1,5 @@
+import { NodeAnchorComponent } from './NodeAnchorComponent';
+import type { NodeProps } from '@/types/nodeProps';
+
+export const NodeButton = (props: NodeProps) =>
+  NodeAnchorComponent(props, 'button');

package/templates/src/components/compositor/nodes/tagElements/NodeButton_eraser.tsx

@@ -0,0 +1,26 @@
+import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
+import { getCtx } from '@/stores/nodes';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { RenderChildren } from '../RenderChildren';
+import type { NodeProps } from '@/types/nodeProps';
+
+export const NodeButtonEraser = (props: NodeProps) => {
+  return (
+    <button
+      className={` ${getCtx(props).getNodeClasses(props.nodeId, viewportKeyStore.get().value)} eraser-child group relative transition-all before:pointer-events-none before:absolute before:inset-0 before:opacity-50 before:outline-dashed before:outline-4 before:outline-red-700 hover:before:bg-red-600/50 hover:before:opacity-100 focus:before:bg-red-600/50 focus:before:opacity-100`}
+      title="Delete Link"
+      onClick={(e) => {
+        getCtx(props).setClickedNodeId(props.nodeId);
+        e.stopPropagation();
+      }}
+    >
+      <div className="absolute right-2 top-2 rounded-full bg-red-700 p-0.5">
+        <TrashIcon className="h-5 w-5 text-white" />
+      </div>
+      <RenderChildren
+        children={getCtx(props).getChildNodeIDs(props.nodeId)}
+        nodeProps={props}
+      />
+    </button>
+  );
+};

package/templates/src/components/compositor/nodes/tagElements/NodeImg.tsx

@@ -0,0 +1,28 @@
+import { getCtx } from '@/stores/nodes';
+import { viewportKeyStore } from '@/stores/storykeep';
+import type { FlatNode } from '@/types/compositorTypes';
+import type { NodeProps } from '@/types/nodeProps';
+
+export const NodeImg = (props: NodeProps) => {
+  const node = getCtx(props).allNodes.get().get(props.nodeId) as FlatNode;
+
+  return (
+    <img
+      src={node.base64Data || node.src}
+      {...(node.srcSet ? { srcSet: node.srcSet } : {})}
+      className={getCtx(props).getNodeClasses(
+        props.nodeId,
+        viewportKeyStore.get().value
+      )}
+      alt={node.alt}
+      onClick={(e) => {
+        getCtx(props).setClickedNodeId(props.nodeId);
+        e.stopPropagation();
+      }}
+      onDoubleClick={(e) => {
+        getCtx(props).setClickedNodeId(props.nodeId, true);
+        e.stopPropagation();
+      }}
+    />
+  );
+};

package/templates/src/components/compositor/nodes/tagElements/NodeText.tsx

@@ -0,0 +1,18 @@
+import { getCtx } from '@/stores/nodes';
+import type { FlatNode } from '@/types/compositorTypes';
+import type { NodeProps } from '@/types/nodeProps';
+
+export const NodeText = (props: NodeProps) => {
+  const node = getCtx(props).allNodes.get().get(props.nodeId) as FlatNode;
+  const parentNode = node.parentId
+    ? (getCtx(props).allNodes.get().get(node.parentId) as FlatNode)
+    : null;
+  const isLink = parentNode && [`a`, `button`].includes(parentNode.tagName);
+  if (!node) return <>ERROR MISSING NODE</>;
+
+  // Only add a space if we're not empty and don't end with a space
+  const text = node.copy || '';
+  const needsSpace = text && !text.endsWith(' ') && !isLink;
+
+  return <>{text.trim() === '' ? '\u00A0' : text + (needsSpace ? ' ' : '')}</>;
+};

package/templates/src/components/compositor/nodes/tagElements/TabIndicator.tsx

@@ -0,0 +1,51 @@
+import type { MouseEvent, KeyboardEvent } from 'react';
+
+interface TabIndicatorProps {
+  onTab: () => void;
+  parentNodeId?: string;
+}
+
+export default function TabIndicator({
+  onTab,
+  parentNodeId,
+}: TabIndicatorProps) {
+  const handleClick = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onTab();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      e.stopPropagation();
+      onTab();
+    }
+  };
+
+  return (
+    <div
+      className="animate-fadeIn mt-1.5 flex cursor-pointer items-center border-t border-dashed border-cyan-500 py-1 text-sm hover:bg-cyan-50/20"
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      role="button"
+      aria-label="Tab for a new paragraph"
+      data-tab-indicator="true"
+      data-parent-node={parentNodeId}
+    >
+      <svg
+        className="mx-1 h-4 w-4 text-cyan-500"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fillRule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
+          clipRule="evenodd"
+        />
+      </svg>
+      Tab for a new paragraph
+    </div>
+  );
+}

package/templates/src/components/compositor/preview/FeaturedContentPreview.tsx

@@ -0,0 +1,128 @@
+import type { ReactNode } from 'react';
+
+// Define the Story interface for type safety
+interface Story {
+  id: string;
+  title: string;
+  description: string;
+  slug: string;
+  changed: string;
+}
+
+// Fake data for the featured story
+const fakeFeaturedStory: Story = {
+  id: 'featured-1',
+  title: 'Sample Featured Story',
+  description: 'This is a sample description for the featured story.',
+  slug: 'sample-featured',
+  changed: '2023-01-01T00:00:00Z',
+};
+
+// Fake data for included stories
+const fakeIncludedStories: Story[] = [
+  {
+    id: 'story-1',
+    title: 'Sample Story 1',
+    description: 'Description for sample story 1.',
+    slug: 'sample-story-1',
+    changed: '2023-01-02T00:00:00Z',
+  },
+  {
+    id: 'story-2',
+    title: 'Sample Story 2',
+    description: 'Description for sample story 2.',
+    slug: 'sample-story-2',
+    changed: '2023-01-03T00:00:00Z',
+  },
+  {
+    id: 'story-3',
+    title: 'Sample Story 3',
+    description: 'Description for sample story 3.',
+    slug: 'sample-story-3',
+    changed: '2023-01-04T00:00:00Z',
+  },
+  {
+    id: 'story-4',
+    title: 'Sample Story 4',
+    description: 'Description for sample story 4.',
+    slug: 'sample-story-4',
+    changed: '2023-01-05T00:00:00Z',
+  },
+  {
+    id: 'story-5',
+    title: 'Sample Story 5',
+    description: 'Description for sample story 5.',
+    slug: 'sample-story-5',
+    changed: '2023-01-06T00:00:00Z',
+  },
+];
+
+// Utility function to format dates
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(date);
+};
+
+// Component definition
+const FeaturedContentPreview = (): ReactNode => {
+  return (
+    <div className="flex flex-col gap-4 py-12 md:flex-row">
+      {/* Featured Story Section */}
+      <div className="p-4 md:w-3/5">
+        <div className="space-y-6 p-2">
+          {/* Placeholder for featured image */}
+          <div
+            style={{
+              width: '100%',
+              height: '300px',
+              backgroundColor: '#e0e0e0',
+            }}
+            className="rounded-lg"
+          />
+          <h2 className="text-2xl font-bold text-black">
+            {fakeFeaturedStory.title}
+          </h2>
+          <p className="text-myblack text-base">
+            {fakeFeaturedStory.description}
+          </p>
+          <p className="text-mydarkgrey text-sm">
+            {formatDate(fakeFeaturedStory.changed)}
+          </p>
+        </div>
+      </div>
+      {/* Included Stories Section */}
+      <div className="border-t-2 border-slate-100 p-4 md:w-2/5 md:border-l-2 md:border-t-0">
+        <div className="space-y-4">
+          {fakeIncludedStories.map((story) => (
+            <div key={story.id} className="flex items-start space-x-4 p-1">
+              {/* Placeholder for story image */}
+              <div
+                style={{
+                  width: '100px',
+                  height: '100px',
+                  backgroundColor: '#d0d0d0',
+                }}
+                className="rounded-md"
+              />
+              <div className="flex-1">
+                <h3 className="text-lg font-bold text-black">{story.title}</h3>
+                <p className="text-myblack line-clamp-2 text-sm">
+                  {story.description}
+                </p>
+                <p className="text-mydarkgrey mt-1 text-xs">
+                  {formatDate(story.changed)}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeaturedContentPreview;