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

サインインブロック

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

🚀 インストール​

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

📖 使用法​

import {SignIn} from '@nodeblocks/frontend-signin-block';
ライブエディター
function BasicSignIn() {
  return (
    <SignIn
      onChange={(setError, getValues, clearErrors) => {
        const values = getValues();
        if (!values.email) {
          setError('email', {message: 'メールアドレスは必須です', type: 'required'});
        } else {
          clearErrors('email');
        }
      }}
      onSubmit={formData => {
        console.log('フォームが送信されました:', formData);
      }}
    >
      <SignIn.SignInTitle>おかえりなさい</SignIn.SignInTitle>
      <SignIn.EmailField label="メールアドレス" placeholder="メールアドレスを入力してください" />
      <SignIn.PasswordField label="パスワード" placeholder="パスワードを入力してください" />
      <SignIn.SignInButton>サインイン</SignIn.SignInButton>
      <SignIn.GotoSignUp>
        <a href="#signup">アカウントを作成</a>
      </SignIn.GotoSignUp>
      <SignIn.ResetPassword>
        <a href="#reset-password">パスワードをお忘れですか？</a>
      </SignIn.ResetPassword>
    </SignIn>
  );
}
結果
Loading...

🔧 プロパティリファレンス​

メインコンポーネントのプロパティ​

プロパティ型デフォルト説明
onSubmitSubmitHandler<T>必須有効なデータでフォームが送信されたときにトリガーされるコールバック関数
onChange(setError, getValues, clearErrors) => void必須フォーム値が変更されたときにトリガーされるコールバック関数。バリデーション用のフォーム制御関数を提供
defaultDataDefaultValues<T>undefined初期レンダリング時にフィールドに設定するデフォルトフォーム値
dataTundefined制御されたフォーム値 - 外部フォーム状態管理に使用
signupUrlstring"/auth/signup"GotoSignUpコンポーネントの登録リンクURL
resetPasswordUrlstring"/auth/resetpassword"パスワードリセットリンクURL
classNamestringundefinedフォームコンテナスタイリング用の追加CSSクラス名
sxSxPropsundefinedカスタムスタイリング用のMUI sxプロパティ
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: このコンポーネントはMUI StackProps<'form'>（children、onChange、onSubmitを除く）を拡張します。component="form"を使用し、デフォルトspacing={4}、maxWidth: 496、px: 5、py: 6、borderRadius: 3です。

サブコンポーネント​

SignInコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

SignIn.SignInTitle​

プロパティ型デフォルト説明
childrenReactNode"Sign In"タイトルコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
variantstring"h4"MUI Typographyバリアント
componentstring"h1"レンダリングするHTML要素
sxSxPropsundefinedデフォルトtextAlign: 'center'を持つMUI sxプロパティ

注意: このコンポーネントはMUI TypographyProps<'h1'> を拡張します。

SignIn.EmailField​

プロパティ型デフォルト説明
namestring"email"フォームデータとバリデーションに使用されるフィールド名
labelstring"Email"入力の上に表示されるフィールドラベル
placeholderstring"Please enter your email"フィールドが空のときに表示されるプレースホルダーテキスト
autoCompletestring"username"ブラウザオートコンプリートヒント
requiredbooleantrueフィールドが必須かどうか
fullWidthbooleantrueフィールドが全幅を占めるかどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextFieldProps を拡張します。エラー状態とヘルパーテキストはreact-hook-formによって自動管理されます。

SignIn.PasswordField​

プロパティ型デフォルト説明
namestring"password"フォームデータとバリデーションに使用されるフィールド名
labelstring"Password"入力の上に表示されるフィールドラベル
placeholderstring"Please enter your password"フィールドが空のときに表示されるプレースホルダーテキスト
autoCompletestring"current-password"ブラウザオートコンプリートヒント
requiredbooleantrueフィールドが必須かどうか
fullWidthbooleantrueフィールドが全幅を占めるかどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI TextFieldProps（typeを除く）を拡張します。Visibility/VisibilityOffアイコンによる組み込みパスワード表示切り替えを含みます。

SignIn.SignInButton​

プロパティ型デフォルト説明
childrenReactNode"Sign In"ボタンテキストコンテンツ
variantstring"contained"MUI Buttonバリアント
sizestring"large"MUI Buttonサイズ
typestring"submit"HTMLボタンタイプ
fullWidthbooleantrueボタンが全幅を占めるかどうか
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI ButtonProps を拡張します。

SignIn.GotoSignUp​

プロパティ型デフォルト説明
signupUrlstringコンテキストから登録リンクURL
childrenReactNode/auth/signupへのリンク登録リンクセクションのコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxPropsundefinedデフォルトtextAlign: 'center'とfontSize: body2を持つMUI sxプロパティ

注意: このコンポーネントはMUI BoxProps を拡張します。

SignIn.ResetPassword​

プロパティ型デフォルト説明
resetPasswordUrlstringコンテキストからパスワードリセットリンクURL
childrenReactNode/auth/resetpasswordへのリンクパスワードリセットリンクセクションのコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名
sxSxPropsundefinedデフォルトtextAlign: 'center'とfontSize: body2を持つMUI sxプロパティ

注意: このコンポーネントはMUI BoxProps を拡張します。

