make paths resolvable to node (#335)

Author: versecafe

packages/components/package.json

@@ -34,7 +34,6 @@
     "@srcbook/shared": "workspace:^",
     "@uiw/codemirror-themes": "^4.23.2",
     "@uiw/react-codemirror": "^4.23.2",
-    "@uiw/react-codemirror": "^4.23.2",
     "class-variance-authority": "^0.7.0",
     "cmdk": "^1.0.0",
     "marked": "catalog:",
@@ -50,8 +49,8 @@
     "codemirror": "*",
     "lucide-react": "*",
     "react": "*",
-    "react-router-dom": "*",
     "react-hotkeys-hook": "*",
+    "react-router-dom": "*",
     "react-textarea-autosize": "*",
     "sonner": "*",
     "tailwind-merge": "*",

packages/components/src/components/ai-generate-tips-dialog.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from './ui/dialog.js';
 
 export default function AiGenerateTipsDialog({ children }: { children: React.ReactNode }) {
   const [open, setOpen] = useState(false);

packages/components/src/components/cell-output.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { Ban, Maximize, Minimize, PanelBottomClose, PanelBottomOpen, Sparkles } from 'lucide-react';
 import { CodeCellType, PackageJsonCellType, TsServerDiagnosticType } from '@srcbook/shared';
-import { cn } from '../lib/utils';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/underline-flat-tabs';
-import { useCells } from './use-cell';
+import { cn } from '../lib/utils.js';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/underline-flat-tabs.js';
+import { useCells } from './use-cell.js';
 import { OutputType, StdoutOutputType, StderrOutputType, CellModeType } from '../types';
-import { Button } from './ui/button';
+import { Button } from './ui/button.js';
 
 type Props = {
   cell: CodeCellType | PackageJsonCellType;

packages/components/src/components/cells/code.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable jsx-a11y/tabindex-no-positive -- this should be fixed and reworked or minimize excessive positibe tabindex */
 
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Dialog, DialogContent } from '../ui/dialog';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
-import Shortcut from '../keyboard-shortcut';
+import { Dialog, DialogContent } from '../ui/dialog.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip.js';
+import Shortcut from '../keyboard-shortcut.js';
 import { useNavigate } from 'react-router-dom';
 import CodeMirror from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../ui/resizable';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../ui/resizable.js';
 import {
   Info,
   Play,
@@ -21,22 +21,22 @@ import {
   CopyIcon,
 } from 'lucide-react';
 import TextareaAutosize from 'react-textarea-autosize';
-import AiGenerateTipsDialog from '../ai-generate-tips-dialog';
+import AiGenerateTipsDialog from '../ai-generate-tips-dialog.js';
 import { CellType, CodeCellType, CodeCellUpdateAttrsType } from '@srcbook/shared';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 import { CellModeType, SessionType } from '../../types';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
+import { Button } from '../ui/button.js';
+import { Input } from '../ui/input.js';
 import DeleteCellWithConfirmation from '../delete-cell-dialog';
-import { CellOutput } from '../cell-output';
-import useTheme from '../use-theme';
+import { CellOutput } from '../cell-output.js';
+import useTheme from '../use-theme.js';
 import { useDebouncedCallback } from 'use-debounce';
 import { EditorView } from 'codemirror';
 import { EditorState, Extension } from '@codemirror/state';
 import { unifiedMergeView } from '@codemirror/merge';
 import { toast } from 'sonner';
-import { PrettierLogo } from '../logos';
-import { useCells } from '../use-cell';
+import { PrettierLogo } from '../logos.js';
+import { useCells } from '../use-cell.js';
 
 const DEBOUNCE_DELAY = 500;
 

packages/components/src/components/cells/markdown.tsx

@@ -6,10 +6,10 @@ import CodeMirror, { keymap, Prec, EditorView } from '@uiw/react-codemirror';
 import { markdown } from '@codemirror/lang-markdown';
 import { CircleAlert, Trash2, Pencil } from 'lucide-react';
 import { CellType, MarkdownCellType, MarkdownCellUpdateAttrsType } from '@srcbook/shared';
-import { cn } from '../../lib/utils';
-import { Button } from '../ui/button';
-import DeleteCellWithConfirmation from '../delete-cell-dialog';
-import useTheme from '../use-theme';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../ui/button.js';
+import DeleteCellWithConfirmation from '../delete-cell-dialog.js';
+import useTheme from '../use-theme.js';
 
 marked.use({ gfm: true });
 

packages/components/src/components/cells/title.tsx

@@ -1,5 +1,5 @@
 import { TitleCellType, TitleCellUpdateAttrsType } from '@srcbook/shared';
-import { EditableH1 } from '../ui/heading';
+import { EditableH1 } from '../ui/heading.js';
 
 type BaseProps = {
   cell: TitleCellType;

packages/components/src/components/delete-cell-dialog.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react';
-import { Button } from './ui/button';
+import { Button } from './ui/button.js';
 import {
   Dialog,
   DialogTrigger,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogDescription,
-} from './ui/dialog';
+} from './ui/dialog.js';
 
 export default function DeleteCellWithConfirmationModal({
   onDeleteCell,

packages/components/src/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 active:translate-y-0.5',

packages/components/src/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (

packages/components/src/components/ui/command.tsx

@@ -3,8 +3,8 @@ import { type DialogProps } from '@radix-ui/react-dialog';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { Command as CommandPrimitive } from 'cmdk';
 
-import { cn } from '../../lib/utils';
-import { Dialog, DialogContent } from './dialog';
+import { cn } from '../../lib/utils.js';
+import { Dialog, DialogContent } from './dialog.js';
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,