組織作成ブロック

CreateOrganizationコンポーネントは、React、TypeScript、MUIで構築された完全にカスタマイズ可能でアクセシブルな組織登録フォームです。react-hook-formを使用したフォームバリデーション、マルチセクション組織、柔軟なカスタマイズオプションを備えた完全なビジネス登録インターフェースを提供します。

---

🚀 インストール

npm install @nodeblocks/frontend-create-organization-block@0.2.0

---

📖 使用法

import {CreateOrganization} from '@nodeblocks/frontend-create-organization-block';

基本的な使用法

ライブエディター

function SimpleCreateOrganization() {
  const handleCreateOrganization = (data) => {
    console.log('組織が作成されました:', data);
  };

  return (
    <CreateOrganization
      onCreateOrganization={handleCreateOrganization}
      termsOfUseUrl="#terms"
      privacyAgreementUrl="#privacy"
      sx={{maxWidth: 600, mx: 'auto', p: 3}}
    >
      <CreateOrganization.Title>組織を作成</CreateOrganization.Title>
      <CreateOrganization.Description>
        以下のフォームにご記入いただき、貴社の組織を登録してください
      </CreateOrganization.Description>
      <CreateOrganization.Form>
        <CreateOrganization.Form.AccountHolder>
          <CreateOrganization.Form.AccountHolder.SectionTitle>
            アカウント責任者情報
          </CreateOrganization.Form.AccountHolder.SectionTitle>
          <CreateOrganization.Form.AccountHolder.Name />
          <CreateOrganization.Form.AccountHolder.Email />
          <CreateOrganization.Form.AccountHolder.Contact />
        </CreateOrganization.Form.AccountHolder>
        <CreateOrganization.Form.CompanyInformation>
          <CreateOrganization.Form.CompanyInformation.SectionTitle>
            会社情報
          </CreateOrganization.Form.CompanyInformation.SectionTitle>
          <CreateOrganization.Form.CompanyInformation.CompanyName />
        </CreateOrganization.Form.CompanyInformation>
        <CreateOrganization.Form.Compliance>
          <CreateOrganization.Form.Compliance.CheckUserAgreement />
          <CreateOrganization.Form.Compliance.CheckPrivacyAgreement />
        </CreateOrganization.Form.Compliance>
        <CreateOrganization.Form.SubmitButton>送信</CreateOrganization.Form.SubmitButton>
      </CreateOrganization.Form>
    </CreateOrganization>
  );
}

結果

Loading...

高度な使用法

ライブエディター

