Skip to content

Commit 613bf81

Browse files
aarena-meteraarena-meter
committed
sort of working render ui
1 parent 3cd3a74 commit 613bf81

Some content is hidden

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

89 files changed

+2039
-29
lines changed

‎demo/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ createIntervalApp({
99
hello_world: {
1010
handler: async () => {
1111
console.log("Hello world called");
12-
await sleep(2000);
12+
// await sleep(2000);
1313
const yourName = await io("INPUT_TEXT", {
1414
label: "What is your name?",
1515
});

‎sdk/src/ioSchema.ts

+22
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,32 @@ export const INPUT_SCHEMAS = {
88
INPUT_TEXT: {
99
props: z.object({
1010
label: z.string(),
11+
helpText: z.optional(z.string()),
12+
placeholder: z.optional(z.string()),
13+
defaultValue: z.optional(z.string()).nullable(),
14+
multiline: z.optional(z.boolean()),
15+
lines: z.optional(z.number()),
16+
minLength: z.optional(z.number().int().positive()),
17+
maxLength: z.optional(z.number().int().positive()),
18+
disabled: z.optional(z.boolean().default(false)),
1119
}),
1220
state: z.null(),
1321
returns: z.string(),
1422
},
23+
INPUT_NUMBER: {
24+
props: z.object({
25+
label: z.string(),
26+
min: z.optional(z.number().int().positive()),
27+
max: z.optional(z.number().int().positive()),
28+
}),
29+
state: z.null(),
30+
returns: z.number(),
31+
},
1532
} satisfies Record<string, InputSchema>;
1633

1734
export type InputSchemas = typeof INPUT_SCHEMAS;
35+
36+
export type InputTypes<T extends keyof InputSchemas> = {
37+
props: z.infer<InputSchemas[T]["props"]>;
38+
returns: z.infer<InputSchemas[T]["returns"]>;
39+
};

‎ui/package.json

+3-4
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,8 @@
100100
"use-debounce": "^8.0.4",
101101
"vite": "^3.2.0",
102102
"vite-plugin-checker": "^0.6.2",
103-
"xlsx": "^0.18.5"
104-
},
105-
"dependencies": {
103+
"xlsx": "^0.18.5",
106104
"zod": "^3.23.8"
107-
}
105+
},
106+
"dependencies": {}
108107
}

‎ui/pnpm-lock.yaml

+4-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/src/RenderIOCall.tsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { useCallback, useRef, useState } from 'react'
2+
import {
3+
type InputSchemas,
4+
type InputTypes,
5+
INPUT_SCHEMAS,
6+
} from '../../sdk/src/ioSchema'
7+
import InputText from './components/io-methods/InputText'
8+
// import IVInputField from '~/components/IVInputField'
9+
// import { preventDefaultInputEnterKey } from '~/utils/preventDefaultInputEnter'
10+
11+
type IOMethodToComponent = {
12+
[K in keyof InputSchemas]: (props: IOInputProps<K>) => React.ReactNode
13+
}
14+
15+
const ComponentMap: IOMethodToComponent = {
16+
INPUT_TEXT: InputText,
17+
INPUT_NUMBER: () => null,
18+
}
19+
20+
export type IOInputProps<K extends keyof InputSchemas> = {
21+
props: InputTypes<K>['props']
22+
context: {
23+
id: string
24+
isCurrentCall: boolean
25+
isSubmitting: boolean
26+
isOptional: boolean
27+
autoFocus: boolean
28+
updatePendingReturnValue: (value: InputTypes<K>['returns']) => void
29+
}
30+
}
31+
32+
export function parseIOCall<T extends keyof InputSchemas>(ioCall: {
33+
methodName: T
34+
props: any
35+
}) {
36+
const ioSchema = INPUT_SCHEMAS[ioCall.methodName]
37+
if (!ioSchema) {
38+
throw new Error(`IO method ${ioCall.methodName} not found`)
39+
}
40+
return {
41+
methodName: ioCall.methodName,
42+
props: ioCall.props as InputTypes<T>['props'],
43+
}
44+
}
45+
46+
export function RenderIOCall({
47+
ioCall,
48+
onSubmit,
49+
}: {
50+
ioCall: any
51+
onSubmit: (value: any) => void
52+
}) {
53+
const parsedCall = parseIOCall(ioCall)
54+
const ComponentToRender = ComponentMap[parsedCall.methodName]
55+
56+
const pendingReturnValue = useRef<any>(null)
57+
58+
return (
59+
<form
60+
onSubmit={e => {
61+
e.preventDefault()
62+
console.log('submit', pendingReturnValue.current)
63+
onSubmit(pendingReturnValue.current)
64+
}}
65+
>
66+
<ComponentToRender
67+
props={parsedCall.props}
68+
context={{
69+
id: '1',
70+
isCurrentCall: true,
71+
isSubmitting: false,
72+
isOptional: false,
73+
autoFocus: true,
74+
updatePendingReturnValue: value => {
75+
console.log('updatePendingReturnValue', value)
76+
pendingReturnValue.current = value
77+
},
78+
}}
79+
/>
80+
<button type="submit">Submit</button>
81+
</form>
82+
)
83+
}

‎ui/src/components/HelpText/index.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import classNames from 'classnames'
2+
import RenderMarkdown, { ALLOWED_INLINE_ELEMENTS } from '../RenderMarkdown'
3+
4+
export interface ComponentHelpTextProps {
5+
id?: string
6+
className?: string
7+
children: string | React.ReactNode
8+
}
9+
10+
export default function ComponentHelpText(props: ComponentHelpTextProps) {
11+
const isMarkdown = typeof props.children === 'string'
12+
13+
return (
14+
<div
15+
className={classNames('text-sm text-gray-500', props.className ?? '', {
16+
'prose-inline': isMarkdown,
17+
})}
18+
id={props.id}
19+
>
20+
{isMarkdown ? (
21+
<RenderMarkdown
22+
value={props.children as string}
23+
allowedElements={ALLOWED_INLINE_ELEMENTS}
24+
/>
25+
) : (
26+
props.children
27+
)}
28+
</div>
29+
)
30+
}

‎ui/src/components/HighlightedCodeBlock/editorTheme.scss

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/*!
2+
Theme: GitHub Dark
3+
Description: Dark theme as seen on github.com
4+
Author: github.com
5+
Maintainer: @Hirse
6+
Updated: 2021-05-15
7+
Outdated base version: https://github.com/primer/github-syntax-dark
8+
Current colors taken from GitHub's CSS
9+
*/
10+
11+
.hljs {
12+
color: var(--mono1);
13+
font-family: 'SFMono-Regular', 'Menlo', 'Monaco', monospace;
14+
font-size: 12px;
15+
line-height: 16px;
16+
}
17+
18+
.hljs-doctag,
19+
.hljs-keyword,
20+
.hljs-meta .hljs-keyword,
21+
.hljs-template-tag,
22+
.hljs-template-variable,
23+
.hljs-type,
24+
.hljs-variable.language_ {
25+
/* prettylights-syntax-keyword */
26+
color: var(--hue3);
27+
}
28+
29+
.hljs-title,
30+
.hljs-title.class_,
31+
.hljs-title.class_.inherited__,
32+
.hljs-title.function_ {
33+
/* prettylights-syntax-entity */
34+
color: var(--mono1);
35+
}
36+
37+
.hljs-attr,
38+
.hljs-attribute,
39+
.hljs-literal,
40+
.hljs-meta,
41+
.hljs-number,
42+
.hljs-operator,
43+
.hljs-variable,
44+
.hljs-selector-attr,
45+
.hljs-selector-class,
46+
.hljs-selector-id {
47+
/* prettylights-syntax-constant */
48+
color: var(--entity);
49+
}
50+
51+
.hljs-regexp,
52+
.hljs-string,
53+
.hljs-meta .hljs-string {
54+
/* prettylights-syntax-string */
55+
color: var(--hue4);
56+
}
57+
58+
.hljs-built_in,
59+
.hljs-symbol {
60+
/* prettylights-syntax-variable */
61+
color: #ffa657;
62+
}
63+
64+
.hljs-comment,
65+
.hljs-code,
66+
.hljs-formula {
67+
/* prettylights-syntax-comment */
68+
color: #8b949e;
69+
}
70+
71+
.hljs-name,
72+
.hljs-quote,
73+
.hljs-selector-tag,
74+
.hljs-selector-pseudo {
75+
/* prettylights-syntax-entity-tag */
76+
color: var(--hue3);
77+
}
78+
79+
.hljs-subst {
80+
/* prettylights-syntax-storage-modifier-import */
81+
color: var(--substr);
82+
}
83+
84+
.hljs-section {
85+
/* prettylights-syntax-markup-heading */
86+
color: #1f6feb;
87+
font-weight: bold;
88+
}
89+
90+
.hljs-bullet {
91+
/* prettylights-syntax-markup-list */
92+
color: #f2cc60;
93+
}
94+
95+
.hljs-emphasis {
96+
/* prettylights-syntax-markup-italic */
97+
color: var(--mono1);
98+
font-style: italic;
99+
}
100+
101+
.hljs-strong {
102+
/* prettylights-syntax-markup-bold */
103+
color: var(--mono1);
104+
font-weight: bold;
105+
}
106+
107+
.hljs-addition {
108+
/* prettylights-syntax-markup-inserted */
109+
color: #aff5b4;
110+
background-color: #033a16;
111+
}
112+
113+
.hljs-deletion {
114+
/* prettylights-syntax-markup-deleted */
115+
color: #ffdcd7;
116+
background-color: #67060c;
117+
}
118+
119+
.hljs-char.escape_,
120+
.hljs-link,
121+
.hljs-params,
122+
.hljs-property,
123+
.hljs-punctuation,
124+
.hljs-tag {
125+
/* purposely ignored */
126+
}

0 commit comments

Comments
 (0)