Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@wealthsimple/patchwork

Package Overview
Dependencies
Maintainers
11
Versions
269
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wealthsimple/patchwork

Wealthsimple's React Styleguide and Component Library

  • 39.0.0
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
12
decreased by-33.33%
Maintainers
11
Weekly downloads
 
Created
Source

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.

FAQs

Package last updated on 19 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc