Bizy - Bizcommerce component library

A 🌲 tree-shakeable collection of "styleless" Vue.js (dumb) components, ECMAScript 6 native modules ready, designed for customized ecommerce experiences.

This project is part of a larger effort to create a reusable codebase to all Bizcommerce products and services. Checkout more at biz-storefront umbrella project.

Install

npm install [email protected]:bizfrontend/component-library.git

Usage

import { SwatchesCard } from 'bizy'

new Vue({
    components: { SwatchesCard },
    template: `<swatches-card :attributes="{}" @chosen="setId"></swatches-card>`
})

Components

Field

A field is a very shallow component, to be used inside html form components, that usually renders a single node and have no dependencies.

Form

Obviously renders pre-defined of configurable document forms taking the responsability of input validation and compositions.

List

Used to explicitly tell the developer that a imported component root is a ul or ol html tag, usually expecting an array like "items" as :prop.

Item

It's how each element of a list is called.

Box

Usually a shallow component with a root <div> or <span> tag that is not an field nor an item.

Card

When a box have a deep tree inside.

Component

An assembler of multiple bizy components is recursively called, guess what? Component.

The following is a list of every component supported right now:

• AddressCard
• AddressForm
• AdressList
• AmountBox
• AuthenticationComponent
• CouponCard
• FieldBox
• LoginCard
• PostcodeField
• RegisterForm
• RegisterComponent
• ShippingCard
• ShippingList
• SpinnerLoader
• SwatchesCard

This packages also provides and uses a few mixins:

• Localizable
• Localizator

Development

Always write your components in order to be usefull with the minimal transpilation required as possible.

Tests

npm run test:components
npm run test:integration

Generate docs

npm run docs