🎨 設定例​

カスタムバリデーション​

function ValidationSignIn() {
  const handleSubmit = (formData: SignInFormData): void => {
    console.log('バリデーション済みフォームが送信されました:', formData);
  };

  return (
    <SignIn
      onChange={(setError, getValues, clearErrors) => {
        const {email, password} = getValues();

        if (email && !email.includes('@')) {
          setError('email', {message: '有効なメールアドレスを入力してください'});
        } else {
          clearErrors('email');
        }

        if (password && password.length < 8) {
          setError('password', {message: 'パスワードは8文字以上である必要があります'});
        } else {
          clearErrors('password');
        }
      }}
      onSubmit={handleSubmit}
    >
      <SignIn.SignInTitle
        variant="h3"
        sx={{
          color: 'primary.main',
          fontWeight: 'bold',
        }}
      >
        おかえりなさい！
      </SignIn.SignInTitle>
      <SignIn.EmailField label="企業メール" placeholder="name@company.com" />
      <SignIn.PasswordField label="アカウントパスワード" placeholder="安全なパスワードを入力してください" />
      <SignIn.SignInButton>サインイン</SignIn.SignInButton>
      <SignIn.GotoSignUp />
      <SignIn.ResetPassword />
    </SignIn>
  );
}

ブロックオーバーライドパターン​

function BlockOverrideSignIn() {
  return (
    <SignIn onSubmit={data => console.log(data)} onChange={() => {}}>
      {({defaultBlocks}) => ({
        blocks: {
          ...defaultBlocks,
          // Add custom welcome message
          welcomeMessage: (
            <div
              style={{
                padding: '12px 16px',
                backgroundColor: '#e3f2fd',
                borderRadius: '8px',
                textAlign: 'center',
                color: '#1976d2',
              }}
            >
              ダッシュボードにアクセスするにはサインインしてください
            </div>
          ),
        },
        blockOrder: [
          'signInTitle',
          'welcomeMessage',
          'emailField',
          'passwordField',
          'signInButton',
          'gotoSignUp',
          'resetPassword',
        ],
      })}
    </SignIn>
  );
}

カスタムナビゲーションURL​

<SignIn
  signupUrl="/register"
  resetPasswordUrl="/forgot-password"
  onSubmit={handleSubmit}
  onChange={handleChange}
/>

🔧 TypeScriptサポート​

包括的な型定義による完全なTypeScriptサポート:

import {SignIn} from '@nodeblocks/frontend-signin-block';
import {
  UseFormClearErrors,
  UseFormGetValues,
  UseFormSetError,
  SubmitHandler,
} from 'react-hook-form';

// Default form data structure
type DefaultSignInFormData = {
  email?: string;
  password?: string;
};

// Extended form data type
type SignInFormData = DefaultSignInFormData & Record<string, unknown>;

// Custom form data with additional fields
interface CustomSignInFormData extends SignInFormData {
  rememberMe?: boolean;
}

function TypedSignInExample() {
  const handleSubmit: SubmitHandler<CustomSignInFormData> = formData => {
    console.log('フォームが送信されました:', formData);
  };

  const handleChange = (
    setError: UseFormSetError<CustomSignInFormData>,
    getValues: UseFormGetValues<CustomSignInFormData>,
    clearErrors: UseFormClearErrors<CustomSignInFormData>,
  ): void => {
    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'}}
      signupUrl="/register"
      resetPasswordUrl="/forgot-password"
      sx={{maxWidth: 480, mx: 'auto'}}
    >
      <SignIn.SignInTitle>おかえりなさい</SignIn.SignInTitle>
      <SignIn.EmailField />
      <SignIn.PasswordField />
      <SignIn.SignInButton>ログイン</SignIn.SignInButton>
      <SignIn.GotoSignUp>
        <span>
          アカウントをお持ちでない方は <a href="#register">サインアップ</a>
        </span>
      </SignIn.GotoSignUp>
      <SignIn.ResetPassword>
        <span>
          <a href="#forgot-password">パスワードをお忘れですか？</a>
        </span>
      </SignIn.ResetPassword>
    </SignIn>
  );
}

📝 注意事項​

  • コンポーネントはcomponent="form"を持つMUIの Stack コンポーネントをベースとして使用
  • デフォルトスペーシングは4、maxWidth: 496、px: 5、py: 6、borderRadius: 3
  • フォーム状態はmode: 'onBlur'でバリデーションを行うreact-hook-formで管理
  • onChangeコールバックはフォーム値が変更されたときにトリガー（useWatchを使用）
  • パスワードフィールドにはMUIのVisibility/VisibilityOffアイコンによる組み込み表示切り替え
  • エラー状態とヘルパーテキストはバリデーションに基づいて自動表示
  • デフォルトブロック: signInTitle、emailField、passwordField、signInButton、resetPassword、gotoSignUp
  • 追加ユーティリティフィールド利用可能: TextField、TimeField、CheckboxField、SelectField
  • CSSクラスはBEMスタイルの命名に従います: nbb-signin、nbb-signin-signin-title、nbb-signin-email-fieldなど
  • デフォルト登録リンクは/auth/signupを指します
  • デフォルトパスワードリセットリンクは/auth/resetpasswordを指します

React、TypeScript、MUIを使用して❤️で構築されました。