TACC Core-Components

The shared components for TACC WMA Workspace Portals & Websites

Known Clients

• TUP UI, the client code for TACC User Portal
• Hazmapper, a TACC application for geospatial data

Table of Contents

• Related Repositories
• Project Architecture
• Prerequisites
• Getting Started
• Developing
• Contributing
• Testing

Related Repositories

• Core Styles, the shared UI pattern code for TACC WMA CMS Websites

Project Architecture

directory	contents
src/lib	components, tests, stories

Prerequisites

• Node.js

Getting Started

1. Install with any package manager e.g.

   • npm install @tacc/core-styles
   • yarn add @tacc/core-styles

2. Import component(s) e.g.

   import { Button } from '@tacc/core-components';

   import {
     FormikInput,
     FormikTextarea,
     FormikCheck,
   } from '@tacc/core-components';

3. Use component(s)…

   Sorry. Examples are limited and incomplete:

   • TACC-Cloud/hazmapper#239
   • TACC/tup-ui#465
   • TACC/tup-ui@ee5e73b:/.../Button.stories.tsx

Developing

The components are React components that should be written in TypeScript.

Setup

0. Clone this Repository.

1. Enter the Repository Clone:

   cd Core-Components

2. Install Dependencies:

   npm install --include=optional

3. Start demo:

   npm start

For more commands, see Commands.

Contributing

Fix a Component

0. Fix it.
1. Update story (as relevant).
2. Update tests (as relevant).

Add a Component

Minimum Viable Product

0. Create or Improve a common component from a TACC repository e.g.

   • https://github.com/TACC/tup-ui
   • https://github.com/TACC/Core-Portal
   • https://github.com/TACC-Cloud/hazmapper

1. Put your work in a branch in this repository.

2. Open a Pull Request.

3. Test your work in a client repository.

Complete Contribution

4. Create a story to demo the component.
5. Create unit tests.

in the Demo

task	reference
add/edit component	https://storybook.js.org/docs/writing-stories
change interaction	https://storybook.js.org/docs/essentials/controls

Testing

Unit Tests

Run npm test to execute the unit tests via Vitest.

End-to-End Tests

Perform manually by installing and testing the components in a separate respository. See different approaches to testing your own packages.

Resources

Commands

command	task	service
npm run start	start demo	Storybook
npm run build	build components	Vite
npm run test	execute unit tests	Vitest