add: aliases for imports and fix exports

elementor · Nov 25, 2024 · 9e388c2 · 9e388c2
1 parent fa0a75f
commit 9e388c2
Show file tree

Hide file tree

Showing 22 changed files with 187 additions and 38 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -9,6 +9,16 @@
     "babel",
     "react"
   ],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "paths": ["node_modules"]
+      },
+      "webpack": {
+        "config": "webpack.config.js"
+      }
+    }
+  },
   "env": {
     "browser": true,
     "node": true,
@@ -47,7 +57,10 @@
           "caseInsensitive": false
         }
       }
-    ]
+    ],
+    "import/newline-after-import": ["error", {
+      "count": 1
+    }]
   },
   "parser": "@babel/eslint-parser"
 }
diff --git a/modules/settings/assets/js/admin.js b/modules/settings/assets/js/admin.js
@@ -1,7 +1,7 @@
+import { SettingsProvider, NotificationsProvider } from '@ea11y/hooks';
 import { StrictMode, Fragment, createRoot } from '@wordpress/element';
 import App from './app';
 import { PluginSettingsProvider } from './contexts/plugin-settings';
-import { SettingsProvider, NotificationsProvider } from './hooks';
 
 const rootNode = document.getElementById( 'ea11y-app' );
 

diff --git a/modules/settings/assets/js/app.js b/modules/settings/assets/js/app.js
@@ -3,9 +3,9 @@ import Box from '@elementor/ui/Box';
 import DirectionProvider from '@elementor/ui/DirectionProvider';
 import Grid from '@elementor/ui/Grid';
 import { ThemeProvider } from '@elementor/ui/styles';
-import { ConnectModal, Notifications, MenuItems, AdminTopBar, BottomBar } from './components';
+import { ConnectModal, Notifications, MenuItems, AdminTopBar, BottomBar } from '@ea11y/components';
+import { useNotificationSettings, useSettings } from '@ea11y/hooks';
 import { usePluginSettingsContext } from './contexts/plugin-settings';
-import { useNotificationSettings, useSettings } from './hooks';
 import { Sidebar } from './layouts/sidebar';
 
 const App = () => {

diff --git a/modules/settings/assets/js/components/connect-modal/index.js b/modules/settings/assets/js/components/connect-modal/index.js
@@ -3,8 +3,8 @@ import Button from '@elementor/ui/Button';
 import Grid from '@elementor/ui/Grid';
 import Modal from '@elementor/ui/Modal';
 import Typography from '@elementor/ui/Typography';
+import { useAuth, useModal } from '@ea11y/hooks';
 import { __ } from '@wordpress/i18n';
-import { useAuth, useModal } from '../../hooks';
 
 function ConnectModal() {
 	const { isOpen } = useModal();

diff --git a/modules/settings/assets/js/components/icon-select/index.js b/modules/settings/assets/js/components/icon-select/index.js
@@ -4,19 +4,29 @@ import Paper from '@elementor/ui/Paper';
 import Radio from '@elementor/ui/Radio';
 import RadioGroup from '@elementor/ui/RadioGroup';
 import Typography from '@elementor/ui/Typography';
+import { AccessibilityControlsIcon, AccessibilityEyeIcon, AccessibilityPersonIcon, AccessibilityTextIcon } from '@ea11y/icons';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { AccessibilityControlsIcon, AccessibilityEyeIcon, AccessibilityPersonIcon, AccessibilityTextIcon } from '../../icons';
 
 const IconSelect = ( props ) => {
 	const [ selectedValue, setSelectedValue ] = useState( 'person' );
-	const optionStyle = { color: 'info.main', fontSize: 44 };
+	const optionStyle = {
+		color: 'info.main', fontSize: 44,
+	};
 
 	const options = [
-		{ value: 'person', icon: <AccessibilityPersonIcon sx={ optionStyle } />, label: __( 'Accessibility Person Icon', 'pojo-accessibility' ) },
-		{ value: 'eye', icon: <AccessibilityEyeIcon sx={ optionStyle } />, label: __( 'Accessibility Eye Icon', 'pojo-accessibility' ) },
-		{ value: 'text', icon: <AccessibilityTextIcon sx={ optionStyle } />, label: __( 'Accessibility Text Badge Icon', 'pojo-accessibility' ) },
-		{ value: 'controls', icon: <AccessibilityControlsIcon sx={ optionStyle } />, label: __( 'Accessibility Controls Slider Icon', 'pojo-accessibility' ) },
+		{
+			value: 'person', icon: <AccessibilityPersonIcon sx={ optionStyle } />, label: __( 'Accessibility Person Icon', 'pojo-accessibility' ),
+		},
+		{
+			value: 'eye', icon: <AccessibilityEyeIcon sx={ optionStyle } />, label: __( 'Accessibility Eye Icon', 'pojo-accessibility' ),
+		},
+		{
+			value: 'text', icon: <AccessibilityTextIcon sx={ optionStyle } />, label: __( 'Accessibility Text Badge Icon', 'pojo-accessibility' ),
+		},
+		{
+			value: 'controls', icon: <AccessibilityControlsIcon sx={ optionStyle } />, label: __( 'Accessibility Controls Slider Icon', 'pojo-accessibility' ),
+		},
 	];
 
 	return (
@@ -59,7 +69,10 @@ const IconSelect = ( props ) => {
 							cursor: 'pointer',
 						} }
 					>{ option.icon }
-						<Radio value={ option.value } sx={ { opacity: 0, position: 'absolute' } } />
+						<Radio value={ option.value }
+							sx={ {
+								opacity: 0, position: 'absolute',
+							} } />
 					</Paper>
 				) ) }
 			</RadioGroup>

