search

TACC / tup-ui

React client for TACC User Portal
2 stars 0 forks source link

feat: TUP-700 @tacc/core-components - package #433

Closed wesleyboar closed 1 month ago

wesleyboar commented 4 months ago

Overview

Create a @tacc/core-components Node package.

Related

Changes

[!NOTE]

  1. I followed Create a Component Library Fast 🚀 (using Vite's library mode).
  2. I used NPM workspaces because I saw NX documentation mention support for it.

Testing

New Build Command

  1. npm ci
  2. npx nx build core-components
  3. No error.
Log ```log $ npm ci npm WARN deprecated @types/browserslist@4.15.0: This is a stub types definition. browserslist provides its own type definitions, so you do not need this installed. npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead npm WARN deprecated @vitest/coverage-c8@0.31.4: v8 coverage is moved to @vitest/coverage-v8 package npm WARN deprecated domexception@4.0.0: Use your platform's native DOMException instead npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1 added 1725 packages, and audited 1727 packages in 35s 276 packages are looking for funding run `npm fund` for details 14 vulnerabilities (13 moderate, 1 high) To address issues that do not require attention, run: npm audit fix To address all issues possible (including breaking changes), run: npm audit fix --force Some issues need review, and may require choosing a different dependency. Run `npm audit` for details. ``` ```log $ npx nx build core-components > nx run core-components:build:production [local cache] vite v5.0.11 building for production... ✓ 436 modules transformed. dist/assets/Section.css 0.03 kB │ gzip: 0.05 kB dist/assets/Button.css 0.15 kB │ gzip: 0.13 kB dist/assets/FormField.css 0.16 kB │ gzip: 0.13 kB dist/assets/SectionTableWrapper.css 0.25 kB │ gzip: 0.16 kB dist/assets/Collapse.css 0.29 kB │ gzip: 0.19 kB dist/assets/SectionHeader.css 0.45 kB │ gzip: 0.26 kB dist/assets/ShowMore.css 0.50 kB │ gzip: 0.27 kB dist/assets/DescriptionList.css 1.23 kB │ gzip: 0.47 kB dist/assets/LoadingSpinner.css 1.26 kB │ gzip: 0.50 kB dist/assets/SectionContent.css 1.30 kB │ gzip: 0.39 kB dist/assets/Paginator.css 1.40 kB │ gzip: 0.56 kB dist/assets/InfiniteScrollTable.css 1.52 kB │ gzip: 0.59 kB dist/assets/HistoryBadge.css 1.83 kB │ gzip: 0.55 kB dist/assets/Checkbox.css 1.92 kB │ gzip: 0.57 kB dist/assets/TextCopyField.css 1.98 kB │ gzip: 0.54 kB dist/assets/Pill.css 2.28 kB │ gzip: 0.69 kB dist/assets/Sidebar.css 2.34 kB │ gzip: 0.73 kB dist/assets/DropdownSelector.css 3.15 kB │ gzip: 1.06 kB dist/assets/Message.css 4.81 kB │ gzip: 1.06 kB dist/lib/Icon/index.js 0.05 kB │ gzip: 0.07 kB dist/lib/Pill/index.js 0.05 kB │ gzip: 0.07 kB dist/lib/Button/index.js 0.06 kB │ gzip: 0.07 kB dist/lib/Message/index.js 0.06 kB │ gzip: 0.07 kB dist/lib/Sidebar/index.js 0.06 kB │ gzip: 0.07 kB dist/lib/Checkbox/index.js 0.06 kB │ gzip: 0.08 kB dist/lib/Collapse/index.js 0.06 kB │ gzip: 0.08 kB dist/lib/ShowMore/index.js 0.06 kB │ gzip: 0.08 kB dist/lib/Paginator/index.js 0.06 kB │ gzip: 0.08 kB dist/lib/InlineMessage/index.js 0.06 kB │ gzip: 0.08 kB dist/lib/TextCopyField/index.js 0.06 kB │ gzip: 0.08 kB dist/lib/LoadingSpinner/index.js 0.06 kB │ gzip: 0.08 kB dist/lib/SectionMessage/index.js 0.06 kB │ gzip: 0.08 kB dist/lib/DescriptionList/index.js 0.07 kB │ gzip: 0.08 kB dist/lib/DropdownSelector/index.js 0.07 kB │ gzip: 0.08 kB dist/lib/InfiniteScrollTable/index.js 0.07 kB │ gzip: 0.09 kB dist/lib/Section/index.js 0.07 kB │ gzip: 0.08 kB dist/lib/Form/index.js 0.08 kB │ gzip: 0.08 kB dist/lib/HistoryBadge/index.js 0.08 kB │ gzip: 0.09 kB dist/lib/SectionHeader/index.js 0.08 kB │ gzip: 0.09 kB dist/lib/SectionTableWrapper/index.js 0.08 kB │ gzip: 0.09 kB dist/lib/SectionContent/index.js 0.20 kB │ gzip: 0.15 kB dist/lib/InlineMessage/InlineMessage.js 0.34 kB │ gzip: 0.23 kB dist/lib/Icon/Icon.js 0.39 kB │ gzip: 0.27 kB dist/lib/HistoryBadge/HistoryBadge.js 0.58 kB │ gzip: 0.37 kB dist/lib/SectionMessage/SectionMessage.js 0.62 kB │ gzip: 0.33 kB dist/lib/Pill/Pill.js 0.94 kB │ gzip: 0.49 kB dist/lib/DropdownSelector/DropdownSelector.js 1.01 kB │ gzip: 0.58 kB dist/lib/Checkbox/Checkbox.js 1.23 kB │ gzip: 0.62 kB dist/lib/TextCopyField/TextCopyField.js 1.26 kB │ gzip: 0.64 kB dist/lib/SectionHeader/SectionHeader.js 1.41 kB │ gzip: 0.67 kB dist/index.js 1.70 kB │ gzip: 0.46 kB dist/Badge-W4AS3xw2.mjs 1.92 kB │ gzip: 0.93 kB dist/lib/Button/Button.js 1.99 kB │ gzip: 0.81 kB dist/lib/SectionContent/SectionContent.js 2.09 kB │ gzip: 0.93 kB dist/lib/LoadingSpinner/LoadingSpinner.js 2.47 kB │ gzip: 1.12 kB dist/lib/Paginator/Paginator.js 2.57 kB │ gzip: 0.97 kB dist/lib/Section/Section.js 3.35 kB │ gzip: 1.23 kB dist/lib/SectionTableWrapper/SectionTableWrapper.js 3.37 kB │ gzip: 1.33 kB dist/utils-OW3A2J3p.mjs 3.39 kB │ gzip: 1.50 kB dist/lib/DescriptionList/DescriptionList.js 3.50 kB │ gzip: 1.57 kB dist/Input-HVmkVBHZ.mjs 5.49 kB │ gzip: 2.11 kB dist/lib/Message/Message.js 7.56 kB │ gzip: 2.87 kB dist/lib/Collapse/Collapse.js 9.04 kB │ gzip: 2.99 kB dist/lib/ShowMore/ShowMore.js 11.48 kB │ gzip: 4.02 kB dist/Transition-3X2EcsU0.mjs 12.16 kB │ gzip: 3.76 kB dist/index-j9GOmHnh.mjs 23.60 kB │ gzip: 6.03 kB dist/lib/Form/FormField.js 25.86 kB │ gzip: 6.89 kB dist/lib/Sidebar/Sidebar.js 29.58 kB │ gzip: 8.33 kB dist/lib/InfiniteScrollTable/InfiniteScrollTable.js 186.22 kB │ gzip: 40.95 kB dist/index-sjH1LaA_.mjs 668.74 kB │ gzip: 155.83 kB [vite:dts] Start generate declaration files... ✓ built in 8.16s [vite:dts] Declaration files built in 3635ms. —————————————————————————————————————————————————————————————————————————————————————————————————————————————— > NX Successfully ran target build for project core-components (119ms) Nx read the output from the cache instead of running the command for 1 out of 1 tasks. ```

Regression

  1. Follow Local Dev Setup but with --skip-nx-cache appended to each nx command.
  2. No log errors.
  3. No UI changes compared to main.

UI

Regression Test (Minimal) https://github.com/TACC/tup-ui/assets/62723358/5aae3989-2402-49fb-acb4-8b73d5c425e6 https://github.com/TACC/tup-ui/assets/62723358/b425b247-c1f4-4116-b9e3-64639afc6e88 https://github.com/TACC/tup-ui/assets/62723358/d82dcfd3-081b-40ea-a5e1-7656964d8ae4 https://github.com/TACC/tup-ui/assets/62723358/4ed57dae-3a0e-4eef-adde-12af33fb1281 https://github.com/TACC/tup-ui/assets/62723358/bbd701ab-d033-40f1-bef1-dbeaddb470d4

Issues

[!NOTE]

  1. Requires opinionated dependencies, like reactstrap and formik Solution:
    1. Report a GitHub Issue, because it affects consumers.
    2. Replace dependencies that are easy to replace with simple code.
    3. Make optional the features that rely on dependencies. Make those dependencies optional (a, b).
  2. I delay using JsDoc to get automatic documentation until v1, because v0 does not need extensive documentation, because it already has familiar users (who copy/pasted the code).