Skip to content
This repository was archived by the owner on Oct 9, 2024. It is now read-only.

chec/ui-library

Folders and files

NameName
Last commit message
Last commit date

Latest commit

6a8ed53 · Jul 18, 2022
Dec 18, 2021
Mar 9, 2021
Sep 23, 2021
Jan 7, 2022
Mar 30, 2021
Jun 11, 2020
Mar 9, 2021
Sep 23, 2021
Sep 23, 2021
Dec 17, 2021
Mar 16, 2021
Jul 28, 2020
Jul 18, 2022
Feb 10, 2020
Mar 9, 2021
Mar 9, 2021
Dec 17, 2021
Mar 13, 2020
Sep 24, 2021
Nov 10, 2021
Feb 7, 2020
Feb 14, 2022

Repository files navigation

Vue.js component UI library using Tailwindcss by Chec

View the Storybook app

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');
  1. 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.