Ikota NPM | npm.io

Overview

Ikota (Russian word for "hiccups", pronounced /ikóta/) is a CLI automation tool for working with React. It offers an automated component generator tool & more soon.

Install

$ npm i -g ikota
$ ikota component # or
$ npx ikota component

Usage

CLI offers a single command - component as for now.

With this command you can single-handedly generate essentially useful component folders with:

index.ts/js - Export file
config.ts/js - Configuration file
component.tsx/jsx - Main component file
styles.module.ext - Styling file

But first of all you'd wanna initialize the configuration file for ikota: ikota.config.js. To do that either use the ikota config command or run ikota component that will take you through the options that you can provide.

Note: ikota config will take an entire survey over all of the options, ikota component on the other hand only initializes essential options.

Example

Plugins

Plugins are the features that extend the work of ikota component generation. With them you can use custom preprocessors & much more. Some of the examples would be:

@ikota/example - An example plugin implementing Stylus preprocessor
more soon...

Create a plugin

If you want to make a plugin you will need to make an NPM package for that. With the example plugin you can have a quick start.

Plugin with preprocessor

To clarify, a preprocessor in ikota isn't always a CSS proprocessor but rather a custom template for component and to export one you'd need to export components key like this:

Typescript

export const components = {
  ...
}

CommonJS

module.exports = {
  components: {
    ...
  }
}
// or
exports.components = {
  ...
}

Inside of the components object you define preprocessors where the key name stands for its value & name and the object of the preprocessor per se contains functions & file names for:

index - Export file
config - Configuration file
component - Main component file
style - Styling file

Note: It's recommended for you to name your preprocessor in lowercase as the ikota config automatically capitalizes your name and there's no need for doing that manually. Also consider using kebab-case over whitespaces.

Your average plugin would look like this:

export const components = {
  // Key name stands for preprocessor name
  'example-styl': {
    // Component file
    component: {
      // Name of the file
      // Leave the name empty if you don't want to create a file
      fileName: (config: IkotaConfig, name: string) => "...",
      // String to write file as
      function: (config: IkotaConfig, name: string) => "...",
    },
    // Styling file
    style: {
      fileName: (config: IkotaConfig, name: string) => "...",
      function: (config: IkotaConfig, name: string) => "...",
    },
    // Config file
    config: {
      fileName: (config: IkotaConfig, name: string) => "...",
      function: (config: IkotaConfig, name: string) => "...",
    },
    // Exports file
    index: {
      fileName: (config: IkotaConfig, name: string) => "...",
      function: (config: IkotaConfig, name: string) => "...",
    },
  },
};