refactor: ⚡ move to tsup

.eslintrc.cjs

@@ -3,41 +3,51 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
-    node: true
+    node: true,
   },
   parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint", "simple-import-sort"],
+  plugins: ["@typescript-eslint", "prettier", "simple-import-sort"],
   extends: [
     "eslint:recommended",
-    "plugin:react/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier"
+    "plugin:react/recommended",
+    "plugin:storybook/recommended",
   ],
   rules: {
-    "no-useless-escape": "off",
-    "no-case-declarations": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "@typescript-eslint/ban-ts-ignore": "off",
     "@typescript-eslint/camelcase": "off",
-    "@typescript-eslint/no-unused-vars": ["error", { ignoreRestSiblings: true }],
     "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/interface-name-prefix": "off",
     "@typescript-eslint/no-empty-interface": "off",
     "@typescript-eslint/no-explicit-any": "off",
-    "react/jsx-key": "off",
-    "react/prop-types": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        ignoreRestSiblings: true,
+      },
+    ],
+    "no-case-declarations": "off",
+    "no-console": [
+      "error",
+      {
+        allow: ["warn", "error", "debug"],
+      },
+    ],
+    "no-useless-escape": "off",
+    "prettier/prettier": "error",
     "react/display-name": "off",
+    "react/jsx-key": "off",
     "react/no-children-prop": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "simple-import-sort/imports": "error",
+    "react/prop-types": "off",
     "simple-import-sort/exports": "error",
-
-    "no-console": ["error", { allow: ["warn", "error", "debug"] }]
+    "simple-import-sort/imports": "error",
   },
   settings: {
     react: {
-      version: "detect"
-    }
-  }
+      version: "detect",
+    },
+  },
 };

.nvmrc

@@ -1 +1 @@
-12
+16

.storybook/main.js

@@ -1,19 +1,18 @@
 module.exports = {
-  stories: ["../stories/**/*.stories.@(ts|tsx|js|jsx)"],
+  stories: [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
   addons: [
-    "@storybook/addon-essentials",
-    "@storybook/addon-knobs",
     "@storybook/addon-links",
+    "@storybook/addon-essentials",
     {
-      name: "storybook-addon-turbo-build",
+      name: '@storybook/addon-docs',
       options: {
-        optimizationLevel: 2,
+        configureJSX: true,
+        transcludeMarkdown: true,
       },
     },
   ],
-  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
-  typescript: {
-    check: true, // type-check stories during Storybook build
-    reactDocgen: "none",
-  },
+  framework: "@storybook/react",
 };

.storybook/preview.js

@@ -1,5 +1,9 @@
-// https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 export const parameters = {
-  // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
-  actions: { argTypesRegex: "^on.*" },
-};
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

README.md

@@ -23,7 +23,7 @@ yarn add react-multi-select-component # yarn
 
 ## 📦 Example
 
