Initial commit

src/utils/tldraw/ui-overrides/components/regular/actionsMenu.tsx

@@ -0,0 +1,12 @@
+import {
+    DefaultActionsMenu,
+    DefaultActionsMenuContent,
+} from '@tldraw/tldraw';
+
+export const RegularActionsMenu = () => {
+    return (
+        <DefaultActionsMenu>
+            <DefaultActionsMenuContent />
+        </DefaultActionsMenu>
+    );
+};

src/utils/tldraw/ui-overrides/components/regular/contextMenu.tsx

@@ -0,0 +1,13 @@
+import {
+    DefaultContextMenu,
+    DefaultContextMenuContent,
+    TLUiContextMenuProps,
+} from '@tldraw/tldraw';
+
+export const RegularContextMenu = (props: TLUiContextMenuProps) => {
+    return (
+        <DefaultContextMenu {...props}>
+            <DefaultContextMenuContent />
+        </DefaultContextMenu>
+    );
+};

src/utils/tldraw/ui-overrides/components/regular/debugMenu.tsx

@@ -0,0 +1,13 @@
+import {
+    DefaultDebugMenu,
+    DefaultDebugMenuContent,
+    TLUiDebugMenuProps,
+} from '@tldraw/tldraw';
+
+export const RegularDebugMenu = (props: TLUiDebugMenuProps) => {
+    return (
+        <DefaultDebugMenu {...props}>
+            <DefaultDebugMenuContent />
+        </DefaultDebugMenu>
+    );
+};

src/utils/tldraw/ui-overrides/components/regular/helpMenu.tsx

@@ -0,0 +1,13 @@
+import {
+    DefaultHelpMenu,
+    DefaultHelpMenuContent,
+    TLUiHelpMenuProps,
+} from '@tldraw/tldraw';
+
+export const RegularHelpMenu = (props: TLUiHelpMenuProps) => {
+    return (
+        <DefaultHelpMenu {...props}>
+            <DefaultHelpMenuContent />
+        </DefaultHelpMenu>
+    );
+};

src/utils/tldraw/ui-overrides/components/regular/helperButton.tsx

@@ -0,0 +1,28 @@
+import {
+    DefaultHelperButtons,
+    DefaultHelperButtonsContent,
+    TLUiHelperButtonsProps,
+} from '@tldraw/tldraw';
+import { Box } from '@mui/material';
+
+export const RegularHelperButtons = (props: TLUiHelperButtonsProps) => {
+    return (
+        <Box
+            sx={{
+                position: 'fixed',
+                top: '80px',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                zIndex: 200,
+                pointerEvents: 'none',
+                '& > *': {
+                    pointerEvents: 'all'
+                }
+            }}
+        >
+            <DefaultHelperButtons {...props}>
+                <DefaultHelperButtonsContent />
+            </DefaultHelperButtons>
+        </Box>
+    );
+};

src/utils/tldraw/ui-overrides/components/regular/keyboardShortcutsDialog.tsx

@@ -0,0 +1,20 @@
+import {
+    DefaultKeyboardShortcutsDialog,
+    DefaultKeyboardShortcutsDialogContent,
+    TldrawUiMenuItem,
+    useTools,
+} from '@tldraw/tldraw';
+
+export const RegularKeyboardShortcutsDialog = () => {
+    const tools = useTools();
+    return (
+        <DefaultKeyboardShortcutsDialog onClose={() => {}}>
+            <div style={{ backgroundColor: 'thistle' }}>
+                <TldrawUiMenuItem {...tools['microphone']} />
+                <TldrawUiMenuItem {...tools['cc-slide']} />
+                <TldrawUiMenuItem {...tools['sticker']} />
+            </div>
+            <DefaultKeyboardShortcutsDialogContent />
+        </DefaultKeyboardShortcutsDialog>
+    );
+};

src/utils/tldraw/ui-overrides/components/regular/mainMenu.tsx

@@ -0,0 +1,13 @@
+import {
+    DefaultMainMenu,
+    DefaultMainMenuContent,
+    TLUiMainMenuProps,
+} from '@tldraw/tldraw';
+
+export const RegularMainMenu = (props: TLUiMainMenuProps) => {
+    return (
+        <DefaultMainMenu {...props}>
+            <DefaultMainMenuContent />
+        </DefaultMainMenu>
+    );
+};

src/utils/tldraw/ui-overrides/components/regular/navigationPanel.tsx

@@ -0,0 +1,9 @@
+import {
+    DefaultNavigationPanel,
+} from '@tldraw/tldraw';
+
+export const RegularNavigationPanel = () => {
+    return (
+        <DefaultNavigationPanel/>
+    )
+};

src/utils/tldraw/ui-overrides/components/regular/pageMenu.tsx

@@ -0,0 +1,9 @@
+import {
+    DefaultPageMenu,
+} from '@tldraw/tldraw';
+
+export const RegularPageMenu = () => {
+    return (
+        <DefaultPageMenu/>
+    )
+};

src/utils/tldraw/ui-overrides/components/regular/quickActions.tsx

@@ -0,0 +1,13 @@
+import {
+    DefaultQuickActions,
+    DefaultQuickActionsContent,
+    TLUiQuickActionsProps,
+} from '@tldraw/tldraw';
+
+export const RegularQuickActions = (props: TLUiQuickActionsProps) => {
+    return (
+        <DefaultQuickActions {...props}>
+            <DefaultQuickActionsContent />
+        </DefaultQuickActions>
+    );
+};

src/utils/tldraw/ui-overrides/components/regular/stylePanel.tsx

@@ -0,0 +1,14 @@
+import {
+    DefaultStylePanel,
+    DefaultStylePanelContent,
+    TLUiStylePanelProps,
+    useRelevantStyles
+} from '@tldraw/tldraw';
+
+export const RegularStylePanel = (props: TLUiStylePanelProps) => {
+    return (
+        <DefaultStylePanel {...props}>
+            <DefaultStylePanelContent styles={useRelevantStyles()} />
+        </DefaultStylePanel>
+    )
+};

src/utils/tldraw/ui-overrides/components/regular/toolbar.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import {
+    DefaultToolbar,
+    TldrawUiMenuItem,
+    DefaultToolbarContent
+} from '@tldraw/tldraw';
+import { StickerDropdown } from '../../StickerDropdown';
+
+export const RegularToolbar = () => {
+    const [isStickerSelected, setIsStickerSelected] = useState(false)
+    const handleStickerSelect = () => {
+        setIsStickerSelected(!isStickerSelected)
+    }
+
+    return (
+        <DefaultToolbar>
+            <div style={{ position: 'relative' }}>
+                <TldrawUiMenuItem
+                    id="sticker"
+                    label="Sticker"
+                    icon="sticker-icon"
+                    onSelect={handleStickerSelect}
+                    isSelected={isStickerSelected}
+                />
+                {isStickerSelected && <StickerDropdown />}
+            </div>
+            <DefaultToolbarContent />
+        </DefaultToolbar>
+    )
+};

src/utils/tldraw/ui-overrides/components/regular/zoomMenu.tsx

@@ -0,0 +1,13 @@
+import {
+    DefaultZoomMenu,
+    DefaultZoomMenuContent,
+    TLUiZoomMenuProps,
+} from '@tldraw/tldraw';
+
+export const RegularZoomMenu = (props: TLUiZoomMenuProps) => {
+    return (
+        <DefaultZoomMenu {...props}>
+            <DefaultZoomMenuContent />
+        </DefaultZoomMenu>
+    );
+};