diff --git a/.nvmrc b/.nvmrc
index 19c7bdb..25bf17f 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-16
\ No newline at end of file
+18
\ No newline at end of file
diff --git a/package.json b/package.json
index ae6de07..ade9b4a 100644
--- a/package.json
+++ b/package.json
@@ -1,53 +1,49 @@
{
"name": "react-tag-input-component",
"description": "lightweight component for tag(s) input",
- "version": "1.1.3",
+ "version": "2.0.0",
"license": "MIT",
"author": "Harsh Zalavadiya",
"repository": "https://github.com/hc-oss/react-tag-input-component",
- "module": "dist/react-tag-input-component.esm.js",
- "main": "dist/index.js",
- "typings": "dist/index.d.ts",
- "sideEffects": false,
- "engines": {
- "node": ">=10"
- },
+ "main": "./dist/index.js",
+ "module": "./dist/esm/index.js",
+ "types": "./dist/index.d.ts",
"scripts": {
- "start": "tsdx watch",
- "build": "tsdx build && filesize",
- "lint": "tsdx lint",
- "prepare": "tsdx build && filesize",
+ "build": "tsup src/index.tsx --inject-style --legacy-output --minify --format esm,cjs --dts --external react",
+ "dev": "tsup src/index.tsx --inject-style --legacy-output --format esm,cjs --watch --dts --external react",
+ "lint": "eslint src --fix",
"storybook": "export NODE_OPTIONS=--openssl-legacy-provider; start-storybook -p 6006",
"build-storybook": "export NODE_OPTIONS=--openssl-legacy-provider; build-storybook"
},
"peerDependencies": {
- "react": ">=16"
- },
- "dependencies": {
- "goober": "^2.1.10"
+ "react": "^16 || ^17 || ^18",
+ "react-dom": "^16 || ^17 || ^18"
},
+ "dependencies": {},
"devDependencies": {
- "@ampproject/filesize": "^4.3.0",
- "@babel/core": "^7.18.9",
- "@storybook/addon-actions": "^6.5.9",
- "@storybook/addon-essentials": "^6.5.9",
- "@storybook/addon-interactions": "^6.5.9",
- "@storybook/addon-links": "^6.5.9",
- "@storybook/builder-webpack4": "^6.5.9",
- "@storybook/manager-webpack4": "^6.5.9",
- "@storybook/react": "^6.5.9",
- "@storybook/testing-library": "^0.0.13",
- "@types/react": "^18.0.15",
+ "@size-limit/preset-small-lib": "^8.1.0",
+ "@storybook/addon-actions": "^6.5.12",
+ "@storybook/addon-essentials": "^6.5.12",
+ "@storybook/addon-knobs": "^6.4.0",
+ "@storybook/addon-links": "^6.5.12",
+ "@storybook/react": "^6.5.12",
+ "@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
- "babel-loader": "^8.2.5",
+ "@typescript-eslint/eslint-plugin": "^5.38.1",
+ "@typescript-eslint/parser": "^5.38.1",
+ "eslint": "8.24.0",
+ "eslint-plugin-prettier": "^4.2.1",
+ "eslint-plugin-react": "^7.31.8",
+ "eslint-plugin-simple-import-sort": "^8.0.0",
+ "eslint-plugin-storybook": "^0.6.4",
+ "postcss": "^8.4.17",
+ "prettier": "^2.7.1",
"react": "^18.2.0",
- "react-docgen-typescript-loader": "^3.7.2",
"react-dom": "^18.2.0",
- "react-is": "^18.2.0",
- "ts-loader": "^9.3.1",
- "tsdx": "^0.14.1",
- "tslib": "^2.4.0",
- "typescript": "^4.7.4"
+ "size-limit": "^8.1.0",
+ "storybook-addon-turbo-build": "^1.1.0",
+ "tsup": "^6.2.3",
+ "typescript": "^4.8.4"
},
"prettier": {
"printWidth": 80,
@@ -55,20 +51,20 @@
"singleQuote": false,
"trailingComma": "es5"
},
- "husky": {
- "hooks": {
- "pre-commit": "tsdx lint"
- }
- },
"files": [
- "dist",
- "src"
+ "dist/**"
+ ],
+ "browserslist": [
+ "defaults",
+ "not IE 11",
+ "maintained node versions"
+ ],
+ "size-limit": [
+ {
+ "path": "dist/index.js",
+ "limit": "10 KB"
+ }
],
- "filesize": {
- "track": [
- "./dist/*.production.min.js"
- ]
- },
"keywords": [
"react",
"tag",
diff --git a/src/index.tsx b/src/index.tsx
index 7001e87..e0e48d9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,5 @@
-import { css, setup } from "goober";
+import "./styles.css";
+
import React, { useState } from "react";
import { useDidUpdateEffect } from "./use-did-update-effect";
@@ -25,48 +26,6 @@ export interface TagsInputProps {
};
}
-// initialize goober once
-setup(React.createElement);
-
-const RTIContainer = css({
- "--rti-bg": "#fff",
- "--rti-border": "#ccc",
- "--rti-main": "#3182ce",
- "--rti-radius": "0.375rem",
- "--rti-s": "0.5rem",
- "--rti-tag": "#edf2f7",
- "--rti-tag-remove": "#e53e3e",
- "--rti-tag-padding": "0.15rem 0.25rem",
-
- "*": {
- boxSizing: "border-box",
- transition: "all 0.2s ease",
- },
-
- alignItems: "center",
- bg: "var(--rti-bg)",
- border: "1px solid var(--rti-border)",
- borderRadius: "var(--rti-radius)",
- display: "flex",
- flexWrap: "wrap",
- gap: "var(--rti-s)",
- lineHeight: 1.4,
- padding: "var(--rti-s)",
-
- "&:focus-within": {
- borderColor: "var(--rti-main)",
- boxShadow: "var(--rti-main) 0px 0px 0px 1px",
- },
-});
-
-const RTIInput = css({
- border: 0,
- outline: 0,
- fontSize: "inherit",
- lineHeight: "inherit",
- width: "50%",
-});
-
const defaultSeprators = ["Enter"];
export const TagsInput = ({
@@ -131,7 +90,7 @@ export const TagsInput = ({
};
return (
-
+
{tags.map(tag => (
{
e.stopPropagation();
@@ -38,7 +15,7 @@ export default function Tag({ text, remove, disabled, className }: TagProps) {
};
return (
-
+
{text}
{!disabled && (