コントリビューションとオープンソース

Babelize Elements にコンポーネントを提供する方法です。Issue の作成から pull request の提出まで説明します。

コントリビューション

Babelize Elements はオープンソースでコミュニティ主導のライブラリです。ここで紹介しているコンポーネントは、コントリビューターの皆さまによって作られたものです。次のコンポーネントはあなたが作るかもしれません。

仕組み

Issue を選ぶ — GitHub の Issue を確認し、good first issue または help wanted とマークされたコンポーネントのリクエストを探します。
コンポーネントを作成する — 以下のコンポーネントテンプレートに従って src/registry/components/ に実装します。
pull request を作成する — メンテナーがレビューし、必要に応じて変更を依頼し、マージします。
リリースされます — マージされたコンポーネントはこのサイトに掲載され、すべての Babelize Elements ユーザーが利用できるようになります。

まだ該当するコンポーネントがありませんか？提案用の Issue を作成してください。候補として最適なのは、言語スイッチャー、ロケールピッカー、翻訳ウィジェット、RTL ユーティリティ、複数形のヘルパー、ロケール対応のフォーマッターです。

コンポーネントテンプレート

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { useControllableState } from "@/lib/use-controllable-state";
import type { Locale } from "./types";

export interface LanguageSelectProps extends Omit<
  React.ComponentPropsWithoutRef<"select">,
  "value" | "defaultValue" | "onChange"
> {
  /** Available locales — only `code` is required */
  locales: Locale[];
  /** Selected locale code. Provide this to control the component. */
  value?: string;
  /** Initial locale code when uncontrolled */
  defaultValue?: string;
  /** Fired once per selection */
  onValueChange?: (code: string) => void;
}

export const LanguageSelect = React.forwardRef<HTMLSelectElement, LanguageSelectProps>(
  function LanguageSelect(
    { locales, value, defaultValue, onValueChange, className, ...rest },
    ref,
  ) {
    const [locale, setLocale] = useControllableState(
      value,
      defaultValue ?? locales[0]?.code ?? "",
      onValueChange,
    );

    return (
      <select
        ref={ref}
        value={locale}
        onChange={(e) => setLocale(e.target.value)}
        className={cn(
          "h-10 rounded-md border border-zinc-200 bg-white px-3 text-sm outline-none transition-colors focus:border-emerald-500 dark:border-zinc-800 dark:bg-zinc-900",
          className,
        )}
        {...rest}
      >
        {locales.map((l) => (
          <option key={l.code} value={l.code}>
            {l.label ?? l.code}
          </option>
        ))}
      </select>
    );
  },
);

すべてのコンポーネントが従う4つの規約に注意してください。useControllableState を介した value / defaultValue / onValueChange のセット、転送される ref、ルート要素への ...rest の展開、そして ./types から取得した共有の Locale 型を使用すること（ローカルのコピーは使用しません）。

role="listbox" ポップアップ（言語メニュー、国ピッカーなど）を描画するコンポーネントは、矢印キー、Home / End、Enter、Escape を個別に実装する代わりに、@/lib/use-listbox-navigation の useListboxNavigation を通じてキーボード操作を共有します。2つのフォーカス戦略については、LanguageSwitcher（検索フィールドと aria-activedescendant の組み合わせ）と NavBar（ローミングフォーカス）を参照してください。

コントリビューションのチェックリスト

TypeScript を優先し、すべての props のインターフェースをエクスポートする
ローカライゼーションに対応: 該当する場合はロケールコード、複数形、RTL を処理する
アクセシブル: キーボード対応、ARIA ラベル、フォーカス状態
Tailwind CSS でスタイルされている
ドキュメント用の簡単なデモまたは使用例

ヘルプが必要ですか？

GitHub で Discussion を開くか、Babelize コミュニティに参加してください。みなさん親切です。

コントリビューションとオープンソース