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

@wealthsimple/patchwork

v39.0.0

Published

Wealthsimple's React Styleguide and Component Library

Downloads

198

Readme

Coverage Status Dependabot Status

Patchwork - Wealthsimple React Component Library

Purpose:

Patchwork is Wealthsimple's UI Component library for React applications.

It aims to provide a first class DSL for building user interfaces that can:

  • Reduce the amount of DOM and CSS you have to write,
  • Help ensure that all your UI is themeable,
  • Help ensure that all your UI is accessible.

Patchwork User's Guide

Are you a developer trying to use patchwork to implement features in your application? Check out the Users' Guide.

Patchwork Implementer's Guide

Are you a designer or a developer adding features to patchwork itself? Check out the Implementers' Guide.

Stack

Architectural Decision Records

Wonder why something is implemented a certain way? Curious about the reasoning behind this code-base's conventions?

Decisions of this nature are recorded in this repo as Architectural Decision Records (ADRs).

Consuming components in your project

You can consume this project one of two ways:

Babel 7+ With Flow

For compatibility with our internal toolchain, I just expose the ES6+Flow source code for now. That means you'll need a compatible babel config + bundler setup in your project. Check this project's .babel.config.js for the specific configuration.

Then import things from @wealthsimple/patchwork to use them:

import { Box } from '@wealthsimple/patchwork';

ES5/UMD

Not running a transpiler? Running a transpiler that's not Babel (e.g. TypeScript)? Not using Flow?

No problem. We also expose a UMD-ified ES5 version of this library in the dist folder:

ES6/TypeScript:

import { Box } from '@wealthsimple/patchwork/dist';

CommonJS:

const { Box } = require('@wealthsimple/patchwork/dist');

Running locally

To run patchwork locally run ( on port 9001):

yarn storybook

If using a compatible IDE ( RubyMine ) you can display flow errors by linking the flow library:

  • Language & Frameworks / JavaScript
  • Select language version: Flow
  • Select executable flow library "... patchwork/node_modules/flow-bin/flow-osx-v0.78.0/flow"

Accessibility Testing

As of January 2021, Wealthsimple is legally required to make any of our websites WCAG 2.0 Level AA compliant. Accessibility is sometimes forgotten about when developing fast features in web, but it’s extremely important in providing all of our clients the same, equal-level of access to our services. Patchwork must be accessible because it serves as the building blocks for our entire application.

In order to test accessibility, we have some scanning jobs in CI that will flag things like missing screenreader labels, insufficient text/background colour contrasts.

Note: Automated testing can't catch everything. When you make changes or create a new component, before you launch it to the public you should run it by the Web a11y testing guidelines.