Feat/todo

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

@@ -649,7 +649,7 @@ fetchNotionPage();
 | Heading 3                | ✅ Yes    | `heading_3`            |      |
 | Bulleted List Item       | ✅ Yes    | `bulleted_list_item`   |      |
 | Numbered List Item       | ✅ Yes    | `numbered_list_item`   |      |
-| To-do                    | ❌ No     | `to_do`                |      |
+| To-do                    | ✅ Yes    | `to_do`                |      |
 | Toggle                   | ✅ Yes    | `toggle`               |      |
 | Quote                    | ✅ Yes    | `quote`                |      |
 | Callout                  | ✅ Yes    | `callout`              |      |

packages/react-notion-custom/CONTRIBUTING.md

@@ -652,7 +652,7 @@ Here's a list of Notion block types currently supported in react-notion-custom.
 | Heading 3                | ✅ Yes         | `heading_3`            |      |
 | Bulleted List Item       | ✅ Yes         | `bulleted_list_item`   |      |
 | Numbered List Item       | ✅ Yes         | `numbered_list_item`   |      |
-| To-do                    | ❌ No          | `to_do`                |      |
+| To-do                    | ✅ Yes         | `to_do`                |      |
 | Toggle                   | ✅ Yes         | `toggle`               |      |
 | Quote                    | ✅ Yes         | `quote`                |      |
 | Callout                  | ✅ Yes         | `callout`              |      |

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

@@ -11,6 +11,7 @@ import Video from "./video";
 import Column from "./column";
 import ColumnList from "./column-list";
 import Code from "./code";
+import Todo from "./todo";
 
 export {
   Headings,
@@ -26,6 +27,7 @@ export {
   Column,
   ColumnList,
   Code,
+  Todo,
 };
 
 export default {
@@ -44,4 +46,5 @@ export default {
   column: Column,
   column_list: ColumnList,
   code: Code,
+  to_do: Todo,
 };

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

@@ -0,0 +1,107 @@
+import React from "react";
+import { TodoArgs } from "../types";
+import { getColorCss } from "../utils";
+import RichText from "./internal/rich-text";
+
+interface TodoProps extends TodoArgs {
+  children?: React.ReactNode;
+}
+
+const Todo: React.FC<TodoProps> & { CheckBox: typeof TodoCheckBox } = ({
+  children,
+  ...props
+}) => {
+  const {
+    to_do: { color, rich_text: texts, checked },
+  } = props;
+
+  let checkboxElement: React.ReactNode = null;
+  const otherChildren: React.ReactNode[] = [];
+
+  // Process children to find Todo.Checkbox
+  React.Children.forEach(children, (child) => {
+    if (React.isValidElement(child) && child.type === Todo.CheckBox) {
+      // Use the children of Todo.Checkbox as the checkbox element
+      checkboxElement = child.props.children;
+    } else {
+      otherChildren.push(child);
+    }
+  });
+
+  // If no custom Checkbox provided, use default
+  if (!checkboxElement) {
+    checkboxElement = <DefaultCheckBox checked={checked} />;
+  }
+
+  return (
+    <div className={`notion-block notion-to-do ${getColorCss(color)}`}>
+      <div
+        aria-checked={checked}
+        className={`notion-to-do-content ${checked ? "notion-to-do-checked" : ""}`}
+      >
+        {checkboxElement}
+        <p className="notion-to-do-text">
+          <RichText props={texts} />
+        </p>
+      </div>
+      {otherChildren}
+    </div>
+  );
+};
+
+interface CheckBoxProps {
+  checked: boolean;
+}
+
+const DefaultCheckBox: React.FC<CheckBoxProps> = ({ checked }) => {
+  return (
+    <div className="notion-to-do-checkbox">
+      <div
+        className={`notion-property-checkbox ${
+          checked
+            ? "notion-property-checkbox-checked"
+            : "notion-property-checkbox-unchecked"
+        }`}
+      >
+        {checked ? (
+          <svg
+            viewBox="-1 -1 14 14"
+            className="check"
+            style={{
+              width: "12px",
+              height: "12px",
+              display: "block",
+              flexShrink: 0,
+              backfaceVisibility: "hidden",
+              fill: "white",
+            }}
+          >
+            <polygon points="5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039" />
+          </svg>
+        ) : (
+          <svg
+            viewBox="0 0 16 16"
+            className="checkboxSquare"
+            style={{
+              width: "100%",
+              height: "100%",
+              display: "block",
+              flexShrink: 0,
+              backfaceVisibility: "hidden",
+            }}
+          >
+            <path d="M1.5,1.5 L1.5,14.5 L14.5,14.5 L14.5,1.5 L1.5,1.5 Z M0,0 L16,0 L16,16 L0,16 L0,0 Z" />
+          </svg>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const TodoCheckBox: React.FC<{ children?: React.ReactNode }> = ({
+  children,
+}) => <>{children}</>;
+
+Todo.CheckBox = TodoCheckBox;
+
+export default Todo;

packages/react-notion-custom/src/lib/index.css

@@ -907,3 +907,81 @@
     padding-bottom: 0px;
   }
 }
+
+.notion-property-checkbox {
+  width: 16px;
+  height: 16px;
+}
+
+.notion-property-checkbox-checked {
+  width: 16px;
+  height: 16px;
+  background: var(--select-color-0);
+}
+
+.notion-property-checkbox-checked svg {
+  position: relative;
+  display: block;
+  top: 1px;
+  left: 1px;
+  width: 14px;
+  height: 14px;
+  fill: #fff;
+}
+
+.notion-property-checkbox-unchecked {
+  width: 16px;
+  height: 16px;
+}
+
+.notion-property-checkbox-unchecked svg {
+  fill: var(--fg-color);
+}
+
+.notion-property-checkbox {
+  width: 16px;
+  height: 16px;
+}
+
+.notion-property-checkbox-checked {
+  width: 16px;
+  height: 16px;
+  background: var(--select-color-0);
+}
+
+.notion-property-checkbox-checked svg {
+  position: relative;
+  display: block;
+  top: 1px;
+  left: 1px;
+  width: 14px;
+  height: 14px;
+  fill: #fff;
+}
+
+.notion-property-checkbox-unchecked {
+  width: 16px;
+  height: 16px;
+}
+
+.notion-property-checkbox-unchecked svg {
+  fill: var(--fg-color);
+}
+
+.notion-to-do-content {
+  display: flex;
+}
+
+.notion-to-do-checkbox {
+  display: inline-block;
+  padding: 8px 6px;
+}
+
+.notion-to-do-text {
+  padding: 3px 2px;
+}
+
+.notion-to-do-checked .notion-to-do-text {
+  text-decoration: line-through;
+  opacity: 0.6;
+}

packages/story/src/lib/Notion.tsx

@@ -4,13 +4,15 @@ export default function StoryComponent({
   blocks,
   title,
   cover,
+  custom,
 }: {
   blocks: Block[];
   title?: string;
   cover?: string;
+  custom?: Record<string, React.ComponentType<any>>;
 }) {
   return (
-    <Notion>
+    <Notion custom={custom}>
       <Notion.Cover src={cover} />
       <Notion.Body>
         <Notion.Title title={title} />