@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:
- 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. - Auto-Rebase
Adding theautorebase: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 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:stylelint
Testing
yarn run test
Publishing
Kotti
-
Prepare a new release draft here
a. Tag format:
v1.2.3
(selectCreate 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
-
Checkout the master branch in the Kotti repository and pull latest changes
git checkout master
git pull --rebase
- Install/update dependencies
yarn install
- Build Kotti. Make sure it builds successfully and functionally test the changes made.
yarn run watch
- Login into NPM with your credentials. Make sure you have publishing rights and 2FA on your npmjs.com account enabled.
npm login
-
Update the version in
package.json
inpackages/kotti-ui
and all@3yourmind/kotti-ui
dependencies in:a.
packages/documentation
b.
packages/storybook
c.
packages/test-app
-
Make a version commit, DO NOT PUSH yet.
a. Commit message format:
version(1.2.3): tldr of what's happening
-
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
- Push the version commit to remote
git push
-
Find the release draft from
step 1
here, edit it and click onPublish release
-
Announce the new version in the
#kotti
slack channel
Yoco
-
Create a version bump branch out of master
-
Update the version in
packages/yoco
-
Commit and push
-
Create a PR and get it merged
-
Checkout the master branch in the Kotti repository and pull latest changes
git checkout master
git pull --rebase
- Login into NPM with your credentials. Make sure you have publishing rights and 2FA on your npmjs.com account enabled.
npm login
- 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
- If any new icon is needed in Kotti, create a PR updating the
@3yourmind/yoco
version inpackage.json
inkotti-ui
Build
yarn run lerna run build
Internals
Important Folders
Path | Purpose |
---|---|
packages/documentation |
Nuxt-managed documentation |