Compare commits
No commits in common. "beba06730503feaf9c6a36bb1eba41651422bae4" and "931ba0f1c153318fbaa9367d99e17479ec2e2d22" have entirely different histories.
beba067305
...
931ba0f1c1
@ -10,6 +10,7 @@ jobs:
|
|||||||
- run: |
|
- run: |
|
||||||
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
|
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
|
||||||
apt-get install -y nodejs
|
apt-get install -y nodejs
|
||||||
|
- run: npm i -g n && n lts
|
||||||
- run: npm i
|
- run: npm i
|
||||||
- run: wget https://dl.min.io/client/mc/release/linux-arm64/mc -O /tmp/mc
|
- run: wget https://dl.min.io/client/mc/release/linux-arm64/mc -O /tmp/mc
|
||||||
- run: chmod +x /tmp/mc
|
- run: chmod +x /tmp/mc
|
||||||
|
|||||||
25
.gitignore
vendored
25
.gitignore
vendored
@ -1,24 +1 @@
|
|||||||
# Logs
|
node_modules/
|
||||||
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
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"livePreview.defaultPreviewPath": "/index.html"
|
||||||
|
}
|
||||||
50
README.md
50
README.md
@ -1,50 +0,0 @@
|
|||||||
# 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,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
```
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
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 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
142
index.html
142
index.html
@ -1,18 +1,144 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8">
|
||||||
<link rel="icon" type="image/webp" href="/favicon.webp" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<link rel="stylesheet" href="/node_modules/@fontsource-variable/jetbrains-mono/index.css">
|
||||||
<title>The PTOOLS</title>
|
<link rel="stylesheet" href="/node_modules/normalize.css/normalize.css">
|
||||||
|
<title>THE PTOOLS - Better than your MOM</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="container">
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<div id="main"></div>
|
||||||
|
<div id="q">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body, #container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
display: flex;
|
||||||
|
color: #fafafa;
|
||||||
background-color: #212121;
|
background-color: #212121;
|
||||||
|
font-family: 'JetBrains Mono Variable', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container > * {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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: #1683ff;
|
||||||
|
color: white;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#r button:hover {
|
||||||
|
background-color: #1c74da;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<script src="/node_modules/monaco-editor/min/vs/loader.js"></script>
|
||||||
|
<script>
|
||||||
|
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: '',
|
||||||
|
language: 'json',
|
||||||
|
automaticLayout: true,
|
||||||
|
minimap: { enabled: false },
|
||||||
|
fontSize: 16,
|
||||||
|
theme: "vs-dark",
|
||||||
|
scrollBeyondLastLine: false,
|
||||||
|
fontFamily: 'JetBrains Mono Variable',
|
||||||
|
fontLigatures: true,
|
||||||
|
wordWrap: true
|
||||||
|
});
|
||||||
|
|
||||||
|
function render () {
|
||||||
|
const value = editor.getValue()
|
||||||
|
try { document.getElementById('base64d').value = atob(value) } catch { document.getElementById('base64d').value ='(err)' }
|
||||||
|
try { document.getElementById('base64e').value = btoa(value) } catch { document.getElementById('base64e').value ='(err)' }
|
||||||
|
try { document.getElementById('urid').value = document.getElementById('uridcmp').checked ? decodeURIComponent(value) : decodeURI(value) } catch { document.getElementById('urid').value = '(err)' }
|
||||||
|
try { document.getElementById('urie').value = document.getElementById('uriecmp').checked ? encodeURIComponent(value) : encodeURI(value) } catch { document.getElementById('urie').value = '(err)' }
|
||||||
|
try { document.getElementById('jsonbtf').value = JSON.stringify(JSON.parse(value), null, parseInt(document.getElementById('jsonbtfsp').value)) } catch { document.getElementById('jsonbtf').value ='(err)' }
|
||||||
|
try { document.getElementById('jsonsmp').value = JSON.stringify(JSON.parse(value)) } catch { document.getElementById('jsonsmp').value ='(err)' }
|
||||||
|
}
|
||||||
|
|
||||||
|
window.btn = (id) =>
|
||||||
|
editor.setValue(document.getElementById(id).value)
|
||||||
|
|
||||||
|
try {
|
||||||
|
document.getElementById('uridcmp').onchange = () => render()
|
||||||
|
document.getElementById('uriecmp').onchange = () => render()
|
||||||
|
document.getElementById('jsonbtfsp').oninput = () => render()
|
||||||
|
} catch{}
|
||||||
|
|
||||||
|
editor.getModel().onDidChangeContent((event) => {
|
||||||
|
render()
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
8733
package-lock.json
generated
Normal file
8733
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
package.json
35
package.json
@ -1,38 +1,7 @@
|
|||||||
{
|
{
|
||||||
"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",
|
||||||
"@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",
|
|
||||||
"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"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
2460
pnpm-lock.yaml
2460
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
@ -1,12 +0,0 @@
|
|||||||
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>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
width: 100vw;
|
|
||||||
height: 100dvh;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
& {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
import { FC } from "react";
|
|
||||||
import { AppLayout } from "./AppLayout";
|
|
||||||
import { Editor } from "../Editor";
|
|
||||||
import { TransformGrid } from "../TransformGrid";
|
|
||||||
|
|
||||||
export const App: FC = () =>
|
|
||||||
<AppLayout>
|
|
||||||
<Editor />
|
|
||||||
<TransformGrid />
|
|
||||||
</AppLayout>
|
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
@ -1,18 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import { atom } from "recoil";
|
|
||||||
|
|
||||||
export const EditorValueState = atom({
|
|
||||||
key: 'editor_value',
|
|
||||||
default: JSON.stringify({
|
|
||||||
Hello: 'world!'
|
|
||||||
}, null, 2)
|
|
||||||
})
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
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>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import { Transform } from "./Transform";
|
|
||||||
|
|
||||||
export const Base64DecodeTransform: Transform = {
|
|
||||||
name: 'base64d',
|
|
||||||
fn: () => 'Hello, world!'
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
import { Base64DecodeTransform } from "./Base64DecodeTransform"
|
|
||||||
|
|
||||||
export interface Transform {
|
|
||||||
name: string
|
|
||||||
fn: () => string
|
|
||||||
}
|
|
||||||
|
|
||||||
export const transforms: Transform[] = [
|
|
||||||
Base64DecodeTransform,
|
|
||||||
Base64DecodeTransform,
|
|
||||||
Base64DecodeTransform,
|
|
||||||
]
|
|
||||||
12
src/main.css
12
src/main.css
@ -1,12 +0,0 @@
|
|||||||
: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
22
src/main.tsx
@ -1,22 +0,0 @@
|
|||||||
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
1
src/vite-env.d.ts
vendored
@ -1 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
{
|
|
||||||
"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"]
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"files": [],
|
|
||||||
"references": [
|
|
||||||
{ "path": "./tsconfig.app.json" },
|
|
||||||
{ "path": "./tsconfig.node.json" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
{
|
|
||||||
"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"]
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
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