diff --git a/docs/CUSTOM-TEMPLATES.md b/docs/CUSTOM-TEMPLATES.md index d125c2c..7b596f7 100644 --- a/docs/CUSTOM-TEMPLATES.md +++ b/docs/CUSTOM-TEMPLATES.md @@ -2,21 +2,22 @@ With this library you can create your own templates and use them to generate your components in a second! -### 1) Create your custom templates folder +### 1) Create your custom template folder -Create a folder where you want. -In this folder we will put the custom templates. +Create a folder to contain all your custom templates. +In this folder we will put the custom templates folders. ### 2) Add the folder to the config -Create a `config.json` (in the `.ccarc` folder or where you want) file where you write the options to generate your components from the custom templates. +Create a [config file](https://github.com/CVarisco/create-component-app#you-can-create-a-configuration-file-in-your-current-project-directory) where you write the options to generate your components from the custom templates folder -config.json: +config: ```json { - "templatesDirPath": "PATH/OF/CUSTOM/TEMPLATES/FOLDER", - "templateName": "NAME_OF_TEMPLATE_FOLDER" + "type": "custom", + "templatesDirPath": "PATH/OF/CUSTOM/TEMPLATES/FOLDER", + "templateName": "NAME_OF_TEMPLATE_FOLDER" } ``` @@ -24,17 +25,18 @@ config.json: Create a folder inside the templates folder Inside this folder we will put all the files of the template. +[Examples](https://github.com/CVarisco/create-component-app/tree/master/templates) ### 4) Create your templates Create your templates file. -The only thing that you need to set in the template is the name of the component. +The only thing that you need to set in the template is the name of the component. -- *Note: filenames with **COMPONENT_NAME** will be replaced with the component name.* -- *Note: filename that includes "index" will not renamed* -- *Note: the extension of the file will be used (so, use whatever you want)* +* _Note: filenames with **COMPONENT_NAME** will be replaced with the component name._ +* _Note: filename that includes "index" will not renamed_ +* _Note: the extension of the file will be used (so, use whatever you want)_ -#### You can create a configuration file in your template directory +#### (Optional) You can create a configuration file in your template directory Create-component-app uses [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) for configuration file support. This means you can configure cca via: @@ -47,7 +49,6 @@ and searching up the file tree until a config file is (or isn't) found. Example of component custom template `.ccarc`: - ```js { "noMkdir": true, // will spread the template files in the output directory @@ -57,53 +58,53 @@ Example of component custom template `.ccarc`: Example of component custom template `template.js`: ```javascript -import React, {Component} from 'react' -import PropTypes from 'prop-types' +import React, { Component } from "react"; +import PropTypes from "prop-types"; class COMPONENT_NAME extends Component { - constructor(props) { - super(props) - } - - render() { - return ( -
- ); - } + constructor(props) { + super(props); + } + + render() { + return
; + } } -COMPONENT_NAME.propTypes = {} +COMPONENT_NAME.propTypes = {}; -COMPONENT_NAME.defaultProps = {} +COMPONENT_NAME.defaultProps = {}; -export default COMPONENT_NAME +export default COMPONENT_NAME; ``` Example of custom style file `style.scss`: ```css -@import 'partials/variables' - -.COMPONENT_NAME{ - background-color: $grey; +@import "partials/variables" .COMPONENT_NAME { + background-color: $grey; } -.container .COMPONENT_NAME{ - background-color: $yellow; +.container .COMPONENT_NAME { + background-color: $yellow; } ``` - ### 5) Launch the tool Launch the tool to generate components or pass a arg ```bash -create-component-app --template $TEMPLATE_NAME +create-component-app ``` -**$TEMPLATE_NAME should be the name of the subfolder +Optional: + +```bash +create-component-app --template $TEMPLATE_NAME +``` -Select the name and the destination path of your templates. +$TEMPLATE_NAME should be the name of the subfolder. +This argument override the `templateName` option in your config file. **NOTE: With this configuration, you can add only the `path` parameter to set the default destination. The others parameters will be ignored**