Vue.js component UI library using Tailwindcss by Chec

View the Storybook app

Licensing

Note that this project is not licensed intentionally. At the moment you will require explicit permission from Chec Platform Inc. to utilise this repo in your own projects. Please let us know if you're interested. [email protected]

In the future we may add a license.

Installation & Usage

You can use either yarn or npm to install the ui-library and it's dependencies from this Github repo.

with yarn

yarn add github:chec/ui-library

with npm

npm install github:chec/ui-library

Setting up Tailwindcss

1. Create a tailwind.preview.js file at the root of the app exporting the ui-library's custom tailwind.preview.js from it.

module.exports = require('@chec/ui-library/tailwind.config');

2. Inject the ui-library's compiled css and Tailwind.css file which includes the @tailwind directives to include the ui-library configured Tailwindcss styles/utilities.

/*
ui-library.css compiled css
*/
@import '~@chec/ui-library/dist/ui-library.css';

/*
tailwind.css, uses the @tailwind directive to inject Tailwind's base, components, and utilities styles into your CSS: 
*/  
@import '~@chec/ui-library/src/assets/tailwind.css';

Utilizing Sass mixins

You can import helpful sass mixins such as aspect-ratio.

/* mixins.scss */

@import '~@chec/ui-library/src/assets/mixins.scss';

Mixins

• aspect-ratio

  use-case:

  <div class="image-container">
  
    <img src="chec.io/image.jpg" />
  
    <div v-else>
      <h6>
        No Image
      </h6>
    </div>
  
  </div>

  .image-container {
  
    /* tailwind @apply directive */
    @apply w-1/2 max-w-sm; 
  
    /* apply aspect-ratio mixin */
    @include aspect-ratio(16, 9); 
  
    /* style fall-back element */
    div {
      @apply bg-gray-300;
    }
  }

Translating

We use the vue-i18n library for this. See lang/*.js for the dictionaries. See the dashboard repo's lang/README.md for a detailed guide for using the library. TL;DRs:

• <p>{{ $t('paginate.goToFirst') }}</p> renders "Go to the first page"
• this.$t(...) from component instance methods

Project setup

git clone https://github.com/chec/ui-library.git

cd ui-library

yarn install

Start Storybook app on port 6006:

yarn storybook:serve

Run the frontend app proper on port 8080:

yarn run serve

Compiles and minifies for production (This is done continously)

yarn build-lib

Lints and fixes files

yarn lint:Fix

Customize configuration

See Configuration Reference.