Quilt

A loosely related set of packages for JavaScript/TypeScript projects at Shopify.

These libraries compose together to help you create performant modern JS apps that you love to develop and test. These packages are developed primarily to be used on top of the stack we like best for our JS apps; Typescript for the flavor, Koa for the server, React for UI, Apollo for data fetching, and Jest for tests. That said, you can mix and match as you like.

⚠️ Over the past few years, this repo has become a dumping ground for a variety of packages unrelated to the core problems Quilt aims to solve. For this reason, we are no longer accepting new packages.

Usage

The Quilt repo is managed as a monorepo that is composed of 77 npm packages and one Ruby gem. Each package/gem has its own README.md and documentation describing usage.

Package Index

Package	Version	Description
address		Address utilities for formatting addresses
address-consts		Constants and types relating to @shopify/address
address-mocks		Address mocks for @shopify/address
admin-graphql-api-utilities		A set of utilities to use when consuming Shopify’s admin GraphQL API
ast-utilities		Utilities for working with Abstract Syntax Trees (ASTs)
async		Primitives for loading parts of an application asynchronously
browser		Utilities for extracting browser information from user-agents
csrf-token-fetcher		JavaScript utility function to fetch the CSRF token required to make requests to a Rails server
css-utilities		A set of CSS styling-related utilities
dates		Lightweight date operations library
decorators		A set of decorators to aid your JavaScript journey
enzyme-utilities		Enzyme utilities for testing React components
function-enhancers		A set of helpers to enhance functions
graphql-config-utilities		Common utilities for graphql-config
graphql-fixtures		Utilities for generating fixture objects from GraphQL documents.
graphql-mini-transforms		Transformers for importing .graphql files in various build tools.
graphql-persisted		Apollo and Koa integrations for persisted GraphQL queries.
graphql-testing		Utilities to create mock GraphQL factories
graphql-tool-utilities		Common utilities for GraphQL developer tools
graphql-typed		A more strongly typed version of GraphQL's DocumentNode.
graphql-typescript-definitions		Generate TypeScript definition files from .graphql documents
graphql-validate-fixtures		Validates JSON fixtures for GraphQL responses against the associated operations and schema
i18n		Generic i18n-related utilities
jest-dom-mocks		Jest mocking utilities for working with the DOM
jest-koa-mocks		Utilities to easily stub Koa context and cookies
jest-mock-apollo		Jest + Enzyme mocks for Apollo 2.x
jest-mock-router		Jest + Enzyme mocks for React Router 3.x
koa-liveness-ping		A package for creating liveness ping middleware for use with Koa
koa-metrics		Aims to provide standard middleware and instrumentation tooling for metrics in Koa
koa-performance		Creating middleware that sends performance-related data through StatsD
koa-shopify-graphql-proxy		A wrapper around koa-better-http-proxy which allows easy proxying of GraphQL requests from an embedded Shopify app
koa-shopify-webhooks		Receive webhooks from Shopify with ease
logger		Opinionated logger for production-scale applications
magic-entries-webpack-plugin		A webpack plugin that automatically sets up entrypoints from filename conventions
mime-types		MIME type consistency
network		Common values related to dealing with the network
performance		Primitives for collecting browser performance metrics
polyfills		Blessed polyfills for web platform features
predicates		A set of common JavaScript predicates
react-app-bridge-universal-provider		A self-serializing/deserializing app-bridge-react provider that works for isomorphic applications
react-async		Tools for creating powerful, asynchronously-loaded React components
react-bugsnag		An opinionated wrapper for Bugsnag's React plugin
react-compose		Cleanly compose multiple component enhancers together with minimal fuss
react-cookie		Cookies in React for the server and client
react-csrf		Share CSRF tokens throughout a React application
react-csrf-universal-provider		A self-serializing/deserializing CSRF token provider that works for isomorphic applications
react-effect		A component and set of utilities for performing effects within a universal React app
react-form		Manage React forms tersely and safely-typed with no magic using React hooks
react-form-state		Manage React forms tersely and type-safely with no magic
react-google-analytics		Allows React apps to easily embed Google Analytics scripts
react-graphql		Tools for creating type-safe and asynchronous GraphQL components for React
react-graphql-universal-provider		A self-serializing/deserializing GraphQL provider that works for isomorphic applications
react-hooks		A collection of primitive React hooks
react-html		A component to render your React app with no static HTML
react-hydrate		Utilities for hydrating server-rendered React apps
react-i18n		i18n utilities for React handling translations, formatting, and more
react-i18n-universal-provider		A self-serializing/deserializing i18n provider that works for isomorphic applications
react-idle		Utilities for working with idle callbacks in React
react-import-remote		Asynchronous script loading for React
react-intersection-observer		A React wrapper around the Intersection Observer API
react-network		A collection of components that allow you to set common HTTP headers from within your React application
react-performance		Primitives to measure your React application's performance using @shopify/performance
react-router		A universal router for React
react-server		Utilities for React server-side rendering
react-shortcuts		Declaratively and efficiently match shortcut combinations in your React application
react-testing		A library for testing React components according to our conventions
react-tracking-pixel		Allows React apps to easily embed tracking pixel iframes
react-universal-provider		Factory function and utilities to create self-serializing/deserializing providers that work for isomorphic applications
react-web-worker		A hook for using web workers in React applications
rpc		Utilities for postMessage-based remote procedure calls
semaphore		Counting semaphore
sewing-kit-koa		Easily access Sewing Kit assets from a Koa server
statsd		An opinionated StatsD client for Shopify Node.js servers and other StatsD utilities
storybook-a11y-test		Test storybook pages with axe and puppeteer
useful-types		A few handy TypeScript types
web-worker		Tools for making web workers fun to use
with-env		A utility for executing code under a specific NODE_ENV

Gem Index

Gem	Version	Description
quilt_rails		A turn-key solution for integrating server-rendered React into your Rails app using Quilt libraries

Want to contribute?

Check out our Contributing Guide

Questions?

For Shopifolk, you can reach out to us in Slack in the #web-foundation-tech channel. For external inquiries, we welcome bug reports, enhancements, and feature requests via GitHub issues.

License

MIT © Shopify, see LICENSE.md for details.