@3yourmind/kotti-ui

Complete. The most commonly-needed components are implemented in Kotti. More components will be implemented when there is a specific need for them. TypeScript Support. Kotti is transitioning to a fully TypeScript-based code-base. While Vue doesn’t support all TS features, we believe that it’s still benefitial in the supported cases. Modern. Kotti aims to be a modern UI framework, regularly iterating over the existing design and adjusting it with newer UX improvements.
Consistent. The goal is to provide consistent, intuitive, and easy-to-use Vue components that users can immediately understand. Similar components shouldn’t defy expectations. Fail-fast. We believe that it’s better to error early than to have hard-to-catch bugs due to API misuse. Our components provide prop validation to catch common mistakes and throw errors in unexpected situations. Open-Source. Kotti is licensed under the MIT License — one of the most-permissible software licenses out there. Feel free to fork, modify, and use it. For any project you want.

Installation

yarn add @3yourmind/kotti-ui

or

npm install --save @3yourmind/kotti-ui

Documentation & Usage

Documentation: current release or current master

// in main.ts / entrypoint
import Vue from 'vue'
import KottiUI from '@3yourmind/kotti-ui'
import '@3yourmind/kotti-ui/dist/styles.css'

// also make sure to set-up @vue/composition-api as it’s required for newer Kotti features
import VueCompositionAPI from '@vue/composition-api' // right now, 0.6.1 is recommended
Vue.use(VueCompositionAPI) // should be added before KottiUi

// (optional) register all KtComponents globally
Vue.use(KottiUI)

// Alternatively, import the components you need
import { KtForm } from '@3yourmind/kotti-ui'

const CustomVueComponent = {
	// ...
	components: {
		//...
		KtForm,
	},
}

Packages

Name NPM Downloads (Month) Downloads (Total) Size
@3yourmind/kotti-ui
@3yourmind/yoco
@3yourmind/vue-use-tippy
@3yourmind/sass-node-modules-importer

Development Workflow

Initial Setup

Remember to use your GitHub email for this repo

git clone git@github.com:3yourmind/kotti

cd kotti

# configure github email for this repository
git config user.email "123456+githubusername@users.noreply.github.com"

# install dependencies
yarn config set workspaces-experimental true
yarn install
yarn run lerna bootstrap

Develop

# auto-build/watch
yarn run watch

or

# having to build should hopefully be resolved in a future update
yarn workspace @3yourmind/sass-node-modules-importer run build
yarn workspace @3yourmind/yoco run build
yarn workspace @3yourmind/vue-use-tippy run build
yarn workspace @3yourmind/kotti-ui run build
# serve at http://localhost:3000
yarn workspace @3yourmind/documentation run serve

Linting

# es-lint (with --fix)
yarn run fix:eslint
# es-lint (without --fix)
yarn run check:eslint

# stylelint (with --fix)
yarn run fix:stylelint
# stylelint (without --fix)
yarn run check:stylelint

Testing

yarn run test

Publish

# you may need login to npm with your credentials if you have publishing rights
npm login

# update the version in `package.json`
# make sure to commit the version bump changes before publishing then run:

node --version
# make sure it’s 12.x

yarn run lerna publish from-package

# update release notes
# https://github.com/3YOURMIND/kotti/releases/new

Build

yarn run lerna run build

Internals

Important Folders

Path Purpose
packages/documentation Nuxt-managed documentation