より良いコンポーネント設計を見つけたい！「Reactコンポーネント設計分割」選手権！

import { ComponentPropsWithoutRef } from 'react'
import { Heading } from '../atoms/heading/Heading'
import { FeatureItem } from './FeatureItem'

type Feature = Omit<
  ComponentPropsWithoutRef<typeof FeatureItem>,
  'prefixNumber'
>

type FeatureListProps = {
  featureList: Feature[]
}

export const FeatureList = ({ featureList }: FeatureListProps) => {
  return (
    <section>
      <Heading level={2}>
        Gaji-LaboのUIデザイン
        <br />
        3つの特徴
      </Heading>
      <ul>
        {featureList.map((feature, index) => {
          return (
            <li key={index}>
              <FeatureItem
                prefixNumber={String(index + 1).padStart(2, '0')}
                {...feature}
              />
            </li>
          )
        })}
      </ul>
    </section>
  )
}

const Template: Story<ComponentPropsWithoutRef<typeof FeatureList>> = (
  args
) => {
  return <FeatureList {...args} />
}

export const Base = Template.bind({})
Base.args = {
  featureList: [
    {
      title: (
        <>
          UIデザインを作るための
          <br />
          最適な体験の設計
        </>
      ),
      description: (
        <>
          プロダクトの課題や問題に対して、分析と検証を重ねて、具体的な画面のビジュアルとインタラクションを設計します。
          <br />
          プロダクトでユーザーが接するUIや機能は、ユーザビリティと操作性を達成するデザインで構築します。
        </>
      ),
      subTitle: 'UIデザインプロトタイピング',
      subDescription: (
        <>
          画面設計/構成、ワイヤーフレームからUIデザインへビジュアライズを行います。ユーザビリティを考慮し機能性と操作性を達成するUIデザインと、操作感を確かめていただけるプロトタイピングモックをご提案します。
        </>
      ),
      steps: [
        { title: 'ヒアリング（オンライン）' },
        { title: '新規画面のUIデザイン' },
        { title: 'プロトタイプ作成' },
      ],
    },
  ],
}

import { ReactElement, ReactNode } from 'react'

import { Detail } from './Detail'
import type { Props as DetailProps } from './Detail'
interface Item {
  title: ReactNode
  description: ReactNode
  detail: DetailProps
}

export interface Props {
  items: Item[]
}

export const FeatureList = ({ items }: Props): ReactElement => {
  return (
    <ul>
      {items.map(({ title, description, detail }, index) => {
        return (
          <li key={index + 1}>
            <dl>
              <dt>
                <h2>
                  {String(index + 1).padStart(2, '0')}.<br />
                  {title}
                </h2>
              </dt>
              <dd>
                {description}
                <Detail {...detail} />
              </dd>
            </dl>
          </li>
        )
      })}
    </ul>
  )
}

export const Default = (props: Props) => <FeatureList {...props} />

Default.args = {
  items: [
    {
      title: (
        <>
          UIデザインを作るための
          <br />
          最適な体験の設計
        </>
      ),
      description: (
        <>
          プロダクトの課題や問題に対して、分析と検証を重ねて、具体的な画面のビジュアルとインタラクションを設計します。
          <br />
          プロダクトでユーザーが接するUIや機能は、ユーザビリティと操作性を達成するデザインで構築します。
        </>
      ),
      detail: {
        title: 'UIデザインプロトタイピング',
        description: (
          <>
            画面設計/構成、ワイヤーフレームからUIデザインへビジュアライズを行います。ユーザビリティを考慮し機能性と操作性を達成するUIデザインと、操作感を確かめていただけるプロトタイピングモックをご提案します。
          </>
        ),
        steps: [
          'ヒアリング（オンライン）',
          '新規画面のUIデザイン',
          'プロトタイプ作成',
        ],
      },
    },
  ],
}

import { ReactNode } from "react";

interface FeatureListProps {
  children: ReactNode
}

export function FeatureList (props: FeatureListProps): JSX.Element {
  const { children } = props;

  return (
    <div className="FeatureList">
      {children}
    </div>
  )
}

import { FeatureItem } from "./FeatureItem"
import { FeatureItemCard } from "./FeatureItemCard"
import { FeatureList } from "./FeatureList"

export const Default = ():JSX.Element => {
  return (
    <FeatureList>
      <FeatureItem
        numberName="01."
        title={<>UIデザインを作るための<br />最適な体験の設計</>}
      >
        <p>プロダクトの課題や問題に対して、分析と検証を重ねて、具体的な画面のビジュアルとインタラクションを設計します。</p>
        <p>プロダクトでユーザーが接するUIや機能は、ユーザビリティと操作性を達成するデザインで構築します。</p>
        <FeatureItemCard
          title="UIデザインプロトタイピング"
          description="画面設計/構成、ワイヤーフレームからUIデザインへビジュアライズを行います。ユーザビリティを考慮し機能性と操作性を達成するUIデザインと、操作感を確かめていただけるプロトタイピングモックをご提案します。"
          steps={[
            {
              label: "Step 1",
              content: "ヒアリング（オンライン）" 
            },
            {
              label: "Step 2",
              content: "新規画面のUIデザイン"
            },
            {
              label: "Step 3",
              content: "プロトタイプ作成"
            }
          ]}
        />
      </FeatureItem>
    </FeatureList>
  )
}