CSFy plop (#2160)

Co-authored-by: Danni <[email protected]>

Author: solimant

plop-templates/@react-spectrum/chromatic/Component.chromatic.tsx.hbs

@@ -11,26 +11,28 @@
  */
 
 import { {{~componentName~}} } from '../';
+import {Meta, Story} from '@storybook/react';
 import React from 'react';
 {{#if (includes scopes "@react-types")}}
 import {Spectrum{{componentName}}Props} from '@react-types/{{packageName}}';
 {{/if}}
-import {storiesOf} from '@storybook/react';
-
 {{#unless (includes scopes "@react-types")}}
+
 interface Spectrum{{componentName}}Props {
 
 }
 {{/unless}}
 
-storiesOf('{{componentName}}', module)
-  .add(
-    'name me',
-    () => render({})
-  );
+const meta: Meta<Spectrum{{componentName}}Props> = {
+  title: '{{componentName}}',
+  component: {{componentName}}
+};
 
-function render(props: Spectrum{{componentName}}Props = {}) {
-  return (
-    <{{componentName}} {...props} />
-  );
-}
+export default meta;
+
+const Template = (): Story<Spectrum{{componentName}}Props> => (args) => (
+  <{{componentName}} {...args}>This is a React Spectrum {{componentName}}</{{componentName}}>
+);
+
+export const Default = Template().bind({});
+Default.args = {};

plop-templates/@react-spectrum/stories/Component.stories.tsx.hbs

@@ -11,23 +11,29 @@
  */
 
 import {action} from '@storybook/addon-actions';
-{{#if (includes scopes "@react-types")}}
 import { {{~componentName~}} } from '../';
+import {Meta, Story} from '@storybook/react';
+import React from 'react';
+{{#if (includes scopes "@react-types")}}
 import {Spectrum{{componentName}}Props} from '@react-types/{{packageName}}';
-{{else}}
-import { {{~componentName}}, Spectrum{{componentName}}Props} from '../';
 {{/if}}
-import React from 'react';
-import {storiesOf} from '@storybook/react';
+{{#unless (includes scopes "@react-types")}}
 
-storiesOf('{{componentName}}', module)
-  .add(
-    'name me',
-    () => render({})
-  );
+interface Spectrum{{componentName}}Props {
 
-function render(props: Spectrum{{componentName}}Props) {
-  return (
-    <{{componentName}} {...props} onChange={action('onChange')} />
-  );
 }
+{{/unless}}
+
+const meta: Meta<Spectrum{{componentName}}Props> = {
+  title: '{{componentName}}',
+  component: {{componentName}}
+};
+
+export default meta;
+
+const Template = (): Story<Spectrum{{componentName}}Props> => (args) => (
+  <{{componentName}} {...args}>This is a React Spectrum {{componentName}}</{{componentName}}>
+);
+
+export const Default = Template().bind({});
+Default.args = {onChange: action('onChange')};