refactor: improve enum typesafety for filter component

[TeeGoood]

Why did you create this PR

What did you do

• change props type of Filter component to Record instead of flat array.
• This improve typesafty when using getSelectedValues() for options with enum value

Example usage:

Before change:

need to duplicately define column for each option

const [filterItems, setFilterItems] = useState<FilterItem[]>([
    { column: 'color', value: COLOR.RED, label: 'Red' },
    { column: 'color', value: COLOR.BLUE, label: 'Blue', description: 'A calming blue shade' },
    {
      column: 'animal',
      value: ANIMAL.CAT,
      label: 'Cat',
      description: 'A small domesticated carnivorous mammal',
    },
    {
      column: 'animal',
      value:  ANIMAL.DOG,
      label: 'Dog',
      description: 'A domesticated carnivorous mammal that typically has a long snout',
    },
  ])

...

<Filter items={filterItems} onChange={setFilterItems} />

const selectedValues = getSelectedValues(filterItems, 'color') // get type string[] not COLOR[]

After change:

const [filterOptions, setFilterOptions] = useState({
    color:  [
	  { value: COLOR.RED, label: 'Red },
	  { value: COLOR.BLUE, label: 'Blue', description: 'A calming blue shade' },
	],
    animal: [
	  { value: ANIMAL.CAT, label: 'Cat', description: 'A small domesticated carnivorous mammal' },
	  {
	    value: ANIMAL.DOG,
	    label: 'Dog',
	    description: 'A domesticated carnivorous mammal that typically has a long snout',
	  },
	],
  })

...

<Filter options={filterOptions} onChange={setFilterOptions} />

const selectedValues = getSelectedValues(filterOptions.color) // get tyoe COLOR[]

Screenshots / Recordings

Checklist

• Self-reviewed your code
• Wrote coverage tests
• Added screenshots or recordings if applicable

[changeset-bot]

🦋 Changeset detected

Latest commit: 3dd0ab4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@example/ui-playground	Patch
@genseki/ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR