feat(shared/system, eslint-config-favolink): factory, createComponent, forwardRef 함수, 관련 type 추가, eslint any를 사용 가능하도록 관련 설정 해제

[sukvvon]

이슈 번호

• close feat(shared/system): factory, createComponent, forwardRef 함수, 관련 type 추가 #69

작업한 목록을 작성해 주세요

• chore(shared/system, pnpm-lock): package.json, eslintrc.js, tsocnfig.json 추가
• feat(shared/system): system 관련 type 추가
• feat(shared/system): createComponent, favolink, forwardRef 함수 추가
• chore(shared/components/package.json): @favolink/system 추가
• feat(shared/components): index.tsx에 @favolink/system 추가
• chore(pnpm-lock): shared/components의 package.json에 @favilink/system 추가
• chore(eslint-config-favolink): any를 사용 가능하도록 관련 설정 해제

스크린샷

pr 포인트나 궁금한 점을 작성해 주세요

예제 코드

// factory 예시 코드

// apply
const Box = favolink('div');

// get
// Link.tsx
import { favolink, forwardRef } from '@favolink/system';
import { classNames } from '@favolink/utils';
import { type ComponentPropsWithoutRef } from 'react';

const LINK_CLASSNAME = 'favolink-link';

type LinkProps = ComponentPropsWithoutRef<'a'> & {
  isExternal?: boolean;
};

const Link = forwardRef<LinkProps, 'a'>(function Link(props, ref) {
  const { children, as, className, isExternal = false, ...restProps } = props;

  // get
  return (
    <favolink.a
      {...restProps}
      ref={ref}
      as={as}
      target={isExternal ? '_blank' : undefined}
      rel={isExternal ? 'noopener' : undefined}
      className={classNames(LINK_CLASSNAME, className)}
    >
      {children}
    </favolink.a>
  );
});

export default Link;


// example.tsx

import { Box, Heading, Link, Text, useToast } from '@favolink/react';
import { Link as RouterLink } from 'react-router-dom';

export default function FavoliteLink() {
  const toast = useToast();

  return (
    <>
      <Heading
        as="h4"
        weight="bold"
        onClick={() => {
          toast.show({ message: 'hello world', duration: 3000, link: 'hello' });
        }}
      >
        FavoliteLink
      </Heading>
      <Text scale="1regular">hello world</Text>
      <Box as={RouterLink} to="/saved">
        hello
      </Box>
      <Box as="main">hello world!</Box>
      <Box as="section">hell</Box>
      <Link as={RouterLink} to="/saved">
        hello world
      </Link>
    </>
  );
}

• as props를 활용하여 디자인 시스템 내부 공통 컴포넌트의 tag 및 tag의 props를 바꿀 수 있게 하는 Proxy를 활용한 factory를 추가합니다!
• 'div' 요소, Link 커스텀 컴포넌트와 같은 것을 인자로 받는 일반적인 컴포넌트를 생성하는 함수인 createComponent를 추가합니다!
• 기존 forwardRef에 as prop이 추가된 forwardRef 함수를 추가합니다!
• system 관련 함수와 관련된 type을 추가합니다!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
favolink-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 6, 2024 4:16pm

[github-actions]

Thanks for the contribution!
I have applied any labels matching special text in your title and description.

Please review the labels and make any necessary changes.