// Name: Theme Maker// Description: Test Themesimport "@johnlindquist/kit"const themePath = kenvPath('theme.json');if (!(await isFile(themePath))) {let defaultTheme = `{"foreground": "#ffffff","accent": "#fbbf24","ui": "#343434","background": "#000000","opacity": "0.85"}`.trim()await writeFile(themePath, defaultTheme)}const theme = await readJson(themePath)const { foreground, accent, ui, background, opacity } = themeconst list = ["foreground", "accent", "ui", "background"]const valueList = [foreground, accent, ui, background, opacity]const arrayList = list.map((value, index) => {return { type: "color", label: value, value: valueList[index] }})arrayList.push({ type: "range", label: "Opacity", value: opacity })await fields({onChange: (input, { value }) => {const [foreground, accent, ui, background, opacity] = valuetheme.foreground = foregroundtheme.accent = accenttheme.ui = uitheme.background = backgroundtheme.opacity = opacitysetTheme(theme);writeJson(themePath, theme)},fields: arrayList,})let result = await div(md(`# Success!`))
import "@johnlindquist/kit"// Name: Widget Theme Picker// Description: Color Picker HTMLlet themePath = kenvPath("theme.json")if (!(await isFile(themePath))) {let defaultTheme = `{"foreground": "#ffffff","accent": "#fbbf24","ui": "#343434","background": "#000000","opacity": "0.85"}`.trim()await writeFile(themePath, defaultTheme)}const theme = await readJson(themePath)const { foreground, accent, ui, background, opacity } = themelet w = await widget(`<div class="flex flex-col w-full h-full p-8">foreground:<input type="color" label="foreground" data-label="foreground" value="${foreground}" />background:<input type="color" label="background" data-label="background" value="${background}" />accent:<input type="color" label="accent" data-label="accent" value="${accent}"/>ui:<input type="color" label="ui" data-label="ui" value="${ui}"/>opacity:<input type="range" min="0" max="1" step="0.01" label="opacity" data-label="opacity" value="${opacity}"/></div>`,{width: 300,height: 300,draggable: false,})w.onInput(event => {setTheme({[event.dataset.label]: event.value,})theme[event.dataset.label] = event.valuewriteJson(themePath, theme)})setIgnoreBlur(true)await mainScript()
// Name: Theme Maker// Description: Test Themesimport "@johnlindquist/kit"const setArgOptions = (key, val) => {return {name: key, type: "color", input: val, onInput: async input => {const scriptObj = {}scriptObj[key] = inputsetScriptTheme(scriptObj)}}}let foreground = setArgOptions("foreground", "#ffffff")let accent = await arg(setArgOptions("accent", "#fbbf24"))let ui = await arg(setArgOptions("ui", "#343434"))let background = await arg(setArgOptions("background", "#000000"));let opacity = await arg({type: "range",name: "opacity",input: "85",onInput: async input => setScriptTheme({opacity:`0.${input}`})})let result = await div(md(`# Success!`))
// Name: Run .bat/.ps1/.sh// Description: Process Output to Kit via streamimport "@johnlindquist/kit"// @ts-expect-errorimport { backToMainShortcut, highlightJavaScript } from "@johnlindquist/kit"// --- Create a shell script to run -----------------// `tmpPath` will store the file here:// ~/.kenv/tmp/process-shell-script-output/example.*// Note: linux shell will only work with WSL or you can provide the Args for ps1 using the .sh extension if you have gitbashconst fileName = "example"const selectedLang = {name: '',args: '',ext: '',echo: '',set setVal(keyValueList: string[]) {this[keyValueList[0]] = keyValueList[1];}};const objGen = (_lang: string, _ext: string, _args?: string) => {_args = _args ? _args : ""return {name: _lang,description: `Run Script using ${_lang}`,value: _lang,id: _ext,arguments: _args,preview: async () => highlightJavaScript(tmpPath(`${fileName}.${_ext}`))}}const LangOptions = [objGen("PowerShell","ps1","powershell -NoProfile -NonInteractive –ExecutionPolicy Bypass -File "), objGen("Batch", "bat"),objGen("Bash", "sh")]const promptEditor = ["yes", "no"]const selectedValue = await arg("Use editor?", promptEditor)const useEditor = selectedValue === "yes" ? true : false// define select optionsawait arg({placeholder: "Select Scripting Language...",enter: "Select",shortcuts: [backToMainShortcut],onChoiceFocus: async (input, { focused }) => {selectedLang.setVal = ["args", focused["arguments"]]selectedLang.setVal = ["ext", focused.id]selectedLang.setVal = ["name", focused.name]selectedLang.setVal = ["echo", selectedLang.ext == "bat" ? "@echo off" : ""]}}, LangOptions)let shellScriptPath = tmpPath(`${fileName}.${selectedLang.ext}`)const editorConfig = {hint: `Write code for ${selectedLang.ext} file.`,description: 'Save to Run',onInputSubmit: async (input: any) => {selectedLang.ext == "sh" ? submit(`${input}exit`) : submit(input)}}// Using ping to simulate waiting for a long process and because it's natively supported across PS and Bat files// Note: If you use a code that would natively not run in bat like "ls" it willlet scriptContents = useEditor ? await editor(editorConfig) : `${selectedLang.echo}echo "hello"echo "Done"${selectedLang.ext == "sh" ? "exit" : ""}`await writeFile(shellScriptPath, scriptContents);// Just a wrapper to highlight with code in PS styleconst codeWrapper = (string: string, extension: any) => `\`\`\`${extension}${string}\`\`\``let output = ``// This is used to avoid kit window closing on process exitlet divPromise = div()const outHandler = async (out: any) => {output += `${out}\n`;setDiv(await highlight(`${codeWrapper(output, selectedLang.ext)}`))};// Note: We have to use this janky way of executing PS as it would launch in Notepad or fail entirely.const execArgs = selectedLang.ext == "sh" ? `cd ${tmpPath()} && bash ${fileName}.sh` : `${selectedLang.args}${shellScriptPath}`// inspect(execArgs)let { stdout } = execLog(execArgs, outHandler)setAlwaysOnTop(true);setIgnoreBlur(true);await divPromise
// Name: JSON to TS-Interfaces// Description: Quickly get an Interface from JSON// Author: Ambushfall// Snippet: json..ts// Inspired by: Marin Muštra's JSON to TypeScriptimport '@johnlindquist/kit';import { EditorConfig } from '@johnlindquist/kit/types/kitapp';const JsonToTS = await npm('json-to-ts');const TSWrapper = (string: string) => `\`\`\`ts${string}\`\`\``const JSONWrapper = (string: string) => `\`\`\`json${string}\`\`\``const editorConfig:EditorConfig = {hint: "Write then submit to obtain results",description: 'JSON Values to Interface',onInputSubmit: async (input: string) => submit(input)}// Initialize editor and Parse JSONconst json = await editor(editorConfig)const obj = JSON.parse(json);const types = `${JsonToTS(obj).join('\n\n')}\n`;// Place text into ClipBoard and show resultssetSelectedText(types)await div(await highlight(`# Success! Result Copied to Clipboard!## Input:${JSONWrapper(json)}## Output:${TSWrapper(types)}`));
// Preview: docs// Menu: Open Project// Description: Opens a project in vscode// Shortcut: cmd shift .import "@johnlindquist/kit";const envPath = await env('PROJECT_DIR');const projectDir = home(envPath);const projects = await readdir(projectDir);const filteredProjects = projects.filter((v) => v.includes('.') ? false : v)const project = await arg('Enter a project name:', filteredProjects);const projectPath = path.resolve(projectDir, project);edit(projectPath)