Import array prop types's oneOf

[garraflavatra]

Question

I have an src/style/colours.js file:

// src/style/colours.js

export const colours = {
  primary: '#5352ED',
  secondary: '#0086B3',
  positive: '#2ED573',
  negative: '#FF4757',
  warning: '#FFA502',
  danger: '#FF3300',
}

export const colourNames = [
  'primary',
  'secondary',
  'positive',
  'negative',
  'warning',
  'danger',
]

And an Alert component, which imports the colour file and uses it to define the component's prop types:

// Alert.jsx

import React from 'react'
import t from 'prop-types'
import { colours, colourNames } from '../../style/colours'

export const Alert = ({ children, kind, ...rest }) => (
  <div
    style={{
      padding: 20,
      borderRadius: 3,
      color: 'white',
      background: colours[kind],
    }}
    {...rest}
  >
    {children}
  </div>
)

Alert.propTypes = {
  /**
   * The kind prop is used to set the alert's background color
   */
  kind: t.oneOf(colourNames),
}

Alert.defaultProps = {
  kind: 'primary',
}

If I use <Props of={Alert} /> in my docs, the output becomes (note enum):

But when I use an inline array like this:

Alert.propTypes = {
  /**
   * The kind prop is used to set the alert's background color
   */
  kind: t.oneOf([
    'primary',
    'secondary',
    'positive',
    'negative',
    'warning',
    'danger',
  ]),
}

The <Props /> component shows the available options (primary, secondary etc...).

How can I import the colourNames array from colours.js to Alerts's prop types, if I want Docz's <Props /> to display the available options?

Thanks in advance.