{"id":23089526,"url":"https://github.com/hyeokjaelee/pastime-ui","last_synced_at":"2025-08-16T08:31:51.074Z","repository":{"id":119620367,"uuid":"329884460","full_name":"HyeokjaeLee/pastime-ui","owner":"HyeokjaeLee","description":"📚 React components \u0026 hooks library","archived":false,"fork":false,"pushed_at":"2024-07-14T05:21:31.000Z","size":38739,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-07-14T06:27:38.951Z","etag":null,"topics":["components","library","react","storybook","typescript"],"latest_commit_sha":null,"homepage":"https://hyeokjaelee.github.io/pastime-ui","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HyeokjaeLee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-15T10:46:42.000Z","updated_at":"2024-07-14T06:27:49.055Z","dependencies_parsed_at":null,"dependency_job_id":"4daeddaf-7bb7-4891-8ad0-22a8f46bd931","html_url":"https://github.com/HyeokjaeLee/pastime-ui","commit_stats":null,"previous_names":["hyeokjaelee/pastime-ui"],"tags_count":137,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HyeokjaeLee%2Fpastime-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HyeokjaeLee%2Fpastime-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HyeokjaeLee%2Fpastime-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HyeokjaeLee%2Fpastime-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HyeokjaeLee","download_url":"https://codeload.github.com/HyeokjaeLee/pastime-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230023827,"owners_count":18161219,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","library","react","storybook","typescript"],"created_at":"2024-12-16T20:37:07.659Z","updated_at":"2024-12-16T20:37:08.498Z","avatar_url":"https://github.com/HyeokjaeLee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![header](https://capsule-render.vercel.app/api?type=rect\u0026color=0:EEFF00,100:a82da8\u0026fontColor=FFFFFF\u0026height=100\u0026section=header\u0026text=Pastime%20UI\u0026fontSize=40\u0026fontAlign=50\u0026fontAlignY=50)\n\n![Node.js](https://img.shields.io/badge/Node-339933?style=flat-square\u0026logo=Node.js\u0026logoColor=white) ![Pnpm](https://img.shields.io/badge/Pnpm-F69220?style=flat-square\u0026logo=pnpm\u0026logoColor=white) ![React](https://img.shields.io/badge/React-61DAFB?style=flat-square\u0026logo=react\u0026logoColor=black) ![Typescript](https://img.shields.io/badge/Typescript-3178c6?style=flat-square\u0026logo=typescript\u0026logoColor=white) ![SCSS](https://img.shields.io/badge/Sass-CC6699?style=flat-square\u0026logo=sass\u0026logoColor=white) ![CSS_Modules](https://img.shields.io/badge/CSS%20Modules-000000?style=flat-square\u0026logo=CSS%20Modules\u0026logoColor=white)\n![Vite](https://img.shields.io/badge/Vite-646CFF?style=flat-square\u0026logo=vite\u0026logoColor=white)\n\n\u003e It is a React component library for toy projects.\n\n## 📚 How to use\n\n**Install package**\n\n```bash\nnpm i @hyeokjaelee/pastime-ui\n```\n\n**Import style**\n\nAfter installing the package, import the style file in your React based app.\n\n패키지 설치 후 React 기반 앱에서 style 파일을 import 해줍니다.\n\n```javascript\n//ex: main.tsx (React), _app.tsx (Next.js)\nimport '@hyeokjaelee/pastime-ui/style.css';\n```\n\n## 🧩 Features\n\n- Components that receive user input can render at the component level without affecting the external state value by using their internal state value.\u003cbr/\u003e\u003cbr/\u003e\n  사용자의 입력을 받는 컴포넌트들은 내부 상태값을 이용해 외부 상태값에 영향을 주지 않고 컴포넌트 단위의 렌더링이 가능합니다.\n\n- Components that take user input support convenient HOCs and hooks like validationObserver and useValidation for intrinsic validation. Similarly, since these features do not affect external state values, re-rendering can be minimized.\u003cbr/\u003e\u003cbr/\u003e\n  사용자의 입력을 받는 컴포넌트들은 자체적으로 유효성 검사와 이를 확인할 수 있는 validationObserver, useValidation등의 편의성 HOC, hook을 지원합니다. 마찬가지로 해당 기능들은 외부 상태값에 영향을 주지 않기 때문에 재렌더링을 최소화 할 수 있습니다.\n\n- It supports dark mode. By default, it follows the device value, and you can change it with the class value of the html tag.\u003cbr/\u003e\u003cbr/\u003e다크모드를 지원합니다. 기본적으로 디바이스 값을 따르며 html 태그의 class값으로 변경할 수 있습니다.\u003cbr/\u003e\u003cbr/\u003e\n  ex: `\u003chtml lang=\"en\" class=\"dark\"\u003e` or `\u003chtml lang=\"en\" class=\"light\"\u003e`.\n\n### [Storybook](https://hyeokjaelee.github.io/pastime-ui)\n\nFor more detailed usage, please check the Storybook.\n\n그외 자세한 사용법은 스토리북을 확인해 주세요.\n\n### [Github](https://github.com/HyeokjaeLee/pastime-ui)\n\n![npm](https://img.shields.io/npm/dm/@hyeokjaelee/pastime-ui.svg?style=flat-square\u0026logo=npm\u0026logoColor=white)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyeokjaelee%2Fpastime-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyeokjaelee%2Fpastime-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyeokjaelee%2Fpastime-ui/lists"}