Skip to content

Commit

Permalink
Update docs CUSTOM_TEMPLATES
Browse files Browse the repository at this point in the history
  • Loading branch information
CVarisco committed Feb 26, 2018
1 parent 2fadb78 commit 6056fa5
Showing 1 changed file with 38 additions and 37 deletions.
75 changes: 38 additions & 37 deletions docs/CUSTOM-TEMPLATES.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,41 @@

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"
}
```

### 3) Create a folder for your template

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:
Expand All @@ -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
Expand All @@ -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 (
<div className="COMPONENT_NAME"></div>
);
}
constructor(props) {
super(props);
}

render() {
return <div className="COMPONENT_NAME" />;
}
}

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**

0 comments on commit 6056fa5

Please sign in to comment.