refactor: ♻️ move to tsup (#30)

hc-oss · Oct 1, 2022 · dfdacb0 · dfdacb0
1 parent 7453a1d
commit dfdacb0
Show file tree

Hide file tree

Showing 7 changed files with 1,775 additions and 4,057 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-16
+18
diff --git a/package.json b/package.json
@@ -1,74 +1,70 @@
 {
   "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,
     "semi": true,
     "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
@@ -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 (
-    <div aria-labelledby={name} className={cc("rti--container", RTIContainer)}>
+    <div aria-labelledby={name} className="rti--container">
       {tags.map(tag => (
         <Tag
           key={tag}
@@ -143,7 +102,7 @@ export const TagsInput = ({
       ))}
 
       <input
-        className={cc("rti--input", RTIInput, classNames?.input)}
+        className={cc("rti--input", classNames?.input)}
         type="text"
         name={name}
         placeholder={placeHolder}

diff --git a/src/styles.css b/src/styles.css
@@ -0,0 +1,61 @@
+.rti--container * {
+    box-sizing: border-box;
+    transition: all 0.2s ease;
+}
+
+.rti--container {
+    --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;
+
+    /* Container Styles */
+    align-items: center;
+    background: var(--rti-bg);
+    border: 1px solid var(--rti-border);
+    border-radius: var(--rti-radius);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--rti-s);
+    line-height: 1.4;
+    padding: var(--rti-s);
+}
+
+.rti--container:focus-within {
+    border-color: var(--rti-main);
+    box-shadow: var(--rti-main) 0px 0px 0px 1px;
+}
+
+.rti--input {
+    border: 0;
+    outline: 0;
+    font-size: inherit;
+    line-height: inherit;
+    width: 50%;
+}
+
+.rti--tag {
+    align-items: center;
+    background: var(--rti-tag);
+    border-radius: var(--rti-radius);
+    display: inline-flex;
+    justify-content: center;
+    padding: var(--rti-tag-padding);
+}
+
+.rti--tag button {
+    background: none;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    line-height: inherit;
+    padding: 0 var(--rti-s);
+}
+
+.rti--tag button:hover {
+    color: var(--rti-tag-remove);
+}
diff --git a/src/tag.tsx b/src/tag.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { css } from "goober";
 import cc from "./classnames";
 
 interface TagProps {
@@ -9,36 +8,14 @@ interface TagProps {
   className?: string;
 }
 
-const tagStyles = css({
-  alignItems: "center",
-  background: "var(--rti-tag)",
-  borderRadius: "var(--rti-radius)",
-  display: "inline-flex",
-  justifyContent: "center",
-  padding: "var(--rti-tag-padding)",
-
-  button: {
-    background: "none",
-    border: 0,
-    borderRadius: "50%",
-    cursor: "pointer",
-    lineHeight: "inherit",
-    padding: "0 var(--rti-s)",
-
-    "&:hover": {
-      color: "var(--rti-tag-remove)",
-    },
-  },
-});
-
 export default function Tag({ text, remove, disabled, className }: TagProps) {
   const handleOnRemove = e => {
     e.stopPropagation();
     remove(text);
   };
 
   return (
-    <span className={cc("rti--tag", tagStyles, className)}>
+    <span className={cc("rti--tag", className)}>
       <span>{text}</span>
       {!disabled && (
         <button

diff --git a/stories/tags-input.stories.tsx b/stories/tags-input.stories.tsx
@@ -29,7 +29,6 @@ export const Page = () => {
         name="fruits"
         placeHolder="enter fruits"
         disabled={disabled}
-        disableBackspaceRemove={true}
         isEditOnRemove={isEditOnRemove}
         beforeAddValidate={beforeAddValidate}
       />