Merge pull request #234 from codex-team/feat/descriptions-and-covers

feat: add desciptions and covers

.architecture.eslintrc

@@ -241,6 +241,7 @@
             "from": ["Page", "Component", "Layout"],
             "allow": [
               "Component",
+              "Layout",
               "Application Service",
               "Entity",
               "Utils",

codex-ui/dev/pages/components/Card.vue

@@ -16,7 +16,7 @@
     orientation="horizontal"
     src="https://via.placeholder.com/150"
   >
-    <Button icon="Plus"/>
+    <Button icon="Plus" />
   </Card>
 
   <Heading :level="2">
@@ -29,7 +29,7 @@
     orientation="vertical"
     src="https://via.placeholder.com/150"
   >
-    <Button icon="Plus"/>
+    <Button icon="Plus" />
   </Card>
 </template>
 

codex-ui/src/styles/dimensions.pcss

@@ -23,6 +23,7 @@
    * Layout
    */
   --layout-content-width: 700px;
+  --layout-block-width: 300px;
 
   /**
    * Height of the line between list items

codex-ui/src/vue/components/card/Card.vue

@@ -12,6 +12,7 @@
 
     <div :class="$style['card__body']">
       <div
+        v-if="title"
         :class="['text-ui-base-bold', 'line-clamp-1 ', $style['card__title']]"
         :title="title"
       >
@@ -35,7 +36,7 @@ withDefaults(
     /**
      * Card title
      */
-    title: string;
+    title?: string;
 
     /**
      * Card variety.
@@ -56,6 +57,7 @@ withDefaults(
     src?: string;
   }>(),
   {
+    title: '',
     subtitle: '',
     orientation: 'vertical',
     src: '',
@@ -100,6 +102,10 @@ withDefaults(
     width: var(--card-width);
   }
 
+  &__body {
+    flex-grow: 1;
+  }
+
   &__cover {
     flex-shrink: 0;
     width: 100%;

src/App.vue

@@ -1,13 +1,10 @@
 <template>
   <Header />
-  <Layout>
-    <router-view />
-  </Layout>
+  <router-view />
 </template>
 
 <script lang="ts" setup>
 import Header from '@/presentation/components/header/Header.vue';
-import Layout from '@/presentation/layouts/Layout.vue';
 import { onErrorCaptured } from 'vue';
 import { useTheme } from 'codex-ui/vue';
 

src/application/i18n/messages/en.json

@@ -94,9 +94,13 @@
   "marketplace": {
     "title": "Marketplace",
     "listOfTools": "Tools",
+    "subtitle": "Achieve any goal on your page",
     "uninstallTool": "Uninstall",
     "installTool": "Install",
     "addTool": "Add Tool",
+    "userPerspective": "User perspective",
+    "technicalDetails": "Technical details",
+    "selectFile": "Select file",
     "newTool": {
       "title": {
         "placeholder": "Payment Widget",
@@ -109,18 +113,27 @@
         "caption":"Will be used as a block type in saved data"
 
       },
+      "picture": {
+        "label": "Picture",
+        "description": "A cool descriptive screenshot of the Tool's UI"
+      },
       "exportName": {
         "placeholder": "PaymentTool",
         "label": "Export Name",
         "caption":"Global (window) variable that the tool exports in its UMD script"
 
       },
       "cdn": {
-        "placeholder": "https://cdn.jsdelivr.net/npm/@editorjs/payment@2.3.0/dist/payment.umd.min.js",
+        "placeholder": "https:\/\/cdn.jsdelivr.net\/npm\/{'@'}editorjs/payment{'@'}2.3.0\/dist\/payment.umd.min.js",
         "label": "CDN",
         "caption":"Direct link to the tool’s UMD bundle"
 
       },
+      "description": {
+        "placeholder": "Add a payment button using Stripe",
+        "label": "Description",
+        "caption": "Will be visible in tools list"
+      },
       "add": "Add tool"
     }
   },

src/application/router/routes.ts

@@ -4,9 +4,10 @@ import Landing from '@/presentation/pages/Landing.vue';
 import Settings from '@/presentation/pages/Settings.vue';
 import NoteSettings from '@/presentation/pages/NoteSettings.vue';
 import ErrorPage from '@/presentation/pages/Error.vue';
-import Marketplace from '@/presentation/pages/marketplace/Marketplace.vue';
 import type { RouteRecordRaw } from 'vue-router';
 import AddTool from '@/presentation/pages/marketplace/AddTool.vue';
+import MarketplacePage from '@/presentation/pages/marketplace/MarketplacePage.vue';
+import MarketplaceTools from '@/presentation/pages/marketplace/MarketplaceTools.vue';
 
 // Default production hostname for homepage. If different, then custom hostname used
 const websiteHostname = import.meta.env.VITE_PRODUCTION_HOSTNAME;
@@ -89,20 +90,31 @@ const routes: RouteRecordRaw[] = [
     },
   },
   {
-    path: `/marketplace`,
-    component: Marketplace,
+    name: 'marketplacePage',
+    path: `/`,
+    component: MarketplacePage,
+    redirect: '/marketplace',
     meta: {
       pageTitleI18n: 'pages.marketplace',
     },
-  },
-  {
-    name: 'newTool',
-    path: `/marketplace/add`,
-    component: AddTool,
-    meta: {
-      pageTitleI18n: 'pages.addTool',
+    children: [{
+      name: 'marketplace',
+      path: 'marketplace',
+      component: MarketplaceTools,
+      meta: {
+        pageTitleI18n: 'pages.marketplace',
+      },
     },
+    {
+      name: 'marketplaceAddTool',
+      path: `marketplace/add`,
+      component: AddTool,
+      meta: {
+        pageTitleI18n: 'pages.addTool',
+      },
+    }],
   },
+
   /**
    * 404 page
    */

src/application/services/useLayout.ts

@@ -1,6 +1,6 @@
 import { shallowRef, type ShallowRef, type Component, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import Default from '@/presentation/layouts/Default.vue';
+import Default from '@/presentation/layouts/ThreeColsLayout.vue';
 import Fullpage from '@/presentation/layouts/Fullpage.vue';
 
 /**

src/domain/entities/EditorTool.ts

@@ -35,6 +35,16 @@ export default interface EditorTool {
    */
   isDefault?: boolean;
 
+  /**
+   * Description of the tool
+   */
+  description?: string;
+
+  /**
+   * S3 key of the tool cover image
+   */
+  cover?: string;
+
   /**
    * Source of the tool to get it's code
    */
@@ -59,7 +69,9 @@ export interface EditorToolWithUserBinding extends EditorTool {
 /**
  * Tool creation attributes
  */
-export type NewToolData = Omit<EditorTool, 'userId' | 'id'>;
+export type NewToolData = Omit<EditorTool, 'userId' | 'id' | 'cover'> & {
+  cover?: File;
+};
 
 /**
  * Editor tool data structure

src/infrastructure/auth.repository.ts

@@ -36,12 +36,14 @@ export default class AuthRepository implements AuthRepositoryInterface {
    */
   public async restoreSession(): Promise<AuthSession> {
     return this.transport.post<AuthSession>(
-      '/auth',
       {
-        token: this.authStorage.getRefreshToken(),
-      },
-      {
-        skipAuthCheck: true,
+        endpoint: '/auth',
+        data: {
+          token: this.authStorage.getRefreshToken(),
+        },
+        params: {
+          skipAuthCheck: true,
+        },
       }
     );
   }

src/infrastructure/marketplace.repository.ts

@@ -2,6 +2,7 @@ import type MarketplaceRepositoryInterface from '@/domain/marketplace.repository
 import type NotesApiTransport from './transport/notes-api';
 import type EditorTool from '@/domain/entities/EditorTool';
 import type { NewToolData } from '@/domain/entities/EditorTool';
+import type { FilesDto } from './transport/types/FileDto';
 
 /**
  * Facade for the marketplace data
@@ -37,7 +38,26 @@ export default class MarketplaceRepository implements MarketplaceRepositoryInter
    * @param tool - tool data
    */
   public async addTool(tool: NewToolData): Promise<EditorTool> {
-    const res = await this.transport.post<{ data: EditorTool }>('/editor-tools/add-tool', tool);
+    let cover: FilesDto | undefined = undefined;
+
+    if (tool.cover !== undefined) {
+      cover = [{
+        key: 'cover',
+        file: tool.cover,
+      }];
+    }
+
+    const res = await this.transport.post<{ data: EditorTool }>({
+      endpoint: '/editor-tools/add-tool',
+      data: {
+        name: tool.name,
+        title: tool.title,
+        exportName: tool.exportName,
+        description: tool.description,
+        source: tool.source,
+      },
+      files: cover,
+    });
 
     return res.data;
   }

src/infrastructure/note.repository.ts

@@ -6,6 +6,7 @@ import type NotesApiTransport from '@/infrastructure/transport/notes-api';
 import type { GetNoteResponsePayload } from '@/infrastructure/transport/notes-api/types/GetNoteResponsePayload';
 import type { NoteList } from '@/domain/entities/NoteList';
 import type { NoteDTO } from '@/domain/entities/NoteDTO';
+import type JSONValue from './transport/types/JSONValue';
 
 /**
  * Note repository
@@ -73,10 +74,13 @@ export default class NoteRepository implements NoteRepositoryInterface {
    * @todo API should return Note
    */
   public async createNote(content: NoteContent, noteTools: NoteTool[], parentId?: NoteId): Promise<Note> {
-    const response = await this.transport.post<{ id: NoteId }>('/note', {
-      content,
-      tools: noteTools,
-      parentId,
+    const response = await this.transport.post<{ id: NoteId }>({
+      endpoint: '/note',
+      data: {
+        tools: noteTools,
+        parentId,
+        content: content as unknown as JSONValue,
+      },
     });
 
     const note: Note = {
@@ -114,8 +118,11 @@ export default class NoteRepository implements NoteRepositoryInterface {
    * @param parentNoteId - New parent note id
    */
   public async setParent(id: NoteId, parentNoteId: NoteId): Promise<Note> {
-    const response = await this.transport.post<{ parentNote: Note }>(`/note/${id}/relation`, {
-      parentNoteId,
+    const response = await this.transport.post<{ parentNote: Note }>({
+      endpoint: `/note/${id}/relation`,
+      data: {
+        parentNoteId,
+      },
     });
 
     return response.parentNote;

src/infrastructure/noteAttachmentUploader.repository.ts

@@ -27,16 +27,19 @@ export default class NoteAttachmentUploaderRepository implements NoteAttachmentU
    * @returns key, by which we can load it from api
    */
   public async upload(noteId: Note['id'], fileData: Blob): Promise<string> {
-    const form = new FormData();
-
     /**
      * Generate filename for form data
      */
     const fileName = generateHash();
 
-    form.set('file', fileData, fileName);
-
-    const res = await this.transport.post<{ key: string }>(`/upload/${noteId}`, form);
+    const res = await this.transport.post<{ key: string }>({
+      endpoint: `/upload/${noteId}`,
+      files: [{
+        key: 'file',
+        blob: fileData,
+        fileName,
+      }],
+    });
 
     return res.key;
   }

src/infrastructure/transport/authorizable.transport.ts

@@ -1,6 +1,7 @@
 import Transport from '@/infrastructure/transport';
 import type { FetchTransportOptions } from './fetch.transport';
 import type JSONValue from './types/JSONValue';
+import type { POSTParamsAuthorizable } from './types/POSTParams';
 
 /**
  * Additional options for authorizable transport
@@ -94,14 +95,21 @@ export default class AuthorizableTransport extends Transport {
 
   /**
    * Make POST request to update some resource
-   * @param endpoint - API endpoint
-   * @param payload - JSON or form POST data body
-   * @param params - Additional params to tune request
+   * @param params - API endpoint, payload, files and authorization params
    */
-  public async post(endpoint: string, payload?: JSONValue | FormData, params?: AuthorizableRequestParams): Promise<JSONValue> {
+  public async post({
+    endpoint,
+    payload,
+    params,
+    files,
+  }: POSTParamsAuthorizable): Promise<JSONValue> {
     await this.waitForAuth(params);
 
-    return super.post(endpoint, payload);
+    return super.post({
+      endpoint,
+      payload,
+      files,
+    });
   }
 
   /**