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/converters/json-yaml/layout.tsx

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

app/converters/json-yaml/page.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import YAML from "yaml";
+
+import { toolGroups } from "@/config/tools";
+import { Editor, EditorProps } from "@/components/ui/editor";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectProps,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+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 { Configuration } from "@/components/configuration";
+import { Configurations } from "@/components/configurations";
+import { ControlMenu } from "@/components/control-menu";
+import { icons } from "@/components/icons";
+import { PageRootSection } from "@/components/page-root-section";
+import { PageSection } from "@/components/page-section";
+
+const two = "  ";
+const four = "    ";
+
+export default function Page() {
+  const [indentation, setIndentation] = useState(two);
+  const [json, setJson] = useState('{\n  "foo": "bar"\n}');
+  const [yaml, setYaml] = useState("foo: bar");
+
+  const setJsonReactively = useCallback(
+    (text: string) => {
+      setJson(text);
+
+      try {
+        const parsed = JSON.parse(text) as unknown;
+        setYaml(YAML.stringify(parsed, { indent: indentation.length, simpleKeys: true }));
+      } catch {
+        setYaml("");
+      }
+    },
+    [indentation.length]
+  );
+
+  const setYamlReactively = useCallback(
+    (text: string) => {
+      setYaml(text);
+
+      try {
+        const parsed = YAML.parse(text, { merge: true }) as unknown;
+        setJson(JSON.stringify(parsed, null, indentation));
+      } catch {
+        setJson("");
+      }
+    },
+    [indentation]
+  );
+
+  const clearBoth = useCallback(() => {
+    setJson("");
+    setYaml("");
+  }, []);
+
+  const onIndentationChange: SelectProps["onValueChange"] = value => {
+    setIndentation(value);
+
+    try {
+      const parsed = JSON.parse(json) as unknown;
+      setJson(JSON.stringify(parsed, null, value));
+      setYaml(YAML.stringify(parsed, { indent: value.length, simpleKeys: true }));
+    } catch {
+      clearBoth();
+    }
+  };
+
+  const onJsonChange: EditorProps["onChange"] = value => setJsonReactively(value ?? "");
+  const onYamlChange: EditorProps["onChange"] = value => setYamlReactively(value ?? "");
+
+  const indentationIcon = useMemo(() => <icons.Space size={24} className="-translate-y-1.5" />, []);
+
+  const indentationConfig = (
+    <Configuration
+      icon={indentationIcon}
+      title="Indentation"
+      control={
+        <Select value={indentation} onValueChange={onIndentationChange}>
+          <SelectTrigger
+            className="w-28"
+            aria-label="toggle open/close state of indentation selection"
+          >
+            <SelectValue placeholder={indentation} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={two}>2 spaces</SelectItem>
+            <SelectItem value={four}>4 spaces</SelectItem>
+          </SelectContent>
+        </Select>
+      }
+    />
+  );
+
+  const jsonPasteButton = useMemo(
+    () => <PasteButton onClipboardRead={setJsonReactively} />,
+    [setJsonReactively]
+  );
+
+  const yamlPasteButton = useMemo(
+    () => <PasteButton onClipboardRead={setYamlReactively} />,
+    [setYamlReactively]
+  );
+
+  const jsonFileButton = useMemo(
+    () => (
+      <FileButton
+        accept=".json"
+        onFileRead={setJsonReactively}
+        iconOnly
+        aria-label="load a json file"
+      />
+    ),
+    [setJsonReactively]
+  );
+
+  const yamlFileButton = useMemo(
+    () => (
+      <FileButton
+        accept=".yml,.yaml"
+        onFileRead={setYamlReactively}
+        iconOnly
+        aria-label="load a yaml file"
+      />
+    ),
+    [setYamlReactively]
+  );
+
+  const jsonCopyButton = <CopyButton text={json} />;
+  const yamlCopyButton = <CopyButton text={yaml} />;
+
+  const clearButton = useMemo(
+    () => <ClearButton onClick={clearBoth} iconOnly aria-label="clear json and yaml" />,
+    [clearBoth]
+  );
+
+  const jsonControl = (
+    <ControlMenu list={[jsonPasteButton, jsonFileButton, jsonCopyButton, clearButton]} />
+  );
+
+  const yamlControl = (
+    <ControlMenu list={[yamlPasteButton, yamlFileButton, yamlCopyButton, clearButton]} />
+  );
+
+  return (
+    <PageRootSection
+      className="flex h-full flex-col"
+      title={toolGroups.converters.tools.jsonYaml.longTitle}
+    >
+      <PageSection className="mb-6 mt-0" title="Configuration">
+        <Configurations list={[indentationConfig]} />
+      </PageSection>
+      <div className="flex flex-1 flex-col gap-x-4 gap-y-5 lg:flex-row">
+        <PageSection className="mt-0 min-h-[200px] flex-1" title="Json" control={jsonControl}>
+          <Editor language="json" value={json} onChange={onJsonChange} />
+        </PageSection>
+        <PageSection className="mt-0 min-h-[200px] flex-1" title="Yaml" control={yamlControl}>
+          <Editor language="yaml" value={yaml} onChange={onYamlChange} />
+        </PageSection>
+      </div>
+    </PageRootSection>
+  );
+}

