react-input-chips 0.3.0

package/License

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 [B-Meet]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "react-input-chip-beta"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,149 @@
+# React-input-chips
+
+A package with minimum dependencies and maximum customization.
+
+If you want an input field whose value converts to a customizable chip on a click of keys of your choice then this is the best package for you.
+
+You have full control over
+
+-   validation of the field
+-   styling of the chips
+-   styling of the wrapper
+-   chip conversion trigger
+
+## Demo
+
+![react-chips](https://github.com/user-attachments/assets/ba33d40e-63ea-46fa-8011-d418ea211a0a)
+
+## Installation
+
+Install react-input-chips with npm
+
+```bash
+  npm install react-input-chips
+```
+
+## Usage/Examples
+
+You just need to import the `<InputChips/>` component in the file you want the **react-input-chip** in and pass the required props that's it. All set!
+
+**One important thing** for the default styling of the `<InputChips/>` is that you need to explicitly add CSS file import in the parent or higher or the same component.
+The following is the path to it
+
+```bash
+import "../node_modules/react-input-chip-beta/dist/index.css";
+```
+
+Hers is the simple plain example
+```javascript
+import { useState } from "react";
+import { InputChips } from "react-input-chip-beta";
+
+const MyComponent = () => {
+	const [chips, setChips] = useState<string[]>([]);
+	const [inputValue, setInputValue] = useState("");
+
+	return (
+		<InputChips
+			chips={chips}
+			inputValue={inputValue}
+			setChips={setChips}
+			setInputValue={setInputValue}
+		/>
+	);
+};
+
+export default MyComponent;
+
+
+```
+
+### Validation
+
+If you want to add a validation function and the error message then you might try something like the following in the parent component
+
+```javascript
+const MyComponent = () => {
+    const [chips, setChips] = useState<string[]>([]);
+    const [inputValue, setInputValue] = useState('');
+    const [error, setError] = useState<{inputValueError?: string}>({});
+
+    const validation = () => {
+        const tempErr: {inputValueError?: string} = {};
+        if (!inputValue.trim().length) {
+            tempErr.inputValueError = 'atleast add one message';
+        }
+
+        setError(tempErr);
+        return Object.keys(tempErr).length <= 0;
+    };
+
+    return (
+        <InputChips
+            chips={chips}
+            inputValue={inputValue}
+            setChips={setChips}
+            setInputValue={setInputValue}
+            errorMsg={error?.inputValueError}
+            validate={validation}
+        />
+    );
+};
+
+```
+
+## Props and information
+
+I have for you here all the props supported as of now. (\* these are required props)
+
+
+| Prop                        | Default Value                        | Description                                                                                                                                                                                                                                                 |
+| --------------------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| chips\*                     | -                                    | This is a react `state` for storing the chips, it has to be an array                                                                                                                                                                                        |
+| setChips\*                  | -                                    | This is the `setState` for chips state                                                                                                                                                                                                                      |
+| inputValue\*                | -                                    | This will be a react `state` for handling the user input before it turns into a chip                                                                                                                                                                        |
+| setInputValue\*             | -                                    | This is the `setState` for input value                                                                                                                                                                                                                      |
+| keysToTriggerChipConversion | `[Enter', ',']`                      | The keys entered in this array will trigger the chip conversion from the input value. (The values allowed in the array are mentioned below in the typescript interface, so you will be able to add the keys from that set only)                                                                                  |
+| backspaceToRemoveChip       | false                                | This will remove the chip when the user hits backspace after the `inputvalue` is cleared                                                                                                                                                                                            |
+| validate                    | return value `true`                  | This is the validation function which must return a boolean value either `true` or `false` based on the conditions you want the field value to be valid or convertible into a chip. If the value is valid then n then only a chip will be created out of it |
+| disabled                    | false                                | Enable that to disable the input field                                                                                                                                                                                                                      |
+| placeholder                 | -                                    | A placeholder for input field                                                                                                                                                                                                                               |
+| nextPlaceholder             | -                                    | Placeholder after the first chip is created                                                                                                                                                                                                                 |
+| removeBtnSvg                | is an `SVG` which looks like close/X | You can add any HTML element as of now, but it is better to add an `SVG` element                                                                                                                                                                            |
+| chipStyles                  | -                                    | You add any styles supported by CSS will be added as inline styles for the chip hence, the highest priority is given to your styles                                                                                                                   |
+| containerStyles             | -                                    | You can add the CSS styles for the whole input container itself                                                                                                                    
+| errorMsg                    | -                                     | It's the error message you want to display and expects a string as its value
+
+keysToTriggerChipConversion - Allowed key codes 
+```
+'ShiftRight' | 'ShiftLeft' | 'ControlLeft' | 'ControlRight' | 'AltRight'
+| 'AltLeft' | 'MetaLeft' | 'MetaRight' | 'Tab' | 'Enter' | 'Backspace'
+| 'Space' | 'Comma' | 'Period' | 'Slash' | 'Semicolon' | 'ArrowLeft'
+| 'ArrowRight';
+```
+
+
+## Additional Info
+
+Hey guys,
+
+It is the first npm package I ever released and it's gonna be so much fun. No worries, The supported props in the current version do not have any issues, in case you face any please open an issue or discussion, a PR for a fix would be much appreciated.
+
+I am excited to get some initial issues and feature requests and will work on them on priority until version 1.0.0 😅 also after that.
+
+What are the future visions as of now?
+
+-   Remove the explicit addition of the CSS file path
+-   Add 100% test cases for the component
+-   `removeBtnSvg` expects any HTML element, I want to enforce only SVG element
+-   Add a few more features to it
+
+Any suggestions are welcome.
+
+## Support
+
+For support, email meetbhalodiya1030@gmail.com or open a discussion/issue
+
+## Authors
+
+-   [@b-meet](https://github.com/b-meet)

package/dist/index.css

@@ -0,0 +1,43 @@
+/* src/components/styles.css */
+.chip-input-warpper {
+  gap: 4px;
+  flex: 2;
+  padding: 5px;
+  overflow: auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  transform: scale(1);
+  border: 1px solid #BBBBBB;
+  border-radius: 4px;
+  .chip {
+    background: #f8e3e3;
+    border-radius: 4px;
+    color: #333333;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+    max-width: max-content;
+    padding: 6px;
+  }
+  .chip-input {
+    border: none;
+    outline: none;
+    flex: 1;
+    padding: 0 8px;
+    height: 30px;
+  }
+  .closeBtn {
+    outline: none;
+    border: none;
+    background: none;
+    height: 18px;
+    width: 18px;
+    object-fit: cover;
+    cursor: pointer;
+    display: grid;
+    place-items: center;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/styles.css"],"sourcesContent":[".chip-input-warpper {\n   gap: 4px;\n   flex: 2;\n   padding: 5px;\n   overflow: auto;\n   display: flex;\n   flex-wrap: wrap;\n   align-items: center;\n   transform: scale(1);\n   border: 1px solid #BBBBBB;\n   border-radius: 4px;\n\n   .chip {\n      background: #f8e3e3;\n      border-radius: 4px;\n      color: #333333;\n      display: flex;\n      gap: 0.5rem;\n      align-items: center;\n      justify-content: space-between;\n      max-width: max-content;\n      padding: 6px;\n   }\n\n   .chip-input {\n      border: none;\n      outline: none;\n      flex: 1;\n      padding: 0 8px;\n      height: 30px;\n   }\n\n   .closeBtn {\n      outline: none;\n      border: none;\n      background: none;\n      height: 18px;\n      width: 18px;\n      object-fit: cover;\n      cursor: pointer;\n      display: grid;\n      place-items: center;\n   }\n}"],"mappings":";AAAA,CAAC;AACE,OAAK;AACL,QAAM;AACN,WAAS;AACT,YAAU;AACV,WAAS;AACT,aAAW;AACX,eAAa;AACb,aAAW,MAAM;AACjB,UAAQ,IAAI,MAAM;AAClB,iBAAe;AAEf,GAAC;AACE,gBAAY;AACZ,mBAAe;AACf,WAAO;AACP,aAAS;AACT,SAAK;AACL,iBAAa;AACb,qBAAiB;AACjB,eAAW;AACX,aAAS;AACZ;AAEA,GAAC;AACE,YAAQ;AACR,aAAS;AACT,UAAM;AACN,aAAS,EAAE;AACX,YAAQ;AACX;AAEA,GAAC;AACE,aAAS;AACT,YAAQ;AACR,gBAAY;AACZ,YAAQ;AACR,WAAO;AACP,gBAAY;AACZ,YAAQ;AACR,aAAS;AACT,iBAAa;AAChB;AACH;","names":[]}

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TInputChips {
+    chips: string[];
+    inputValue: string;
+    setChips: (val: string[]) => void;
+    setInputValue: React.Dispatch<React.SetStateAction<string>>;
+    keysToTriggerChipConversion?: string[];
+    needWhiteSpace?: boolean;
+    validate?: () => boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    nextPlaceholder?: string;
+    removeBtnSvg?: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+    chipStyles?: React.CSSProperties;
+    containerStyles?: React.CSSProperties;
+}
+
+declare const InputChips: ({ chips, setChips, inputValue, setInputValue, keysToTriggerChipConversion, needWhiteSpace, validate, disabled, placeholder, nextPlaceholder, removeBtnSvg, chipStyles, containerStyles, }: TInputChips) => react_jsx_runtime.JSX.Element;
+
+export { InputChips };

package/dist/index.js

@@ -0,0 +1,100 @@
+// src/components/InputChip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputChips = ({
+  chips,
+  setChips,
+  inputValue,
+  setInputValue,
+  keysToTriggerChipConversion = ["Enter", ","],
+  needWhiteSpace = true,
+  validate,
+  disabled = false,
+  placeholder,
+  nextPlaceholder,
+  removeBtnSvg,
+  chipStyles,
+  containerStyles
+}) => {
+  const handleInputChange = (e) => {
+    if (needWhiteSpace) {
+      setInputValue(e.target.value);
+    } else {
+      setInputValue(e.target.value.trim());
+    }
+  };
+  const handleInputKeyDown = (e) => {
+    if (keysToTriggerChipConversion.includes(e.key) && (!validate || validate())) {
+      const regex = new RegExp(
+        `[${keysToTriggerChipConversion.join("")}]`,
+        "g"
+      );
+      const chip = inputValue.trim().replace(regex, "");
+      if (chip) {
+        setChips([...chips, chip]);
+        setInputValue("");
+      }
+      e.preventDefault();
+    }
+  };
+  const removeChip = (e, chipToRemove) => {
+    e.preventDefault();
+    const filteredChips = chips.filter(
+      (chip, index) => chip + index !== chipToRemove
+    );
+    setChips(filteredChips);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "chip-input-warpper", style: containerStyles ?? {}, children: [
+    chips?.map((chip, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": `input-value-chip-${index}`,
+        className: "chip",
+        style: chipStyles ?? {},
+        children: [
+          chip,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "closeBtn",
+              "data-testid": `remove-chip-btn-${index}`,
+              onClick: (e) => removeChip(e, chip + index),
+              children: removeBtnSvg || /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  stroke: "currentColor",
+                  fill: "currentColor",
+                  strokeWidth: "0",
+                  viewBox: "0 0 24 24",
+                  height: 15,
+                  children: [
+                    /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h24v24H0z" }),
+                    /* @__PURE__ */ jsx("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      },
+      chip + index
+    )),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "chip-input",
+        type: "text",
+        placeholder: disabled ? "" : chips.length ? nextPlaceholder : placeholder,
+        value: inputValue,
+        onChange: handleInputChange,
+        onKeyDown: handleInputKeyDown,
+        disabled
+      }
+    )
+  ] });
+};
+var InputChip_default = InputChips;
+export {
+  InputChip_default as InputChips
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/InputChip.tsx"],"sourcesContent":["import React from 'react';\nimport './styles.css';\nimport {TInputChips} from '../types';\n\nconst InputChips = ({\n    chips,\n    setChips,\n    inputValue,\n    setInputValue,\n    keysToTriggerChipConversion = ['Enter', ','],\n    needWhiteSpace = true,\n    validate,\n    disabled = false,\n    placeholder,\n    nextPlaceholder,\n    removeBtnSvg,\n    chipStyles,\n    containerStyles,\n}: TInputChips) => {\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (needWhiteSpace) {\n            setInputValue(e.target.value);\n        } else {\n            setInputValue(e.target.value.trim());\n        }\n    };\n\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (\n            keysToTriggerChipConversion.includes(e.key) &&\n            (!validate || validate())\n        ) {\n            const regex = new RegExp(\n                `[${keysToTriggerChipConversion.join('')}]`,\n                'g'\n            );\n            const chip = inputValue.trim().replace(regex, '');\n\n            if (chip) {\n                setChips([...chips, chip]);\n                setInputValue('');\n            }\n\n            e.preventDefault();\n        }\n    };\n\n    const removeChip = (\n        e: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n        chipToRemove: string\n    ) => {\n        e.preventDefault();\n        const filteredChips = chips.filter(\n            (chip, index) => chip + index !== chipToRemove\n        );\n        setChips(filteredChips);\n    };\n\n    return (\n        <div className=\"chip-input-warpper\" style={containerStyles ?? {}}>\n            {chips?.map((chip, index) => (\n                <div\n                    key={chip + index}\n                    data-testid={`input-value-chip-${index}`}\n                    className=\"chip\"\n                    style={chipStyles ?? {}}\n                >\n                    {chip}\n                    <button\n                        type=\"button\"\n                        className=\"closeBtn\"\n                        data-testid={`remove-chip-btn-${index}`}\n                        onClick={(e) => removeChip(e, chip + index)}\n                    >\n                        {removeBtnSvg || (\n                            <svg\n                                stroke=\"currentColor\"\n                                fill=\"currentColor\"\n                                strokeWidth=\"0\"\n                                viewBox=\"0 0 24 24\"\n                                height={15}\n                            >\n                                <path fill=\"none\" d=\"M0 0h24v24H0z\"></path>\n                                <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path>\n                            </svg>\n                        )}\n                    </button>\n                </div>\n            ))}\n            <input\n                className=\"chip-input\"\n                type=\"text\"\n                placeholder={\n                    disabled ? '' : chips.length ? nextPlaceholder : placeholder\n                }\n                value={inputValue}\n                onChange={handleInputChange}\n                onKeyDown={handleInputKeyDown}\n                disabled={disabled}\n            />\n        </div>\n    );\n};\n\nexport default InputChips;\n"],"mappings":";AA2E4B,SAOI,KAPJ;AAvE5B,IAAM,aAAa,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,8BAA8B,CAAC,SAAS,GAAG;AAAA,EAC3C,iBAAiB;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAmB;AACf,QAAM,oBAAoB,CAAC,MAA2C;AAClE,QAAI,gBAAgB;AAChB,oBAAc,EAAE,OAAO,KAAK;AAAA,IAChC,OAAO;AACH,oBAAc,EAAE,OAAO,MAAM,KAAK,CAAC;AAAA,IACvC;AAAA,EACJ;AAEA,QAAM,qBAAqB,CAAC,MAA6C;AACrE,QACI,4BAA4B,SAAS,EAAE,GAAG,MACzC,CAAC,YAAY,SAAS,IACzB;AACE,YAAM,QAAQ,IAAI;AAAA,QACd,IAAI,4BAA4B,KAAK,EAAE,CAAC;AAAA,QACxC;AAAA,MACJ;AACA,YAAM,OAAO,WAAW,KAAK,EAAE,QAAQ,OAAO,EAAE;AAEhD,UAAI,MAAM;AACN,iBAAS,CAAC,GAAG,OAAO,IAAI,CAAC;AACzB,sBAAc,EAAE;AAAA,MACpB;AAEA,QAAE,eAAe;AAAA,IACrB;AAAA,EACJ;AAEA,QAAM,aAAa,CACf,GACA,iBACC;AACD,MAAE,eAAe;AACjB,UAAM,gBAAgB,MAAM;AAAA,MACxB,CAAC,MAAM,UAAU,OAAO,UAAU;AAAA,IACtC;AACA,aAAS,aAAa;AAAA,EAC1B;AAEA,SACI,qBAAC,SAAI,WAAU,sBAAqB,OAAO,mBAAmB,CAAC,GAC1D;AAAA,WAAO,IAAI,CAAC,MAAM,UACf;AAAA,MAAC;AAAA;AAAA,QAEG,eAAa,oBAAoB,KAAK;AAAA,QACtC,WAAU;AAAA,QACV,OAAO,cAAc,CAAC;AAAA,QAErB;AAAA;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACG,MAAK;AAAA,cACL,WAAU;AAAA,cACV,eAAa,mBAAmB,KAAK;AAAA,cACrC,SAAS,CAAC,MAAM,WAAW,GAAG,OAAO,KAAK;AAAA,cAEzC,0BACG;AAAA,gBAAC;AAAA;AAAA,kBACG,QAAO;AAAA,kBACP,MAAK;AAAA,kBACL,aAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,QAAQ;AAAA,kBAER;AAAA,wCAAC,UAAK,MAAK,QAAO,GAAE,iBAAgB;AAAA,oBACpC,oBAAC,UAAK,GAAE,yGAAwG;AAAA;AAAA;AAAA,cACpH;AAAA;AAAA,UAER;AAAA;AAAA;AAAA,MAxBK,OAAO;AAAA,IAyBhB,CACH;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACG,WAAU;AAAA,QACV,MAAK;AAAA,QACL,aACI,WAAW,KAAK,MAAM,SAAS,kBAAkB;AAAA,QAErD,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA;AAAA,IACJ;AAAA,KACJ;AAER;AAEA,IAAO,oBAAQ;","names":[]}

package/package.json

@@ -0,0 +1,70 @@
+{
+    "name": "react-input-chips",
+    "private": false,
+    "version": "0.3.0",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "type": "module",
+    "keywords": [
+        "react-input",
+        "react-chips",
+        "react-chip",
+        "chips-input",
+        "input-chips",
+        "react-chips-input",
+        "react-chip-input",
+        "react-input-chips",
+        "react-chip-component",
+        "react-multi-input",
+        "tags-input",
+        "react-tags-input",
+        "multi-value-input",
+        "react-custom-input",
+        "chip-input",
+        "react-tags",
+        "react-token-input",
+        "input-chip-component"
+    ],
+    "homepage": "https://github.com/b-meet/react-input-chips",
+    "repository": {
+        "type": "github",
+        "url": "https://github.com/b-meet/react-input-chips"
+    },
+    "license": "MIT",
+    "author": {
+        "name": "Meet",
+        "email": "meetbhalodiya1030@gmail.com",
+        "url": "https://github.com/b-meet"
+    },
+    "files": [
+        "dist",
+        "src",
+        "dist/**/*.css"
+    ],
+    "scripts": {
+        "dev": "vite",
+        "build": "tsup",
+        "lint": "eslint .",
+        "preview": "vite preview",
+        "bundle": "tsup src/index.ts"
+    },
+    "dependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.13.0",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
+        "@vitejs/plugin-react-swc": "^3.5.0",
+        "eslint": "^9.13.0",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-refresh": "^0.4.14",
+        "globals": "^15.11.0",
+        "tsup": "^8.3.5",
+        "typescript": "~5.6.2",
+        "typescript-eslint": "^8.11.0",
+        "vite": "^5.4.10"
+    }
+}

package/src/App.tsx

@@ -0,0 +1,34 @@
+import {useState} from 'react';
+import InputChips from './components/InputChip';
+
+const App = () => {
+    const [chips, setChips] = useState<string[]>([]);
+    const [inputValue, setInputValue] = useState('');
+    const [error, setError] = useState<{inputValueError?: string}>({});
+
+    const validation = () => {
+        const tempErr: {inputValueError?: string} = {};
+        if (!inputValue.trim().length) {
+            tempErr.inputValueError = 'atleast add one message';
+        }
+
+        setError(tempErr);
+        return Object.keys(tempErr).length <= 0;
+    };
+
+    return (
+        <InputChips
+            chips={chips}
+            inputValue={inputValue}
+            setChips={setChips}
+            placeholder="Add user names"
+            setInputValue={setInputValue}
+            nextPlaceholder="You can add upto 10 user names"
+            backspaceToRemoveChip
+            errorMsg={error?.inputValueError}
+            validate={validation}
+        />
+    );
+};
+
+export default App;

package/src/components/InputChip.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import './styles.css';
+import {TInputChips, AllowedKeys} from '../types';
+
+const InputChips = ({
+    chips,
+    setChips,
+    inputValue,
+    setInputValue,
+    keysToTriggerChipConversion = ['Enter', 'Comma'],
+    validate,
+    disabled = false,
+    placeholder,
+    nextPlaceholder,
+    removeBtnSvg,
+    chipStyles,
+    containerStyles,
+    backspaceToRemoveChip = false,
+    errorMsg,
+}: TInputChips) => {
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+
+        if (keysToTriggerChipConversion.includes('Space')) {
+            setInputValue(value.trim());
+        } else {
+            setInputValue(value);
+        }
+    };
+
+    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (
+            backspaceToRemoveChip &&
+            e.key === 'Backspace' &&
+            inputValue.trim() === ''
+        ) {
+            setChips((prevState) => {
+                const updatedChips = [...prevState];
+                updatedChips.pop();
+                return updatedChips;
+            });
+        }
+
+        const isKeyAllowed = (key: string): key is AllowedKeys => {
+            return (keysToTriggerChipConversion as AllowedKeys[]).includes(
+                key as AllowedKeys
+            );
+        };
+
+        if (isKeyAllowed(e.code) && (!validate || validate())) {
+            let chip = inputValue.trim();
+
+            if (keysToTriggerChipConversion.some((key) => key.length === 1)) {
+                const regex = new RegExp(
+                    `[${keysToTriggerChipConversion
+                        .filter((key) => key.length === 1)
+                        .map((key) =>
+                            key.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&')
+                        )
+                        .join('')}]`,
+                    'g'
+                );
+                chip = chip.replace(regex, '');
+            }
+
+            if (chip) {
+                setChips([...chips, chip]);
+                setInputValue('');
+            }
+
+            e.preventDefault();
+        }
+    };
+
+    const removeChip = (
+        e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+        chipToRemove: string
+    ) => {
+        e.preventDefault();
+        const filteredChips = chips.filter(
+            (chip, index) => chip + index !== chipToRemove
+        );
+        setChips(filteredChips);
+    };
+
+    return (
+        <>
+            <section
+                className={
+                    errorMsg?.length
+                        ? 'chip-input-wrapper chip-input-wrapper-error'
+                        : 'chip-input-wrapper'
+                }
+                style={containerStyles ?? {}}
+            >
+                {chips.map((chip, index) => (
+                    <div
+                        key={chip + index}
+                        data-testid={`input-value-chip-${index}`}
+                        className="chip"
+                        style={chipStyles ?? {}}
+                    >
+                        {chip}
+                        <button
+                            type="button"
+                            className="closeBtn"
+                            data-testid={`remove-chip-btn-${index}`}
+                            onClick={(e) => removeChip(e, chip + index)}
+                        >
+                            {removeBtnSvg || (
+                                <svg
+                                    stroke="currentColor"
+                                    fill="currentColor"
+                                    strokeWidth="0"
+                                    viewBox="0 0 24 24"
+                                    height={15}
+                                >
+                                    <path fill="none" d="M0 0h24v24H0z"></path>
+                                    <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
+                                </svg>
+                            )}
+                        </button>
+                    </div>
+                ))}
+                <input
+                    className="chip-input"
+                    type="text"
+                    placeholder={
+                        disabled
+                            ? ''
+                            : chips.length
+                            ? nextPlaceholder
+                            : placeholder
+                    }
+                    value={inputValue}
+                    onChange={handleInputChange}
+                    onKeyDown={handleInputKeyDown}
+                    disabled={disabled}
+                />
+            </section>
+            {errorMsg?.length && (
+                <p className="error-msg-wrapper">{errorMsg}</p>
+            )}
+        </>
+    );
+};
+
+export default InputChips;

