# Griddo CLI

CLI tool for scaffolding Griddo components, modules and templates for the Typescript instances with AutoTypes support.

## Installation

Don't install it, use with npx:

```bash
npx @griddo/cli@latest <command>
```

## Quick Start

Initialize Griddo CLI in your project:

```bash
npx @griddo/cli@latest init
```

Create your first component:

Griddo CLI will use it's internal templates in order to create the file content.
Go to [Using custom templates](#using-custom-templates) to learn how to use your custom templates.

```bash
@griddo/cli@latest create-component MyButton
```

## Using custom templates

You can use your own templates and tell Griddo CLI to use them when creating elements. You just need to specify the path to the directory where the template is located in the `--template` argument. In the next section we'll see how to create a custom template.

```bash
@griddo/cli@latest create-module MyButton --template ./my-templates/basic-component
```

### Creating our first template

A template is a folder with the name we want that contains two folders `_schema` and `_ui` which, as you can suspect, is where the template files for schemas and for the React part will be housed.

Files that we want to be processed by Griddo CLI must have a `.tpl` extension, with `@.tpl` files being the main file for the schema and for React. Those that don't have this extension will simply be copied as is.

```text
my-templates/
└─ basic-module/
   ├─ _schema/
   │  └─ @.tpl
   └─ _ui/
      ├─ @.tpl
      ├─ stories.tsx.tpl
      └─ styles.module.css (No .tpl extension: This file will not be processed, it will be copied as is)
```

### Tags

Within the file content you can use certain tags that will allow you to inject the necessary data when creating the Griddo element.

**This is the list of available tags**

- `{{@KIND}}` -> Will be replaced by `component`, `module` or `template` depending on the command used.
- `{{@NAME}}` -> Will be replaced by the name of the created element, for example: `MyButton`
- `{{@DISPLAY_NAME}}` -> Will be replaced by the display-name specified in the command, if no display-name is specified this will be the name
- `{{@AUTOTYPES_IMPORT}}` -> Will be replaced by the alias we have configured for autotypes in the configuration file.

A basic example for a module file could be:

```js
import type { {{@NAME}}Props } from "{{@AUTOTYPES_IMPORT}}";

const {{@NAME}} = (props: {{@NAME}}Props) => {
  return <p>{props.title}</p>;
};

export default {{@NAME}};
```

If the command is used

`npx @griddo/cli create-module BasicContent`

The file will look like this

```tsx
import type { BasicContentProps } from "@/autotypes";

const BasicContent = (props: BasicContentProps) => {
	return <p>{props.title}</p>;
};

export default BasicContent;
```