サインインブロック

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

---

🚀 インストール

npm install @nodeblocks/frontend-signin-block

---

📖 使用方法

import {SignIn} from '@nodeblocks/frontend-signin-block';

基本的な使用方法

ライブエディター

function BasicSignIn() {
  return (
    <SignIn
      onChange={(setError, getValues, clearErrors) => {
        console.log('フォーム値:', getValues());
        const values = getValues();
        if (!values.email) {
          setError('email', {message: 'メールアドレスは必須です', type: 'required'});
        } else {
          clearErrors('email');
        }
      }}
      onSubmit={formData => {
        console.log('フォームが送信されました:', formData);
      }}
      style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
      <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...

高度な使用方法

ライブエディター

function AdvancedSignIn() {
  return (
    <SignIn
      style={{
        maxWidth: '550px',
        margin: '0 auto',
        borderRadius: '20px',
        border: '1px solid #e2e8f0',
        padding: '40px',
        boxShadow: '0 25px 50px rgba(102, 126, 234, 0.3)',
      }}
      onChange={(setError, getValues, clearErrors) => {
        const values = getValues();
        if (!values.email) {
          setError('email', {message: 'メールアドレスが必要です', type: 'required'});
        } else {
          clearErrors('email');
        }
        if (!values.password) {
          setError('password', {message: 'パスワードが必要です', type: 'required'});
        } else {
          clearErrors('password');
        }
      }}
      onSubmit={formData => {
        console.log('ログイン:', formData);
      }}
    >
      {({defaultBlocks, defaultBlockOrder}) => {
        return {
          blocks: {
            ...defaultBlocks,
            signInTitle: {
              ...defaultBlocks.signInTitle,
              props: {
                ...defaultBlocks.signInTitle.props,
                style: {
                  color: 'white',
                  fontSize: '2.5rem',
                  fontWeight: 'bold',
                  textAlign: 'center',
                  marginBottom: '8px',
                  textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)',
                },
                children: (
                  <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '12px'}}>
                    <svg style={{width: '36px', height: '36px'}} fill="currentColor" viewBox="0 0 24 24">
                      <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 4L13 5.3V3.07C13 3.03 13 3 13 3H11C11 3 11 3.03 11 3.07V5.3L9 4L3 7V9H5C5.6 9 6 9.4 6 10V16C6 16.6 6.4 17 7 17H10V19H14V17H17C17.6 17 18 16.6 18 16V10C18 9.4 18.4 9 19 9H21Z" />
                    </svg>
                    <span>企業ログイン</span>
                  </div>
                ),
              },
            },
            emailField: {
              ...defaultBlocks.emailField,
              props: {
                ...defaultBlocks.emailField.props,
                label: 'メールアドレス',
                placeholder: '例: user@company.com',
                style: {
                  background: 'rgba(255, 255, 255, 0.95)',
                  borderRadius: '12px',
                  fontSize: '16px',
                },
              },
            },
            passwordField: {
              ...defaultBlocks.passwordField,
              props: {
                ...defaultBlocks.passwordField.props,
                label: 'パスワード',
                placeholder: 'パスワードを入力してください',
                style: {
                  background: 'rgba(255, 255, 255, 0.95)',
                  borderRadius: '12px',
                  fontSize: '16px',
                },
              },
            },
            signInButton: {
              ...defaultBlocks.signInButton,
              props: {
                ...defaultBlocks.signInButton.props,
                children: (
                  <div>ログイン</div>
                ),
              },
            },
            gotoSignUp: {
              ...defaultBlocks.gotoSignUp,
              props: {
                ...defaultBlocks.gotoSignUp.props,
                style: {
                  textAlign: 'center',
                },
                children: (
                  <div style={{color: 'black', fontSize: '14px'}}>
                    <span>アカウントをお持ちでない方は </span>
                    <a 
                      href="#signup" 
                      style={{
                        color: 'rgb(105, 124, 213)',
                        textDecoration: 'none',
                        fontWeight: 'bold',
                      }}
                    >
                      新規登録
                    </a>
                  </div>
                ),
              },
            },
            resetPassword: {
              ...defaultBlocks.resetPassword,
              props: {
                ...defaultBlocks.resetPassword.props,
                style: {
                  textAlign: 'center',
                },
                children: (
                  <div style={{color: 'black', fontSize: '14px'}}>
                    <a 
                      href="#reset-password" 
                      style={{
                        color: 'rgb(105, 124, 213)',
                        textDecoration: 'none',
                      }}
                    >
                      パスワードをお忘れですか？
                    </a>
                  </div>
                ),
              },
            },
          },
          blockOrder: defaultBlockOrder,
        };
      }}
    </SignIn>
  );
}

結果

Loading...

---

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

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

プロパティ	型	デフォルト	説明
onSubmit	SubmitHandler<T>	必須	有効なデータでフォームが送信されたときにトリガーされるコールバック関数
onChange	(setError, getValues, clearErrors) => void	必須	フォーム値が変更されたときにトリガーされるコールバック関数。バリデーション用のフォーム制御関数を提供
defaultData	DefaultValues<T>	undefined	初期レンダリング時にフィールドに設定するデフォルトフォーム値
data	T	undefined	制御されたフォーム値 - 外部フォーム状態管理に使用
children	BlocksOverride	undefined	デフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント
className	string	undefined	フォームコンテナスタイリング用の追加CSSクラス名

