jefrydco / kotti

💅 3YOURMIND’s Vue UI Framework & Design System

@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 [e-mail]:3yourmind/kotti

cd kotti

# configure github email for this repository
git config user.email "[e-mail]"

# 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