Skip to content
Snippets Groups Projects
README.md 2.63 KiB
Newer Older
Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
# Funkwhale design component library
Georg Krause's avatar
Georg Krause committed

Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
The Funkwhale design component library is a collection of reusable UI components written in [Vue.js](https://vuejs.org) and [Sass](https://sass-lang.com).
Georg Krause's avatar
Georg Krause committed

Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
Check out [the documentation](https://ui.funkwhale.audio) for information on how each component works and to see a live preview.
## Dependencies

This library depends on the following external packages:

- [`vue`](https://www.npmjs.com/package/vue)
- [`vue-router`](https://www.npmjs.com/package/vue-router)
- [`vue-i18n`](https://www.npmjs.com/package/vue-i18n)
- [`@vueuse/core`](https://www.npmjs.com/package/@vueuse/core)

You must install these packages for all components to work correctly.

Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
## Contribute to development
Georg Krause's avatar
Georg Krause committed

Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
This project welcomes contributions! To get started make sure you have the following:
Georg Krause's avatar
Georg Krause committed

Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
1. A design to follow
2. The use case for the component
Georg Krause's avatar
Georg Krause committed

Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
Join the discussion on [our forum](https://forum.funkwhale.audio) to suggest new components.
Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
### Set up your environment
Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
This project uses [Yarn](https://yarnpkg.com/) to manage dependencies and run development scripts. Make sure you have it installed before you start.

1. Install the project dependencies

   ```sh
   yarn install
   ```

2. Start a development server to preview your changes in real time

   ```sh
   yarn dev
   ```

### Create a production-ready build

You can check how your code looks in production by creating a production-ready build.

1. Compile and minify your code for production

   ```sh
   yarn build
   ```

2. Preview the production-ready build

   ```sh
   yarn preview
   ```

### Create and run tests

Writing tests for components minimizes the number of bugs that make it to production. This project uses the [Vitest](https://vitest.dev/) framework to run unit tests.

Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
1. Write your test in the test directory
Ciarán Ainsworth's avatar
Ciarán Ainsworth committed
2. Run your unit tests

   ```sh
   yarn test
   ```

## Contribute to documentation

Funkwhale UI components should be properly documented before release to make development easier. You should include examples, use cases, and lists of component props to ensure contributors know how to work with components without needing to read the code.

1. Start a development server to preview your changes in real-time

   ```sh
   yarn docs:dev
   ```

2. Create a production build of the documentation

   ```sh
   yarn docs:build
   ```

3. Serve a production build of the documentation

   ```sh
   yarn docs:serve
   ```

## Release a new version

```sh
export NEW_VERSION=0.4.0
yarn version --new-version $NEW_VERSION
yarn changelog
git add package.json CHANGELOG.md
git commit -m "chore: bump version and update changelog"
git tag $NEW_VERSION
git push --tags && git push
```