組織詳細ブロック

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

---

🚀 インストール

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

---

📖 使用方法

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

基本的な使用方法

ライブエディター

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

結果

Loading...

高度な使用方法

ライブエディター

function AdvancedViewOrganization() {
  return (
    <ViewOrganization
      labels={{
        companyAbout: '🏢 企業概要',
        companyActivities: '💼 事業内容',
        companyRegisteredInformation: '📋 登録情報',
      }}
      companyLogoUrl="/img/icon.png"
      companyName="株式会社テクノロジー・イノベーション"
      companyTags={[
        {icon: 'business', value: 'テクノロジー'},
        {icon: 'pin_invoke', value: '東京都渋谷区'},
        {icon: 'group_work', value: '従業員500名'},
        {icon: 'trending_up', value: '上場企業'},
      ]}
      companyAbout="私たちは、最新のテクノロジーを活用して企業のデジタル変革を支援する業界をリードする革新的な技術企業です。AI、IoT、クラウドコンピューティングの分野で15年以上の実績を持ち、お客様の事業成長に貢献しています。"
      companyActivities="ソフトウェア開発、AIソリューション、クラウドインフラストラクチャ、データ分析、IoTシステム構築、デジタルトランスフォーメーションコンサルティング、システム保守・運用サポート"
      companyRegisteredInformation={[
        {label: '📄 法人番号:', value: '1234567890123'},
        {label: '💰 資本金:', value: '10億円'},
        {label: '📅 設立年月日:', value: '2008年4月1日'},
        {label: '🏦 本店所在地:', value: '東京都渋谷区神宮前1-1-1'},
        {label: '👨‍💼 代表取締役:', value: '田中太郎'},
        {label: '📞 連絡先:', value: '03-1234-5678'},
      ]}
      style={{
        background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)',
        borderRadius: '24px',
        padding: '32px',
        margin: '20px',
        boxShadow: '0 20px 60px rgba(16, 93, 201, 0.15)',
        border: '2px solid #105dc9eb',
      }}
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          // 洗練されたスタイリングで強化された企業バナー
          companyBanner: {
            ...defaultBlocks.companyBanner,
            props: {
              ...defaultBlocks.companyBanner.props,
              style: {
                background: 'linear-gradient(135deg, #105dc9eb 0%, #0a3f8a 100%)',
                borderRadius: '20px',
                padding: '32px',
                textAlign: 'center',
                marginBottom: '24px',
                boxShadow: '0 12px 40px rgba(16, 93, 201, 0.4)',
                position: 'relative',
                overflow: 'hidden',
              },
            },
          },

          // プレミアムタイポグラフィで強化された企業名
          companyName: {
            ...defaultBlocks.companyName,
            props: {
              ...defaultBlocks.companyName.props,
              style: {
                textAlign: 'center',
                marginBottom: '16px',
              },
              children: (
                <h1
                  style={{
                    color: 'black',
                    fontSize: '24px',
                    fontWeight: 'bold',
                    margin: '0',
                    lineHeight: '1.2',
                  }}
                >
                  株式会社テクノロジー・イノベーション
                </h1>
              ),
            },
          },

          // モダンスタイリングで強化されたタグ
          tags: {
            ...defaultBlocks.tags,
            props: {
              ...defaultBlocks.tags.props,
              children: [
                {icon: 'business', value: 'テクノロジー'},
                {icon: 'location_on', value: '東京都渋谷区'},
                {icon: 'people', value: '従業員500名'},
                {icon: 'trending_up', value: '上場企業'},
              ].map((tag, index) => (
                <span
                  key={index}
                  style={{
                    background: 'white',
                    boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
                    color: 'black',
                    padding: '8px 16px',
                    borderRadius: '20px',
                    fontSize: '14px',
                    fontWeight: '600',
                    backdropFilter: 'blur(10px)',
                    border: '2px solidrgb(0, 0, 0)',
                    display: 'flex',
                    alignItems: 'center',
                    gap: '12px',
                    marginTop: '10px',
                  }}
                >
                  {tag.icon === 'business' && '🏢'}
                  {tag.icon === 'location_on' && '📍'}
                  {tag.icon === 'people' && '👥'}
                  {tag.icon === 'trending_up' && '📈'}
                  <span>{tag.value}</span>
                </span>
              )),
            },
          },

          // 強化された会社概要セクション
          aboutCompany: {
            ...defaultBlocks.aboutCompany,
            props: {
              ...defaultBlocks.aboutCompany.props,
              style: {
                background: 'white',
                borderRadius: '16px',
                padding: '24px',
                marginBottom: '20px',
                backdropFilter: 'blur(15px)',
                border: '1px solid rgb(0, 0, 0)',
              },
            },
          },

          // 強化された事業活動セクション
          businessActivities: {
            ...defaultBlocks.businessActivities,
            props: {
              ...defaultBlocks.businessActivities.props,
              style: {
                background: 'white',
                boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
                borderRadius: '16px',
                padding: '24px',
                marginBottom: '20px',
                backdropFilter: 'blur(15px)',
                border: '2px solid #2968cf',
                boxShadow: '0 8px 32px rgba(84, 137, 219, 0.4)',
              },
            },
          },

          // カスタムレイアウトで強化された企業情報
          corporateInformation: (
            <div
              style={{
                background: 'white',
                boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
                borderRadius: '16px',
                padding: '24px',
                backdropFilter: 'blur(15px)',
              }}
            >
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: '12px',
                  marginBottom: '20px',
                }}
              >
                <span
                  style={{
                    fontSize: '24px',
                    color: 'white',
                  }}
                >
                  📋
                </span>
                <h3
                  style={{
                    fontSize: '20px',
                    fontWeight: 'bold',
                    color: 'black',
                    margin: '0',
                  }}
                >
                  登録情報
                </h3>
              </div>

              <div
                style={{
                  display: 'grid',
                  gridTemplateColumns: 'repeat(2, 1fr)',
                  gap: '16px',
                }}
              >
                {[
                  {label: '📄 法人番号:', value: '1234567890123'},
                  {label: '💰 資本金:', value: '10億円'},
                  {label: '📅 設立年月日:', value: '2008年4月1日'},
                  {label: '🏦 本店所在地:', value: '東京都渋谷区神宮前1-1-1'},
                  {label: '👨‍💼 代表取締役:', value: '田中太郎'},
                  {label: '📞 連絡先:', value: '03-1234-5678'},
                ].map((item, index) => (
                  <div
                    key={index}
                    style={{
                      background: 'white',
                      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
                      padding: '16px',
                      borderRadius: '12px',
                      border: '1px solid rgb(0, 0, 0)',
                      transition: 'all 0.3s ease',
                    }}
                  >
                    <div
                      style={{
                        fontWeight: 'bold',
                        color: 'black',
                        fontSize: '14px',
                      }}
                    >
                      {item.label}
                    </div>
                    <div
                      style={{
                        color: 'black',
                        fontSize: '14px',
                        lineHeight: '1.4',
                      }}
                    >
                      {item.value}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ),
        },
        blockOrder: defaultBlockOrder,
      })}
    </ViewOrganization>
  );
}

