⚡ migration to tsdx + goober

Author: harshzalavadiya

.github/workflows/main.yml

@@ -0,0 +1,38 @@
+name: CI
+on: [push]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Begin CI...
+        uses: actions/checkout@v2
+
+      - name: Use Node 12
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+
+      - name: Use cached node_modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: nodeModules-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            nodeModules-
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+        env:
+          CI: true
+
+      - 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/nodejs.yml

@@ -1,23 +1,6 @@
-
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
+*.log
+.DS_Store
 node_modules
-
-# builds
-build
-storybook-static
+.cache
 dist
-.rpt2_cache
-
-# misc
-.DS_Store
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+storybook-static

.gitignore

@@ -0,0 +1,5 @@
+import "!style-loader!css-loader!./style.css";
+import { configure } from "@storybook/react";
+
+// automatically import all files ending in *.stories.js
+configure(require.context("../stories", true, /\.stories\.(js|ts)x?$/), module);

.storybook/addons.js

@@ -0,0 +1,8 @@
+module.exports = {
+  addons: [
+    "@storybook/addon-actions/register",
+    "@storybook/addon-links/register",
+    "@storybook/addon-knobs/register",
+    "@storybook/addon-storysource"
+  ]
+};

.storybook/config.js

@@ -1,5 +1,11 @@
+* {
+  box-sizing: border-box;
+}
+
 html,
-body {
+body,
+#root {
+  height: 100%;
   font-family: sans-serif;
 }
 

.storybook/config.ts

@@ -1,12 +1,20 @@
+const path = require("path");
+
 module.exports = ({ config }) => {
   config.module.rules.push({
-    test: /\.(ts|tsx)$/,
+    test: /\.tsx?$/,
     use: [
       {
-        loader: require.resolve("awesome-typescript-loader")
-      }
-    ]
+        loader: require.resolve("ts-loader"),
+        options: {
+          reportFiles: ["stories/**/*.{ts|tsx}"],
+        },
+      },
+    ],
   });
   config.resolve.extensions.push(".ts", ".tsx");
+  config.resolve.alias = Object.assign(config.resolve.alias, {
+    "@": path.resolve(__dirname, ".."),
+  });
   return config;
 };

.storybook/main.js

@@ -1,6 +1,6 @@
 # react-multi-select-component
 
-Simple multiple selection dropdown component with `checkboxes`, `search` and `select-all`
+Simple and lightweight multiple selection dropdown component with `checkboxes`, `search` and `select-all`
 
 [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://react-multi-select-component.netlify.com)
 [![GitHub Actions Status](https://github.com/harshzalavadiya/react-multi-select-component/workflows/NodeJS/badge.svg)](https://github.com/harshzalavadiya/react-multi-select-component/actions)
@@ -9,7 +9,7 @@ Simple multiple selection dropdown component with `checkboxes`, `search` and `se
 
 ## ✨ Features
 
-- 🍃 Lightweight (~14KB)
+- 🍃 Lightweight (~4.5KB)
 - 💅 Themeable
 - ✌ Written w/ TypeScript
 
@@ -32,7 +32,7 @@ const Example: React.FC = () => {
   const options = [
     { label: "Grapes 🍇", value: "grapes" },
     { label: "Mango 🥭", value: "mango" },
-    { label: "Strawberry 🍓", value: "strawberry" }
+    { label: "Strawberry 🍓", value: "strawberry" },
   ];
 
   const [selected, setSelected] = useState([]);
@@ -71,7 +71,6 @@ export default App;
 | `selectAllLabel`      | _select all_ label                 | `string`           |         |
 | `disableSearch`       | hide search textbox                | `boolean`          | `false` |
 | `filterOptions`       | custom filter options              | `function`         |         |
-| `theme`               | theme variables                    | `object`           |         |
 
 ## 🌐 Internationalization
 
@@ -88,26 +87,26 @@ You can override the strings to be whatever you want, including translations for
 
 ## 💅 Themeing
 
-You can override theme variables to change colors
-
-```json
-{
-  "primary": "#4285F4",
-  "hover": "#f1f3f5",
-  "border": "#ccc",
-  "gray": "#aaa",
-  "background": "#fff",
-  "borderRadius": "4px",
-  "height": "38px"
+You can override css variables to customize appearance
+
+```css
+.multi-select {
+  --rmsc-primary: #4285f4;
+  --rmsc-hover: #f1f3f5;
+  --rmsc-border: #ccc;
+  --rmsc-gray: #aaa;
+  --rmsc-background: #fff;
+  --rmsc-border-radius: 4px;
+  --rmsc-height: 38px;
 }
 ```
 
 ## 🤠 Credits
 
 - This project gets inspiration and several pieces of logical code from [react-multiple-select](https://github.com/Khan/react-multi-select/)
 - [TypeScript](https://github.com/microsoft/typescript)
-- [Rollup](https://github.com/rollup/rollup)
-- [Emotion](https://github.com/emotion-js/emotion)
+- [TSDX](https://github.com/jaredpalmer/tsdx)
+- [Goober](https://github.com/cristianbote/goober)
 
 ## 📜 License