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

import type { Meta, StoryObj } from "@storybook/nextjs-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: "Core 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>
  ),
}