This commit is contained in:
parent
aa4cfabe11
commit
beba067305
SSH Key Fingerprint:
SHA256:g/OyGvi2pcd8ub9mqge/ohmDP0fZX/xOPWPIcM+9XpI
25
.gitignore
vendored
25
.gitignore
vendored
@ -1 +1,24 @@
|
|||||||
node_modules/
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|||||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@ -1,3 +0,0 @@
|
|||||||
{
|
|
||||||
"livePreview.defaultPreviewPath": "/index.html"
|
|
||||||
}
|
|
||||||
50
README.md
Normal file
50
README.md
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||||
|
|
||||||
|
- Configure the top-level `parserOptions` property like this:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default tseslint.config({
|
||||||
|
languageOptions: {
|
||||||
|
// other options...
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
|
||||||
|
- Optionally add `...tseslint.configs.stylisticTypeChecked`
|
||||||
|
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// eslint.config.js
|
||||||
|
import react from 'eslint-plugin-react'
|
||||||
|
|
||||||
|
export default tseslint.config({
|
||||||
|
// Set the react version
|
||||||
|
settings: { react: { version: '18.3' } },
|
||||||
|
plugins: {
|
||||||
|
// Add the react plugin
|
||||||
|
react,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
// other rules...
|
||||||
|
// Enable its recommended rules
|
||||||
|
...react.configs.recommended.rules,
|
||||||
|
...react.configs['jsx-runtime'].rules,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
206
app.html
206
app.html
@ -1,206 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link rel="stylesheet" href="/node_modules/@fontsource-variable/jetbrains-mono/index.css">
|
|
||||||
<link rel="stylesheet" href="/node_modules/normalize.css/normalize.css">
|
|
||||||
<link rel="shortcut icon" href="/favicon.webp" type="image/webp">
|
|
||||||
<title>THE PTOOLS - this is not a cheat bro</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="container">
|
|
||||||
<div id="main"></div>
|
|
||||||
<div id="q">
|
|
||||||
<div id="r"><p><button>The PTOOLS</button> by Minhyeok Park ©</p><textarea placeholder="Yea 'Reinventing the wheel' but Improved. (take a note here)"></textarea></div>
|
|
||||||
<div id="r"><p><button onclick="btn('regexp')"><<<</button> regexp</p><textarea id="regexp"></textarea></div>
|
|
||||||
<div id="r"><p><button onclick="btn('base64d')"><<<</button> base64d</p><textarea id="base64d"></textarea></div>
|
|
||||||
<div id="r"><p><button onclick="btn('base64e')"><<<</button> base64e</p><textarea id="base64e"></textarea></div>
|
|
||||||
<div id="r"><p><button onclick="btn('urid')"><<<</button> urid (cmp: <input id="uridcmp" style="width: 20px;" type="checkbox">)</p><textarea id="urid"></textarea></div>
|
|
||||||
<div id="r"><p><button onclick="btn('urie')"><<<</button> urie (cmp: <input id="uriecmp" style="width: 20px;" type="checkbox">)</p><textarea id="urie"></textarea></div>
|
|
||||||
<div id="r"><p><button onclick="btn('jsonbtf')"><<<</button> jsonbtf (sp: <input id="jsonbtfsp" style="width: 20px;" value="4">)</p><textarea id="jsonbtf"></textarea></div>
|
|
||||||
<div id="r"><p><button onclick="btn('jsonsmp')"><<<</button> jsonsmp</p><textarea id="jsonsmp"></textarea></div>
|
|
||||||
<div id="r"><p><button onclick="btn('json2yml')"><<<</button> json2yml</p><textarea id="json2yml"></textarea></div>
|
|
||||||
<div id="r"><p><button onclick="btn('yml2json')"><<<</button> yml2json</p><textarea id="yml2json"></textarea></div>
|
|
||||||
<div id="r"><p><button onclick="btn('escape')"><<<</button> escape</p><textarea id="escape"></textarea></div>
|
|
||||||
<div id="r"><p><button onclick="btn('unescape')"><<<</button> unescape</p><textarea id="unescape"></textarea></div>
|
|
||||||
<div id="r"><p><button onclick="btn('gzipd')"><<<</button> gzipd</p><textarea id="gzipd"></textarea></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
background-color: #212121;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body, #container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container {
|
|
||||||
display: flex;
|
|
||||||
color: #fafafa;
|
|
||||||
background-color: #212121;
|
|
||||||
font-family: 'JetBrains Mono Variable', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container > * {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main {
|
|
||||||
background-color: #1e1e1e;
|
|
||||||
}
|
|
||||||
|
|
||||||
#q {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
max-height: 100%;
|
|
||||||
overflow-x: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
#q > * {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#r {
|
|
||||||
display: flex;
|
|
||||||
min-height: 200px;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: #1e1e1e;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#r > textarea {
|
|
||||||
flex: 1;
|
|
||||||
border: none;
|
|
||||||
resize: none;
|
|
||||||
background-color: transparent;
|
|
||||||
color: #fafafa;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#r > textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#r > p {
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #323232;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#r button {
|
|
||||||
border: none;
|
|
||||||
padding: 6px 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: #ff1696;
|
|
||||||
color: white;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#r button:hover {
|
|
||||||
background-color: #da1c9b;
|
|
||||||
}
|
|
||||||
|
|
||||||
#r input {
|
|
||||||
background-color: transparent;
|
|
||||||
color: #fafafa;
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid #fafafa;
|
|
||||||
text-align: center;
|
|
||||||
accent-color: #ff1696;
|
|
||||||
}
|
|
||||||
|
|
||||||
#r input:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script src="/node_modules/monaco-editor/min/vs/loader.js"></script>
|
|
||||||
<script type="module">
|
|
||||||
import JSON5 from '/node_modules/json5/dist/index.min.mjs'
|
|
||||||
import YAML from '/node_modules/yaml/browser/index.js'
|
|
||||||
|
|
||||||
window.history.replaceState({}, '', '/')
|
|
||||||
|
|
||||||
require.config({ paths: { vs: '/node_modules/monaco-editor/min/vs' } });
|
|
||||||
|
|
||||||
require(['vs/editor/editor.main'], function () {
|
|
||||||
var editor = monaco.editor.create(document.getElementById('main'), {
|
|
||||||
value: 'Type Something Here',
|
|
||||||
language: 'yaml',
|
|
||||||
automaticLayout: true,
|
|
||||||
minimap: { enabled: false },
|
|
||||||
fontSize: 16,
|
|
||||||
theme: "vs-dark",
|
|
||||||
scrollBeyondLastLine: false,
|
|
||||||
fontFamily: 'JetBrains Mono Variable',
|
|
||||||
fontLigatures: true,
|
|
||||||
wordWrap: true
|
|
||||||
});
|
|
||||||
|
|
||||||
async function DecompressBlob(blob2) {
|
|
||||||
const byteCharacters = atob(blob2);
|
|
||||||
const byteNumbers = new Array(byteCharacters.length);
|
|
||||||
for (let i = 0; i < byteCharacters.length; i++) {
|
|
||||||
byteNumbers[i] = byteCharacters.charCodeAt(i);
|
|
||||||
}
|
|
||||||
const byteArray = new Uint8Array(byteNumbers);
|
|
||||||
const blob = new Blob([byteArray]);
|
|
||||||
|
|
||||||
const ds = new DecompressionStream("gzip");
|
|
||||||
const decompressedStream = blob.stream().pipeThrough(ds);
|
|
||||||
return await new Response(decompressedStream).blob();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
render()
|
|
||||||
function render () {
|
|
||||||
const value = editor.getValue()
|
|
||||||
try { document.getElementById('regexp').value = value.split('\r\n\r\n').slice(0, 2).join('\n\n') + '\n\n' + ((value.split('\r\n\r\n')[1] || '').split('\r\n').map(v => JSON.stringify(new RegExp(value.split('\r\n\r\n')[0]).exec(v)?.groups)).join('\n')) } catch (err) { document.getElementById('regexp').value = err ?? '(err)' }
|
|
||||||
try { document.getElementById('base64d').value = atob(value) } catch (err) { document.getElementById('base64d').value = err ?? '(err)' }
|
|
||||||
try { document.getElementById('base64e').value = btoa(value) } catch (err) { document.getElementById('base64e').value = err ?? '(err)' }
|
|
||||||
try { document.getElementById('urid').value = document.getElementById('uridcmp').checked ? decodeURIComponent(value) : decodeURI(value) } catch (err) { document.getElementById('urid').value = err ?? '(err)' }
|
|
||||||
try { document.getElementById('urie').value = document.getElementById('uriecmp').checked ? encodeURIComponent(value) : encodeURI(value) } catch (err) { document.getElementById('urie').value = err ?? '(err)' }
|
|
||||||
try { document.getElementById('jsonbtf').value = value.split('\n').map((v) => JSON.stringify(JSON5.parse(v), null, parseInt(document.getElementById('jsonbtfsp').value))).join('\n') } catch (err) { document.getElementById('jsonbtf').value = err ?? '(err)' }
|
|
||||||
try { document.getElementById('jsonsmp').value = JSON.stringify(JSON5.parse(value)) } catch (err) { document.getElementById('jsonsmp').value = err ?? '(err)' }
|
|
||||||
try { document.getElementById('json2yml').value = YAML.stringify(JSON5.parse(value)) } catch (err) { document.getElementById('json2yml').value = err ?? '(err)' }
|
|
||||||
try { document.getElementById('yml2json').value = JSON.stringify(YAML.parse(value)) } catch (err) { document.getElementById('yml2json').value = err ?? '(err)' }
|
|
||||||
try { document.getElementById('escape').value = JSON.stringify(value) } catch (err) { document.getElementById('escape').value = err ?? '(err)' }
|
|
||||||
try { document.getElementById('unescape').value = JSON5.parse(value) } catch (err) { document.getElementById('unescape').value = err ?? '(err)' }
|
|
||||||
try { DecompressBlob(value).then((v) => v.text()).then((v) => document.getElementById('gzipd').value = v).catch((err) => document.getElementById('gzipd').value = err ?? '(err)') } catch (err) { document.getElementById('gzipd').value = err ?? '(err)' }
|
|
||||||
}
|
|
||||||
|
|
||||||
window.btn = (id) => {
|
|
||||||
const text = document.getElementById(id).value
|
|
||||||
|
|
||||||
editor.executeEdits('ptools', [{ identifier: 'delete', range: new monaco.Range(1, 1, 1000000000, 1), text: '', forceMoveMarkers: true }]);
|
|
||||||
editor.executeEdits('ptools', [{ identifier: 'insert', range: new monaco.Range(1, 1, 1, 1), text, forceMoveMarkers: true }]);
|
|
||||||
editor.pushUndoStop()
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
document.getElementById('uridcmp').onchange = () => render()
|
|
||||||
document.getElementById('uriecmp').onchange = () => render()
|
|
||||||
document.getElementById('jsonbtfsp').oninput = () => render()
|
|
||||||
} catch{}
|
|
||||||
|
|
||||||
editor.getModel().onDidChangeContent((event) => {
|
|
||||||
render()
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
28
eslint.config.js
Normal file
28
eslint.config.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
49
index.html
49
index.html
@ -1,53 +1,18 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<link rel="icon" type="image/webp" href="/favicon.webp" />
|
||||||
<link rel="stylesheet" href="/node_modules/normalize.css/normalize.css">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="shortcut icon" href="/favicon.webp" type="image/webp">
|
<title>The PTOOLS</title>
|
||||||
<link rel="stylesheet" href="/node_modules/@fontsource-variable/jetbrains-mono/index.css">
|
|
||||||
<title>THE PTOOLS</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<img src="/favicon.webp">
|
<div id="root"></div>
|
||||||
<button>The PTOOLS</button>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
<span>This website is currently disabled :)</span>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
background-color: #212121;
|
background-color: #212121;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
user-select: none;
|
|
||||||
font-family: 'JetBrains Mono Variable', monospace;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border: none;
|
|
||||||
padding: 6px 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
background-color: #ff1696;
|
|
||||||
color: white;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
52
package-lock.json
generated
52
package-lock.json
generated
@ -1,52 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "ptools",
|
|
||||||
"lockfileVersion": 3,
|
|
||||||
"requires": true,
|
|
||||||
"packages": {
|
|
||||||
"": {
|
|
||||||
"dependencies": {
|
|
||||||
"@fontsource-variable/jetbrains-mono": "^5.1.1",
|
|
||||||
"json5": "^2.2.3",
|
|
||||||
"monaco-editor": "^0.52.0",
|
|
||||||
"normalize.css": "^8.0.1",
|
|
||||||
"yaml": "^2.6.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@fontsource-variable/jetbrains-mono": {
|
|
||||||
"version": "5.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.1.1.tgz",
|
|
||||||
"integrity": "sha512-V+1aRFRvuZ66PpO30s8l/2aADKzpV9VRsO3kSZE+rTMvi4vab3cUcPHMN2z+wAvjkYJO71Yf+g3/Y6pSMmQpVQ==",
|
|
||||||
"license": "OFL-1.1"
|
|
||||||
},
|
|
||||||
"node_modules/json5": {
|
|
||||||
"version": "2.2.3",
|
|
||||||
"license": "MIT",
|
|
||||||
"bin": {
|
|
||||||
"json5": "lib/cli.js"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=6"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/monaco-editor": {
|
|
||||||
"version": "0.52.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.0.tgz",
|
|
||||||
"integrity": "sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/normalize.css": {
|
|
||||||
"version": "8.0.1",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/yaml": {
|
|
||||||
"version": "2.6.0",
|
|
||||||
"license": "ISC",
|
|
||||||
"bin": {
|
|
||||||
"yaml": "bin.mjs"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 14"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
35
package.json
35
package.json
@ -1,9 +1,38 @@
|
|||||||
{
|
{
|
||||||
|
"name": "ptools",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fontsource-variable/jetbrains-mono": "^5.1.1",
|
"@fontsource-variable/jetbrains-mono": "^5.1.1",
|
||||||
"json5": "^2.2.3",
|
"@monaco-editor/react": "^4.6.0",
|
||||||
"monaco-editor": "^0.52.0",
|
"framer-motion": "^11.11.10",
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"yaml": "^2.6.0"
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"recoil": "^0.7.7",
|
||||||
|
"styled-components": "^6.1.13"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.13.0",
|
||||||
|
"@types/react": "^18.3.11",
|
||||||
|
"@types/react-dom": "^18.3.1",
|
||||||
|
"@vitejs/plugin-react-swc": "^3.5.0",
|
||||||
|
"eslint": "^9.13.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.0.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.13",
|
||||||
|
"globals": "^15.11.0",
|
||||||
|
"sass-embedded": "^1.80.4",
|
||||||
|
"sharp": "^0.33.5",
|
||||||
|
"typescript": "~5.6.2",
|
||||||
|
"typescript-eslint": "^8.10.0",
|
||||||
|
"vite": "^5.4.9",
|
||||||
|
"vite-plugin-image-optimizer": "^1.1.8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
2484
pnpm-lock.yaml
Normal file
2484
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.7 KiB |
12
src/App/AppLayout/index.tsx
Normal file
12
src/App/AppLayout/index.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { FC, ReactNode } from "react";
|
||||||
|
|
||||||
|
import style from './style.module.scss'
|
||||||
|
|
||||||
|
interface AppLayoutProp {
|
||||||
|
children?: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AppLayout: FC<AppLayoutProp> = ({ children }) =>
|
||||||
|
<div className={style.container}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
16
src/App/AppLayout/style.module.scss
Normal file
16
src/App/AppLayout/style.module.scss
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
width: 100vw;
|
||||||
|
height: 100dvh;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
& {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
11
src/App/index.tsx
Normal file
11
src/App/index.tsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { FC } from "react";
|
||||||
|
import { AppLayout } from "./AppLayout";
|
||||||
|
import { Editor } from "../Editor";
|
||||||
|
import { TransformGrid } from "../TransformGrid";
|
||||||
|
|
||||||
|
export const App: FC = () =>
|
||||||
|
<AppLayout>
|
||||||
|
<Editor />
|
||||||
|
<TransformGrid />
|
||||||
|
</AppLayout>
|
||||||
|
|
||||||
BIN
src/Assets/favicon.webp
Normal file
BIN
src/Assets/favicon.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
18
src/Components/Button.tsx
Normal file
18
src/Components/Button.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
export const Button = styled.button`
|
||||||
|
border: none;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: #ff1696;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #da1c9b;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:placeholder {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
`
|
||||||
22
src/Components/Input.tsx
Normal file
22
src/Components/Input.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
export const Input = styled.input`
|
||||||
|
background-color: transparent;
|
||||||
|
color: #fafafa;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid #fafafa;
|
||||||
|
text-align: center;
|
||||||
|
accent-color: #ff1696;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
width: 24px;
|
||||||
|
|
||||||
|
&[type=checkbox] {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
`
|
||||||
14
src/Components/TextArea.tsx
Normal file
14
src/Components/TextArea.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import styled from "styled-components";
|
||||||
|
|
||||||
|
export const TextArea = styled.textarea`
|
||||||
|
flex: 1;
|
||||||
|
border: none;
|
||||||
|
resize: none;
|
||||||
|
background-color: transparent;
|
||||||
|
color: #fafafa;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
`
|
||||||
39
src/Editor/index.tsx
Normal file
39
src/Editor/index.tsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { FC } from "react";
|
||||||
|
import { Editor as MonacoEditor } from "@monaco-editor/react";
|
||||||
|
import { useRecoilState } from "recoil";
|
||||||
|
import { EditorValueState } from "../GlobalStates/EditorValueState";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
export const Editor: FC = () => {
|
||||||
|
const [value, setValue] = useRecoilState(EditorValueState)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
transition={{ delay: 1.5 }}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}>
|
||||||
|
<MonacoEditor
|
||||||
|
loading={<></>}
|
||||||
|
value={value}
|
||||||
|
language="yaml"
|
||||||
|
onChange={(v) => setValue(v ?? '')}
|
||||||
|
options={{
|
||||||
|
automaticLayout: true,
|
||||||
|
lineNumbersMinChars: 3,
|
||||||
|
minimap: { enabled: false },
|
||||||
|
theme: "vs-dark",
|
||||||
|
fontSize: 24,
|
||||||
|
scrollBeyondLastLine: false,
|
||||||
|
fontFamily: 'JetBrains Mono Variable',
|
||||||
|
fontLigatures: true,
|
||||||
|
wordWrap: "on",
|
||||||
|
mouseWheelZoom: true,
|
||||||
|
smoothScrolling: true,
|
||||||
|
cursorSmoothCaretAnimation: 'on',
|
||||||
|
cursorBlinking: 'smooth',
|
||||||
|
cursorStyle: 'block'
|
||||||
|
}}
|
||||||
|
theme="vs-dark" />
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
8
src/GlobalStates/EditorValueState.ts
Normal file
8
src/GlobalStates/EditorValueState.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { atom } from "recoil";
|
||||||
|
|
||||||
|
export const EditorValueState = atom({
|
||||||
|
key: 'editor_value',
|
||||||
|
default: JSON.stringify({
|
||||||
|
Hello: 'world!'
|
||||||
|
}, null, 2)
|
||||||
|
})
|
||||||
30
src/LandingAnimation/index.tsx
Normal file
30
src/LandingAnimation/index.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { FC, useEffect, useState } from "react";
|
||||||
|
import { AnimatePresence, motion, TargetAndTransition } from 'framer-motion'
|
||||||
|
|
||||||
|
import style from './style.module.scss'
|
||||||
|
import Suika from '../Assets/favicon.webp'
|
||||||
|
|
||||||
|
export const LandingAnimation: FC = () => {
|
||||||
|
const [isVisible, setVisible] = useState(true)
|
||||||
|
const exitAnimation: TargetAndTransition = {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
setVisible(false)
|
||||||
|
}, 1000)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{isVisible && (
|
||||||
|
<motion.div exit={exitAnimation} className={style.container}>
|
||||||
|
<img src={Suika} alt="suika" />
|
||||||
|
<h1>The PTOOLS</h1>
|
||||||
|
<p>Right tools for you!</p>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
)
|
||||||
|
}
|
||||||
20
src/LandingAnimation/style.module.scss
Normal file
20
src/LandingAnimation/style.module.scss
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
.container {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
|
||||||
|
width: 100dvw;
|
||||||
|
height: 100dvh;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
22
src/TransformGrid/index.tsx
Normal file
22
src/TransformGrid/index.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { FC } from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
import style from './style.module.scss'
|
||||||
|
import { TransformGridItem } from "../TransformGridItem";
|
||||||
|
import { transforms } from "../Transforms/Transform";
|
||||||
|
|
||||||
|
export const TransformGrid: FC = () =>
|
||||||
|
<ul className={style.grid}>
|
||||||
|
{transforms.map((v, i) =>
|
||||||
|
<motion.li
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: i * 0.1 + 1.5 }} >
|
||||||
|
|
||||||
|
<TransformGridItem
|
||||||
|
transform={v}/>
|
||||||
|
|
||||||
|
</motion.li>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
10
src/TransformGrid/style.module.scss
Normal file
10
src/TransformGrid/style.module.scss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
.grid {
|
||||||
|
padding: 10px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||||
|
|
||||||
|
gap: 10px;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
30
src/TransformGridItem/index.tsx
Normal file
30
src/TransformGridItem/index.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { FC } from "react";
|
||||||
|
import style from './style.module.scss'
|
||||||
|
import { Button } from "../Components/Button";
|
||||||
|
import { Input } from "../Components/Input";
|
||||||
|
import { TextArea } from "../Components/TextArea";
|
||||||
|
import { Transform } from "../Transforms/Transform";
|
||||||
|
|
||||||
|
interface TransformGridItemProp {
|
||||||
|
transform: Transform
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TransformGridItem: FC<TransformGridItemProp> = ({ transform }) => {
|
||||||
|
return (
|
||||||
|
<div className={style.item}>
|
||||||
|
<div className={style.toolbar}>
|
||||||
|
<Button><<<</Button>
|
||||||
|
<h2 className={style.name}>{transform.name}</h2>
|
||||||
|
|
||||||
|
<div className={style.options}>
|
||||||
|
<label className={style.optionItem}>hello: <Input type="checkbox" /></label>
|
||||||
|
<label className={style.optionItem}>hello: <Input type="text" /></label>
|
||||||
|
<label className={style.optionItem}>hello: <Input type="checkbox" /></label>
|
||||||
|
<label className={style.optionItem}>hello: <Input type="checkbox" /></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TextArea placeholder="(empty)" className={style.input} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
38
src/TransformGridItem/style.module.scss
Normal file
38
src/TransformGridItem/style.module.scss
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
.item {
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
padding: 10px;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 300px;
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0px 10px;
|
||||||
|
background-color: #323232;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: inherit;
|
||||||
|
padding: 14px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
padding: 14px 2px;
|
||||||
|
gap: 10px;
|
||||||
|
height: 100%;
|
||||||
|
overflow-x: scroll;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: gray #323232;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.optionItem {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
6
src/Transforms/Base64DecodeTransform.ts
Normal file
6
src/Transforms/Base64DecodeTransform.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import { Transform } from "./Transform";
|
||||||
|
|
||||||
|
export const Base64DecodeTransform: Transform = {
|
||||||
|
name: 'base64d',
|
||||||
|
fn: () => 'Hello, world!'
|
||||||
|
}
|
||||||
12
src/Transforms/Transform.ts
Normal file
12
src/Transforms/Transform.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { Base64DecodeTransform } from "./Base64DecodeTransform"
|
||||||
|
|
||||||
|
export interface Transform {
|
||||||
|
name: string
|
||||||
|
fn: () => string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const transforms: Transform[] = [
|
||||||
|
Base64DecodeTransform,
|
||||||
|
Base64DecodeTransform,
|
||||||
|
Base64DecodeTransform,
|
||||||
|
]
|
||||||
12
src/main.css
Normal file
12
src/main.css
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
:root {
|
||||||
|
color: #fafafa;
|
||||||
|
background-color: #212121;
|
||||||
|
font-family: 'JetBrains Mono Variable', monospace;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6, p, pre, textarea, input, button, li, ul, ol {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
22
src/main.tsx
Normal file
22
src/main.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
|
||||||
|
import 'normalize.css/normalize.css'
|
||||||
|
import '@fontsource-variable/jetbrains-mono/index.css'
|
||||||
|
|
||||||
|
// ---
|
||||||
|
|
||||||
|
import './main.css'
|
||||||
|
import { App } from './App'
|
||||||
|
import { LandingAnimation } from './LandingAnimation'
|
||||||
|
import { RecoilRoot } from 'recoil'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<RecoilRoot>
|
||||||
|
<App />
|
||||||
|
|
||||||
|
<LandingAnimation />
|
||||||
|
</RecoilRoot>
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
25
tsconfig.app.json
Normal file
25
tsconfig.app.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
23
tsconfig.node.json
Normal file
23
tsconfig.node.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react-swc'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user