chore: upgrade (#105)

- upgrade dependencies - incl. `react-library`'s Modal new 'Esc' fix - use `react-library`'s Button for `ConnectButton` & `LoaderButton` - v1.7.7
e-krebs · Jul 22, 2022 · e8f25b4 · e8f25b4
1 parent 145510e
commit e8f25b4
Show file tree

Hide file tree

Showing 9 changed files with 272 additions and 166 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pile",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "author": "Emmanuel Krebs <e-krebs@users.noreply.github.com>",
   "license": "MIT",
   "scripts": {
@@ -26,32 +26,32 @@
     "@react-aria/visually-hidden": "^3.3.1",
     "@react-stately/toggle": "^3.3.1",
     "classnames": "^2.3.1",
-    "date-fns": "^2.28.0",
+    "date-fns": "^2.29.1",
     "lodash": "^4.17.21",
     "node-vibrant": "^3.1.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
-    "react-hotkeys-hook": "^3.4.6",
-    "react-query": "^3.39.1"
+    "react-hotkeys-hook": "^3.4.7",
+    "react-query": "^3.39.2"
   },
   "devDependencies": {
-    "@e-krebs/react-library": "^0.0.17",
+    "@e-krebs/react-library": "^0.0.19",
     "@parcel/config-webextension": "^2.6.2",
     "@parcel/core": "^2.6.2",
     "@parcel/transformer-svg-react": "^2.6.2",
     "@parcel/validator-typescript": "^2.6.2",
-    "@tailwindcss/typography": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.4",
     "@types/chrome": "^0.0.193",
     "@types/express": "^4.17.13",
     "@types/node": "^17.0.45",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
     "bestzip": "^2.2.1",
-    "eslint": "^8.19.0",
-    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint": "^8.20.0",
+    "eslint-import-resolver-typescript": "^3.3.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
@@ -62,7 +62,7 @@
     "prettier-plugin-tailwindcss": "^0.1.12",
     "querystring-es3": "^0.2.1",
     "rimraf": "^3.0.2",
-    "tailwindcss": "^3.1.5",
+    "tailwindcss": "^3.1.6",
     "typescript": "^4.7.4"
   },
   "alias": {

diff --git a/src/components/ConnectButton.tsx b/src/components/ConnectButton.tsx
@@ -1,5 +1,5 @@
-import cx from 'classnames';
 import { FC, useCallback, useState } from 'react';
+import { Button } from '@e-krebs/react-library';
 
 import { useService } from 'hooks';
 
@@ -16,16 +16,13 @@ export const ConnectButton: FC = () => {
 
   return (
     <div className="flex justify-center py-10 text-lg">
-      <div
-        onClick={loading ? () => {} : onClick}
-        className={cx(
-          'flex cursor-pointer items-center justify-center rounded-md p-3',
-          'hover:bg-gray-200 hover:dark:bg-gray-700'
-        )}
+      <Button
+        iconStart={Icon}
+        onPress={loading ? () => {} : onClick}
+        className="h-auto border-none bg-transparent px-3 py-3 hover:bg-gray-200 dark:bg-transparent hover:dark:bg-gray-700"
       >
-        <Icon className="mr-2" />
-        <span>{loading ? 'connecting' : 'connect'} to pocket</span>
-      </div>
+        {loading ? 'connecting' : 'connect'} to {service.name}
+      </Button>
     </div>
   );
 };
diff --git a/src/components/ConnectionStatus.tsx b/src/components/ConnectionStatus.tsx
@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from 'react';
 import { Power } from 'react-feather';
 
 import { setBadge } from 'utils/badge';
-import { Button } from './Button';
+import { LoaderButton } from './LoadingIcon';
 import { Connected } from './Connected';
 import { ConnectButton } from './ConnectButton';
 import { useService } from 'hooks';
@@ -29,9 +29,9 @@ export const ConnectionStatus: FC = () => {
   return connected ? (
     <div className="flex flex-col items-center space-y-3">
       <Connected />
-      <Button startIcon={Power} onClick={onClick}>
+      <LoaderButton startIcon={Power} onClick={onClick}>
         Disconnect
-      </Button>
+      </LoaderButton>
     </div>
   ) : (
     <ConnectButton />

diff --git a/src/components/Button.tsx → src/components/LoadingIcon.tsx b/src/components/Button.tsx → src/components/LoadingIcon.tsx
@@ -1,6 +1,7 @@
 import cx from 'classnames';
 import { FC, PropsWithChildren, useCallback, useMemo, useState } from 'react';
-import { Loader } from 'react-feather';
+import { type IconProps, Loader } from 'react-feather';
+import { Button } from '@e-krebs/react-library';
 
 interface IProps {
   disabled?: boolean;
@@ -16,7 +17,11 @@ const waitFn = (duration = 500): Promise<void> => {
   return new Promise((resolve) => setTimeout(resolve, duration));
 };
 
-export const Button: FC<PropsWithChildren<IProps>> = ({
+const LoadingIcon: FC<IconProps> = ({ className, ...props }) => (
+  <Loader {...props} className={cx(className, 'animate-spin')} />
+);
+
+export const LoaderButton: FC<PropsWithChildren<IProps>> = ({
   disabled = false,
   startIcon: StartIcon,
   className,
@@ -28,7 +33,11 @@ export const Button: FC<PropsWithChildren<IProps>> = ({
   const [loading, setLoading] = useState<boolean>(false);
   const Icon = useMemo(() => {
     if (!StartIcon) return;
-    return loading ? Loader : StartIcon;
+    const ActualIcon = loading ? LoadingIcon : StartIcon;
+    const ResultIcon: FC<IconProps> = ({ className, ...props }) => (
+      <ActualIcon {...props} className={cx(className, 'm-1')} />
+    );
+    return ResultIcon;
   }, [StartIcon, loading]);
 
   const innerDisabled = useMemo(() => disabled || loading, [disabled, loading]);
@@ -42,19 +51,13 @@ export const Button: FC<PropsWithChildren<IProps>> = ({
   }, [disableLoader, onClick]);
 
   return (
-    <div
-      onClick={innerDisabled ? () => {} : action}
-      className={cx(
-        'flex space-x-2 rounded-md border border-gray-200 p-2 dark:border-gray-700',
-        innerDisabled ? 'cursor-not-allowed' : 'cursor-pointer',
-        innerDisabled ? 'bg-stripe-disabled' : 'hover:bg-gray-200 hover:dark:bg-gray-700',
-        !innerDisabled && 'hover:border-gray-500 dark:hover:border-gray-400',
-        className
-      )}
+    <Button
+      className={cx(className, 'h-auto py-2 pl-2 pr-3', innerDisabled && 'bg-stripe-disabled')}
+      onPress={innerDisabled ? () => {} : action}
+      iconStart={Icon}
+      isDisabled={innerDisabled}
     >
-      {Icon && <Icon className={cx('m-1 h-4 w-4', loading && 'animate-spin')} />}
-      <div>{children}</div>
-      <div>{loading}</div>
-    </div>
+      {children}
+    </Button>
   );
 };
diff --git a/src/manifest.json b/src/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "pile",
   "description": "pile",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "icons": {
     "16": "./content/icons/icon-16.png",
     "48": "./content/icons/icon-48.png",

diff --git a/src/pages/contentScript/Page.tsx b/src/pages/contentScript/Page.tsx
@@ -6,7 +6,7 @@ import { Archive, Plus, Trash2 } from 'react-feather';
 import { getService, type Service } from 'utils/services';
 import { type Message } from 'utils/messages';
 import { getMatchingId } from 'utils/currentUrlIsMatching';
-import { Button } from 'components/Button';
+import { LoaderButton } from 'components/LoadingIcon';
 
 export const Page = () => {
   const modalRef = useRef<ModalRef>(null);
@@ -103,32 +103,32 @@ export const Page = () => {
       </div>
       {matchingId ? (
         <>
-          <Button
+          <LoaderButton
             startIcon={Archive}
             className="w-max justify-self-center"
             options={{ disableLoader: true }}
             onClick={() => archiveItem(service, matchingId)}
           >
             Archive from {service.name}
-          </Button>
-          <Button
+          </LoaderButton>
+          <LoaderButton
             startIcon={Trash2}
             className="w-max justify-self-center"
             options={{ disableLoader: true }}
             onClick={() => deleteItem(service, matchingId)}
           >
             Delete from {service.name}
-          </Button>
+          </LoaderButton>
         </>
       ) : (
-        <Button
+        <LoaderButton
           startIcon={Plus}
           className="w-max justify-self-center"
           options={{ disableLoader: true }}
           onClick={() => addItem(service, url)}
         >
           Add to {service.name}
-        </Button>
+        </LoaderButton>
       )}
     </Modal>
   ) : null;

diff --git a/src/pages/options/SharedSettings.tsx b/src/pages/options/SharedSettings.tsx
@@ -4,7 +4,7 @@ import { Trash2 } from 'react-feather';
 
 import { vars, defaultVars } from 'helpers/vars';
 import { cleanIcons } from 'utils/icon';
-import { Button } from 'components/Button';
+import { LoaderButton } from 'components/LoadingIcon';
 
 const { refreshInterval } = vars;
 const { refreshInterval: defaultRefreshInterval } = defaultVars;
@@ -46,9 +46,9 @@ export const SharedSettings: FC = () => {
         />
       </div>
       <div className="flex">
-        <Button startIcon={Trash2} onClick={cleanIcons}>
+        <LoaderButton startIcon={Trash2} onClick={cleanIcons}>
           Clear icons data
-        </Button>
+        </LoaderButton>
       </div>
     </div>
   ) : null;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -18,20 +18,6 @@ module.exports = {
       backgroundImage: {
         'stripe-disabled': 'repeating-linear-gradient(-45deg, white, white 10px, #F3F4F6 10px, #F3F4F6 20px)',
       },
-      keyframes: {
-        blowUpModal: {
-          '0%': { transform: 'scale(0)' },
-          '100%': { transform: 'scale(1)' }
-        },
-        blowDownModal: {
-          '0%': { transform: 'scale(1)', opacity: 1 },
-          '100%': { transform: 'scale(0)', opacity: 0 }
-        }
-      },
-      animation: {
-        blowUpModal: 'blowUpModal 150ms cubic-bezier(0.4, 0, 0.2, 1)',
-        blowDownModal: 'blowDownModal 150ms cubic-bezier(0.4, 0, 0.2, 1)'
-      }
     },
   },
 };