타입에러 수정했다

cobaltinc · Dec 11, 2023 · d493925 · d493925
1 parent 58f38b0
commit d493925
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 122 deletions.
diff --git a/lerna.json b/lerna.json
@@ -1,14 +1,8 @@
 {
   "version": "independent",
   "npmClient": "yarn",
-  "npmClientArgs": [
-    "--frozen-lockfile"
-  ],
-  "ignoreChanges": [
-    "**/stories/**",
-    "**/*.md"
-  ],
-  "packages": [
-    "packages/*"
-  ]
+  "npmClientArgs": ["--frozen-lockfile"],
+  "ignoreChanges": ["**/stories/**", "**/*.md"],
+  "packages": ["packages/*"],
+  "useWorkspaces": true
 }
diff --git a/packages/co-design-core/src/components/Alert/index.ts b/packages/co-design-core/src/components/Alert/index.ts
@@ -1,2 +1,2 @@
-export { Paper } from './Alert';
-export type { PaperProps } from './Alert';
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';
diff --git a/packages/co-design-core/src/components/Badge/Badge.tsx b/packages/co-design-core/src/components/Badge/Badge.tsx
@@ -1,13 +1,13 @@
 import { CoComponentProps, View } from '@co-design/core';
-import { ClassNames } from '@co-design/styles';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ClassNames, PolymorphicComponentProps, PolymorphicRef } from '@co-design/styles';
+import { ReactNode, forwardRef } from 'react';
 
 import useStyles from './Badge.style';
 import { Typography } from '../Typography';
 
 export type BadgeStylesNames = ClassNames<typeof useStyles>;
 