app/converters/layout.tsx

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

app/converters/number-base/layout.tsx

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

app/converters/number-base/page.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+
+import { toolGroups } from "@/config/tools";
+import * as baselib from "@/lib/base";
+import { Input, InputProps } from "@/components/ui/input";
+import { PasteButton } from "@/components/buttons/paste";
+import { Configuration } from "@/components/configuration";
+import { Configurations } from "@/components/configurations";
+import { ControlMenu } from "@/components/control-menu";
+import { icons } from "@/components/icons";
+import { LabeledSwitch } from "@/components/labeled-switch";
+import { PageRootSection } from "@/components/page-root-section";
+import { PageSection } from "@/components/page-section";
+
+const baseConfig = {
+  10: { prefix: "", validate: baselib.isDecimal },
+  16: { prefix: "0x", validate: baselib.isHexadecimal },
+  8: { prefix: "0o", validate: baselib.isOctal },
+  2: { prefix: "0b", validate: baselib.isBinary },
+} as const;
+
+export default function Page() {
+  const [format, setFormat] = useState(true);
+  const [int, setInt] = useState<bigint | undefined>(BigInt(42));
+
+  const newDec = int?.toString(10) ?? "";
+  const newHex = int?.toString(16).toUpperCase() ?? "";
+  const newOct = int?.toString(8) ?? "";
+  const newBin = int?.toString(2) ?? "";
+
+  const dec = format ? baselib.formatDecimal(newDec) : newDec;
+  const hex = format ? baselib.formatHexadecimal(newHex) : newHex;
+  const oct = format ? baselib.formatOctal(newOct) : newOct;
+  const bin = format ? baselib.formatBinary(newBin) : newBin;
+
+  const trySetInt = (base: 10 | 16 | 8 | 2) => (value: string) => {
+    if (value === "") {
+      return setInt(undefined);
+    }
+
+    const { prefix, validate } = baseConfig[base];
+    const unformatted = baselib.unformatNumber(value);
+
+    if (validate(unformatted)) {
+      setInt(BigInt(`${prefix}${unformatted}`));
+    }
+  };
+
+  const trySetDec = useCallback((value: string) => trySetInt(10)(value), []);
+  const trySetHex = useCallback((value: string) => trySetInt(16)(value), []);
+  const trySetOct = useCallback((value: string) => trySetInt(8)(value), []);
+  const trySetBin = useCallback((value: string) => trySetInt(2)(value), []);
+
+  const onDecChange: InputProps["onChange"] = ({ currentTarget: { value } }) => trySetDec(value);
+  const onHexChange: InputProps["onChange"] = ({ currentTarget: { value } }) => trySetHex(value);
+  const onOctChange: InputProps["onChange"] = ({ currentTarget: { value } }) => trySetOct(value);
+  const onBinChange: InputProps["onChange"] = ({ currentTarget: { value } }) => trySetBin(value);
+
+  const formatNumberIcon = useMemo(() => <icons.CaseSensitive size={24} />, []);
+
+  const formatNumberConfig = useMemo(
+    () => (
+      <Configuration
+        icon={formatNumberIcon}
+        title="Format number"
+        control={
+          <LabeledSwitch
+            id="format-number-switch"
+            label={format ? "On" : "Off"}
+            checked={format}
+            onCheckedChange={setFormat}
+            aria-label="toggle whether to format numbers"
+          />
+        }
+      />
+    ),
+    [format, formatNumberIcon]
+  );
+
+  const decPasteButton = useMemo(() => <PasteButton onClipboardRead={trySetDec} />, [trySetDec]);
+  const hexPasteButton = useMemo(() => <PasteButton onClipboardRead={trySetHex} />, [trySetHex]);
+  const octPasteButton = useMemo(() => <PasteButton onClipboardRead={trySetOct} />, [trySetOct]);
+  const binPasteButton = useMemo(() => <PasteButton onClipboardRead={trySetBin} />, [trySetBin]);
+
+  const decControl = <ControlMenu list={[decPasteButton]} />;
+  const hexControl = <ControlMenu list={[hexPasteButton]} />;
+  const octControl = <ControlMenu list={[octPasteButton]} />;
+  const binControl = <ControlMenu list={[binPasteButton]} />;
+
+  return (
+    <PageRootSection title={toolGroups.converters.tools.numberBase.longTitle}>
+      <PageSection className="mb-6" title="Configuration">
+        <Configurations list={[formatNumberConfig]} />
+      </PageSection>
+      <PageSection title="Decimal" control={decControl}>
+        <Input value={dec} onChange={onDecChange} />
+      </PageSection>
+      <PageSection title="Hexadecimal" control={hexControl}>
+        <Input value={hex} onChange={onHexChange} />
+      </PageSection>
+      <PageSection title="Octal" control={octControl}>
+        <Input value={oct} onChange={onOctChange} />
+      </PageSection>
+      <PageSection title="Binary" control={binControl}>
+        <Input value={bin} onChange={onBinChange} />
+      </PageSection>
+    </PageRootSection>
+  );
+}

app/converters/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.converters.title}>
+      <ToolCards tools={Object.values(toolGroups.converters.tools)} />
+    </PageRootSection>
+  );
+}