diff --git a/package.json b/package.json index b25e9e7..825f6db 100644 --- a/package.json +++ b/package.json @@ -14,11 +14,13 @@ "@monaco-editor/react": "^4.6.0", "clsx": "^2.1.1", "framer-motion": "^11.11.10", + "json5": "^2.2.3", "normalize.css": "^8.0.1", "react": "^18.3.1", "react-dom": "^18.3.1", "recoil": "^0.7.7", - "styled-components": "^6.1.13" + "styled-components": "^6.1.13", + "yaml": "^2.6.0" }, "devDependencies": { "@eslint/js": "^9.13.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 88a04db..574b88f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: framer-motion: specifier: ^11.11.10 version: 11.11.10(@emotion/is-prop-valid@1.2.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + json5: + specifier: ^2.2.3 + version: 2.2.3 normalize.css: specifier: ^8.0.1 version: 8.0.1 @@ -35,6 +38,9 @@ importers: styled-components: specifier: ^6.1.13 version: 6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + yaml: + specifier: ^2.6.0 + version: 2.6.0 devDependencies: '@eslint/js': specifier: ^9.13.0 @@ -950,6 +956,11 @@ packages: json-stable-stringify-without-jsonify@1.0.1: resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} + json5@2.2.3: + resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} + engines: {node: '>=6'} + hasBin: true + keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} @@ -1368,6 +1379,11 @@ packages: resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} engines: {node: '>=0.10.0'} + yaml@2.6.0: + resolution: {integrity: sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==} + engines: {node: '>= 14'} + hasBin: true + yocto-queue@0.1.0: resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} engines: {node: '>=10'} @@ -2117,6 +2133,8 @@ snapshots: json-stable-stringify-without-jsonify@1.0.1: {} + json5@2.2.3: {} + keyv@4.5.4: dependencies: json-buffer: 3.0.1 @@ -2490,4 +2508,6 @@ snapshots: word-wrap@1.2.5: {} + yaml@2.6.0: {} + yocto-queue@0.1.0: {} diff --git a/src/Editor/index.tsx b/src/Editor/index.tsx index 28c8a9d..22f898c 100644 --- a/src/Editor/index.tsx +++ b/src/Editor/index.tsx @@ -16,7 +16,7 @@ export const Editor: FC = () => { loading={<>} value={value} language="yaml" - onChange={(v) => setValue(v ?? '')} + onChange={(v) => setValue(v?.trim() ?? '')} options={{ automaticLayout: true, lineNumbersMinChars: 3, @@ -31,7 +31,7 @@ export const Editor: FC = () => { smoothScrolling: true, cursorSmoothCaretAnimation: 'on', cursorBlinking: 'smooth', - cursorStyle: 'block' + cursorStyle: 'line' }} theme="vs-dark" /> diff --git a/src/TransformGridItem/index.tsx b/src/TransformGridItem/index.tsx index 8e25b47..9eb01f5 100644 --- a/src/TransformGridItem/index.tsx +++ b/src/TransformGridItem/index.tsx @@ -1,12 +1,21 @@ -import { ChangeEvent, FC, useState } from "react"; +import { ChangeEvent, FC, useEffect, useState } from "react"; import style from './style.module.scss' import { Button } from "../Components/Button"; import { Input } from "../Components/Input"; import { TextArea } from "../Components/TextArea"; -import { TransformCheckboxOption, TransformOption, TransformTextboxOption, WrappedTransform } from "../Transforms/Transform"; +import clsx from "clsx"; import { useRecoilState } from "recoil"; import { EditorValueState } from "../GlobalStates/EditorValueState"; -import clsx from "clsx"; +import { + isTransformCheckboxOption, + isTransformIntboxOption, + isTransformTextboxOption, + TransformCheckboxOption, + TransformIntboxOption, + TransformTextboxOption, + WrappedTransform, + WrappedTransformResult +} from "../Transforms/Transform"; interface TransformGridItemProp { transform: WrappedTransform @@ -14,9 +23,17 @@ interface TransformGridItemProp { export const TransformGridItem: FC = ({ transform }) => { const [value, setValue] = useRecoilState(EditorValueState) - const [options, setOptions] = useState(new Map()) - - const result = transform.fn(value, options) + const [options, setOptions] = useState(transform.options) + const [result, setResult] = useState({ + error: false, + value: '' + }) + + useEffect(() => { + transform + .fn(value, options) + .then(setResult.bind(this)) + }, [value, options]) const onCheckboxOptionChanged = (option: TransformCheckboxOption) => @@ -42,6 +59,18 @@ export const TransformGridItem: FC = ({ transform }) => { setOptions(new Map(options)) } + + const onIntboxOptionChanged = + (option: TransformIntboxOption) => + (event: ChangeEvent) => { + + options.set(option.key, { + ...option, + value: parseInt(event.target.value) + }) + + setOptions(new Map(options)) + } const onForwardButtonPressed = () => { if (result.error) @@ -60,33 +89,49 @@ export const TransformGridItem: FC = ({ transform }) => {

{transform.name}

- {transform.options - ?.filter((option) => option.type === 'CHECKBOX') + {[...options.values()] + ?.filter(isTransformCheckboxOption) .map((option, i) => ( ))} - {transform.options - ?.filter((option) => option.type === 'TEXTBOX') + {[...options.values()] + ?.filter(isTransformTextboxOption) .map((option, i) => ( ))} + + + {[...options.values()] + ?.filter(isTransformIntboxOption) + .map((option, i) => ( + ))}