https://github.com/h-yoshikawa44/ch-button-component
devChallenges リポジトリ（出典：devChallenge(legacy) - Front-end Developer - Button component)
https://github.com/h-yoshikawa44/ch-button-component
devchallenges emotion nextjs typescript
Last synced: 3 months ago
JSON representation
devChallenges リポジトリ（出典：devChallenge(legacy) - Front-end Developer - Button component)
- Host: GitHub
- URL: https://github.com/h-yoshikawa44/ch-button-component
- Owner: h-yoshikawa44
- Created: 2021-06-04T03:40:02.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2026-03-09T15:18:06.000Z (4 months ago)
- Last Synced: 2026-03-09T20:28:03.156Z (4 months ago)
- Topics: devchallenges, emotion, nextjs, typescript
- Language: TypeScript
- Homepage: https://ch-button-component-h-yoshikawa44.vercel.app/
- Size: 740 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Button component
Solution for a challenge from Devchallenges.io.
*The site is now closed, but this assignment was originally posted at `https://legacy.devchallenges.io/solutions/XYfovlFDBkg4qktnUh8b`.
（My assignment submission page at the time: `https://legacy.devchallenges.io/challenges/ohgVTyJCbm5OZyTB2gNY`.）
## Table of Contents
- [Table of Contents](#table-of-contents)
- [Overview](#overview)
- [Built With](#built-with)
- [Features](#features)
- [How To Use](#how-to-use)
- [learned/improved](#learnedimproved)
- [Acknowledgements](#acknowledgements)
- [Contact](#contact)
## Overview
I've been using UI component libraries for the most part.
This time, I challenged myself to create a component from scratch using emotion and write the style.
I'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.
### Built With
Base
- [Node.js](https://nodejs.org/)：24.14.0
- [TypeScript](https://www.typescriptlang.org/)：5.9.3
- [React](https://reactjs.org/)：19.2.4
- [Next.js](https://nextjs.org/)：16.1.6
- Pages Router
Other major libraries
- [postcss-preset-env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env)
- [emotion](https://emotion.sh/)
- [emotion-icons](https://emotion-icons.dev/)
- [polished](https://polished.js.org/)
## Features
This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.
- [x] User story: I can see different button types: default, outline and text
- [x] User story: I can choose to disable box-shadow
- [x] User story: I can choose to disable the button
- [x] User story: I can choose to have an icon on the left or right (Use Google Icon and at least 5 variants)
- [x] User story: I can have different button sizes
- [x] User story: I can have different colors
- [x] User story: When I hover or focus, I can see visual indicators
- [x] User story: I can still access all button attributes
- [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
## How To Use
To 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:
```bash
# Clone this repository
git clone https://github.com/h-yoshikawa44/button-component.git
or
git clone git@github.com:h-yoshikawa44/button-component.git
# Install dependencies
npm install
# Run the app
npm run dev
```
## learned/improved
- Basic usage of emotion
- How to do a Grid layout
- How to calculate the contrast ratio and make the text color suitable for the background color.
- How to create a generic, small component from scratch without relying on a UI component library(It's still a very deep thing...)
## Acknowledgements
- [Github - material-ui](https://github.com/mui-org/material-ui)
- [emotion](https://emotion.sh/)
- [emotion - フレームワークに依存しない洗練された CSS-in-JS](https://tech.recruit-mp.co.jp/front-end/post-17543/)
- [CSS Grid Layout を極める！（場面別編）](https://qiita.com/kura07/items/486c19045aab8090d6d9)
- [任意の背景色に対して読みやすい文字色を選択する方法](https://katashin.info/2018/12/18/247)
- [また TypeScript で引数のデフォルト値処理とか](https://qiita.com/asa-taka/items/6057322a5f7da0e19b87)
## Contact
- Website: [h-yoshikawa44.com](https://h-yoshikawa44.com)
- GitHub: [@h-yoshikawa44](https://github.com/h-yoshikawa44)
- X: [@yoshi44_lion](https://x.com/yoshi44_lion)