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

lib/base.ts

@@ -0,0 +1,22 @@
+import { chunksOf, intersperse } from "fp-ts/Array";
+
+const match = (regex: RegExp) => (x: string) => regex.test(x);
+
+export const isDecimal = match(/^[0-9]*$/);
+export const isHexadecimal = match(/^[0-9A-F]*$/i);
+export const isOctal = match(/^[0-7]*$/);
+export const isBinary = match(/^[0-1]*$/);
+
+const formatNumber = (digits: number, sep: string) => (s: string) => {
+  const a = [...s].reverse();
+  const b = chunksOf(digits)(a);
+  const c = intersperse([sep])(b);
+  return c.flat().reverse().join("");
+};
+
+export const formatDecimal = formatNumber(3, ",");
+export const formatHexadecimal = formatNumber(4, " ");
+export const formatOctal = formatNumber(3, " ");
+export const formatBinary = formatNumber(4, " ");
+
+export const unformatNumber = (x: string) => x.replaceAll(/[ ,]/g, "");

lib/fonts.ts

@@ -0,0 +1,11 @@
+import { JetBrains_Mono as FontMono, Inter as FontSans } from "next/font/google";
+
+export const fontSans = FontSans({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+export const fontMono = FontMono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+});

lib/jwt.ts

@@ -0,0 +1,22 @@
+import jwt_decode from "jwt-decode";
+
+export const decode = (token: string) => {
+  let headerObj;
+  let payloadObj;
+
+  if (token.split(".").length === 3) {
+    /* eslint-disable no-empty */
+
+    try {
+      headerObj = jwt_decode(token, { header: true });
+    } catch {}
+
+    try {
+      payloadObj = jwt_decode(token, { header: false });
+    } catch {}
+
+    /* eslint-enable no-empty */
+  }
+
+  return { headerObj, payloadObj };
+};

lib/style.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

lib/uuid.ts

@@ -0,0 +1,20 @@
+import { v1 as uuidv1, v4 as uuidv4 } from "uuid";
+
+const uuidvn = {
+  1: uuidv1,
+  4: uuidv4,
+};
+
+export const uuid = (version: 1 | 4 | "1" | "4", hyphens = true, uppercase = true) => {
+  let generated = uuidvn[version]();
+
+  if (!hyphens) {
+    generated = generated.replaceAll("-", "");
+  }
+
+  if (uppercase) {
+    generated = generated.toUpperCase();
+  }
+
+  return generated;
+};