fix: updated input and chip components

src/components/Chip/Chip.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { StyledChipContainer, StyledChipGroupContainer } from "./Chip.styled";
 
 export interface ChipProps {
@@ -18,11 +18,18 @@ const Chip = ({ label, active, onClick }: ChipProps) => {
 export interface ChipGroupInterface {
   tags: string[];
   onClick: (tag: string) => void;
+  reset?: boolean;
 }
 
-export const ChipGroup = ({ tags, onClick }: ChipGroupInterface) => {
+export const ChipGroup = ({ tags, onClick, reset }: ChipGroupInterface) => {
   const [activeTag, setActiveTag] = useState<string | null>(null);
 
+  useEffect(() => {
+    if (reset) {
+      setActiveTag(null);
+    }
+  }, [reset]);
+
   const toggleTag = (tag: string) => {
     if (activeTag === tag) {
       setActiveTag(null);

src/components/Input/Input.stories.tsx

@@ -16,3 +16,7 @@ export const WithOnChange = () => (
 );
 
 export const WithPlaceholder = () => <Input placeholder="Placeholder" />;
+
+export const WithType = () => <Input type="number" />;
+
+export const WithLabel = () => <Input label="Label" />;

src/components/Input/Input.styled.ts

@@ -1,3 +1,8 @@
 import styled from "styled-components";
 
 export const StyledInput = styled.input``;
+export const LabelWrapper = styled.label`
+  display: block;
+  margin-bottom: 8px;
+  font-weight: bold;
+`;

src/components/Input/Input.tsx

@@ -1,26 +1,34 @@
 import React from "react";
-import { StyledInput } from "./Input.styled";
+import { LabelWrapper, StyledInput } from "./Input.styled";
 
 export interface InputProps {
   disabled?: boolean;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   placeholder?: string;
   className?: string;
+  type?: string;
+  label?: string;
 }
 
 export const Input = ({
   disabled,
   onChange,
   placeholder,
   className,
+  type,
+  label,
 }: InputProps) => {
   return (
-    <StyledInput
-      disabled={disabled}
-      onChange={onChange}
-      placeholder={placeholder}
-      className={className}
-    />
+    <>
+      {label ? <LabelWrapper>{label}</LabelWrapper> : null}
+      <StyledInput
+        disabled={disabled}
+        onChange={onChange}
+        placeholder={placeholder}
+        className={className}
+        type={type}
+      />
+    </>
   );
 };