refactor: composite (#1042)

* feat: refactor to use composite

* chore: remove debuggers

* chore: upgrade asset-packs

* chore: rename enum

packages/@dcl/inspector/package.json

@@ -2,7 +2,7 @@
   "name": "@dcl/inspector",
   "version": "0.1.0",
   "dependencies": {
-    "@dcl/asset-packs": "1.20.2",
+    "@dcl/asset-packs": "^2.0.0",
     "ts-deepmerge": "^7.0.0"
   },
   "devDependencies": {

packages/@dcl/inspector/src/components/AssetsCatalog/Asset/Asset.tsx

@@ -11,7 +11,7 @@ import { fetchImage, resizeImage } from '../../../lib/utils/img'
 import { useIsMounted } from '../../../hooks/useIsMounted'
 
 const Asset: React.FC<{ value: Asset }> = ({ value }) => {
-  const [, drag, preview] = useDrag(() => ({ type: 'builder-asset', item: { value } }), [value])
+  const [, drag, preview] = useDrag(() => ({ type: 'catalog-asset', item: { value } }), [value])
   const isSmartItem = isSmart(value)
   const isGroundItem = isGround(value)
   const imgSrc = getContentsUrl(value.contents['thumbnail.png'])

packages/@dcl/inspector/src/components/EntityInspector/SmartItemBasicView/VideoView/VideoView.tsx

@@ -5,15 +5,15 @@ import { Entity } from '@dcl/ecs'
 import { withSdk, WithSdkProps } from '../../../../hoc/withSdk'
 import { useHasComponent } from '../../../../hooks/sdk/useHasComponent'
 import { useComponentInput } from '../../../../hooks/sdk/useComponentInput'
-import { ProjectAssetDrop, getNode } from '../../../../lib/sdk/drag-drop'
+import { LocalAssetDrop, getNode } from '../../../../lib/sdk/drag-drop'
 import { withAssetDir } from '../../../../lib/data-layer/host/fs-utils'
 import { useAppSelector } from '../../../../redux/hooks'
 import { selectAssetCatalog } from '../../../../redux/app'
 import { Block } from '../../../Block'
 import { TextField, CheckboxField, RangeField, InfoTooltip } from '../../../ui'
 import { fromVideoPlayer, toVideoPlayer, isValidInput, isVideo, isValidVolume } from '../../VideoPlayerInspector/utils'
 
-const DROP_TYPES = ['project-asset']
+const DROP_TYPES = ['local-asset']
 
 export default React.memo(
   withSdk<WithSdkProps & { entity: Entity }>(({ sdk, entity }) => {
@@ -44,13 +44,13 @@ export default React.memo(
     const [{ isHover }, drop] = useDrop(
       () => ({
         accept: DROP_TYPES,
-        drop: ({ value, context }: ProjectAssetDrop, monitor) => {
+        drop: ({ value, context }: LocalAssetDrop, monitor) => {
           if (monitor.didDrop()) return
           const node = context.tree.get(value)!
           const model = getNode(node, context.tree, isVideo)
           if (model) void handleDrop(withAssetDir(model.asset.src))
         },
-        canDrop: ({ value, context }: ProjectAssetDrop) => {
+        canDrop: ({ value, context }: LocalAssetDrop) => {
           const node = context.tree.get(value)!
           return !!getNode(node, context.tree, isVideo)
         },

packages/@dcl/inspector/src/components/EntityInspector/VideoPlayerInspector/VideoPlayerInspector.tsx

@@ -9,7 +9,7 @@ import { getComponentValue } from '../../../hooks/sdk/useComponentValue'
 import { analytics, Event } from '../../../lib/logic/analytics'
 import { getAssetByModel } from '../../../lib/logic/catalog'
 import { CoreComponents } from '../../../lib/sdk/components'
-import { ProjectAssetDrop, getNode } from '../../../lib/sdk/drag-drop'
+import { LocalAssetDrop, getNode } from '../../../lib/sdk/drag-drop'
 import { withAssetDir } from '../../../lib/data-layer/host/fs-utils'
 import { useAppSelector } from '../../../redux/hooks'
 import { selectAssetCatalog } from '../../../redux/app'
@@ -19,7 +19,7 @@ import { TextField, CheckboxField, RangeField, InfoTooltip } from '../../ui'
 import { fromVideoPlayer, toVideoPlayer, isValidInput, isVideo, isValidVolume } from './utils'
 import type { Props } from './types'
 
-const DROP_TYPES = ['project-asset']
+const DROP_TYPES = ['local-asset']
 
 export default withSdk<Props>(({ sdk, entity }) => {
   const files = useAppSelector(selectAssetCatalog)
@@ -56,13 +56,13 @@ export default withSdk<Props>(({ sdk, entity }) => {
   const [{ isHover }, drop] = useDrop(
     () => ({
       accept: DROP_TYPES,
-      drop: ({ value, context }: ProjectAssetDrop, monitor) => {
+      drop: ({ value, context }: LocalAssetDrop, monitor) => {
         if (monitor.didDrop()) return
         const node = context.tree.get(value)!
         const model = getNode(node, context.tree, isVideo)
         if (model) void handleDrop(withAssetDir(model.asset.src))
       },
-      canDrop: ({ value, context }: ProjectAssetDrop) => {
+      canDrop: ({ value, context }: LocalAssetDrop) => {
         const node = context.tree.get(value)!
         return !!getNode(node, context.tree, isVideo)
       },

packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectView.tsx

@@ -30,7 +30,7 @@ interface ModalState {
 
 export const ROOT = 'File System'
 
-export const DRAG_N_DROP_ASSET_KEY = 'project-asset'
+export const DRAG_N_DROP_ASSET_KEY = 'local-asset'
 
 export type TreeNode = Omit<AssetNode, 'children'> & { children?: string[]; matches?: string[] }
 

packages/@dcl/inspector/src/components/ProjectAssetExplorer/types.ts

@@ -1,5 +1,4 @@
-import { ComponentName } from '@dcl/asset-packs'
-import { CoreComponents } from '../../lib/sdk/components'
+import { AssetData } from '../../lib/logic/catalog'
 
 export interface IAsset {
   src: string
@@ -20,7 +19,7 @@ export interface AssetCellProp {
 export type AssetNodeBase = {
   name: string
   parent: AssetNodeFolder | null
-  components?: Partial<Record<ComponentName | CoreComponents, any>>
+  composite?: AssetData['composite']
 }
 
 export type AssetNodeItem = AssetNodeBase & {

packages/@dcl/inspector/src/components/Renderer/Renderer.tsx

@@ -8,7 +8,7 @@ import { Entity } from '@dcl/ecs'
 import { DIRECTORY, withAssetDir } from '../../lib/data-layer/host/fs-utils'
 import { useAppDispatch, useAppSelector } from '../../redux/hooks'
 import { getReloadAssets, importAsset, saveThumbnail } from '../../redux/data-layer'
-import { getNode, BuilderAsset, DROP_TYPES, IDrop, ProjectAssetDrop, isDropType } from '../../lib/sdk/drag-drop'
+import { getNode, CatalogAssetDrop, DROP_TYPES, IDrop, LocalAssetDrop, isDropType } from '../../lib/sdk/drag-drop'
 import { useRenderer } from '../../hooks/sdk/useRenderer'
 import { useSdk } from '../../hooks/sdk/useSdk'
 import { getPointerCoords } from '../../lib/babylon/decentraland/mouse-utils'
@@ -212,7 +212,7 @@ const Renderer: React.FC = () => {
       position,
       basePath,
       sdk.enumEntity,
-      asset.components,
+      asset.composite,
       asset.asset.id
     )
     await operations.dispatch()
@@ -239,10 +239,10 @@ const Renderer: React.FC = () => {
     canvasRef.current?.focus()
   }
 
-  const importBuilderAsset = async (asset: Asset) => {
+  const importCatalogAsset = async (asset: Asset) => {
     const position = await getDropPosition()
     const fileContent: Record<string, Uint8Array> = {}
-    const destFolder = 'builder'
+    const destFolder = 'asset-packs'
     const assetPackageName = asset.name.trim().replaceAll(' ', '_').toLowerCase()
     const path = Object.keys(asset.contents).find(($) => isAsset($))
     let thumbnail: Uint8Array | undefined
@@ -299,7 +299,7 @@ const Renderer: React.FC = () => {
       name: asset.name,
       parent: null,
       asset: { type: path ? 'gltf' : 'unknown', src: path ?? '', id: asset.id },
-      components: asset.components
+      composite: asset.composite
     }
     const basePath = withAssetDir(`${destFolder}/${assetPackageName}`)
     if (isGround(asset) && !placeSingleTile) {
@@ -320,12 +320,12 @@ const Renderer: React.FC = () => {
         if (monitor.didDrop()) return
         const itemType = monitor.getItemType()
 
-        if (isDropType<BuilderAsset>(item, itemType, 'builder-asset')) {
-          void importBuilderAsset(item.value)
+        if (isDropType<CatalogAssetDrop>(item, itemType, 'catalog-asset')) {
+          void importCatalogAsset(item.value)
           return
         }
 
-        if (isDropType<ProjectAssetDrop>(item, itemType, 'project-asset')) {
+        if (isDropType<LocalAssetDrop>(item, itemType, 'local-asset')) {
           const node = item.context.tree.get(item.value)!
           const model = getNode(node, item.context.tree, isModel)
           if (model) {
@@ -335,7 +335,7 @@ const Renderer: React.FC = () => {
         }
       },
       hover(item, monitor) {
-        if (isDropType<BuilderAsset>(item, monitor.getItemType(), 'builder-asset')) {
+        if (isDropType<CatalogAssetDrop>(item, monitor.getItemType(), 'catalog-asset')) {
           const asset = item.value
           if (isGround(asset)) {
             if (!showSingleTileHint) {

packages/@dcl/inspector/src/components/ui/FileUploadField/FileUploadField.tsx

@@ -8,7 +8,7 @@ import { selectAssetCatalog, selectUploadFile, updateUploadFile } from '../../..
 import { selectAssetsTab } from '../../../redux/ui'
 import { AssetsTab } from '../../../redux/ui/types'
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks'
-import { DropTypesEnum, ProjectAssetDrop, getNode } from '../../../lib/sdk/drag-drop'
+import { DropTypesEnum, LocalAssetDrop, getNode } from '../../../lib/sdk/drag-drop'
 import { EXTENSIONS, withAssetDir } from '../../../lib/data-layer/host/fs-utils'
 
 import { isModel } from '../../EntityInspector/GltfInspector/utils'
@@ -97,8 +97,8 @@ const FileUploadField: React.FC<Props> = ({
 
   const [{ isHover, canDrop }, drop] = useDrop(
     () => ({
-      accept: [DropTypesEnum.ProjectAsset],
-      drop: ({ value, context }: ProjectAssetDrop, monitor) => {
+      accept: [DropTypesEnum.LocalAsset],
+      drop: ({ value, context }: LocalAssetDrop, monitor) => {
         if (monitor.didDrop()) return
         const node = context.tree.get(value)!
         const element = getNode(node, context.tree, isValid)
@@ -109,7 +109,7 @@ const FileUploadField: React.FC<Props> = ({
           setDropError(true)
         }
       },
-      canDrop: ({ value, context }: ProjectAssetDrop) => {
+      canDrop: ({ value, context }: LocalAssetDrop) => {
         const node = context.tree.get(value)!
         return !!getNode(node, context.tree, isValid)
       },

packages/@dcl/inspector/src/lib/logic/catalog.ts

@@ -1,11 +1,13 @@
-import { ComponentName } from '@dcl/asset-packs'
-import * as _catalog from '@dcl/asset-packs/catalog.json'
+import { Catalog, AssetPack, Asset, AssetData } from '@dcl/asset-packs'
 import { CoreComponents } from '../sdk/components'
 import { getConfig } from './config'
+import * as _catalog from '@dcl/asset-packs/catalog.json'
 
-export const catalog = _catalog.assetPacks as unknown as AssetPack[]
+export const catalog = (_catalog as unknown as Catalog).assetPacks
 
-// categories obtained from "builder.decentraland.org" catalog
+export { Catalog, AssetPack, Asset, AssetData }
+
+// categories obtained from "builder-items.decentraland.org" catalog
 export const CATEGORIES = [
   'ground',
   'utils',
@@ -26,22 +28,6 @@ export const CATEGORIES = [
   'health'
 ]
 
-export type AssetPack = {
-  id: string
-  name: string
-  thumbnail: string
-  assets: Asset[]
-}
-
-export type Asset = {
-  id: string
-  name: string
-  category: string
-  tags: string[]
-  contents: Record<string, string>
-  components: Partial<Record<ComponentName | CoreComponents, any>>
-}
-
 export function getContentsUrl(hash: string) {
   const config = getConfig()
   return `${config.contentUrl}/contents/${hash}`
@@ -57,12 +43,12 @@ export function getAssetsByCategory(assets: Asset[]) {
 }
 
 export function isSmart(asset: Partial<Asset>) {
-  const components = Object.keys(asset?.components ?? {})
+  const components = asset?.composite?.components ?? []
   // when the item has more than one component, it is smart
   if (components.length > 1) {
     return true
-    // when the item has a single component but it's not a GltfContainer, then it's also smart (NFTShape, TextShape, MeshRenderers, etc...)
-  } else if (components.length === 1 && components[0] !== CoreComponents.GLTF_CONTAINER) {
+    // when the item has a single component but it's not a GltfContainer, then it's also smart
+  } else if (components.length === 1 && components[0].name !== CoreComponents.GLTF_CONTAINER) {
     return true
   }
   // when the item only has a GltfContainer then it's not smart

packages/@dcl/inspector/src/lib/sdk/drag-drop.spec.ts

@@ -2,9 +2,9 @@ import * as dnd from './drag-drop'
 
 describe('sdk drag and drop', () => {
   it('should return true when identifier equals type', () => {
-    const drop = { value: 'project-asset', context: { tree: new Map() } }
-    expect(dnd.isDropType(drop, 'project-asset', 'project-asset')).toBe(true)
-    expect(dnd.isDropType(drop, 'invalid', 'project-asset')).toBe(false)
+    const drop = { value: 'local-asset', context: { tree: new Map() } }
+    expect(dnd.isDropType(drop, 'local-asset', 'local-asset')).toBe(true)
+    expect(dnd.isDropType(drop, 'invalid', 'local-asset')).toBe(false)
   })
   it('should return all drop types list', () => {
     expect(dnd.DROP_TYPES).toStrictEqual(expect.arrayContaining(Object.values(dnd.DropTypesEnum)))

packages/@dcl/inspector/src/lib/sdk/drag-drop.ts

@@ -8,14 +8,14 @@ interface Drop<T, K = object> {
   context: K
 }
 
-export type ProjectAssetDrop = Drop<string, { tree: Map<string, TreeNode> }>
-export type BuilderAsset = Drop<Asset>
+export type LocalAssetDrop = Drop<string, { tree: Map<string, TreeNode> }>
+export type CatalogAssetDrop = Drop<Asset>
 
-export type IDrop = ProjectAssetDrop | BuilderAsset
+export type IDrop = LocalAssetDrop | CatalogAssetDrop
 
 export enum DropTypesEnum {
-  ProjectAsset = 'project-asset',
-  BuilderAsset = 'builder-asset'
+  LocalAsset = 'local-asset',
+  CatalogAsset = 'catalog-asset'
 }
 
 export type DropTypes = `${DropTypesEnum}`