github-connect-storybook-components

React UI components for GitHub profile and repository display with Storybook.

Installation

npm install github-connect-storybook-components

or

yarn add github-connect-storybook-components

Components

Profile

GitHub 사용자 프로필을 표시하는 컴포넌트입니다.

import { Profile } from 'github-connect-storybook-components';
import type { GitHubUser } from 'github-connect-storybook-components';

const userData: GitHubUser = {
  login: "username",
  name: "User Name",
  avatar_url: "https://avatars.githubusercontent.com/u/123456"
};

<Profile data={userData} />

Repository

GitHub 저장소 정보를 순위와 함께 표시하는 컴포넌트입니다.

import { Repository } from 'github-connect-storybook-components';
import type { RepositoryInterface } from 'github-connect-storybook-components';

const repoData: RepositoryInterface = {
  name: "my-repo",
  language: "TypeScript",
  owner: { login: "username" },
  commitCount: 150,
  langugeColor: "#3178c6"
};

<Repository data={repoData} rank={1} />

Search

GitHub 사용자 검색을 위한 입력 컴포넌트입니다.

import { Search } from 'github-connect-storybook-components';

<Search />

Styles

컴포넌트 스타일은 자동으로 포함됩니다. 별도로 CSS를 import할 필요가 없습니다.

TypeScript Support

이 패키지는 TypeScript로 작성되었으며 타입 정의를 포함하고 있습니다.

import type {
  GitHubUser,
  RepositoryInterface,
  Commit,
  ApiError
} from 'github-connect-storybook-components';

Peer Dependencies

이 패키지는 다음 라이브러리를 peer dependencies로 요구합니다:

• react (^18.0.0 || ^19.0.0)
• react-dom (^18.0.0 || ^19.0.0)
• react-router-dom (^6.0.0 || ^7.0.0)

Development

Storybook

npm run storybook

Build Package

npm run build:package

License

MIT