feat: add encoder sections

Author: dorakemon

src/App.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { DebuggerDescription, DebuggerHeader } from "./components/Debugger";
 import { Header } from "./components/Layout";
 import { JWPDecoder } from "./features/JWPDecoder";
+import { JWPEncoder } from "./features/JWPEncoder";
 import { cn } from "./libs/tailwindUtils";
 import { DebuggerStore } from "./store/context";
 
@@ -36,6 +37,7 @@ const App = () => {
             </button>
           </div>
           {activeTab === "decoder" && <JWPDecoder />}
+          {activeTab === "encoder" && <JWPEncoder />}
         </div>
       </div>
     </DebuggerStore>

src/components/JWPVisualizer/BaseTextarea.tsx

@@ -5,6 +5,7 @@ type BaseTextareaProps = {
   minRows?: number;
   wrap?: boolean;
   className?: string;
+  disabled?: boolean;
   children?: React.ReactNode;
   onChange?: (value: string) => void;
 };
@@ -16,6 +17,7 @@ export const BaseTextarea = ({
   value = "",
   minRows = 12,
   wrap = true,
+  disabled = false,
   className,
   onChange,
 }: BaseTextareaProps) => {
@@ -34,7 +36,7 @@ export const BaseTextarea = ({
   useEffect(() => {
     adjustHeight();
   }, [adjustHeight]);
-
+  // cursor帰る
   return (
     <textarea
       ref={textareaRef}
@@ -43,12 +45,13 @@ export const BaseTextarea = ({
       autoCorrect="off"
       autoCapitalize="none"
       spellCheck="false"
-      className={`w-full resize-none overflow-y-auto p-4 text-xs focus:outline-none ${
+      className={`w-full resize-none overflow-y-auto p-4 text-xs focus:outline-none cursor-text ${
         !wrap ? "overflow-x-auto whitespace-nowrap" : ""
       } ${className}`}
       style={{
         whiteSpace: wrap ? "pre-wrap" : "pre",
       }}
+      disabled={disabled}
       rows={minRows}
       onChange={(e) => {
         onChange?.(e.target.value);

src/components/JWPVisualizer/IssuedJWPTextarea.tsx

@@ -4,12 +4,14 @@ const COLORS = ["green", "black", "blue"];
 
 export type IssuedJWPTextareaProps = {
   value: string;
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
 };
 
 export const IssuedJWPTextarea: React.FC<IssuedJWPTextareaProps> = ({
   value,
-  onChange,
+  onChange = () => {},
+  disabled,
 }) => {
   const parts = value.split(".");
 
@@ -36,6 +38,7 @@ export const IssuedJWPTextarea: React.FC<IssuedJWPTextareaProps> = ({
         value={value}
         onChange={onChange}
         minRows={12}
+        disabled={disabled}
         className="relative bg-transparent p-4 font-mono text-transparent text-xs caret-black "
       />
     </div>

src/components/JWPVisualizer/PresentedJWPTextarea.tsx

@@ -4,12 +4,14 @@ const COLORS = ["green", "purple", "black", "blue"];
 
 export type PresentedJWPTextareaProps = {
   value: string;
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
 };
 
 export const PresentedJWPTextarea: React.FC<PresentedJWPTextareaProps> = ({
   value,
-  onChange,
+  onChange = () => {},
+  disabled,
 }) => {
   const parts = value.split(".");
 
@@ -36,6 +38,7 @@ export const PresentedJWPTextarea: React.FC<PresentedJWPTextareaProps> = ({
         value={value}
         onChange={onChange}
         minRows={12}
+        disabled={disabled}
         className="relative bg-transparent p-4 font-mono text-transparent text-xs caret-black "
       />
     </div>

src/features/JWPDecoder/hooks/useValidateResult.ts

@@ -1,5 +1,5 @@
+import { validateIssuedForm, validatePresentedForm } from "@/libs/validate";
 import { useDebuggerStore } from "@/store/context";
-import { validateIssuedForm, validatePresentedForm } from "../libs/validate";
 
 export const useValidateResult = () => {
   const { issuedFormJWP, presentedFormJWP } = useDebuggerStore();

src/features/JWPDecoder/hooks/useVerifyResult.ts

@@ -1,6 +1,6 @@
+import { checkJWK } from "@/libs/verify/checkJWK";
+import { verifyIssuedJwp, verifyPresentedJwp } from "@/libs/verify/verifyJWP";
 import { useDebuggerStore } from "@/store/context";
-import { checkJWK } from "../libs/verify/checkJWK";
-import { verifyIssuedJwp, verifyPresentedJwp } from "../libs/verify/verifyJWP";
 
 export const useVerifyResult = (jwkString?: string) => {
   const { issuedFormJWP, presentedFormJWP } = useDebuggerStore();

src/features/JWPDecoder/index.ts

@@ -1,5 +1 @@
 export { JWPDecoder } from "./components/main";
-export type {
-  IssuedFormJWPResult,
-  PresentedFormJWPResult,
-} from "./libs/validate/validateJWP";

src/features/JWPEncoder/components/Input/HeaderInput.tsx

@@ -0,0 +1,24 @@
+import { CardWithTextTitle } from "@/components/Card";
+import { JSONVisualize } from "@/components/JWPVisualizer";
+
+type HeaderInputProps = {
+  title: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  isValid?: boolean;
+  validationError?: string;
+};
+
+export const HeaderInput: React.FC<HeaderInputProps> = ({
+  title,
+  value,
+  onChange,
+  isValid,
+  validationError,
+}) => {
+  <div className="flex flex-col space-y-4">
+    <CardWithTextTitle title={title} disabled>
+      <div className="p-4">{value && <JSONVisualize jsonData={value} />}</div>
+    </CardWithTextTitle>
+  </div>;
+};

src/features/JWPEncoder/components/Input/PayloadInput.tsx

@@ -0,0 +1,2 @@
+export * from "./HeaderInput";
+export * from "./PayloadInput";