@system76/components

System76 standard Vue components

---

This repository contains a bunch of standard System76 Vue components, like the omnibar, the header, the footer, and a couple of others. It does not include all Vue components that System76 uses, as those are broken up into other repositories like:

• asset-components Vue components to display image assets.
• design CSS variables and Vue typography
• forms Vue components for forms

Using

npm install --save-dev @system76/components

Then simply import and use them like you would any other Vue library:

<template>
  <sys-omnibar />
</template>

<script>
import { SysOmnibar } from '@system76/components'

export default {
  components: {
    SysOmnibar
  }
}
</script>

For actual usage and documentation, please look at our storybook instance.

Development

1. Download the repository

2. Run npm ci

3. Run npm run build

4. Run npm start

5. Start hacking

Documenting

We use styleguide to document our components. Please write your own stories and documentation in markdown format like the other .mdx files. Along with storybook, we also use styleguidist for documentation in the component file. This gets outputted in the form of nice prop tables in storybook. Here are some resources on how to get started:

• Storybook markdown syntax
• vue-docgen-api

Deployment

To trigger a release, push a commit to the master branch in the Angular Commit Message Conventions format.