Skip to content

Commit 6235e52

Browse files
1egoman1egoman
authored
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
1 parent 1a80ba8 commit 6235e52

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+1411
-1026
lines changed

‎packages/components/index.tsx

-2
This file was deleted.

‎packages/components/package.json

+41-4
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,49 @@
1212
"prepublishOnly": "npm run build"
1313
},
1414
"dependencies": {
15-
"clsx": "^2.1.1",
16-
"tailwind-merge": "^2.5.2",
17-
"@srcbook/shared": "workspace:^"
15+
"@codemirror/autocomplete": "^6.18.1",
16+
"@codemirror/lang-javascript": "^6.2.2",
17+
"@codemirror/lang-markdown": "^6.2.5",
18+
"@codemirror/lint": "^6.8.1",
19+
"@codemirror/merge": "^6.7.0",
20+
"@codemirror/state": "^6.4.1",
21+
"@lezer/highlight": "^1.2.1",
22+
"@lezer/javascript": "^1.4.17",
23+
"@radix-ui/react-collapsible": "^1.1.0",
24+
"@radix-ui/react-dialog": "^1.1.1",
25+
"@radix-ui/react-dropdown-menu": "^2.1.1",
26+
"@radix-ui/react-icons": "^1.3.0",
27+
"@radix-ui/react-navigation-menu": "^1.2.0",
28+
"@radix-ui/react-popover": "^1.1.1",
29+
"@radix-ui/react-select": "^2.1.1",
30+
"@radix-ui/react-slot": "^1.1.0",
31+
"@radix-ui/react-switch": "^1.1.0",
32+
"@radix-ui/react-tabs": "^1.1.0",
33+
"@radix-ui/react-tooltip": "^1.1.2",
34+
"@srcbook/shared": "workspace:^",
35+
"@uiw/codemirror-themes": "^4.23.2",
36+
"@uiw/react-codemirror": "^4.23.2",
37+
"@uiw/react-codemirror": "^4.23.2",
38+
"class-variance-authority": "^0.7.0",
39+
"cmdk": "^1.0.0",
40+
"marked": "catalog:",
41+
"marked-react": "^2.0.0",
42+
"mermaid": "^11.2.0",
43+
"react-resizable-panels": "^2.1.2"
1844
},
1945
"peerDependencies": {
46+
"@codemirror/autocomplete": "*",
47+
"@types/react": "*",
48+
"@uiw/react-codemirror": "*",
49+
"clsx": "*",
50+
"codemirror": "*",
51+
"lucide-react": "*",
2052
"react": "*",
21-
"@types/react": "*"
53+
"react-router-dom": "*",
54+
"react-hotkeys-hook": "*",
55+
"react-textarea-autosize": "*",
56+
"sonner": "*",
57+
"tailwind-merge": "*",
58+
"use-debounce": "*"
2259
}
2360
}

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

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { useState } from 'react';
2+
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
3+
4+
export default function AiGenerateTipsDialog({ children }: { children: React.ReactNode }) {
5+
const [open, setOpen] = useState(false);
6+
return (
7+
<Dialog open={open} onOpenChange={setOpen}>
8+
<DialogTrigger asChild>{children}</DialogTrigger>
9+
<DialogContent className="w-[640px] max-w-[640px]">
10+
<DialogHeader>
11+
<DialogTitle>Prompt tips</DialogTitle>
12+
<div className="text-sm">
13+
<p>Here are a few tips to get the AI to work well for you.</p>
14+
<ul className="list-disc list-inside py-4 leading-5">
15+
<li>The AI knows already knows about all of the contents of this srcbook.</li>
16+
<li>It also knows what cell you're updating.</li>
17+
<li>You can ask the code to add or improve comments or jsdoc.</li>
18+
<li>You can ask the AI to refactor or rewrite the whole thing.</li>
19+
<li>
20+
Try asking the AI to refactor, improve or modularize your code, simply by asking for
21+
it.
22+
</li>
23+
</ul>
24+
</div>
25+
</DialogHeader>
26+
</DialogContent>
27+
</Dialog>
28+
);
29+
}

‎packages/web/src/components/cell-output.tsx renamed to ‎packages/components/src/components/cell-output.tsx

+11-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { useState } from 'react';
2-
import { useSettings } from '@/components/use-settings';
32
import { Ban, Maximize, Minimize, PanelBottomClose, PanelBottomOpen, Sparkles } from 'lucide-react';
43
import { CodeCellType, PackageJsonCellType, TsServerDiagnosticType } from '@srcbook/shared';
5-
import { cn } from '@/lib/utils';
6-
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/underline-flat-tabs';
7-
import { useCells } from '@/components/use-cell';
8-
import { OutputType, StdoutOutputType, StderrOutputType, CellModeType } from '@/types';
4+
import { cn } from '../lib/utils';
5+
import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/underline-flat-tabs';
6+
import { useCells } from './use-cell';
7+
import { OutputType, StdoutOutputType, StderrOutputType, CellModeType } from '../types';
98
import { Button } from './ui/button';
109

1110
type Props = {
@@ -16,6 +15,7 @@ type Props = {
1615
cellMode: CellModeType;
1716
setFullscreen: (fullscreen: boolean) => void;
1817
fullscreen: boolean;
18+
aiEnabled: boolean;
1919
};
2020

2121
export function CellOutput(props: Props) {
@@ -155,6 +155,7 @@ export function CellOutput(props: Props) {
155155
diagnostics={diagnostics}
156156
fixDiagnostics={props.fixDiagnostics}
157157
cellMode={props.cellMode}
158+
aiEnabled={props.aiEnabled}
158159
/>
159160
</TabsContent>
160161
)}
@@ -164,6 +165,7 @@ export function CellOutput(props: Props) {
164165
suggestions={suggestions}
165166
fixSuggestions={props.fixDiagnostics} // fixDiagnostics works for both diagnostics and suggestions
166167
cellMode={props.cellMode}
168+
aiEnabled={props.aiEnabled}
167169
/>
168170
</TabsContent>
169171
)}
@@ -206,12 +208,13 @@ function TsServerDiagnostics({
206208
diagnostics,
207209
fixDiagnostics,
208210
cellMode,
211+
aiEnabled,
209212
}: {
210213
diagnostics: TsServerDiagnosticType[];
211214
fixDiagnostics: (diagnostics: string) => void;
212215
cellMode: CellModeType;
216+
aiEnabled: boolean;
213217
}) {
214-
const { aiEnabled } = useSettings();
215218
const formattedDiagnostics = diagnostics.map(formatDiagnostic).join('\n');
216219
return diagnostics.length === 0 ? (
217220
<div className="italic text-center text-muted-foreground">No problems</div>
@@ -237,12 +240,13 @@ function TsServerSuggestions({
237240
suggestions,
238241
fixSuggestions,
239242
cellMode,
243+
aiEnabled,
240244
}: {
241245
suggestions: TsServerDiagnosticType[];
242246
fixSuggestions: (suggestions: string) => void;
243247
cellMode: CellModeType;
248+
aiEnabled: boolean;
244249
}) {
245-
const { aiEnabled } = useSettings();
246250
const formattedSuggestions = suggestions.map(formatDiagnostic).join('\n');
247251
return suggestions.length === 0 ? (
248252
<div className="italic text-center text-muted-foreground">No warnings or suggestions</div>

0 commit comments

Comments
 (0)