TACC Core-Components

The shared components for TACC WMA Workspace Portals & Websites

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 tup-ui

2. Install Dependencies:

   npm install --include=optional --workspace=libs/core-components

3. Start demo:

   npx nx serve core-components

For more commands, see Commands.

Contributing

to Components

Minimum Viable Product

0. Create or Improve a common component in 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 nx test core-components 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 | | ---------------------------------------- | ------------------ | -------------------------------------- | | npx nx serve core-components | start demo | Storybook | | npx nx build core-components | build components | Vite | | npx nx build-storybook core-components | build demo | Storybook | | npx nx test core-components | execute unit tests | Vitest |