Concepts

Each component uses the Vue.js Composition API.

• template: Defines the component's HTML structure.
• script: Contains the component's JavaScript logic, including data (bindings), methods, computed properties, and lifecycle hooks.
• style: (Optional) Contains the component's CSS styles, scoped to the component using the scoped attribute. This library uses Tailwind CSS for styling.

Each component provides a usage example in docs/.vuepress/examples. This example should be clear and concise. Users must be able to copy the example to their application without any changes.

<template>
    <Banner :show="true">
        Please confirm your email address by clicking 
        the link in the confirmation email.
    </Banner>
</template>

<script setup lang="ts">
import { Banner } from '@discue/ui-components';
</script>

Each component provides a documentation page in docs/components. The documentation must show the usage example, and use the DynamicComponentDisplay component to render a live preview of the component.

Contribution Guidelines

When contributing new components or making changes to existing ones, please follow these guidelines:

1. Clone the repository: Clone the repository at github.com/discue/ui-components
2. Install dependencies: Navigate to the project directory and install the required dependencies using npm or yarn.
3. Create a new component file: Create a new file within the src/components directory for your component. The filename name should be the kebab-case version of your component's name (e.g., my-component.vue).
4. Write unit tests: Write comprehensive unit tests for your component using Vue Test Utils. These tests should cover all aspects of the component's functionality.
5. Create a new documentation file: Inside the directory docs/components, create a new .md file named after your component (e.g. my-component.md). This file should follow the same structure as the documentation files for other components in the docs/components directory.
6. Create a usage example: Inside docs/.vuepress/examples create a new .vue file named after your component (e.g. MyComponentExample.vue). This file should contain a concise usage example.
7. Read Contribution Guidelines: Read the (Contribution Guidelines)
8. Follow coding style: Ensure your code adheres to the existing coding style and conventions of the project.
9. Commit your changes: Commit your changes with a clear and concise message that follows the guidelines on writing commit messages and shows you sign-of the certificate of origin.
10. Submit a pull request: Submit a pull request to the github.com/discue/ui-components repository. Your pull request will be reviewed by the maintainers before being merged.

Building the Library

To build the library (and the docs), run the following command in the project's root directory:

./build.sh

This will generate the distributable files in the dist directory. These files can then be used to install the library in other projects.

Testing the Libary

To test individual components, navigate to the project's root directory and run:

./test.sh