https://github.com/anuva312/reusablecomponents-devchallenges

Reusable Button and Input Components. Developed as a part of devChallenges FrontEnd Developer Challenge.
https://github.com/anuva312/reusablecomponents-devchallenges

css devchallenges html javascript reactjs reusable-components storybook

Last synced: 6 days ago
JSON representation

Reusable Button and Input Components. Developed as a part of devChallenges FrontEnd Developer Challenge.

• Host: GitHub
• URL: https://github.com/anuva312/reusablecomponents-devchallenges
• Owner: anuva312
• Created: 2021-09-26T14:29:02.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-12-21T13:09:55.000Z (about 1 year ago)
• Last Synced: 2024-12-16T22:50:21.052Z (2 months ago)
• Topics: css, devchallenges, html, javascript, reactjs, reusable-components, storybook
• Language: JavaScript
• Homepage: https://615552d24d764a003a4c2874-gujboixrnt.chromatic.com/?path=/story/devchallenges--page
• Size: 795 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# devChallenges - FrontEndDeveloper

Solutions 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).

## Table of Contents

- [Challenge](#challenge)

  - [Challenge I](#the-button-component)

  - [Challenge II](#the-input-component)

- [Solution](#solution)

  - [Demo](#demo)

  - [Built With](#built-with)

- [How to Use](#how-to-use)

## Challenge

### The Button Component

Create a reusable button with all the states in the design and a page displaying all the states.

Fulfill user stories below:

- User story: I can see different button types: default, outline and text

- User story: I can choose to disable box-shadow

- User story: I can choose to disable the button

- User story: I can choose to have an icon on the left or right (Use Google Icon and at least 5 variants)

- User story: I can have different button sizes

- User story: I can have different colors

- User story: When I hover or focus, I can see visual indicators

- User story: I can still access all button attributes

- User story (optional): Show button in a similar way like the design or use Storybook. Otherwise, showing the button in multiple states is enough

---

### The Input Component

Create a reusable input with all the states in the design and a page displaying all the states.

Fulfill user stories below:

- User story: I can see error state

- User story: I can choose to disable input

- User story: I can choose to have helper text

- User story: I can choose to have an icon on the left or right (Use Google Icon and at least 5 variants)

- User story: I can have different input sizes

- User story: I can have different colors

- User story: I can choose to have input take the width of the parent

- User story: I can have multiline input like a textarea

- User story: When I hover or focus, I can see visual indicators

- User story: I can still access all input attributes

- User story (optional): Show input in a similar way like the design or use Storybook. Otherwise, showing the input in multiple states is enough

## Solution

### Demo

_Find the components in action [here](https://615552d24d764a003a4c2874-gujboixrnt.chromatic.com/?path=/story/devchallenges--page)!_

### Built With

- [React](https://reactjs.org/)

- [Storybook](https://storybook.js.org/)

## How To Use

To clone and run this application, you'll need [Git](https://git-scm.com) and [yarn](https://yarnpkg.com/).

From your command line:

```bash

# Clone this repository

$ git clone https://github.com/anuva312/FrontEndDeveloper-devChallenges

# Install dependencies

$ yarn install

# Run the app

$ yarn storybook

```