title: Export TypeScript typed string prop values from a React component?
body: <p>I have a React / TypeScript component. In Button.tsx:</p>
  
  <pre><code>type Props = {
    type: 
      | "primary"
      | "secondary"
      | "tertiary"
  }
  
  const Button = React.FC&lt;Props&gt; = ({ type }) =&gt; {
      const color = (() =&gt; {
          switch (type) {
            case "primary":
              return 'red';
            case "secondary":
              return 'blue';
            case "tertiary":
              return 'green';
            default:
              throw new Error("A backgroundColor condition was missed");
          }
      })();
  
      return(
          &lt;button style={{ background: color }}&gt;Im a button&lt;/button&gt;
      )
  }
  </code></pre>
  
  <p>Which I can use in other components. In Page.tsx:</p>
  
  <pre><code>const Page = () =&gt; {
      return(
          &lt;div&gt;
              &lt;h1&gt;Heading&lt;/h1&gt;
              &lt;Button type="primary" /&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>In Storybook I need to use all of the type values. In Button.stories.js:</p>
  
  <pre><code>const types = [
    "primary",
    "secondary",
    "tertiary",
  ];
  
  export const AllButtons = () =&gt; {
      return(
          types.map(type=&gt;{
              &lt;Button type={type} key={type} /&gt;
          })
      )
  }
  </code></pre>
  
  <p>Rather than having to repeat "primary", "secondary", "tertiary" is there a way I can export them from Button.tsx? That way if a new type is added the Storybook file will automatically have it. </p>
  
  <p>I could use an enum in Button.tsx: </p>
  
  <pre><code>export enum Types {
    primary = "primary",
    secondary = "secondary",
    tertiary = "tertiary",
  }
  
  type Props = {
    type: Types;
  };
  </code></pre>
  
  <p>However then components that use Button cant just pass a string, you would have to import the enum every time you used Button, which isn't worth the trade off. In Page.tsx:</p>
  
  <pre><code>import { Type } from './Button'
  
  const Page = () =&gt; {
      return(
          &lt;div&gt;
              &lt;h1&gt;Heading&lt;/h1&gt;
              &lt;Button type={Type.primary} /&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>