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

組織詳細ブロック

ViewOrganizationコンポーネントは、React、TypeScript、MUIで構築された完全にカスタマイズ可能でアクセシブルな組織表示コンポーネントです。モダンなデザインパターン、柔軟なレイアウトオプション、包括的なカスタマイズ機能を備えた組織情報表示のための完全なインターフェースを提供します。

🚀 インストール​

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

📖 使用法​

import {ViewOrganization} from '@nodeblocks/frontend-view-organization-block';

ライブエディター
function BasicViewOrganization() {
  return (
    <ViewOrganization
      labels={{
        companyAbout: '会社について',
        companyActivities: '事業内容',
        companyRegisteredInformation: '登録情報',
      }}
      companyLogoUrl="/img/icon.png"
      companyName="テック・ソリューション株式会社"
      companyTags={[
        {icon: undefined, value: 'テクノロジー'},
        {icon: undefined, value: '東京'},
      ]}
      companyAbout="私たちは革新的なソリューションに焦点を当てた業界をリードするテクノロジー企業です。"
      companyActivities="ソフトウェア開発、コンサルティング、デジタルトランスフォーメーションサービス。"
      companyRegisteredInformation={[
        {label: '法人番号:', value: '12345678'},
        {label: '税務ID:', value: 'TAX-987654321'},
        {label: '設立年:', value: '2010'},
      ]}
    >
      <ViewOrganization.CompanyBanner />
      <ViewOrganization.CompanyName />
      <ViewOrganization.Tags />
      <ViewOrganization.AboutCompany />
      <ViewOrganization.BusinessActivities />
      <ViewOrganization.CorporateInformation />
    </ViewOrganization>
  );
}
結果
Loading...

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

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

プロパティ型デフォルト説明
labelsLabels必須異なるセクションのラベル設定
labels.companyAboutReactNodeundefined会社概要セクションのラベル
labels.companyActivitiesReactNodeundefined会社活動セクションのラベル
labels.companyRegisteredInformationReactNodeundefined登録情報セクションのラベル
companyLogoUrlstringundefined会社ロゴ画像のURL
companyNameReactNodeundefined表示する会社名
companyTagsArray<{icon?: SvgIconComponent, value: string}>undefinedMUIアイコンと値を持つタグの配列
companyAboutReactNodeundefined会社概要説明コンテンツ
companyActivitiesReactNodeundefined会社活動説明コンテンツ
companyRegisteredInformationArray<{label: ReactNode, value: string}>undefined登録情報項目の配列
childrenBlocksOverrideundefinedデフォルトブロックをオーバーライドする関数
classNamestringundefinedコンテナスタイリング用の追加CSSクラス名

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

サブコンポーネント​

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

ViewOrganization.Tag​

オプションのアイコンを持つ単一のタグを表示します。

プロパティ型デフォルト説明
iconSvgIconComponentundefined表示するMUIアイコンコンポーネント
labelReactNodeundefinedタグのテキストコンテンツ（複数の値の場合は配列）
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Box プロパティを継承します。display: 'inline-flex'、alignItems: 'center'、gap: 1.5 を使用します。

ViewOrganization.Title​

組織のタイトル/名前を表示します。

プロパティ型デフォルト説明
prefixReactNodeundefinedタイトルの前に表示するコンテンツ
companyNameReactNodeコンテキストからタイトルとして表示する会社名
childrenReactNodecompanyNameタイトルコンテンツ - 提供された場合companyNameをオーバーライド
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはMUI Box プロパティを継承します。variant="h6"、component="h6"、fontWeight="bold" のTypographyを使用します。

ViewOrganization.DescriptionDetailBlock​

オプションのアイコンを持つラベル付きコンテンツを表示する再利用可能なブロックです。

プロパティ型デフォルト説明
iconSvgIconComponentStickyNote2Outlinedラベル用のMUIアイコンコンポーネント
labelReactNodeundefined詳細ブロックのラベルテキスト
valueReactNodeundefined詳細ブロックの値コンテンツ
childrenReactNodeデフォルトレイアウトカスタムコンテンツ - デフォルトのラベル/値レイアウトをオーバーライド
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントは direction="column"、spacing={2} を持つMUI Stack プロパティを継承します。

ViewOrganization.CompanyBanner​

会社のロゴ/バナー画像を表示します。

プロパティ型デフォルト説明
companyLogoUrlstringコンテキストから会社ロゴ画像のURL
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントは DescriptionDetailBlock プロパティを継承します。ロゴ画像はデフォルトで height: 60 を持ちます。

ViewOrganization.CompanyName​

Titleコンポーネントを使用して会社名を表示します。

プロパティ型デフォルト説明
companyNameReactNodeコンテキストから表示する会社名
childrenReactNodecompanyNameコンテンツ - 提供された場合companyNameをオーバーライド
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントは ViewOrganization.Title プロパティを継承します。

