@citizenplane/pimp 18.11.0 → 18.12.0

package/src/stories/CpSeatMap.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { action } from 'storybook/actions'
 import { computed, ref, watch } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 
 import type { CpSeatMapSeatSelection } from '@/constants/seatMap/CpSeatMapSeatSelection'
 import type { Seat } from '@/constants/seatMap/Seat'
@@ -10,30 +11,57 @@ import type { SeatRow } from '@/constants/seatMap/SeatRow'
 import type { SeatRowFacilityFlags } from '@/constants/seatMap/SeatRowFacilityFlags'
 
 import CpSeatMap from '@/components/CpSeatMap.vue'
-import CpSelect from '@/components/CpSelect.vue'
 
 import { IataTravelerTypes } from '@/constants/seatMap/IataTravelerTypes'
 import { SeatStatuses } from '@/constants/seatMap/SeatStatuses'
 import { displaySeat } from '@/helpers/seatMap'
 
+const AIRCRAFT_LABELS = {
+  'atr-72': 'ATR 72 — 2+2',
+  a320: 'A320 — 3+3',
+  b777: 'B777 — 3+4+3',
+} as const
+
+type AircraftId = keyof typeof AIRCRAFT_LABELS
+
+/**
+ * `aircraft` is a story-only knob: the component has no such prop, the render
+ * function turns it into the matching `seatMap`, which is therefore hidden.
+ */
+type CpSeatMapArgs = Omit<ComponentProps<typeof CpSeatMap>, 'seatMap'> & {
+  aircraft: AircraftId
+  seatMap?: SeatMap
+}
+
 const meta = {
   title: 'Business/CpSeatMap',
   component: CpSeatMap,
   parameters: {
     layout: 'padded',
   },
+  args: {
+    aircraft: 'a320',
+  },
+  argTypes: {
+    aircraft: {
+      control: { type: 'select', labels: AIRCRAFT_LABELS },
+      options: Object.keys(AIRCRAFT_LABELS),
+      description: 'Story-only: picks the seat map handed to the component.',
+    },
+    seatMap: { control: false, table: { disable: true } },
+  },
   // The plane wings sit 180px outside the cabin, so the story needs side room.
   decorators: [
     () => ({
       template:
-        '<div style="margin: 0 auto; padding: 40px; border-radius: 8px; background-color: #fff;"><story/></div>',
+        '<div style="display: flex; justify-content: center;margin: 0 auto; padding: 40px; border-radius: 8px; background-color: #fff;"><story/></div>',
     }),
   ],
-} satisfies Meta<typeof CpSeatMap>
+} satisfies Meta<CpSeatMapArgs>
 
 export default meta
 
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<CpSeatMapArgs>
 
 const EXTRA_LEGROOM = {
   amount: 12,
@@ -244,18 +272,12 @@ const b777 = makeSeatMap('B777', [
   },
 ])
 
