React UI Component Library

Rubin Observatory's React UI Component Library is a set of reusable components unique to Rubin Observatory's branding and designed to integrate with Next.js and Craft CMS content. They are all organized and documented using Storybook, include test coverage with Cypress, are fully responsive, and meet WCAG AA guidelines. They can be grouped into a couple different ways. One way we conceptually grouped them during development was common components and widgets.

Common components map to customized versions of native HTML elements like buttons, anchor tags, form fields, and tables, SVG icons, commonly used interface elements like accordions, modals, carousels, and sliders, and layouts like containers, grids, and menus. Conceptually, these elements could also be grouped into tiers, with atomic components being those most closely mapped to native elements, molecules being wrapper components or components composed of atomic components, and the most complex components being those that are a combination of atomic components, molecules, layout elements, and are usually the most bespoke to Rubin Observatory's requirements. A kinda additional category of component is content blocks which are content-driven components tailored to Craft CMS.

Widgets are another tier above the complex common components and tend to encapsulate an entire UX flow end to end through multiple kinds of UI, and sometimes third-party libraries. They also tend to be even more beholden to Rubin Observatory's specific requirements and its astronomical and educational pursuits. They include components like charts and graphs, tools for colorizing astronomical images, and interactive viewers for time-domain astronomy (supernovae, asteroids, etc.).