@utd-argo-ii/ux-master-library NPM

ARGO UX Master Component Library II

This is a continuation of the original ARGO UX Master Component Library

Newly released features:

react-docgen-typescript implementation for better storybook controls
semantic-release for automatic package deployment
Storybook GPT for AI generated stories
Theming toggle with new themes

ARGO UX Master Component Library

About

Purpose

This is a continuation of the ARGO UX Master Component Library project.

The ARGO UX Master Component Library is a collection of React components that are used to build the ARGO UX. The library is a proof of concept built to solve ARGO's issues of scalability, design standardization, and reusability. The goal is to have a centrally managed design system which permits updates to be made across all projects from a single codebase.

Information

The library is built using Storybook, a tool for developing UI components in isolation.

The library is deployed using Chromatic, a visual regression testing and review tool for Storybook.

The library is distributed using NPM, a package manager for JavaScript.

The library is automatically built and deployed using Semantic-Release, an automated version management and package publishing tool that automates the whole package release workflow including: determining the next version number, generating the release notes, and publishing the package.

This library can be used with the Storybook GPT, created by the 2024 team members.

Current Members (2024)

Previous Members (2023)

Sample Projects

Latest Build

Deployments are automatically generated by GitHub Actions when a pull request is merged into main. The latest deployment can be found at the following links:

View latest storybook deployment at:
- https://660f1f3045766446634edc95-hptebytdtf.chromatic.com/)
View latest storybook build at:
- https://www.chromatic.com/library?appId=63f2c0bed84a2da0ed389ac2&branch=main

Packages are automatically generated by GitHub Actions when a new release is published. The latest package can be found at the following link:

View latest package at:
- https://www.npmjs.com/package/@utd-argo-ii/ux-master-library

Getting Started

Package Installation/Usage

Install the package

npm install @utd-argo/ux-master-library@latest

Import a component

import { Component } from "@utd-argo/ux-master-library";

Use the component
```
<Component ...>
   ...
</Component>
```

Develop Locally

Clone the repository from main

git clone https://github.com/UTD-ARGO/argo-storybook.git

Navigate into the project directory
```
cd argo-storybook
```
Install dependencies
```
npm install
```
Start the local development server
```
npm run storybook
```
Navigate to http://localhost:6006 in your browser

Contributing

Overview

Create a new feature branch from main
Make commits on this branch
Push to this branch as you develop
Once you are ready to merge, create a pull request
Have at least 1 team member review your changes
Merge changes into main

Creating a Pull Request

Rebase your branch
```
git rebase main
```
Push your branch
```
git push --force
```
Create a pull request on GitHub
1. Navigate to the repository on GitHub
2. Go to the Pull Requests tab
3. Click the New pull request button
4. Select your feature branch as the compare branch
5. Select main as the base branch
6. Add a title and description
7. Click the Create pull request button

Creating a Component

Create a new directory in src/components called <componentName>
Create 3 files within the new directory: <componentName>.tsx, <componentName>.stories.tsx
Import the component in src/index.tsx and add <componentName> to the export list.