pemhig-components

A Design System / Component Library Template for enabling graphic consistency and legibility across web development projects by creating reusable components and styles with accessible & legible documentation. Built on top of Vue.js and Vuetify.js.

Usage

This Template is comprised of two major categories: Styles and Components. It builds to compiled components (.js) and compiled styles (.css) from the source (.vue) files which can be used across web applications. It also creates a Storybook site for component/design system documentation.

Clone this repository locally, and use it as a starting point for building a component library / design system on top of Vue.js and Vuetify.js

Added/Updated Configurations to Vue CLI Starter

1. ESLint (Style Enforcing)
2. Storybook
3. Library Build
4. SCSS/SASS
5. Vuetify.js

Key Commands

After cloning/downloading the repository locally, install the required dependencies using npm i. After installation, the following commands can be used to develop & build the component library.

1. npm run build:all - This will build the component library in the dist folder, the preview app in the dist-app folder, and the static storybook site for documenting the components in the storybook-static folder.
2. npm run storybook:serve - Runs a local instance of Storybook, allowing you to preview/interact with your component documentation.
3. npm run serve - Runs the preview app.

How to Import (The Built Library)

Importing Components

In-Component Import

For single use in a component or small set of components.

Importing the bundled .js components individually.

// Filter.vue
import { CustomSelect } from "@dasa-health/pemhig-components";

export default {
  name: "Filter",
  components: {
    CustomSelect
  }
}
</script>

Design System

The structure of this project and component library are meant to emulate a larger-scale Design System (such as Google's Material).

Colors

Colors are referenced into components from the styles folder.

Components

Components can be found in the src/components folder in the root directory of this repository.

Developer Documentation

Building

In order to contribute to this project, fork/clone this repository locally. After cloning is completed, install the dependencies using npm i.

Preview

You can start a development server by running the commands below in the root directory of this repository. Once the development server is running, view localhost:8080 using Chrome and Vue.js Dev Tools. This is a preview application and will allow you to visualize the components/styles that will ultimately be compiled to the design system library.

npm run serve

or run the Storybook instance instead of the preview app

npm run storybook:serve

Library

To build the project as a library, run npm run build in the root directory of the repository.

Commands

The following commands are used to develop the project:

1. npm run build - Build the package distribution bundle.
2. npm run build:app - Build the preview web application.
3. npm run build:all - Build the preview application, distribution bundles, and the Storybook static site.
4. npm run serve - Start a development server with live-reloading on changes. (Used for previewing individual components.)
5. npm run lint - Lint code using ESLint and Vue configs.
6. npm test - Run unit tests for the individual components in the package.
7. npm run release - Runs tests, build, and version incrementing procedures.
8. npm run storybook:serve - Run Storybook to see the component library in action.
9. npm run storybook:build - Build the Storybook to a static application (for deploying design system documentation elsewhere)