Skip to content

Commit

Permalink
formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronvg
aaronvg committed Jan 9, 2025
1 parent 761893c commit 7b2348d
Show file tree
Hide file tree
Showing 33 changed files with 387 additions and 397 deletions.
12 changes: 6 additions & 6 deletions typescript/fiddle-frontend/app/[project_id]/_components/GithubStars.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,16 @@ export const GithubStars = () => {
return (
<div>
<Link
className="flex flex-row gap-x-2 items-center p-1 text-sm font-light leading-6 group hover:text-foreground/80"
href="https://github.com/boundaryml/baml"
target="_blank"
className='flex flex-row gap-x-2 items-center p-1 text-sm font-light leading-6 group hover:text-foreground/80'
href='https://github.com/boundaryml/baml'
target='_blank'
>
<Image
src="/github-mark.svg"
className="opacity-60 invert hover:opacity-100 dark:invert-0 dark:fill-white"
src='/github-mark.svg'
className='opacity-60 invert hover:opacity-100 dark:invert-0 dark:fill-white'
width={18}
height={18}
alt="Github"
alt='Github'
/>
{/* <span className="hidden whitespace-nowrap text-primary-foreground/50 2xl:block">Star us on Github</span>
<Separator orientation="vertical" className=" w-[1px] h-[24px] hidden" />
Expand Down
71 changes: 37 additions & 34 deletions typescript/fiddle-frontend/app/[project_id]/_components/ProjectView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,13 @@ const ProjectViewImpl = ({ project }: { project: BAMLProject }) => {
console.log('Updating files due: project', project.id)
setUnsavedChanges(false)
setFiles(
project.files.reduce((acc, f) => {
acc[f.path] = f.content
return acc
}, {} as Record<string, string>),
project.files.reduce(
(acc, f) => {
acc[f.path] = f.content
return acc
},
{} as Record<string, string>,
),
)
}
}, [project.id])
Expand Down Expand Up @@ -69,19 +72,19 @@ const ProjectViewImpl = ({ project }: { project: BAMLProject }) => {

return (
// firefox wont apply the background color for some reason so we forcefully set it.
<div className="flex relative flex-row w-full h-full main-panel overflow-x-clip overflow-y-clip">
<div className='flex relative flex-row w-full h-full main-panel overflow-x-clip overflow-y-clip'>
<EventListener>
{isMobile && (
<div className="absolute bottom-0 left-0 right-0 font-semibold border-t-[1px] w-full h-[100px] z-50 text-center p-8">
<div className='absolute bottom-0 left-0 right-0 font-semibold border-t-[1px] w-full h-[100px] z-50 text-center p-8'>
Visit PromptFiddle on Desktop to get the best experience
</div>
)}
<ResizablePanelGroup className="w-full h-full overflow-clip" direction="horizontal">
<ResizablePanelGroup className='w-full h-full overflow-clip' direction='horizontal'>
{!isMobile && <ProjectSidebar />}

<ResizableHandle className="" />
<ResizableHandle className='' />
<ResizablePanel defaultSize={88}>
<div className="flex-col w-full h-full font-sans">
<div className='flex-col w-full h-full font-sans'>
<TopNavbar
project={project}
projectName={projectName}
Expand All @@ -94,33 +97,33 @@ const ProjectViewImpl = ({ project }: { project: BAMLProject }) => {
// the size of the topnavbar
height: 'calc(100% - 55px)',
}}
className="flex flex-row h-full overflow-clip"
className='flex flex-row h-full overflow-clip'
>
<ResizablePanelGroup className="min-h-[200px] w-full rounded-lg overflow-clip" direction="horizontal">
<ResizablePanelGroup className='min-h-[200px] w-full rounded-lg overflow-clip' direction='horizontal'>
<ResizablePanel defaultSize={50}>
<div className="flex flex-col py-1 pl-2 w-full text-xs whitespace-nowrap border-none items-left h-fit">
<div className='flex flex-col py-1 pl-2 w-full text-xs whitespace-nowrap border-none items-left h-fit'>
<Editable
text={description}
placeholder="Write a task name"
type="input"
placeholder='Write a task name'
type='input'
childRef={descriptionInputRef}
className="px-2 py-2 w-full text-sm font-normal text-left border-none text-foreground"
className='px-2 py-2 w-full text-sm font-normal text-left border-none text-foreground'
>
<textarea
className="w-[95%] ml-2 px-2 text-sm border-none"
className='w-[95%] ml-2 px-2 text-sm border-none'
ref={descriptionInputRef}
name="task"
placeholder="Write a description"
name='task'
placeholder='Write a description'
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</Editable>
</div>
<div className="flex pl-1 w-full h-full tour-editor dark:bg-muted/70">
<ScrollArea className="w-full h-full">
<div className='flex pl-1 w-full h-full tour-editor dark:bg-muted/70'>
<ScrollArea className='w-full h-full'>
{activeFileName && (
<CodeMirrorViewer
lang="baml"
lang='baml'
fileContent={{
code: files[activeFileName],
language: 'baml',
Expand All @@ -140,10 +143,10 @@ const ProjectViewImpl = ({ project }: { project: BAMLProject }) => {
</ScrollArea>
</div>
</ResizablePanel>
<ResizableHandle className="" />
<ResizableHandle className='' />
{!isMobile && (
<ResizablePanel defaultSize={50} className="tour-playground">
<div className="flex flex-row h-full">
<ResizablePanel defaultSize={50} className='tour-playground'>
<div className='flex flex-row h-full'>
<PlaygroundView />
</div>
</ResizablePanel>
Expand All @@ -160,20 +163,20 @@ const ProjectViewImpl = ({ project }: { project: BAMLProject }) => {

export const ProjectSidebar = () => {
return (
<ResizablePanel defaultSize={16} className=" h-full dark:bg-[#020309] bg-muted">
<div className="flex flex-row justify-center items-center pt-4 w-full">
<a href={'/'} className="flex flex-row items-center text-lg font-semibold text-center w-fit text-foreground">
<Image src="/baml-lamb-white.png" alt="Prompt Fiddle" width={40} height={40} />
<ResizablePanel defaultSize={16} className=' h-full dark:bg-[#020309] bg-muted'>
<div className='flex flex-row justify-center items-center pt-4 w-full'>
<a href={'/'} className='flex flex-row items-center text-lg font-semibold text-center w-fit text-foreground'>
<Image src='/baml-lamb-white.png' alt='Prompt Fiddle' width={40} height={40} />
Prompt Fiddle
</a>
</div>

<ResizablePanelGroup className="pb-4 h-full" direction="vertical">
<ResizablePanel defaultSize={100} className="h-full">
<div className="px-2 pt-4 w-full text-xs font-normal text-center uppercase text-muted-foreground">
<ResizablePanelGroup className='pb-4 h-full' direction='vertical'>
<ResizablePanel defaultSize={100} className='h-full'>
<div className='px-2 pt-4 w-full text-xs font-normal text-center uppercase text-muted-foreground'>
project files
</div>
<div className="flex flex-col pb-8 w-full h-full tour-file-view">
<div className='flex flex-col pb-8 w-full h-full tour-file-view'>
<FileViewer />
</div>
</ResizablePanel>
Expand All @@ -193,9 +196,9 @@ export const ProjectView = ({ project }: { project: BAMLProject }) => {
const PlaygroundView = () => {
return (
<>
<CustomErrorBoundary message="Error loading playground">
<CustomErrorBoundary message='Error loading playground'>
<Suspense fallback={<div>Loading...</div>}>
<div className="flex flex-col w-full h-full">
<div className='flex flex-col w-full h-full'>
<PromptPreview />
</div>

Expand Down
70 changes: 35 additions & 35 deletions typescript/fiddle-frontend/app/[project_id]/_components/TopNavbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const ShareButton = ({ project, projectName }: { project: BAMLProject; projectNa
return (
<Button
variant={'default'}
className="gap-x-2 py-1 h-full whitespace-nowrap bg-transparent text-secondary-foreground hover:bg-purple-600 w-fit"
className='gap-x-2 py-1 h-full whitespace-nowrap bg-transparent text-secondary-foreground hover:bg-purple-600 w-fit'
disabled={loading}
onClick={async () => {
setLoading(true)
Expand Down Expand Up @@ -89,64 +89,64 @@ export const TopNavbar = ({
unsavedChanges,
}: ProjectHeaderProps) => {
return (
<div className="flex flex-row items-center gap-x-12 border-b-[0px] min-h-[55px]">
<div className="flex flex-col items-center py-1 h-full whitespace-nowrap lg:pr-12 tour-title">
<Editable text={projectName} placeholder="Write a task name" type="input" childRef={projectNameInputRef}>
<div className='flex flex-row items-center gap-x-12 border-b-[0px] min-h-[55px]'>
<div className='flex flex-col items-center py-1 h-full whitespace-nowrap lg:pr-12 tour-title'>
<Editable text={projectName} placeholder='Write a task name' type='input' childRef={projectNameInputRef}>
<input
className="px-2 text-lg border-none text-foreground"
type="text"
className='px-2 text-lg border-none text-foreground'
type='text'
ref={projectNameInputRef}
name="task"
placeholder="Write a task name"
name='task'
placeholder='Write a task name'
value={projectName}
onChange={(e) => setProjectName(e.target.value)}
/>
</Editable>
</div>

<div className="flex flex-row gap-x-2 items-center">
<div className='flex flex-row gap-x-2 items-center'>
<ShareButton project={project} projectName={projectName} />
</div>

<div className="flex items-center justify-start h-full pt-0.5 ">
<Button asChild variant={'ghost'} className="gap-x-1 py-1 h-full hover:bg-purple-600">
<div className='flex items-center justify-start h-full pt-0.5 '>
<Button asChild variant={'ghost'} className='gap-x-1 py-1 h-full hover:bg-purple-600'>
<Link
href="https://boundaryml.com"
target="_blank"
className="text-sm hover:text-foreground text-foreground/60"
href='https://boundaryml.com'
target='_blank'
className='text-sm hover:text-foreground text-foreground/60'
>
What is BAML?
</Link>
</Button>
</div>

{project.id !== 'all-projects' && project.id !== null ? (
<div className="flex flex-col justify-center items-center h-full">
<div className='flex flex-col justify-center items-center h-full'>
<Link
href={`/all-projects`}
target="_blank"
className="flex flex-row gap-x-2 items-center px-2 py-1 text-sm text-white whitespace-pre-wrap bg-purple-500 rounded-sm dark:bg-purple-600 hover:bg-purple-300 dark:hover:bg-purple-700 h-fit"
target='_blank'
className='flex flex-row gap-x-2 items-center px-2 py-1 text-sm text-white whitespace-pre-wrap bg-purple-500 rounded-sm dark:bg-purple-600 hover:bg-purple-300 dark:hover:bg-purple-700 h-fit'
>
<Compass size={16} strokeWidth={2} />
<span className="whitespace-nowrap">Explore Examples</span>
<span className='whitespace-nowrap'>Explore Examples</span>
</Link>
</div>
) : null}

<div className="flex flex-col justify-center items-center h-full">
<div className='flex flex-col justify-center items-center h-full'>
<Link
href={`/new-project`}
target="_blank"
className="flex flex-row gap-x-2 items-center px-2 py-1 text-sm text-white whitespace-pre-wrap bg-purple-500 rounded-sm dark:bg-purple-600 hover:bg-purple-600 dark:hover:bg-purple-700 h-fit"
target='_blank'
className='flex flex-row gap-x-2 items-center px-2 py-1 text-sm text-white whitespace-pre-wrap bg-purple-500 rounded-sm dark:bg-purple-600 hover:bg-purple-600 dark:hover:bg-purple-700 h-fit'
>
<File size={16} strokeWidth={2} />
<span className="whitespace-nowrap">New project</span>
<span className='whitespace-nowrap'>New project</span>
</Link>
</div>

{unsavedChanges ? (
<div className="flex flex-row items-center whitespace-nowrap text-muted-foreground">
<Badge variant="outline" className="gap-x-2 font-light text-yellow-600 dark:text-yellow-500">
<div className='flex flex-row items-center whitespace-nowrap text-muted-foreground'>
<Badge variant='outline' className='gap-x-2 font-light text-yellow-600 dark:text-yellow-500'>
<AlertTriangleIcon size={14} />
<span>Unsaved changes</span>
</Badge>
Expand All @@ -155,11 +155,11 @@ export const TopNavbar = ({
<></>
)}

<div className="flex flex-row gap-x-8 justify-end items-center pr-4 w-full">
<div className="flex h-full">
<Link href="https://discord.gg/BTNBeXGuaS" className="pt-0 h-full w-fit">
<div className="flex flex-row gap-x-4 items-center text-sm">
<SiDiscord size={24} className="opacity-40 hover:opacity-100" />
<div className='flex flex-row gap-x-8 justify-end items-center pr-4 w-full'>
<div className='flex h-full'>
<Link href='https://discord.gg/BTNBeXGuaS' className='pt-0 h-full w-fit'>
<div className='flex flex-row gap-x-4 items-center text-sm'>
<SiDiscord size={24} className='opacity-40 hover:opacity-100' />
{/* <Image
src="/discord-icon.svg"
className="text-blue-600 fill-black hover:opacity-100"
Expand All @@ -170,17 +170,17 @@ export const TopNavbar = ({
</div>
</Link>
</div>
<div className="flex h-full">
<div className='flex h-full'>
<Link
href="https://docs.boundaryml.com/guide/installation-editors/vs-code-extension"
className="pt-0 h-full w-fit text-zinc-400 dark:text-zinc-300 dark:hover:text-zinc-50 hover:text-zinc-600"
href='https://docs.boundaryml.com/guide/installation-editors/vs-code-extension'
className='pt-0 h-full w-fit text-zinc-400 dark:text-zinc-300 dark:hover:text-zinc-50 hover:text-zinc-600'
>
<div className="flex flex-row gap-x-4 items-center text-xs grayscale 2xl:text-sm hover:grayscale-0">
<Image src="/vscode_logo.svg" width={18} height={18} alt="VSCode extension" />
<div className='flex flex-row gap-x-4 items-center text-xs grayscale 2xl:text-sm hover:grayscale-0'>
<Image src='/vscode_logo.svg' width={18} height={18} alt='VSCode extension' />
</div>
</Link>
</div>
<div className="flex h-full">
<div className='flex h-full'>
<GithubStars />
</div>
</div>
Expand Down
18 changes: 9 additions & 9 deletions typescript/fiddle-frontend/app/[project_id]/_components/Tree/FileViewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,39 +116,39 @@ const FileViewer = () => {
const [term, setTerm] = useState('')

const createFileFolder = (
<div className="flex flex-row gap-x-1 pt-3 pl-1 w-full">
<div className='flex flex-row gap-x-1 pt-3 pl-1 w-full'>
<button
onClick={async () => {
await treeRef?.current?.createInternal()
}}
title="New Folder..."
title='New Folder...'
>
<FolderPlus size={14} className="text-zinc-500 hover:text-zinc-200" />
<FolderPlus size={14} className='text-zinc-500 hover:text-zinc-200' />
</button>
<button
onClick={async () => {
const leaf = await treeRef?.current?.createLeaf()
}}
title="New File..."
title='New File...'
>
<FilePlus size={14} className="text-zinc-500 hover:text-zinc-200" />
<FilePlus size={14} className='text-zinc-500 hover:text-zinc-200' />
</button>
</div>
)

return (
<div className="flex flex-col pl-2 w-full h-full overflow-x-clip">
<div className="folderFileActions">{createFileFolder}</div>
<div className='flex flex-col pl-2 w-full h-full overflow-x-clip'>
<div className='folderFileActions'>{createFileFolder}</div>
{/* <input
type="text"
placeholder="Search..."
className="search-input"
value={term}
onChange={(e) => setTerm(e.target.value)}
/> */}
<div ref={ref} className="flex flex-col h-full">
<div ref={ref} className='flex flex-col h-full'>
<Tree
className="truncate"
className='truncate'
ref={treeRef}
openByDefault={false}
// initialOpenState={{ baml_src: true }}
Expand Down
Loading

0 comments on commit 7b2348d

Please sign in to comment.