RI-7189: Add SelectionBox component

[pawelangelow]

This is a component based on: BoxSelectionGroup with some adjustments on the style.

Preview

Usage

It's intended to be used within <BoxSelectionGroup />.

Example form:

type IndexTypeValue = 'rqe' | 'vector-set'
const indexType: BoxSelectionOption<IndexTypeValue>[] = [
  {
    value: 'rqe',
    label: 'Redis Query Engine',
    text: 'For advanced, large-scale search needs',
    icon: VectorSearchIcon,
  },
  {
    value: 'vector-set',
    label: 'Vector Set',
    text: 'For quick and simple vector use cases',
    icon: WandIcon,
    disabled: true,
  },
]

type DataTypeValue =
  | 'e-commerce-discovery'
  | 'ai-assistants'
  | 'content-recommendations'
const dataType: BoxSelectionOption<DataTypeValue>[] = [
  {
    value: 'e-commerce-discovery',
    label: 'E-commerce Discovery',
    text: 'Find products by meaning, not just keywords.',
    icon: UniversityIcon,
  },
  {
    value: 'ai-assistants',
    label: 'AI Assistants',
    text: 'Find products by meaning, not just keywords.',
    icon: DatabaseIcon,
  },
  {
    value: 'content-recommendations',
    label: 'Content Recommendations',
    text: 'Find products by meaning, not just keywords.',
    icon: UniversityIcon,
    disabled: true,
  },
]

const BrowserPage = () => {
  const [indexTypeSelected, setIndexTypeSelected] = useState<
    IndexTypeValue | undefined
  >()
  const [dataTypeSelected, setDataTypeSelected] = useState<
    DataTypeValue | undefined
  >()

  return (
    <div className={`browserPage ${styles.container}`}>
      <form style={{ width: '50%', textAlign: 'center', margin: '0 auto' }}>
        <BoxSelectionGroup.Compose defaultValue={indexTypeSelected}>
          {indexType.map((type) => (
            <SelectionBox
              box={type}
              key={type.value}
              onClick={() => setIndexTypeSelected(type.value)}
            />
          ))}
        </BoxSelectionGroup.Compose>
      </form>

      <br />

      <form style={{ width: '50%', textAlign: 'center', margin: '0 auto' }}>
        <BoxSelectionGroup.Compose defaultValue={dataTypeSelected}>
          {dataType.map((type) => (
            <SelectionBox
              box={type}
              key={type.value}
              onClick={() => setDataTypeSelected(type.value)}
            />
          ))}
        </BoxSelectionGroup.Compose>
      </form>
    </div>
  )
}

[pd-redis]

IMO we should strive to use the design system of redis-ui, or make our own, but in any case, avoid hardcoding random values. This goes for color values, for spacings, border radii etc.

[pawelangelow]

I'm definitely in favor of using them, but I couldn't find where they’re defined (or how to use the ones from redis-ui). I noticed a few components using hardcoded values, which is why I left it as-is for now. If you could clarify or point me in the right direction, that would be helpful.

[pd-redis]

Since redis-ui uses styled components, all these values are in the theme used for styled components.
You can obtain the theme via a hook:

import { useTheme } from '@redis-ui/styles'

[pd-redis]

Also each styled component gets a theme prop, that is the same as the result of useTheme

See /redisinsight/ui/src/components/base/display/loader/Loader.tsx for some example usage.

[pawelangelow]

I applied changes regarding this point.

[pd-redis]

where is this defined?

[pawelangelow]

You can find them in redisinsight/ui/src/styles/themes, specifically within darkTheme and lightTheme.
Not sure if this is the best source to pull from - if you have a better suggestion, feel free to share!

[pawelangelow]

Now I changed it to get the values from the redis-ui theme.

[pd-redis]

isn't that already exported above?

[pawelangelow]

Not sure if I understand the question properly, but this is an extension to BoxSelectionGroupBox as we want to support text as well. So I'm exporting the type for the consumers of this component.

[pd-redis]

I might be missing something, but these look identical - BoxSelectionOption interface

[pd-redis]

LGTM