mirror of
https://github.com/mountain-loop/yaak.git
synced 2026-03-24 02:11:10 +01:00
Better dir structure
This commit is contained in:
Gregory Schier
99
src-web/App.tsx
Normal file
99
src-web/App.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import { FormEvent, useState } from 'react';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import { invoke } from '@tauri-apps/api/tauri';
|
||||
import Editor from './components/Editor/Editor';
|
||||
import { Input } from './components/Input';
|
||||
import { Stacks } from './components/Stacks';
|
||||
import { Button } from './components/Button';
|
||||
import { Grid } from './components/Grid';
|
||||
import { DropdownMenuRadio } from './components/Dropdown';
|
||||
|
||||
interface Response {
|
||||
url: string;
|
||||
method: string;
|
||||
body: string;
|
||||
status: string;
|
||||
elapsed: number;
|
||||
elapsed2: number;
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [responseBody, setResponseBody] = useState<Response | null>(null);
|
||||
const [url, setUrl] = useState('https://go-server.schier.dev/debug');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [method, setMethod] = useState<string>('get');
|
||||
|
||||
async function sendRequest(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
const resp = (await invoke('send_request', { method, url })) as Response;
|
||||
if (resp.body.includes('<head>')) {
|
||||
resp.body = resp.body.replace(/<head>/gi, `<head><base href="${resp.url}"/>`);
|
||||
}
|
||||
setLoading(false);
|
||||
setResponseBody(resp);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<body className="bg-background" />
|
||||
</Helmet>
|
||||
<div className="w-full h-7 bg-gray-100" data-tauri-drag-region="" />
|
||||
<div className="p-12 h-full w-full overflow-auto">
|
||||
<Stacks as="form" className="mt-5 items-end" onSubmit={sendRequest}>
|
||||
<DropdownMenuRadio
|
||||
onValueChange={setMethod}
|
||||
value={method}
|
||||
items={[
|
||||
{ label: 'GET', value: 'get' },
|
||||
{ label: 'PUT', value: 'put' },
|
||||
{ label: 'POST', value: 'post' },
|
||||
]}
|
||||
>
|
||||
<Button className="mr-1" disabled={loading} color="secondary">
|
||||
{method.toUpperCase()}
|
||||
</Button>
|
||||
</DropdownMenuRadio>
|
||||
<Input
|
||||
hideLabel
|
||||
name="url"
|
||||
label="Enter URL"
|
||||
className="mr-1 w-[20rem]"
|
||||
onChange={(e) => setUrl(e.currentTarget.value)}
|
||||
value={url}
|
||||
placeholder="Enter a URL..."
|
||||
/>
|
||||
<Button className="mr-1" type="submit" disabled={loading}>
|
||||
{loading ? 'Sending...' : 'Send'}
|
||||
</Button>
|
||||
</Stacks>
|
||||
{responseBody !== null && (
|
||||
<>
|
||||
<div className="pt-6">
|
||||
{responseBody?.method.toUpperCase()}
|
||||
•
|
||||
{responseBody?.status}
|
||||
•
|
||||
{responseBody?.elapsed}ms •
|
||||
{responseBody?.elapsed2}ms
|
||||
</div>
|
||||
<Grid cols={2} rows={2} gap={1}>
|
||||
<Editor value={responseBody?.body} />
|
||||
<div className="iframe-wrapper">
|
||||
<iframe
|
||||
title="Response preview"
|
||||
srcDoc={responseBody.body}
|
||||
sandbox="allow-scripts allow-same-origin"
|
||||
className="h-full w-full rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</Grid>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
24
src-web/components/Button.tsx
Normal file
24
src-web/components/Button.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import classnames from 'classnames';
|
||||
import { ButtonHTMLAttributes, forwardRef } from 'react';
|
||||
|
||||
type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
|
||||
color?: 'primary' | 'secondary';
|
||||
};
|
||||
|
||||
export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
|
||||
{ className, color = 'primary', ...props }: Props,
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
className={classnames(
|
||||
className,
|
||||
'h-10 px-5 rounded-lg text-white',
|
||||
{ 'bg-blue-500': color === 'primary' },
|
||||
{ 'bg-violet-500': color === 'secondary' },
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
311
src-web/components/Dropdown.tsx
Normal file
311
src-web/components/Dropdown.tsx
Normal file
@@ -0,0 +1,311 @@
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import { DropdownMenuRadioGroup } from '@radix-ui/react-dropdown-menu';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
CheckIcon,
|
||||
ChevronRightIcon,
|
||||
DotFilledIcon,
|
||||
HamburgerMenuIcon,
|
||||
} from '@radix-ui/react-icons';
|
||||
import { forwardRef, HTMLAttributes, ReactNode, useState } from 'react';
|
||||
import { Button } from './Button';
|
||||
import classnames from 'classnames';
|
||||
import { HotKey } from './HotKey';
|
||||
|
||||
interface DropdownMenuRadioProps {
|
||||
children: ReactNode;
|
||||
onValueChange: (value: string) => void;
|
||||
value: string;
|
||||
items: {
|
||||
label: string;
|
||||
value: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export function DropdownMenuRadio({
|
||||
children,
|
||||
items,
|
||||
onValueChange,
|
||||
value,
|
||||
}: DropdownMenuRadioProps) {
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenuTrigger>{children}</DropdownMenuTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuRadioGroup onValueChange={onValueChange} value={value}>
|
||||
{items.map((item) => (
|
||||
<DropdownMenuRadioItem key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</DropdownMenuRadioItem>
|
||||
))}
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenu.Root>
|
||||
);
|
||||
}
|
||||
|
||||
export function Dropdown() {
|
||||
const [bookmarksChecked, setBookmarksChecked] = useState(true);
|
||||
const [urlsChecked, setUrlsChecked] = useState(false);
|
||||
const [person, setPerson] = useState('pedro');
|
||||
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<Button aria-label="Customise options">
|
||||
<HamburgerMenuIcon />
|
||||
</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem rightSlot={<HotKey>⌘T</HotKey>}>New Tab</DropdownMenuItem>
|
||||
<DropdownMenuItem rightSlot={<HotKey>⌘N</HotKey>}>New Window</DropdownMenuItem>
|
||||
<DropdownMenuItem disabled rightSlot={<HotKey>⇧⌘N</HotKey>}>
|
||||
New Private Window
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenu.Sub>
|
||||
<DropdownMenuSubTrigger rightSlot={<ChevronRightIcon />}>
|
||||
More Tools
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuSubContent>
|
||||
<DropdownMenuItem rightSlot={<HotKey>⌘S</HotKey>}>Save Page As…</DropdownMenuItem>
|
||||
<DropdownMenuItem>Create Shortcut…</DropdownMenuItem>
|
||||
<DropdownMenuItem>Name Window…</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Developer Tools</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenu.Sub>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<DropdownMenuCheckboxItem
|
||||
checked={bookmarksChecked}
|
||||
onCheckedChange={(v) => setBookmarksChecked(!!v)}
|
||||
rightSlot={<HotKey>⌘B</HotKey>}
|
||||
leftSlot={
|
||||
<DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
|
||||
<CheckIcon />
|
||||
</DropdownMenu.ItemIndicator>
|
||||
}
|
||||
>
|
||||
Show Bookmarks
|
||||
</DropdownMenuCheckboxItem>
|
||||
<DropdownMenuCheckboxItem
|
||||
checked={urlsChecked}
|
||||
onCheckedChange={(v) => setUrlsChecked(!!v)}
|
||||
leftSlot={
|
||||
<DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
|
||||
<CheckIcon />
|
||||
</DropdownMenu.ItemIndicator>
|
||||
}
|
||||
>
|
||||
Show Full URLs
|
||||
</DropdownMenuCheckboxItem>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<DropdownMenuLabel>People</DropdownMenuLabel>
|
||||
<DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
|
||||
<DropdownMenuRadioItem value="pedro">Pedro Duarte</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem className="DropdownMenuRadioItem" value="colm">
|
||||
Colm Tuite
|
||||
</DropdownMenuRadioItem>
|
||||
</DropdownMenu.RadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenu.Root>
|
||||
);
|
||||
}
|
||||
|
||||
const dropdownMenuClasses = 'bg-background rounded-md shadow-lg p-1.5 border border-gray-100';
|
||||
|
||||
interface DropdownMenuPortalProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({ children }: DropdownMenuPortalProps) {
|
||||
return (
|
||||
<DropdownMenu.Portal container={document.querySelector<HTMLElement>('#radix-portal')}>
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
|
||||
{children}
|
||||
</motion.div>
|
||||
</DropdownMenu.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenuContentProps>(
|
||||
function DropdownMenuContent(
|
||||
{ className, children, ...props }: DropdownMenu.DropdownMenuContentProps,
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<DropdownMenu.Content
|
||||
ref={ref}
|
||||
align="start"
|
||||
className={classnames(className, dropdownMenuClasses, 'mt-1')}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</DropdownMenu.Content>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
type DropdownMenuItemProps = DropdownMenu.DropdownMenuItemProps & ItemInnerProps;
|
||||
|
||||
function DropdownMenuItem({
|
||||
leftSlot,
|
||||
rightSlot,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: DropdownMenuItemProps) {
|
||||
return (
|
||||
<DropdownMenu.Item
|
||||
asChild
|
||||
className={classnames(className, { 'opacity-30': props.disabled })}
|
||||
{...props}
|
||||
>
|
||||
<ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
|
||||
{children}
|
||||
</ItemInner>
|
||||
</DropdownMenu.Item>
|
||||
);
|
||||
}
|
||||
|
||||
type DropdownMenuCheckboxItemProps = DropdownMenu.DropdownMenuCheckboxItemProps & ItemInnerProps;
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
leftSlot,
|
||||
rightSlot,
|
||||
children,
|
||||
...props
|
||||
}: DropdownMenuCheckboxItemProps) {
|
||||
return (
|
||||
<DropdownMenu.CheckboxItem asChild {...props}>
|
||||
<ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
|
||||
{children}
|
||||
</ItemInner>
|
||||
</DropdownMenu.CheckboxItem>
|
||||
);
|
||||
}
|
||||
|
||||
type DropdownMenuSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps & ItemInnerProps;
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
leftSlot,
|
||||
rightSlot,
|
||||
children,
|
||||
...props
|
||||
}: DropdownMenuSubTriggerProps) {
|
||||
return (
|
||||
<DropdownMenu.SubTrigger asChild {...props}>
|
||||
<ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
|
||||
{children}
|
||||
</ItemInner>
|
||||
</DropdownMenu.SubTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
type DropdownMenuRadioItemProps = Omit<
|
||||
DropdownMenu.DropdownMenuRadioItemProps & ItemInnerProps,
|
||||
'leftSlot'
|
||||
>;
|
||||
|
||||
function DropdownMenuRadioItem({ rightSlot, children, ...props }: DropdownMenuRadioItemProps) {
|
||||
return (
|
||||
<DropdownMenu.RadioItem asChild {...props}>
|
||||
<ItemInner
|
||||
leftSlot={
|
||||
<DropdownMenu.ItemIndicator>
|
||||
<DotFilledIcon />
|
||||
</DropdownMenu.ItemIndicator>
|
||||
}
|
||||
rightSlot={rightSlot}
|
||||
>
|
||||
{children}
|
||||
</ItemInner>
|
||||
</DropdownMenu.RadioItem>
|
||||
);
|
||||
}
|
||||
|
||||
const DropdownMenuSubContent = forwardRef<HTMLDivElement, DropdownMenu.DropdownMenuSubContentProps>(
|
||||
function DropdownMenuSubContent(
|
||||
{ className, ...props }: DropdownMenu.DropdownMenuSubContentProps,
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<DropdownMenu.SubContent
|
||||
ref={ref}
|
||||
alignOffset={0}
|
||||
sideOffset={4}
|
||||
className={classnames(className, dropdownMenuClasses)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
function DropdownMenuLabel({ className, children, ...props }: DropdownMenu.DropdownMenuLabelProps) {
|
||||
return (
|
||||
<DropdownMenu.Label asChild {...props}>
|
||||
<ItemInner noHover className={classnames(className, 'opacity-50 uppercase text-sm')}>
|
||||
{children}
|
||||
</ItemInner>
|
||||
</DropdownMenu.Label>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({ className, ...props }: DropdownMenu.DropdownMenuSeparatorProps) {
|
||||
return (
|
||||
<DropdownMenu.Separator
|
||||
className={classnames(className, 'h-[1px] bg-gray-400 bg-opacity-30 my-1')}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({ className, ...props }: DropdownMenu.DropdownMenuTriggerProps) {
|
||||
return (
|
||||
<DropdownMenu.Trigger
|
||||
asChild
|
||||
className={classnames(className, 'focus:outline-none')}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
interface ItemInnerProps extends HTMLAttributes<HTMLDivElement> {
|
||||
leftSlot?: ReactNode;
|
||||
rightSlot?: ReactNode;
|
||||
children: ReactNode;
|
||||
noHover?: boolean;
|
||||
}
|
||||
|
||||
const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
|
||||
{ leftSlot, rightSlot, children, className, noHover, ...props }: ItemInnerProps,
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={classnames(
|
||||
className,
|
||||
'outline-none px-2 py-1.5 flex items-center text-sm text-gray-700',
|
||||
{
|
||||
'focus:bg-gray-50 focus:text-gray-900 rounded': !noHover,
|
||||
},
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="w-7">{leftSlot}</div>
|
||||
<div>{children}</div>
|
||||
{rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
39
src-web/components/Editor/Editor.css
Normal file
39
src-web/components/Editor/Editor.css
Normal file
@@ -0,0 +1,39 @@
|
||||
.cm-editor {
|
||||
width: 100%;
|
||||
height: calc(100vh - 270px);
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius-lg);
|
||||
}
|
||||
|
||||
.cm-editor .cm-scroller {
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
border-radius: var(--border-radius-lg);
|
||||
background-color: hsl(var(--color-gray-50));
|
||||
}
|
||||
|
||||
.cm-editor .cm-line {
|
||||
padding-left: 1.5em;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
.cm-editor * {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cm-editor.cm-focused {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 2pt rgba(180, 180, 180, 0.1);
|
||||
}
|
||||
|
||||
.cm-editor .cm-cursor {
|
||||
border-left: 2px solid red;
|
||||
}
|
||||
|
||||
.cm-editor .cm-selectionBackground {
|
||||
background-color: rgba(180, 180, 180, 0.3);
|
||||
}
|
||||
|
||||
.cm-editor.cm-focused .cm-selectionBackground {
|
||||
background-color: rgba(180, 180, 180, 0.3);
|
||||
}
|
||||
11
src-web/components/Editor/Editor.tsx
Normal file
11
src-web/components/Editor/Editor.tsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import useCodeMirror from '../../hooks/useCodemirror';
|
||||
import './Editor.css';
|
||||
|
||||
interface Props {
|
||||
value: string;
|
||||
}
|
||||
|
||||
export default function Editor(props: Props) {
|
||||
const { ref } = useCodeMirror({ value: props.value });
|
||||
return <div ref={ref} className="m-0 text-sm overflow-hidden" />;
|
||||
}
|
||||
35
src-web/components/Grid.tsx
Normal file
35
src-web/components/Grid.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import classnames from 'classnames';
|
||||
import {HTMLAttributes} from 'react';
|
||||
|
||||
const colsClasses = {
|
||||
none: 'grid-cols-none',
|
||||
1: 'grid-cols-1',
|
||||
2: 'grid-cols-2',
|
||||
};
|
||||
|
||||
const rowsClasses = {
|
||||
none: 'grid-rows-none',
|
||||
1: 'grid-rows-1',
|
||||
2: 'grid-rows-2',
|
||||
};
|
||||
|
||||
const gapClasses = {
|
||||
0: 'gap-0',
|
||||
1: 'gap-1',
|
||||
2: 'gap-2',
|
||||
};
|
||||
|
||||
type Props = HTMLAttributes<HTMLElement> & {
|
||||
rows?: keyof typeof rowsClasses;
|
||||
cols?: keyof typeof colsClasses;
|
||||
gap?: keyof typeof gapClasses;
|
||||
};
|
||||
|
||||
export function Grid({ className, cols, gap, ...props }: Props) {
|
||||
return (
|
||||
<div
|
||||
className={classnames(className, 'grid', cols && colsClasses[cols], gap && gapClasses[gap])}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
15
src-web/components/HotKey.tsx
Normal file
15
src-web/components/HotKey.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { HTMLAttributes } from 'react';
|
||||
import classnames from 'classnames';
|
||||
|
||||
export function HotKey({ children }: HTMLAttributes<HTMLSpanElement>) {
|
||||
return (
|
||||
<span
|
||||
className={classnames(
|
||||
'bg-gray-400 bg-opacity-20 px-1.5 py-0.5 rounded text-sm',
|
||||
'font-mono text-gray-500 tracking-widest',
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
34
src-web/components/Input.tsx
Normal file
34
src-web/components/Input.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { InputHTMLAttributes } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { VStack } from './Stacks';
|
||||
|
||||
interface Props extends InputHTMLAttributes<HTMLInputElement> {
|
||||
name: string;
|
||||
label: string;
|
||||
hideLabel?: boolean;
|
||||
labelClassName?: string;
|
||||
}
|
||||
|
||||
export function Input({ label, labelClassName, hideLabel, className, name, ...props }: Props) {
|
||||
const id = `input-${name}`;
|
||||
return (
|
||||
<VStack>
|
||||
<label
|
||||
htmlFor={name}
|
||||
className={classnames(labelClassName, 'font-semibold text-sm uppercase text-gray-700', {
|
||||
'sr-only': hideLabel,
|
||||
})}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
id={id}
|
||||
className={classnames(
|
||||
className,
|
||||
'border-2 border-gray-100 bg-gray-50 h-10 pl-5 pr-2 rounded-lg text-sm focus:outline-none',
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</VStack>
|
||||
);
|
||||
}
|
||||
72
src-web/components/Stacks.tsx
Normal file
72
src-web/components/Stacks.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import React, { Children, Fragment, HTMLAttributes, ReactNode } from 'react';
|
||||
import classnames from 'classnames';
|
||||
|
||||
const spaceClasses = {
|
||||
'0': 'pt-0',
|
||||
'1': 'pt-1',
|
||||
};
|
||||
|
||||
type Space = keyof typeof spaceClasses;
|
||||
|
||||
interface HStackProps extends BoxProps {
|
||||
space?: Space;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function Stacks({ className, space, children, ...props }: HStackProps) {
|
||||
return (
|
||||
<BaseStack className={classnames(className, 'flex-row')} {...props}>
|
||||
{space
|
||||
? Children.toArray(children)
|
||||
.filter(Boolean) // Remove null/false/undefined children
|
||||
.map((c, i) => (
|
||||
<Fragment key={i}>
|
||||
{i > 0 ? (
|
||||
<div
|
||||
className={classnames(className, spaceClasses[space], 'pointer-events-none')}
|
||||
aria-hidden
|
||||
/>
|
||||
) : null}
|
||||
{c}
|
||||
</Fragment>
|
||||
))
|
||||
: children}
|
||||
</BaseStack>
|
||||
);
|
||||
}
|
||||
|
||||
export interface VStackProps extends BoxProps {
|
||||
space?: Space;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function VStack({ className, space, children, ...props }: VStackProps) {
|
||||
return (
|
||||
<BaseStack className={classnames(className, 'flex-col')} {...props}>
|
||||
{space
|
||||
? Children.toArray(children)
|
||||
.filter(Boolean) // Remove null/false/undefined children
|
||||
.map((c, i) => (
|
||||
<Fragment key={i}>
|
||||
{i > 0 ? (
|
||||
<div
|
||||
className={classnames(spaceClasses[space], 'pointer-events-none')}
|
||||
aria-hidden
|
||||
/>
|
||||
) : null}
|
||||
{c}
|
||||
</Fragment>
|
||||
))
|
||||
: children}
|
||||
</BaseStack>
|
||||
);
|
||||
}
|
||||
|
||||
interface BoxProps extends HTMLAttributes<HTMLElement> {
|
||||
as?: React.ElementType;
|
||||
}
|
||||
|
||||
function BaseStack({ className, as = 'div', ...props }: BoxProps) {
|
||||
const Component = as;
|
||||
return <Component className={classnames(className, 'flex flex-grow-0')} {...props} />;
|
||||
}
|
||||
55
src-web/hooks/useCodemirror.ts
Normal file
55
src-web/hooks/useCodemirror.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { EditorView, minimalSetup } from 'codemirror';
|
||||
import { javascript } from '@codemirror/lang-javascript';
|
||||
import { json } from '@codemirror/lang-json';
|
||||
import { html } from '@codemirror/lang-html';
|
||||
import { EditorState } from '@codemirror/state';
|
||||
import { tags } from '@lezer/highlight';
|
||||
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
|
||||
|
||||
const myHighlightStyle = HighlightStyle.define([
|
||||
{
|
||||
tag: [tags.documentMeta, tags.blockComment, tags.lineComment, tags.docComment, tags.comment],
|
||||
color: '#757b93',
|
||||
},
|
||||
{ tag: tags.name, color: '#4b92ff' },
|
||||
{ tag: tags.variableName, color: '#4bff4e' },
|
||||
{ tag: tags.attributeName, color: '#b06fff' },
|
||||
{ tag: tags.attributeValue, color: '#ff964b' },
|
||||
{ tag: tags.keyword, color: '#fc6' },
|
||||
{ tag: tags.comment, color: '#f5d', fontStyle: 'italic' },
|
||||
]);
|
||||
|
||||
const extensions = [
|
||||
minimalSetup,
|
||||
syntaxHighlighting(myHighlightStyle),
|
||||
html(),
|
||||
javascript(),
|
||||
json(),
|
||||
];
|
||||
|
||||
export default function useCodeMirror({ value }: { value: string }) {
|
||||
const [cm, setCm] = useState<EditorView | null>(null);
|
||||
const ref = useRef(null);
|
||||
useEffect(() => {
|
||||
if (ref.current === null) return;
|
||||
|
||||
const view = new EditorView({
|
||||
extensions,
|
||||
parent: ref.current,
|
||||
});
|
||||
|
||||
setCm(view);
|
||||
|
||||
return () => view?.destroy();
|
||||
}, [ref.current]);
|
||||
|
||||
useEffect(() => {
|
||||
if (cm === null) return;
|
||||
|
||||
const newState = EditorState.create({ doc: value, extensions });
|
||||
cm.setState(newState);
|
||||
}, [cm, value]);
|
||||
|
||||
return { ref, cm };
|
||||
}
|
||||
103
src-web/main.css
Normal file
103
src-web/main.css
Normal file
@@ -0,0 +1,103 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
:not(input):not(textarea),
|
||||
:not(input):not(textarea)::after,
|
||||
:not(input):not(textarea)::before {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-white: 255 100% 100%;
|
||||
--color-background: var(--color-white);
|
||||
|
||||
--color-blue-50: 217 91% 95%;
|
||||
--color-blue-100: 217 91% 88%;
|
||||
--color-blue-200: 217 91% 76%;
|
||||
--color-blue-300: 217 91% 70%;
|
||||
--color-blue-400: 217 91% 65%;
|
||||
--color-blue-500: 217 91% 58%;
|
||||
--color-blue-600: 217 91% 43%;
|
||||
--color-blue-700: 217 91% 30%;
|
||||
--color-blue-800: 217 91% 20%;
|
||||
--color-blue-900: 217 91% 10%;
|
||||
|
||||
--color-violet-50: 258 90% 95%;
|
||||
--color-violet-100: 258 90% 88%;
|
||||
--color-violet-200: 258 90% 76%;
|
||||
--color-violet-300: 258 90% 70%;
|
||||
--color-violet-400: 258 90% 65%;
|
||||
--color-violet-500: 258 90% 58%;
|
||||
--color-violet-600: 258 90% 43%;
|
||||
--color-violet-700: 258 90% 30%;
|
||||
--color-violet-800: 258 90% 20%;
|
||||
--color-violet-900: 258 90% 10%;
|
||||
|
||||
--color-gray-50: 217 21% 95%;
|
||||
--color-gray-100: 217 21% 88%;
|
||||
--color-gray-200: 217 21% 76%;
|
||||
--color-gray-300: 217 21% 70%;
|
||||
--color-gray-400: 217 21% 65%;
|
||||
--color-gray-500: 217 21% 58%;
|
||||
--color-gray-600: 217 21% 43%;
|
||||
--color-gray-700: 217 21% 30%;
|
||||
--color-gray-800: 217 21% 20%;
|
||||
--color-gray-900: 217 21% 10%;
|
||||
|
||||
/* Border Radius */
|
||||
|
||||
--border-radius-sm: 0.125rem;
|
||||
--border-radius: 0.25rem;
|
||||
--border-radius-md: 0.375rem;
|
||||
--border-radius-lg: 0.5rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-white: 255 100% 100%;
|
||||
--color-background: 217 21% 7%;
|
||||
|
||||
--color-blue-900: 217 91% 95%;
|
||||
--color-blue-800: 217 91% 88%;
|
||||
--color-blue-700: 217 91% 76%;
|
||||
--color-blue-600: 217 91% 70%;
|
||||
--color-blue-500: 217 91% 65%;
|
||||
--color-blue-400: 217 91% 58%;
|
||||
--color-blue-300: 217 91% 43%;
|
||||
--color-blue-200: 217 91% 30%;
|
||||
--color-blue-100: 217 91% 20%;
|
||||
--color-blue-50: 217 91% 10%;
|
||||
|
||||
--color-violet-900: 258 90% 95%;
|
||||
--color-violet-800: 258 90% 88%;
|
||||
--color-violet-700: 258 90% 76%;
|
||||
--color-violet-600: 258 90% 70%;
|
||||
--color-violet-500: 258 90% 65%;
|
||||
--color-violet-400: 258 90% 58%;
|
||||
--color-violet-300: 258 90% 43%;
|
||||
--color-violet-200: 258 90% 30%;
|
||||
--color-violet-100: 258 90% 20%;
|
||||
--color-violet-50: 258 90% 10%;
|
||||
|
||||
--color-gray-900: 217 21% 95%;
|
||||
--color-gray-800: 217 21% 88%;
|
||||
--color-gray-700: 217 21% 76%;
|
||||
--color-gray-600: 217 21% 70%;
|
||||
--color-gray-500: 217 21% 65%;
|
||||
--color-gray-400: 217 21% 58%;
|
||||
--color-gray-300: 217 21% 43%;
|
||||
--color-gray-200: 217 21% 30%;
|
||||
--color-gray-100: 217 21% 25%;
|
||||
--color-gray-50: 217 21% 15%;
|
||||
}
|
||||
}
|
||||
}
|
||||
21
src-web/main.tsx
Normal file
21
src-web/main.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
import { HelmetProvider } from 'react-helmet-async';
|
||||
import { MotionConfig } from 'framer-motion';
|
||||
import init, { greet } from 'hello';
|
||||
|
||||
import './main.css';
|
||||
|
||||
await init();
|
||||
greet();
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<MotionConfig transition={{ duration: 0.15 }}>
|
||||
<HelmetProvider>
|
||||
<App />
|
||||
</HelmetProvider>
|
||||
</MotionConfig>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
Reference in New Issue
Block a user