Skip to content

Commit dfdacb0

Browse files
harshzalavadiyaharshzalavadiya
authored
refactor: ♻️ move to tsup (#30)
1 parent 7453a1d commit dfdacb0

File tree

7 files changed

+1775
-4057
lines changed

7 files changed

+1775
-4057
lines changed

‎.nvmrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
16
1+
18

‎package.json

Lines changed: 42 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,70 @@
11
{
22
"name": "react-tag-input-component",
33
"description": "lightweight component for tag(s) input",
4-
"version": "1.1.3",
4+
"version": "2.0.0",
55
"license": "MIT",
66
"author": "Harsh Zalavadiya",
77
"repository": "https://github.com/hc-oss/react-tag-input-component",
8-
"module": "dist/react-tag-input-component.esm.js",
9-
"main": "dist/index.js",
10-
"typings": "dist/index.d.ts",
11-
"sideEffects": false,
12-
"engines": {
13-
"node": ">=10"
14-
},
8+
"main": "./dist/index.js",
9+
"module": "./dist/esm/index.js",
10+
"types": "./dist/index.d.ts",
1511
"scripts": {
16-
"start": "tsdx watch",
17-
"build": "tsdx build && filesize",
18-
"lint": "tsdx lint",
19-
"prepare": "tsdx build && filesize",
12+
"build": "tsup src/index.tsx --inject-style --legacy-output --minify --format esm,cjs --dts --external react",
13+
"dev": "tsup src/index.tsx --inject-style --legacy-output --format esm,cjs --watch --dts --external react",
14+
"lint": "eslint src --fix",
2015
"storybook": "export NODE_OPTIONS=--openssl-legacy-provider; start-storybook -p 6006",
2116
"build-storybook": "export NODE_OPTIONS=--openssl-legacy-provider; build-storybook"
2217
},
2318
"peerDependencies": {
24-
"react": ">=16"
25-
},
26-
"dependencies": {
27-
"goober": "^2.1.10"
19+
"react": "^16 || ^17 || ^18",
20+
"react-dom": "^16 || ^17 || ^18"
2821
},
22+
"dependencies": {},
2923
"devDependencies": {
30-
"@ampproject/filesize": "^4.3.0",
31-
"@babel/core": "^7.18.9",
32-
"@storybook/addon-actions": "^6.5.9",
33-
"@storybook/addon-essentials": "^6.5.9",
34-
"@storybook/addon-interactions": "^6.5.9",
35-
"@storybook/addon-links": "^6.5.9",
36-
"@storybook/builder-webpack4": "^6.5.9",
37-
"@storybook/manager-webpack4": "^6.5.9",
38-
"@storybook/react": "^6.5.9",
39-
"@storybook/testing-library": "^0.0.13",
40-
"@types/react": "^18.0.15",
24+
"@size-limit/preset-small-lib": "^8.1.0",
25+
"@storybook/addon-actions": "^6.5.12",
26+
"@storybook/addon-essentials": "^6.5.12",
27+
"@storybook/addon-knobs": "^6.4.0",
28+
"@storybook/addon-links": "^6.5.12",
29+
"@storybook/react": "^6.5.12",
30+
"@types/react": "^18.0.21",
4131
"@types/react-dom": "^18.0.6",
42-
"babel-loader": "^8.2.5",
32+
"@typescript-eslint/eslint-plugin": "^5.38.1",
33+
"@typescript-eslint/parser": "^5.38.1",
34+
"eslint": "8.24.0",
35+
"eslint-plugin-prettier": "^4.2.1",
36+
"eslint-plugin-react": "^7.31.8",
37+
"eslint-plugin-simple-import-sort": "^8.0.0",
38+
"eslint-plugin-storybook": "^0.6.4",
39+
"postcss": "^8.4.17",
40+
"prettier": "^2.7.1",
4341
"react": "^18.2.0",
44-
"react-docgen-typescript-loader": "^3.7.2",
4542
"react-dom": "^18.2.0",
46-
"react-is": "^18.2.0",
47-
"ts-loader": "^9.3.1",
48-
"tsdx": "^0.14.1",
49-
"tslib": "^2.4.0",
50-
"typescript": "^4.7.4"
43+
"size-limit": "^8.1.0",
44+
"storybook-addon-turbo-build": "^1.1.0",
45+
"tsup": "^6.2.3",
46+
"typescript": "^4.8.4"
5147
},
5248
"prettier": {
5349
"printWidth": 80,
5450
"semi": true,
5551
"singleQuote": false,
5652
"trailingComma": "es5"
5753
},
58-
"husky": {
59-
"hooks": {
60-
"pre-commit": "tsdx lint"
61-
}
62-
},
6354
"files": [
64-
"dist",
65-
"src"
55+
"dist/**"
56+
],
57+
"browserslist": [
58+
"defaults",
59+
"not IE 11",
60+
"maintained node versions"
61+
],
62+
"size-limit": [
63+
{
64+
"path": "dist/index.js",
65+
"limit": "10 KB"
66+
}
6667
],
67-
"filesize": {
68-
"track": [
69-
"./dist/*.production.min.js"
70-
]
71-
},
7268
"keywords": [
7369
"react",
7470
"tag",

‎src/index.tsx

Lines changed: 4 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { css, setup } from "goober";
1+
import "./styles.css";
2+
23
import React, { useState } from "react";
34
import { useDidUpdateEffect } from "./use-did-update-effect";
45

@@ -25,48 +26,6 @@ export interface TagsInputProps {
2526
};
2627
}
2728

28-
// initialize goober once
29-
setup(React.createElement);
30-
31-
const RTIContainer = css({
32-
"--rti-bg": "#fff",
33-
"--rti-border": "#ccc",
34-
"--rti-main": "#3182ce",
35-
"--rti-radius": "0.375rem",
36-
"--rti-s": "0.5rem",
37-
"--rti-tag": "#edf2f7",
38-
"--rti-tag-remove": "#e53e3e",
39-
"--rti-tag-padding": "0.15rem 0.25rem",
40-
41-
"*": {
42-
boxSizing: "border-box",
43-
transition: "all 0.2s ease",
44-
},
45-
46-
alignItems: "center",
47-
bg: "var(--rti-bg)",
48-
border: "1px solid var(--rti-border)",
49-
borderRadius: "var(--rti-radius)",
50-
display: "flex",
51-
flexWrap: "wrap",
52-
gap: "var(--rti-s)",
53-
lineHeight: 1.4,
54-
padding: "var(--rti-s)",
55-
56-
"&:focus-within": {
57-
borderColor: "var(--rti-main)",
58-
boxShadow: "var(--rti-main) 0px 0px 0px 1px",
59-
},
60-
});
61-
62-
const RTIInput = css({
63-
border: 0,
64-
outline: 0,
65-
fontSize: "inherit",
66-
lineHeight: "inherit",
67-
width: "50%",
68-
});
69-
7029
const defaultSeprators = ["Enter"];
7130

7231
export const TagsInput = ({
@@ -131,7 +90,7 @@ export const TagsInput = ({
13190
};
13291

13392
return (
134-
<div aria-labelledby={name} className={cc("rti--container", RTIContainer)}>
93+
<div aria-labelledby={name} className="rti--container">
13594
{tags.map(tag => (
13695
<Tag
13796
key={tag}
@@ -143,7 +102,7 @@ export const TagsInput = ({
143102
))}
144103

145104
<input
146-
className={cc("rti--input", RTIInput, classNames?.input)}
105+
className={cc("rti--input", classNames?.input)}
147106
type="text"
148107
name={name}
149108
placeholder={placeHolder}

‎src/styles.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.rti--container * {
2+
box-sizing: border-box;
3+
transition: all 0.2s ease;
4+
}
5+
6+
.rti--container {
7+
--rti-bg: #fff;
8+
--rti-border: #ccc;
9+
--rti-main: #3182ce;
10+
--rti-radius: 0.375rem;
11+
--rti-s: 0.5rem;
12+
--rti-tag: #edf2f7;
13+
--rti-tag-remove: #e53e3e;
14+
--rti-tag-padding: 0.15rem 0.25rem;
15+
16+
/* Container Styles */
17+
align-items: center;
18+
background: var(--rti-bg);
19+
border: 1px solid var(--rti-border);
20+
border-radius: var(--rti-radius);
21+
display: flex;
22+
flex-wrap: wrap;
23+
gap: var(--rti-s);
24+
line-height: 1.4;
25+
padding: var(--rti-s);
26+
}
27+
28+
.rti--container:focus-within {
29+
border-color: var(--rti-main);
30+
box-shadow: var(--rti-main) 0px 0px 0px 1px;
31+
}
32+
33+
.rti--input {
34+
border: 0;
35+
outline: 0;
36+
font-size: inherit;
37+
line-height: inherit;
38+
width: 50%;
39+
}
40+
41+
.rti--tag {
42+
align-items: center;
43+
background: var(--rti-tag);
44+
border-radius: var(--rti-radius);
45+
display: inline-flex;
46+
justify-content: center;
47+
padding: var(--rti-tag-padding);
48+
}
49+
50+
.rti--tag button {
51+
background: none;
52+
border: 0;
53+
border-radius: 50%;
54+
cursor: pointer;
55+
line-height: inherit;
56+
padding: 0 var(--rti-s);
57+
}
58+
59+
.rti--tag button:hover {
60+
color: var(--rti-tag-remove);
61+
}

‎src/tag.tsx

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from "react";
2-
import { css } from "goober";
32
import cc from "./classnames";
43

54
interface TagProps {
@@ -9,36 +8,14 @@ interface TagProps {
98
className?: string;
109
}
1110

12-
const tagStyles = css({
13-
alignItems: "center",
14-
background: "var(--rti-tag)",
15-
borderRadius: "var(--rti-radius)",
16-
display: "inline-flex",
17-
justifyContent: "center",
18-
padding: "var(--rti-tag-padding)",
19-
20-
button: {
21-
background: "none",
22-
border: 0,
23-
borderRadius: "50%",
24-
cursor: "pointer",
25-
lineHeight: "inherit",
26-
padding: "0 var(--rti-s)",
27-
28-
"&:hover": {
29-
color: "var(--rti-tag-remove)",
30-
},
31-
},
32-
});
33-
3411
export default function Tag({ text, remove, disabled, className }: TagProps) {
3512
const handleOnRemove = e => {
3613
e.stopPropagation();
3714
remove(text);
3815
};
3916

4017
return (
41-
<span className={cc("rti--tag", tagStyles, className)}>
18+
<span className={cc("rti--tag", className)}>
4219
<span>{text}</span>
4320
{!disabled && (
4421
<button

‎stories/tags-input.stories.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export const Page = () => {
2929
name="fruits"
3030
placeHolder="enter fruits"
3131
disabled={disabled}
32-
disableBackspaceRemove={true}
3332
isEditOnRemove={isEditOnRemove}
3433
beforeAddValidate={beforeAddValidate}
3534
/>

0 commit comments

Comments
 (0)