Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/system76/components
System76 standard Vue components
https://github.com/system76/components
Last synced: about 2 months ago
JSON representation
System76 standard Vue components
- Host: GitHub
- URL: https://github.com/system76/components
- Owner: system76
- License: gpl-3.0
- Created: 2020-03-11T21:45:35.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-11-21T23:42:15.000Z (about 1 year ago)
- Last Synced: 2024-10-31T19:54:45.039Z (about 2 months ago)
- Language: Vue
- Size: 12.4 MB
- Stars: 0
- Watchers: 7
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
@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](https://github.com/system76/asset-components) Vue
components to display image assets.
- [design](https://github.com/system76/design) CSS variables and Vue typography
- [forms](https://github.com/system76/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:
```vue
import { SysOmnibar } from '@system76/components'
export default {
components: {
SysOmnibar
}
}
```
For actual usage and documentation, please look at our
[storybook instance](https://components.origin76.com).
## 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](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/mdx.md)
- [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api#full-example)
## Deployment
To [trigger a release](https://semantic-release.gitbook.io/semantic-release/#triggering-a-release),
push a commit to the `master` branch in the
[Angular Commit Message Conventions](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines)
format.