diff --git a/modules/settings/assets/js/components/icon-size/index.js b/modules/settings/assets/js/components/icon-size/index.js
@@ -4,9 +4,9 @@ import Paper from '@elementor/ui/Paper';
 import Radio from '@elementor/ui/Radio';
 import RadioGroup from '@elementor/ui/RadioGroup';
 import Typography from '@elementor/ui/Typography';
+import { AccessibilityEyeIcon, AccessibilityPersonIcon, AccessibilityTextIcon } from '@ea11y/icons';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { AccessibilityEyeIcon, AccessibilityPersonIcon, AccessibilityTextIcon } from '../../icons';
 
 const IconSize = ( props ) => {
 	const [ selectedValue, setSelectedValue ] = useState( 'medium' );

diff --git a/modules/settings/assets/js/components/my-account-menu/index.js b/modules/settings/assets/js/components/my-account-menu/index.js
@@ -9,12 +9,12 @@ import Menu from '@elementor/ui/Menu';
 import MenuItem from '@elementor/ui/MenuItem';
 import Typography from '@elementor/ui/Typography';
 import { bindMenu, bindTrigger, usePopupState } from '@elementor/ui/usePopupState';
-import { __ } from '@wordpress/i18n';
-import { useSettings } from '../../hooks';
+import { useSettings } from '@ea11y/hooks';
 import {
 	CreditCardIcon,
 	UserArrowIcon,
-} from '../../icons';
+} from '@ea11y/icons';
+import { __ } from '@wordpress/i18n';
 
 const MyAccountMenu = () => {
 	const { openSidebar } = useSettings();

diff --git a/modules/settings/assets/js/components/notifications/index.js b/modules/settings/assets/js/components/notifications/index.js
@@ -1,6 +1,6 @@
 import Alert from '@elementor/ui/Alert';
 import Snackbar from '@elementor/ui/Snackbar';
-import { useNotificationSettings } from '../../hooks';
+import { useNotificationSettings } from '@ea11y/hooks';
 
 const Notifications = ( { type, message } ) => {
 	const {

diff --git a/modules/settings/assets/js/components/sidebar-app-bar/index.js b/modules/settings/assets/js/components/sidebar-app-bar/index.js
@@ -3,12 +3,9 @@ import Box from '@elementor/ui/Box';
 import IconButton from '@elementor/ui/IconButton';
 import Toolbar from '@elementor/ui/Toolbar';
 import Typography from '@elementor/ui/Typography';
+import { useSettings } from '@ea11y/hooks';
+import { ElementorLogo, SquareRoundedChevronsLeft } from '@ea11y/icons';
 import { __ } from '@wordpress/i18n';
-import { useSettings } from '../../hooks';
-import {
-	ElementorLogo,
-	SquareRoundedChevronsLeft,
-} from '../../icons';
 
 const SidebarAppBar = () => {
 	const { openSidebar, setOpenSidebar } = useSettings();

diff --git a/modules/settings/assets/js/components/sidebar-menu/index.js b/modules/settings/assets/js/components/sidebar-menu/index.js
@@ -4,8 +4,8 @@ import ListItem from '@elementor/ui/ListItem';
 import ListItemButton from '@elementor/ui/ListItemButton';
 import ListItemIcon from '@elementor/ui/ListItemIcon';
 import ListItemText from '@elementor/ui/ListItemText';
+import { useSettings } from '@ea11y/hooks';
 import { useState } from '@wordpress/element';
-import { useSettings } from '../../hooks';
 import { MenuItems } from './menu';
 
 const SidebarMenu = () => {

diff --git a/modules/settings/assets/js/components/sidebar-menu/menu.js b/modules/settings/assets/js/components/sidebar-menu/menu.js
@@ -1,6 +1,6 @@
 import { PagesIcon } from '@elementor/icons';
+import { WidgetIcon } from '@ea11y/icons';
 import { __ } from '@wordpress/i18n';
-import { WidgetIcon } from '../../icons';
 import { AccessibilityStatement, Menu, IconSettings } from '../../pages';
 
 export const MenuItems = {

diff --git a/modules/settings/assets/js/layouts/icon-design-settings.js b/modules/settings/assets/js/layouts/icon-design-settings.js
@@ -1,8 +1,8 @@
 import Box from '@elementor/ui/Box';
 import Grid from '@elementor/ui/Grid';
 import Typography from '@elementor/ui/Typography';
+import { ColorPicker, IconSelect, IconSize } from '@ea11y/components';
 import { __ } from '@wordpress/i18n';
-import { ColorPicker, IconSelect, IconSize } from '../components';
 
 const IconDesignSettings = () => {
 	return (

diff --git a/modules/settings/assets/js/layouts/position-settings-desktop.js b/modules/settings/assets/js/layouts/position-settings-desktop.js
@@ -2,9 +2,9 @@ import Box from '@elementor/ui/Box';
 import FormControlLabel from '@elementor/ui/FormControlLabel';
 import Switch from '@elementor/ui/Switch';
 import Typography from '@elementor/ui/Typography';
+import { AlignmentMatrixControl, PositionControl } from '@ea11y/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { AlignmentMatrixControl, PositionControl } from '../components';
 
 const PositionSettingsDesktop = () => {
 	const [ hiddenOnDesktop, setHiddenOnDesktop ] = useState( false );

diff --git a/modules/settings/assets/js/layouts/position-settings.js b/modules/settings/assets/js/layouts/position-settings.js
@@ -6,9 +6,9 @@ import TabPanel from '@elementor/ui/TabPanel';
 import Tabs from '@elementor/ui/Tabs';
 import Typography from '@elementor/ui/Typography';
 import useTabs from '@elementor/ui/useTabs';
+import { PositionSettingsDesktop } from '@ea11y/layouts';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { PositionSettingsDesktop } from '../layouts';
 
 const TABS = {
 	one: 'one',

diff --git a/modules/settings/assets/js/layouts/sidebar.js b/modules/settings/assets/js/layouts/sidebar.js
@@ -1,7 +1,7 @@
 import Box from '@elementor/ui/Box';
 import Drawer from '@elementor/ui/Drawer';
-import { MyAccountMenu, SidebarAppBar, SidebarMenu } from '../components';
-import { useSettings } from '../hooks';
+import { MyAccountMenu, SidebarAppBar, SidebarMenu } from '@ea11y/components';
+import { useSettings } from '@ea11y/hooks';
 
 export const Sidebar = () => {
 	const { openSidebar } = useSettings();

diff --git a/modules/settings/assets/js/pages/accessibility-statement.js b/modules/settings/assets/js/pages/accessibility-statement.js
@@ -1,3 +1,5 @@
-export const AccessibilityStatement = () => {
+const AccessibilityStatement = () => {
 	return ( <h1>AccessibilityStatement</h1> );
 };
+
+export default AccessibilityStatement;
diff --git a/modules/settings/assets/js/pages/icon-settings.js b/modules/settings/assets/js/pages/icon-settings.js
@@ -1,3 +1,5 @@
-export const IconSettings = () => {
+const IconSettings = () => {
 	return ( <h1>IconSettings</h1> );
 };
+
+export default IconSettings;
diff --git a/modules/settings/assets/js/pages/index.js b/modules/settings/assets/js/pages/index.js
@@ -1,3 +1,3 @@
-export { AccessibilityStatement } from './accessibility-statement';
-export { IconSettings } from './icon-settings';
-export { Menu } from './menu';
+export { default as AccessibilityStatement } from './accessibility-statement';
+export { default as IconSettings } from './icon-settings';
+export { default as Menu } from './menu';
diff --git a/modules/settings/assets/js/pages/menu.js b/modules/settings/assets/js/pages/menu.js
@@ -1,3 +1,5 @@
-export const Menu = () => {
+const Menu = () => {
 	return ( <h1>Menu</h1> );
 };
+
+export default Menu;
diff --git a/package-lock.json b/package-lock.json