refactor: upload temp

feat: add disabled notice
feat: add suika icon
2024-10-26 17:57:34 +09:00 · 2024-10-26 13:50:22 +09:00 · 2024-10-18 08:09:12 +09:00 · 2024-10-17 09:18:51 +09:00 · 2024-10-17 08:59:36 +09:00 · 2024-10-16 21:44:35 +09:00
34 changed files with 3005 additions and 8877 deletions
--- a/.gitea/workflows/deploy_site.yml
+++ b/.gitea/workflows/deploy_site.yml
@ -10,7 +10,6 @@ jobs:
      - run: |
          curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
          apt-get install -y nodejs
      - run: npm i -g n && n lts
      - run: npm i
      - run: wget https://dl.min.io/client/mc/release/linux-arm64/mc -O /tmp/mc
      - run: chmod +x /tmp/mc
--- 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/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,144 +1,18 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <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/@fontsource-variable/jetbrains-mono/index.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="/node_modules/normalize.css/normalize.css">
+    <title>The PTOOLS</title>
    <title>THE PTOOLS - Better than your MOM</title>
  </head>
  <body>
-    <div id="container">
+    <div id="root"></div>
-      <div id="main"></div>
+    <script type="module" src="/src/main.tsx"></script>
      <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>
-      * {
+      :root {
        margin: 0;
        padding: 0;
      }
      html, body, #container {
        width: 100%;
        height: 100%
      }
      #container {
        display: flex;
        color: #fafafa;
        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>
 		<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>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,7 +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",
-    "monaco-editor": "^0.52.0",
+    "@monaco-editor/react": "^4.6.0",
-    "normalize.css": "^8.0.1"
+    "framer-motion": "^11.11.10",
    "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"
  }
 }
--- 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()],
 })
Author	SHA1	Message	Date
Minhyeok Park	beba067305	refactor: upload temp All checks were successful / deploy_site (push) Successful in 1m56s Details	2024-10-26 17:57:34 +09:00
Minhyeok Park	aa4cfabe11	feat: add disabled notice	2024-10-26 13:50:22 +09:00
Minhyeok Park	c845f9d98d	feat: add suika icon	2024-10-18 08:09:12 +09:00
Minhyeok Park	ed4e86b9df	fix: package locking permission issue	2024-10-17 09:18:51 +09:00
Minhyeok Park	3810815948	revert: feat: change bucket name	2024-10-17 08:59:36 +09:00
Minhyeok Park	d7be9973c7	feat: change bucket name	2024-10-16 21:44:35 +09:00
Minhyeok Park	11c6d1735e	feat: push undo state to undo stack when import string	2024-10-15 18:47:27 +09:00
Minhyeok Park	116d4173aa	feat: preserve undo-stack when pull from output	2024-10-15 17:31:00 +09:00
Minhyeok Park	1358b22a54	feat: add more style	2024-10-15 16:55:07 +09:00
Minhyeok Park	b40e6313b3	feat: no n lts command!	2024-10-15 16:38:30 +09:00