feat: add square brackets to curly braces converter

.github/workflows/nextjs.yml

@@ -0,0 +1,95 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["master"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "16"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Export with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next export
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

components/Navigator.tsx

@@ -75,7 +75,7 @@ export default function Navigator() {
         })}
       </Pane>
 
-      <Pane borderTop>
+      {/* <Pane borderTop>
         <a
           href="https://vercel.com?utm_source=ritz078&utm_campaign=oss"
           target="_blank"
@@ -96,7 +96,7 @@ export default function Navigator() {
             @ritz078
           </a>
         </Heading>
-      </Pane>
+      </Pane> */}
     </Pane>
   );
 }

constants/data.ts

@@ -530,3 +530,14 @@ pub contract Example {
   }
 }
 `;
+export const square = `[
+    [1, 2, 3],
+    [2, 3, 1],
+    [3, 1, 2],
+]`;
+
+export const index = "Hello, World!";
+
+export const stringjson = '"{\\"name\\":\\"Tom\\",\\"age\\":18}"';
+
+export const jsonformat = `{ "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }`;

next.config.js

@@ -43,4 +43,6 @@ const config = {
   }
 };
 
+config.output = "export";
+
 module.exports = config;

package.json

@@ -12,7 +12,8 @@
     "build": "next build",
     "now-build": "next build",
     "postinstall": "patch-package",
-    "build:analyze": "ANALYZE=true yarn build"
+    "build:analyze": "ANALYZE=true yarn build",
+    "export": "next export"
   },
   "engines": {
     "node": "16.x"

pages/_app.tsx

@@ -110,15 +110,15 @@ export default function App(props) {
               display: "inline-block",
               height: 20
             }}
-            href="https://github.com/ritz078/transform"
+            href="https://github.com/NoFacePeace/transform"
           >
             <img
-              src="https://img.shields.io/github/stars/ritz078/transform?style=social"
+              src="https://img.shields.io/github/stars/NoFacePeace/transform?style=social"
               alt=""
             />
           </a>
 
-          <a href="https://github.com/ritz078/transform" target="_blank">
+          <a href="https://github.com/NoFacePeace/transform" target="_blank">
             <Button
               appearance="minimal"
               height={40}

pages/index.tsx

@@ -1,56 +1,19 @@
-import * as React from "react";
-import { SvgConverter } from "@components/SvgConverter";
-import { useState } from "react";
-import { defaultSettings, formFields } from "@constants/svgoConfig";
+import EditorPanel from "@components/EditorPanel";
 import { useCallback } from "react";
-import { Transformer } from "@components/ConversionPanel";
-import isSvg from "is-svg";
-import { getWorker } from "@utils/workerWrapper";
-import SvgrWorker from "@workers/svgr.worker";
-import SvgoWorker from "@workers/svgo.worker";
+import * as React from "react";
 
-let prettier, svgo, svgr;
 export default function Index() {
-  const name = "SVG to JSX";
-  const [settings, setSettings] = useState(defaultSettings);
-  const [optimizedValue, setOptimizedValue] = useState("");
-
-  const transformer = useCallback<Transformer>(
-    async ({ value }) => {
-      if (!isSvg(value)) throw new Error("This is not a valid svg code.");
-
-      svgr = svgr || getWorker(SvgrWorker);
-      svgo = svgo || getWorker(SvgoWorker);
-
-      let _value = value;
-
-      if (settings.optimizeSvg) {
-        _value = await svgo.send({
-          value,
-          settings
-        });
-      }
-
-      setOptimizedValue(_value);
-
-      _value = await svgr.send({
-        value: _value
-      });
-
-      return _value;
-    },
-    [settings]
-  );
+  const transformer = useCallback(async ({ value }) => {
+    return value;
+  }, []);
 
   return (
-    <SvgConverter
-      transformer={transformer}
-      formFields={formFields(defaultSettings)}
-      setSettings={setSettings}
-      optimizedValue={optimizedValue}
-      settings={settings}
-      name={name}
-      resultTitle={"JSX"}
+    <EditorPanel
+      language="plaintext"
+      hasLoad
+      defaultValue="Hello, World!"
+      title="Home"
+      id={0}
     />
   );
 }

