Import props in Storybook select options

Question

I have interface specified:

interface Props{
   type: 'dog' | 'cat' | 'mouse' | 'turtle' | 'rabbit'
}

export default Props;

In reality that list of all allowed string values is quite long. Is it possible to populate my story in Storybook based on Props?

I tried doing this:

import React, {ReactElement} from 'react';
import Props from '../typings';

export default {
  title: 'Animals',
  component: Animal,
  argTypes: {
    type: {
      control: {
        type: 'select',
        options: [...Props.type],
      },
    },
  },
};

i'm afraid you can't. Interface and type can only be in the type assignment, not non-type. — windmaomao, Sep 10 '21 at 12:59

score 0 · Answer 1 · answered Sep 10 '21 at 13:07

There might be tricks to do what you need, but most require you to stay in the type side. Check, Get keys of a Typescript interface as array of strings

But I found one solution easy to apply.

class Props {
   id = ''
}

const k = Object.keys(new Props())
console.log(k)

If you define it as a class, and once it create a new one based on this class, then everything else becomes a instantiated variable.

Import props in Storybook select options

1 Answers1