refactor: List migrate

Author: 01-binary

packages/notion-to-jsx/src/components/Renderer/components/List/List.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { list, listItem } from './styles.css';
+
+interface ListProps
+  extends React.HTMLAttributes<HTMLUListElement | HTMLOListElement> {
+  as?: 'ul' | 'ol';
+  type: 'bulleted' | 'numbered';
+  children: React.ReactNode;
+}
+
+export const List: React.FC<ListProps> = ({
+  as: Component = 'ul',
+  type,
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <Component className={list({ type })} {...props}>
+      {children}
+    </Component>
+  );
+};
+
+interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  children: React.ReactNode;
+}
+
+export const ListItem: React.FC<ListItemProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <li className={listItem} {...props}>
+      {children}
+    </li>
+  );
+};

packages/notion-to-jsx/src/components/Renderer/components/List/ListBlocksRenderer.tsx

@@ -1,5 +1,5 @@
 import { BlockRenderer } from '../Block';
-import { List } from './styles';
+import { List } from './List';
 
 export interface Props {
   blocks: any[];

packages/notion-to-jsx/src/components/Renderer/components/List/index.ts renamed to packages/notion-to-jsx/src/components/Renderer/components/List/index.tsx

@@ -1,2 +1,2 @@
+export { List, ListItem } from './List';
 export { default as ListBlocksRenderer } from './ListBlocksRenderer';
-export * from './styles';

packages/notion-to-jsx/src/components/Renderer/components/List/styles.css.ts

@@ -0,0 +1,24 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { vars } from '../../../../styles/theme.css';
+
+export const list = recipe({
+  base: {
+    margin: `${vars.spacing.sm} 0`,
+    paddingLeft: vars.spacing.xl,
+  },
+  variants: {
+    type: {
+      bulleted: {
+        listStyleType: 'disc',
+      },
+      numbered: {
+        listStyleType: 'decimal',
+      },
+    },
+  },
+});
+
+export const listItem = style({
+  margin: `${vars.spacing.xs} 0`,
+});

packages/notion-to-jsx/src/components/Renderer/components/List/styles.ts

@@ -6,6 +6,7 @@ import { NotionBlock } from '../../types';
 import testData from '../../constants/test.json';
 import { useKeyboardNavigation } from '../../hooks/useKeyboardNavigation';
 import { darkTheme, lightTheme } from '../../styles/theme.css';
+import { List } from './components/List';
 // import { BlockRenderer } from './components/Block';
 // import { List, ListBlocksRenderer } from './components/List';
 
@@ -65,22 +66,21 @@ export const Renderer: React.FC<Props> = React.memo(
           block.type === 'bulleted_list_item' &&
           (i === 0 || blocks[i - 1]?.type !== 'bulleted_list_item')
         ) {
-          result
-            .push
-            // <List
-            //   as="ul"
-            //   type="bulleted"
-            //   role="list"
-            //   aria-label="Bulleted list"
-            //   key={block.id}
-            // >
-            //   <ListBlocksRenderer
-            //     blocks={blocks}
-            //     startIndex={i}
-            //     type="bulleted"
-            //   />
-            // </List>
-            ();
+          result.push(
+            <List
+              as="ul"
+              type="bulleted"
+              role="list"
+              aria-label="Bulleted list"
+              key={block.id}
+            >
+              {/* <ListBlocksRenderer
+                blocks={blocks}
+                startIndex={i}
+                type="bulleted"
+              /> */}
+            </List>
+          );
           while (
             i + 1 < blocks.length &&
             blocks[i + 1] &&
@@ -92,22 +92,21 @@ export const Renderer: React.FC<Props> = React.memo(
           block.type === 'numbered_list_item' &&
           (i === 0 || blocks[i - 1]?.type !== 'numbered_list_item')
         ) {
-          result
-            .push
-            // <List
-            //   as="ol"
-            //   type="1"
-            //   role="list"
-            //   aria-label="Numbered list"
-            //   key={block.id}
-            // >
-            //   <ListBlocksRenderer
-            //     blocks={blocks}
-            //     startIndex={i}
-            //     type="numbered"
-            //   />
-            // </List>
-            ();
+          result.push(
+            <List
+              as="ol"
+              type="1"
+              role="list"
+              aria-label="Numbered list"
+              key={block.id}
+            >
+              {/* <ListBlocksRenderer
+                  blocks={blocks}
+                  startIndex={i}
+                  type="numbered"
+                /> */}
+            </List>
+          );
           while (
             i + 1 < blocks.length &&
             blocks[i + 1] &&