メインコンテンツまでスキップ

サインインブロック

SignIn コンポーネント は、React と TypeScript で構築された、完全にカスタマイズ可能でアクセシブルなサインインフォームです。モダンなデザインパターン、フォーム検証、柔軟なカスタマイズオプションを備えた、完全な認証インターフェースを提供します。

🚀 インストール​

npm install @nodeblocks/frontend-signin-block@0.2.2

📖 使用方法​

import {SignIn} from '@nodeblocks/frontend-signin-block';
function BasicSignIn() {
  return (
    <SignIn
      onChange={(setError, getValues, clearErrors) => {
        console.log('Form values:', getValues());
        const values = getValues();
        if (!values.email) {
          setError('email', {message: 'Email is required', type: 'required'});
        } else {
          clearErrors('email');
        }
      }}
      onSubmit={formData => {
        console.log('Form submitted:', formData);
      }}
      style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
      <SignIn.SignInTitle>Welcome Back</SignIn.SignInTitle>
      <SignIn.EmailField label="Email Address" placeholder="Enter your email" />
      <SignIn.PasswordField label="Password" placeholder="Enter your password" />
      <SignIn.SignInButton>Sign In</SignIn.SignInButton>
      <SignIn.GotoSignUp>
        <a href="#signup">Create an account</a>
      </SignIn.GotoSignUp>
      <SignIn.ResetPassword>
        <a href="#reset-password">Forgot password?</a>
      </SignIn.ResetPassword>
    </SignIn>
  );
}

🔧 Props リファレンス​

メインコンポーネントの props​

プロパティ型デフォルト説明
onSubmitSubmitHandler<T>Required有効なデータでフォームが送信されたときに呼び出されるコールバック関数
onChange(setError, getValues, clearErrors) => voidRequiredフォーム値が変更されたときに呼び出されるコールバック関数。検証用のフォーム制御関数を提供します
defaultDataDefaultValues<T>undefined初回レンダリング時にフィールドへ設定するデフォルトのフォーム値
dataTundefined制御されたフォーム値。外部フォーム state 管理に使用します
childrenBlocksOverrideundefinedデフォルトレンダリングを上書きするカスタムブロックコンポーネント
classNamestringundefinedフォームコンテナのスタイル用追加 CSS クラス名

Note: このコンポーネントは、一般的な HTML form 要素の props も追加で継承します。

サブコンポーネント​

SignIn コンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、props を通じてそれらを上書きできます。

SignIn.SignInTitle​

プロパティ型デフォルト説明
childrenReactNode"Sign In to App"タイトルコンテンツ
sizeenum"2XL"タイトルの Typography サイズ
typeenum"heading"Typography の type
colorenum"low-emphasis"タイトルのカラーテーマ
weightenum"bold"タイトルの weight
classNamestringundefinedスタイル用の追加 CSS クラス名

SignIn.EmailField​

プロパティ型デフォルト説明
namestring"email"フォーム data と検証に使用されるフィールド名
labelstring"Email"入力の上に表示されるフィールドラベル
placeholderstring"Please enter your email"フィールドが空のときに表示されるプレースホルダーテキスト
inputTypestring"email"入力タイプ。通常は "email" または "text"
isRequiredbooleantrueフィールドが必須かどうか（赤いアスタリスクを表示します）
isDisabledbooleanundefined入力が無効かどうか
errorTextstringundefined入力のエラーテキスト
classNamestringundefinedスタイル用の追加 CSS クラス名

Note: このコンポーネントは、一般的な HTML input 要素の props も追加で継承します。

SignIn.PasswordField​

プロパティ型デフォルト説明
namestring"password"フォーム data と検証に使用されるフィールド名
labelstring"Password"入力の上に表示されるフィールドラベル
placeholderstring"Please enter your password"フィールドが空のときに表示されるプレースホルダーテキスト
inputTypestring"password"入力タイプ。通常は "password" または "text"
isRequiredbooleantrueフィールドが必須かどうか（赤いアスタリスクを表示します）
isDisabledbooleanundefined入力が無効かどうか
errorTextstringundefined入力のエラーテキスト
classNamestringundefinedスタイル用の追加 CSS クラス名

Note: このコンポーネントは、一般的な HTML input 要素の props も追加で継承します。

SignIn.SignInButton​

プロパティ型デフォルト説明
childrenReactNode"Login"ボタンテキストの内容
classNamestringundefinedスタイル用の追加 CSS クラス名
fillenum"fill"ボタンの塗りつぶしスタイル
iconenumundefinedボタン左側の任意のアイコン
iconColorenumundefined左側アイコンの色。指定されない場合は、fill タイプのデフォルト色が使用されます。
isDisabledbooleanfalseボタンが無効で使用できないかどうか
onClickfunctionundefinedボタンクリックを処理する関数
sizeenum"M"ボタンの縦サイズ
textAlignenum"center"ボタン内でのアイコンとテキストの位置
textColorenum"default"ボタンテキストの色
textEmphasisbooleanfalseボタンテキストの太さ
textSizeenum"M"ボタンテキストのサイズ
typeenum"submit"ボタンの用途（HTML type に影響します）

SignIn.GotoSignUp​

プロパティ型デフォルト説明
childrenReactNodeデフォルトのサインアップリンクサインアップリンクセクションの内容。通常はアンカータグを含みます
classNamestringundefinedスタイル用の追加 CSS クラス名

SignIn.ResetPassword​

プロパティ型デフォルト説明
childrenReactNodeデフォルトのリセットリンクパスワードリセットリンクセクションの内容。通常はアンカータグを含みます
classNamestringundefinedスタイル用の追加 CSS クラス名

🔧 TypeScript サポート​

包括的な型定義を備えた完全な TypeScript サポート:

import {SignIn} from '@nodeblocks/frontend-signin-block';
//in future we will not use react-hook-form, we will use our own form handling
import {UseFormClearErrors, UseFormGetValues, UseFormSetError} from 'react-hook-form';

// Default form data structure
interface DefaultSignInFormData extends Record<string, unknown> {
  email?: string;
  password?: string;
}

// Extend with custom fields
interface CustomSignInFormData extends DefaultSignInFormData {
  rememberMe?: boolean;
  customField?: string;
}

const MySignInForm = () => {
  const handleSubmit = (formData: CustomSignInFormData) => {
    console.log('Form submitted:', formData);
    // Handle form submission
  };

  const handleChange = (
    setError: UseFormSetError<CustomSignInFormData>,
    getValues: UseFormGetValues<CustomSignInFormData>,
    clearErrors: UseFormClearErrors<CustomSignInFormData>,
  ) => {
    const values = getValues();

    // Custom validation
    if (values.email && !values.email.includes('@')) {
      setError('email', {message: 'Invalid email format'});
    } else {
      clearErrors('email');
    }
  };

  return (
    <SignIn<CustomSignInFormData>
      onSubmit={handleSubmit}
      onChange={handleChange}
      defaultData={{email: 'user@example.com'}}>
      <SignIn.SignInTitle>Welcome Back</SignIn.SignInTitle>
      <SignIn.EmailField />
      <SignIn.PasswordField />
      <SignIn.SignInButton>Login</SignIn.SignInButton>
      <SignIn.GotoSignUp>
        <span>
          Don't have an account? <a href="#signup">Sign Up</a>
        </span>
      </SignIn.GotoSignUp>
      <SignIn.ResetPassword>
        <span>
          <a href="#reset-password">Forgot password?</a>
        </span>
      </SignIn.ResetPassword>
    </SignIn>
  );
};

React、TypeScript、モダンなウェブ標準を使用して❤️で構築されました。