Keitaro UI

UI components for Keitaro tracker and the services.

Website https://keitaro.style

Staging https://style.keitaro.dev

Usage

Install NPM package

1. Install the package

   npm i @apliteni/keitaro-ui

2. Add to the app:

import '~@apliteni/keitaro-ui/scss/scss/variables.scss';
import '~@apliteni/keitaro-ui/scss/scss/components.scss';
import '~@apliteni/keitaro-ui/scss/scss/theme.scss';

Customization

Variables

Add before importing theme.scss:

// override variables

@import "~@apliteni/keitaro-ui/scss/variables";

Components

Instead of imporing components.scss you can import the components individually:

@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";

@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/accordion";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/offcanvas";
@import "~bootstrap/scss/helpers";
@import "~bootstrap/scss/utilities/api";

@import "~@apliteni/keitaro-ui/scss/fonts";

Development

1. Clone the repo.

(Optional) Link local npm

1. Run in this repo cd node_modules/react && npm link && cd ../../.

Publish

1. Bump package version in package.json.
2. Push to master or make a merge request.

FAQ

Error "Invalid hook call."

You must link react from the keitaro-ui.