@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: https://kotti.onrender.com or https://3yourmind.github.io/kotti/

// 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

Dependencies

Some features of KtFieldFileUpload rely on WebRTC. This technology should be available on all modern browsers as well as on native clients for all major platforms.

If you have issues accessing the device's camera, include the webrtc-adapter package.

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

Handling Rebases

There are two workflows to help with rebasing pull requests:

  1. Rebase
    Commenting /rebase on any pull request will trigger a GitHub Action that rebases the PR. This is best used when attempting to rebase a PR without auto-rebase before merging.
  2. Auto-Rebase
    Adding the autorebase:opt-in label to any pull request will automatically rebase the PR as soon as it’s out-of-date. This should preferrably be used by the author, as it requires them to be aware of having to use git pull --rebase

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

Publishing

Kotti

  1. Prepare a new release draft here

    a. Tag format: v1.2.3 (select Create new tag: v1.2.3 on publish)

    b. Title format: 1.2.3: tldr of what's happening

    c. Release notes: Follow guidelines of previous releases

    d. Click on Save draft

  2. Checkout the master branch in the Kotti repository and pull latest changes

git checkout master
git pull --rebase
  1. Install/update dependencies
yarn install
  1. Build Kotti. Make sure it builds successfully and functionally test the changes made.
yarn run watch
  1. Login into NPM with your credentials. Make sure you have publishing rights and 2FA on your npmjs.com account enabled.
npm login

  1. Update the version in package.json in packages/kotti-ui and all @3yourmind/kotti-ui dependencies in:

    a. packages/documentation

    b. packages/storybook

    c. packages/test-app

  2. Make a version commit, DO NOT PUSH yet.

    a. Commit message format: version(1.2.3): tldr of what's happening

  3. Publish. Lerna will auto-detect the packages whose versions got updated in package.json and ask you to confirm the packages to be updated and their corresponding versions.

yarn run lerna publish from-package
  1. Push the version commit to remote
git push

  1. Find the release draft from step 1 here, edit it and click on Publish release

  2. Announce the new version in the #kotti slack channel

Yoco

  1. Create a version bump branch out of master

  2. Update the version in packages/yoco

  3. Commit and push

  4. Create a PR and get it merged

  5. Checkout the master branch in the Kotti repository and pull latest changes

git checkout master
git pull --rebase
  1. Login into NPM with your credentials. Make sure you have publishing rights and 2FA on your npmjs.com account enabled.
npm login
  1. Publish. Lerna will auto-detect the packages whose versions got updated in package.json and ask you to confirm the packages to be updated and their corresponding versions.
yarn run lerna publish from-package
  1. If any new icon is needed in Kotti, create a PR updating the @3yourmind/yoco version in package.json in kotti-ui

Build

yarn run lerna run build

Internals

Important Folders

Path Purpose
packages/documentation Nuxt-managed documentation