diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..e1076ed --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "semi": false, + "singleQuote": true, + "tabWidth": 2, + "useTabs": false +} diff --git a/eslint.config.js b/eslint.config.js index 092408a..48c3162 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -3,6 +3,8 @@ import globals from 'globals' import reactHooks from 'eslint-plugin-react-hooks' import reactRefresh from 'eslint-plugin-react-refresh' import tseslint from 'typescript-eslint' +import eslintConfigPrettier from 'eslint-config-prettier' +import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended' export default tseslint.config( { ignores: ['dist'] }, @@ -25,4 +27,6 @@ export default tseslint.config( ], }, }, + eslintConfigPrettier, + eslintPluginPrettierRecommended, ) diff --git a/package.json b/package.json index 136e044..cc3891d 100644 --- a/package.json +++ b/package.json @@ -32,9 +32,12 @@ "@types/react-dom": "^18.3.1", "@vitejs/plugin-react-swc": "^3.5.0", "eslint": "^9.13.0", + "eslint-config-prettier": "^10.0.1", + "eslint-plugin-prettier": "^5.2.2", "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.13", "globals": "^15.11.0", + "monaco-editor": "^0.52.2", "sass-embedded": "^1.80.4", "sharp": "^0.33.5", "typescript": "~5.6.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 959ea21..92436b8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,7 +13,7 @@ importers: version: 5.1.1 '@monaco-editor/react': specifier: ^4.6.0 - version: 4.6.0(monaco-editor@0.52.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 4.6.0(monaco-editor@0.52.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@uidotdev/usehooks': specifier: ^2.4.1 version: 2.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -69,6 +69,12 @@ importers: eslint: specifier: ^9.13.0 version: 9.13.0 + eslint-config-prettier: + specifier: ^10.0.1 + version: 10.0.1(eslint@9.13.0) + eslint-plugin-prettier: + specifier: ^5.2.2 + version: 5.2.2(eslint-config-prettier@10.0.1(eslint@9.13.0))(eslint@9.13.0)(prettier@3.4.2) eslint-plugin-react-hooks: specifier: ^5.0.0 version: 5.0.0(eslint@9.13.0) @@ -78,6 +84,9 @@ importers: globals: specifier: ^15.11.0 version: 15.11.0 + monaco-editor: + specifier: ^0.52.2 + version: 0.52.2 sass-embedded: specifier: ^1.80.4 version: 1.80.4 @@ -443,6 +452,10 @@ packages: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} engines: {node: '>= 8'} + '@pkgr/core@0.1.1': + resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==} + engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0} + '@rollup/rollup-android-arm-eabi@4.24.0': resolution: {integrity: sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==} cpu: [arm] @@ -805,6 +818,26 @@ packages: resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} engines: {node: '>=10'} + eslint-config-prettier@10.0.1: + resolution: {integrity: sha512-lZBts941cyJyeaooiKxAtzoPHTN+GbQTJFAIdQbRhA4/8whaAraEh47Whw/ZFfrjNSnlAxqfm9i0XVAEkULjCw==} + hasBin: true + peerDependencies: + eslint: '>=7.0.0' + + eslint-plugin-prettier@5.2.2: + resolution: {integrity: sha512-1yI3/hf35wmlq66C8yOyrujQnel+v5l1Vop5Cl2I6ylyNTT1JbuUUnV3/41PzwTzcyDp/oF0jWE3HXvcH5AQOQ==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + '@types/eslint': '>=8.0.0' + eslint: '>=8.0.0' + eslint-config-prettier: '*' + prettier: '>=3.0.0' + peerDependenciesMeta: + '@types/eslint': + optional: true + eslint-config-prettier: + optional: true + eslint-plugin-react-hooks@5.0.0: resolution: {integrity: sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==} engines: {node: '>=10'} @@ -861,6 +894,9 @@ packages: fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + fast-diff@1.3.0: + resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==} + fast-glob@3.3.2: resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} engines: {node: '>=8.6.0'} @@ -1028,8 +1064,8 @@ packages: moment@2.30.1: resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==} - monaco-editor@0.52.0: - resolution: {integrity: sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==} + monaco-editor@0.52.2: + resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==} ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -1094,6 +1130,15 @@ packages: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} + prettier-linter-helpers@1.0.0: + resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==} + engines: {node: '>=6.0.0'} + + prettier@3.4.2: + resolution: {integrity: sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==} + engines: {node: '>=14'} + hasBin: true + punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} @@ -1330,6 +1375,10 @@ packages: resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==} engines: {node: '>=10'} + synckit@0.9.2: + resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==} + engines: {node: ^14.18.0 || >=16.0.0} + text-table@0.2.0: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} @@ -1655,15 +1704,15 @@ snapshots: '@img/sharp-win32-x64@0.33.5': optional: true - '@monaco-editor/loader@1.4.0(monaco-editor@0.52.0)': + '@monaco-editor/loader@1.4.0(monaco-editor@0.52.2)': dependencies: - monaco-editor: 0.52.0 + monaco-editor: 0.52.2 state-local: 1.0.7 - '@monaco-editor/react@4.6.0(monaco-editor@0.52.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@monaco-editor/react@4.6.0(monaco-editor@0.52.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@monaco-editor/loader': 1.4.0(monaco-editor@0.52.0) - monaco-editor: 0.52.0 + '@monaco-editor/loader': 1.4.0(monaco-editor@0.52.2) + monaco-editor: 0.52.2 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -1679,6 +1728,8 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.17.1 + '@pkgr/core@0.1.1': {} + '@rollup/rollup-android-arm-eabi@4.24.0': optional: true @@ -2017,6 +2068,19 @@ snapshots: escape-string-regexp@4.0.0: {} + eslint-config-prettier@10.0.1(eslint@9.13.0): + dependencies: + eslint: 9.13.0 + + eslint-plugin-prettier@5.2.2(eslint-config-prettier@10.0.1(eslint@9.13.0))(eslint@9.13.0)(prettier@3.4.2): + dependencies: + eslint: 9.13.0 + prettier: 3.4.2 + prettier-linter-helpers: 1.0.0 + synckit: 0.9.2 + optionalDependencies: + eslint-config-prettier: 10.0.1(eslint@9.13.0) + eslint-plugin-react-hooks@5.0.0(eslint@9.13.0): dependencies: eslint: 9.13.0 @@ -2094,6 +2158,8 @@ snapshots: fast-deep-equal@3.1.3: {} + fast-diff@1.3.0: {} + fast-glob@3.3.2: dependencies: '@nodelib/fs.stat': 2.0.5 @@ -2232,7 +2298,7 @@ snapshots: moment@2.30.1: {} - monaco-editor@0.52.0: {} + monaco-editor@0.52.2: {} ms@2.1.3: {} @@ -2289,6 +2355,12 @@ snapshots: prelude-ls@1.2.1: {} + prettier-linter-helpers@1.0.0: + dependencies: + fast-diff: 1.3.0 + + prettier@3.4.2: {} + punycode@2.3.1: {} queue-microtask@1.2.3: {} @@ -2518,6 +2590,11 @@ snapshots: dependencies: has-flag: 4.0.0 + synckit@0.9.2: + dependencies: + '@pkgr/core': 0.1.1 + tslib: 2.8.0 + text-table@0.2.0: {} to-regex-range@5.0.1: diff --git a/src/App/AppLayout/index.tsx b/src/App/AppLayout/index.tsx index b82e963..79d41ae 100644 --- a/src/App/AppLayout/index.tsx +++ b/src/App/AppLayout/index.tsx @@ -1,4 +1,4 @@ -import { FC, ReactNode } from "react"; +import { FC, ReactNode } from 'react' import style from './style.module.scss' @@ -6,7 +6,6 @@ interface AppLayoutProp { children?: ReactNode } -export const AppLayout: FC = ({ children }) => -
- {children} -
+export const AppLayout: FC = ({ children }) => ( +
{children}
+) diff --git a/src/App/index.tsx b/src/App/index.tsx index 43fd983..4f47a61 100644 --- a/src/App/index.tsx +++ b/src/App/index.tsx @@ -1,11 +1,11 @@ -import { FC } from "react"; -import { AppLayout } from "./AppLayout"; -import { Editor } from "../Editor"; -import { TransformGrid } from "../TransformGrid"; +import { FC } from 'react' +import { AppLayout } from './AppLayout' +import { Editor } from '../Editor' +import { TransformGrid } from '../TransformGrid' -export const App: FC = () => +export const App: FC = () => ( - +) diff --git a/src/Components/Button.tsx b/src/Components/Button.tsx index e3c4834..ceaea6a 100644 --- a/src/Components/Button.tsx +++ b/src/Components/Button.tsx @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components' export const Button = styled.button` border: none; @@ -10,7 +10,7 @@ export const Button = styled.button` transition: background-color 0.25s ease-out; - &:hover { + &:hover { background-color: #da1c9b; } diff --git a/src/Components/Input.tsx b/src/Components/Input.tsx index 1aabf3e..0a50298 100644 --- a/src/Components/Input.tsx +++ b/src/Components/Input.tsx @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components' export const Input = styled.input` background-color: transparent; @@ -9,10 +9,10 @@ export const Input = styled.input` accent-color: #ff1696; box-sizing: border-box; font-size: 12px; - + width: 24px; - &[type=checkbox] { + &[type='checkbox'] { width: auto; } diff --git a/src/Components/TextArea.tsx b/src/Components/TextArea.tsx index f6724f6..fab12f4 100644 --- a/src/Components/TextArea.tsx +++ b/src/Components/TextArea.tsx @@ -1,4 +1,4 @@ -import styled from "styled-components"; +import styled from 'styled-components' export const TextArea = styled.textarea` border: none; diff --git a/src/Editor/index.tsx b/src/Editor/index.tsx index f302b41..62a3574 100644 --- a/src/Editor/index.tsx +++ b/src/Editor/index.tsx @@ -1,15 +1,16 @@ -import { createRef, FC, useEffect, useRef } from "react"; -import { Editor as MonacoEditor } from "@monaco-editor/react"; -import { useRecoilState } from "recoil"; -import { EditorValueState } from "../GlobalStates/EditorValueState"; -import { motion } from "framer-motion"; -import { VERSION } from "../version"; +import { createRef, FC, useEffect, useRef } from 'react' +import { Editor as MonacoEditor } from '@monaco-editor/react' +import { useRecoilState } from 'recoil' +import { EditorValueState } from '../GlobalStates/EditorValueState' +import { motion } from 'framer-motion' +import { VERSION } from '../version' +import { editor } from 'monaco-editor' -import style from "./style.module.scss"; +import style from './style.module.scss' export const Editor: FC = () => { const [value, setValue] = useRecoilState(EditorValueState) - const ref = useRef() + const ref = useRef() const containerRef = createRef() useEffect(() => { @@ -20,11 +21,11 @@ export const Editor: FC = () => { const rect = containerRef.current?.getBoundingClientRect() ref.current?.layout({ width: rect?.width ?? 0, - height: rect?.height ?? 0 + height: rect?.height ?? 0, }) }) }) - }, []) + }, [containerRef]) return ( { ref={containerRef} transition={{ delay: 1.5 }} initial={{ opacity: 0 }} - animate={{ opacity: 1 }}> + animate={{ opacity: 1 }} + > } value={value} language="yaml" - onMount={(v) => ref.current = v} + onMount={(v) => (ref.current = v)} onChange={(v) => setValue(v ?? '')} options={{ automaticLayout: true, lineNumbersMinChars: 3, minimap: { enabled: false }, - theme: "vs-dark", + theme: 'vs-dark', fontSize: 24, fontFamily: 'JetBrains Mono Variable', fontLigatures: true, - wordWrap: "on", + wordWrap: 'on', mouseWheelZoom: true, smoothScrolling: true, cursorSmoothCaretAnimation: 'on', cursorBlinking: 'smooth', - cursorStyle: 'line' + cursorStyle: 'line', }} - theme="vs-dark" /> + theme="vs-dark" + />
-

