refactor: ♻️ moved to React Context

.github/workflows/main.yml

@@ -2,37 +2,28 @@ name: CI
 on: [push]
 jobs:
   build:
-    runs-on: ubuntu-latest
+    name: Build, lint on Node ${{ matrix.node }} and ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ["12.x", "14.x"]
+        os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:
-      - name: Begin CI...
+      - name: Checkout repo
         uses: actions/checkout@v2
 
-      - name: Use Node 12
-        uses: actions/setup-node@v1
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v2
         with:
-          node-version: 12.x
+          node-version: ${{ matrix.node }}
 
-      - name: Use cached node_modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            nodeModules-
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
 
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-        env:
-          CI: true
+      - name: Lint
+        run: yarn lint
 
       - name: Build
         run: yarn build
-        env:
-          CI: true
-
-      - name: Publish
-        if: startsWith(github.ref, 'refs/tags/')
-        run: echo "//registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN" > ~/.npmrc && npm publish --access public
-        env:
-          NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.github/workflows/release.yml

@@ -0,0 +1,31 @@
+name: RELEASE
+
+on:
+  push:
+    tags:
+      - v[0-9]+.[0-9]+.[0-9]+
+
+jobs:
+  test:
+    name: Release
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+
+      - name: Install deps and build (with cache)
+        uses: bahmutov/npm-install@v1
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Build
+        run: yarn build
+
+      - name: Publishing to NPM
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+        run: npm publish

.github/workflows/size.yml

@@ -0,0 +1,16 @@
+name: SIZE
+
+on: [pull_request]
+
+jobs:
+  size:
+    runs-on: ubuntu-latest
+
+    env:
+      CI_JOB_NUMBER: 1
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.storybook/main.js

@@ -1,9 +1,13 @@
 module.exports = {
-  stories: ["../stories/**/*.stories.@(ts|tsx)"],
+  stories: ["../stories/**/*.stories.@(ts|tsx|js|jsx)"],
   addons: [
     "@storybook/addon-essentials",
     "@storybook/addon-links",
     "@storybook/addon-knobs",
     "@storybook/addon-storysource",
   ],
+  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
+  typescript: {
+    check: true, // type-check stories during Storybook build
+  },
 };

.storybook/preview.js

@@ -0,0 +1,5 @@
+// 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.*" },
+};

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "workbench.colorCustomizations": {
-    "activityBar.background": "#2965c5",
-    "titleBar.activeBackground": "#4285F4",
+    "activityBar.background": "#5672a0",
+    "titleBar.activeBackground": "#476ba5",
     "titleBar.activeForeground": "#FBFAF9"
   }
 }

README.md

