Creating a Filters organism in Storybook [with React]

I’ve been trying to resolve this task for the last few days, but holy moly I’ve been running in circles with every solution I could think of. Right now I feel drained and I’m in serious need of help.

To give a bit of background, we use Storybook at work. I’m supposed to create this Filter organism, which could have the following structure that was suggested by another developer.

<FilterBar onRemove onAdd onChange>
  <FilterBarItem optional={ false } onChange>
    <Dropdown />
  </FilterBarItem>
  <FilterBarItem optional={ true } onChange>
    <TextField />
  </FilterBarItem>
  <FilterBarItem optional={ true } onChange>
    <TextField />
  </FilterBarItem>
  <FilterBarSelect onChange>
    <Dropdown />
  </FilterBarSelect>
</FilterBar>

First of all, let me try to explain how this should work, at least from my understanding (still not 100% clear on what we’re trying to achieve, but I guess we can take any other e-commerce filter out there as example).

So the user can add or remove filters to narrow down a list of products to their preference. Each filter also have a few options to choose from. For example:
Let’s say I’m looking for white shoes size 41 on a website. I’m going to apply the size filter (which should have some options), I’m going to apply a color filter maybe, and some type of footwear I want (shoes).

Coming back to our structure.

FilterBar I suppose it’s going to be the main wrapper and the one that controls if we add or remove filters.

FilterBarItem is going to be the filter itself and now, here’s the first challenge. It doesn’t know which type of child component it’s gonna have, it can be a dropdown of options, it can be a color picker, it can be a normal input field where user can input something, etc.

FilterBarSelection is going to be a styled dropdown, based on the react-select library and it’s going to have some filters options passed in and based on what it’s selected, it will generate a new FilterBarItem.

Ok here’s how I thought about implementing this and what are the issues.

The FilterBar

const FilterBar = ({ children, ...props }) => {
 // Maybe here we can add the array of options we want to pass into FilterBarSelection?
 // Also maybe here too we want to create the onAdd, onRemove functions and pass them into whatever component needs it? For example, onRemove should be passed into the FilterBarItem and the onAdd should be passed into FilterBarSelection since it's the one that controls how many filters we apply?
 // Also if we have a list of filters that can't be removed by the user, I'm guessing they also have to be added here?
 return (
  <div className="someClass">
   <div className="mandatory-filters">
    { children }
   </div>
   <div className="optional-filters">
  { React.Children.map(children, child => (
      React.cloneElement(child, { onAdd={ }, onRemove={ }, ...props }))) }
   </div>
  </div>
 )
}

The FilterBarItem

const FilterBarItem = ({ optional, children }) => {
 // If the filter is optional, then we want to have the ability to remove the filter if the user decides to.
 if(optional) {
   return (
    <>
    { children } // can we determine the type of filter we want to add? For example, like I said before, it can be a simple input
    <button onClick={ onRemove }>Remove</button>
    </>
   )
 }

 return (
  <>
   { children }
  </>
 )
}

The FilterBarSelection

const FilterBarSelection = () => {
 return (
  <ReactSelect 
    isMulti 
    options={ filterOptions } />
 )
}

As you can see, there are a lot of problems I don’t know how to fix. And this is why I needed some help with the implementation because honestly I’ve ran out of ideas.