-export interface BadgeBaseProps {
+export interface _BadgeProps extends CoComponentProps<BadgeStylesNames> {
   badgeContent?: ReactNode;
   placement?: 'none' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
   placeDistance?: number;
@@ -17,66 +17,74 @@ export interface BadgeBaseProps {
   size?: 'small' | 'medium' | 'large' | number;
 }
 
-export interface BadgeProps extends BadgeBaseProps, CoComponentProps<BadgeStylesNames>, ComponentPropsWithoutRef<'span'> {}
+export type BadgeProps<C extends React.ElementType> = PolymorphicComponentProps<C, _BadgeProps>;
 
-const Badge = ({
-  children,
-  badgeContent = 0,
-  placement = 'none',
-  placeDistance = 2,
-  placeDistanceX,
-  placeDistanceY,
-  maxCount = 99,
-  size = 'medium',
-  className = '',
-  style,
-  co,
-  overrideStyles,
-  ...props
-}: BadgeProps) => {
-  const dot = !badgeContent;
-  const contentLength =
-    typeof badgeContent === 'number'
-      ? maxCount && badgeContent > maxCount
-        ? String(maxCount).length
-        : String(badgeContent).length
-      : typeof badgeContent === 'string'
-      ? badgeContent.length
-      : 1;
+type BadgeComponent = <C extends React.ElementType = 'span'>(props: BadgeProps<C>) => React.ReactNode;
 
-  const { cx, classes } = useStyles(
-    { size, contentLength, dot, placement, placeDistance, placeDistanceX, placeDistanceY },
+const Badge: BadgeComponent & { displayName?: string } = forwardRef(
+  <C extends React.ElementType = 'span'>(
     {
+      children,
+      component,
+      badgeContent = 0,
+      placement = 'none',
+      placeDistance = 2,
+      placeDistanceX,
+      placeDistanceY,
+      maxCount = 99,
+      size = 'medium',
+      className,
+      style,
+      co,
       overrideStyles,
-      name: 'Badge',
-    },
-  );
+      ...props
+    }: BadgeProps<C>,
+    ref: PolymorphicRef<C>,
+  ) => {
+    const dot = !badgeContent;
+    const contentLength =
+      typeof badgeContent === 'number'
+        ? maxCount && badgeContent > maxCount
+          ? String(maxCount).length
+          : String(badgeContent).length
+        : typeof badgeContent === 'string'
+        ? badgeContent.length
+        : 1;
 
-  let badge = null;
-  if (badgeContent) {
-    if (typeof badgeContent === 'number') {
-      badge = (
-        <Typography component="sup" variant="caption" color="text-light" className={cx(classes.badge, className)}>
-          {maxCount && badgeContent > maxCount ? `${maxCount}+` : badgeContent}
-        </Typography>
-      );
+    const { cx, classes } = useStyles(
+      { size, contentLength, dot, placement, placeDistance, placeDistanceX, placeDistanceY },
+      {
+        overrideStyles,
+        name: 'Badge',
+      },
+    );
+
+    let badge = null;
+    if (badgeContent) {
+      if (typeof badgeContent === 'number') {
+        badge = (
+          <Typography component="sup" variant="caption" color="text_light" className={cx(classes.badge, className)}>
+            {maxCount && badgeContent > maxCount ? `${maxCount}+` : badgeContent}
+          </Typography>
+        );
+      } else {
+        badge = (
+          <Typography component="sup" variant="caption" color="text_light" className={cx(classes.badge, className)}>
+            {badgeContent}
+          </Typography>
+        );
+      }
     } else {
-      badge = (
-        <Typography component="sup" variant="caption" color="text-light" className={cx(classes.badge, className)}>
-          {badgeContent}
-        </Typography>
-      );
+      badge = <Typography component="sup" className={cx(classes.badge, classes.dot, className)} />;
     }
-  } else {
-    badge = <Typography component="sup" className={cx(classes.badge, classes.dot, className)} />;
-  }
 
-  return (
-    <View component="span" className={classes.container} style={style} co={co} {...props}>
-      {children}
-      {badge}
-    </View>
-  );
-};
+    return (
+      <View<any> className={classes.container} ref={ref} component={component || 'span'} co={co} style={style} {...props}>
+        {children}
+        {badge}
+      </View>
+    );
+  },
+);
 
 export default Badge;
diff --git a/packages/co-design-core/src/components/Badge/Shield.tsx b/packages/co-design-core/src/components/Badge/Shield.tsx
@@ -1,8 +1,8 @@
 import { CoComponentProps, View } from '@co-design/core';
-import { ClassNames } from '@co-design/styles';
-import { ComponentPropsWithoutRef, ReactElement, cloneElement } from 'react';
+import { ClassNames, PolymorphicComponentProps, PolymorphicRef } from '@co-design/styles';
+import { ComponentPropsWithoutRef, ReactElement, cloneElement, forwardRef } from 'react';
 
-import { BadgeBaseProps } from './Badge';
+import { _BadgeProps } from './Badge';
 import useStyles from './Shield.style';
 import { Typography } from '../Typography';
 
@@ -16,41 +16,53 @@ interface Props {
   color?: string;
 }
 
-export interface ShieldBadgeProps extends BadgeBaseProps, CoComponentProps<ShieldBadgeStylesNames>, Omit<ComponentPropsWithoutRef<'span'>, 'title'> {
+export interface _ShieldBadgeProps
+  extends Omit<_BadgeProps, 'overrideStyles'>,
+    CoComponentProps<ShieldBadgeStylesNames>,
+    Omit<ComponentPropsWithoutRef<'span'>, 'title'> {
   title?: Props;
   message?: Props;
 }
 
-const ShieldBadge = ({ title, message, className, co, overrideStyles, ...props }: ShieldBadgeProps) => {
-  const { cx, classes } = useStyles(null, {
-    overrideStyles,
-    name: 'ShieldBadge',
-  });
-
-  return (
-    <View component="span" className={classes.wrapper} co={co} {...props}>
-      {title ? (
-        <div className={cx(classes.title, className)}>
-          {title.icon ? cloneElement(title.icon, { size: title.iconSize, color: title.color }) : null}
-          {title.text ? (
-            <Typography variant="caption" color="text-light">
-              {title.text}
-            </Typography>
-          ) : null}
-        </div>
-      ) : null}
-      {message ? (
-        <div className={cx(classes.message, className)}>
-          {message.icon ? cloneElement(message.icon, { size: message.iconSize, color: message.color }) : null}
-          {message.text ? (
-            <Typography variant="caption" color="text-light">
-              {message.text}
-            </Typography>
-          ) : null}
-        </div>
-      ) : null}
-    </View>
-  );
-};
+export type ShieldBadgeProps<C extends React.ElementType> = PolymorphicComponentProps<C, _ShieldBadgeProps>;
+
+type ShieldBadgeComponent = <C extends React.ElementType = 'span'>(props: ShieldBadgeProps<C>) => React.ReactNode;
+
+const ShieldBadge: ShieldBadgeComponent & { displayName?: string } = forwardRef(
+  <C extends React.ElementType = 'span'>(
+    { title, message, component, className, co, overrideStyles, ...props }: ShieldBadgeProps<C>,
+    ref: PolymorphicRef<C>,
+  ) => {
+    const { cx, classes } = useStyles(null, {
+      overrideStyles,
+      name: 'ShieldBadge',
+    });
+
+    return (
+      <View<any> ref={ref} component={component || 'span'} className={classes.wrapper} co={co} {...props}>
+        {title ? (
+          <div className={cx(classes.title, className)}>
+            {title.icon ? cloneElement(title.icon, { size: title.iconSize, color: title.color }) : null}
+            {title.text ? (
+              <Typography variant="caption" color="text_light">
+                {title.text}
+              </Typography>
+            ) : null}
+          </div>
+        ) : null}
+        {message ? (
+          <div className={cx(classes.message, className)}>
+            {message.icon ? cloneElement(message.icon, { size: message.iconSize, color: message.color }) : null}
+            {message.text ? (
+              <Typography variant="caption" color="text_light">
+                {message.text}
+              </Typography>
+            ) : null}
+          </div>
+        ) : null}
+      </View>
+    );
+  },
+);
 
 export default ShieldBadge;
diff --git a/packages/co-design-styles/src/theme/CoProvider.tsx b/packages/co-design-styles/src/theme/CoProvider.tsx
@@ -49,7 +49,6 @@ const GlobalStyles = () => {
         '*, *::before, *::after': {
           boxSizing: 'border-box',
         },
-        ...(theme.fontFace || {}),
         body: {
           fontFamily: theme.fontFamily,
           backgroundColor: theme.colorScheme === 'dark' ? theme.colors.darkBackground : theme.colors.lightBackground,

diff --git a/packages/co-design-styles/src/theme/defaultTheme.ts b/packages/co-design-styles/src/theme/defaultTheme.ts
@@ -13,7 +13,6 @@ import {
   foundations,
 } from './tokens';
 import { attachFunctions } from './functions/attachFunctions';
-import { fontFace } from './fontFace';
 import { DEFAULT_FONT_WEIGHTS } from './tokens/fontWeights';
 
 export const CO_PALETTES = Object.keys(DEFAULT_PALETTES);
@@ -32,10 +31,9 @@ export const _DEFAULT_THEME: CoThemeBase = {
   locale: 'en',
   colorScheme: 'light',
   lineHeight: 1.55,
-  fontFace,
-  fontFamily: 'Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji',
+  fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji',
   fontFamilyMonospace: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace',
-  primaryColor: 'purple',
+  primaryColor: 'blue',
 
   colors: DEFAULT_COLORS,
 

diff --git a/packages/co-design-styles/src/theme/fontFace.ts b/packages/co-design-styles/src/theme/fontFace.ts
diff --git a/packages/co-design-styles/src/theme/tokens/colors.ts b/packages/co-design-styles/src/theme/tokens/colors.ts
@@ -8,4 +8,4 @@ export const DEFAULT_COLORS = {
   lightBorder: '#E9EBF0',
   darkBackground: '#212121',
   darkBorder: '#424242',
-} as Record<CoColor, string>;
+} as Record<string, CoColor>;
diff --git a/packages/co-design-styles/src/theme/types/CoColor.ts b/packages/co-design-styles/src/theme/types/CoColor.ts
@@ -1,4 +1,10 @@
 import { CoPalette } from '../tokens';
 import { FoundationPaletteColor, FoundationSemanticColor } from './CoFoundations';
 
-export type CoColor = CoPalette | FoundationPaletteColor | FoundationSemanticColor | string;
+type RGB = `rgb(${number}, ${number}, ${number})`;
+type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
+type HEX = `#${string}`;
+
+type Color = RGB | RGBA | HEX;
+
+export type CoColor = CoPalette | FoundationPaletteColor | FoundationSemanticColor | Color;