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:

npx @griddo/cli@latest <command>

Quick Start

Initialize Griddo CLI in your project:

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 to learn how to use your custom templates.

@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.

@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.

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:

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

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

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

export default BasicContent;