web/packages/design-system/lib/components/FacilityToIcon/FacilityToIcon.stories.tsx

import type { Meta, StoryObj } from '@storybook/react-vite'

import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'

import { FacilityToIcon } from '.'
import { iconVariantConfig } from '../Icons/variants'

const facilityMapping: Record<string, FacilityEnum> = Object.fromEntries(
  Object.entries(FacilityEnum).filter(([k]) => isNaN(Number(k)))
) as Record<string, FacilityEnum>

const colorOptions = Object.keys(iconVariantConfig.variants.color)

const meta: Meta<typeof FacilityToIcon> = {
  title: 'Components/Facility To Icon',
  component: FacilityToIcon,
  argTypes: {
    id: {
      control: 'select',
      options: Object.keys(FacilityEnum)
        .map((key) => FacilityEnum[key as keyof typeof FacilityEnum])
        .filter((x) => typeof x === 'string')
        .toSorted(),
      mapping: facilityMapping,
      description: 'Facility identifier (mapped to the corresponding icon)',
    },
    color: {
      control: 'select',
      options: colorOptions,
      description: 'Icon color variant',
    },
    size: {
      control: 'number',
      description: 'Icon pixel size',
    },
  },
}

export default meta

type Story = StoryObj<typeof FacilityToIcon>

export const Playground: Story = {
  args: {
    id: FacilityEnum.Bar,
    size: 24,
    color: 'Icon/Default',
  },
}

const exampleFacilities = [
  FacilityEnum.AirConAirCooling,
  FacilityEnum.AirportMaxDistance8Km,
  FacilityEnum.Bar,
  FacilityEnum.CashFreeHotel,
  FacilityEnum.ChildrenWelcome,
  FacilityEnum.Elevator,
  FacilityEnum.Gym,
  FacilityEnum.ParkingGarage,
  FacilityEnum.ParkingOutdoor,
  FacilityEnum.Pool,
  FacilityEnum.Tennis1,
]

export const Examples: Story = {
  args: {
    size: 24,
    color: 'Icon/Default',
  },
  render: (args) => (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
        gap: 16,
      }}
    >
      {exampleFacilities.map((key) => (
        <div
          key={key}
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            padding: 8,
            borderRadius: 8,
            background: 'var(--ds-color-surface-subtle, #F2ECE6)',
          }}
        >
          <FacilityToIcon id={key} size={args.size} color={args.color} />
          <span style={{ fontSize: 12 }}>{FacilityEnum[key]}</span>
        </div>
      ))}
    </div>
  ),
}