feat: @emotion/css 를 적용한다

Author: loki-class101

package.json

@@ -139,6 +139,7 @@
     "@docusaurus/preset-classic": "2.1.0",
     "@docusaurus/remark-plugin-npm2yarn": "2.1.0",
     "@docusaurus/theme-live-codeblock": "2.1.0",
+    "@emotion/css": "11.13.5",
     "@emotion/native": "11.9.3",
     "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",

packages/vibrant-core/src/lib/Box/Box.tsx

@@ -1,54 +1,58 @@
 import type { ComponentType, FC, ReactElement } from 'react';
 import { createElement, forwardRef, memo } from 'react';
-import styled from '@emotion/styled';
+import { css } from '@emotion/css';
 import { useComposedRef, useLayoutEvent } from '@vibrant-ui/utils';
 import { OnColorContainer } from '../OnColorContainer';
 import type { BoxElements, BoxProps } from './BoxProps';
 import { interpolation, shouldForwardProp } from './BoxProps';
 
 export const Box = memo(
-  styled(
-    forwardRef<HTMLDivElement, BoxProps>(
-      (
-        {
-          as,
-          base,
-          onLayout,
-          ariaLabel,
-          ariaChecked,
-          ariaLabelledBy,
-          ariaCurrent,
-          ariaSelected,
-          backgroundColor,
-          ...restProps
-        },
-        ref
-      ) => {
-        const { ref: layoutEventRef } = useLayoutEvent(onLayout);
-        const composeRef = useComposedRef(ref, layoutEventRef);
+  forwardRef<HTMLDivElement, BoxProps>(
+    (
+      {
+        as,
+        base,
+        onLayout,
+        ariaLabel,
+        ariaChecked,
+        ariaLabelledBy,
+        ariaCurrent,
+        ariaSelected,
+        backgroundColor,
+        ...restProps
+      },
+      ref
+    ) => {
+      const { ref: layoutEventRef } = useLayoutEvent(onLayout);
+      const composeRef = useComposedRef(ref, layoutEventRef);
 
-        const element = createElement(base ?? as ?? 'div', {
-          ref: composeRef,
-          ...(base && as ? { as } : {}),
-          'aria-label': ariaLabel,
-          'aria-checked': ariaChecked,
-          'aria-labelledby': ariaLabelledBy,
-          'aria-current': ariaCurrent,
-          'aria-selected': ariaSelected,
-          ...restProps,
-        });
+      const className = Object.entries(interpolation({ ...restProps, backgroundColor } ?? {}))
+        .map(([key, value]) => css({ [key]: value }))
+        .join(' ');
 
-        if (backgroundColor) {
-          return <OnColorContainer backgroundColor={backgroundColor}>{element}</OnColorContainer>;
-        }
+      const domAttributeProps = Object.fromEntries(
+        Object.entries({ ...restProps }).filter(([key, _]) => shouldForwardProp(key))
+      );
 
-        return element;
+      const element = createElement(base ?? as ?? 'div', {
+        ref: composeRef,
+        ...(base && as ? { as } : {}),
+        'aria-label': ariaLabel,
+        'aria-checked': ariaChecked,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-current': ariaCurrent,
+        'aria-selected': ariaSelected,
+        ...domAttributeProps,
+        className,
+      });
+
+      if (backgroundColor) {
+        return <OnColorContainer backgroundColor={backgroundColor}>{element}</OnColorContainer>;
       }
-    ),
-    {
-      shouldForwardProp,
+
+      return element;
     }
-  )(interpolation)
+  )
 ) as <
   BaseComponent extends ComponentType<any> | undefined = undefined,
   ElementName extends BoxElements | undefined = undefined

packages/vibrant-core/src/lib/ScrollBox/ScrollBox.tsx

@@ -1,40 +1,53 @@
 import { createElement, forwardRef } from 'react';
-import styled from '@emotion/styled';
+import { css } from '@emotion/css';
 import { useComposedRef, useLayoutEvent } from '@vibrant-ui/utils';
 import { transformResponsiveValue } from '../transformResponsiveValue';
 import type { ScrollBoxProps } from './ScrollBoxProps';
 import { interpolation, shouldForwardProp } from './ScrollBoxProps';
 
-const SystemScrollBox = styled(
-  forwardRef<any, ScrollBoxProps>(
-    ({ as = 'div', ariaChecked, ariaCurrent, ariaLabel, ariaLabelledBy, ariaSelected, ...restProps }, ref) =>
-      createElement(as, {
-        ref,
-        'aria-label': ariaLabel,
-        'aria-checked': ariaChecked,
-        'aria-labelledby': ariaLabelledBy,
-        'aria-current': ariaCurrent,
-        'aria-selected': ariaSelected,
-        ...restProps,
-      })
-  ),
-  {
-    shouldForwardProp,
-  }
-)(interpolation);
-
-export const ScrollBox = forwardRef<any, ScrollBoxProps>(
-  ({ keyboardShouldPersistTaps: _, scrollEnabled = true, onLayout, ...restProps }, ref) => {
+export const ScrollBox = forwardRef<unknown, ScrollBoxProps>(
+  (
+    {
+      as = 'div',
+      ariaChecked,
+      ariaCurrent,
+      ariaLabel,
+      ariaLabelledBy,
+      ariaSelected,
+      scrollEnabled = true,
+      onLayout,
+      ...restProps
+    },
+    ref
+  ) => {
     const { ref: layoutEventRef } = useLayoutEvent(onLayout);
     const composeRef = useComposedRef(ref, layoutEventRef);
 
-    return (
-      <SystemScrollBox
-        ref={composeRef}
-        {...restProps}
-        overflow={transformResponsiveValue(scrollEnabled, value => (value ? 'auto' : 'hidden'))}
-      />
+    const className = Object.entries(
+      interpolation({
+        ...restProps,
+        overflow: transformResponsiveValue(scrollEnabled, value => (value ? 'auto' : 'hidden')),
+      })
+    )
+      .map(([key, value]) => css({ [key]: value }))
+      .join(' ');
+
+    const domAttributeProps = Object.fromEntries(
+      Object.entries({ ...restProps }).filter(([key, _]) => shouldForwardProp(key))
     );
+
+    const element = createElement(as, {
+      ref: composeRef,
+      'aria-label': ariaLabel,
+      'aria-checked': ariaChecked,
+      'aria-labelledby': ariaLabelledBy,
+      'aria-current': ariaCurrent,
+      'aria-selected': ariaSelected,
+      ...domAttributeProps,
+      className,
+    });
+
+    return element;
   }
 );
 

packages/vibrant-core/src/lib/Text/Text.tsx

@@ -1,21 +1,24 @@
 import type { FC } from 'react';
 import { createElement, forwardRef } from 'react';
-import styled from '@emotion/styled';
+import { css } from '@emotion/css';
 import { nl2br } from '../nl2br';
 import type { TextProps } from './TextProps';
 import { interpolation, shouldForwardProp } from './TextProps';
 
-export const Text: FC<TextProps> = styled(
-  forwardRef<unknown, TextProps>(({ as = 'span', children, ...restProps }, ref) =>
-    createElement(as, {
-      ref,
-      children: typeof children === 'string' ? nl2br(children) : children,
-      ...restProps,
-    })
-  ),
-  {
-    shouldForwardProp,
-  }
-)(interpolation);
+export const Text: FC<TextProps> = forwardRef<unknown, TextProps>(({ as = 'span', children, ...restProps }, ref) => {
+  const className = Object.entries(interpolation({ ...restProps } ?? {}))
+    .map(([key, value]) => css({ [key]: value }))
+    .join(' ');
 
+  const domAttributeProps = Object.fromEntries(
+    Object.entries({ ...restProps }).filter(([key, _]) => shouldForwardProp(key))
+  );
+
+  return createElement(as, {
+    ref,
+    children: typeof children === 'string' ? nl2br(children) : children,
+    domAttributeProps,
+    className,
+  });
+});
 (Text as FC).displayName = 'Text';