Giter Site home page Giter Site logo

nasa-jpl / stellar Goto Github PK

View Code? Open in Web Editor NEW
11.0 7.0 6.0 14.94 MB

A CSS implementation of the Stellar design system for spacecraft operation tools.

Home Page: https://nasa-jpl.github.io/stellar/example/

License: MIT License

JavaScript 1.35% CSS 12.26% HTML 33.41% SCSS 52.98%
aerospace css mission nasa operations planning spacecraft

stellar's Introduction

npm version

Stellar

A CSS implementation of the Stellar design system for spacecraft operation tools.

Install

npm install @nasa-jpl/stellar --save

Usage

Import the desired CSS files into your project to make the classes globally available. See our example project for detailed API usage.

<html>
  <head>
    <link href="@nasa-jpl/stellar/css/button.css" rel="stylesheet" />
  </head>
  <body>
    <button class="st-button">Stellar!</button>
  </body>
</html>

License

The scripts and documentation in this project are released under the MIT License.

stellar's People

Contributors

aaronplave avatar camargo avatar duranb avatar jeffpamer avatar lklyne avatar wbnns avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar

Forkers

30ma wbnns jeffpamer standardgalactic rhymes1212 jewely0

stellar's Issues

Build design organisms

Create design "organisms" or more complex collections of base stellar components such as popovers, trees, navbars, etc.

Old lockfile when installing

Steps to replicate:

  1. Run npm install @nasa-jpl/stellar --save as instructed in the README
  2. Encounter npm WARN old lockfile:
npm WARN old lockfile                                                                                                                       
npm WARN old lockfile The package-lock.json file was created with an old version of npm,                                                    
npm WARN old lockfile so supplemental metadata must be fetched from the registry.                                                           
npm WARN old lockfile                                                                                                                       
npm WARN old lockfile This is a one-time fix-up, please be patient...                                                                       
npm WARN old lockfile

Suggested fix -- commit the updated package-lock.json and package.json to the repository that is generated, post-install.

Add date picker

Add a date picker to support easy date selection. This date picker should account for unique time considerations found in spacecraft operations.

  • Day of year display
  • Multiple time zones + formats (UTC, LMST, etc)
  • Manual input

Being built on top of React DayPicker

Ideas:

  • Add min + max validation props to support two inputs for ranges and specific validation needs.
  • Time conversion
  • Prettier formatting for UTC times

Migrate figma file to use variables

Goal:
Update figma design file to use new variables functionality

Things to explore:

  • Spacing variables
  • Base colors
  • Themes
  • Light and dark mode
  • Aesthetic? (border radius, shadows, etc?)

Resources:

Variable migration livestream:
https://figma.zoom.us/webinar/register/9016887429208/WN_OrIHF7DIQNinj8SmrhjKcg?mkt_tok=Nzc4LU1FVS0yODEAAAGM7zg7BSqzkFzPCwJr96LfAXZQCVrinGMdLID9ICwWO54P6cyKX_n5JGtG5-MzdXLcmGuy6sKbq9hYcOfqrmU0_cYNqMB2mNykreddDz_N#/registration

Another migration livestream:
https://figma.zoom.us/webinar/register/6816896952947/WN_rCgAfvNZTrerldI4-_EJdg#/registration

Atlassian using design tokens example:
https://www.figma.com/community/file/1182079839084966604/ADS%3A-Design-Tokens

Improve colors for status

Goal: Provide clear options and opinions on how to use color to show status.
This could be a great case study / explanation of value added for Stellar. It demonstrates a clear problem and solution.

Problem:
Traffic light colors are ubiquitous to mission ops tools and planning processes. They are 1) often not standardized across tools and implemented in different ways, meaning operators have to context switch and learn new paradigms as they move across individual tools. 2) They are often not accessible. Red/green color blindness is the most common form of color blindness.

This is an example of an area where off the shelf design systems don't work. There's often many different options for status with mission operations tools. Simple success, caution, error categories don't capture this complexity. Often times categories are much more nuanced: (fault, near fault, nominal, difference; estimated vs actual; system error, error, warning, info, help ...)

Solution
A consistent approach to status and color means operators can move through tools with the same mental model. Color blind operators can have affordances to easily scan and parse information. A comprehensive approach that provides direction for many states makes this approach unique.

Figma branch:
https://www.figma.com/file/a696svN2S7YNlZRYAkeLob/branch/oOxNcX78bLrB0wfE8M0oGl/Stellar-Design-System?type=design&node-id=9270%3A42567&mode=design&t=Nsrf4z2wyw0MYBWr-1
Status icons + Color

Ideas:

  • Multiple shades for red / yellow / green
    • Success
    • error
    • warning
    • info
    • pending
    • indeterminate
  • Contrast compliant in light + dark mode

Accessibility

  • Encode information in different ways (use an icon in addition to just color)
  • Have a separate palette specifically for colorblind mode

Test & Document

  • with buttons and icons
  • with toasts
  • Write documentation + best practices

Implementation

  • How can we make this easy for devs to use the right color palette

Write out what breaking changes are
Create a visual change log and figure out where to put it
Create a prioritization framework
How often does it come up? How bad is it if we get it wrong? How hard is it to maintain?

Stellar Figma Assets 2.0 Release

Component Refactor
- [ ] Resolve outstanding comments on component refactor

  • Ensure documentation is up to date
    • Create template for documentation in figma
    • Add more screenshots to swapping
    • Add instructions on when to use what components
    • Add instructions for when to use different button types, when to use primary / secondary / icon
  • Set up suggested fields for icons
  • Refactor each of the components to use component properties. They are now much more compact and easier to adjust
  • Added additional tooltips to support more layout options.
  • Added hover, active, and focus states to tree component.
  • Merge into main

Modal

  • Add some additional placeholders
  • Ensure bottom action buttons are properly set up
  • Merge into main

Status icons + Color

  • Finalize status icons
  • Add light and dark colors for Success, error, warning, and info

Documentation

  • Write out what breaking changes are
  • Create a visual change log and figure out where to put it
  • Create a prioritization framework
    • How often does it come up? How bad is it if we get it wrong? How hard is it to maintain?

Audit reports critical severity in minimist <1.2.6

Steps to replicate:
Run npm install @nasa-jpl/stellar --save as instructed in the README
Run npm audit

Result:

# npm audit report

minimist  <1.2.6
Severity: critical
Prototype Pollution in minimist - https://github.com/advisories/GHSA-xvch-5gv4-984h
fix available via `npm audit fix`
node_modules/minimist

1 critical severity vulnerability

To address all issues, run:
  npm audit fix

Suggested fix -- run npm audit fix; looks like this will be a simple fix of just bumping the point release. Note npm will also make the updates in #6 if that hasn't been merged.

Make the distinction between stellar and react-stellar clear

Make sure we properly document that Stellar is just CSS + icons and that React-Stellar builds on top of Stellar and provides general interactive components for React. Each repository should have a list of the components from Figma Stellar and indicate which components are supported by the repo.

Clean up items and additions to be sectioned out

  • Horiztonally aligned text input + label
  • Very dense table / list
  • Animated components / spinners
  • Progress bars
  • Playback bar (video or timeline)
  • Timeline
  • Graphs / Data visualization (nice components in figma)
  • Synthetic data

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.