chore: styled-component 삭제, type 이동

Author: 01-binary

packages/notion-to-jsx/package.json

@@ -31,8 +31,7 @@
   "license": "MIT",
   "peerDependencies": {
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "styled-components": "^6.0.0"
+    "react-dom": "^18.0.0"
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.17.1",
@@ -47,7 +46,6 @@
     "@types/prismjs": "^1.26.5",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
-    "@types/styled-components": "^5.1.34",
     "@vanilla-extract/esbuild-plugin": "^2.3.15",
     "tsup": "^8.0.0",
     "typescript": "^5.6.3"

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

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { type RichTextItem } from '../../../../types';
 import { MemoizedRichText } from '../MemoizedComponents';
 import {
   link,
@@ -11,6 +10,7 @@ import {
   siteName,
   caption,
 } from './styles.css';
+import { RichTextItem } from '../RichText/RichTexts';
 
 interface OpenGraphData {
   title: string;

packages/notion-to-jsx/src/components/Renderer/components/Code/CodeBlock.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { RichTextItem } from '../../../../types';
 import { codeBlock } from './styles.css';
 import Prism, { Grammar } from 'prismjs';
 import { MemoizedRichText } from '../MemoizedComponents';
@@ -9,6 +8,7 @@ import 'prismjs/components/prism-typescript';
 import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/components/prism-tsx';
+import { RichTextItem } from '../RichText/RichTexts';
 
 if (typeof window !== 'undefined') {
   window.Prism = Prism;

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

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { RichTextItem } from '../../../../types';
 import { MemoizedRichText } from '../MemoizedComponents';
 import {
   imageContainer,
   styledImage,
   placeholder,
   caption,
 } from './styles.css';
+import { RichTextItem } from '../RichText/RichTexts';
 
 export interface ImageProps {
   src: string;

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

@@ -1,8 +1,7 @@
 import React from 'react';
-import RichText, { RichTextProps } from './RichText/RichTexts';
+import RichText, { RichTextItem, RichTextProps } from './RichText/RichTexts';
 import { Image, ImageProps } from './Image';
 import Bookmark, { type BookmarkProps } from './Bookmark/Bookmark';
-import { RichTextItem } from '../../../types';
 
 export const MemoizedRichText = React.memo<RichTextProps>(
   RichText,

packages/notion-to-jsx/src/components/Renderer/components/RichText/RichTexts.tsx

@@ -1,7 +1,32 @@
 import React from 'react';
-import { RichTextItem } from '../../../../types';
 import { richText, link } from './styles.css';
 
+export interface RichTextItem {
+  type: 'text';
+  text: {
+    content: string;
+    link: string | null;
+  };
+  content: string;
+  link: string | null;
+  annotations: {
+    bold: boolean;
+    italic: boolean;
+    strikethrough: boolean;
+    underline: boolean;
+    code: boolean;
+    color: string;
+  };
+  bold: boolean;
+  italic: boolean;
+  strikethrough: boolean;
+  underline: boolean;
+  code: boolean;
+  color: string;
+  plain_text: string;
+  href: string | null;
+}
+
 export interface RichTextProps {
   richTexts: RichTextItem[];
 }

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

@@ -8,7 +8,6 @@ import { useKeyboardNavigation } from '../../hooks/useKeyboardNavigation';
 import { darkTheme, lightTheme } from '../../styles/theme.css';
 import { List, ListBlocksRenderer } from './components/List';
 import { BlockRenderer } from './components/Block';
-// import { List, ListBlocksRenderer } from './components/List';
 
 const notion = {
   getPageBlocks: async () => {

packages/notion-to-jsx/src/types/index.ts

@@ -1,28 +1,4 @@
-export interface RichTextItem {
-  type: 'text';
-  text: {
-    content: string;
-    link: string | null;
-  };
-  content: string;
-  link: string | null;
-  annotations: {
-    bold: boolean;
-    italic: boolean;
-    strikethrough: boolean;
-    underline: boolean;
-    code: boolean;
-    color: string;
-  };
-  bold: boolean;
-  italic: boolean;
-  strikethrough: boolean;
-  underline: boolean;
-  code: boolean;
-  color: string;
-  plain_text: string;
-  href: string | null;
-}
+import { RichTextItem } from '../components/Renderer/components/RichText/RichTexts';
 
 export interface NotionBlock {
   object: 'block';

packages/notion-to-jsx/tsup.config.ts

@@ -8,6 +8,6 @@ export default defineConfig({
   splitting: false,
   sourcemap: true,
   clean: true,
-  external: ['react', 'react-dom', 'styled-components', 'prismjs'],
+  external: ['react', 'react-dom', 'prismjs'],
   esbuildPlugins: [vanillaExtractPlugin()],
 });