{"id":34645498,"url":"https://github.com/h-yoshikawa44/ch-button-component","last_synced_at":"2026-04-16T06:02:08.707Z","repository":{"id":43446920,"uuid":"373711218","full_name":"h-yoshikawa44/ch-button-component","owner":"h-yoshikawa44","description":"devChallenges リポジトリ（出典：devChallenge(legacy) - Front-end Developer - Button component)","archived":false,"fork":false,"pushed_at":"2026-03-09T15:18:06.000Z","size":758,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-09T20:28:03.156Z","etag":null,"topics":["devchallenges","emotion","nextjs","typescript"],"latest_commit_sha":null,"homepage":"https://ch-button-component-h-yoshikawa44.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/h-yoshikawa44.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-06-04T03:40:02.000Z","updated_at":"2026-03-09T15:18:14.000Z","dependencies_parsed_at":"2025-02-16T11:19:30.125Z","dependency_job_id":"d645cc1d-cd7b-486a-8d0c-70743be790b1","html_url":"https://github.com/h-yoshikawa44/ch-button-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/h-yoshikawa44/ch-button-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-button-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-button-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-button-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-button-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/h-yoshikawa44","download_url":"https://codeload.github.com/h-yoshikawa44/ch-button-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-button-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31873606,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"online","status_checked_at":"2026-04-16T02:00:06.042Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["devchallenges","emotion","nextjs","typescript"],"created_at":"2025-12-24T17:42:26.633Z","updated_at":"2026-04-16T06:02:08.702Z","avatar_url":"https://github.com/h-yoshikawa44.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Please update value in the {}  --\u003e\n\n\u003ch1 align=\"center\"\u003eButton component\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n   Solution for a challenge from Devchallenges.io.\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\n    \u003ca href=\"https://ch-button-component-hitomi-yoshikawas-projects.vercel.app/\"\u003e\n      Demo\n    \u003c/a\u003e\n  \u003c/h3\u003e\n\u003c/div\u003e\n\n*The site is now closed, but this assignment was originally posted at `https://legacy.devchallenges.io/solutions/XYfovlFDBkg4qktnUh8b`.  \n（My assignment submission page at the time: `https://legacy.devchallenges.io/challenges/ohgVTyJCbm5OZyTB2gNY`.）\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Overview](#overview)\n  - [Built With](#built-with)\n- [Features](#features)\n- [How To Use](#how-to-use)\n- [learned/improved](#learnedimproved)\n- [Acknowledgements](#acknowledgements)\n- [Contact](#contact)\n\n\u003c!-- OVERVIEW --\u003e\n\n## Overview\n\n![overview](/screenshots/overview.png)\n\nI've been using UI component libraries for the most part.\nThis time, I challenged myself to create a component from scratch using emotion and write the style.\n\nI'm not used to starting from scratch, so it took me a long time to implement just this, but I'm glad I was able to give it some form.\n\n### Built With\n\n\u003c!-- This section should list any major frameworks that you built your project using. Here are a few examples.--\u003e\n\nBase\n- [Node.js](https://nodejs.org/)：24.14.0\n- [TypeScript](https://www.typescriptlang.org/)：5.9.3\n- [React](https://reactjs.org/)：19.2.4\n- [Next.js](https://nextjs.org/)：16.1.6\n  - Pages Router\n\nOther major libraries\n- [postcss-preset-env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env)\n- [emotion](https://emotion.sh/)\n- [emotion-icons](https://emotion-icons.dev/)\n- [polished](https://polished.js.org/)\n\n## Features\n\n\u003c!-- List the features of your application or follow the template. Don't share the figma file here :) --\u003e\n\nThis application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.\n\n- [x] User story: I can see different button types: default, outline and text\n- [x] User story: I can choose to disable box-shadow\n- [x] User story: I can choose to disable the button\n- [x] User story: I can choose to have an icon on the left or right (Use Google Icon and at least 5 variants)\n- [x] User story: I can have different button sizes\n- [x] User story: I can have different colors\n- [x] User story: When I hover or focus, I can see visual indicators\n- [x] User story: I can still access all button attributes\n- [x] User story (optional): Show button in a similar way like the design or use Storybook. Otherwise, showing the button in multiple states is enough\n\n## How To Use\n\n\u003c!-- This is an example, please update according to your application --\u003e\n\nTo clone and run this application, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](https://www.npmjs.com/)) installed on your computer. From your command line:\n\n```bash\n# Clone this repository\ngit clone https://github.com/h-yoshikawa44/button-component.git\nor\ngit clone git@github.com:h-yoshikawa44/button-component.git\n\n# Install dependencies\nnpm install\n\n# Run the app\nnpm run dev\n```\n\n## learned/improved\n- Basic usage of emotion\n- How to do a Grid layout\n- How to calculate the contrast ratio and make the text color suitable for the background color.\n- How to create a generic, small component from scratch without relying on a UI component library(It's still a very deep thing...)\n\n## Acknowledgements\n\n\u003c!-- This section should list any articles or add-ons/plugins that helps you to complete the project. This is optional but it will help you in the future. For exmpale --\u003e\n\n- [Github - material-ui](https://github.com/mui-org/material-ui)\n- [emotion](https://emotion.sh/)\n- [emotion - フレームワークに依存しない洗練された CSS-in-JS](https://tech.recruit-mp.co.jp/front-end/post-17543/)\n- [CSS Grid Layout を極める！（場面別編）](https://qiita.com/kura07/items/486c19045aab8090d6d9)\n- [任意の背景色に対して読みやすい文字色を選択する方法](https://katashin.info/2018/12/18/247)\n- [また TypeScript で引数のデフォルト値処理とか](https://qiita.com/asa-taka/items/6057322a5f7da0e19b87)\n\n## Contact\n\n- Website: [h-yoshikawa44.com](https://h-yoshikawa44.com)\n- GitHub: [@h-yoshikawa44](https://github.com/h-yoshikawa44)\n- X: [@yoshi44_lion](https://x.com/yoshi44_lion)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh-yoshikawa44%2Fch-button-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fh-yoshikawa44%2Fch-button-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh-yoshikawa44%2Fch-button-component/lists"}