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.
$ npm i -g ikota
$ ikota component # or
$ npx ikota component
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 fileconfig.ts/js
- Configuration filecomponent.tsx/jsx
- Main component filestyles.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.
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 implementingStylus
preprocessor@ikota/mantine
- A mantine preprocessor (template) implementation for ikota.- more soon...
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.
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 usingkebab-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) => "...",
},
},
};
Note: In future updates such approach can be changed but as for now you can use this.
All the available documentation regarding the usage of the CLI is displayed in a help command:
$ ikota # or
$ ikota help
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
This project is under MIT license. You can freely use it for your own purposes.