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 |