# University of Houston UI Library

> @uhcougarnet/ui is currently in **PRE-ALPHA** .

With the design system @uhcougarnet/ui, we want to democratize development. This library of reusable components and guidelines helps you with contribution and plugin development.

## Our vision

The University of Houston brand is at the heart of who we are as an institution. It's our identity, personality and the shared
voice in which we tell our story. We designed these resources to keep the UH brand consistent and to help us share with our
audiences the key differentiators that make UH a world-class institution.

Univesity of Houston started @uhcougarnet/ui to make contribution to University of Houston's Design System as easy as possible for the university and community members of all fields. We want to create a component library that results in:

- Understanding of how each component works and how you can use it to create a great user experience.
- Short development times and consistent code quality.
- A beautiful, visually consistent UH UI experience.
- Transparency about how we work and what we do.

By unifying UI development across campus, we're not just creating apps; we're crafting experiences that resonate with
our users—whether they're students, staff, or faculty. Consistency in UI ensures that every interaction reflects the
essence of the UH brand, reinforcing our commitment to excellence and enhancing the overall user experience. Join us in
shaping the digital face of UH and making a lasting impact on our community!

## Maintained by University of Houston Main Campus and you

The project was embarked by Rogelio Rios Jr. a Web Developer, who works as one of the admins for Education Innovation and Technology.
Education Innovation and Technology is a division of academic affairs for the Office of Provost for the University of Houston main
campus that oversees online and special programs, including off-campus and electronically delivered courses. We have great teams
working across campus developing software solution to their users and this project will allow us to collaborate together to
provide a better UX experience to our faculty, staff or students.

We are working hard to make sure that components are documented and easy to use. The current status
of the @uhcougarnet/ui development is available on Github. Feel free to contribute!

## Install modules & run

Once you have clones this project to your computer you will need to install required packages.

```bash
   npm install
```

In order to run the storybooks application to visualize the components available:

```bash
   npm run storybook
```

Note: To access app visit "http://localhost:6006/"
<!--
# Getting Started

TODO: Guide users through getting your code up and running on their own system. In this section you can talk about:

1. Installation process
2. Software dependencies
3. Latest releases
4. API references
-->

# Build and Test

This section is important when doing to pull request to the codebase. In order to make sure that we have working code we included Vitest to test the UI components to maintain code quality as this project scales. For the future we want to also expand on the existing test cases to futher test the functionality of the component than to simply check if they render. Here are the command to run to make sure the project still builds for production:

#### Build code for production

```npm
npm run build
```

#### Build storybook

```
npm run build-storybook
```

#### Running tests

```
npm run test
```

# Contribute

TODO: Explain how other users and developers can contribute to make your code better.

If you want to learn more about creating good readme files then refer the following [guidelines](https://docs.microsoft.com/en-us/azure/devops/repos/git/create-a-readme?view=azure-devops). You can also seek inspiration from the below readme files:

- [ASP.NET Core](https://github.com/aspnet/Home)
- [Visual Studio Code](https://github.com/Microsoft/vscode)
- [Chakra Core](https://github.com/Microsoft/ChakraCore)

# Illustrations

For the sake of example. in the project I will be using free illustrations from [Freepik: Download Free Videos, Vectors, Photos, and PSD](https://www.freepik.com/). This are just used as example and may not be used for production or will be need to be reviewed before using them into production.

Here is a list of illustrations used:

* [Free Vector | No data concept illustration (freepik.com)](https://www.freepik.com/free-vector/no-data-concept-illustration_5928293.htm#query=empty%20state%20for%20data&position=1&from_view=search&track=ais)
* [Free Vector | Tiny people examining operating system error warning on web page isolated flat illustration. (freepik.com)](https://www.freepik.com/free-vector/tiny-people-examining-operating-system-error-warning-web-page-isolated-flat-illustration_11235921.htm#query=error%20state&position=0&from_view=search&track=ais)
* [Free Vector | Hand drawn no data illustration (freepik.com)](https://www.freepik.com/free-vector/hand-drawn-no-data-illustration_59563768.htm#query=search%20not%20found%20state&position=4&from_view=search&track=ais)
* [Free Vector | Hand drawn no data concept (freepik.com)](https://www.freepik.com/free-vector/hand-drawn-no-data-concept_55024593.htm#query=no%20data%20state&position=3&from_view=search&track=ais)
* [Free Vector | Isometric error background hand reaches out from the hole with the sign of error four hundred and four vector illustration (freepik.com)](https://www.freepik.com/free-vector/isometric-error-background-hand-reaches-out-from-hole-with-sign-error-four-hundred-four-vector-illustration_23581957.htm#query=404%20state&position=38&from_view=search&track=ais)
* [Free Vector | Image upload illustration concept (freepik.com)](https://www.freepik.com/free-vector/image-upload-illustration-concept_6193747.htm#page=2&query=upload%20empty%20state&position=14&from_view=search&track=ais)

For any questions regarding this project please email rrios4@cougarnet.uh.edu for he is the mainteiner of this project. Thank you!