https://github.com/h-yoshikawa44/ch-input-component
devChallenges リポジトリ（出典：devChallenge(legacy) - Front-end Developer - Input component)
https://github.com/h-yoshikawa44/ch-input-component
devchallenges emotion nextjs typescript
Last synced: 3 months ago
JSON representation
devChallenges リポジトリ（出典：devChallenge(legacy) - Front-end Developer - Input component)
- Host: GitHub
- URL: https://github.com/h-yoshikawa44/ch-input-component
- Owner: h-yoshikawa44
- Created: 2021-06-09T07:41:58.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2026-03-10T15:16:56.000Z (4 months ago)
- Last Synced: 2026-03-10T21:36:51.575Z (4 months ago)
- Topics: devchallenges, emotion, nextjs, typescript
- Language: TypeScript
- Homepage: https://ch-input-component-h-yoshikawa44.vercel.app/
- Size: 762 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Input 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/ClokxKDirrSdDyCt8D0D`.
（My assignment submission page at the time: `https://legacy.devchallenges.io/challenges/TSqutYM4c5WtluM7QzGp`.）
## 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 have created an Input component that contains a label.
Since it was created as a component for text input, the type of input element is limited to text format.
### 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
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/)
## 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 error state
- [x] User story: I can choose to disable input
- [x] User story: I can choose to have helper text
- [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 input sizes
- [x] User story: I can have different colors
- [x] User story: I can choose to have input take the width of the parent
- [x] User story: I can have multiline input like a textarea
- [x] User story: When I hover or focus, I can see visual indicators
- [ ] User story: I can still access all input attributes → ※1
- [x] User story (optional): Show input in a similar way like the design or use Storybook. Otherwise, showing the input in multiple states is enough
※1：
excluded some props whose settings conflict with custom props.
Also, Since it was created as a component for text input, the type of input element is limited to text format.
```tsx
// Input Component
type InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
type InputProps = (
| (Omit, 'size' | 'type'> & {
multiline?: false;
row?: undefined;
})
| (Omit, 'rows' | 'cols'> & {
multiline: true;
row?: number;
})
) & {
type?: InputType;
error?: boolean;
size?: Size;
fullWidth?: boolean;
color?: Color;
label?: string;
helperText?: string;
startIcon?: IconName;
endIcon?: IconName;
};
```
## 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/input-component.git
or
git clone git@github.com:h-yoshikawa44/input-component.git
# Install dependencies
npm install
# Run the app
npm run dev
```
## learned/improved
- `ComponentPropsWithRef` makes it easy to get prop type information for existing elements such as `input`.
- How to style a parent element when the child element has focus.
- How to make the hover of the parent element work when the child element is hovered.
- Types of css pseudo-classes that I was only partially aware of so far.
- How to create an input component with an icon inside.
## Acknowledgements
- [Material UI](https://material-ui.com/)
- [実践プロトタイピング Wevフロントエンド&バックエンドでプロトタイピング ※書籍](https://tk-rabbit-house.booth.pm/items/2381995)
- [CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方](https://ics.media/entry/200413/)
- [子要素にhoverやclickがあったときに親要素に反応させたい](https://www.softel.co.jp/blogs/tech/archives/6008)
## 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)