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 && (