feat: brings new lib in order to do the nested component soon

package.json

@@ -14,15 +14,15 @@
         "typecheck": "tsc"
     },
     "dependencies": {
-        "@crystallize/import-export-sdk": "^0.1.5",
-        "@crystallize/js-api-client": "^2.5.0",
-        "@crystallize/reactjs-components": "^2.0.2",
-        "@crystallize/schema": "^0.3.0",
-        "@remix-run/node": "^2.9.2",
-        "@remix-run/react": "^2.9.2",
-        "@remix-run/serve": "^2.9.2",
-        "isbot": "^5.1.6",
-        "jose": "^5.3.0",
+        "@crystallize/import-export-sdk": "^1.0.3",
+        "@crystallize/js-api-client": "^3.0.0",
+        "@crystallize/reactjs-components": "^2.1.0",
+        "@crystallize/schema": "^1.0.0",
+        "@remix-run/node": "^2.10.2",
+        "@remix-run/react": "^2.10.2",
+        "@remix-run/serve": "^2.10.2",
+        "isbot": "^5.1.12",
+        "jose": "^5.6.3",
         "json-to-graphql-query": "^2.2.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -31,31 +31,31 @@
         "zod": "^3.23.8"
     },
     "devDependencies": {
-        "@remix-run/dev": "^2.9.2",
+        "@remix-run/dev": "^2.10.2",
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.13",
-        "@types/react": "^18.3.2",
+        "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
-        "@typescript-eslint/eslint-plugin": "^7.9.0",
-        "@typescript-eslint/parser": "^7.9.0",
+        "@typescript-eslint/eslint-plugin": "^7.16.0",
+        "@typescript-eslint/parser": "^7.16.0",
         "autoprefixer": "^10.4.19",
         "eslint": "^8.57.0",
         "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-jsx-a11y": "^6.8.0",
-        "eslint-plugin-react": "^7.34.1",
+        "eslint-plugin-jsx-a11y": "^6.9.0",
+        "eslint-plugin-react": "^7.34.4",
         "eslint-plugin-react-hooks": "^4.6.2",
         "postcss-import": "^16.1.0",
-        "prettier": "^3.2.5",
-        "tailwindcss": "^3.4.3",
-        "typescript": "^5.4.5",
-        "vite": "^5.2.11",
+        "prettier": "^3.3.3",
+        "tailwindcss": "^3.4.4",
+        "typescript": "^5.5.3",
+        "vite": "^5.3.2",
         "vite-tsconfig-paths": "^4.3.2"
     },
     "engines": {
         "node": ">=20.11.1"
     },
-    "packageManager": "pnpm@9.1.1",
+    "packageManager": "pnpm@9.5.0",
     "volta": {
         "node": "20.11.1"
     }

src/domain/contracts/input/fetch-items-input.ts

@@ -5,6 +5,6 @@ export const FetchItemsInputSchema = z.object({
     shape: z.string().min(1),
     folders: z.array(z.string().min(1)).min(1),
     topics: z.array(z.string().min(1)),
-    components: z.array(z.string().min(1)).min(1),
+    components: z.array(z.array(z.string().min(1)).min(1)).min(1),
 });
 export type FetchItemsInput = z.infer<typeof FetchItemsInputSchema>;

src/domain/use-cases/retrieve-filter-list-for-frontend.server.ts

