@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 |
 |
 |
 |
 |
Development Workflow
Initial Setup
Remember to use your GitHub email for this repo
git clone [email protected]:3yourmind/kotti
cd kotti
# configure github email for this repository
git config user.email "[email protected]"
# install dependencies
yarn config set workspaces-experimental true
yarn install
yarn run lerna bootstrapDevelop
# auto-build/watch
yarn run watchor
# 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 serveHandling Rebases
There are two workflows to help with rebasing pull requests:
- Rebase
Commenting/rebaseon 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. - Auto-Rebase
Adding theautorebase:opt-inlabel 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 usegit 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:stylelintTesting
yarn run testPublish
git checkout master
git pull --rebase
yarn install
# you may need login to npm with your credentials if you have publishing rights
# make sure you have 2FA on your npmjs.com account enabled
npm login
# update the version in `package.json`
# make sure to commit the version bump changes before publishing then run:
# Make a release draft here:
# https://github.com/3YOURMIND/kotti/releases/new
# Tag format: 'v1.2.3-beta.4'
# Title format: 1.2.3-beta.4: tldr of what's happening
# make a version commit:
# Make extra sure you change the version everywhere it is mentioned in the source.
# Commit message format: version(1.2.3-beta.4): tldr of what's happening
yarn run lerna publish from-package
# git push your commit to remote
# publish release draft here:
# https://github.com/3YOURMIND/kotti/releases
# announce the new version in the #kotti slack channelBuild
yarn run lerna run buildInternals
Important Folders
| Path | Purpose |
|---|---|
packages/documentation |
Nuxt-managed documentation |