diff --git a/apps/web/app/(canvas)/canvas/[id]/page.tsx b/apps/web/app/(canvas)/canvas/[id]/page.tsx new file mode 100644 index 00000000..e58ab35e --- /dev/null +++ b/apps/web/app/(canvas)/canvas/[id]/page.tsx @@ -0,0 +1,125 @@ +"use client"; + +import { Canvas } from "@repo/ui/components/canvas/components/canvas"; +import React, { useState } from "react"; +import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; +import { SettingsIcon, DragIcon } from "@repo/ui/icons"; +import DraggableComponentsContainer from "@repo/ui/components/canvas/components/draggableComponent"; +import { AutocompleteIcon, blockIcon } from "@repo/ui/icons"; +import Image from "next/image"; +import { Switch } from "@repo/ui/shadcn/switch"; +import { Label } from "@repo/ui/shadcn/label"; + +function page() { + const [fullScreen, setFullScreen] = useState(false); + const [visible, setVisible] = useState(true); + + return ( +
+
+ { + l[0]! < 20 ? setVisible(false) : setVisible(true); + }} + className={` ${fullScreen ? "w-[calc(100vw-2rem)]" : "w-screen"} transition-all`} + direction="horizontal" + > + { + setTimeout(() => setFullScreen(false), 50); + }} + onCollapse={() => { + setTimeout(() => setFullScreen(true), 50); + }} + defaultSize={30} + collapsible={true} + > +
+
+ Change Filters + setting-icon +
+ {visible ? ( + + ) : ( +

+ Need more space to show! +

+ )} +
+ + +
+ drag-icon +
+ + +
+ +
+ + +
+
+ ); +} + +function SidePanel() { + const [value, setValue] = useState(""); + const [dragAsText, setDragAsText] = useState(false); + return ( + <> +
+ { + setValue(e.target.value); + }} + value={value} + // rows={1} + className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52" + /> +
+
+ setDragAsText(e)} + id="drag-text-mode" + /> + +
+ + + ); +} + +export default page; + +const content = [ + { + content: + "Regional growth patterns diverge, with strong performance in the United States and several emerging markets, contrasted by weaker prospects in many advanced economies, particularly in Europe (World Economic Forum) (OECD). The rapid adoption of artificial intelligence (AI) is expected to drive productivity growth, especially in advanced economies, potentially mitigating labor shortages and boosting income levels in emerging markets (World Economic Forum) (OECD). However, ongoing geopolitical tensions and economic fragmentation are likely to maintain a level of uncertainty and volatility in the global economy (World Economic Forum.", + icon: AutocompleteIcon, + iconAlt: "Autocomplete", + extraInfo: + "Page Url: https://chatgpt.com/c/762cd44e-1752-495b-967a-aa3c23c6024a", + }, + { + content: + "As of mid-2024, the global economy is experiencing modest growth with significant regional disparities. Global GDP growth is projected to be around 3.1% in 2024, rising slightly to 3.2% in 2025. This performance, although below the pre-pandemic average, reflects resilience despite various economic pressures, including tight monetary conditions and geopolitical tensions (IMF)(OECD) Inflation is moderating faster than expected, with global headline inflation projected to fall to 5.8% in 2024 and 4.4% in 2025, contributing to improving real incomes and positive trade growth (IMF) (OECD)", + icon: blockIcon, + iconAlt: "Autocomplete", + extraInfo: + "Page Url: https://www.cnbc.com/2024/05/23/nvidia-keeps-hitting-records-can-investors-still-buy-the-stock.html?&qsearchterm=nvidia", + }, +]; diff --git a/apps/web/app/(canvas)/canvas/page.tsx b/apps/web/app/(canvas)/canvas/page.tsx index 533ed33c..3652ef04 100644 --- a/apps/web/app/(canvas)/canvas/page.tsx +++ b/apps/web/app/(canvas)/canvas/page.tsx @@ -1,125 +1,9 @@ -"use client"; - -import { Canvas } from "../canvas"; -import React, { useState } from "react"; -import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; -import { SettingsIcon, DragIcon } from "@repo/ui/icons"; -import DraggableComponentsContainer from "@repo/ui/components/canvas/draggableComponent"; -import { AutocompleteIcon, blockIcon } from "@repo/ui/icons"; -import Image from "next/image"; -import { Switch } from "@repo/ui/shadcn/switch"; -import { Label } from "@repo/ui/shadcn/label"; +import React from 'react' function page() { - const [fullScreen, setFullScreen] = useState(false); - const [visible, setVisible] = useState(true); - return ( -
-
- { - l[0]! < 20 ? setVisible(false) : setVisible(true); - }} - className={` ${fullScreen ? "w-[calc(100vw-2rem)]" : "w-screen"} transition-all`} - direction="horizontal" - > - { - setTimeout(() => setFullScreen(false), 50); - }} - onCollapse={() => { - setTimeout(() => setFullScreen(true), 50); - }} - defaultSize={30} - collapsible={true} - > -
-
- Change Filters - setting-icon -
- {visible ? ( - - ) : ( -

- Need more space to show! -

- )} -
- - -
- drag-icon -
- - -
- -
- - -
-
- ); +
page
+ ) } -function SidePanel() { - const [value, setValue] = useState(""); - const [dragAsText, setDragAsText] = useState(false); - return ( - <> -
- { - setValue(e.target.value); - }} - value={value} - // rows={1} - className="w-full resize-none rounded-xl bg-[#151515] px-3 py-4 text-xl text-[#989EA4] outline-none focus:outline-none sm:max-h-52" - /> -
-
- setDragAsText(e)} - id="drag-text-mode" - /> - -
- - - ); -} - -export default page; - -const content = [ - { - content: - "Regional growth patterns diverge, with strong performance in the United States and several emerging markets, contrasted by weaker prospects in many advanced economies, particularly in Europe (World Economic Forum) (OECD). The rapid adoption of artificial intelligence (AI) is expected to drive productivity growth, especially in advanced economies, potentially mitigating labor shortages and boosting income levels in emerging markets (World Economic Forum) (OECD). However, ongoing geopolitical tensions and economic fragmentation are likely to maintain a level of uncertainty and volatility in the global economy (World Economic Forum.", - icon: AutocompleteIcon, - iconAlt: "Autocomplete", - extraInfo: - "Page Url: https://chatgpt.com/c/762cd44e-1752-495b-967a-aa3c23c6024a", - }, - { - content: - "As of mid-2024, the global economy is experiencing modest growth with significant regional disparities. Global GDP growth is projected to be around 3.1% in 2024, rising slightly to 3.2% in 2025. This performance, although below the pre-pandemic average, reflects resilience despite various economic pressures, including tight monetary conditions and geopolitical tensions (IMF)(OECD) Inflation is moderating faster than expected, with global headline inflation projected to fall to 5.8% in 2024 and 4.4% in 2025, contributing to improving real incomes and positive trade growth (IMF) (OECD)", - icon: blockIcon, - iconAlt: "Autocomplete", - extraInfo: - "Page Url: https://www.cnbc.com/2024/05/23/nvidia-keeps-hitting-records-can-investors-still-buy-the-stock.html?&qsearchterm=nvidia", - }, -]; +export default page \ No newline at end of file diff --git a/apps/web/app/(canvas)/lib/context.tsx b/apps/web/app/(canvas)/lib/context.tsx deleted file mode 100644 index 36a106cf..00000000 --- a/apps/web/app/(canvas)/lib/context.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createContext } from 'react'; - -export interface DragContextType { - isDraggingOver: boolean; - setIsDraggingOver: React.Dispatch>; -} - - -const DragContext = createContext(undefined); - -export default DragContext; \ No newline at end of file diff --git a/apps/web/app/(canvas)/canvas.tsx b/packages/ui/components/canvas/components/canvas.tsx similarity index 90% rename from apps/web/app/(canvas)/canvas.tsx rename to packages/ui/components/canvas/components/canvas.tsx index aaf89a06..b76a3feb 100644 --- a/apps/web/app/(canvas)/canvas.tsx +++ b/packages/ui/components/canvas/components/canvas.tsx @@ -1,16 +1,16 @@ -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import { Editor, Tldraw, setUserPreferences, TLStoreWithStatus } from "tldraw"; -import { createAssetFromUrl } from "./lib/createAssetUrl"; +import { createAssetFromUrl } from "../lib/createAssetUrl"; import "tldraw/tldraw.css"; import { components } from "./enabledComp"; import { twitterCardUtil } from "./twitterCard"; import { textCardUtil } from "./textCard"; -import createEmbedsFromUrl from "./lib/createEmbeds"; -import { loadRemoteSnapshot } from "./lib/loadSnap"; +import createEmbedsFromUrl from "../lib/createEmbeds"; +import { loadRemoteSnapshot } from "../lib/loadSnap"; import { SaveStatus } from "./savesnap"; import { getAssetUrls } from "@tldraw/assets/selfHosted"; import { memo } from "react"; -import DragContext from "./lib/context"; +import DragContext from "../lib/context"; import DropZone from "./dropComponent"; import "./canvas.css"; diff --git a/packages/ui/components/canvas/draggableComponent.tsx b/packages/ui/components/canvas/components/draggableComponent.tsx similarity index 100% rename from packages/ui/components/canvas/draggableComponent.tsx rename to packages/ui/components/canvas/components/draggableComponent.tsx diff --git a/apps/web/app/(canvas)/dropComponent.tsx b/packages/ui/components/canvas/components/dropComponent.tsx similarity index 92% rename from apps/web/app/(canvas)/dropComponent.tsx rename to packages/ui/components/canvas/components/dropComponent.tsx index a14bd1f3..0374f367 100644 --- a/apps/web/app/(canvas)/dropComponent.tsx +++ b/packages/ui/components/canvas/components/dropComponent.tsx @@ -1,7 +1,7 @@ import React, { useRef, useCallback, useEffect, useContext } from "react"; import { useEditor } from "tldraw"; -import DragContext, { DragContextType } from "./lib/context"; -import { handleExternalDroppedContent } from "./lib/createEmbeds"; +import DragContext, { DragContextType, useDragContext } from "../lib/context"; +import { handleExternalDroppedContent } from "../lib/createEmbeds"; const stripHtmlTags = (html: string): string => { const div = document.createElement("div"); @@ -33,17 +33,9 @@ function formatTextToRatio(text: string) { return lines.join("\n"); } -const useDrag = (): DragContextType => { - const context = useContext(DragContext); - if (!context) { - throw new Error("useCounter must be used within a CounterProvider"); - } - return context; -}; - function DropZone() { const dropRef = useRef(null); - const { isDraggingOver, setIsDraggingOver } = useDrag(); + const { isDraggingOver, setIsDraggingOver } = useDragContext(); const editor = useEditor(); diff --git a/apps/web/app/(canvas)/enabledComp.tsx b/packages/ui/components/canvas/components/enabledComp copy.tsx similarity index 100% rename from apps/web/app/(canvas)/enabledComp.tsx rename to packages/ui/components/canvas/components/enabledComp copy.tsx diff --git a/packages/ui/components/canvas/components/enabledComp.tsx b/packages/ui/components/canvas/components/enabledComp.tsx new file mode 100644 index 00000000..85811b82 --- /dev/null +++ b/packages/ui/components/canvas/components/enabledComp.tsx @@ -0,0 +1,22 @@ +import { TLUiComponents } from "tldraw"; + +export const components: Partial = { + ActionsMenu: null, + MainMenu: null, + QuickActions: null, + TopPanel: null, + DebugPanel: null, + DebugMenu: null, + PageMenu: null, + // Minimap: null, + // ContextMenu: null, + // HelpMenu: null, + // ZoomMenu: null, + // StylePanel: null, + // NavigationPanel: null, + // Toolbar: null, + // KeyboardShortcutsDialog: null, + // HelperButtons: null, + // SharePanel: null, + // MenuPanel: null, +}; \ No newline at end of file diff --git a/apps/web/app/(canvas)/savesnap.tsx b/packages/ui/components/canvas/components/savesnap.tsx similarity index 100% rename from apps/web/app/(canvas)/savesnap.tsx rename to packages/ui/components/canvas/components/savesnap.tsx diff --git a/apps/web/app/(canvas)/textCard.tsx b/packages/ui/components/canvas/components/textCard.tsx similarity index 100% rename from apps/web/app/(canvas)/textCard.tsx rename to packages/ui/components/canvas/components/textCard.tsx diff --git a/apps/web/app/(canvas)/twitterCard.tsx b/packages/ui/components/canvas/components/twitterCard.tsx similarity index 100% rename from apps/web/app/(canvas)/twitterCard.tsx rename to packages/ui/components/canvas/components/twitterCard.tsx diff --git a/packages/ui/components/canvas/lib/context.ts b/packages/ui/components/canvas/lib/context.ts new file mode 100644 index 00000000..4e6ecd1c --- /dev/null +++ b/packages/ui/components/canvas/lib/context.ts @@ -0,0 +1,18 @@ +import { createContext, useContext } from 'react'; + +export interface DragContextType { + isDraggingOver: boolean; + setIsDraggingOver: React.Dispatch>; +} + +const DragContext = createContext(undefined); + +export const useDragContext = () => { + const context = useContext(DragContext); + if (context === undefined) { + throw new Error('useAppContext must be used within an AppProvider'); + } + return context; +}; + +export default DragContext; \ No newline at end of file diff --git a/apps/web/app/(canvas)/lib/createAssetUrl.ts b/packages/ui/components/canvas/lib/createAssetUrl.ts similarity index 100% rename from apps/web/app/(canvas)/lib/createAssetUrl.ts rename to packages/ui/components/canvas/lib/createAssetUrl.ts diff --git a/apps/web/app/(canvas)/lib/createEmbeds.ts b/packages/ui/components/canvas/lib/createEmbeds.ts similarity index 100% rename from apps/web/app/(canvas)/lib/createEmbeds.ts rename to packages/ui/components/canvas/lib/createEmbeds.ts diff --git a/apps/web/app/(canvas)/lib/loadSnap.ts b/packages/ui/components/canvas/lib/loadSnap.ts similarity index 100% rename from apps/web/app/(canvas)/lib/loadSnap.ts rename to packages/ui/components/canvas/lib/loadSnap.ts