This is a continuation of the original ARGO UX Master Component Library
- 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
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.
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.
- @Timothy Naumov
- @Lillie McMaster (Team Lead)
- @Lauren Nguyenphu
- @Iman Sheriff
- @Alina Khan
- @Hamdiya Abdulhafiz
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:
- View latest storybook build at:
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:
- 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>
- 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
- 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
- Rebase your branch
git rebase main
- Push your branch
git push --force
- Create a pull request on GitHub
- Navigate to the repository on GitHub
- Go to the
Pull Requests
tab - Click the
New pull request
button - Select your feature branch as the
compare
branch - Select
main
as thebase
branch - Add a title and description
- Click the
Create pull request
button
- 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.