-const AIRCRAFT: Record<string, SeatMap> = {
+const AIRCRAFT: Record<AircraftId, SeatMap> = {
   'atr-72': atr72,
   a320,
   b777,
 }
 
-const AIRCRAFT_OPTIONS = [
-  { label: 'ATR 72 — 2+2', value: 'atr-72' },
-  { label: 'A320 — 3+3', value: 'a320' },
-  { label: 'B777 — 3+4+3', value: 'b777' },
-]
-
 const selection = (
   row: number,
   column: string,
@@ -265,27 +287,36 @@ const selection = (
 })
 
 /**
- * Every story picks its aircraft, so one map can be compared against another.
+ * The `aircraft` control picks the map, so one aircraft can be compared against
+ * another from the controls panel.
  *
  * `isInteractive` wires the click back into `selections`, which is what a consumer
  * has to do: the map only reports the seat, it never remembers it.
  */
-const withAircraftPicker =
+const withAircraftControl =
   (isInteractive = false) =>
-  (args: NonNullable<Story['args']>) => ({
-    components: { CpSeatMap, CpSelect },
+  (args: CpSeatMapArgs) => ({
+    components: { CpSeatMap },
     setup() {
-      const aircraft = ref('a320')
-      const seatMap = computed(() => AIRCRAFT[aircraft.value] as SeatMap)
+      const seatMap = computed(() => AIRCRAFT[args.aircraft])
 
       const ownSelections = ref<Record<string, CpSeatMapSeatSelection>>({})
       const selections = computed(() => (isInteractive ? ownSelections.value : args.selections))
 
-      // A seat key from one aircraft rarely exists on the next one.
-      watch(aircraft, () => {
-        ownSelections.value = {}
+      // `aircraft` isn't a component prop, so it's kept off `v-bind`.
+      const componentArgs = computed(() => {
+        const { aircraft, seatMap: _, ...rest } = args
+        return rest
       })
 
+      // A seat key from one aircraft rarely exists on the next one.
+      watch(
+        () => args.aircraft,
+        () => {
+          ownSelections.value = {}
+        },
+      )
+
       const handleSelect = (seat: Seat, rowNumber: number) => {
         action('select')(seat, rowNumber)
         if (!isInteractive) return
@@ -295,16 +326,10 @@ const withAircraftPicker =
         ownSelections.value = key in ownSelections.value ? {} : { [key]: { initials: 'RN' } }
       }
 
-      return { args, aircraft, seatMap, selections, handleSelect, aircraftOptions: AIRCRAFT_OPTIONS }
+      return { componentArgs, seatMap, selections, handleSelect }
     },
-    // The plane nose bleeds upwards out of the cabin, so the picker is lifted above it.
     template: `
-      <div style="display: flex; flex-direction: column; gap: 24px; width:fit-content; margin: 0 auto;">
-        <div style="position: absolute; top: 24px; left: 24px; z-index: 1; max-width: 280px; background-color: #fff;">
-          <cp-select v-model="aircraft" hide-default-value label="Aircraft" :options="aircraftOptions" />
-        </div>
-        <cp-seat-map v-bind="args" :seat-map="seatMap" :selections="selections" @select="handleSelect" />
-      </div>
+      <cp-seat-map v-bind="componentArgs" :seat-map="seatMap" :selections="selections" @select="handleSelect" />
     `,
   })
 
@@ -314,10 +339,7 @@ const withAircraftPicker =
  * blocked and paid-for seats read from the map.
  */
 export const Default: Story = {
-  args: {
-    seatMap: a320,
-  },
-  render: withAircraftPicker(true),
+  render: withAircraftControl(true),
 }
 
 /**
@@ -326,14 +348,13 @@ export const Default: Story = {
  */
 export const WithSelection: Story = {
   args: {
-    seatMap: a320,
     selections: {
       ...selection(7, 'B', { initials: 'JD' }),
       ...selection(8, 'C', { initials: 'AM' }),
     },
     onSelect: action('select'),
   },
-  render: withAircraftPicker(),
+  render: withAircraftControl(),
 }
 
 /**
@@ -342,7 +363,6 @@ export const WithSelection: Story = {
  */
 export const WithLinkedInfant: Story = {
   args: {
-    seatMap: a320,
     selections: {
       ...selection(7, 'B', {
         initials: 'JD',
@@ -353,5 +373,5 @@ export const WithLinkedInfant: Story = {
     },
     onSelect: action('select'),
   },
-  render: withAircraftPicker(),
+  render: withAircraftControl(),
 }

package/src/stories/CpSegmentedControl.stories.ts

@@ -0,0 +1,261 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, ref, watch } from 'vue'
+
+import CpSegmentedControl from '@/components/CpSegmentedControl.vue'
+
+import { docCellStyle, docLabelStyle, docRowColumnStyle } from '@/stories/documentationStyles'
+
+const segmentedControlSizes = ['sm', 'md'] as const
+
+const meta = {
+  title: 'Molecules/CpSegmentedControl',
+  component: CpSegmentedControl,
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'The selected option value',
+    },
+    name: {
+      control: 'text',
+      description: 'Name attribute for the radio group',
+    },
+    options: {
+      control: 'object',
+      description: 'Array of segmented options',
+    },
+    size: {
+      control: 'select',
+      options: segmentedControlSizes,
+      description: 'The size of the segmented control',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the control is disabled',
+    },
+    isFullWidth: {
+      control: 'boolean',
+      description: 'Whether each option stretches to fill the available width',
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Whether the control is in an invalid state',
+    },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'The orientation of the control',
+    },
+  },
+} satisfies Meta<typeof CpSegmentedControl>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleOptions = [
+  { value: 'option1', label: 'Option 1', leadingIcon: 'dashed-circle', trailingIcon: 'dashed-circle' },
+  { value: 'option2', label: 'Option 2', leadingIcon: 'dashed-circle', trailingIcon: 'dashed-circle' },
+  { value: 'option3', label: 'Option 3', leadingIcon: 'dashed-circle', trailingIcon: 'dashed-circle' },
+]
+
+const createRender = (label: string) => (args: { modelValue?: string; isFullWidth?: boolean }) => ({
+  components: { CpSegmentedControl },
+  setup() {
+    const value = ref(args.modelValue)
+
+    watch(
+      () => args.modelValue,
+      (modelValue) => {
+        value.value = modelValue
+      },
+    )
+
+    const boundArgs = computed(() => {
+      const { modelValue: _modelValue, ...rest } = args
+      return rest
+    })
+
+    const cellStyle = args.isFullWidth ? `${docCellStyle} width: 100%;` : docCellStyle
+
+    return { boundArgs, value, label, cellStyle, docLabelStyle, docRowColumnStyle }
+  },
+  template: `
+    <div :style="docRowColumnStyle">
+      <div :style="cellStyle">
+        <span :style="docLabelStyle">{{ label }}</span>
+        <CpSegmentedControl v-bind="boundArgs" v-model="value" />
+        <p :style="docLabelStyle">modelValue: <code>{{ value }}</code></p>
+      </div>
+    </div>
+  `,
+})
+
+/**
+ * Default segmented control. Use the controls to experiment with each prop
+ * in isolation.
+ */
+export const Default: Story = {
+  args: {
+    modelValue: 'option1',
+    name: 'segmented-control-default',
+    options: sampleOptions,
+    size: 'md',
+    isFullWidth: false,
+    isInvalid: false,
+  },
+  render: createRender('Default'),
+}
+
+/**
+ * Options rendered with leading and trailing icons.
+ */
+export const WithIcons: Story = {
+  args: {
+    ...Default.args,
+    name: 'segmented-control-icons',
+    options: [
+      { value: 'list', label: 'List', leadingIcon: 'dashed-circle', trailingIcon: 'dashed-circle' },
+      { value: 'grid', label: 'Grid', leadingIcon: 'dashed-circle', trailingIcon: 'dashed-circle' },
+      { value: 'map', label: 'Map', leadingIcon: 'dashed-circle', trailingIcon: 'dashed-circle' },
+    ],
+    modelValue: 'list',
+  },
+  render: createRender('With icons'),
+}
+
+/**
+ * Available sizes side by side — `sm` and `md`.
+ */
+export const Sizes: Story = {
+  args: {
+    ...Default.args,
+    name: 'segmented-control-sizes',
+  },
+  parameters: { controls: { disable: true } },
+  render: () => ({
+    components: { CpSegmentedControl },
+    setup() {
+      const values = ref({
+        sm: 'option1',
+        md: 'option1',
+      })
+
+      return { values, sampleOptions, segmentedControlSizes, docCellStyle, docLabelStyle, docRowColumnStyle }
+    },
+    template: `
+      <div :style="docRowColumnStyle">
+        <div v-for="size in segmentedControlSizes" :key="size" :style="docCellStyle">
+          <span :style="docLabelStyle">{{ size }}</span>
+          <CpSegmentedControl
+            v-model="values[size]"
+            :name="'segmented-control-sizes-' + size"
+            :options="sampleOptions"
+            :size="size"
+          />
+          <p :style="docLabelStyle">modelValue: <code>{{ values[size] }}</code></p>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Stretch each option so the control fills its container with
+ * `isFullWidth`.
+ */
+export const FullWidth: Story = {
+  args: {
+    ...Default.args,
+    name: 'segmented-control-full-width',
+    isFullWidth: true,
+  },
+  parameters: {
+    layout: 'padded',
+  },
+  decorators: [
+    () => ({
+      template: '<div style="width: 100%;"><story /></div>',
+    }),
+  ],
+  render: (args) => ({
+    components: { CpSegmentedControl },
+    setup() {
+      const value = ref(args.modelValue)
+
+      watch(
+        () => args.modelValue,
+        (modelValue) => {
+          value.value = modelValue
+        },
+      )
+
+      const boundArgs = computed(() => {
+        const { modelValue: _modelValue, ...rest } = args
+        return rest
+      })
+
+      const cellStyle = `${docCellStyle} width: 100%;`
+
+      return { boundArgs, value, cellStyle, docLabelStyle, docRowColumnStyle }
+    },
+    template: `
+      <div :style="docRowColumnStyle">
+        <div :style="cellStyle">
+          <span :style="docLabelStyle">Full width</span>
+          <CpSegmentedControl v-bind="boundArgs" v-model="value" />
+          <p :style="docLabelStyle">modelValue: <code>{{ value }}</code></p>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Disable the whole control.
+ */
+export const WithDisabledOption: Story = {
+  args: {
+    ...Default.args,
+    name: 'segmented-control-disabled',
+    isDisabled: true,
+    modelValue: undefined,
+  },
+  render: createRender('Disabled'),
+}
+
+/**
+ * A disabled option can still be the current value. Use this pattern for
+ * read-only pre-selections.
+ */
+export const CheckedDisabled: Story = {
+  args: {
+    ...Default.args,
+    name: 'segmented-control-checked-disabled',
+    isDisabled: true,
+    modelValue: 'option1',
+  },
+  render: createRender('Checked disabled'),
+}
+
+/**
+ * Error state — highlights the control border when validation fails.
+ */
+export const Invalid: Story = {
+  args: {
+    ...Default.args,
+    name: 'segmented-control-invalid',
+    isInvalid: true,
+  },
+  render: createRender('Invalid'),
+}
+
+/**
+ * Vertical orientation
+ */
+export const Vertical: Story = {
+  args: {
+    ...Default.args,
+    name: 'segmented-control-vertical',
+    orientation: 'vertical',
+  },
+  render: createRender('Vertical'),
+}