<% if ( !isPlainJs ) { %>import type { ComponentStory, ComponentMeta } from '@storybook/react';<% } %>
import<% if ( !isPlainJs ) { %> { <% } %> <%= componentName %> <% if ( !isPlainJs ) { %> } <% } %> from './<%= componentImportFileName %>';

<% if ( isPlainJs ) { %>
export default {
  component: <%= componentName %>,
  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
  argTypes: {<% for (let argType of argTypes) { %>
    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
}
   <% } %> 
};
<% } %>


<% if ( !isPlainJs ) { %>
const Story: ComponentMeta<typeof <%= componentName %>> = {
  component: <%= componentName %>,
  title: '<%= componentName %>',<% if ( argTypes && argTypes.length > 0 ) { %> 
  argTypes: {<% for (let argType of argTypes) { %>
    <%= argType.name %>: { <%- argType.type %> : "<%- argType.actionText %>" },<% } %>
}
   <% } %> 
};
export default Story;
<% } %>

const Template<% if ( !isPlainJs ) { %>: ComponentStory< typeof <%= componentName %> ><% } %> = (args) => <<%= componentName %> {...args} />;

export const Primary = Template.bind({})
Primary.args = {<% for (let prop of props) { %>
    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
}