refactor: Image migration

Author: 01-binary

packages/notion-to-jsx/src/components/Renderer/components/Block/BlockRenderer.tsx

@@ -7,7 +7,6 @@ import {
 } from '../MemoizedComponents';
 import { CodeBlock } from '../Code';
 import { Heading1, Heading2, Heading3, Paragraph } from '../Typography';
-import { BookmarkCard, BookmarkLink, ImageWrapper } from '../Media';
 
 export interface Props {
   block: any;
@@ -78,20 +77,16 @@ const BlockRenderer: React.FC<Props> = ({ block, onFocus, index }) => {
         </div>
       );
 
-    // case 'image':
-    //   return (
-    //     <ImageWrapper {...blockProps}>
-    //       <MemoizedImage
-    //         src={block.image.file?.url || block.image.external?.url}
-    //         alt={block.image.caption?.[0]?.plain_text || ''}
-    //       />
-    //       {block.image.caption && (
-    //         <figcaption>
-    //           <MemoizedRichText richTexts={block.image.caption} />
-    //         </figcaption>
-    //       )}
-    //     </ImageWrapper>
-    //   );
+    case 'image':
+      return (
+        <figure {...blockProps}>
+          <MemoizedImage
+            src={block.image.file?.url || block.image.external?.url}
+            alt={block.image.caption?.[0]?.plain_text || ''}
+            caption={block.image.caption}
+          />
+        </figure>
+      );
 
     // case 'bookmark':
     //   return (

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

@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
 import { RichTextItem } from '../../../../types';
-import RichTexts from '../RichText/RichTexts';
+import { MemoizedRichText } from '../MemoizedComponents';
+import {
+  imageContainer,
+  styledImage,
+  placeholder,
+  caption,
+} from './styles.css';
 
 export interface ImageProps {
   src: string;
@@ -10,46 +15,10 @@ export interface ImageProps {
   priority?: boolean;
 }
 
-const ImageContainer = styled.div`
-  position: relative;
-  width: 100%;
-  background: ${({ theme }) => theme.colors.code.background};
-  border-radius: ${({ theme }) => theme.borderRadius.md};
-  overflow: hidden;
-`;
-
-const StyledImage = styled.img<{ $isLoaded: boolean }>`
-  width: 100%;
-  height: auto;
-  display: block;
-  opacity: ${({ $isLoaded }) => ($isLoaded ? 1 : 0)};
-  transition: opacity 0.3s ease;
-`;
-
-const Placeholder = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: ${({ theme }) => theme.colors.code.background};
-  color: ${({ theme }) => theme.colors.secondary};
-`;
-
-const Caption = styled.figcaption`
-  text-align: center;
-  color: ${({ theme }) => theme.colors.secondary};
-  margin-top: ${({ theme }) => theme.spacing.sm};
-  font-size: ${({ theme }) => theme.typography.fontSize.small};
-`;
-
 const Image: React.FC<ImageProps> = ({
   src,
   alt,
-  caption,
+  caption: imageCaption,
   priority = false,
 }) => {
   const [isLoaded, setIsLoaded] = useState(false);
@@ -61,23 +30,23 @@ const Image: React.FC<ImageProps> = ({
   }, [src]);
 
   return (
-    <figure>
-      <ImageContainer>
-        {!isLoaded && !error && <Placeholder>Loading...</Placeholder>}
-        {error && <Placeholder>Failed to load image</Placeholder>}
-        <StyledImage
+    <figure className={imageContainer}>
+      <div>
+        {!isLoaded && !error && <div className={placeholder}>Loading...</div>}
+        {error && <div className={placeholder}>Failed to load image</div>}
+        <img
+          className={styledImage({ loaded: isLoaded })}
           src={src}
           alt={alt}
-          $isLoaded={isLoaded}
           loading={priority ? 'eager' : 'lazy'}
           onLoad={() => setIsLoaded(true)}
           onError={() => setError(true)}
         />
-      </ImageContainer>
-      {caption && caption.length > 0 && (
-        <Caption>
-          <RichTexts richTexts={caption} />
-        </Caption>
+      </div>
+      {imageCaption && imageCaption.length > 0 && (
+        <figcaption className={caption}>
+          <MemoizedRichText richTexts={imageCaption} />
+        </figcaption>
       )}
     </figure>
   );

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

@@ -0,0 +1,53 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { vars } from '../../../../styles/theme.css';
+
+export const imageContainer = style({
+  position: 'relative',
+  width: '100%',
+  background: vars.colors.code.background,
+  borderRadius: vars.borderRadius.md,
+  overflow: 'hidden',
+});
+
+export const styledImage = recipe({
+  base: {
+    width: '100%',
+    height: 'auto',
+    display: 'block',
+    transition: 'opacity 0.3s ease',
+  },
+  variants: {
+    loaded: {
+      true: {
+        opacity: 1,
+      },
+      false: {
+        opacity: 0,
+      },
+    },
+  },
+  defaultVariants: {
+    loaded: false,
+  },
+});
+
+export const placeholder = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  background: vars.colors.code.background,
+  color: vars.colors.secondary,
+});
+
+export const caption = style({
+  textAlign: 'center',
+  color: vars.colors.secondary,
+  marginTop: vars.spacing.sm,
+  fontSize: vars.typography.fontSize.small,
+});

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { RichTextItem } from '../../../../types';
+import { MemoizedRichText } from '../MemoizedComponents';
+import { caption, bookmarkCard, bookmarkLink } from './styles.css';
+
+interface BookmarkProps {
+  url: string;
+  title: string;
+  description?: string;
+  caption?: RichTextItem[];
+}
+
+export const Bookmark: React.FC<BookmarkProps> = ({
+  url,
+  title,
+  description,
+  caption: bookmarkCaption,
+}) => {
+  return (
+    <div className={bookmarkCard}>
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={bookmarkLink}
+      >
+        <h4>{title}</h4>
+        {description && <p>{description}</p>}
+      </a>
+      {bookmarkCaption && (
+        <figcaption className={caption}>
+          <MemoizedRichText richTexts={bookmarkCaption} />
+        </figcaption>
+      )}
+    </div>
+  );
+};

packages/notion-to-jsx/src/components/Renderer/components/Media/index.ts

@@ -1 +1 @@
-export * from './styles';
+export { Bookmark } from './Media';

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

@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../../../styles/theme.css';
+
+export const caption = style({
+  marginTop: vars.spacing.sm,
+  fontSize: vars.typography.fontSize.small,
+  color: vars.colors.secondary,
+});
+
+export const bookmarkCard = style({
+  margin: `${vars.spacing.md} 0`,
+  padding: vars.spacing.md,
+  border: `1px solid ${vars.colors.border}`,
+  borderRadius: vars.borderRadius.md,
+  transition: 'box-shadow 0.2s ease',
+  ':hover': {
+    boxShadow: vars.shadows.sm,
+  },
+});
+
+export const bookmarkLink = style({
+  color: vars.colors.primary,
+  textDecoration: 'none',
+  ':hover': {
+    textDecoration: 'underline',
+  },
+});