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.

   npm install

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

   npm run storybook

Note: To access app visit "http://localhost:6006/"

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 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. You can also seek inspiration from the below readme files:

• ASP.NET Core
• Visual Studio Code
• Chakra Core

Illustrations

For the sake of example. in the project I will be using free illustrations from Freepik: Download Free Videos, Vectors, Photos, and PSD. 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)
• Free Vector | Tiny people examining operating system error warning on web page isolated flat illustration. (freepik.com)
• Free Vector | Hand drawn no data illustration (freepik.com)
• Free Vector | Hand drawn no data concept (freepik.com)
• Free Vector | Isometric error background hand reaches out from the hole with the sign of error four hundred and four vector illustration (freepik.com)
• Free Vector | Image upload illustration concept (freepik.com)

For any questions regarding this project please email [email protected] for he is the mainteiner of this project. Thank you!