@@ -80,11 +80,10 @@ export default Example;
 | `className`           | class name for parent component                        | `string`                     | `multi-select` |
 | `valueRenderer`       | custom dropdown header [docs](#-custom-value-renderer) | `function`                   |                |
 | `ItemRenderer`        | custom dropdown option [docs](#-custom-item-renderer)  | `function`                   |                |
-| `ClearIcon`           | Custom Clear Icon for Search                           | `string                      | function`      |
+| `ClearIcon`           | Custom Clear Icon for Search                           | `JSX.element`                |                |
+| `ArrowRenderer`       | Custom Arrow Icon for Dropdown                         | `JSX.element`                |                |
 | `debounceDuration`    | debounce duraion for Search                            | `number`                     | `300`          |
-| `ClearSelectedIcon`   | Custom Clear Icon for Selected Items                   | `string                      | function`      |
-| `defaultIsOpen`       | to keep menu open/closed by default                    | `boolean`                    | `false`        |
-| `isOpen`              | controlled version of `defaultIsOpen`                  | `boolean`                    |                |
+| `ClearSelectedIcon`   | Custom Clear Icon for Selected Items                   | `JSX.element`                | `function`     |
 
 ## 🔍 Custom filter logic
 

package.json

@@ -1,8 +1,8 @@
 {
   "name": "react-multi-select-component",
-  "version": "3.0.8",
+  "version": "3.1.0",
   "description": "Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all",
-  "author": "Harsh Zalavadiya",
+  "author": "harshzalavadiya",
   "license": "MIT",
   "repository": "harshzalavadiya/react-multi-select-component",
   "main": "dist/index.js",
@@ -12,41 +12,43 @@
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build && filesize",
+    "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
     "prepare": "tsdx build && filesize",
+    "size": "size-limit",
+    "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",
     "format": "prettier --write src/**/*",
     "build-storybook": "build-storybook"
   },
   "peerDependencies": {
-    "react": ">=17"
+    "react": ">=16"
   },
   "dependencies": {
-    "goober": "^2.0.18"
+    "goober": "^2.0.21"
   },
   "devDependencies": {
     "@ampproject/filesize": "^4.2.0",
     "@babel/core": "^7.12.10",
-    "@storybook/addon-essentials": "^6.1.11",
-    "@storybook/addon-knobs": "^6.1.11",
-    "@storybook/addon-links": "^6.1.11",
-    "@storybook/addon-storysource": "^6.1.11",
-    "@storybook/addons": "^6.1.11",
-    "@storybook/react": "^6.1.11",
+    "@size-limit/preset-small-lib": "^4.9.1",
+    "@storybook/addon-essentials": "^6.1.14",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-knobs": "^6.1.14",
+    "@storybook/addon-links": "^6.1.14",
+    "@storybook/addon-storysource": "^6.1.14",
+    "@storybook/addons": "^6.1.14",
+    "@storybook/react": "^6.1.14",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "babel-loader": "^8.2.2",
-    "eslint-plugin-prettier": "^3.3.0",
-    "filesize": "^6.1.0",
-    "husky": "^4.3.6",
+    "husky": "^4.3.8",
     "prettier": "^2.2.1",
     "react": "^17.0.1",
-    "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^17.0.1",
     "react-is": "^17.0.1",
-    "ts-loader": "^8.0.12",
+    "size-limit": "^4.9.1",
     "tsdx": "^0.14.1",
-    "tslib": "^2.0.3",
+    "tslib": "^2.1.0",
     "typescript": "^4.1.3"
   },
   "husky": {

src/hooks/use-multi-select.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { ISelectProps, Option } from "../lib/interfaces";
+
+const defaultStrings = {
+  selectSomeItems: "Select...",
+  allItemsAreSelected: "All items are selected.",
+  selectAll: "Select All",
+  search: "Search",
+  clearSearch: "Clear Search",
+  clearSelected: "Clear Selected",
+};
+
+const defaultProps: Partial<ISelectProps> = {
+  value: [],
+  focusSearchOnOpen: true,
+  hasSelectAll: true,
+  className: "multi-select",
+  debounceDuration: 300,
+  options: [] as Option[],
+};
+
+interface MultiSelectContextProps extends ISelectProps {
+  t: (key: string) => string;
+}
+
+interface MultiSelectProviderProps {
+  props: ISelectProps;
+  children;
+}
+
+const MultiSelectContext = React.createContext<MultiSelectContextProps>(
+  {} as MultiSelectContextProps
+);
+
+export const MultiSelectProvider = ({
+  props,
+  children,
+}: MultiSelectProviderProps) => {
+  const t = (key) => props.overrideStrings?.[key] || defaultStrings[key];
+
+  return (
+    <MultiSelectContext.Provider value={{ t, ...defaultProps, ...props }}>
+      {children}
+    </MultiSelectContext.Provider>
+  );
+};
+
+export const useMultiSelect = () => React.useContext(MultiSelectContext);

src/lib/classnames.ts

@@ -0,0 +1,6 @@
+/**
+ * combines classNames in a friendly way
+ *
+ * @param {*} classes
+ */
+export const cn = (...classes) => classes.join(" ");

src/lib/interfaces.ts

@@ -1,13 +1,3 @@
-export interface ITheme {
-  primary: string;
-  hover: string;
-  border: string;
-  gray: string;
-  background: string;
-  borderRadius: string;
-  height: string;
-}
-
 export interface Option {
   value;
   label: string;
@@ -22,7 +12,7 @@ export interface ISelectProps {
   onChange?;
   valueRenderer?: (selected: Option[], options: Option[]) => string;
   ItemRenderer?: Function;
-  ArrowRenderer?: ({ expanded: boolean }) => void;
+  ArrowRenderer?: ({ expanded }) => JSX.Element;
   selectAllLabel?: string;
   isLoading?: boolean;
   disabled?: boolean;

src/multi-select/arrow.tsx

@@ -1,20 +1,14 @@
 import React from "react";
 
-interface ArrowProps {
-  expanded?: boolean;
-}
-
-export default function Arrow({ expanded }: ArrowProps) {
-  return (
-    <svg
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      className="dropdown-heading-dropdown-arrow gray"
-    >
-      <path d={expanded ? "M18 15 12 9 6 15" : "M6 9L12 15 18 9"} />
-    </svg>
-  );
-}
+export const Arrow = ({ expanded }) => (
+  <svg
+    width="24"
+    height="24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    className="dropdown-heading-dropdown-arrow gray"
+  >
+    <path d={expanded ? "M18 15 12 9 6 15" : "M6 9L12 15 18 9"} />
+  </svg>
+);