結果

Loading...

---

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

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

プロパティ	型	デフォルト	説明
labels	Labels	必須	異なるセクションのラベル設定
labels.companyAbout	ReactNode	undefined	会社概要セクションのラベル
labels.companyActivities	ReactNode	undefined	会社活動セクションのラベル
labels.companyRegisteredInformation	ReactNode	undefined	登録情報セクションのラベル
companyLogoUrl	string	undefined	会社ロゴ画像のURL
companyName	ReactNode	undefined	表示する会社名
companyTags	Array<{icon: IconType, value: string}>	undefined	アイコンと値を持つタグの配列
companyAbout	ReactNode	undefined	会社概要説明コンテンツ
companyActivities	ReactNode	undefined	会社活動説明コンテンツ
companyRegisteredInformation	Array<{label: ReactNode, value: string}>	undefined	登録情報項目の配列
children	BlocksOverride	undefined	デフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント
className	string	undefined	コンテナスタイリング用の追加CSSクラス名

注意: このコンポーネントはHTML div 要素のすべてのプロパティを継承します。

サブコンポーネント

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

ViewOrganization.Tag

プロパティ	型	デフォルト	説明
size	enum	"S"	タグのサイズ
icon	enum	undefined	タグに表示するアイコン
label	string	undefined	タグのテキストコンテンツ
className	string	undefined	スタイリング用の追加CSSクラス名

ViewOrganization.Title

プロパティ	型	デフォルト	説明
prefix	ReactNode	undefined	タイトルの前に表示するコンテンツ
companyName	ReactNode	コンテキストから	タイトルとして表示する会社名
children	ReactNode	companyName	タイトルコンテンツ - 提供された場合companyNameをオーバーライド
direction	enum	"column"	アクションボタンのフレックス方向
alignItems	enum	"stretch"	コンテナ内のアイテムの整列
gapSize	enum	"S"	コンテナ内のアイテム間のギャップ
className	string	undefined	スタイリング用の追加CSSクラス名

ViewOrganization.DescriptionDetailBlock