@@ -86,10 +86,10 @@ const reduceComponents = (
     },
 ) => {
     const memo: SelectOption[] = [];
-    const extendedAllowedComponentTypes = [...allowedComponentTypes, 'contentChunk', 'componentChoice']; //@todo: add Pieces
+    const extendedAllowedComponentTypes = [...allowedComponentTypes, 'contentChunk', 'componentChoice', 'piece'];
     components.forEach((component) => {
         if (!extendedAllowedComponentTypes.includes(component.type)) {
-            return memo;
+            return;
         }
         if (component.type === 'contentChunk') {
             // we don't manage repeatable chunk
@@ -117,12 +117,21 @@ const reduceComponents = (
             }
             return;
         }
-        //@todo: add Pieces: needs to update schema lib and import/export
-        // merging this: https://github.com/CrystallizeAPI/libraries/pull/235
 
+        if (component.type === 'piece') {
+            const config = component.config;
+            if (config && 'components' in config) {
+                const pieceComponents = reduceComponents(config.components ?? [], {
+                    identifier: component.id,
+                    name: component.name,
+                });
+                memo.push(...pieceComponents);
+            }
+            return;
+        }
         memo.push({
-            value: `${applyPrefix(component.id, '.', prefix?.identifier)}`,
-            label: `${applyPrefix(component.name, '.', prefix?.name)}`,
+            value: `${applyPrefix(component.id, '|<>|', prefix?.identifier)}`,
+            label: `${applyPrefix(component.name, ' > ', prefix?.name)}`,
         });
     });
     return memo;

src/domain/use-cases/run-import.server.ts

@@ -1,4 +1,6 @@
 import { EventEmitter } from 'events';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- WIP
+import { Operation, Operations, OperationsSchema } from '@crystallize/schema';
 
 type Deps = {
     emitter: EventEmitter;
@@ -12,19 +14,38 @@ export const runImport = async (
     }[],
     { emitter }: Deps,
 ) => {
+    const operations: Operation[] = [];
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- WIP
+    for (const item of items) {
+        operations.push({
+            concern: 'item',
+            action: 'updateComponent',
+            language: 'en',
+            component: {
+                componentId: 'title',
+                singleLine: {
+                    text: 'Hello world',
+                },
+            },
+        });
+        await new Promise((resolve) => setTimeout(resolve, 3000));
+    }
+
     emitter.emit(importId, {
         event: 'started',
         message: `Import ${importId} has started.`,
     });
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- WIP
+    const massOperations = OperationsSchema.parse({
+        version: '0.0.1',
+        operations,
+    });
+
+    // emitter.emit(importId, {
+    //     event: 'item-updated',
+    //     message: `Item ${item.id} updated.`,
+    // });
 
-    //@todo: Implement the actual import logic here
-    for (const item of items) {
-        await new Promise((resolve) => setTimeout(resolve, 3000));
-        emitter.emit(importId, {
-            event: 'item-updated',
-            message: `Item ${item.id} updated.`,
-        });
-    }
     emitter.emit(importId, {
         event: 'ended',
         message: `Import ${importId} has ended.`,

src/infrastructure/actions/index-page-action.server.ts

@@ -19,7 +19,10 @@ export const indexPageAction = async (formData: FormData, { api, emitter }: Deps
             shape: formData.get('shape') || undefined,
             folders: formData.getAll('folders').filter(Boolean),
             topics: formData.getAll('topics').filter(Boolean),
-            components: formData.getAll('components').filter(Boolean),
+            components: formData
+                .getAll('components')
+                .filter(Boolean)
+                .map((c) => `${c}`.split('|<>|')),
         };
         return await executeForm(
             async (values) => {

src/infrastructure/crystallize/create-crystallize-api.server.ts

@@ -16,7 +16,7 @@ export const CrystallizeAPI = async (request: Request) => {
         fetchFolders: (language: string) => fetchFolders(language, { apiClient }),
         fetchTopics: (language: string) => fetchTopics(language, { apiClient }),
         fetchLanguages: () => fetchLanguages({ apiClient }),
-        fetchDescendants: async (folderIds: string[], language: string, components: string[]) =>
+        fetchDescendants: async (folderIds: string[], language: string, components: string[][]) =>
             fetchDescendants(folderIds, language, components, { browser: catalogueBrowser }),
     };
 };

src/infrastructure/crystallize/fetch-descendants.server.ts

@@ -34,7 +34,7 @@ const allowedComponentTypes = [
 export const fetchDescendants = async (
     folderIds: string[],
     language: string,
-    componentIds: string[],
+    componentIds: string[][],
     { browser }: Deps,
 ) => {
     const list = [];
@@ -53,12 +53,11 @@ export const fetchDescendants = async (
                 },
                 ...(componentIds.length > 0 &&
                     componentIds.reduce((memo: Record<string, unknown>, componentId) => {
-                        // const parts = componentId.split('.');
-                        //@todo: manage nested components here
-                        memo[componentId] = {
+                        const main = componentId[0];
+                        memo[main] = {
                             __aliasFor: 'component',
                             __args: {
-                                id: componentId,
+                                id: main,
                             },
                             componentId: true,
                             type: true,
@@ -83,6 +82,15 @@ export const fetchDescendants = async (
                                             },
                                         },
                                     },
+                                    {
+                                        __typeName: 'PieceComponentContent',
+                                        components: {
+                                            componentId: true,
+                                            content: {
+                                                __on: allowedComponentTypes,
+                                            },
+                                        },
+                                    },
                                 ],
                             },
                         };

src/infrastructure/crystallize/fetch-shapes.server.ts

@@ -1,5 +1,4 @@
 import { ClientInterface } from '@crystallize/js-api-client';
-import { getManyShapesQuery } from '@crystallize/import-export-sdk';
 import { Shape } from '@crystallize/schema';
 
 type Deps = {
@@ -10,6 +9,33 @@ export const fetchShapes = async ({ apiClient }: Deps): Promise<Shape[]> => {
     if (!apiClient.config.tenantId) {
         throw new Error('tenantId not set on the ClientInterface.');
     }
-    const getManyShapes = getManyShapesQuery({ tenantId: apiClient.config.tenantId }, { includeComponents: true });
-    return await apiClient.pimApi(getManyShapes.query, getManyShapes.variables).then((res) => res?.shape?.getMany);
+    const query = `query {
+        shapes(first: 100) {
+            edges {
+                node {
+                    identifier
+                    name
+                    type
+                    resolvedConfiguration
+                }
+            }
+        }
+    }`;
+    return await apiClient.nextPimApi(query).then((res) =>
+        res?.shapes?.edges.map(
+            (edge: {
+                node: {
+                    identifier: string;
+                    name: string;
+                    type: string;
+                    resolvedConfiguration: object;
+                };
+            }) => ({
+                identifier: edge.node.identifier,
+                name: edge.node.name,
+                type: edge.node.type,
+                ...edge.node.resolvedConfiguration,
+            }),
+        ),
+    );
 };

src/routes/_index.tsx

@@ -96,12 +96,14 @@ const ItemListForm = () => {
         return null;
     }
     const shape = 'shape' in actionData.values ? actionData.values.shape : undefined;
-    const selectedComponents = ('components' in actionData.values ? actionData.values.components : []) as string[];
+
+    const selectedComponents = ('components' in actionData.values ? actionData.values.components : []) as string[][];
     if (!shape) {
         return null;
     }
+
     const components = filterList.componentsMap[shape as keyof typeof filterList.componentsMap].filter((component) =>
-        selectedComponents.includes(component.value),
+        selectedComponents.map((c) => c.join('|<>|')).includes(component.value),
     );
 
     return (

src/ui/styles/components/shape-component-renderer.tsx

@@ -10,7 +10,11 @@ type ShapeComponentRendererProps = {
     itemId: string;
 };
 export const ShapeComponentRenderer = ({ component, itemId }: ShapeComponentRendererProps) => {
-    const getConfig = (component: Component) => {
+    const getConfig = (component?: Component) => {
+        if (!component) {
+            return null;
+        }
+
         if (component.type === 'richText') {
             return {
                 component: <RichTextView json={component.content.json} />,