npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nasa-jpl/react-stellar

v1.1.11

Published

The React implementation of the Stellar Design System

Downloads

145

Readme

npm version

react-stellar

React implementation of the Stellar design system built on top of the (native CSS Stellar) implementation [https://github.com/nasa-jpl/react-stellar]. The React implementation of the Stellar design system provides a more complete implementation of the Stellar design system whereas the native CSS Stellar only provides styling for native HTML elements as well as CSS variables for color and typography. React Stellar is written in Typescript and bundled with Rollup.

What is Stellar?

Stellar is design system for operations tools that enables developers and designers to make use of battle-tested components and focus their efforts on the unique aspects of their applications. Included in this design system are code components, design files and assets, and guidelines for use.

Component Usage and Demos

Demos and documentation for the components can be found here: https://nasa-jpl.github.io/react-stellar/. Not all Stellar design system components are supported yet as this is an ongoing effort. Many components in this library are build on top of Radix Primitives. Radix Primitives provide unstyled, accessible components meant to be used as building blocks for design systems. React Stellar components that use Radix Primitives will contain links to the Radix documentation for more detailed information regarding component properties and usage.

Library Installation and Usage

Run the following command in the root of your React application repository to install the library. This assumes you already have NodeJS installed on your machine and that you are installing this library into a React project.

npm install --save-dev @nasa-jpl/react-stellar

Importing Stellar Components in React

Include react-stellar and stellar styles using the following import in your app:

import "@nasa-jpl/react-stellar/dist/esm/stellar.css";

You can import a Stellar component using the following syntax:

import { Button } from "@nasa-jpl/react-stellar";

Example usage:

<Button variant="secondary" onClick={() => console.log("Click")}>
  Text
</Button>

Developing Components

Prerequisite Software

Before you can develop components for react-stellar you must install and configure the following products on your development machine:

Code Editor

The recommended editor for developing aerie-ui is VS Code.

Extensions

  1. Prettier - Code formatter
  2. ESLint
  3. Stylelint
  4. EditorConfig for VS Code
  5. Path Intellisense

Getting the Source

Clone the react-stellar repository:

git clone https://github.com/nasa-jpl/react-stellar.git
cd react-stellar

Installing NPM Modules

Install the JavaScript modules needed to build react-stellar:

npm install

Start Development Server

Development of react-stellar components is accomplished with Storybook, a frontend workshop for building UI components and pages in isolation. Run npm run storybook to automatically launch the Storybook for react-stellar in your default browser. The app will automatically reload if you change any of the source files.

Building For Production

Run npm run build-lib to build a production version of the component library. The build artifacts will be stored in the dist/ directory. Note that the build normally occurs in a Github Action but local building will often be performed for troubleshooting purposes.

Updating Stellar Icons

The react-stellar library creates React components for every icon supplied by the base Stellar repository. Run npm run build-icons to build these icons after updating the base Stellar depencency. Icons will automatically be created and exported in src/components/Icons.

Publish Component Library

Publish the library to NPM using the corresponding Github Action.

Storybook Deployment

Storybook is built and deployed to Github Pages using Github Actions.

Theming

Both Stellar and React-Stellar are built to be easily themable using a combination of class and CSS variable overrides. For a complete list of CSS variables that can be overridden please refer to the Stellar variables.scss file as well as the React Stellar [variables.scss] file. For example, to change the background color of a primary button you can override the CSS variable that defines that primary button background color:

:root {
  --st-button-primary-background-color: green;
}

Also note that there is limited support for dark theming but this effort is ongoing.