プロパティ	型	デフォルト	説明
icon	enum	undefined	ラベルの横に表示するアイコン
label	ReactNode	undefined	詳細ブロックのラベルテキスト
value	ReactNode	undefined	詳細ブロックの値コンテンツ
children	ReactNode	デフォルトコンテンツ	カスタムコンテンツ - デフォルトのラベル/値レイアウトをオーバーライド
direction	enum	"column"	アクションボタンのフレックス方向
alignItems	enum	"stretch"	コンテナ内のアイテムの整列
gapSize	enum	"S"	コンテナ内のアイテム間のギャップ
className	string	undefined	スタイリング用の追加CSSクラス名

ViewOrganization.CompanyBanner

プロパティ	型	デフォルト	説明
companyLogoUrl	string	コンテキストから	会社ロゴ画像のURL
direction	enum	"column"	アクションボタンのフレックス方向
alignItems	enum	"stretch"	コンテナ内のアイテムの整列
gapSize	enum	"S"	コンテナ内のアイテム間のギャップ
className	string	undefined	スタイリング用の追加CSSクラス名

ViewOrganization.CompanyName

プロパティ	型	デフォルト	説明
companyName	ReactNode	コンテキストから	表示する会社名
children	ReactNode	companyName	タイトルコンテンツ - 提供された場合companyNameをオーバーライド
direction	enum	"column"	アクションボタンのフレックス方向
alignItems	enum	"stretch"	コンテナ内のアイテムの整列
gapSize	enum	"S"	コンテナ内のアイテム間のギャップ
className	string	undefined	スタイリング用の追加CSSクラス名

ViewOrganization.Tags

プロパティ	型	デフォルト	説明
companyTags	Array<{icon: IconType, value: string}>	コンテキストから	表示するタグの配列
children	ReactNode	デフォルトタグ	カスタムタグコンテンツ - 提供された場合companyTagsをオーバーライド
direction	enum	"column"	アクションボタンのフレックス方向
alignItems	enum	"stretch"	コンテナ内のアイテムの整列
gapSize	enum	"S"	コンテナ内のアイテム間のギャップ
className	string	undefined	スタイリング用の追加CSSクラス名

ViewOrganization.AboutCompany

プロパティ	型	デフォルト	説明
companyAbout	ReactNode	コンテキストから	会社概要コンテンツ
icon	enum	"business"	概要セクションのアイコン
direction	enum	"column"	アクションボタンのフレックス方向
alignItems	enum	"stretch"	コンテナ内のアイテムの整列
gapSize	enum	"S"	コンテナ内のアイテム間のギャップ
className	string	undefined	スタイリング用の追加CSSクラス名

ViewOrganization.BusinessActivities

プロパティ	型	デフォルト	説明
companyActivities	ReactNode	コンテキストから	会社活動コンテンツ
icon	enum	"sticky_note_2"	活動セクションのアイコン
direction	enum	"column"	アクションボタンのフレックス方向
alignItems	enum	"stretch"	コンテナ内のアイテムの整列
gapSize	enum	"S"	コンテナ内のアイテム間のギャップ
className	string	undefined	スタイリング用の追加CSSクラス名

ViewOrganization.CorporateInformation

プロパティ	型	デフォルト	説明
companyRegisteredInformation	Array<{label: ReactNode, value: string}>	コンテキストから	登録情報項目の配列
icon	enum	"info"	企業情報セクションのアイコン
direction	enum	"column"	アクションボタンのフレックス方向
alignItems	enum	"stretch"	コンテナ内のアイテムの整列
gapSize	enum	"S"	コンテナ内のアイテム間のギャップ
className	string	undefined	スタイリング用の追加CSSクラス名

---

🔧 TypeScript サポート

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

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

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

// コンポーネントプロパティインターフェース
interface ViewOrganizationProps {
  labels: Labels;
  companyLogoUrl?: string;
  companyName?: ReactNode;
  companyTags?: { icon: IconType; value: string }[];
  companyAbout?: ReactNode;
  companyActivities?: ReactNode;
  companyRegisteredInformation?: { label: ReactNode; value: string }[];
  className?: string;
}

const MyViewOrganization = () => {
  const organizationData = {
    labels: {
      companyAbout: "私たちの会社について",
      companyActivities: "事業内容", 
      companyRegisteredInformation: "法的情報"
    },
    companyLogoUrl: "https://example.com/logo.png",
    companyName: "テック・ソリューション株式会社",
    companyTags: [
      { icon: 'business' as IconType, value: 'テクノロジー' },
      { icon: 'location_on' as IconType, value: '東京' },
      { icon: 'people' as IconType, value: '従業員500名以上' }
    ],
    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>
  );
};

---

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