function AdvancedCreateOrganization() {
  const handleCreateOrganization = (data) => {
    console.log('組織が作成されました:', data);
  };

  const handleChange = (setError, getValues) => {
    const values = getValues();
    if (values.companyName && values.companyName.length < 3) {
      setError('companyName', {
        type: 'minLength',
        message: '会社名は3文字以上である必要があります',
      });
    }
  };

  return (
    <CreateOrganization
      onCreateOrganization={handleCreateOrganization}
      onChange={handleChange}
      termsOfUseUrl="#terms-of-service"
      privacyAgreementUrl="#privacy-policy"
      sx={{
        maxWidth: 700,
        mx: 'auto',
        p: 0,
      }}
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          title: {
            ...defaultBlocks.title,
            props: {
              ...defaultBlocks.title.props,
              children: '組織登録',
              sx: {
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                WebkitBackgroundClip: 'text',
                WebkitTextFillColor: 'transparent',
                fontSize: '2rem',
                fontWeight: 700,
              },
            },
          },
          description: {
            ...defaultBlocks.description,
            props: {
              ...defaultBlocks.description.props,
              children: '以下のフォームにご記入いただき、組織プロフィールを作成してください',
              sx: {
                color: '#64748b',
                textAlign: 'center',
              },
            },
          },
          form: {
            ...defaultBlocks.form,
            props: {
              ...defaultBlocks.form.props,
              sx: {
                background: 'rgba(255, 255, 255, 0.9)',
                borderRadius: '20px',
                padding: '24px',
                boxShadow: '0 8px 32px rgba(0,0,0,0.08)',
              },
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </CreateOrganization>
  );
}

結果

Loading...

---

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

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

プロパティ	型	デフォルト	説明
onCreateOrganization	(data: T) => void	必須	フォームが送信されたときにトリガーされるコールバック関数
defaultValues	DefaultValues<T>	undefined	react-hook-form用のデフォルトフォーム値
onChange	(setError, getValues) => void	undefined	フォーム値が変更されたときのコールバック
termsOfUseUrl	string	"/terms-of-use"	利用規約リンクのURL
privacyAgreementUrl	string	"/privacy-policy"	プライバシーポリシーリンクのURL
className	string	undefined	スタイリング用の追加CSSクラス名
children	BlocksOverride	undefined	デフォルトブロックをオーバーライドする関数

注意: メインコンポーネントはMUI Stackプロパティを継承します。ルートコンテナはデフォルトでspacing={4}とsx={{ p: 3 }}を使用します。

サブコンポーネント

CreateOrganization.Title

プロパティ	型	デフォルト	説明
children	ReactNode	"Create your Organization"	タイトルコンテンツ
className	string	undefined	追加CSSクラス名

注意: MUI Typographyプロパティを継承します。variant="h4"、component="h2"、中央揃えテキストと太字フォントを使用します。

CreateOrganization.Description

プロパティ	型	デフォルト	説明
children	ReactNode	デフォルト説明テキスト	説明コンテンツ
className	string	undefined	追加CSSクラス名

注意: MUI Typographyプロパティを継承します。variant="body2"、セカンダリテキストカラー、中央揃えを使用します。

CreateOrganization.Form

プロパティ	型	デフォルト	説明
children	BlocksOverride	undefined	フォームコンテンツセクション
className	string	undefined	追加CSSクラス名

注意: MUI Stackプロパティを継承し、component="form"として使用します。デフォルトでspacing={6}を使用します。

CreateOrganization.Form.AccountHolder

プロパティ	型	デフォルト	説明
children	BlocksOverride	undefined	アカウント責任者フィールド
className	string	undefined	追加CSSクラス名

注意: MUI Stackプロパティを継承します。デフォルトでspacing={4}を使用します。

アカウント責任者サブコンポーネント:

コンポーネント	デフォルト名	デフォルトラベル	必須
AccountHolder.SectionTitle	-	"Account Holder Contact Information"	-
AccountHolder.Name	applicationUserName	"Name"	はい
AccountHolder.Email	applicationUserEmail	"Email"	はい
AccountHolder.Contact	applicationUserPhoneNumber	"Phone Number"	はい

CreateOrganization.Form.CompanyInformation

プロパティ	型	デフォルト	説明
children	BlocksOverride	undefined	会社情報フィールド
className	string	undefined	追加CSSクラス名

注意: MUI Stackプロパティを継承します。デフォルトでspacing={4}を使用します。

会社情報サブコンポーネント:

コンポーネント	デフォルト名	デフォルトラベル	必須
CompanyInformation.SectionTitle	-	"Company Information"	-
CompanyInformation.CompanyName	companyName	"Company Name"	はい
CompanyInformation.CompanyCapital	capitalRange	"Capital Range"	はい
CompanyInformation.CompanySize	numberOfEmployees	"Number of Employees"	はい
CompanyInformation.HomePageUrl	companyUrl	"Home Page URL"	はい
CompanyInformation.AdditionalInformation	additionalInformation	"Additional Information"	いいえ

CreateOrganization.Form.CompanyInformation.CompanyAddress

プロパティ	型	デフォルト	説明
children	BlocksOverride	undefined	住所フィールド
className	string	undefined	追加CSSクラス名

注意: MUI Stackプロパティを継承します。デフォルトでspacing={2.5}を使用します。

会社住所サブコンポーネント:

コンポーネント	デフォルト名	デフォルトラベル	必須
CompanyAddress.LocationTitle	-	"Head Office Location"	-
CompanyAddress.PostCode	postcode	"Post Code"	はい
CompanyAddress.Prefecture	prefecture	"Prefecture"	はい
CompanyAddress.City	cityTownVillage	"City"	はい
CompanyAddress.TownAddress	townStreetBuilding	"Address"	はい
CompanyAddress.RepresentativePersonName	representivePersonName	"Representative Name"	はい
CompanyAddress.RepresentativeContact	representativePhoneNumber	"Representative Phone Number"	はい

注意: 都道府県フィールドは47都道府県がオプションとして事前設定されています。

CreateOrganization.Form.Compliance

プロパティ	型	デフォルト	説明
children	BlocksOverride	undefined	コンプライアンスチェックボックス
className	string	undefined	追加CSSクラス名

注意: MUI Stackプロパティを継承します。デフォルトでspacing={3}、direction="row"、justifyContent="center"を使用します。

コンプライアンスサブコンポーネント:

コンポーネント	デフォルト名	説明
Compliance.CheckUserAgreement	userAgreement	利用規約同意チェックボックス
Compliance.CheckPrivacyAgreement	privacyPolicy	プライバシーポリシー同意チェックボックス

CreateOrganization.Form.SubmitButton

プロパティ	型	デフォルト	説明
children	ReactNode	"Submit"	ボタンテキスト
className	string	undefined	追加CSSクラス名

注意: MUI Buttonプロパティを継承します。variant="contained"、size="large"、type="submit"を使用します。フォームが無効な場合、ボタンは無効化されます。

---

🎨 Configuration examples

Custom Title Styling

<CreateOrganization.Title
  sx={{
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    fontSize: '2rem',
    fontWeight: 700,
  }}
>
  組織を登録
</CreateOrganization.Title>

Custom Field Labels

<CreateOrganization.Form.AccountHolder.Name 
  label="氏名" 
  placeholder="氏名を入力してください"
/>

Custom Select Options

<CreateOrganization.Form.CompanyInformation.CompanyCapital 
  options={[
    { value: 'small', label: '100万円未満' },
    { value: 'medium', label: '100万円 - 1億円' },
    { value: 'large', label: '1億円以上' },
  ]}
/>

Using Block Override Pattern

<CreateOrganization onCreateOrganization={handleSubmit} termsOfUseUrl="#terms" privacyAgreementUrl="#privacy">
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      form: {
        ...defaultBlocks.form,
        props: {
          ...defaultBlocks.form.props,
          sx: {
            bgcolor: 'background.paper',
            borderRadius: 4,
            p: 4,
          },
        },
      },
    },
    blockOrder: defaultBlockOrder,
  })}