ViewOrganization.Tags​

会社タグのリストを表示します。

プロパティ型デフォルト説明
companyTagsArray<{icon?: SvgIconComponent, value: string}>コンテキストから表示するタグの配列
childrenReactNodeデフォルトタグカスタムタグコンテンツ - 提供された場合companyTagsをオーバーライド
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントは direction="column"、spacing={0.5} を持つMUI Stack プロパティを継承します。

ViewOrganization.AboutCompany​

会社概要セクションを表示します。

プロパティ型デフォルト説明
companyAboutReactNodeコンテキストから会社概要コンテンツ
labelsLabelsコンテキストからセクションタイトル用のラベル
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントは DescriptionDetailBlock プロパティを継承します。デフォルトで BusinessOutlined アイコンを使用します。デフォルトラベルは "About" です。

ViewOrganization.BusinessActivities​

会社の事業活動セクションを表示します。

プロパティ型デフォルト説明
companyActivitiesReactNodeコンテキストから会社活動コンテンツ
labelsLabelsコンテキストからセクションタイトル用のラベル
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントは DescriptionDetailBlock プロパティを継承します。デフォルトで StickyNote2Outlined アイコンを使用します。デフォルトラベルは "Business Activities" です。

ViewOrganization.CorporateInformation​

登録/企業情報をテーブル形式で表示します。

プロパティ型デフォルト説明
companyRegisteredInformationArray<{label: ReactNode, value: string}>コンテキストから登録情報項目の配列
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントは DescriptionDetailBlock プロパティを継承します。項目はラベル（幅: 204px）と値の列を持つ行としてレンダリングされます。

🎨 Configuration examples​

Custom Styled Components​

import {Typography} from '@mui/material';

function StyledViewOrganizationComponents() {
  return (
    <ViewOrganization
      labels={{
        companyAbout: '会社について',
        companyActivities: '事業内容',
        companyRegisteredInformation: '情報',
      }}
      companyLogoUrl="/logo.png"
      companyName="スタイル付き会社"
      companyTags={[{icon: undefined, value: 'タグ1'}]}
      companyAbout="会社概要テキスト"
      companyActivities="事業内容テキスト"
      companyRegisteredInformation={[{label: 'ID:', value: '123'}]}
    >
      <ViewOrganization.CompanyBanner
        sx={{
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          borderRadius: '16px',
          p: 4,
        }}
      />
      <ViewOrganization.CompanyName>
        <Typography variant="h4" fontWeight="bold" color="primary">
          カスタム会社名
        </Typography>
      </ViewOrganization.CompanyName>
      <ViewOrganization.Tags />
      <ViewOrganization.AboutCompany />
      <ViewOrganization.BusinessActivities />
      <ViewOrganization.CorporateInformation />
    </ViewOrganization>
  );
}

Block Override Pattern​

function BlockOverrideViewOrganization() {
  return (
    <ViewOrganization
      labels={{
        companyAbout: '会社について',
        companyActivities: '事業内容',
        companyRegisteredInformation: '情報',
      }}
      companyLogoUrl="/logo.png"
      companyName="会社"
      companyTags={[{icon: undefined, value: 'タグ'}]}
      companyAbout="会社概要"
      companyActivities="事業内容"
      companyRegisteredInformation={[{label: 'ID:', value: '1'}]}
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          aboutCompany: {
            ...defaultBlocks.aboutCompany,
            props: {
              ...defaultBlocks.aboutCompany.props,
              sx: {
                background: 'linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%)',
                borderRadius: '16px',
                p: 3,
              },
            },
          },
        },
        blockOrder: defaultBlockOrder,
      })}
    </ViewOrganization>
  );
}

Comprehensive Organization Display​

