refactor: ♻️ move to tsup (#31)

- moved to `tsup` since `tsdx` is unmaintained
- moved to css auto inject script rather then inlining them to keep things easy
- added recommended plugins and vscode configs
- added `disableNative` prop
- moved from default exports to named exports
- most components now have classes associated to them so you can easily override them

.eslintrc.cjs

@@ -0,0 +1,53 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint", "prettier", "simple-import-sort"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:storybook/recommended",
+  ],
+  rules: {
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/camelcase": "off",
+    "@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",
+    "@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",
+    "react/prop-types": "off",
+    "simple-import-sort/exports": "error",
+    "simple-import-sort/imports": "error",
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,42 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Sandbox / Git Repo**
+<!-- Pleaseeee fork below template and create a reproduction -->
+https://codesandbox.io/s/react-web-share-46skt
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -0,0 +1,8 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: monthly
+    time: "23:30"
+  open-pull-requests-limit: 10

.github/workflows/main.yml

@@ -1,38 +1,31 @@
-name: NodeJS
+name: CI
+
 on: [push]
+
 jobs:
   build:
-    runs-on: ubuntu-latest
+    name: Node ${{ matrix.node }} on ${{ matrix.os }}
+
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ["16.x"]
+        os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:
-      - name: Begin CI...
+      - name: Checkout repo
         uses: actions/checkout@v2
 
-      - name: Use Node 14
-        uses: actions/setup-node@v1
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v2
         with:
-          node-version: 14.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,35 @@
+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
+
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+          registry-url: https://registry.npmjs.org
+
+      - 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

.nvmrc

@@ -0,0 +1 @@
+16

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false
+}

.storybook/main.js

@@ -1,13 +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-links",
-    "@storybook/addon-knobs",
-    "@storybook/addon-storysource",
+    "@storybook/addon-essentials",
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+        transcludeMarkdown: true,
+      },
+    },
   ],
-  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
-  typescript: {
-    check: true, // type-check stories during Storybook build
-  },
+  framework: "@storybook/react",
 };

.storybook/preview-head.html

@@ -8,8 +8,8 @@
   #root {
     height: 100%;
     font-family: sans-serif;
-    padding: 0!important;
-    margin: 0!important;
+    padding: 0 !important;
+    margin: 0 !important;
   }
 
   .multi-select {

.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$/,
+    },
+  },
+}

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "dsznajder.es7-react-js-snippets",
+    "esbenp.prettier-vscode",
+    "meganrogge.template-string-converter",
+    "paragdiwan.gitpatch",
+    "shardulm94.trailing-spaces",
+    "wix.vscode-import-cost",
+    "formulahendry.auto-rename-tag"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#5a56a0",
+    "titleBar.activeBackground": "#604e98",
+    "titleBar.activeForeground": "#FBFAF9"
+  }
+}

README.md

@@ -6,7 +6,7 @@ Tiny [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/
 [![NPM](https://img.shields.io/npm/v/react-web-share.svg)](https://npm.im/react-web-share)
 [![gzip](https://badgen.net/bundlephobia/minzip/react-web-share@latest)](https://bundlephobia.com/result?p=react-web-share@latest)
 
-[![Edit react-web-share](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-web-share-46skt?fontsize=14&hidenavigation=1&theme=dark)
+[![Edit react-web-share](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-web-share-46skt)
 
 > 💡 most browsers restricts web share api only to https websites
 
@@ -27,11 +27,11 @@ yarn add react-web-share # yarn
 
 ### Mobile
 
-![Mobile Preview](preview/preview-mobile.jpg)
+![Mobile Preview](https://user-images.githubusercontent.com/5774849/188565874-177a6cc4-0521-4f14-8339-4c31f1476a5d.jpg)
 
 ### Desktop
 
-![Desktop Preview](preview/preview-desktop.jpg)
+![Desktop Preview](https://user-images.githubusercontent.com/5774849/188565984-5782d979-b57b-4b6d-9135-591f77ea8ee7.jpg)
 
 ## 📦 Example
 
@@ -61,12 +61,13 @@ export default Example;
 
 ## 👀 Props
 
-| Prop        | Description                 | Type                 | Default                                       |
-| ----------- | --------------------------- | -------------------- | --------------------------------------------- |
-| `data`      | Share Object                | `{text, url, title}` | `{text: "", url: currentURL, title: "Share"}` |
-| `sites`     | sites                       | `string[]`           | all platforms (see list below for key list)   |
-| `closeText` | translate close             | `string`             | localise close text                           |
-| `onClick`   | callback on sucessful share |                      |                                               |
+| Prop            | Description                 | Type                 | Default                                       |
+| --------------- | --------------------------- | -------------------- | --------------------------------------------- |
+| `data`          | Share Object                | `{text, url, title}` | `{text: "", url: currentURL, title: "Share"}` |
+| `sites`         | sites                       | `string[]`           | all platforms (see list below for key list)   |
+| `closeText`     | translate close             | `string`             | localise close text                           |
+| `onClick`       | callback on sucessful share |                      |                                               |
+| `disableNative` | disables native share       | `boolean`            | `false`                                       |
 
 ## 🌎 Sites