Added Toggle block (#9)

* feat: toggle

* style: toggle

* feat. toggle

* docs: delete Toggle

package.json

@@ -26,7 +26,7 @@
     "prettier": "^3.3.3"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx,md,mdx}": [
+    "*.{js,jsx,ts,tsx,md,mdx,css}": [
       "prettier --write --ignore-unknown"
     ]
   }

packages/react-notion-custom/CONTRIBUTING-KR.md

@@ -650,7 +650,7 @@ fetchNotionPage();
 | Bulleted List Item       | ❌ No     | `bulleted_list_item`   |      |
 | Numbered List Item       | ❌ No     | `numbered_list_item`   |      |
 | To-do                    | ❌ No     | `to_do`                |      |
-| Toggle                   | ❌ No     | `toggle`               |      |
+| Toggle                   | ✅ Yes    | `toggle`               |      |
 | Quote                    | ❌ No     | `quote`                |      |
 | Callout                  | ❌ No     | `callout`              |      |
 | Equation                 | ❌ No     | `equation`             |      |
@@ -700,7 +700,6 @@ react-notion-custom 프로젝트의 향후 개발 계획을 소개합니다. 이
 - Bulleted List Item
 - Numbered List Item
 - To-do
-- Toggle
 - Quote
 - Callout
 - Image

packages/react-notion-custom/CONTRIBUTING.md

@@ -653,7 +653,7 @@ Here's a list of Notion block types currently supported in react-notion-custom.
 | Bulleted List Item       | ❌ No          | `bulleted_list_item`   |      |
 | Numbered List Item       | ❌ No          | `numbered_list_item`   |      |
 | To-do                    | ❌ No          | `to_do`                |      |
-| Toggle                   | ❌ No          | `toggle`               |      |
+| Toggle                   | ✅ Yes         | `toggle`               |      |
 | Quote                    | ❌ No          | `quote`                |      |
 | Callout                  | ❌ No          | `callout`              |      |
 | Equation                 | ❌ No          | `equation`             |      |
@@ -703,7 +703,6 @@ We plan to implement support for the following Notion block types first:
 - Bulleted List Item
 - Numbered List Item
 - To-do
-- Toggle
 - Quote
 - Callout
 - Image

packages/react-notion-custom/src/lib/components/index.ts

@@ -2,6 +2,7 @@ import Heading1 from "./heading-1";
 import Heading2 from "./heading-2";
 import Heading3 from "./heading-3";
 import Paragraph from "./paragraph";
+import Toggle from "./toggle";
 
 export { Heading1, Heading2, Heading3, Paragraph };
 
@@ -10,4 +11,5 @@ export default {
   heading_2: Heading2,
   heading_3: Heading3,
   paragraph: Paragraph,
+  toggle: Toggle,
 };

packages/react-notion-custom/src/lib/components/toggle.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import type { ToggleArgs } from "../types";
+import { getColorCss } from "../utils";
+import RichText from "./internal/rich-text";
+
+type ToggleProps = {
+  children?: React.ReactNode;
+} & ToggleArgs;
+
+const Toggle: React.FC<ToggleProps> = ({ children, ...props }) => {
+  const {
+    toggle: { color, rich_text: texts },
+  } = props;
+
+  const [open, setOpen] = useState(false);
+
+  const toggleOpen = useCallback(() => setOpen((prevOpen) => !prevOpen), []);
+
+  return (
+    <div
+      className={`notion-block notion-toggle  ${getColorCss(color)} ${open ? "notion-toggle-open" : ""}`}
+      aria-expanded={open}
+    >
+      <div className="notion-toggle-content">
+        <button onClick={toggleOpen} className="notion-toggle-button">
+          <div
+            className={`notion-toggle-button-arrow ${open ? "notion-toggle-button-arrow-opened" : ""}`}
+          />
+        </button>
+        <p>
+          <RichText props={texts} />
+        </p>
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+export default Toggle;