refactor: upload temp

2024-10-26 17:57:34 +09:00 · 2024-10-26 17:57:34 +09:00 · beba067305
commit beba067305
parent aa4cfabe11
34 changed files with 3030 additions and 307 deletions
--- a/.gitignore
+++ b/.gitignore
@ -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?
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,3 +0,0 @@
-{
-  "livePreview.defaultPreviewPath": "/index.html"
-}
--- a/README.md
+++ b/README.md
@ -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,
+  },
+})
+```
--- a/app.html
+++ b/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 &copy;</p><textarea placeholder="Yea 'Reinventing the wheel' but Improved.&#10;&#10;(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>
--- a/eslint.config.js
+++ b/eslint.config.js
@ -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 },
+      ],
+    },
+  },
+)
--- a/index.html
+++ b/index.html
@ -1,53 +1,18 @@
-<!DOCTYPE html>
+<!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/normalize.css/normalize.css">
-    <link rel="shortcut icon" href="/favicon.webp" type="image/webp">
-    <link rel="stylesheet" href="/node_modules/@fontsource-variable/jetbrains-mono/index.css">
-    <title>THE PTOOLS</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/webp" href="/favicon.webp" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>The PTOOLS</title>
  </head>
  <body>
-    <img src="/favicon.webp">
-    <button>The PTOOLS</button>
-    <span>This website is currently disabled :)</span>
-
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
    <style>
      :root {
        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>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
@ -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"
-      }
-    }
-  }
-}
--- a/package.json
+++ b/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": {
    "@fontsource-variable/jetbrains-mono": "^5.1.1",
-    "json5": "^2.2.3",
-    "monaco-editor": "^0.52.0",
+    "@monaco-editor/react": "^4.6.0",
+    "framer-motion": "^11.11.10",
    "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"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.webp
+++ b/public/favicon.webp
--- a/src/App/AppLayout/index.tsx
+++ b/src/App/AppLayout/index.tsx
@ -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>
--- a/src/App/AppLayout/style.module.scss
+++ b/src/App/AppLayout/style.module.scss
@ -0,0 +1,16 @@
+.container {
+  display: flex;
+
+  width: 100vw;
+  height: 100dvh;
+
+  > * {
+    flex: 1;
+  }
+
+  @media (max-width: 1200px) {
+    & {
+      flex-direction: column;
+    }
+  }
+}
--- a/src/App/index.tsx
+++ b/src/App/index.tsx
@ -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>
+  
--- a/src/Assets/favicon.webp
+++ b/src/Assets/favicon.webp
--- a/src/Components/Button.tsx
+++ b/src/Components/Button.tsx
@ -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;
+  }
+`
--- a/src/Components/Input.tsx
+++ b/src/Components/Input.tsx
@ -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;
+  }
+`
--- a/src/Components/TextArea.tsx
+++ b/src/Components/TextArea.tsx
@ -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;
+  }
+`
--- a/src/Editor/index.tsx
+++ b/src/Editor/index.tsx
@ -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>
+  )
+}
--- a/src/GlobalStates/EditorValueState.ts
+++ b/src/GlobalStates/EditorValueState.ts
@ -0,0 +1,8 @@
+import { atom } from "recoil";
+
+export const EditorValueState = atom({
+  key: 'editor_value',
+  default: JSON.stringify({
+    Hello: 'world!'
+  }, null, 2)
+})
--- a/src/LandingAnimation/index.tsx
+++ b/src/LandingAnimation/index.tsx
@ -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>
+  )
+}
--- a/src/LandingAnimation/style.module.scss
+++ b/src/LandingAnimation/style.module.scss
@ -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;
+  }
+}
--- a/src/TransformGrid/index.tsx
+++ b/src/TransformGrid/index.tsx
@ -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>
--- a/src/TransformGrid/style.module.scss
+++ b/src/TransformGrid/style.module.scss
@ -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;
+}
--- a/src/TransformGridItem/index.tsx
+++ b/src/TransformGridItem/index.tsx
@ -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>&lt;&lt;&lt;</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>
+  )
+}
--- a/src/TransformGridItem/style.module.scss
+++ b/src/TransformGridItem/style.module.scss
@ -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;
+      }
+    }
+  }
+}
--- a/src/Transforms/Base64DecodeTransform.ts
+++ b/src/Transforms/Base64DecodeTransform.ts
@ -0,0 +1,6 @@
+import { Transform } from "./Transform";
+
+export const Base64DecodeTransform: Transform = {
+  name: 'base64d',
+  fn: () => 'Hello, world!'
+}
--- a/src/Transforms/Transform.ts
+++ b/src/Transforms/Transform.ts
@ -0,0 +1,12 @@
+import { Base64DecodeTransform } from "./Base64DecodeTransform"
+
+export interface Transform {
+  name: string
+  fn: () => string
+}
+
+export const transforms: Transform[] = [
+  Base64DecodeTransform,
+  Base64DecodeTransform,
+  Base64DecodeTransform,
+]
--- a/src/main.css
+++ b/src/main.css
@ -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;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -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>,
+)
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -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"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -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"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})