chore(chrome): move chrome rxjs wrapper to shared package

.eslintrc.js

@@ -21,6 +21,11 @@ module.exports = {
         groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'type', 'object'],
         'newlines-between': 'always-and-inside-groups',
         pathGroups: [
+          {
+            group: 'internal',
+            pattern: '@dvcol/**',
+            position: 'before',
+          },
           {
             group: 'internal',
             pattern: '@src/**',

.github/workflows/build.js.yml

@@ -38,7 +38,7 @@ jobs:
         run: yarn build
 
       - name: Linting (eslint)
-        run: yarn eslint
+        run: yarn lint
 
       - name: Unit tests
         run: yarn test:unit

package.json

@@ -15,9 +15,8 @@
     "test:unit": "jest --watchAll=false --coverage ",
     "test:change": "yarn test:unit -- --onlyChanged",
     "prettier": "prettier --write '**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
-    "eslint": "eslint --ext .js,.jsx,.ts,.tsx src",
-    "eslint:fix": "eslint --ext .js,.jsx,.ts,.tsx src --fix",
-    "changelog": "standard-version --skip.bump --skip.commit --skip.tag",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx src --fix",
     "version": "standard-version --skip.changelog --skip.commit --skip.tag",
     "release": "git tag -d $(git tag -l \"v*-rc\") && standard-version --skip.bump",
     "changelog": "extract-changelog-release > RELEASE.md"
@@ -29,6 +28,7 @@
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
   "dependencies": {
+    "@dvcol/web-extension-utils": "^1.0.3",
     "@emotion/cache": "^11.7.1",
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
@@ -48,6 +48,7 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.2",
     "react-router-hash-link": "^2.4.3",
+    "redux": "^4.1.2",
     "rxjs": "^7.5.4",
     "uuid": "^8.3.2",
     "webext-redux": "^2.1.9"
@@ -56,7 +57,7 @@
     "@babel/core": "^7.17.5",
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
-    "@dvcol/eslint-plugin-presets": "^1.1.0",
+    "@dvcol/eslint-plugin-presets": "^1.1.4",
     "@redux-devtools/extension": "^3.2.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",

src/components/common/dialog/confirmation-dialog.tsx

@@ -2,7 +2,7 @@ import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/
 
 import React, { useEffect } from 'react';
 
-import { useI18n } from '@src/utils';
+import { useI18n } from '@dvcol/web-extension-utils';
 
 export const ConfirmationDialog = ({
   open,

src/components/common/explorer/explorer-leaf-edit.tsx

@@ -6,11 +6,13 @@ import { Button, Stack, TextField, Tooltip, Typography } from '@mui/material';
 
 import React, { useState } from 'react';
 
+import { i18n } from '@dvcol/web-extension-utils';
+
 import type { File, Folder } from '@src/models';
 import { QueryService } from '@src/services';
-import { i18n } from '@src/utils';
 
 import type { ButtonProps } from '@mui/material';
+
 import type { InputProps as StandardInputProps } from '@mui/material/Input/Input';
 import type { FC } from 'react';
 

src/components/common/explorer/explorer-loading.tsx

@@ -3,7 +3,7 @@ import { Box, CircularProgress, Typography } from '@mui/material';
 
 import React from 'react';
 
-import { useI18n } from '@src/utils';
+import { useI18n } from '@dvcol/web-extension-utils';
 
 export const ExplorerLoading = ({ loading, empty }: { loading?: boolean; empty?: boolean }) => {
   const i18n = useI18n('common', 'explorer', 'explorer_loading');

src/components/common/form/form-input.tsx

@@ -6,10 +6,11 @@ import React, { useState } from 'react';
 
 import { Controller } from 'react-hook-form';
 
-import { useI18n } from '@src/utils';
+import { useI18n } from '@dvcol/web-extension-utils';
 
 import type { SvgIconProps, TextFieldProps } from '@mui/material';
 import type { ControllerProps } from 'react-hook-form';
+
 import type { FieldPath, FieldValues } from 'react-hook-form/dist/types';
 
 export const FormInput = <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({

src/components/common/form/form-tab.tsx

@@ -2,12 +2,12 @@ import { Button, Card, CardHeader, Collapse, Grid, MenuItem } from '@mui/materia
 
 import React from 'react';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { FormExplorer, FormSwitch } from '@src/components';
 import type { Tab, TaskTab } from '@src/models';
 import { ColorLevel, defaultNotifications, defaultTabs, getColorFromLevel, getLevelFromColor, TabType, TaskStatus } from '@src/models';
 
-import { useI18n } from '@src/utils';
-
 import { FormCheckbox } from './form-checkbox';
 import { FormInput } from './form-input';
 

src/components/navbar/navbar-menu.tsx

@@ -16,13 +16,15 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { Link } from 'react-router-dom';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { ConfirmationDialog } from '@src/components';
 import type { NavbarButton } from '@src/models';
 import { AppLinks, AppRoute, ErrorType, LoginError, NavbarButtonType } from '@src/models';
 import { NotificationService, QueryService } from '@src/services';
 import { setNavbar } from '@src/store/actions';
 import { getGlobalNavbarButton, getUrl } from '@src/store/selectors';
-import { createTab, useI18n } from '@src/utils';
+import { createTab } from '@src/utils';
 
 import NavbarMenuIcon from './navbar-menu-icon';
 

src/components/navbar/navbar.tsx

@@ -5,10 +5,11 @@ import React, { useEffect } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import LoadingBar from '@src/components/navbar/loading-bar';
 import { setNavbar } from '@src/store/actions';
 import { getTab, getTabs } from '@src/store/selectors';
-import { useI18n } from '@src/utils';
 
 import NavbarMenu from './navbar-menu';
 import NavbarTab from './navbar-tab';

src/components/panel/about.tsx

@@ -8,9 +8,11 @@ import { Button, Card, CardActions, CardContent, CardHeader, Chip, Stack, Typogr
 
 import React, { useEffect, useState } from 'react';
 
+import { getAcceptLanguages, useI18n } from '@dvcol/web-extension-utils';
+
 import manifest from '@src/manifest.json';
 import { AppLinks } from '@src/models';
-import { createTab, getAcceptLanguages, useI18n } from '@src/utils';
+import { createTab } from '@src/utils';
 
 import type { CardProps } from '@mui/material';
 import type { FC } from 'react';

src/components/panel/config/config.tsx

@@ -19,11 +19,13 @@ import { useForm } from 'react-hook-form';
 
 import { finalize, forkJoin } from 'rxjs';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { FormExplorer, FormInput, FormSwitch } from '@src/components';
 import type { DownloadStationConfig, DownloadStationInfo } from '@src/models';
 import { ColorLevel, ColorLevelMap, defaultConfig } from '@src/models';
 import { NotificationService, QueryService } from '@src/services';
-import { before, useDebounceObservable, useI18n } from '@src/utils';
+import { before, useDebounceObservable } from '@src/utils';
 
 import type { CardProps } from '@mui/material';
 import type { FC } from 'react';

src/components/panel/settings/settings-accordion.tsx

@@ -7,8 +7,9 @@ import React from 'react';
 
 import { v4 as uuid } from 'uuid';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import type { InterfaceHeader } from '@src/models';
-import { useI18n } from '@src/utils';
 
 export const SettingsAccordion = <T extends { id: string }>({
   title,

src/components/panel/settings/settings-banner.tsx

@@ -6,12 +6,13 @@ import { useForm } from 'react-hook-form';
 
 import { useDispatch, useSelector } from 'react-redux';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { FormInput, FormSwitch } from '@src/components';
 import type { Notifications, NotificationsBanner } from '@src/models';
 import { NotificationHeader, NotificationLevel, NotificationLevelKeys } from '@src/models';
 import { syncNotifications } from '@src/store/actions';
 import { getNotifications } from '@src/store/selectors';
-import { useI18n } from '@src/utils';
 
 export const SettingsBanner = () => {
   const i18n = useI18n('panel', 'settings', 'banner');

src/components/panel/settings/settings-context-menu.tsx

@@ -6,11 +6,13 @@ import { useForm } from 'react-hook-form';
 
 import { useDispatch } from 'react-redux';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { FormExplorer, FormInput, FormSwitch } from '@src/components/common';
 import type { ContextMenu } from '@src/models';
 import { ChromeMessageType } from '@src/models';
 import { removeContextMenu, saveContextMenu } from '@src/store/actions';
-import { sendMessage, useI18n } from '@src/utils';
+import { sendMessage } from '@src/utils';
 
 export const SettingsContextMenu = ({ menu }: { menu: ContextMenu }) => {
   const i18n = useI18n('panel', 'settings', 'context_menu');

src/components/panel/settings/settings-context-menus.tsx

@@ -4,13 +4,15 @@ import React from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { SettingsAccordion, SettingsContextMenu } from '@src/components';
 import type { ContextMenu } from '@src/models';
 import { ChromeMessageType, defaultContextMenu, InterfaceHeader } from '@src/models';
 import type { StoreState } from '@src/store';
 import { resetContextMenu, saveContextMenu } from '@src/store/actions';
 import { getMenus } from '@src/store/selectors';
-import { sendMessage, useI18n } from '@src/utils';
+import { sendMessage } from '@src/utils';
 
 export const SettingsContextMenus = () => {
   const i18n = useI18n('panel', 'settings', 'context_menus');

src/components/panel/settings/settings-credentials.tsx

@@ -8,13 +8,15 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { finalize, lastValueFrom } from 'rxjs';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { FormCheckbox, FormInput, FormSwitch } from '@src/components';
 import type { Connection, Credentials, InfoResponse, LoginResponse } from '@src/models';
 import { ColorLevel, ColorLevelMap, CommonAPI, ConnectionHeader, ConnectionType, defaultConnection, Protocol } from '@src/models';
 import { NotificationService, PollingService, QueryService } from '@src/services';
 import { syncConnection, syncRememberMe } from '@src/store/actions';
 import { getConnection, getLogged, urlReducer } from '@src/store/selectors';
-import { before, useDebounceObservable, useI18n } from '@src/utils';
+import { before, useDebounceObservable } from '@src/utils';
 
 import type { SwitchBaseProps } from '@mui/material/internal/SwitchBase';
 import type { RegisterOptions } from 'react-hook-form';

src/components/panel/settings/settings-global.tsx

@@ -6,13 +6,14 @@ import { useForm } from 'react-hook-form';
 
 import { useDispatch, useSelector } from 'react-redux';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { FormCheckbox, FormInput, FormSwitch } from '@src/components';
 import type { Global } from '@src/models';
 import { ActionScope, defaultGlobal, InterfaceHeader, NavbarButtonType, ThemeMode } from '@src/models';
 import type { StoreState } from '@src/store';
 import { syncInterface } from '@src/store/actions';
 import { getGlobal } from '@src/store/selectors';
-import { useI18n } from '@src/utils';
 
 export const SettingsGlobal = () => {
   const i18n = useI18n('panel', 'settings', 'global');

src/components/panel/settings/settings-header.tsx

@@ -2,8 +2,9 @@ import { Typography } from '@mui/material';
 
 import React from 'react';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import type { SettingHeader } from '@src/models';
-import { useI18n } from '@src/utils';
 
 export const SettingsHeader = ({ label }: { label: SettingHeader }) => {
   const i18n = useI18n('panel', 'settings');

src/components/panel/settings/settings-polling.tsx

@@ -6,12 +6,13 @@ import { useForm } from 'react-hook-form';
 
 import { useDispatch, useSelector } from 'react-redux';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { FormInput, FormSwitch } from '@src/components';
 import type { Polling } from '@src/models';
 import { ConnectionHeader } from '@src/models';
 import { syncPolling } from '@src/store/actions';
 import { getPolling } from '@src/store/selectors';
-import { useI18n } from '@src/utils';
 
 import type { RegisterOptions } from 'react-hook-form';
 

src/components/panel/settings/settings-quick-menu.tsx

@@ -6,11 +6,12 @@ import { useForm } from 'react-hook-form';
 
 import { useDispatch } from 'react-redux';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { FormExplorer, FormInput, FormSwitch, MuiIcon } from '@src/components/common';
 import type { QuickMenu } from '@src/models';
 import { MaterialIcon, MaterialIconMap } from '@src/models';
 import { removeQuickMenu, saveQuickMenu } from '@src/store/actions';
-import { useI18n } from '@src/utils';
 
 export const SettingsQuickMenu = ({ menu }: { menu: QuickMenu }) => {
   const i18n = useI18n('panel', 'settings', 'quick_menu');

src/components/panel/settings/settings-quick-menus.tsx

@@ -4,13 +4,14 @@ import React from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { SettingsAccordion, SettingsQuickMenu } from '@src/components';
 import type { QuickMenu } from '@src/models';
 import { defaultQuickMenu, InterfaceHeader } from '@src/models';
 import type { StoreState } from '@src/store';
 import { resetQuickMenus, saveQuickMenu } from '@src/store/actions';
 import { getQuick } from '@src/store/selectors';
-import { useI18n } from '@src/utils';
 
 export const SettingsQuickMenus = () => {
   const i18n = useI18n('panel', 'settings', 'quick_menus');

src/components/panel/settings/settings-snack.tsx

@@ -6,12 +6,13 @@ import { useForm } from 'react-hook-form';
 
 import { useDispatch, useSelector } from 'react-redux';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { FormInput, FormSwitch } from '@src/components';
 import type { Notifications, NotificationsSnack } from '@src/models';
 import { NotificationHeader, NotificationLevel, NotificationLevelKeys } from '@src/models';
 import { syncNotifications } from '@src/store/actions';
 import { getNotifications } from '@src/store/selectors';
-import { useI18n } from '@src/utils';
 
 export const SettingsSnack = () => {
   const i18n = useI18n('panel', 'settings', 'snack');

src/components/panel/settings/settings-tab.tsx

@@ -6,11 +6,12 @@ import { useForm } from 'react-hook-form';
 
 import { useDispatch } from 'react-redux';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { FormInput, FormTab } from '@src/components';
 import type { Tab, TaskTab } from '@src/models';
 import { ColorLevel, ColorLevelMap, getColorFromLevel, getLevelFromColor, TaskTabSort } from '@src/models';
 import { removeTaskTab, saveTaskTab } from '@src/store/actions';
-import { useI18n } from '@src/utils';
 
 import type { UseFormGetValues, UseFormSetValue } from 'react-hook-form';
 import type { Control } from 'react-hook-form/dist/types/form';

src/components/panel/settings/settings-tasks-count.tsx

@@ -6,12 +6,13 @@ import { useForm } from 'react-hook-form';
 
 import { useDispatch, useSelector } from 'react-redux';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { FormSwitch, FormTab } from '@src/components';
 import type { Notifications, NotificationsCount, Tab } from '@src/models';
 import { defaultNotifications, NotificationHeader } from '@src/models';
 import { syncNotifications } from '@src/store/actions';
 import { getNotifications } from '@src/store/selectors';
-import { useI18n } from '@src/utils';
 
 import type { UseFormGetValues, UseFormSetValue } from 'react-hook-form';
 import type { Control } from 'react-hook-form/dist/types/form';

src/components/panel/settings/settings.tsx

@@ -6,6 +6,8 @@ import { Route, Routes } from 'react-router-dom';
 
 import { HashLink as Link } from 'react-router-hash-link';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import {
   SettingsBanner,
   SettingsContextMenus,
@@ -18,7 +20,6 @@ import {
 } from '@src/components';
 import { SettingsGlobal } from '@src/components/panel/settings/settings-global';
 import { ConnectionHeader, InterfaceHeader, NotificationHeader, SettingHeader } from '@src/models';
-import { useI18n } from '@src/utils';
 
 import { SettingsTabs } from './settings-tabs';
 

src/components/panel/task/task-add.tsx

@@ -6,10 +6,11 @@ import { useForm } from 'react-hook-form';
 
 import { lastValueFrom, tap } from 'rxjs';
 
+import { useI18n } from '@dvcol/web-extension-utils';
+
 import { FormExplorer, FormInput, FormSwitch } from '@src/components';
 import type { TaskForm } from '@src/models';
 import { QueryService } from '@src/services';
-import { useI18n } from '@src/utils';
 
 import type { CardProps } from '@mui/material';
 import type { FC } from 'react';