The PTOOLS

+

+ The PTOOLS +

v2-{VERSION}

© Minhyeok Park

diff --git a/src/GlobalStates/EditorValueState.ts b/src/GlobalStates/EditorValueState.ts index 2ba4051..4127f5f 100644 --- a/src/GlobalStates/EditorValueState.ts +++ b/src/GlobalStates/EditorValueState.ts @@ -1,8 +1,12 @@ -import { atom } from "recoil"; +import { atom } from 'recoil' export const EditorValueState = atom({ key: 'editor_value', - default: JSON.stringify({ - Hello: 'world!' - }, null, 2) + default: JSON.stringify( + { + Hello: 'world!', + }, + null, + 2, + ), }) diff --git a/src/LandingAnimation/index.tsx b/src/LandingAnimation/index.tsx index d044c54..ad312eb 100644 --- a/src/LandingAnimation/index.tsx +++ b/src/LandingAnimation/index.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect, useState } from "react"; +import { FC, useEffect, useState } from 'react' import { AnimatePresence, motion, TargetAndTransition } from 'framer-motion' import style from './style.module.scss' @@ -7,7 +7,7 @@ import Suika from '../Assets/favicon.webp' export const LandingAnimation: FC = () => { const [isVisible, setVisible] = useState(true) const exitAnimation: TargetAndTransition = { - opacity: 0 + opacity: 0, } useEffect(() => { diff --git a/src/TransformGrid/index.tsx b/src/TransformGrid/index.tsx index b4c413b..a7635ec 100644 --- a/src/TransformGrid/index.tsx +++ b/src/TransformGrid/index.tsx @@ -1,22 +1,21 @@ -import { FC } from "react"; -import { motion } from "framer-motion"; +import { FC } from 'react' +import { motion } from 'framer-motion' import style from './style.module.scss' -import { TransformGridItem } from "../TransformGridItem"; -import { transforms, wrapTransform } from "../Transforms/Transform"; +import { TransformGridItem } from '../TransformGridItem' +import { transforms, wrapTransform } from '../Transforms/Transform' -export const TransformGrid: FC = () => +export const TransformGrid: FC = () => (
    - {transforms.map((transform, i) => + {transforms.map((transform, i) => ( - - - + transition={{ delay: i * 0.1 + 1.5 }} + > + - )} + ))}
+) diff --git a/src/TransformGridItem/index.tsx b/src/TransformGridItem/index.tsx index 12d2e3e..6f4c42c 100644 --- a/src/TransformGridItem/index.tsx +++ b/src/TransformGridItem/index.tsx @@ -1,22 +1,25 @@ -import { ChangeEvent, FC, useEffect, useState } from "react"; +// src/components/TransformGridItem.tsx + +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 clsx from "clsx"; -import { useRecoilState } from "recoil"; -import { EditorValueState } from "../GlobalStates/EditorValueState"; +import { Button } from '../Components/Button' +import { Input } from '../Components/Input' +// Remove TextArea import as it's no longer used +import clsx from 'clsx' +import { useRecoilState } from 'recoil' +import { EditorValueState } from '../GlobalStates/EditorValueState' import { TransformCheckboxOption, TransformIntboxOption, TransformRadioOption, TransformTextboxOption, WrappedTransform, - WrappedTransformResult -} from "../Transforms/Transform"; -import { useLocalStorage } from "@uidotdev/usehooks"; -import { AnimatePresence, motion } from "framer-motion"; + WrappedTransformResult, +} from '../Transforms/Transform' +import { useLocalStorage } from '@uidotdev/usehooks' +import { AnimatePresence, motion } from 'framer-motion' import { Tooltip } from 'react-tooltip' +import { TextArea } from '../Components/TextArea' interface TransformGridItemProp { transform: WrappedTransform @@ -25,12 +28,15 @@ interface TransformGridItemProp { export const TransformGridItem: FC = ({ transform }) => { const [value, setValue] = useRecoilState(EditorValueState) const [options, setOptions] = useState(transform.options) - const [closedToggle, setClosedToggle] = useLocalStorage(`transform_closed__${transform.name}`, false) + const [closedToggle, setClosedToggle] = useLocalStorage( + `transform_closed__${transform.name}`, + false, + ) const [result, setResult] = useState({ error: false, - value: '' + value: '', }) - + const previewDisabled = value.length > 30000 const closed = previewDisabled || closedToggle @@ -41,102 +47,102 @@ export const TransformGridItem: FC = ({ transform }) => { setResult(result) return result }) - - // trigger transform when value, option or closed state changed - useEffect(() => { - if (previewDisabled) - return + .catch((error) => { + setResult({ error: true, value: error.toString() }) + return { error: true, value: error.toString() } + }) - triggerTransform() - }, [value, options, closed]) - - // reset error state when option changed + // Trigger transform when value, option or closed state changes useEffect(() => { - if (!previewDisabled) - return + if (previewDisabled) return + + transform + .fn(value, options) + .then(setResult.bind(this)) + .catch((error) => setResult({ error: true, value: error.toString() })) + }, [value, options, closed, previewDisabled, transform]) + + // Reset error state when options change + useEffect(() => { + if (!previewDisabled) return setResult({ error: false, - value: '' + value: '', }) - }, [options]) + }, [options, previewDisabled]) - // forcely disable preview when value is longer than 30,000 chars + // Force disable preview when value is longer than 30,000 chars useEffect(() => { if (previewDisabled) { setResult({ error: false, - value: '' + value: '', }) return } - triggerTransform() - }, [value]) + transform + .fn(value, options) + .then(setResult.bind(this)) + .catch((error) => setResult({ error: true, value: error.toString() })) + }, [value, previewDisabled, transform, options]) const onCheckboxOptionChanged = (option: TransformCheckboxOption) => (event: ChangeEvent) => { - - options.set(option.key, { - ...option, - value: event.target.checked - }) + options.set(option.key, { + ...option, + value: event.target.checked, + }) - setOptions(new Map(options)) - } + setOptions(new Map(options)) + } - const onTextboxOptionChanged = (option: TransformTextboxOption) => (event: ChangeEvent) => { - - options.set(option.key, { - ...option, - value: event.target.value - }) + options.set(option.key, { + ...option, + value: event.target.value, + }) + + setOptions(new Map(options)) + } - setOptions(new Map(options)) - } - const onIntboxOptionChanged = (option: TransformIntboxOption) => (event: ChangeEvent) => { - - options.set(option.key, { - ...option, - value: parseInt(event.target.value) - }) + options.set(option.key, { + ...option, + value: parseInt(event.target.value), + }) + + setOptions(new Map(options)) + } - setOptions(new Map(options)) - } - const onRadioOptionChanged = (option: TransformRadioOption) => (event: ChangeEvent) => { - - options.set(option.key, { - ...option, - value: event.target.value - }) + options.set(option.key, { + ...option, + value: event.target.value, + }) - setOptions(new Map(options)) - } + setOptions(new Map(options)) + } const onForwardButtonPressed = async () => { - const result = - await triggerTransform() + const result = await triggerTransform() - if (result.error) - return + if (result.error) return setValue(result.value) } const onLabelClicked = async () => { - if (previewDisabled) - return - + if (previewDisabled) return + setClosedToggle(!closed) } @@ -144,25 +150,26 @@ export const TransformGridItem: FC = ({ transform }) => {
-
- + {previewDisabled && result.error && result.value} - +

- + className={clsx(style.name, previewDisabled && style.previewDisabled)} + > {transform.name}

- +
{[...options.values()] ?.filter((v) => v.type === 'CHECKBOX') @@ -173,9 +180,11 @@ export const TransformGridItem: FC = ({ transform }) => { - ))} - + type="checkbox" + /> + + ))} + {[...options.values()] ?.filter((v) => v.type === 'TEXTBOX') .map((option, i) => ( @@ -185,10 +194,11 @@ export const TransformGridItem: FC = ({ transform }) => { - ))} + type="text" + /> + + ))} - {[...options.values()] ?.filter((v) => v.type === 'INTBOX') .map((option, i) => ( @@ -199,17 +209,19 @@ export const TransformGridItem: FC = ({ transform }) => { min={1} value={option.value} onChange={onIntboxOptionChanged(option)} - type="number" /> - ))} + type="number" + /> + + ))} - {[...options.values()] ?.filter((v) => v.type === 'RADIO') .map((option, i) => (
+ className={style.optionItem} + > {option.radios.map((radio, i2) => ( ))} - -
))} +
+ ))}
- {!closed && + {!closed && ( + className={style.output} + >