Adds patterns architecture

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.tabSize": 2,
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
   "editor.insertSpaces": true,
   "editor.autoClosingBrackets": "languageDefined",
   "editor.autoClosingQuotes": "languageDefined",

README.md

@@ -69,16 +69,21 @@ Now you are ready to use them :)!
 We have a folder called **commands** where I added a command to create a new component with all folder structure. The way you can use it is running in the terminal inside commands folder `sh createComponent componentName` replacing componentName by your component. You have to write the component name in _camelCase_ notation.
 After you run the command, you will see inside **src/lib/components** folder a new folder with your component, and 5 files inside:
 
-| Filename | Description |
-| --- | --- |
-| **componentName.module.scss** | SASS file for your component styles  |
-| **componentName.test.js** | Unit tests for your component. Includes some default settings, but you have to update with your component props, and you should add custom unit test there (Please, it's important you add those unit test) |
-| **componentName.md** | Used by styleguide to generate the example of your component. Fill this file with a complete example of the usage of your component. |
-| **componentName.js** | Rhe React component itself, should contain all the logic of your component. |
-| **index.js** | File responsible for exporting your component – you probably don't need to change anything here. |
+| Filename                      | Description                                                                                                                                                                                                 |
+| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **componentName.module.scss** | SASS file for your component styles                                                                                                                                                                         |
+| **componentName.test.js**     | Unit tests for your component. Includes some default settings, but you have to update with your component props, and you should add custom unit test there (Please, it's important you add those unit test) |
+| **componentName.md**          | Used by styleguide to generate the example of your component. Fill this file with a complete example of the usage of your component.                                                                        |
+| **componentName.js**          | Rhe React component itself, should contain all the logic of your component.                                                                                                                                 |
+| **index.js**                  | File responsible for exporting your component – you probably don't need to change anything here.                                                                                                            |
 
 After you created the component structure folder, you wrote unit test, you wrote your full react component and you added the markdown example, we are ready to test everything, so we go to the [next step](#how-to-test-components)
 
+#### How to create a new pattern component
+
+We have a folder called **commands** where I added a command to create a new component with all folder structure. The way you can use it is running in the terminal inside commands folder `sh createPattern patternName` replacing patternName by your component. You have to write the component name in _camelCase_ notation.
+After you run the command, you will see inside **src/lib/patterns** folder a new folder with your component, and same 5 files as we mentioned before.
+
 #### How to test components
 
 Nice, so you have already created a new component :+1:, that is great!

commands/createPattern

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+componentFile=$1
+componentName="$(tr '[:lower:]' '[:upper:]' <<< ${componentFile:0:1})${componentFile:1}"
+
+cd ../src/lib/patterns
+mkdir $componentFile
+touch $componentFile/$componentFile.js
+touch $componentFile/$componentFile.md
+touch $componentFile/$componentFile.test.js
+touch $componentFile/$componentFile.module.scss
+touch $componentFile/index.js
+echo "import $componentName from './$componentFile';\n\nexport default $componentName;" > "$componentFile/index.js"
+echo "import React from 'react';\nimport renderer from 'react-test-renderer';\nimport $componentName from './$componentFile.js';\n\ndescribe('$componentName', () => {\n\tit('renders properly', () => {\n\t\tconst tree = renderer\n\t\t\t.create(\n\t\t\t\t<$componentName />,\n\t\t\t)\n\t\t\t.toJSON();\n\t\texpect(tree).toMatchSnapshot();\n\t});\n});" > "$componentFile/$componentFile.test.js"
+echo "\`\`\`js\n\n\`\`\`" > "$componentFile/$componentFile.md"
+echo "export { default as $componentName } from './$componentFile';" >> "index.js"
+echo "@import '../../styles/variables/variables.module.scss';\n@import '../../styles/themes/themes.module.scss';" > "$componentFile/$componentFile.module.scss"
+echo "import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport { componentPropTypes, defaultComponentPropTypes } from '../../utils/componentPropTypes';\nimport styles from './$componentFile.module.scss';\n\nexport default class $componentName extends PureComponent {\n\tstatic propTypes = {\n\t\t...componentPropTypes,\n\t};\n\n\tstatic defaultProps = {\n\t\t...defaultComponentPropTypes,\n\t};\n\n\trender() {\n\t\tconst { theme } = this.props;\n\t\treturn (\n\t\t\t<div className={styles[\`theme-\${theme}\`]}></div>\n\t\t);\n\t}\n}\n" >> "$componentFile/$componentFile.js"