docs: docs パッケージのソースコードにドキュメントを追加

packages/docs/src/README.md

@@ -0,0 +1,6 @@
+# ディレクトリ構成
+
+- `atoms/`: 単体では特定の意味を表せないコンポーネント
+- `molecules/`: 単体で意味を持ちページ内に自由に配置できるコンポーネント
+- `organisms/`: 単体でページ内の特定の区分を構成できるコンポーネント
+- `pages/`: MDX によるページの定義

packages/docs/src/atoms/badge.tsx

@@ -6,6 +6,9 @@ export interface BadgeProps {
   children: ReactNode;
 }
 
+/**
+ * 文字を入れて使う丸角のバッジ
+ */
 export const Badge = ({ children }: BadgeProps): JSX.Element => {
   return <span className={style.badge}>{children}</span>;
 };

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
 }: {

packages/docs/src/molecules/command-format.tsx

@@ -4,6 +4,9 @@ export interface CommandFormatProps {
   children: string;
 }
 
+/**
+ * コマンドの入力形式を表す等幅フォントのテキスト
+ */
 export const CommandFormat = ({
   children
 }: CommandFormatProps): JSX.Element => (

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 (
     <span className={style.feature}>

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 (
     <span className={style.version}>

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,