FireApps Kit

Thư viện FireApps UI Components được tích hợp vào Origin template

Nguyên nhân ra đời

• Tất cả những app được publish lên Shopify đều cần một quy tắc chung về UI styles, điều này được update thường xuyên và cần một phương án để đồng bộ các app khi styles update. Ví dụ: Khi UI cần update button và muốn tất cả các app trong hệ thống đều update lên tất cả
• Cung cấp những methods cơ bản để những app con không cần phải viết lại và những methods này có thể thêm vào sau đó.

Mục đích

• Đồng bộ các Components theo chuẩn FireApps styles (https://app.zeplin.io/project/5e1c4376b54450aa0b6bd4df/styleguide)

• Hỗ trợ các mixins, directives, filters mà không cần phải viết thêm

Dành cho người phát triển

Cách tiếp cận

Sử dụng Vue CLI 4

Hệ thống cấu trúc

• Root: File root của library này nằm ở src/index.js. Điều này được cấu hình trong package.json với dòng lệnh vue-cli-service build --report --target lib --name fireapps ./src/index.js

• Components: Tất cả các components trên library này bao gồm: Các components trong thư mục /src/components + Các components của Antdv (https://antdv.com/docs/vue/introduce/)

• CSS: Import những css sau:

  • Fireapps CSS được ưu tiên và ghi đè, tất cả nằm trong thư mục /src/styles/
  • Antdv CSS: thư mục /src/styles/antd.css
  • Bootstrap CSS: thư mục /src/styles/bootstrap.css

• Mixins: Tất cả các mixins (chủ yếu là methods) dùng chung cho tất cả các app.

• Directives: Hiện tại có v-clickaway

• Prototypes: Các prefix classes tuân theo quy tắc Atomic

• Options dành cho app: Nằm trong file /src/defaultOptions.js. Khi App import Vue.use(fireapps, appOptions) thì các options sẽ được ghi đè.

• Documentation: Sử dụng Storybook: https://storybook.js.org/

Cách phát triển

1. Chạy documentation để check các components. Tùy chỉnh các components và css theo ý muốn.

npm install
npm run storybook

2. Build production và publish lên NPM. Npm publish sẽ check name và version trong file package.json

npm run build
npm publish

Lưu ý trước khi publish lên npm cần:

• login vào tài khoản có quyền publish fireapps-kit.
• Lên version lớn hơn version hiện tại trong package.json

{
  "name": "fireapps-kit",
  "version": "0.1.41"
}

Dành cho người sử dụng

1. Installation

npm install --save fireapps-kit

2. Setup CSS loader

Add to vue.config.js in root

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        data: `@import 'fireapps-kit/src/style-loader.scss';`
      }
    }
  }
}

3. Add to main.js:

import * as fireapps from 'fireapps-kit'
var yourOptions = {}
Vue.use(fireapps, yourOptions)

4. Setup config provider App.vue:

<a-config-provider :prefixCls="$prefixClass.atom">
    <div id="app">
      <!--  -->
    </div>
</a-config-provider>

Full Documentation

Check out our docs at https://cdn.fireapps.vn/docs.

Deploy

Deploy Documentation

npm run build-storybook

CDN Publish

npm install && npm run build

JS

dist/fireapps.umd.min.js
dist/fireapps.umd.min.js.map
dist/fireapps.css

Scss

src/styles/static/*.scss => styles/static/*.scss
src/styles/theme/*.scss => styles/theme/*.scss
src/styles/*.scss => styles/*.scss