pages/json-to-format.tsx

@@ -0,0 +1,21 @@
+import ConversionPanel from "@components/ConversionPanel";
+import { useCallback } from "react";
+import * as React from "react";
+
+export default function JsonToYaml() {
+  const transformer = useCallback(
+    ({ value }) => Promise.resolve(JSON.stringify(JSON.parse(value))),
+    []
+  );
+
+  return (
+    <ConversionPanel
+      transformer={transformer}
+      editorTitle="JSON"
+      editorLanguage="json"
+      editorDefaultValue="jsonformat"
+      resultTitle="Format"
+      resultLanguage={"json"}
+    />
+  );
+}

pages/square-to-curly.tsx

@@ -0,0 +1,23 @@
+import ConversionPanel from "@components/ConversionPanel";
+import { useCallback } from "react";
+import * as React from "react";
+
+export default function SquareToCurly() {
+  const transformer = useCallback(async ({ value }) => {
+    if (typeof value === "string") {
+      return value.replace(/\[/g, "{").replace(/\]/g, "}");
+    }
+    return "";
+  }, []);
+
+  return (
+    <ConversionPanel
+      transformer={transformer}
+      editorTitle="Square Brackets"
+      editorDefaultValue="square"
+      editorLanguage="plaintext"
+      resultTitle="Curly Braces"
+      resultLanguage={"plaintext"}
+    />
+  );
+}

pages/string-to-json.tsx

@@ -0,0 +1,22 @@
+import ConversionPanel from "@components/ConversionPanel";
+import { useCallback } from "react";
+import * as React from "react";
+
+export default function JsonToYaml() {
+  const transformer = useCallback(
+    ({ value }) =>
+      Promise.resolve(JSON.stringify(JSON.parse(JSON.parse(value)))),
+    []
+  );
+
+  return (
+    <ConversionPanel
+      transformer={transformer}
+      editorTitle="String"
+      editorLanguage="plaintext"
+      editorDefaultValue="stringjson"
+      resultTitle="JSON"
+      resultLanguage={"json"}
+    />
+  );
+}

pages/svg-to-jsx.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { SvgConverter } from "@components/SvgConverter";
+import { useState } from "react";
+import { defaultSettings, formFields } from "@constants/svgoConfig";
+import { useCallback } from "react";
+import { Transformer } from "@components/ConversionPanel";
+import isSvg from "is-svg";
+import { getWorker } from "@utils/workerWrapper";
+import SvgrWorker from "@workers/svgr.worker";
+import SvgoWorker from "@workers/svgo.worker";
+
+let prettier, svgo, svgr;
+export default function Index() {
+  const name = "SVG to JSX";
+  const [settings, setSettings] = useState(defaultSettings);
+  const [optimizedValue, setOptimizedValue] = useState("");
+
+  const transformer = useCallback<Transformer>(
+    async ({ value }) => {
+      if (!isSvg(value)) throw new Error("This is not a valid svg code.");
+
+      svgr = svgr || getWorker(SvgrWorker);
+      svgo = svgo || getWorker(SvgoWorker);
+
+      let _value = value;
+
+      if (settings.optimizeSvg) {
+        _value = await svgo.send({
+          value,
+          settings
+        });
+      }
+
+      setOptimizedValue(_value);
+
+      _value = await svgr.send({
+        value: _value
+      });
+
+      return _value;
+    },
+    [settings]
+  );
+
+  return (
+    <SvgConverter
+      transformer={transformer}
+      formFields={formFields(defaultSettings)}
+      setSettings={setSettings}
+      optimizedValue={optimizedValue}
+      settings={settings}
+      name={name}
+      resultTitle={"JSX"}
+    />
+  );
+}