Move stateful imports into sdk (#1549)

* Move stateful imports into sdk

* Apply eslint-fixer changes

* Automatic frontend build

---------

Co-authored-by: vin0401 <[email protected]>

Author: vin0401

assets/build/api/openapi-config.ts

@@ -22,7 +22,7 @@ const pathMatcher = (pattern: RegExp): EndpointMatcherFunction => {
 
 const config: ConfigFile = {
   schemaFile: './docs.jsonopenapi.json',
-  apiFile: '../../js/src/core/app/api/pimcore/index.ts',
+  apiFile: '@sdk/api',
   apiImport: 'api',
   endpointOverrides: [
     {

assets/bundler/plugins/entrypoints-generate/index.ts

@@ -44,11 +44,9 @@ const generateEntrypoints = (data: data, devServer?: DevServerContext): Entrypoi
 
     entrypoints.entrypoints[key] = {
       js: [
-        ...value?.async?.js ?? [],
         ...value?.initial?.js ?? [],
       ],
       css: [
-        ...value?.async?.css ?? [],
         ...value?.initial?.css ?? [],
       ]
     }

assets/js/src/core/app/i18n/helper/translation-helper.ts

@@ -8,7 +8,7 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import { store } from '@Pimcore/app/store'
+import { store } from '@sdk/app'
 import { api as translationApi } from '@Pimcore/modules/app/translations/translations-api-slice.gen'
 
 export const addNewTranslations = async (translations: string[]): Promise<void> => {

assets/js/src/core/app/i18n/store/missingTranslations.slice.ts

@@ -8,7 +8,7 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import { addAppMiddleware, injectSliceWithState, type RootState } from '@Pimcore/app/store'
+import { addAppMiddleware, injectSliceWithState, type RootState } from '@sdk/app'
 import { createListenerMiddleware, createSlice } from '@reduxjs/toolkit'
 import { debounce } from 'lodash'
 import { addNewTranslations } from '../helper/translation-helper'

assets/js/src/core/app/plugin-system/plugin-system.ts

@@ -11,7 +11,7 @@
 import { container } from '@Pimcore/app/depency-injection'
 import { type Container } from 'inversify'
 import { moduleSystem } from '../module-system/module-system'
-import { init, loadRemote } from '@module-federation/enhanced/runtime'
+import { getInstance, type init, loadRemote } from '@module-federation/enhanced/runtime'
 
 export interface ILifeCycleEvents {
   onInit?: (config: { container: Container }) => void
@@ -47,7 +47,7 @@ export class PluginSystem {
       }
     }
 
-    init(initConfig)
+    getInstance()?.registerRemotes(initConfig.remotes)
 
     for (const remote of initConfig.remotes) {
       promises.push(loadRemote(remote.alias!))

assets/js/src/core/app/store/index.ts

@@ -10,7 +10,7 @@
 
 import { type Reducer, combineSlices, configureStore, type CombinedSliceReducer, createDynamicMiddleware, type MiddlewareApiConfig } from '@reduxjs/toolkit'
 import { type TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
-import { api as pimcoreApi } from '@Pimcore/app/api/pimcore'
+import { api as pimcoreApi } from '@sdk/api'
 import { rtkQueryErrorLogger } from './middleware/rtkQueryErrorLogger'
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface

assets/js/src/core/components/breadcrumb/breadcrumb.tsx

@@ -12,7 +12,7 @@ import React, { useEffect, useRef, useState, type ReactElement, type CSSProperti
 import { Breadcrumb as AntBreadcrumb, type MenuItemProps, type BreadcrumbProps as AntBreadcrumbProps } from 'antd'
 import { type BreadcrumbItemType, type ItemType } from 'antd/es/breadcrumb/Breadcrumb'
 import cn from 'classnames'
-import { useAppDispatch } from '@Pimcore/app/store'
+import { useAppDispatch } from '@sdk/app'
 import { api as elementApi } from '@Pimcore/modules/element/element-api-slice.gen'
 import { useElementHelper } from '@Pimcore/modules/element/hooks/use-element-helper'
 import { Text } from '@Pimcore/components/text/text'

assets/js/src/core/components/drag-and-drop/__STORIES__/dnd-demo-droppable-content.tsx

@@ -10,7 +10,7 @@
 
 import React, { type MutableRefObject, forwardRef, useContext } from 'react'
 import { useStyle } from './dnd-demo-droppable-content.styles'
-import { droppableContext } from '../droppable-context-provider'
+import { droppableContext } from '@sdk/components'
 
 interface DNDDemoDroppableContentProps {
   value: string

assets/js/src/core/components/drag-and-drop/drag-and-drop.stories.tsx

@@ -14,7 +14,7 @@ import { Draggable } from './draggable'
 import { DNDDemoDroppableContent } from './__STORIES__/dnd-demo-droppable-content'
 import { Button } from '../button/button'
 import { Droppable } from './droppable'
-import { type DragAndDropInfo } from './context-provider'
+import { type DragAndDropInfo } from '@sdk/components'
 
 const DragAndDropDemo = (): React.JSX.Element => {
   const [valueDemo1, setValueDemo1] = useState<any>('')

assets/js/src/core/components/drag-and-drop/drag-overlay.tsx

@@ -9,7 +9,7 @@
  */
 
 import React from 'react'
-import { type DragAndDropInfo } from './context-provider'
+import { type DragAndDropInfo } from '@sdk/components'
 import { Icon } from '../icon/icon'
 import { useStyle } from './drag-overlay.styles'
 

assets/js/src/core/components/drag-and-drop/draggable.tsx

@@ -10,7 +10,7 @@
 
 import React, { Children, isValidElement, useMemo, useState } from 'react'
 import { useDraggable } from '@dnd-kit/core'
-import { type DragAndDropInfo } from './context-provider'
+import { type DragAndDropInfo } from '@sdk/components'
 import { uuid } from '@Pimcore/utils/uuid'
 import { GlobalStyle } from './draggable.styles'
 import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'

assets/js/src/core/components/drag-and-drop/droppable.tsx

@@ -9,7 +9,7 @@
  */
 
 import React, { type ReactNode, useContext, useEffect, useMemo, useState } from 'react'
-import { type DragAndDropInfo, DragAndDropInfoContext } from './context-provider'
+import { type DragAndDropInfo, DragAndDropInfoContext } from '@sdk/components'
 import { type UniqueIdentifier, useDroppable } from '@dnd-kit/core'
 import { uuid } from '@Pimcore/utils/uuid'
 import { BaseDroppable } from '@Pimcore/components/drag-and-drop/droppable/base-droppable'

assets/js/src/core/components/drag-and-drop/droppable/base-droppable.tsx

@@ -10,7 +10,7 @@
 
 import React, { Children, isValidElement, type ReactNode, type RefCallback, useMemo, useState } from 'react'
 import cn from 'classnames'
-import { DroppableContextProvider } from '@Pimcore/components/drag-and-drop/droppable-context-provider'
+import { DroppableContextProvider } from '@sdk/components'
 import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
 import { useStyle } from './base-droppable.styles'
 import { uuid } from '@Pimcore/utils/uuid'

assets/js/src/core/components/drag-and-drop/hooks/use-droppable.tsx

@@ -9,7 +9,7 @@
  */
 
 import { useContext } from 'react'
-import { type IDroppableContext, droppableContext } from '../droppable-context-provider'
+import { type IDroppableContext, droppableContext } from '@sdk/components'
 
 interface DroppableHookReturn extends IDroppableContext {
   getStateClasses: () => string[]

assets/js/src/core/components/element-tree/element-tree-slice.ts

@@ -10,7 +10,7 @@
 
 /* eslint-disable max-lines */
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
-import { injectSliceWithState, type RootState } from '@Pimcore/app/store'
+import { injectSliceWithState, type RootState } from '@sdk/app'
 import { isEqual, isUndefined } from 'lodash'
 import { createSelector } from 'reselect'
 import { type TreeLevelData } from '@Pimcore/modules/element/element-api-slice.gen'

assets/js/src/core/components/element-tree/hooks/use-element-tree-node.ts

@@ -8,7 +8,7 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import { type RootState, useAppDispatch } from '@Pimcore/app/store'
+import { type RootState, useAppDispatch } from '@sdk/app'
 import { type InternalNodeState, selectNodeState, setFetchTriggered } from '../element-tree-slice'
 import { useSelector } from 'react-redux'
 import { useTreeId } from '@Pimcore/modules/element/tree/provider/tree-id-provider/use-tree-id'

assets/js/src/core/components/element-tree/hooks/use-element-tree.ts

@@ -8,7 +8,7 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import { store, useAppDispatch } from '@Pimcore/app/store'
+import { store, useAppDispatch } from '@sdk/app'
 import { type InternalNodeState, selectNodeState, setNodeExpanded, setNodeLoading, setNodePage, setNodeSearchTerm, setSelectedNodeIds, setNodeScrollTo, updateNodesByParentId, setNodeFetching, setNodeHasChildren } from '../element-tree-slice'
 import { isUndefined } from 'lodash'
 import { type DataTransformerReturnType, type DataTransformerSourceNode } from '../types/node-api-hook'

assets/js/src/core/components/focal-point/focal-point.tsx

@@ -11,7 +11,7 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
 import { isNull, isUndefined } from 'lodash'
 import { useAssetDraft } from '@Pimcore/modules/asset/hooks/use-asset-draft'
-import { AssetContext } from '@Pimcore/modules/asset/asset-provider'
+import { AssetContext } from '@sdk/modules/asset'
 import { FocalPointContext } from '@Pimcore/components/focal-point/context/focal-point-context'
 import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
 import { IconButton } from '@Pimcore/components/icon-button/icon-button'

assets/js/src/core/components/grid/grid.tsx

@@ -91,7 +91,7 @@ export const Grid = ({
   ...props
 }: GridProps): React.JSX.Element => {
   const { t } = useTranslation()
-  const hashId = useCssComponentHash('table')
+  const hashId = useCssComponentHash()
   const { styles } = useStyles()
   const [columnResizeMode] = useState<ColumnResizeMode>('onChange')
   const [activeCell, setActiveCell] = useState<GridCellReference | undefined>()

assets/js/src/core/components/modal-upload/modal-upload.tsx

@@ -12,7 +12,7 @@ import React, { useState, useEffect } from 'react'
 import { Upload as AntUpload, type UploadProps as AntUploadProps } from 'antd'
 import { api as assetApi, type Asset } from '@Pimcore/modules/asset/asset-api-slice-enhanced'
 import type { RcFile, UploadFile } from 'antd/es/upload/interface'
-import { useAppDispatch } from '@Pimcore/app/store'
+import { useAppDispatch } from '@sdk/app'
 import { getPrefix } from '@Pimcore/app/api/pimcore/route'
 import { api as elementApi } from '@Pimcore/modules/element/element-api-slice.gen'
 import { isEmpty, isString, isUndefined } from 'lodash'

assets/js/src/core/components/pagination/pagination.tsx

@@ -43,7 +43,7 @@ export const Pagination = ({
 }: PaginationProps): React.JSX.Element => {
   const { styles } = useStyle()
 
-  const hashId = useCssComponentHash('pagination')
+  const hashId = useCssComponentHash()
 
   const [currentPage, setCurrentPage] = useState<number>(current)
   const [pageSize, setPageSize] = useState<number>(defaultPageSize)

assets/js/src/core/modules/ant-design/hooks/use-css-component-hash.ts

@@ -8,30 +8,11 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import useTableStyle from 'antd/es/table/style'
-import usePaginationStyle from 'antd/es/pagination/style'
-import { ConfigContext } from 'antd/es/config-provider/context'
-import { useContext } from 'react'
+import { theme } from 'antd'
+const { useToken } = theme
 
-export const useCssComponentHash = (componentName: string): string => {
-  const context = useContext(ConfigContext)
-  const prefix = context.getPrefixCls(componentName, '')
-
-  const tableHashId = useTableStyle(prefix)[1]
-  const paginationHashId = usePaginationStyle(prefix)[1]
-
-  let hashId
-  switch (componentName) {
-    case 'table':
-      hashId = tableHashId
-      break
-    case 'pagination':
-      hashId = paginationHashId
-      break
-
-    default:
-      hashId = ''
-  }
+export const useCssComponentHash = (): string => {
+  const { hashId } = useToken()
 
   return hashId
 }

assets/js/src/core/modules/app/app-loader/app-loader.tsx

@@ -9,7 +9,7 @@
  */
 
 import React, { useEffect, useState } from 'react'
-import { store } from '@Pimcore/app/store'
+import { store } from '@sdk/app'
 import { Content } from '@Pimcore/components/content/content'
 import { GlobalStyles } from '@Pimcore/styles/global.styles'
 import { useAlertModal } from '@Pimcore/components/modal/alert-modal/hooks/use-alert-modal'

assets/js/src/core/modules/app/app-loader/loader/settings/loader.tsx

@@ -8,7 +8,7 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import { useAppDispatch } from '@Pimcore/app/store'
+import { useAppDispatch } from '@sdk/app'
 import trackError, { ApiError } from '@Pimcore/modules/app/error-handler'
 import { setSettings } from '@Pimcore/modules/app/settings/settings-slice'
 import { api } from '@Pimcore/modules/app/settings/settings-slice.gen'

assets/js/src/core/modules/app/app-loader/loader/translation/loader.ts

@@ -9,7 +9,7 @@
  */
 
 import i18n, { FALLBACK_LANGUAGE } from '@Pimcore/app/i18n'
-import { store } from '@Pimcore/app/store'
+import { store } from '@sdk/app'
 import trackError, { GeneralError } from '@Pimcore/modules/app/error-handler'
 import { useTranslationGetCollectionMutation } from '@Pimcore/modules/app/translations/translations-api-slice.gen'
 import { selectCurrentUser } from '@Pimcore/modules/auth/user/user-slice'

assets/js/src/core/modules/app/app-loader/loader/user/loader.ts

@@ -8,7 +8,7 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import { useAppDispatch } from '@Pimcore/app/store'
+import { useAppDispatch } from '@sdk/app'
 import trackError, { ApiError, GeneralError } from '@Pimcore/modules/app/error-handler'
 import { setUser } from '@Pimcore/modules/auth/user/user-slice'
 import { api } from '@Pimcore/modules/user/user-api-slice-enhanced'

assets/js/src/core/modules/app/default-page.tsx

@@ -12,11 +12,15 @@ import { Background } from '@Pimcore/components/background/background'
 import { BaseLayoutView } from '@Pimcore/modules/app/base-layout/base-layout-view'
 import React from 'react'
 import { ClassDefinitionsProvider } from '../data-object/utils/provider/class-defintions/class-definitions-provider'
-import { ElementSelectorProvider } from '../element/element-selector/provider/element-selector/element-selector-provider'
+import { ElementSelectorProvider } from '@sdk/modules/element'
 import { useHandleDeepLink } from './hook/use-handle-deeplink'
+import useTableStyle from 'antd/es/table/style'
+import usePaginationStyle from 'antd/es/pagination/style'
 
 export const DefaultPage = (): React.JSX.Element => {
   useHandleDeepLink()
+  useTableStyle('ant-table')
+  usePaginationStyle('ant-pagination')
 
   const preventDrop = (event: React.DragEvent<HTMLDivElement>): void => {
     event.preventDefault()

assets/js/src/core/modules/app/global-context/global-context-slice.ts

@@ -8,7 +8,7 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import { type RootState, injectSliceWithState } from '@Pimcore/app/store'
+import { type RootState, injectSliceWithState } from '@sdk/app'
 import { type PayloadAction, createSlice } from '@reduxjs/toolkit'
 
 export interface GlobalContext {

assets/js/src/core/modules/app/global-provider.tsx

@@ -9,12 +9,12 @@
  */
 
 import { ContainerProvider } from '@Pimcore/app/depency-injection'
-import { store } from '@Pimcore/app/store'
-import { DragAndDropContextProvider } from '@Pimcore/components/drag-and-drop/context-provider'
+import { store } from '@sdk/app'
+import { DragAndDropContextProvider } from '@sdk/components'
 import { ThemeProvider } from '@Pimcore/modules/app/theme/theme-provider'
 import React from 'react'
 import { Provider } from 'react-redux'
-import { ElementSelectorProvider } from '../element/element-selector/provider/element-selector/element-selector-provider'
+import { ElementSelectorProvider } from '@sdk/modules/element'
 import { UploadModalProvider } from '@Pimcore/components/modal-upload/provider/upload-modal-provider/upload-modal-provider'
 
 export interface GlobalProviderProps {

assets/js/src/core/modules/app/mercure-api-slice.gen.ts

@@ -1,4 +1,4 @@
-import { api } from "../../app/api/pimcore/index";
+import { api } from "@sdk/api";
 export const addTagTypes = ["Mercure"] as const;
 const injectedRtkApi = api
     .enhanceEndpoints({

assets/js/src/core/modules/app/settings/settings-slice.gen.ts

@@ -1,4 +1,4 @@
-import { api } from "../../../app/api/pimcore/index";
+import { api } from "@sdk/api";
 export const addTagTypes = ["Settings"] as const;
 const injectedRtkApi = api
     .enhanceEndpoints({

assets/js/src/core/modules/app/settings/settings-slice.ts

@@ -10,7 +10,7 @@
 
 import type { PayloadAction } from '@reduxjs/toolkit'
 import { createSlice } from '@reduxjs/toolkit'
-import { injectSliceWithState, type RootState } from '@Pimcore/app/store'
+import { injectSliceWithState, type RootState } from '@sdk/app'
 import { type SystemSettingsGetApiResponse } from '@Pimcore/modules/app/settings/settings-slice.gen'
 
 const initialState: SystemSettingsGetApiResponse = {}

assets/js/src/core/modules/app/translations/translations-api-slice.gen.ts

@@ -1,4 +1,4 @@
-import { api } from "../../../app/api/pimcore/index";
+import { api } from "@sdk/api";
 export const addTagTypes = ["Translation"] as const;
 const injectedRtkApi = api
     .enhanceEndpoints({

assets/js/src/core/modules/asset/asset-api-slice.gen.ts

@@ -1,4 +1,4 @@
-import { api } from "../../app/api/pimcore/index";
+import { api } from "@sdk/api";
 export const addTagTypes = ["Assets", "Asset Grid", "Metadata"] as const;
 const injectedRtkApi = api
     .enhanceEndpoints({

assets/js/src/core/modules/asset/asset-draft-error-slice.ts

@@ -8,7 +8,7 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import { injectSliceWithState } from '@Pimcore/app/store'
+import { injectSliceWithState } from '@sdk/app'
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
 
 export interface AssetDraftErrorState {

assets/js/src/core/modules/asset/asset-draft-slice.tsx

@@ -10,7 +10,7 @@
 
 import { type PayloadAction, createEntityAdapter, createSlice } from '@reduxjs/toolkit'
 import { type Asset, type ImageData } from './asset-api-slice-enhanced'
-import { type RootState, injectSliceWithState } from '@Pimcore/app/store'
+import { type RootState, injectSliceWithState } from '@sdk/app'
 import { type PropertiesDraft, usePropertiesReducers } from '@Pimcore/modules/element/draft/hooks/use-properties'
 import { type EntityAdapter } from '@reduxjs/toolkit/src/entities/models'
 import { type CustomMetadataDraft, useCustomMetadataReducers } from '@Pimcore/modules/asset/draft/hooks/use-custom-metadata'

assets/js/src/core/modules/asset/draft/hooks/use-custom-metadata.ts

@@ -11,7 +11,7 @@
 import type { ActionCreatorWithPayload, PayloadAction } from '@reduxjs/toolkit'
 import type { EntityAdapter, EntityState } from '@reduxjs/toolkit/src/entities/models'
 
-import { useAppDispatch } from '@Pimcore/app/store'
+import { useAppDispatch } from '@sdk/app'
 import type {
   CustomMetadata as CustomMetadataApi
 } from '@Pimcore/modules/asset/editor/shared-tab-manager/tabs/custom-metadata/metadata-api-slice-enhanced'

assets/js/src/core/modules/asset/draft/hooks/use-custom-settings.ts

@@ -10,7 +10,7 @@
 
 import type { ActionCreatorWithPayload, PayloadAction } from '@reduxjs/toolkit'
 import type { EntityAdapter, EntityState } from '@reduxjs/toolkit/src/entities/models'
-import { useAppDispatch } from '@Pimcore/app/store'
+import { useAppDispatch } from '@sdk/app'
 import type { TrackableChangesDraft } from '@Pimcore/modules/element/draft/hooks/use-trackable-changes'
 import { type UpdateCustomSettings } from '@Pimcore/modules/asset/asset-api-slice.gen'
 import { findIndex, isEmpty, isUndefined } from 'lodash'

assets/js/src/core/modules/asset/draft/hooks/use-image-settings.ts

@@ -11,7 +11,7 @@
 import type { ActionCreatorWithPayload, PayloadAction } from '@reduxjs/toolkit'
 import type { EntityAdapter, EntityState } from '@reduxjs/toolkit/src/entities/models'
 
-import { useAppDispatch } from '@Pimcore/app/store'
+import { useAppDispatch } from '@sdk/app'
 
 import { type TrackableChangesDraft } from '@Pimcore/modules/element/draft/hooks/use-trackable-changes'
 import type { ImageData } from '@Pimcore/modules/asset/asset-api-slice.gen'