</CreateOrganization>

---

🔧 TypeScriptサポート

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

import {CreateOrganization} from '@nodeblocks/frontend-create-organization-block';
import { StackProps } from '@mui/material';
import { DefaultValues, UseFormGetValues, UseFormSetError } from 'react-hook-form';

// デフォルトフォームデータインターフェース
type DefaultCreateOrganizationFormData = {
  applicationUserName?: string;
  applicationUserEmail?: string;
  applicationUserPhoneNumber?: string;
  companyName?: string;
  postcode?: string;
  cityTownVillage?: string;
  townStreetBuilding?: string;
  representivePersonName?: string;
  representativePhoneNumber?: string;
  companyUrl?: string;
  additionalInformation?: string;
  prefecture?: string;
  capitalRange?: string;
  numberOfEmployees?: string;
  userAgreement?: string;
  privacyPolicy?: string;
};

// メインコンポーネントプロパティインターフェース
interface CreateOrganizationProps<T extends DefaultCreateOrganizationFormData> 
  extends Omit<StackProps, 'children' | 'onSubmit' | 'onChange'> {
  onCreateOrganization: (data: T) => void;
  defaultValues?: DefaultValues<T>;
  onChange?: (setError: UseFormSetError<T>, getValues: UseFormGetValues<T>) => void;
  termsOfUseUrl?: string;
  privacyAgreementUrl?: string;
  children?: BlocksOverride;
}

// Custom form data with additional fields
interface CustomOrganizationFormData extends DefaultCreateOrganizationFormData {
  customField?: string;
}

// Complete typed example with validation
function TypedCreateOrganization() {
  const handleCreateOrganization = (data: CustomOrganizationFormData): void => {
    console.log('会社名:', data.companyName);
    console.log('アカウント責任者:', data.applicationUserName);
    // API call to create organization
  };

  const handleChange = (
    setError: UseFormSetError<CustomOrganizationFormData>,
    getValues: UseFormGetValues<CustomOrganizationFormData>,
  ): void => {
    const values = getValues();
    // Real-time validation
    if (values.companyName && values.companyName.length > 50) {
      setError('companyName', {
        type: 'maxLength',
        message: '会社名は50文字を超えることはできません',
      });
    }
  };

  return (
    <CreateOrganization<CustomOrganizationFormData>
      onCreateOrganization={handleCreateOrganization}
      onChange={handleChange}
      termsOfUseUrl="/terms"
      privacyAgreementUrl="/privacy"
      defaultValues={{
        applicationUserName: '田中太郎',
        applicationUserEmail: 'tanaka@example.com',
      }}
      sx={{
        maxWidth: 600,
        mx: 'auto',
        p: 3,
        border: '1px solid #e5e7eb',
        borderRadius: 2,
      }}
    >
      <CreateOrganization.Title>組織を登録</CreateOrganization.Title>
      <CreateOrganization.Description>
        以下のフォームにご記入いただき、組織プロフィールを作成してください
      </CreateOrganization.Description>
      <CreateOrganization.Form>
        <CreateOrganization.Form.AccountHolder />
        <CreateOrganization.Form.CompanyInformation />
        <CreateOrganization.Form.Compliance />
        <CreateOrganization.Form.SubmitButton>組織を作成</CreateOrganization.Form.SubmitButton>
      </CreateOrganization.Form>
    </CreateOrganization>
  );
}

---

📝 注意事項

• ルートコンポーネントはMUIのStackを使用し、デフォルトでspacing={4}とsx={{ p: 3 }}パディングを持ちます
• フォームバリデーションはreact-hook-formでmode: 'onBlur'により処理されます
• 送信ボタンはフォームが無効な場合自動的に無効化されます（!formState.isValid）
• デフォルトタイトルは、childrenが提供されない場合「Create your Organization」です
• デフォルト説明には、必須フィールドがアスタリスクでマークされることについての説明が含まれます
• AccountHolderセクションは、名前とメールフィールドを行レイアウトで表示します
• CompanyAddressはCompanyInformation内にネストされ、独自のサブコンポーネントを持ちます
• 都道府県フィールドは47都道府県が事前設定されています
• コンプライアンスチェックボックスはtermsOfUseUrlとprivacyAgreementUrlプロパティにリンクします
• すべてのテキストフィールドはデフォルトでfullWidthのMUI TextFieldを使用します
• セレクトフィールドはMUI TextFieldをselectプロパティとdisplayEmptyで使用します
• チェックボックスフィールドはMUI FormControlLabelとCheckboxを使用します
• すべてのサブコンポーネントはMUIシステムスタイリング用のsxプロパティをサポートします
• ブロックオーバーライドパターンにより、デフォルトブロックのカスタマイズ、置換、並べ替えが可能です

---

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