diff --git a/.vscode/settings.json b/.vscode/settings.json index 1fa1a008..6c3bf43d 100644 --- a/.vscode/settings.json +++ b/.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", diff --git a/README.md b/README.md index a8b3053c..8b109ca0 100755 --- a/README.md +++ b/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! diff --git a/bundle-analysis.html b/bundle-analysis.html index 8cb82f5e..f1f2993d 100644 --- a/bundle-analysis.html +++ b/bundle-analysis.html @@ -124,7 +124,7 @@