diff --git a/packages/docs/src/README.md b/packages/docs/src/README.md
new file mode 100644
index 00000000..f2d58d54
--- /dev/null
+++ b/packages/docs/src/README.md
@@ -0,0 +1,6 @@
+# ディレクトリ構成
+
+- `atoms/`: 単体では特定の意味を表せないコンポーネント
+- `molecules/`: 単体で意味を持ちページ内に自由に配置できるコンポーネント
+- `organisms/`: 単体でページ内の特定の区分を構成できるコンポーネント
+- `pages/`: MDX によるページの定義
diff --git a/packages/docs/src/atoms/badge.tsx b/packages/docs/src/atoms/badge.tsx
index f8197717..ffa6966a 100644
--- a/packages/docs/src/atoms/badge.tsx
+++ b/packages/docs/src/atoms/badge.tsx
@@ -6,6 +6,9 @@ export interface BadgeProps {
children: ReactNode;
}
+/**
+ * 文字を入れて使う丸角のバッジ
+ */
export const Badge = ({ children }: BadgeProps): JSX.Element => {
return {children};
};
diff --git a/packages/docs/src/molecules/command-arg-list.tsx b/packages/docs/src/molecules/command-arg-list.tsx
index d76fab0b..29ab1aa5 100644
--- a/packages/docs/src/molecules/command-arg-list.tsx
+++ b/packages/docs/src/molecules/command-arg-list.tsx
@@ -3,10 +3,25 @@ import { ReactNode } from 'react';
import style from './command-arg-list.module.css';
import { VersionBadge } from './version-badge';
+/**
+ * コマンド引数の定義
+ */
export interface CommandArg {
+ /**
+ * 引数名
+ */
name: string;
+ /**
+ * 説明に用いる要素
+ */
about: ReactNode;
+ /**
+ * その引数がはじめて利用可能になったバージョン
+ */
versionAvailableFrom?: string;
+ /**
+ * その引数が未指定だったときの既定値
+ */
defaultValue?: ReactNode;
}
@@ -35,6 +50,9 @@ const CommandArgListItem = ({
>
);
+/**
+ * コマンド引数リスト
+ */
export const CommandArgList = ({
args
}: {
diff --git a/packages/docs/src/molecules/command-format.tsx b/packages/docs/src/molecules/command-format.tsx
index e037dc58..1aaff2ea 100644
--- a/packages/docs/src/molecules/command-format.tsx
+++ b/packages/docs/src/molecules/command-format.tsx
@@ -4,6 +4,9 @@ export interface CommandFormatProps {
children: string;
}
+/**
+ * コマンドの入力形式を表す等幅フォントのテキスト
+ */
export const CommandFormat = ({
children
}: CommandFormatProps): JSX.Element => (
diff --git a/packages/docs/src/molecules/feature-badge.tsx b/packages/docs/src/molecules/feature-badge.tsx
index 5124ed8d..85803de6 100644
--- a/packages/docs/src/molecules/feature-badge.tsx
+++ b/packages/docs/src/molecules/feature-badge.tsx
@@ -7,6 +7,9 @@ export interface FeatureProps {
children: React.ReactNode;
}
+/**
+ * 特定の feature の有効化が必要であることを表す水色のバッジ
+ */
export const FeatureBadge = ({ children }: FeatureProps): JSX.Element => {
return (
diff --git a/packages/docs/src/molecules/version-badge.tsx b/packages/docs/src/molecules/version-badge.tsx
index eb3fa3ca..180a60a0 100644
--- a/packages/docs/src/molecules/version-badge.tsx
+++ b/packages/docs/src/molecules/version-badge.tsx
@@ -7,6 +7,9 @@ export interface VersionProps {
children: React.ReactNode;
}
+/**
+ * OreOreBot2 の特定のバージョンを表す緑色のバッジ
+ */
export const VersionBadge = ({ children }: VersionProps): JSX.Element => {
return (
diff --git a/packages/docs/src/organisms/command-args.tsx b/packages/docs/src/organisms/command-args.tsx
index 4f5a471a..a851a745 100644
--- a/packages/docs/src/organisms/command-args.tsx
+++ b/packages/docs/src/organisms/command-args.tsx
@@ -4,12 +4,31 @@ import { CommandArg, CommandArgList } from '../molecules/command-arg-list';
import { CommandFormat } from '../molecules/command-format';
import { VersionBadge } from '../molecules/version-badge';
+/**
+ * コマンドを説明するための情報の定義
+ */
export interface CommandArgsProps {
+ /**
+ * コマンドがはじめて利用可能になったバージョン
+ */
versionAvailableFrom: string;
+ /**
+ * コマンド名
+ */
commandName: string;
+ /**
+ * コマンドの引数の定義
+ */
args?: readonly CommandArg[];
}
+/**
+ * コマンドを入力する時の形式の文字列を構築します。
+ *
+ * @param commandName - コマンド名
+ * @param args - 引数の定義
+ * @returns コマンドの入力形式
+ */
export const buildCommandFormat = (
commandName: string,
args?: readonly CommandArg[]
@@ -28,6 +47,9 @@ export const buildCommandFormat = (
return formatted;
};
+/**
+ * コマンドとその引数の説明の章節
+ */
export const CommandArgs = ({
versionAvailableFrom,
commandName,