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
• Other Libraries

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 build-demo	build demo	Storybook
npm run test	execute unit tests	Vitest

Other Libraries

See Other Libraries that TACC developers use with Core-Components.