Use library. Fix window path. Update template variables and documentation

Author: Fabs

CHANGE-NOTES.md

@@ -1,3 +1,7 @@
+- v0.6.0 Use component-creator-lib
+    - Fix windows paths
+    - Update documentation
+    - Add camelcase and pascalcase variables for templates
 - v0.5.0 Checkboxes checked by default can be configured in the settings
 - v0.4.0 Add Customisable templates. Improve a lot of code. Update doc
 - v0.2.1 Export enum for action types

README.md

@@ -5,18 +5,17 @@
 ![Rating](https://img.shields.io/jetbrains/plugin/r/rating/13965-react-component-creator?style=for-the-badge)
 
 
-- An Brainstorm Plugin to create a new react functional component with all additional files like
-SCSS, Spec, Storybook.
-- Add Redux reducer module with actions, mutations, state and types.
-- Add custom templates to match your coding style and your needs.
+An Brainstorm Plugin to create a new react functional component with all additional files like
+SCSS, Spec, Storybook. Add Redux reducer module with actions, mutations, state and types. 
+Add custom templates to match your coding style and your needs.
 
 
-![Settings](https://github.com/faebeee/react-component-creator-plugin/blob/master/doc/settings.png?raw=true "")
-![Create component](https://github.com/faebeee/react-component-creator-plugin/blob/master/doc/create_component.gif?raw=true "")
-![Create Reducer](https://github.com/faebeee/react-component-creator-plugin/blob/master/doc/create_reducer.gif?raw=true "")
+![Settings](https://github.com/component-creator-plugin/react-component-creator-plugin/blob/master/doc/settings.png?raw=true "")
+![Create component](https://github.com/component-creator-plugin/react-component-creator-plugin/blob/master/doc/create_component.gif?raw=true "")
+![Create Reducer](https://github.com/component-creator-plugin/react-component-creator-plugin/blob/master/doc/create_reducer.gif?raw=true "")
 
 # Install
-Search for `React Component Creator` in the plugins settings. Or download the plugin from the [release site](https://github.com/faebeee/react-component-creator-plugin/releases)
+Search for `React Component Creator` in the plugins settings. Or download the plugin from the [release site](https://github.com/component-creator-plugin/react-component-creator-plugin/releases)
 
 # Custom Templates
 If you are not happy with the predefined templates, you can choose your
@@ -31,17 +30,18 @@ Following variables are available
 | variable | Description |
 |---|---|
 | {{componentName}} | the inputted component name. Without any alterations |
-| {{componentCamelcaseName}} | Camelcased input `my-component` becomes `MyComponent` |
+| {{componentNameCamelCase}} | camelcased input `my-component` becomes `myComponent` |
+| {{componentNamePascalCase}} | pascalcased input `my-component` becomes `MyComponent` |
 
 **Reducer**
 
 | variable | Description |
 |---|---|
+| {{componentName}} | Name of the folder |
+| {{componentNameCamelCase}} | camelcased input `my-component` becomes `myComponent` |
+| {{componentNamePascalCase}} | pascalcased input `my-component` becomes `MyComponent` |
 | {{actionFunctionName}} | Name of the function inside the `actions.ts` file |
-| {{moduleName}} | Name of the folder |
 | {{mutationType}} | String which will be used as type of the dispatch/mutation |
-| {{moduleNamePascalCase}} | Pascalcased moduleName |
-| {{stateName}} | Name for the state. `my-component` becomes `MyComponentState` |
 | {{actionTypeName}} | Takes the input of `actionFunctionName` and capitalizes the first letter and appends `Action`. From `setData` becomes `SetDataAction` |
 | {{actionTypesEnumName}} | Name used for the action types enum. actionTypesEnumName is the namespace where all `mutationType` actions are kept |
 

lib/component-creator-lib.jar

@@ -1,7 +1,7 @@
 <idea-plugin>
     <id>com.faebeee.reactcomponentcreator</id>
     <name>React Component Creator</name>
-    <version>0.5.0</version>
+    <version>0.6.0</version>
     <vendor email="[email protected]" url="http://fabs.io">Fabio Gianini</vendor>
 
     <!-- please see http://www.jetbrains.org/intellij/sdk/docs/basics/getting_started/build_number_ranges.html for description -->
@@ -13,112 +13,73 @@
     <depends>com.intellij.modules.lang</depends>
     <description>
         <![CDATA[
-            <h1><a href="#react-component-creator" id="react-component-creator">react-component-creator</a></h1>
-<p><img src="https://img.shields.io/jetbrains/plugin/d/13965-react-component-creator?style=for-the-badge" alt="Downloads" />
-<img src="https://img.shields.io/jetbrains/plugin/v/13965-react-component-creator?style=for-the-badge" alt="Version" />
-<img src="https://img.shields.io/jetbrains/plugin/r/rating/13965-react-component-creator?style=for-the-badge" alt="Rating" /></p>
-<ul>
-  <li>An Brainstorm Plugin to create a new react functional component with all additional files like
-    SCSS, Spec, Storybook.</li>
-  <li>Add Redux reducer module with actions, mutations, state and types.</li>
-  <li>Add custom templates to match your coding style and your needs.</li>
-</ul>
-<p><img src="https://github.com/faebeee/react-component-creator-plugin/blob/master/doc/settings.png?raw=true" alt="Settings" title="" />
-<img src="https://github.com/faebeee/react-component-creator-plugin/blob/master/doc/create_component.gif?raw=true" alt="Create component" title="" />
-<img src="https://github.com/faebeee/react-component-creator-plugin/blob/master/doc/create_reducer.gif?raw=true" alt="Create Reducer" title="" /></p>
-<h1><a href="#install" id="install">Install</a></h1>
-<p>Search for <code>React Component Creator</code> in the plugins settings. Or download the plugin from the <a href="https://github.com/faebeee/react-component-creator-plugin/releases">release site</a></p>
-<h1><a href="#custom-templates" id="custom-templates">Custom Templates</a></h1>
-<p>If you are not happy with the predefined templates, you can choose your
-own templates. The templates will be processed with mustache as templating.
-All variables can also be used for the filenames.</p>
-<p>Following variables are available</p>
-<p><strong>Component</strong></p>
-<table>
-  <thead>
-    <tr><th> variable </th><th> Description </th></tr>
-  </thead>
-  <tbody>
-    <tr><td> {{componentName}} </td><td> the inputted component name. Without any alterations </td></tr>
-    <tr><td> {{componentCamelcaseName}} </td><td> Camelcased input <code>my-component</code> becomes <code>MyComponent</code> </td></tr>
-  </tbody>
-</table>
-<p><strong>Reducer</strong></p>
-<table>
-  <thead>
-    <tr><th> variable </th><th> Description </th></tr>
-  </thead>
-  <tbody>
-    <tr><td> {{actionFunctionName}} </td><td> Name of the function inside the <code>actions.ts</code> file </td></tr>
-    <tr><td> {{moduleName}} </td><td> Name of the folder </td></tr>
-    <tr><td> {{mutationType}} </td><td> String which will be used as type of the dispatch/mutation </td></tr>
-    <tr><td> {{moduleNamePascalCase}} </td><td> Pascalcased moduleName </td></tr>
-    <tr><td> {{stateName}} </td><td> Name for the state. <code>my-component</code> becomes <code>MyComponentState</code> </td></tr>
-    <tr><td> {{actionTypeName}} </td><td> Takes the input of <code>actionFunctionName</code> and capitalizes the first letter and appends <code>Action</code>. From <code>setData</code> becomes <code>SetDataAction</code> </td></tr>
-    <tr><td> {{actionTypesEnumName}} </td><td> Name used for the action types enum. actionTypesEnumName is the namespace where all <code>mutationType</code> actions are kept </td></tr>
-  </tbody>
-</table>
-<h1><a href="#development" id="development">Development</a></h1>
-<p>Follow the <a href="./doc/DEVELOPMENT.md">Setup Instructions</a></p>
-<h1><a href="#icons" id="icons">Icons</a></h1>
-<p>Icons provided by <a href="https://www.iconfinder.com/justicon">https://www.iconfinder.com/justicon</a> via <a href="https://www.iconfinder.com">https://www.iconfinder.com</a></p>
+An Brainstorm Plugin to create a new react functional component with all additional files like
+SCSS, Spec, Storybook. Add Redux reducer module with actions, mutations, state and types.
+Add custom templates to match your coding style and your needs.
         ]]>
     </description>
 
     <change-notes>
         <![CDATA[
 <ul>
-  <li>v0.5.0 Checkboxes checked by default can be configured in the settings</li>
-  <li>v0.4.0 Add Customisable templates. Improve a lot of code. Update doc</li>
-  <li>v0.2.1 Export enum for action types</li>
-  <li>v0.2.1 Export enum for action types</li>
-  <li>v0.2.0 Add <code>Add Redux Reducer</code> Action</li>
-  <li>v0.1.0 Add <code>Add React Component</code> Action</li>
+<li>v0.6.0 Use component-creator-lib
+<ul>
+<li>Fix windows paths</li>
+<li>Update documentation</li>
+<li>Add camelcase and pascalcase variables for templates</li>
+</ul>
+</li>
+<li>v0.5.0 Checkboxes checked by default can be configured in the settings</li>
+<li>v0.4.0 Add Customisable templates. Improve a lot of code. Update doc</li>
+<li>v0.2.1 Export enum for action types</li>
+<li>v0.2.1 Export enum for action types</li>
+<li>v0.2.0 Add <code>Add Redux Reducer</code> Action</li>
+<li>v0.1.0 Add <code>Add React Component</code> Action</li>
 </ul>
         ]]>
     </change-notes>
 
 
     <extensions defaultExtensionNs="com.intellij">
         <projectConfigurable
-                instance="fabs.react.component.settings.ComponentSettings"
+                instance="io.fabs.react.component.settings.ComponentSettings"
                 id="rcc.settings"
                 displayName="React Component Creator"
                 nonDefaultProject="true"/>
 
         <projectConfigurable
-                instance="fabs.react.reducer.settings.ReducerSettings"
+                instance="io.fabs.react.reducer.settings.ReducerSettings"
                 id="rcc.settings.redux"
                 displayName="Redux"
                 parentId="rcc.settings"
                 nonDefaultProject="true"/>
 
         <projectConfigurable
-                instance="fabs.react.component.settings.ComponentSettings"
+                instance="io.fabs.react.component.settings.ComponentSettings"
                 id="rcc.settings.component"
                 displayName="Component"
                 parentId="rcc.settings"
                 nonDefaultProject="true"/>
 
-        <projectService serviceInterface="fabs.react.reducer.data.ReducerSettingsState"
-                        serviceImplementation="fabs.react.reducer.data.ReducerSettingsState"/>
+        <projectService serviceInterface="io.fabs.react.reducer.data.ReducerSettingsState"
+                        serviceImplementation="io.fabs.react.reducer.data.ReducerSettingsState"/>
 
-        <projectService serviceInterface="fabs.react.component.data.ComponentSettingsState"
-                        serviceImplementation="fabs.react.component.data.ComponentSettingsState"/>
+        <projectService serviceInterface="io.fabs.react.component.data.ComponentSettingsState"
+                        serviceImplementation="io.fabs.react.component.data.ComponentSettingsState"/>
     </extensions>
 
     <actions>
         <group description="React" id="React">
             <separator/>
             <action id="ReactComponent.ComponentCreatorAction"
-                    class="fabs.react.component.action.ComponentCreatorAction"
+                    class="io.fabs.react.component.action.ComponentCreatorAction"
                     icon="/icons/component.png"
                     text="React component"
                     description="create new react component">
             </action>
 
             <action id="ReactComponent.ReducerCreatorAction"
-                    class="fabs.react.reducer.action.ReducerCreatorAction"
+                    class="io.fabs.react.reducer.action.ReducerCreatorAction"
                     icon="/icons/store.png"
                     text="Redux reducer"
                     description="create new redux reducer">

resources/META-INF/plugin.xml

@@ -1,14 +1,3 @@
 .{{ componentName }} {
-    // Vars
 
-    // Support
-
-    // Module
-    & {
-        //
-    }
-
-    // Facets
-
-    // States
 }

resources/templates/component/_{{componentName}}.scss.mustache

@@ -1,4 +1,4 @@
-# {{ componentCamelcaseName }}
+# {{ componentNameCamelCase }}
 
 Description of component
 

resources/templates/component/{{componentName}}.md.mustache

@@ -1,9 +1,9 @@
 import React from 'react';
 import { expect } from 'chai';
-import {{ componentCamelcaseName }} from './{{ componentName }}';
+import {{ componentNamePascalCase }} from './{{ componentName }}';
 
-describe('{{ componentName }}', function {{ componentCamelcaseName }}Spec () {
+describe('Spec {{ componentNamePascalCase }}', function () {
     it('it exists', () => {
-        expect({{ componentCamelcaseName }}).to.be.ok;
+        expect({{ componentNamePascalCase }}).to.be.ok;
     });
 });

resources/templates/component/{{componentName}}.spec.tsx.mustache

@@ -1,12 +1,7 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import centered from '@storybook/addon-centered/react';
-import {{ componentCamelcaseName }} from './{{componentName}}';
+import {{ componentNamePascalCase }} from './{{componentName}}';
 
-const stories = storiesOf('{{ componentName }}', module)
-    .addDecorator(centered);
-
-stories.add(
-    'Default',
-    () => (<{{componentCamelcaseName}}/>),
-);
+export default {
+    title: "{{ componentNamePascalCase }}",
+    component: componentNamePascalCase
+};

resources/templates/component/{{componentName}}.story.tsx.mustache

@@ -2,6 +2,6 @@ import React from 'react';
 
 type Props = {}
 
-export default function {{ componentCamelcaseName }}({}: Props) {
+export default function {{ componentNameCamelCase }}({}: Props) {
     return (<div className="{{ componentName }}"/>);
 }

resources/templates/component/{{componentName}}.tsx.mustache

@@ -1,3 +1,3 @@
 export enum {{ actionTypesEnumName }} {
-    {{ mutationType }} = '{{ moduleName }}/{{ mutationType }}',
+    {{ mutationType }} = '{{ componentNameCamelCase }}/{{ mutationType }}',
 }