注意: このコンポーネントは追加で一般的なHTML form 要素プロパティを継承します。

サブコンポーネント

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

SignIn.SignInTitle

プロパティ	型	デフォルト	説明
children	ReactNode	"Sign In to App"	タイトルコンテンツ
size	enum	"2XL"	タイトルのタイポグラフィサイズ
type	enum	"heading"	タイポグラフィタイプ
color	enum	"low-emphasis"	タイトルのカラーテーマ
weight	enum	"bold"	タイトルの太さ
className	string	undefined	スタイリング用の追加CSSクラス名

SignIn.EmailField

プロパティ	型	デフォルト	説明
name	string	"email"	フォームデータとバリデーションに使用されるフィールド名
label	string	"Email"	入力の上に表示されるフィールドラベル
placeholder	string	"Please enter your email"	フィールドが空のときに表示されるプレースホルダーテキスト
inputType	string	"email"	入力タイプ - 通常「email」または「text」
isRequired	boolean	true	フィールドが必須かどうか（赤いアスタリスクを表示）
isDisabled	boolean	undefined	入力が無効かどうか
errorText	string	undefined	入力のエラーテキスト
className	string	undefined	スタイリング用の追加CSSクラス名

注意: このコンポーネントは追加で一般的なHTML input 要素プロパティを継承します。

SignIn.PasswordField

プロパティ	型	デフォルト	説明
name	string	"password"	フォームデータとバリデーションに使用されるフィールド名
label	string	"Password"	入力の上に表示されるフィールドラベル
placeholder	string	"Please enter your password"	フィールドが空のときに表示されるプレースホルダーテキスト
inputType	string	"password"	入力タイプ - 通常「password」または「text」
isRequired	boolean	true	フィールドが必須かどうか（赤いアスタリスクを表示）
isDisabled	boolean	undefined	入力が無効かどうか
errorText	string	undefined	入力のエラーテキスト
className	string	undefined	スタイリング用の追加CSSクラス名

注意: このコンポーネントは追加で一般的なHTML input 要素プロパティを継承します。

SignIn.SignInButton

プロパティ	型	デフォルト	説明
children	ReactNode	"Login"	ボタンテキストコンテンツ
className	string	undefined	スタイリング用の追加CSSクラス名
fill	enum	"fill"	ボタンフィルスタイル
icon	enum	undefined	ボタン左側のオプションアイコン
iconColor	enum	undefined	左側アイコンの色。提供されない場合、フィルタイプのデフォルト色が使用されます。
isDisabled	boolean	false	ボタンが無効で使用できないかどうか
onClick	function	undefined	ボタンクリックを処理する関数
size	enum	"M"	ボタンの縦サイズ
textAlign	enum	"center"	ボタン内でのアイコンとテキストの位置
textColor	enum	"default"	ボタンテキストの色
textEmphasis	boolean	false	ボタンテキストの太さ
textSize	enum	"M"	ボタンテキストのサイズ
type	enum	"submit"	ボタンの目的（htmlタイプに影響）

SignIn.GotoSignUp

プロパティ	型	デフォルト	説明
children	ReactNode	デフォルト登録リンク	登録リンクセクションのコンテンツ - 通常アンカータグを含む
className	string	undefined	スタイリング用の追加CSSクラス名

SignIn.ResetPassword

プロパティ	型	デフォルト	説明
children	ReactNode	デフォルトリセットリンク	パスワードリセットリンクセクションのコンテンツ - 通常アンカータグを含む
className	string	undefined	スタイリング用の追加CSSクラス名

---

🔧 TypeScript サポート

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

import {SignIn} from '@nodeblocks/frontend-signin-block';
//将来的にはreact-hook-formを使用せず、独自のフォーム処理を使用します
import {UseFormClearErrors, UseFormGetValues, UseFormSetError} from 'react-hook-form';

// デフォルトフォームデータ構造
interface DefaultSignInFormData extends Record<string, unknown> {
  email?: string;
  password?: string;
}

// カスタムフィールドで拡張
interface CustomSignInFormData extends DefaultSignInFormData {
  rememberMe?: boolean;
  customField?: string;
}

const MySignInForm = () => {
  const handleSubmit = (formData: CustomSignInFormData) => {
    console.log('フォームが送信されました:', formData);
    // フォーム送信を処理
  };

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

    // カスタムバリデーション
    if (values.email && !values.email.includes('@')) {
      setError('email', {message: '無効なメールアドレス形式です'});
    } else {
      clearErrors('email');
    }
  };

  return (
    <SignIn<CustomSignInFormData>
      onSubmit={handleSubmit}
      onChange={handleChange}
      defaultData={{email: 'user@example.com'}}>
      <SignIn.SignInTitle>おかえりなさい</SignIn.SignInTitle>
      <SignIn.EmailField />
      <SignIn.PasswordField />
      <SignIn.SignInButton>ログイン</SignIn.SignInButton>
      <SignIn.GotoSignUp>
        <span>
          アカウントをお持ちでない方は <a href="/signup">サインアップ</a>
        </span>
      </SignIn.GotoSignUp>
      <SignIn.ResetPassword>
        <span>
          <a href="/reset-password">パスワードをお忘れですか？</a>
        </span>
      </SignIn.ResetPassword>
    </SignIn>
  );
};

---

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