renewal

recreate project by using https://github.com/shadcn/next-template

App:
- support dark mode
- add toggle theme button
- add clear search button
- add search button
- add current page indicator
- add tool group pages
- add settings tool
- add 1 tab format option to Json format tool
- add paste button to some tools
- add file button to some tools
- add copy button to some tools
- add clear button to some tools
- change favicon
- change search hit rate
- change each page title
- change icons from Material Icons to Lucide
- change sidebar scroll area
- change editor from Ace to Monaco
- change parsable separators of number base converter
- change default value of format option of number base converter
- change default values of some tool forms
- change some styles
- remove disabled tools
- remove real-time search
- fix uri encoding tool

Dev:
- MUI + Emotion -> Radix UI + Tailwind CSS
- Next.js 12 Pages -> Next.js 13 App Router
- React 17 -> React 18
- many other packages upgraded
- use useState instead of recoil
- use Next.js typedRoutes instead of pathpida
- clean npm scripts
- format import statements by Prettier
- no component separations between container and presenter
- effective component memoizations
- add vscode settings
- many refactors

app/encoders-decoders/base64/layout.tsx

@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+import { toolGroups } from "@/config/tools";
+
+export const metadata: Metadata = {
+  title: toolGroups.encodersDecoders.tools.base64.longTitle,
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

app/encoders-decoders/base64/page.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { decode, encode, isValid } from "js-base64";
+
+import { toolGroups } from "@/config/tools";
+import { Textarea, TextareaProps } from "@/components/ui/textarea";
+import { ClearButton } from "@/components/buttons/clear";
+import { CopyButton } from "@/components/buttons/copy";
+import { FileButton } from "@/components/buttons/file";
+import { PasteButton } from "@/components/buttons/paste";
+import { ControlMenu } from "@/components/control-menu";
+import { PageRootSection } from "@/components/page-root-section";
+import { PageSection } from "@/components/page-section";
+
+export default function Page() {
+  const [decoded, setDecoded] = useState("😀😂🤣");
+  const [encoded, setEncoded] = useState("8J+YgPCfmILwn6Sj");
+
+  const setDecodedReactively = useCallback((text: string) => {
+    setDecoded(text);
+    setEncoded(encode(text));
+  }, []);
+
+  const setEncodedReactively = useCallback((text: string) => {
+    setEncoded(text);
+
+    const newDecoded = decode(text);
+
+    if (isValid(text) && !newDecoded.includes("<22>")) {
+      setDecoded(newDecoded);
+    } else {
+      setDecoded("");
+    }
+  }, []);
+
+  const clearBoth = useCallback(() => {
+    setDecoded("");
+    setEncoded("");
+  }, []);
+
+  const onDecodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
+    setDecodedReactively(value);
+
+  const onEncodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
+    setEncodedReactively(value);
+
+  const decodedPasteButton = useMemo(
+    () => <PasteButton onClipboardRead={setDecodedReactively} />,
+    [setDecodedReactively]
+  );
+
+  const encodedPasteButton = useMemo(
+    () => <PasteButton onClipboardRead={setEncodedReactively} />,
+    [setEncodedReactively]
+  );
+
+  const decodedFileButton = useMemo(
+    () => (
+      <FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
+    ),
+    [setDecodedReactively]
+  );
+
+  const encodedFileButton = useMemo(
+    () => (
+      <FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
+    ),
+    [setEncodedReactively]
+  );
+
+  const decodedCopyButton = useMemo(() => <CopyButton text={decoded} />, [decoded]);
+  const encodedCopyButton = useMemo(() => <CopyButton text={encoded} />, [encoded]);
+
+  const clearButton = useMemo(
+    () => <ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />,
+    [clearBoth]
+  );
+
+  const decodedControl = (
+    <ControlMenu list={[decodedPasteButton, decodedFileButton, decodedCopyButton, clearButton]} />
+  );
+
+  const encodedControl = (
+    <ControlMenu list={[encodedPasteButton, encodedFileButton, encodedCopyButton, clearButton]} />
+  );
+
+  return (
+    <PageRootSection title={toolGroups.encodersDecoders.tools.base64.longTitle}>
+      <PageSection title="Decoded" control={decodedControl}>
+        <Textarea value={decoded} onChange={onDecodedChange} rows={10} />
+      </PageSection>
+      <PageSection title="Encoded" control={encodedControl}>
+        <Textarea value={encoded} onChange={onEncodedChange} rows={10} />
+      </PageSection>
+    </PageRootSection>
+  );
+}

app/encoders-decoders/html/layout.tsx

@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+import { toolGroups } from "@/config/tools";
+
+export const metadata: Metadata = {
+  title: toolGroups.encodersDecoders.tools.html.longTitle,
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

app/encoders-decoders/html/page.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { decode, encode } from "html-entities";
+
+import { toolGroups } from "@/config/tools";
+import { Textarea, TextareaProps } from "@/components/ui/textarea";
+import { ClearButton } from "@/components/buttons/clear";
+import { CopyButton } from "@/components/buttons/copy";
+import { FileButton } from "@/components/buttons/file";
+import { PasteButton } from "@/components/buttons/paste";
+import { ControlMenu } from "@/components/control-menu";
+import { PageRootSection } from "@/components/page-root-section";
+import { PageSection } from "@/components/page-section";
+
+export default function Page() {
+  const [decoded, setDecoded] = useState('> It\'s "HTML escaping".');
+  const [encoded, setEncoded] = useState("> It's "HTML escaping".");
+
+  const setDecodedReactively = useCallback((text: string) => {
+    setDecoded(text);
+    setEncoded(encode(text));
+  }, []);
+
+  const setEncodedReactively = useCallback((text: string) => {
+    setEncoded(text);
+    setDecoded(decode(text));
+  }, []);
+
+  const clearBoth = useCallback(() => {
+    setDecoded("");
+    setEncoded("");
+  }, []);
+
+  const onDecodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
+    setDecodedReactively(value);
+
+  const onEncodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
+    setEncodedReactively(value);
+
+  const decodedPasteButton = useMemo(
+    () => <PasteButton onClipboardRead={setDecodedReactively} />,
+    [setDecodedReactively]
+  );
+
+  const encodedPasteButton = useMemo(
+    () => <PasteButton onClipboardRead={setEncodedReactively} />,
+    [setEncodedReactively]
+  );
+
+  const decodedFileButton = useMemo(
+    () => (
+      <FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
+    ),
+    [setDecodedReactively]
+  );
+
+  const encodedFileButton = useMemo(
+    () => (
+      <FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
+    ),
+    [setEncodedReactively]
+  );
+
+  const decodedCopyButton = useMemo(() => <CopyButton text={decoded} />, [decoded]);
+  const encodedCopyButton = useMemo(() => <CopyButton text={encoded} />, [encoded]);
+
+  const clearButton = useMemo(
+    () => <ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />,
+    [clearBoth]
+  );
+
+  const decodedControl = (
+    <ControlMenu list={[decodedPasteButton, decodedFileButton, decodedCopyButton, clearButton]} />
+  );
+
+  const encodedControl = (
+    <ControlMenu list={[encodedPasteButton, encodedFileButton, encodedCopyButton, clearButton]} />
+  );
+
+  return (
+    <PageRootSection title={toolGroups.encodersDecoders.tools.html.longTitle}>
+      <PageSection title="Decoded" control={decodedControl}>
+        <Textarea value={decoded} onChange={onDecodedChange} rows={10} />
+      </PageSection>
+      <PageSection title="Encoded" control={encodedControl}>
+        <Textarea value={encoded} onChange={onEncodedChange} rows={10} />
+      </PageSection>
+    </PageRootSection>
+  );
+}

app/encoders-decoders/jwt/layout.tsx

@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+import { toolGroups } from "@/config/tools";
+
+export const metadata: Metadata = {
+  title: toolGroups.encodersDecoders.tools.jwt.longTitle,
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

app/encoders-decoders/jwt/page.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+
+import { toolGroups } from "@/config/tools";
+import { decode } from "@/lib/jwt";
+import { Editor } from "@/components/ui/editor";
+import { Textarea, TextareaProps } from "@/components/ui/textarea";
+import { ClearButton } from "@/components/buttons/clear";
+import { CopyButton } from "@/components/buttons/copy";
+import { FileButton } from "@/components/buttons/file";
+import { PasteButton } from "@/components/buttons/paste";
+import { ControlMenu } from "@/components/control-menu";
+import { PageRootSection } from "@/components/page-root-section";
+import { PageSection } from "@/components/page-section";
+
+export default function Page() {
+  const [jwt, setJwt] = useState(
+    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
+  );
+
+  const { headerObj, payloadObj } = decode(jwt);
+  const header = JSON.stringify(headerObj, null, 2) ?? "";
+  const payload = JSON.stringify(payloadObj, null, 2) ?? "";
+
+  const clearJwt = useCallback(() => setJwt(""), []);
+
+  const onJwtChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) => setJwt(value);
+
+  const jwtTokenPasteButton = useMemo(() => <PasteButton onClipboardRead={setJwt} />, [setJwt]);
+
+  const jwtTokenFileButton = useMemo(
+    () => <FileButton onFileRead={setJwt} iconOnly aria-label="load a token file" />,
+    [setJwt]
+  );
+
+  const jwtTokenClearButton = useMemo(
+    () => <ClearButton onClick={clearJwt} iconOnly aria-label="clear token" />,
+    [clearJwt]
+  );
+
+  const heaederCopyButton = useMemo(() => <CopyButton text={header} />, [header]);
+  const payloadCopyButton = useMemo(() => <CopyButton text={payload} />, [payload]);
+
+  const jwtTokenControl = (
+    <ControlMenu list={[jwtTokenPasteButton, jwtTokenFileButton, jwtTokenClearButton]} />
+  );
+
+  const heaederControl = <ControlMenu list={[heaederCopyButton]} />;
+  const payloadControl = <ControlMenu list={[payloadCopyButton]} />;
+
+  return (
+    <PageRootSection title={toolGroups.encodersDecoders.tools.jwt.longTitle}>
+      <PageSection title="Jwt Token" control={jwtTokenControl}>
+        <Textarea value={jwt} onChange={onJwtChange} rows={3} />
+      </PageSection>
+      <PageSection title="Header" control={heaederControl}>
+        <Editor height={180} language="json" value={header} options={{ readOnly: true }} />
+      </PageSection>
+      <PageSection title="Payload" control={payloadControl}>
+        <Editor height={180} language="json" value={payload} options={{ readOnly: true }} />
+      </PageSection>
+    </PageRootSection>
+  );
+}

app/encoders-decoders/layout.tsx

@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+import { toolGroups } from "@/config/tools";
+
+export const metadata: Metadata = {
+  title: toolGroups.encodersDecoders.title,
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

app/encoders-decoders/page.tsx

@@ -0,0 +1,11 @@
+import { toolGroups } from "@/config/tools";
+import { PageRootSection } from "@/components/page-root-section";
+import { ToolCards } from "@/components/tool-cards";
+
+export default function Page() {
+  return (
+    <PageRootSection title={toolGroups.encodersDecoders.title}>
+      <ToolCards tools={Object.values(toolGroups.encodersDecoders.tools)} />
+    </PageRootSection>
+  );
+}

app/encoders-decoders/url/layout.tsx

@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+import { toolGroups } from "@/config/tools";
+
+export const metadata: Metadata = {
+  title: toolGroups.encodersDecoders.tools.url.longTitle,
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

app/encoders-decoders/url/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+
+import { toolGroups } from "@/config/tools";
+import { Textarea, TextareaProps } from "@/components/ui/textarea";
+import { ClearButton } from "@/components/buttons/clear";
+import { CopyButton } from "@/components/buttons/copy";
+import { FileButton } from "@/components/buttons/file";
+import { PasteButton } from "@/components/buttons/paste";
+import { ControlMenu } from "@/components/control-menu";
+import { PageRootSection } from "@/components/page-root-section";
+import { PageSection } from "@/components/page-section";
+
+export default function Page() {
+  const [decoded, setDecoded] = useState('> It\'s "URL encoding"?');
+  const [encoded, setEncoded] = useState("%3E%20It's%20%22URL%20encoding%22%3F");
+
+  const setDecodedReactively = useCallback((text: string) => {
+    setDecoded(text);
+
+    try {
+      setEncoded(encodeURIComponent(text));
+    } catch {
+      setEncoded("");
+    }
+  }, []);
+
+  const setEncodedReactively = useCallback((text: string) => {
+    setEncoded(text);
+
+    try {
+      setDecoded(decodeURIComponent(text));
+    } catch {
+      setDecoded("");
+    }
+  }, []);
+
+  const clearBoth = useCallback(() => {
+    setDecoded("");
+    setEncoded("");
+  }, []);
+
+  const onDecodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
+    setDecodedReactively(value);
+
+  const onEncodedChange: TextareaProps["onChange"] = ({ currentTarget: { value } }) =>
+    setEncodedReactively(value);
+
+  const decodedPasteButton = useMemo(
+    () => <PasteButton onClipboardRead={setDecodedReactively} />,
+    [setDecodedReactively]
+  );
+
+  const encodedPasteButton = useMemo(
+    () => <PasteButton onClipboardRead={setEncodedReactively} />,
+    [setEncodedReactively]
+  );
+
+  const decodedFileButton = useMemo(
+    () => (
+      <FileButton onFileRead={setDecodedReactively} iconOnly aria-label="load a decoded file" />
+    ),
+    [setDecodedReactively]
+  );
+
+  const encodedFileButton = useMemo(
+    () => (
+      <FileButton onFileRead={setEncodedReactively} iconOnly aria-label="load a encoded file" />
+    ),
+    [setEncodedReactively]
+  );
+
+  const decodedCopyButton = useMemo(() => <CopyButton text={decoded} />, [decoded]);
+  const encodedCopyButton = useMemo(() => <CopyButton text={encoded} />, [encoded]);
+
+  const clearButton = useMemo(
+    () => <ClearButton onClick={clearBoth} iconOnly aria-label="clear decoded and encoded" />,
+    [clearBoth]
+  );
+
+  const decodedControl = (
+    <ControlMenu list={[decodedPasteButton, decodedFileButton, decodedCopyButton, clearButton]} />
+  );
+
+  const encodedControl = (
+    <ControlMenu list={[encodedPasteButton, encodedFileButton, encodedCopyButton, clearButton]} />
+  );
+
+  return (
+    <PageRootSection title={toolGroups.encodersDecoders.tools.url.longTitle}>
+      <PageSection title="Decoded" control={decodedControl}>
+        <Textarea value={decoded} onChange={onDecodedChange} rows={10} />
+      </PageSection>
+      <PageSection title="Encoded" control={encodedControl}>
+        <Textarea value={encoded} onChange={onEncodedChange} rows={10} />
+      </PageSection>
+    </PageRootSection>
+  );
+}