feat: add TSConfig, RuleConfig component

Author: yeonjuan

src/components/RuleConfig.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect, useRef } from "react";
+import CodeMirror from "codemirror";
+import type { FC } from "react";
+import type { Linter } from "eslint";
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/javascript/javascript.js";
+import "@/css/editor.css";
+
+interface Props {
+  initial: Linter.RulesRecord;
+  onChange?: (text: string) => void;
+  ruleConfig: {
+    [ruleName: string]: any;
+  };
+}
+
+const CODE_MIRROR_OPTIONS = {
+  mode: "application/ld+json",
+  lineNumbers: true,
+  showCursorWhenSelecting: true,
+  matchBrackets: true,
+} as const;
+
+export const RuleConfig: FC<Props> = (props) => {
+  const [text, setText] = useState<string>(
+    JSON.stringify(props.initial, null, 2)
+  );
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      const codeMirror = CodeMirror.fromTextArea(
+        ref.current,
+        CODE_MIRROR_OPTIONS
+      );
+      codeMirror.on("change", () => {
+        const value = codeMirror.getValue();
+        props.onChange?.(value);
+        setText(value);
+      });
+    }
+  }, []);
+
+  return (
+    <div className="rule-editor">
+      <textarea id="code" readOnly autoComplete="off" ref={ref} value={text} />
+    </div>
+  );
+};

src/components/TSConfig.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Row, Col } from "react-bootstrap";
+import type { FC } from "react";
+
+export const TSConfig: FC = () => {
+  return (
+    <>
+      <Row>
+        <Col md={4}>
+          <label htmlFor="ecmaVersion"> ECMA Version </label>
+        </Col>
+        <Col md={8}>
+          <select id="ecmaVersion">
+            {["es2015", "es2016", "es2017", "es2018", "es2019", "es2020"].map(
+              (version) => (
+                <option value={version} key={version}>
+                  {version}
+                </option>
+              )
+            )}
+          </select>
+        </Col>
+      </Row>
+      <Row>
+        <Col md={4}>
+          <label htmlFor="ecmaVersion"> ECMA Features </label>
+        </Col>
+        <Col md={8}>
+          {["jsx", "globalReturn"].map((ecmaFeature) => (
+            <div className="checkbox" key={ecmaFeature}>
+              <label htmlFor={ecmaFeature}>
+                <input
+                  type="checkbox"
+                  className="option-checkbox"
+                  id={ecmaFeature}
+                />
+                {ecmaFeature}
+              </label>
+            </div>
+          ))}
+        </Col>
+      </Row>
+    </>
+  );
+};