{"id":34645489,"url":"https://github.com/h-yoshikawa44/ch-input-component","last_synced_at":"2026-04-18T05:03:28.382Z","repository":{"id":43471060,"uuid":"375269216","full_name":"h-yoshikawa44/ch-input-component","owner":"h-yoshikawa44","description":"devChallenges リポジトリ（出典：devChallenge(legacy) - Front-end Developer - Input component)","archived":false,"fork":false,"pushed_at":"2026-03-10T15:16:56.000Z","size":780,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-10T21:36:51.575Z","etag":null,"topics":["devchallenges","emotion","nextjs","typescript"],"latest_commit_sha":null,"homepage":"https://ch-input-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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-06-09T07:41:58.000Z","updated_at":"2026-03-10T15:16:59.000Z","dependencies_parsed_at":"2025-02-16T14:35:02.661Z","dependency_job_id":"cc0cf43c-d76a-43b5-9327-17e19ecd0bdd","html_url":"https://github.com/h-yoshikawa44/ch-input-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/h-yoshikawa44/ch-input-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-input-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-input-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-input-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-input-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/h-yoshikawa44","download_url":"https://codeload.github.com/h-yoshikawa44/ch-input-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yoshikawa44%2Fch-input-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31957158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"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:25.202Z","updated_at":"2026-04-18T05:03:28.375Z","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\"\u003eInput 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-input-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/ClokxKDirrSdDyCt8D0D`.  \n（My assignment submission page at the time: `https://legacy.devchallenges.io/challenges/TSqutYM4c5WtluM7QzGp`.）\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 have created an Input component that contains a label.  \nSince it was created as a component for text input, the type of input element is limited to text format.\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\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\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 error state\n- [x] User story: I can choose to disable input\n- [x] User story: I can choose to have helper text\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 input sizes\n- [x] User story: I can have different colors\n- [x] User story: I can choose to have input take the width of the parent\n- [x] User story: I can have multiline input like a textarea\n- [x] User story: When I hover or focus, I can see visual indicators\n- [ ] User story: I can still access all input attributes → ※1\n- [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\n\n※1：  \nexcluded some props whose settings conflict with custom props.  \nAlso, Since it was created as a component for text input, the type of input element is limited to text format.\n```tsx\n// Input Component\ntype InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';\n\ntype InputProps = (\n  | (Omit\u003cComponentPropsWithRef\u003c'input'\u003e, 'size' | 'type'\u003e \u0026 {\n      multiline?: false;\n      row?: undefined;\n    })\n  | (Omit\u003cComponentPropsWithRef\u003c'textarea'\u003e, 'rows' | 'cols'\u003e \u0026 {\n      multiline: true;\n      row?: number;\n    })\n) \u0026 {\n  type?: InputType;\n  error?: boolean;\n  size?: Size;\n  fullWidth?: boolean;\n  color?: Color;\n  label?: string;\n  helperText?: string;\n  startIcon?: IconName;\n  endIcon?: IconName;\n};\n```\n\n## How To Use\n\n\u003c!-- Example:  --\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/input-component.git\nor\ngit clone git@github.com:h-yoshikawa44/input-component.git\n\n# Install dependencies\nnpm install\n\n# Run the app\nnpm run dev\n```\n\n## learned/improved\n- `ComponentPropsWithRef` makes it easy to get prop type information for existing elements such as `input`.\n- How to style a parent element when the child element has focus.\n- How to make the hover of the parent element work when the child element is hovered.\n- Types of css pseudo-classes that I was only partially aware of so far.\n- How to create an input component with an icon inside.\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- [Material UI](https://material-ui.com/)\n- [実践プロトタイピング Wevフロントエンド\u0026バックエンドでプロトタイピング ※書籍](https://tk-rabbit-house.booth.pm/items/2381995)\n- [CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方](https://ics.media/entry/200413/)\n- [子要素にhoverやclickがあったときに親要素に反応させたい](https://www.softel.co.jp/blogs/tech/archives/6008)\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\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh-yoshikawa44%2Fch-input-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fh-yoshikawa44%2Fch-input-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh-yoshikawa44%2Fch-input-component/lists"}