{"id":23096722,"url":"https://github.com/anuva312/reusablecomponents-devchallenges","last_synced_at":"2026-04-10T15:01:52.663Z","repository":{"id":159935087,"uuid":"410574228","full_name":"anuva312/ReusableComponents-devChallenges","owner":"anuva312","description":"Reusable Button and Input Components. Developed as a part of devChallenges FrontEnd Developer Challenge.","archived":false,"fork":false,"pushed_at":"2023-12-21T13:09:55.000Z","size":814,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-09T08:19:16.858Z","etag":null,"topics":["css","devchallenges","html","javascript","reactjs","reusable-components","storybook"],"latest_commit_sha":null,"homepage":"https://615552d24d764a003a4c2874-gujboixrnt.chromatic.com/?path=/story/devchallenges--page","language":"JavaScript","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/anuva312.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-09-26T14:29:02.000Z","updated_at":"2021-12-15T09:29:41.000Z","dependencies_parsed_at":"2023-12-21T15:20:19.484Z","dependency_job_id":"a8603100-ab72-4625-a870-a46b593ef6a2","html_url":"https://github.com/anuva312/ReusableComponents-devChallenges","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anuva312%2FReusableComponents-devChallenges","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anuva312%2FReusableComponents-devChallenges/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anuva312%2FReusableComponents-devChallenges/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anuva312%2FReusableComponents-devChallenges/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anuva312","download_url":"https://codeload.github.com/anuva312/ReusableComponents-devChallenges/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247070928,"owners_count":20878586,"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":["css","devchallenges","html","javascript","reactjs","reusable-components","storybook"],"created_at":"2024-12-16T22:48:04.181Z","updated_at":"2025-12-30T20:26:37.101Z","avatar_url":"https://github.com/anuva312.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# devChallenges - FrontEndDeveloper\n\nSolutions for the [Button Component Challenge](https://legacy.devchallenges.io/challenges/ohgVTyJCbm5OZyTB2gNY) and [Input Component Challenge](https://legacy.devchallenges.io/challenges/TSqutYM4c5WtluM7QzGp) from [Devchallenges.io](https://legacy.devchallenges.io).\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n## Table of Contents\n\n- [Challenge](#challenge)\n  - [Challenge I](#the-button-component)\n  - [Challenge II](#the-input-component)\n- [Solution](#solution)\n  - [Demo](#demo)\n  - [Built With](#built-with)\n- [How to Use](#how-to-use)\n\n\u003c!-- Challenge --\u003e\n\n## Challenge\n\n### The Button Component\n\nCreate a reusable button with all the states in the design and a page displaying all the states.\n\nFulfill user stories below:\n\n- User story: I can see different button types: default, outline and text\n- User story: I can choose to disable box-shadow\n- User story: I can choose to disable the button\n- User story: I can choose to have an icon on the left or right (Use Google Icon and at least 5 variants)\n- User story: I can have different button sizes\n- User story: I can have different colors\n- User story: When I hover or focus, I can see visual indicators\n- User story: I can still access all button attributes\n- 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---\n\n### The Input Component\n\nCreate a reusable input with all the states in the design and a page displaying all the states.\n\nFulfill user stories below:\n\n- User story: I can see error state\n- User story: I can choose to disable input\n- User story: I can choose to have helper text\n- User story: I can choose to have an icon on the left or right (Use Google Icon and at least 5 variants)\n- User story: I can have different input sizes\n- User story: I can have different colors\n- User story: I can choose to have input take the width of the parent\n- User story: I can have multiline input like a textarea\n- User story: When I hover or focus, I can see visual indicators\n- User story: I can still access all input attributes\n- 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\u003c!-- Solution --\u003e\n\n## Solution\n\n### Demo\n\n_Find the components in action [here](https://615552d24d764a003a4c2874-gujboixrnt.chromatic.com/?path=/story/devchallenges--page)!_\n\n### Built With\n\n- [React](https://reactjs.org/)\n- [Storybook](https://storybook.js.org/)\n\n## How To Use\n\nTo clone and run this application, you'll need [Git](https://git-scm.com) and [yarn](https://yarnpkg.com/).\n\nFrom your command line:\n\n```bash\n# Clone this repository\n$ git clone https://github.com/anuva312/FrontEndDeveloper-devChallenges\n\n# Install dependencies\n$ yarn install\n\n# Run the app\n$ yarn storybook\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanuva312%2Freusablecomponents-devchallenges","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanuva312%2Freusablecomponents-devchallenges","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanuva312%2Freusablecomponents-devchallenges/lists"}