ni / ni/nimble

Tier 1 support for React

Open
#504 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
39
Forks
14
Avg merge
1d 16h
Merged PRs (30d)
13

Description

😯 Problem to Solve

Nimble now has preview React packages:

There is limited documentation currently but the all components client app demonstrates usage and is published.

Steps to move from preview 1.0:

  • Finish adding behavior to the react-client-app, i.e. clean-up the commented out code. - #2765
  • Create complete README and CONTRIBUTING.
  • The useRef example (needed for things like dialog, drawer, and table where methods are invoked on DOM elements) requires @ts-expect-error. Should find a way to avoid needing that. See
    https://github.com/ni/nimble/issues/2617
  • host the example app and link to it from the main site as we do for Angular and Blazor - #2700
  • update the root README to mention the packages - #2700
  • update the root / nimble-components CONTRIBUTING to describe expectations for react wrappers when adding a new component
  • test package compatibility with React 19 and include in support range. Alternatively document React 19 direct usage as React 19 supports web components natively now and theoretically does not require wrappers anymore. #2626
  • make the packages type module and use package exports #2810
  • validate the libraries standalone, like in a stackblitz example
  • (maybe) validate routing with tanstack router or react router
  • Add React to the component status table #2828
  • Re-export enums consistently from React wrappers (see comment https://github.com/ni/nimble/pull/2927#discussion_r3080583053)
  • export page objects from react libraries and have smoke tests leveraging them from, i.e. vitest

Initial request:

Tier 1 support for React.

Digilent / MCC is working with a firm to build some of our web infrastructure and leveraging their existing stack which is built with Django and React. It would be nice to adopt nimble to make it easier to leverage NI's design guidelines. We're still in definition so I'll add more details about which components we'd use and use case details as we progress.

Proposed Solution:

Provide a dedicated library for React, similar to nimble-angular but for React.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the checklist and the React example at packages/react-workspace/react-client-app/src/components/App.tsx, then inspect the existing React package READMEs and CONTRIBUTING files. The issue contains several unfinished, independently scoped tasks, so choose one item, confirm its expected behavior with maintainers, and define completion around the corresponding documentation, validation, exports, or tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.