function ComprehensiveOrganization() {
  const registeredInfo = [
    {label: '会社登録:', value: 'REG-2024-12345'},
    {label: '税務識別番号:', value: 'TIN-987654321'},
    {label: '設立:', value: '2010年1月'},
    {label: '本社:', value: '東京都渋谷区'},
    {label: '従業員数:', value: '500名以上'},
    {label: '業界:', value: 'テクノロジー / ソフトウェア'},
  ];

  return (
    <ViewOrganization
      labels={{
        companyAbout: '🏢 私たちの会社について',
        companyActivities: '💼 私たちのサービス',
        companyRegisteredInformation: '📋 企業情報',
      }}
      companyLogoUrl="/img/logo-large.png"
      companyName="グローバルテックソリューション株式会社"
      companyTags={[
        {icon: undefined, value: '🌍 グローバル展開'},
        {icon: undefined, value: '🏆 業界リーダー'},
        {icon: undefined, value: '🚀 イノベーション推進'},
        {icon: undefined, value: '👥 500名以上の従業員'},
      ]}
      companyAbout={
        <div>
          <p>
            グローバルテックソリューション株式会社は、革新的なデジタルソリューションを通じて企業の変革に取り組む業界をリードするテクノロジー企業です。10年以上の経験を持つ私たちは、数百社の企業がデジタルトランスフォーメーションの目標を達成するのを支援してきました。
          </p>
          <p style={{marginTop: '12px'}}>
            エキスパートエンジニア、デザイナー、コンサルタントのチームが協力して、ビジネスの成長と効率を促進する最先端のソリューションを提供しています。
          </p>
        </div>
      }
      companyActivities={
        <ul style={{margin: 0, paddingLeft: '20px'}}>
          <li>エンタープライズソフトウェア開発</li>
          <li>クラウドインフラストラクチャソリューション</li>
          <li>AI & 機械学習サービス</li>
          <li>デジタルトランスフォーメーションコンサルティング</li>
          <li>サイバーセキュリティサービス</li>
          <li>24/7 テクニカルサポート</li>
        </ul>
      }
      companyRegisteredInformation={registeredInfo}
      sx={{maxWidth: '800px', mx: 'auto'}}
    >
      <ViewOrganization.CompanyBanner />
      <ViewOrganization.CompanyName />
      <ViewOrganization.Tags />
      <ViewOrganization.AboutCompany />
      <ViewOrganization.BusinessActivities />
      <ViewOrganization.CorporateInformation />
    </ViewOrganization>
  );
}

🔧 TypeScript サポート​

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

import {SvgIconComponent} from '@mui/icons-material';
import {StackProps} from '@mui/material';
import {ViewOrganization} from '@nodeblocks/frontend-view-organization-block';
import {ReactNode} from 'react';

// Labels interface
interface Labels {
  companyAbout?: ReactNode;
  companyActivities?: ReactNode;
  companyRegisteredInformation?: ReactNode;
}

// Tag interface
interface CompanyTag {
  icon: SvgIconComponent | undefined;
  value: string;
}

// Registered information interface
interface RegisteredInfo {
  label: ReactNode;
  value: string;
}

// Main component props interface
interface ViewOrganizationProps extends Omit<StackProps, 'children'> {
  labels: Labels;
  companyLogoUrl?: string;
  companyName?: ReactNode;
  companyTags?: CompanyTag[];
  companyAbout?: ReactNode;
  companyActivities?: ReactNode;
  companyRegisteredInformation?: RegisteredInfo[];
}

function TypedViewOrganizationExample() {
  const organizationData: Omit<ViewOrganizationProps, 'children'> = {
    labels: {
      companyAbout: '私たちの会社について',
      companyActivities: '事業内容',
      companyRegisteredInformation: '法的情報',
    },
    companyLogoUrl: 'https://example.com/logo.png',
    companyName: 'テック・ソリューション株式会社',
    companyTags: [
      {icon: undefined, value: 'テクノロジー'},
      {icon: undefined, value: '東京'},
    ],
    companyAbout: '私たちは業界をリードするテクノロジー企業です...',
    companyActivities: 'ソフトウェア開発、コンサルティング...',
    companyRegisteredInformation: [
      {label: '法人番号:', value: '12345678'},
      {label: '税務ID:', value: 'TAX-987654321'},
    ],
  };

  return (
    <ViewOrganization {...organizationData}>
      <ViewOrganization.CompanyBanner />
      <ViewOrganization.CompanyName />
      <ViewOrganization.Tags />
      <ViewOrganization.AboutCompany />
      <ViewOrganization.BusinessActivities />
      <ViewOrganization.CorporateInformation />
    </ViewOrganization>
  );
}

📝 注意事項​

  • ルートコンポーネントは direction="column"、spacing={3}、sx={{ p: 3 }} のパディングを持つMUIの Stack を使用します
  • アイコンはMUI SvgIconComponent 型でなければなりません（例: BusinessOutlined、LocationOnOutlined）
  • ViewOrganization.Tag は fontSize="small" と color="primary" でアイコンを表示します
  • ViewOrganization.Title は variant="h6" と fontWeight="bold" を持つMUI Typographyを使用します
  • ViewOrganization.DescriptionDetailBlock はAboutCompany、BusinessActivities、CorporateInformationの基本コンポーネントです
  • ViewOrganization.AboutCompany はデフォルトで BusinessOutlined アイコンを使用し、フォールバックラベルは "About" です
  • ViewOrganization.BusinessActivities はデフォルトで StickyNote2Outlined アイコンを使用し、フォールバックラベルは "Business Activities" です
  • ViewOrganization.CorporateInformation は境界線と固定ラベル幅（204px）を持つ行として項目をレンダリングします
  • 会社バナーロゴはデフォルトで60pxの高さを持ちます
  • すべてのサブコンポーネントはそれぞれのMUIコンポーネントプロパティを継承し、スタイリング用の sx プロパティをサポートします
  • ブロックオーバーライドパターンにより、デフォルトブロックのカスタマイズ、置換、並べ替えが可能です

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