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

@rocketmakers/armstrong-edge

v1.18.7

Published

Armstrong is a React component library made by Rocketmakers written in Typescript and SCSS.

Downloads

749

Readme

Armstrong

Armstrong is a React component library made by Rocketmakers written in Typescript and SCSS.

By default, Armstrong doesn't pre-compile its SCSS into CSS, allowing consuming projects to make use of its various SCSS variables and mixins.

JIRA board (for internal use only)

Using Armstrong

Armstrong is installed using npm.

# This repo is currently @rocketmakers/armstrong-edge, writing docs as if deployed as main armstrong package
npm install @rocketmakers/armstrong
# or
yarn add @rocketmakers/armstrong

Then to use a component in your project

import { Button } from '@rocketmakers/armstrong';

const MyComponent: React.FC = () => {
  return (
    <div>
      <Button>I'm a button</Button>
    </div>
  );
};

See Storybook for a list of all available components

For details on how to import Armstrong's styling, see SCSS

For details on using Armstrong forms, see Forms

Issues / bug reports

If you're internal to Rocketmakers, post in the #armstrong channel and raise an issue here

Otherwise, raise an issue in Github and follow the issue template

Working on Armstrong

Development

First cd into the root of the repo and run

asdf install
npm install

There are two options for working on Armstrong.

  • We have a playground, which is just a really simple react app with no linting, which has the Armstrong module linked in using npm link
  • We have a Storybook implementation which will pick up any files with the pattern *.stories.tsx

For the playground, run

npm start

# then in separate window from /module run
npm run start-sass

then go to localhost:3001

For Storybook, run

npm run storybook

# then in separate window from /module run
npm run start-sass

then go to localhost:6006

npm run start-sass will spin up a watcher which will watch all SASS files and rebuild them

For more information on using SASS, see SASS Concatenation in [SCSS](STORYBOOK LINK TODO)

Linting

Armstrong uses eslint, style-lint, and prettier for linting.

Packages for these are managed as dev dependencies in NPM, and configuration files can be found in module/

We recommend using the vscode plugins stylelint, eslint, and prettier to make errors show in vscode, and to allow auto fixing functionality.

Testing

Armstrong uses Jest for unit testing, @testing-library/react-hooks for hook testing, and Cypress via Storybook for component testing.

Packages for these are managed as dev dependencies in NPM, and configuration files can be found in module/ and in module/.jest and module/.cypress respectively.

Tests can be run using npm test for all tests, or npm test-jest and npm test-cypress respectively.

Due to the nature of the codebase it is not currently possible to use custom commands in Cypress.

Process

Please work in feature branches named feature/* branched from develop

When your work is ready, submit a pull request into develop and (if you're internal to Rocketmakers) post a link to your pull request in the #armstrong-dev slack channel for someone to review.

Github will run an Action to test linting and to see if Storybook builds before your branch can be merged.

Ensure Commitizen is installed for templating your commit messages.

Release process

When you are ready to release your work, open a pull request from develop into main named Release, and list all upcoming changes. Once all actions have passed, this can be merged in, where it'll be released automatically.

Armstrong uses Semantic release for automatic versioning and publishing based on Commitizen formatted messages from main.

The type of release will be worked out from all of the commit messages in your merge. So the highest of the following will dictate the version

fix: will be a patch 0.0.X
feat: will be minor 0.X.0
breaking: will be major X.0.0
chore: won't trigger a release

So basically, do your work on a branch feature/*, make sure all of your commit messages go through Commitizen, and when you're happy open a PR onto main.

When it gets approved and merged in, the release type will automatically be worked out based on the highest (breaking > feat > fix) of all the commits that are part of that merge and a tag and version will be published to npm automatically.

This release happens in a Github Action labelled release. Logs can be found here

Once a release is complete, please post a cursory message in the #armstrong Slack channel with a list of changes.