Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/system76/forms

System76 Vue components for forms
https://github.com/system76/forms

Last synced: 15 days ago
JSON representation

System76 Vue components for forms

Awesome Lists containing this project

README

        


@system76/forms


System76 Vue components for forms








npm


renovate


standard


Storybook

---

This repository contains all the System76 form Vue components including buttons,
inputs, and labels. It also holds client side validation logic.

## Using

```
npm install --save-dev @system76/forms
```

### Tips

- You will need to include the stylesheets for this package, as well as for
`@system76/design`. If you are using nuxt, simply add this to the configuration
file:

```
{
css: [
'@system76/design/dist/index.common.css',
'@system76/forms/dist/index.common.css'
]
}
```

- You will need to ensure that babel `sourceType` is set to `unambiguous`. In
nuxt, this means adding the following to your configuration:

```
build: {
babel: {
sourceType: 'unambiguous'
}
}
```

## 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.