/ch-input-component

devChallenges リポジトリ（出典：[devChallenge(legacy) - Front-end Developer - Input component](https://legacy.devchallenges.io/challenges/TSqutYM4c5WtluM7QzGp)

Primary LanguageTypeScript

Input component

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

Overview

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

Other major libraries

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.

  • 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 → ※1
  • 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.

// Input Component
type InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';

type InputProps = (
  | (Omit<ComponentPropsWithRef<'input'>, 'size' | 'type'> & {
      multiline?: false;
      row?: undefined;
    })
  | (Omit<ComponentPropsWithRef<'textarea'>, '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 and Node.js (which comes with npm) installed on your computer. From your command line:

# 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

Contact