Component Templates

This project is a collection of component templates that can be used to create new components for the Codux. It is also contains a catalog of the components that are created using these templates as the main app.

How to create a new component template

Create a new folder in the src/component-templates directory with the component name in snake case all lowercase and dashed. (e.g. fancy-button, fine-card, tpl-input, etc.)

The folder should contain the following files: where COMPONENT_NAME is the name of the component. (same as the folder name)

• COMPONENT_NAME.tsx - The component template.
• COMPONENT_NAME.module.css - The component styles.
• COMPONENT_NAME.component.json - The component packer metadata entry.
• metadata - Directory containing the component metadata (will not be included in the installation).

Code Template Variables

The component template can contain variables that will be replaced with the actual values when the component is created. Currently, the following variables are supported:

• ___COMPONENT_NAME___ - The name of the component.

Note:

We do not replace variables in all text files. We only replace variables in typescript, .css, .md and .json files. (this can be changed according to the requirement)

Casing Convention

There is a casing convention for the variables:

• if the variable is title case, we replace it with the title case value.
• if the variable starts with lower case, we replace it with the camel case value.
• if the variable is in snake case, we replace it with the snake case value.

Components Catalog Scripts

In the project directory, you can run:

npm run build

Build the application in production mode into a folder named dist. This folder can be served using any HTTP server.

npm run dev

Start dev server, aliases: vite dev, vite serve.
Open http://127.0.0.1:5173/ to view it in the browser.

npm run preview

Boots up a local static web server that serves the files from dist at http://localhost:4173 . It's an easy way to check if the production build looks OK in your local environment.