Merge pull request #10262 from weseek/support/156162-170473-app-callout-comment-templates-features-biome

support: Configure biome for app callout/comment/templates features

apps/app/.eslintrc.js

@@ -30,6 +30,9 @@ module.exports = {
     'config/**',
     'src/linter-checker/**',
     'src/migrations/**',
+    'src/features/callout/**',
+    'src/features/comment/**',
+    'src/features/templates/**',
   ],
   settings: {
     // resolve path aliases by eslint-import-resolver-typescript

apps/app/src/features/callout/components/CalloutViewer.tsx

@@ -1,9 +1,9 @@
 // Ref: https://github.com/Microflash/remark-callout-directives/blob/fabe4d8adc7738469f253836f0da346591ea2a2b/README.md
 
-import type { ReactNode, JSX } from 'react';
+import type { JSX, ReactNode } from 'react';
 import React from 'react';
 
-import { type Callout } from '../services/consts';
+import type { Callout } from '../services/consts';
 
 import styles from './CalloutViewer.module.scss';
 
@@ -11,7 +11,7 @@ const moduleClass = styles['callout-viewer'];
 
 type CALLOUT_TO = {
   [key in Callout]: string;
-}
+};
 
 const CALLOUT_TO_TYPE: CALLOUT_TO = {
   note: 'Note',
@@ -34,38 +34,39 @@ const CALLOUT_TO_ICON: CALLOUT_TO = {
 };
 
 type CalloutViewerProps = {
-  children: ReactNode,
-  node: Element,
-  type: string,
-  label?: string,
-}
-
-export const CalloutViewer = React.memo((props: CalloutViewerProps): JSX.Element => {
+  children: ReactNode;
+  node: Element;
+  type: string;
+  label?: string;
+};
 
-  const {
-    node, type, label, children,
-  } = props;
+export const CalloutViewer = React.memo(
+  (props: CalloutViewerProps): JSX.Element => {
+    const { node, type, label, children } = props;
 
-  if (node == null) {
-    return <></>;
-  }
+    if (node == null) {
+      return <></>;
+    }
 
-  return (
-    <div className={`${moduleClass} callout-viewer`}>
-      <div className={`callout callout-${CALLOUT_TO_TYPE[type].toLowerCase()}`}>
-        <div className="callout-indicator">
-          <div className="callout-hint">
-            <span className="material-symbols-outlined">{CALLOUT_TO_ICON[type]}</span>
+    return (
+      <div className={`${moduleClass} callout-viewer`}>
+        <div
+          className={`callout callout-${CALLOUT_TO_TYPE[type].toLowerCase()}`}
+        >
+          <div className="callout-indicator">
+            <div className="callout-hint">
+              <span className="material-symbols-outlined">
+                {CALLOUT_TO_ICON[type]}
+              </span>
+            </div>
+            <div className="callout-title">
+              {label ?? CALLOUT_TO_TYPE[type]}
+            </div>
           </div>
-          <div className="callout-title">
-            {label ?? CALLOUT_TO_TYPE[type]}
-          </div>
-        </div>
-        <div className="callout-content">
-          {children}
+          <div className="callout-content">{children}</div>
         </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 CalloutViewer.displayName = 'CalloutViewer';

apps/app/src/features/callout/services/callout.spec.ts

@@ -3,7 +3,7 @@ import remarkDirective from 'remark-directive';
 import remarkParse from 'remark-parse';
 import { unified } from 'unified';
 import { visit } from 'unist-util-visit';
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import * as callout from './callout';
 
@@ -23,7 +23,7 @@ This is an info callout.
     const tree = processor.parse(markdown);
     processor.runSync(tree);
 
-    let calloutNode;
+    let calloutNode: ContainerDirective | undefined;
     visit(tree, 'containerDirective', (node) => {
       calloutNode = node;
     });
@@ -41,7 +41,9 @@ This is an info callout.
     assert('value' in calloutNode.children[0].children[0]);
 
     expect(calloutNode.children.length).toBe(1);
-    expect(calloutNode.children[0].children[0].value).toBe('This is an info callout.');
+    expect(calloutNode.children[0].children[0].value).toBe(
+      'This is an info callout.',
+    );
   });
 
   it('should transform containerDirective to callout with custom label', () => {
@@ -77,7 +79,9 @@ This is an info callout.
     assert('value' in calloutNode.children[0].children[0]);
 
     expect(calloutNode.children.length).toBe(1);
-    expect(calloutNode.children[0].children[0].value).toBe('This is an info callout.');
+    expect(calloutNode.children[0].children[0].value).toBe(
+      'This is an info callout.',
+    );
   });
 
   it('should transform containerDirective to callout with empty label', () => {
@@ -113,6 +117,8 @@ This is an info callout.
     assert('value' in calloutNode.children[0].children[0]);
 
     expect(calloutNode.children.length).toBe(1);
-    expect(calloutNode.children[0].children[0].value).toBe('This is an info callout.');
+    expect(calloutNode.children[0].children[0].value).toBe(
+      'This is an info callout.',
+    );
   });
 });

apps/app/src/features/callout/services/callout.ts

@@ -8,19 +8,31 @@ import { AllCallout } from './consts';
 export const remarkPlugin: Plugin = () => {
   return (tree) => {
     visit(tree, 'containerDirective', (node: ContainerDirective) => {
-      if (AllCallout.some(name => name === node.name.toLowerCase())) {
+      if (AllCallout.some((name) => name === node.name.toLowerCase())) {
         const type = node.name.toLowerCase();
-        const data = node.data ?? (node.data = {});
+        if (node.data == null) {
+          node.data = {};
+        }
+        const data = node.data;
 
         // extract directive label
-        const paragraphs = (node.children ?? []).filter((child): child is Paragraph => child.type === 'paragraph');
-        const paragraphForDirectiveLabel = paragraphs.find(p => p.data?.directiveLabel);
-        const label = paragraphForDirectiveLabel != null && paragraphForDirectiveLabel.children.length > 0
-          ? (paragraphForDirectiveLabel.children[0] as Text).value
-          : undefined;
+        const paragraphs = (node.children ?? []).filter(
+          (child): child is Paragraph => child.type === 'paragraph',
+        );
+        const paragraphForDirectiveLabel = paragraphs.find(
+          (p) => p.data?.directiveLabel,
+        );
+        const label =
+          paragraphForDirectiveLabel != null &&
+          paragraphForDirectiveLabel.children.length > 0
+            ? (paragraphForDirectiveLabel.children[0] as Text).value
+            : undefined;
         // remove directive label from children
         if (paragraphForDirectiveLabel != null) {
-          node.children.splice(node.children.indexOf(paragraphForDirectiveLabel), 1);
+          node.children.splice(
+            node.children.indexOf(paragraphForDirectiveLabel),
+            1,
+          );
         }
 
         data.hName = 'callout';
@@ -28,7 +40,6 @@ export const remarkPlugin: Plugin = () => {
           type,
           label,
         };
-
       }
     });
   };

apps/app/src/features/callout/services/consts.ts

@@ -1,5 +1,13 @@
 // Ref: https://github.com/Microflash/remark-callout-directives/blob/fabe4d8adc7738469f253836f0da346591ea2a2b/themes/github/index.js
 // Ref: https://github.com/orgs/community/discussions/16925
 
-export const AllCallout = ['note', 'tip', 'important', 'info', 'warning', 'danger', 'caution'] as const;
-export type Callout = typeof AllCallout[number];
+export const AllCallout = [
+  'note',
+  'tip',
+  'important',
+  'info',
+  'warning',
+  'danger',
+  'caution',
+] as const;
+export type Callout = (typeof AllCallout)[number];

apps/app/src/features/callout/services/index.ts

@@ -1 +1 @@
-export { sanitizeOption, remarkPlugin } from './callout';
+export { remarkPlugin, sanitizeOption } from './callout';

apps/app/src/features/comment/server/events/consts.ts

@@ -3,4 +3,4 @@ export const CommentEvent = {
   UPDATE: 'update',
   DELETE: 'delete',
 } as const;
-export type CommentEvent = typeof CommentEvent[keyof typeof CommentEvent];
+export type CommentEvent = (typeof CommentEvent)[keyof typeof CommentEvent];

apps/app/src/features/comment/server/models/comment.ts

@@ -1,7 +1,5 @@
 import type { IUser } from '@growi/core/dist/interfaces';
-import type {
-  Types, Document, Model, Query,
-} from 'mongoose';
+import type { Document, Model, Query, Types } from 'mongoose';
 import { Schema } from 'mongoose';
 
 import type { IComment } from '~/interfaces/comment';
@@ -11,11 +9,10 @@ import loggerFactory from '~/utils/logger';
 const logger = loggerFactory('growi:models:comment');
 
 export interface CommentDocument extends IComment, Document {
-  removeWithReplies: () => Promise<void>
-  findCreatorsByPage: (pageId: Types.ObjectId) => Promise<CommentDocument[]>
+  removeWithReplies: () => Promise<void>;
+  findCreatorsByPage: (pageId: Types.ObjectId) => Promise<CommentDocument[]>;
 }
 
-
 type Add = (
   pageId: Types.ObjectId,
   creatorId: Types.ObjectId,
@@ -24,38 +21,45 @@ type Add = (
   commentPosition: number,
   replyTo?: Types.ObjectId | null,
 ) => Promise<CommentDocument>;
-type FindCommentsByPageId = (pageId: Types.ObjectId) => Query<CommentDocument[], CommentDocument>;
-type FindCommentsByRevisionId = (revisionId: Types.ObjectId) => Query<CommentDocument[], CommentDocument>;
-type FindCreatorsByPage = (pageId: Types.ObjectId) => Promise<IUser[]>
-type CountCommentByPageId = (pageId: Types.ObjectId) => Promise<number>
+type FindCommentsByPageId = (
+  pageId: Types.ObjectId,
+) => Query<CommentDocument[], CommentDocument>;
+type FindCommentsByRevisionId = (
+  revisionId: Types.ObjectId,
+) => Query<CommentDocument[], CommentDocument>;
+type FindCreatorsByPage = (pageId: Types.ObjectId) => Promise<IUser[]>;
+type CountCommentByPageId = (pageId: Types.ObjectId) => Promise<number>;
 
 export interface CommentModel extends Model<CommentDocument> {
-  add: Add
-  findCommentsByPageId: FindCommentsByPageId
-  findCommentsByRevisionId: FindCommentsByRevisionId
-  findCreatorsByPage: FindCreatorsByPage
-  countCommentByPageId: CountCommentByPageId
+  add: Add;
+  findCommentsByPageId: FindCommentsByPageId;
+  findCommentsByRevisionId: FindCommentsByRevisionId;
+  findCreatorsByPage: FindCreatorsByPage;
+  countCommentByPageId: CountCommentByPageId;
 }
 
-const commentSchema = new Schema<CommentDocument, CommentModel>({
-  page: { type: Schema.Types.ObjectId, ref: 'Page', index: true },
-  creator: { type: Schema.Types.ObjectId, ref: 'User', index: true },
-  revision: { type: Schema.Types.ObjectId, ref: 'Revision', index: true },
-  comment: { type: String, required: true },
-  commentPosition: { type: Number, default: -1 },
-  replyTo: { type: Schema.Types.ObjectId },
-}, {
-  timestamps: true,
-});
+const commentSchema = new Schema<CommentDocument, CommentModel>(
+  {
+    page: { type: Schema.Types.ObjectId, ref: 'Page', index: true },
+    creator: { type: Schema.Types.ObjectId, ref: 'User', index: true },
+    revision: { type: Schema.Types.ObjectId, ref: 'Revision', index: true },
+    comment: { type: String, required: true },
+    commentPosition: { type: Number, default: -1 },
+    replyTo: { type: Schema.Types.ObjectId },
+  },
+  {
+    timestamps: true,
+  },
+);
 
-const add: Add = async function(
-    this: CommentModel,
-    pageId,
-    creatorId,
-    revisionId,
-    comment,
-    commentPosition,
-    replyTo?,
+const add: Add = async function (
+  this: CommentModel,
+  pageId,
+  creatorId,
+  revisionId,
+  comment,
+  commentPosition,
+  replyTo?,
 ): Promise<CommentDocument> {
   try {
     const data = await this.create({
@@ -69,35 +73,36 @@ const add: Add = async function(
     logger.debug('Comment saved.', data);
 
     return data;
-  }
-  catch (err) {
+  } catch (err) {
     logger.debug('Error on saving comment.', err);
     throw err;
   }
 };
 commentSchema.statics.add = add;
 
-commentSchema.statics.findCommentsByPageId = function(id) {
+commentSchema.statics.findCommentsByPageId = function (id) {
   return this.find({ page: id }).sort({ createdAt: -1 });
 };
 
-commentSchema.statics.findCommentsByRevisionId = function(id) {
+commentSchema.statics.findCommentsByRevisionId = function (id) {
   return this.find({ revision: id }).sort({ createdAt: -1 });
 };
 
-commentSchema.statics.findCreatorsByPage = async function(page) {
+commentSchema.statics.findCreatorsByPage = async function (page) {
   return this.distinct('creator', { page }).exec();
 };
 
-commentSchema.statics.countCommentByPageId = async function(page) {
+commentSchema.statics.countCommentByPageId = async function (page) {
   return this.count({ page });
 };
 
-commentSchema.statics.removeWithReplies = async function(comment) {
+commentSchema.statics.removeWithReplies = async function (comment) {
   await this.deleteMany({
-    $or:
-      [{ replyTo: comment._id }, { _id: comment._id }],
+    $or: [{ replyTo: comment._id }, { _id: comment._id }],
   });
 };
 
-export const Comment = getOrCreateModel<CommentDocument, CommentModel>('Comment', commentSchema);
+export const Comment = getOrCreateModel<CommentDocument, CommentModel>(
+  'Comment',
+  commentSchema,
+);

apps/app/src/features/templates/server/routes/apiv3/index.ts

@@ -1,14 +1,15 @@
-import path from 'path';
-
 import { GrowiPluginType } from '@growi/core';
+import { SCOPE } from '@growi/core/dist/interfaces';
 import type { TemplateSummary } from '@growi/pluginkit/dist/v4';
-import { scanAllTemplates, getMarkdown } from '@growi/pluginkit/dist/v4/server/index.cjs';
+import {
+  getMarkdown,
+  scanAllTemplates,
+} from '@growi/pluginkit/dist/v4/server/index.cjs';
 import express from 'express';
 import { param, query } from 'express-validator';
-
+import path from 'path';
 import { PLUGIN_STORING_PATH } from '~/features/growi-plugin/server/consts';
 import { GrowiPlugin } from '~/features/growi-plugin/server/models';
-import { SCOPE } from '@growi/core/dist/interfaces';
 import type Crowi from '~/server/crowi';
 import { accessTokenParser } from '~/server/middlewares/access-token-parser';
 import { apiV3FormValidator } from '~/server/middlewares/apiv3-form-validator';
@@ -21,22 +22,17 @@ const logger = loggerFactory('growi:routes:apiv3:templates');
 const router = express.Router();
 
 const validator = {
-  list: [
-    query('includeInvalidTemplates').optional().isBoolean(),
-  ],
-  get: [
-    param('templateId').isString(),
-    param('locale').isString(),
-  ],
+  list: [query('includeInvalidTemplates').optional().isBoolean()],
+  get: [param('templateId').isString(), param('locale').isString()],
 };
 
-
 // cache object
 let presetTemplateSummaries: TemplateSummary[];
 
-
 module.exports = (crowi: Crowi) => {
-  const loginRequiredStrictly = require('~/server/middlewares/login-required')(crowi);
+  const loginRequiredStrictly = require('~/server/middlewares/login-required')(
+    crowi,
+  );
 
   /**
    * @swagger
@@ -79,41 +75,52 @@ module.exports = (crowi: Crowi) => {
    *                       title:
    *                         type: string
    */
-  router.get('/', accessTokenParser([SCOPE.READ.FEATURES.PAGE]), loginRequiredStrictly, validator.list, apiV3FormValidator, async(req, res: ApiV3Response) => {
-    const { includeInvalidTemplates } = req.query;
-
-    // scan preset templates
-    if (presetTemplateSummaries == null) {
-      const presetTemplatesRoot = resolveFromRoot('node_modules/@growi/preset-templates');
+  router.get(
+    '/',
+    accessTokenParser([SCOPE.READ.FEATURES.PAGE]),
+    loginRequiredStrictly,
+    validator.list,
+    apiV3FormValidator,
+    async (req, res: ApiV3Response) => {
+      const { includeInvalidTemplates } = req.query;
+
+      // scan preset templates
+      if (presetTemplateSummaries == null) {
+        const presetTemplatesRoot = resolveFromRoot(
+          'node_modules/@growi/preset-templates',
+        );
+
+        try {
+          presetTemplateSummaries = await scanAllTemplates(
+            presetTemplatesRoot,
+            {
+              returnsInvalidTemplates: includeInvalidTemplates,
+            },
+          );
+        } catch (err) {
+          logger.error(err);
+          presetTemplateSummaries = [];
+        }
+      }
 
+      // load plugin templates
+      let pluginsTemplateSummaries: TemplateSummary[] = [];
       try {
-        presetTemplateSummaries = await scanAllTemplates(presetTemplatesRoot, {
-          returnsInvalidTemplates: includeInvalidTemplates,
-        });
-      }
-      catch (err) {
+        const plugins = await GrowiPlugin.findEnabledPluginsByType(
+          GrowiPluginType.Template,
+        );
+        pluginsTemplateSummaries = plugins.flatMap(
+          (p) => p.meta.templateSummaries,
+        );
+      } catch (err) {
         logger.error(err);
-        presetTemplateSummaries = [];
       }
-    }
-
-    // load plugin templates
-    let pluginsTemplateSummaries: TemplateSummary[] = [];
-    try {
-      const plugins = await GrowiPlugin.findEnabledPluginsByType(GrowiPluginType.Template);
-      pluginsTemplateSummaries = plugins.flatMap(p => p.meta.templateSummaries);
-    }
-    catch (err) {
-      logger.error(err);
-    }
-
-    return res.apiv3({
-      summaries: [
-        ...presetTemplateSummaries,
-        ...pluginsTemplateSummaries,
-      ],
-    });
-  });
+
+      return res.apiv3({
+        summaries: [...presetTemplateSummaries, ...pluginsTemplateSummaries],
+      });
+    },
+  );
 
   /**
    * @swagger
@@ -149,23 +156,31 @@ module.exports = (crowi: Crowi) => {
    *                 markdown:
    *                   type: string
    */
-  router.get('/preset-templates/:templateId/:locale', accessTokenParser([SCOPE.READ.FEATURES.PAGE]), loginRequiredStrictly,
-    validator.get, apiV3FormValidator,
-    async(req, res: ApiV3Response) => {
-      const {
-        templateId, locale,
-      } = req.params;
-
-      const presetTemplatesRoot = resolveFromRoot('node_modules/@growi/preset-templates');
+  router.get(
+    '/preset-templates/:templateId/:locale',
+    accessTokenParser([SCOPE.READ.FEATURES.PAGE]),
+    loginRequiredStrictly,
+    validator.get,
+    apiV3FormValidator,
+    async (req, res: ApiV3Response) => {
+      const { templateId, locale } = req.params;
+
+      const presetTemplatesRoot = resolveFromRoot(
+        'node_modules/@growi/preset-templates',
+      );
 
       try {
-        const markdown = await getMarkdown(presetTemplatesRoot, templateId, locale);
+        const markdown = await getMarkdown(
+          presetTemplatesRoot,
+          templateId,
+          locale,
+        );
         return res.apiv3({ markdown });
-      }
-      catch (err) {
+      } catch (err) {
         res.apiv3Err(err);
       }
-    });
+    },
+  );
 
   /**
    * @swagger
@@ -213,24 +228,28 @@ module.exports = (crowi: Crowi) => {
    *                 markdown:
    *                   type: string
    */
-  router.get('/plugin-templates/:organizationId/:reposId/:templateId/:locale', accessTokenParser([SCOPE.READ.FEATURES.PAGE]),
-    loginRequiredStrictly, validator.get, apiV3FormValidator, async(
-        req, res: ApiV3Response,
-    ) => {
-      const {
-        organizationId, reposId, templateId, locale,
-      } = req.params;
-
-      const pluginRoot = path.join(PLUGIN_STORING_PATH, `${organizationId}/${reposId}`);
+  router.get(
+    '/plugin-templates/:organizationId/:reposId/:templateId/:locale',
+    accessTokenParser([SCOPE.READ.FEATURES.PAGE]),
+    loginRequiredStrictly,
+    validator.get,
+    apiV3FormValidator,
+    async (req, res: ApiV3Response) => {
+      const { organizationId, reposId, templateId, locale } = req.params;
+
+      const pluginRoot = path.join(
+        PLUGIN_STORING_PATH,
+        `${organizationId}/${reposId}`,
+      );
 
       try {
         const markdown = await getMarkdown(pluginRoot, templateId, locale);
         return res.apiv3({ markdown });
-      }
-      catch (err) {
+      } catch (err) {
         res.apiv3Err(err);
       }
-    });
+    },
+  );
 
   return router;
 };

apps/app/src/features/templates/stores/template.tsx

@@ -1,17 +1,24 @@
-import { getLocalizedTemplate, type TemplateSummary } from '@growi/pluginkit/dist/v4';
+import {
+  getLocalizedTemplate,
+  type TemplateSummary,
+} from '@growi/pluginkit/dist/v4';
 import type { SWRResponse } from 'swr';
 import useSWRImmutable from 'swr/immutable';
 
 import { apiv3Get } from '~/client/util/apiv3-client';
 
 export const useSWRxTemplates = (): SWRResponse<TemplateSummary[], Error> => {
-  return useSWRImmutable(
-    '/templates',
-    endpoint => apiv3Get<{ summaries: TemplateSummary[] }>(endpoint).then(res => res.data.summaries),
+  return useSWRImmutable('/templates', (endpoint) =>
+    apiv3Get<{ summaries: TemplateSummary[] }>(endpoint).then(
+      (res) => res.data.summaries,
+    ),
   );
 };
 
-export const useSWRxTemplate = (summary: TemplateSummary | undefined, locale?: string): SWRResponse<string, Error> => {
+export const useSWRxTemplate = (
+  summary: TemplateSummary | undefined,
+  locale?: string,
+): SWRResponse<string, Error> => {
   const pluginId = summary?.default.pluginId;
   const targetTemplate = getLocalizedTemplate(summary, locale);
 
@@ -25,6 +32,7 @@ export const useSWRxTemplate = (summary: TemplateSummary | undefined, locale?: s
         ? `/templates/preset-templates/${targetTemplate.id}/${targetTemplate.locale}`
         : `/templates/plugin-templates/${pluginId}/${targetTemplate.id}/${targetTemplate.locale}`;
     },
-    endpoint => apiv3Get<{ markdown: string }>(endpoint).then(res => res.data.markdown),
+    (endpoint) =>
+      apiv3Get<{ markdown: string }>(endpoint).then((res) => res.data.markdown),
   );
 };

biome.json

@@ -27,7 +27,15 @@
       "!apps/app/public/**",
       "!apps/app/src/client/**",
       "!apps/app/src/components/**",
-      "!apps/app/src/features/**",
+      "!apps/app/src/features/external-user-group/**",
+      "!apps/app/src/features/growi-plugin/**",
+      "!apps/app/src/features/mermaid/**",
+      "!apps/app/src/features/openai/**",
+      "!apps/app/src/features/opentelemetry/**",
+      "!apps/app/src/features/page-bulk-export/**",
+      "!apps/app/src/features/plantuml/**",
+      "!apps/app/src/features/rate-limiter/**",
+      "!apps/app/src/features/search/**",
       "!apps/app/src/interfaces/**",
       "!apps/app/src/models/**",
       "!apps/app/src/pages/**",