Port code cell to components (#329)

* feat: add @srcbook/cells package with initial title cell

* feat: try an idea to get the tailwind classnames in @srcbook/cells to be generated

* fix: remove old code

* fix: remove missed mts reference

* fix: remove another missed mts reference

* fix: generate @srcbook/cells tailwind import path in a better way

* fix: ensure that @srcbook/shared is a dependency of @srcbook/cells

* fix: fix another missed mts file extension

* fix: update lint specific tsconfig in cells package to work properly

* refactor: rename @srcbook/cells to @srcbook/components

* feat: add initial @srcbook/ui package

* feat: port @srcbook/web to use @srcbook/ui for all ui components

* feat: add @srcbook/ui as a dependency to @srcbook/cells

* feat: remove ui package, and move all this stuff to the components package

* refactor: update all ui component imports in @srcbook/web to point to @srcbook/components

* feat: move markdown cell into @srcbook/components

* fix: remove @/ prefix support from @srcbook/components

This was not being stripped in the compiled output and was therefore
trying to be reinterpreted when building @srcbook/web

* fix: remove now unused depdencies from @srcbook/web

These are now in @srcbook/components instead

* feat: move over dependencies required for code editor to @srcbook/components

* feat: move over part of the depdencies required by the code editor

* fix: remove @srcbook/cells from tailwind config

* refactor: move keyboard-shortcut to @srcbook/components

* feat: add onUpdateFileName prop to CodeCell component

* fix: update all imports in packages/web to point to the useCell in the components package

* fix: update CodeCell import to point to the version of the package in @srcbook/components

* feat: add onGetDefinitionContents prop to <CodeCell ... /> in routes session

* feat: change the abstraction boundary of the CodeCell so that what is in @srcbook/components is as presentational as possible

* feat: finish relocating code editor to @srcbook/components

* feat: update @srcbook/components to contain the cell context and get data from it

* feat: move some types from @srcbook/web to @srcbook/components

* feat: re-add useCells into @srcbook/components and to CodeCell

* feat: move go to definition popup into ControlledCodeCell

* fix: run npm run format

* feat: fix all remaining type errors

* fix: remove dead code

* fix: remove dead code

* fix: re-add linter exception

* fix: add back in linter exception

* fix: fix all linter errors

packages/components/package.json

@@ -12,12 +12,49 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^2.5.2",
-    "@srcbook/shared": "workspace:^"
+    "@codemirror/autocomplete": "^6.18.1",
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-markdown": "^6.2.5",
+    "@codemirror/lint": "^6.8.1",
+    "@codemirror/merge": "^6.7.0",
+    "@codemirror/state": "^6.4.1",
+    "@lezer/highlight": "^1.2.1",
+    "@lezer/javascript": "^1.4.17",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "@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:",
+    "marked-react": "^2.0.0",
+    "mermaid": "^11.2.0",
+    "react-resizable-panels": "^2.1.2"
   },
   "peerDependencies": {
+    "@codemirror/autocomplete": "*",
+    "@types/react": "*",
+    "@uiw/react-codemirror": "*",
+    "clsx": "*",
+    "codemirror": "*",
+    "lucide-react": "*",
     "react": "*",
-    "@types/react": "*"
+    "react-router-dom": "*",
+    "react-hotkeys-hook": "*",
+    "react-textarea-autosize": "*",
+    "sonner": "*",
+    "tailwind-merge": "*",
+    "use-debounce": "*"
   }
 }

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

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
+
+export default function AiGenerateTipsDialog({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="w-[640px] max-w-[640px]">
+        <DialogHeader>
+          <DialogTitle>Prompt tips</DialogTitle>
+          <div className="text-sm">
+            <p>Here are a few tips to get the AI to work well for you.</p>
+            <ul className="list-disc list-inside py-4 leading-5">
+              <li>The AI knows already knows about all of the contents of this srcbook.</li>
+              <li>It also knows what cell you're updating.</li>
+              <li>You can ask the code to add or improve comments or jsdoc.</li>
+              <li>You can ask the AI to refactor or rewrite the whole thing.</li>
+              <li>
+                Try asking the AI to refactor, improve or modularize your code, simply by asking for
+                it.
+              </li>
+            </ul>
+          </div>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -1,11 +1,10 @@
 import { useState } from 'react';
-import { useSettings } from '@/components/use-settings';
 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 '@/components/ui/underline-flat-tabs';
-import { useCells } from '@/components/use-cell';
-import { OutputType, StdoutOutputType, StderrOutputType, CellModeType } from '@/types';
+import { cn } from '../lib/utils';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/underline-flat-tabs';
+import { useCells } from './use-cell';
+import { OutputType, StdoutOutputType, StderrOutputType, CellModeType } from '../types';
 import { Button } from './ui/button';
 
 type Props = {
@@ -16,6 +15,7 @@ type Props = {
   cellMode: CellModeType;
   setFullscreen: (fullscreen: boolean) => void;
   fullscreen: boolean;
+  aiEnabled: boolean;
 };
 
 export function CellOutput(props: Props) {
@@ -155,6 +155,7 @@ export function CellOutput(props: Props) {
                   diagnostics={diagnostics}
                   fixDiagnostics={props.fixDiagnostics}
                   cellMode={props.cellMode}
+                  aiEnabled={props.aiEnabled}
                 />
               </TabsContent>
             )}
@@ -164,6 +165,7 @@ export function CellOutput(props: Props) {
                   suggestions={suggestions}
                   fixSuggestions={props.fixDiagnostics} // fixDiagnostics works for both diagnostics and suggestions
                   cellMode={props.cellMode}
+                  aiEnabled={props.aiEnabled}
                 />
               </TabsContent>
             )}
@@ -206,12 +208,13 @@ function TsServerDiagnostics({
   diagnostics,
   fixDiagnostics,
   cellMode,
+  aiEnabled,
 }: {
   diagnostics: TsServerDiagnosticType[];
   fixDiagnostics: (diagnostics: string) => void;
   cellMode: CellModeType;
+  aiEnabled: boolean;
 }) {
-  const { aiEnabled } = useSettings();
   const formattedDiagnostics = diagnostics.map(formatDiagnostic).join('\n');
   return diagnostics.length === 0 ? (
     <div className="italic text-center text-muted-foreground">No problems</div>
@@ -237,12 +240,13 @@ function TsServerSuggestions({
   suggestions,
   fixSuggestions,
   cellMode,
+  aiEnabled,
 }: {
   suggestions: TsServerDiagnosticType[];
   fixSuggestions: (suggestions: string) => void;
   cellMode: CellModeType;
+  aiEnabled: boolean;
 }) {
-  const { aiEnabled } = useSettings();
   const formattedSuggestions = suggestions.map(formatDiagnostic).join('\n');
   return suggestions.length === 0 ? (
     <div className="italic text-center text-muted-foreground">No warnings or suggestions</div>