package/src/components/styles.css

@@ -0,0 +1,55 @@
+.chip-input-wrapper {
+   gap: 4px;
+   flex: 2;
+   padding: 5px;
+   overflow: auto;
+   display: flex;
+   flex-wrap: wrap;
+   align-items: center;
+   border: 1px solid #BBBBBB;
+   border-radius: 4px;
+   max-width: 650px;
+   min-width: 300px;
+
+   .chip {
+      background: #e5e5e5;
+      border-radius: 4px;
+      color: #333333;
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      justify-content: space-between;
+      max-width: max-content;
+      padding: 6px;
+   }
+
+   .chip-input {
+      border: none;
+      outline: none;
+      flex: 1;
+      padding: 0 8px;
+      height: 30px;
+   }
+
+   .closeBtn {
+      outline: none;
+      border: none;
+      background: none;
+      height: 18px;
+      width: 18px;
+      object-fit: cover;
+      cursor: pointer;
+      display: grid;
+      place-items: center;
+   }
+}
+
+.chip-input-wrapper-error {
+   border: 2px solid red
+}
+
+.error-msg-wrapper {
+   margin: 0;
+   font-size: 12px;
+   color: red
+}

package/src/index.css

@@ -0,0 +1,12 @@
+:root {
+   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+   font-synthesis: none;
+   text-rendering: optimizeLegibility;
+}
+
+body {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   min-height: 100vh;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export {default as InputChips} from './components/InputChip';

package/src/main.tsx

@@ -0,0 +1,10 @@
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+        <App />
+    </StrictMode>
+);

package/src/types/index.ts

@@ -0,0 +1,36 @@
+export type AllowedKeys =
+    | 'ShiftRight'
+    | 'ShiftLeft'
+    | 'ControlLeft'
+    | 'ControlRight'
+    | 'AltRight'
+    | 'AltLeft'
+    | 'MetaLeft'
+    | 'MetaRight'
+    | 'Tab'
+    | 'Enter'
+    | 'Backspace'
+    | 'Space'
+    | 'Comma'
+    | 'Period'
+    | 'Slash'
+    | 'Semicolon'
+    | 'ArrowLeft'
+    | 'ArrowRight';
+
+export interface TInputChips {
+    chips: string[];
+    inputValue: string;
+    setChips: React.Dispatch<React.SetStateAction<string[]>>;
+    setInputValue: React.Dispatch<React.SetStateAction<string>>;
+    keysToTriggerChipConversion?: AllowedKeys[];
+    validate?: () => boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    nextPlaceholder?: string;
+    removeBtnSvg?: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+    chipStyles?: React.CSSProperties;
+    containerStyles?: React.CSSProperties;
+    backspaceToRemoveChip?: boolean;
+    errorMsg?: string;
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />