Просмотр исходного кода

configure biome for callout feature

Futa Arai 7 месяцев назад
Родитель
Сommit
e085be0524

+ 32 - 31
apps/app/src/features/callout/components/CalloutViewer.tsx

@@ -1,9 +1,9 @@
 // Ref: https://github.com/Microflash/remark-callout-directives/blob/fabe4d8adc7738469f253836f0da346591ea2a2b/README.md
 // 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 React from 'react';
 
 
-import { type Callout } from '../services/consts';
+import type { Callout } from '../services/consts';
 
 
 import styles from './CalloutViewer.module.scss';
 import styles from './CalloutViewer.module.scss';
 
 
@@ -11,7 +11,7 @@ const moduleClass = styles['callout-viewer'];
 
 
 type CALLOUT_TO = {
 type CALLOUT_TO = {
   [key in Callout]: string;
   [key in Callout]: string;
-}
+};
 
 
 const CALLOUT_TO_TYPE: CALLOUT_TO = {
 const CALLOUT_TO_TYPE: CALLOUT_TO = {
   note: 'Note',
   note: 'Note',
@@ -34,38 +34,39 @@ const CALLOUT_TO_ICON: CALLOUT_TO = {
 };
 };
 
 
 type CalloutViewerProps = {
 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>
-          <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>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 CalloutViewer.displayName = 'CalloutViewer';
 CalloutViewer.displayName = 'CalloutViewer';

+ 10 - 4
apps/app/src/features/callout/services/callout.spec.ts

@@ -3,7 +3,7 @@ import remarkDirective from 'remark-directive';
 import remarkParse from 'remark-parse';
 import remarkParse from 'remark-parse';
 import { unified } from 'unified';
 import { unified } from 'unified';
 import { visit } from 'unist-util-visit';
 import { visit } from 'unist-util-visit';
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 
 import * as callout from './callout';
 import * as callout from './callout';
 
 
@@ -41,7 +41,9 @@ This is an info callout.
     assert('value' in calloutNode.children[0].children[0]);
     assert('value' in calloutNode.children[0].children[0]);
 
 
     expect(calloutNode.children.length).toBe(1);
     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', () => {
   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]);
     assert('value' in calloutNode.children[0].children[0]);
 
 
     expect(calloutNode.children.length).toBe(1);
     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', () => {
   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]);
     assert('value' in calloutNode.children[0].children[0]);
 
 
     expect(calloutNode.children.length).toBe(1);
     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.',
+    );
   });
   });
 });
 });

+ 16 - 8
apps/app/src/features/callout/services/callout.ts

@@ -8,19 +8,28 @@ import { AllCallout } from './consts';
 export const remarkPlugin: Plugin = () => {
 export const remarkPlugin: Plugin = () => {
   return (tree) => {
   return (tree) => {
     visit(tree, 'containerDirective', (node: ContainerDirective) => {
     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 type = node.name.toLowerCase();
         const data = node.data ?? (node.data = {});
         const data = node.data ?? (node.data = {});
 
 
         // extract directive label
         // 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
         // remove directive label from children
         if (paragraphForDirectiveLabel != null) {
         if (paragraphForDirectiveLabel != null) {
-          node.children.splice(node.children.indexOf(paragraphForDirectiveLabel), 1);
+          node.children.splice(
+            node.children.indexOf(paragraphForDirectiveLabel),
+            1,
+          );
         }
         }
 
 
         data.hName = 'callout';
         data.hName = 'callout';
@@ -28,7 +37,6 @@ export const remarkPlugin: Plugin = () => {
           type,
           type,
           label,
           label,
         };
         };
-
       }
       }
     });
     });
   };
   };

+ 10 - 2
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/Microflash/remark-callout-directives/blob/fabe4d8adc7738469f253836f0da346591ea2a2b/themes/github/index.js
 // Ref: https://github.com/orgs/community/discussions/16925
 // 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];

+ 1 - 1
apps/app/src/features/callout/services/index.ts

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

+ 11 - 1
biome.json

@@ -27,7 +27,17 @@
       "!apps/app/public/**",
       "!apps/app/public/**",
       "!apps/app/src/client/**",
       "!apps/app/src/client/**",
       "!apps/app/src/components/**",
       "!apps/app/src/components/**",
-      "!apps/app/src/features/**",
+      "!apps/app/src/features/comment/**",
+      "!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/features/templates/**",
       "!apps/app/src/interfaces/**",
       "!apps/app/src/interfaces/**",
       "!apps/app/src/models/**",
       "!apps/app/src/models/**",
       "!apps/app/src/pages/**",
       "!apps/app/src/pages/**",