Merge pull request #531 from catho/QTM-528

fix[QTM-528] Fixes Create a Component script

Author: alizeleal

Diff for: CONTRIBUTING.MD

@@ -73,7 +73,7 @@ Why _commitizen_? To enforce a padronization to the commits and make sure every
 
 7. Update the live documentation (Storybook);
 
-    Every component must be on the dynamic documentation of the Storybook. For this reason, every behavior of the component must be documented and up to date within the files `stories/<nome do componente criado>.stories.jsx` and `stories/<nome do componente criado>.story.mdx`.
+    Every component must be on the dynamic documentation of the Storybook. For this reason, every behavior of the component must be documented and up to date within the files `stories/<nome do componente criado>.stories.jsx` and `stories/<nome do componente criado>.mdx`.
 
 
 8.  After making your changes in the new git branch, add your modified files to git, [How to add, commit, push and go](http://readwrite.com/2013/10/02/github-for-beginners-part-2/).
@@ -194,7 +194,7 @@ Follow steps [1 and 2](#getting-started) from Getting Started.
 
 7. Update the live documentation (Storybook);
 
-    Each component must be on the dynamic documentation of the Storybook. Therefore, all the components' behaviors must be registered and updated in the files `stories/<name-of-the-edited-component>.stories.jsx` and `stories/<name-of-the-edited-component>.story.mdx`.
+    Each component must be on the dynamic documentation of the Storybook. Therefore, all the components' behaviors must be registered and updated in the files `stories/<name-of-the-edited-component>.stories.jsx` and `stories/<name-of-the-edited-component>.mdx`.
 
 8. Commit your changes using [commitizen](http://commitizen.github.io/cz-cli/);
 

Diff for: scripts/templates/component-story.js

@@ -1,6 +1,6 @@
 module.exports = (componentName) => [
   {
-    content: `<!-- Generated with scripts/create-componnent.js -->
+    content: `{/* Generated with scripts/create-componnent.js */}
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';
 import  ${componentName}  from '../../components/${componentName}';
 
@@ -26,14 +26,14 @@ import { ${componentName} } from '@catho/quantum';
 \`\`\`
 
 <Canvas>
-  <Story story={Default} />
+  <Story of={Default} />
 </Canvas>
 
 ## <a id="api"></a>API
 
 <ArgsTable of={${componentName}} />
     `,
-    name: `${componentName}.story.mdx`,
+    name: `${componentName}.mdx`,
   },
   {
     content: `// Generated with scripts/create-componnent.js
@@ -56,6 +56,11 @@ export const Default = Template.bind({})
 
 import ${componentName} from '../../components/${componentName}';
 
+export default {
+  title: '${componentName}',
+  component: ${componentName},
+};
+
 const Template = args => <${componentName} {...args} />;
 
 export const Default = Template.bind({})

Diff for: scripts/templates/component.js

@@ -50,13 +50,15 @@ export default ${componentName};
   {
     content: `
 // Generated with scripts/create-component.js
-import { Component } from 'react';
+import { FC } from 'react';
 
 export interface ${componentName}Props {
   someProp?: string;
 }
 
-export default class ${componentName} extends Component<${componentName}Props> {}
+
+declare const ${componentName}: FC<${componentName}Props>;
+export default ${componentName}
     `,
     name: `index.d.ts`,
   },