-![Example](docs/images/preview.gif)
+![Example](https://user-images.githubusercontent.com/5774849/150685427-6025d7d3-ddfc-4787-a856-241c4cc100cb.gif)
 
 ```tsx
 import React, { useState } from "react";
@@ -55,7 +55,7 @@ const Example = () => {
 export default Example;
 ```
 
-More examples can be found [here ↗](./docs/recipes)
+More examples can be found [here ↗](https://react-multi-select-component.pages.dev/)
 
 ## 👀 Props
 

package.json

@@ -5,77 +5,58 @@
   "author": "harshzalavadiya",
   "license": "MIT",
   "repository": "https://github.com/hc-oss/react-multi-select-component",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
-  "typings": "dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "require": "./dist/cjs/index.js",
-      "default": "./dist/esm/index.js"
-    }
-  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "analyze": "size-limit --why",
-    "build-storybook": "build-storybook",
-    "prebuild": "rimraf dist",
-    "build": "concurrently yarn:build:*",
-    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
-    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
-    "format": "prettier --write src/**/*",
-    "lint": "eslint src/**/*.{ts,tsx}",
+    "build": "tsup src/index.tsx --inject-style --minify --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --inject-style --format esm,cjs --watch --dts --external react",
+    "lint": "eslint src --fix",
     "size": "size-limit",
-    "storybook": "start-storybook -p 6006"
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "peerDependencies": {
     "react": "^16 || ^17",
     "react-dom": "^16 || ^17"
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.10",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.16.7",
     "@size-limit/preset-small-lib": "^7.0.5",
     "@storybook/addon-actions": "^6.4.14",
     "@storybook/addon-essentials": "^6.4.14",
-    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-links": "^6.4.14",
     "@storybook/react": "^6.4.14",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^17.0.13",
+    "@types/react-dom": "^17.0.8",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-transform-css-import-to-string": "^0.0.2",
-    "concurrently": "^7.0.0",
-    "cross-env": "^7.0.3",
-    "eslint": "^8.7.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "7.32.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "husky": "^7.0.4",
+    "eslint-plugin-storybook": "^0.5.6",
+    "postcss": "^8.4.5",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "size-limit": "^7.0.5",
     "storybook-addon-turbo-build": "^1.0.1",
-    "typescript": "^4.5.5"
+    "tsup": "^5.10.1",
+    "typescript": "^4.5.3"
   },
   "browserslist": [
     "defaults",
     "not IE 11",
     "maintained node versions"
   ],
   "files": [
-    "dist"
+    "dist/**"
   ],
   "size-limit": [
     {
-      "path": "dist/cjs/index.js",
+      "path": "dist/index.js",
       "limit": "10 KB"
     }
   ],

src/hooks/use-multi-select.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 
-import { injectStyles } from "../lib/inject-style";
 import { ISelectProps, Option } from "../lib/interfaces";
 
 const defaultStrings = {
@@ -44,8 +43,6 @@ export const MultiSelectProvider = ({
   const [options, setOptions] = useState(props.options);
   const t = (key) => props.overrideStrings?.[key] || defaultStrings[key];
 
-  useMemo(() => injectStyles(), []);
-
   useEffect(() => {
     setOptions(props.options);
   }, [props.options]);

src/lib/fuzzy-match-utils.tsx

@@ -46,7 +46,14 @@ export function filterOptions(
       }))
       // Only include matches of the entire substring, with a slight
       // affordance for transposition or extra characters.
-      .filter((pair) => pair.score >= Math.max(cleanFilter.length - 2, cleanFilter.length) /** Filter text might have length less than 2 */)
+      .filter(
+        (pair) =>
+          pair.score >=
+          Math.max(
+            cleanFilter.length - 2,
+            cleanFilter.length
+          ) /** Filter text might have length less than 2 */
+      )
       // Sort 'em by order of their score.
       .sort((a, b) => b.score - a.score)
       // …and grab the original Options back from their pairs.

src/multi-select/index.tsx

@@ -1,4 +1,6 @@
-import React from "react";
+import "../style.css";
+
+import * as React from "react";
 
 import { MultiSelectProvider } from "../hooks/use-multi-select";
 import { ISelectProps } from "../lib/interfaces";

src/select-panel/index.tsx

@@ -77,7 +77,9 @@ const SelectPanel = () => {
       const selectedValues = value.map((o) => o.value);
       const finalSelectedValues = [...selectedValues, ...filteredValues];
 
-      return (customFilterOptions ? filteredOptions : options).filter((o) => finalSelectedValues.includes(o.value));
+      return (customFilterOptions ? filteredOptions : options).filter((o) =>
+        finalSelectedValues.includes(o.value)
+      );
     }
 
     return value.filter((o) => !filteredValues.includes(o.value));

docs/recipes/custom-filter.md → stories/recipes/custom-filter.stories.mdx

@@ -1,3 +1,7 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="recipes/Custom Filter Logic" />
+
 # 🔍 Custom Filter Logic
 
 By default this component uses a fuzzy search algorithm to filter options but also allows you to opt-out and use your custom logic by specifying `filterOptions` prop to component

stories/recipes/custom-item.stories.mdx

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="recipes/Custom Item Renderer" />
+
+# 🎛 Custom Item Renderer
+
+Optionally customise dropdown item by passing `ItemRenderer` prop
+
+[Default Item Renderer ↗](https://github.com/hc-oss/react-multi-select-component/blob/master/src/select-panel/default-item.tsx#L12-L28)

docs/recipes/custom-value.md → stories/recipes/custom-value.stories.mdx

@@ -1,3 +1,7 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="recipes/Custom Value Renderer" />
+
 # 🎛 Custom Value Renderer
 
 Optionally customise value renderer view by passing `valueRenderer` prop
@@ -10,5 +14,4 @@ const customValueRenderer = (selected, _options) => {
 };
 ```
 
-![Custom Value Renderer](/custom-value.gif)
-F
+![Custom Value Renderer](https://user-images.githubusercontent.com/5774849/150685369-dd5426c5-1e91-441f-b461-9fd88844f8d0.gif)

docs/recipes/localization.md → stories/recipes/localization.stories.mdx

@@ -1,3 +1,7 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="recipes/Localization" />
+
 # 🌐 Localization
 
 You can easily Internationalize this component by passing prop `overrideStrings` so that UI strings can be presented in a different language