open-index/open-npm huggingface dataset:
npm package: @shopify/post-purchase-ui-extensions
Description: The API for UI Extensions that run in the post-purchase step of Shopify’s Checkout
Latest version: 0.13.5

# `@shopify/post-purchase-ui-extensions`

This library contains type definitions and other utilities for writing UI Extensions in the post-purchase page of Shopify’s checkout. However, nothing in this library is strictly required to write a UI extension. As a developer building a UI extension, you can forego the utilities this library provides entirely, and instead use the [global `shopify` API](documentation/globals.md) directly in a plain JavaScript file. The script below is a valid UI extension script without any additional processing:

```js
shopify.extend('Checkout::PostPurchase::Render', (root, input) => {
  const button = root.createComponent('Button', {
    onPress() {
      console.log('Upsold!');
      input.done();
    },
  });

  button.appendChild('Buy now');

  root.appendChild(button);
});
```

Keeping in mind that any utility provided by this library is only a convenience API on top of the `shopify` global, the rest of the documentation for this library will show examples using JavaScript imports from the `@shopify/post-purchase-ui-extensions` library. Using JavaScript modules in this way requires a [build step](../packages/checkout-ui-extensions-run), but can provide useful developer experience features and opportunities for build-time performance optimizations.

## Getting started

Before you dig in to what this library has to offer, please read through the [getting started guide](https://docs.google.com/document/d/1JqTUEBXWZ2gKC7bfWc0wy7i6zHtHmldd3ef4N3FHoeU/edit#heading=h.1256j7138hx).

## API

This package provides utilities, types, and documentation for the many different APIs a UI extension can access. Before you write your first extension, you should read through the following documentation in order:

- Details about [the globals available to UI Extensions](documentation/globals.md)
- The list of [checkout extension points](documentation/extension-points.md)
- An explanation of how [extensions can render UI natively in checkout](documentation/rendering.md)
- The list of [components available to UI Extensions](documentation/components.md)

Once you’ve read the documents above, you’re ready to write a checkout extension. If you’re wanting to learn even more, this repo has a few additional guides that cover techniques for writing larger, more complex extensions:

- Strategies for [unit testing extensions](documentation/testing.md)
- [`@shopify/post-purchase-ui-extensions-react`](../post-purchase-ui-extensions-react), which allows complex extensions to render using all the power of [React](https://reactjs.org)
npm package: @shopify/postcss-plugin
Description: Shopify's org-wide PostCSS preset
Author: Shopify Inc.
Latest version: 5.0.4

# `@shopify/postcss-plugin`

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](../../LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Fpostcss-plugin.svg)](https://badge.fury.io/js/%40shopify%2Fpostcss-plugin.svg)

All of Shopify’s preferred [PostCSS](https://github.com/postcss/postcss) plugins wrapped up in a single, easy-to-use plugin.

## Installation

```bash
yarn add --dev @shopify/postcss-plugin

# or, with npm

npm i @shopify/postcss-plugin --save-dev
```

## Features

This plugin wraps around the following PostCSS transformations:

- [`postcss-calc`](https://github.com/postcss/postcss-calc)
- [`postcss-flexbugs-fixes`](https://github.com/luisrudge/postcss-flexbugs-fixes)
- [`postcss-will-change`](https://github.com/postcss/postcss-will-change)
- [`autoprefixer`](https://github.com/postcss/autoprefixer)
npm package: @shopify/predicates
Description: A set of common JavaScript predicates
Author: Shopify Inc.
Latest version: 3.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/predicates`

[![Build Status](https://github.com/Shopify/quilt/workflows/Node-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI)
[![Build Status](https://github.com/Shopify/quilt/workflows/Ruby-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Fpredicates.svg)](https://badge.fury.io/js/%40shopify%2Fpredicates.svg)

A set of common JavaScript predicates. The functions in this library either take one input and return `true`/`false`, or return a customized function that does so.

## Installation

```bash
yarn add @shopify/predicates
```

## API

### Predicates

- `isPositiveNumericString` Returns `true` when its input is a positive numeric string and `false` otherwise.
- `isNumericString` Returns `true` when its input is a numeric string and `false` otherwise.
- `isEmpty` Returns `true` when its input is `null`, `undefined`, or has `length` 0.
- `isEmptyString` Returns `true` when it's input is an empty string or contains only whitespace.
- `notEmpty` Returns `true` when its input is not `null`, `undefined` or has `length` 0.
- `notNumericString` Returns `true` when its input is not a numeric string and `false` otherwise.

### Predicate creators

- `lengthMoreThan` Given a number, returns a function that returns true when that input has length more than that number and false otherwise.
- `lengthLessThan` Given a number, returns a function that returns true when that input has length less than that number and false otherwise.

### Helpers

- `not` Given a function that returns a boolean, returns a function that returns a boolean in the opposite cases.
npm package: @shopify/prettier-config
Description: Shared prettier configuration
Author: Shopify Inc.
Latest version: 1.1.4

# `@shopify/prettier-config`

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](../../LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Fprettier-config.svg)](https://badge.fury.io/js/%40shopify%2Fprettier-config.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/prettier-config.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/prettier-config.svg)

Shared prettier configuration

## Installation

```bash
$ yarn add --dev @shopify/prettier-config
```

## Usage

Shopify’s shared prettier config comes bundled in `@shopify/prettier-config`. To enable these rules, add a `prettier` property in your `package.json` and reference this shared config as follows:

```
"prettier": "@shopify/prettier-config"
```

Previously, rules had been defined directly in a `.prettierrc` or `package.json`

Any previous `.prettierrc` should be removed in favour of the shared config.
npm package: @shopify/react-app-bridge-universal-provider
Description: A self-serializing/deserializing `app-bridge-react` provider that works for isomorphic applications
Author: Shopify Inc.
Latest version: 3.1.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/react-app-bridge-universal-provider`

[![Build Status](https://github.com/Shopify/quilt/workflows/Node-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI)
[![Build Status](https://github.com/Shopify/quilt/workflows/Ruby-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-app-bridge-universal-provider.svg)](https://badge.fury.io/js/%40shopify%2Freact-app-bridge-universal-provider.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/react-app-bridge-universal-provider.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/react-app-bridge-universal-provider.svg)

A self-serializing/deserializing [`app-bridge-react`](https://github.com/Shopify/app-bridge/tree/master/packages/app-bridge-react) provider that works for isomorphic applications.

## Installation

```bash
yarn add @shopify/react-app-bridge-universal-provider
```

## Usage

### Props

The component takes children, `apiKey`, `shopOrigin`, and `forceRedirect`. Similar to `@shopify/app-bridge-react`'s Provider.

### Example

```tsx
// App.tsx

import {AppBridgeUniversalProvider} from '@shopify/react-app-bridge-universal-provider';

function App({apiKey, shopOrigin}: {apiKey?: string; shopOrigin?: string}) {
  return (
    <AppBridgeUniversalProvider apiKey={apiKey} shopOrigin={shopOrigin}>
      {/* rest of the app */}
    </AppBridgeUniversalProvider>
  );
}
```
npm package: @shopify/react-csrf
Description: Share CSRF tokens throughout a React application
Author: Shopify Inc.
Latest version: 3.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/react-csrf`

[![Build Status](https://github.com/Shopify/quilt/workflows/Node-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI)
[![Build Status](https://github.com/Shopify/quilt/workflows/Ruby-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-csrf.svg)](https://badge.fury.io/js/%40shopify%2Freact-csrf.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/react-csrf.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/react-csrf.svg)

Share CSRF tokens throughout a React application.

## Installation

```bash
yarn add @shopify/react-csrf
```

## Usage

Setup the Provider around all of the application that need to access csrf token.

```tsx
// App.tsx
import * as React from 'react';
import {CsrfTokenContext} from '@shopify/react-csrf';

function App({token}: {token?: string}) {
  return (
    <CsrfTokenContext.Provider value={token}>
      {/* rest of the app */}
    </CsrfTokenContext.Provider>
  );
}
```

Access csrf token using `useCsrfToken` hook:

```tsx
import React from 'react';
import {useCsrfToken} from '@shopify/react-csrf';

export default function MyToken() {
  const csrfToken = useCsrfToken();
  return <p>My CSRF Token is: {csrfToken}</p>;
}
```
npm package: @shopify/react-form-state
Description: Manage React forms tersely and type-safely with no magic
Author: Shopify Inc.
Latest version: 2.3.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/react-form-state`

[![Build Status](https://github.com/Shopify/quilt/workflows/Node-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI)
[![Build Status](https://github.com/Shopify/quilt/workflows/Ruby-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-form-state.svg)](https://badge.fury.io/js/%40shopify%2Freact-form-state.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/react-form-state.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/react-form-state.svg)

Manage React forms tersely and type-safely with no magic.

This library is now superseded by [@shopify/react-form](https://github.com/Shopify/quilt/tree/main/packages/react-form) as it allows you to write the preferred, functional, and hooks-driven React components over class-based ones.

## Installation

```bash
yarn add @shopify/react-form-state
```

## Usage

### `<FormState />`

The default component exported by this library is `<FormState />`.

```typescript
import FormState from '@shopify/react-form-state';
```

```typescript
// Fields here refers to the inferred type of your initialValues object
interface Props<Fields> {
  initialValues: Fields;
  validators?: Partial<ValidatorDictionary<Fields>>;
  onSubmit?: SubmitHandler<Fields>;
  validateOnSubmit?: boolean;
  children(form: FormDetails<Fields>): React.ReactNode;
}
```

Its only mandatory props are `initialValues` and `children`. The `initialValues` prop is used to infer all the types for the rest of the component, and to generate handlers and field state objects. The `children` prop expects a function of the current state of the form, which is represented by a `FormDetails` object.

```typescript
<FormState initialValues={myInitialValues}>
  {({fields, dirty, valid, submitting, errors, reset, submit}) => {
    return /* some cool ui */;
  }}
</FormState>
```

For detailed explanations of how to use `<FormState />` check out [the guide](https://github.com/Shopify/quilt/tree/main/packages/react-form-state/docs/building-forms.md).

### `validators`

The library also makes a number of validation factory functions available out of the box that should help with common use cases, as well as some tools to make building reusable custom validators easy.

```typescript
import {validate, validators} from '@shopify/react-form-state';
```

For detailed explanations of the validation utilities, check out [the validation docs](https://github.com/Shopify/quilt/tree/main/packages/react-form-state/docs/validators.md).
npm package: @shopify/react-i18n-universal-provider
Description: A self-serializing/deserializing i18n provider that works for isomorphic applications
Author: Shopify Inc.
Latest version: 3.1.8
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/react-i18n-universal-provider`

> [!CAUTION]
>
> `@shopify/react-i18n-universal-provider` is deprecated.
>
> Shopifolk, see
> [Shopify/quilt-internal](https://github.com/shopify/quilt-internal) for
> information on the latest packages available for use internally.

[![Build Status](https://github.com/Shopify/quilt/workflows/Node-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI)
[![Build Status](https://github.com/Shopify/quilt/workflows/Ruby-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-i18n-universal-provider.svg)](https://badge.fury.io/js/%40shopify%2Freact-i18n-universal-provider.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/react-i18n-universal-provider.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/react-i18n-universal-provider.svg)

A self-serializing/deserializing i18n provider that works for isomorphic applications.

## Installation

```bash
yarn add @shopify/react-i18n-universal-provider
```

## Usage

#### Props

The component takes an object containing the React children to render and any options to use when configuring the `I18nManager` to provide to the tree.

The `<I18nUniversalProvider>` takes the following props:

```tsx
// from @shopify/react-i18n
I18nDetails {
    locale: string;
    country?: string;
    currency?: string;
    timezone?: string;
    pseudolocalize?: boolean;
    fallbackLocale?: string;
    onError?(error: I18nError): void;
}
```

#### Example

```tsx
// App.tsx
import {I18nUniversalProvider} from '@shopify/react-i18n-universal-provider';

function App({locale}: {locale?: string}) {
  return (
    <I18nUniversalProvider locale={locale}>
      {/* rest of the app */}
    </I18nUniversalProvider>
  );
}
```

### Possible Issues

#### Missing i18n manager error

```
Error: Missing i18n manager. Make sure to use an <I18nContext.Provider /> somewhere in your React tree from the @shopify/react-i18n hook.
```

###### Cause:

Duplicate and/or unmet versions of `react-i18n`

###### Potential Solution:

Deduplicating dependencies for react-i18n-universal-provider and react-i18n.

```bash
npx yarn-deduplicate --packages @shopify/react-i18n yarn.lock
npx yarn-deduplicate --packages @shopify/react-html yarn.lock
npx yarn-deduplicate --packages @shopify/react-effect yarn.lock
# deduplicate other dependencies of @shopify/react-i18n
```

```bash
yarn why @shopify/react-i18n # ensure no duplicate / unmet dependencies
yarn list  # ensure no duplicate / unmet dependencies
yarn install
```
npm package: @shopify/react-i18n-webpack-plugin
Description: A webpack plugin that automatically filled in &#x60;@shopify/react-i18n&#x60;&#x27;s &#x60;useI18n&#x60;s or &#x60;withI18n&#x60;s call arguments.
Author: Shopify Inc.
Latest version: 0.0.0-remove-babel-beta.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm package: @shopify/react-idle
Description: Utilities for working with idle callbacks in React
Author: Shopify Inc.
Latest version: 3.2.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/react-idle`

[![Build Status](https://github.com/Shopify/quilt/workflows/Node-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI)
[![Build Status](https://github.com/Shopify/quilt/workflows/Ruby-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-idle.svg)](https://badge.fury.io/js/%40shopify%2Freact-idle.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/react-idle.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/react-idle.svg)

Utilities for working with [idle callbacks](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback) in React.

## Installation

```bash
yarn add @shopify/react-idle
```

## Usage

This library provides a hook (`useIdleCallback`) and a component (`OnIdle`) for registering a callback to run in the next idle callback.

> Note: this callback is not called with any arguments, unlike direct usage of `requestIdleCallback`. This makes it more suited for use with discrete operations, rather than ones that will need to schedule themselves for subsequent idle callbacks if the work has not been completed.

```tsx
import {useCallback} from 'react';
import {useIdleCallback, OnIdle} from '@shopify/react-idle';

function MyComponent() {
  const callback = useCallback(() => {
    console.log('Hello from an idle callback!');
  }, []);

  useIdleCallback(callback);

  // or

  return <OnIdle perform={callback} />;
}
```

If the callback ever changes, or the component unmounts, the original callback will not be run.

### `UnsupportedBehavior`

Because not every browser supports idle callbacks, this library allows you to specify the behavior of `perform` when `requestIdleCallback` is not present. There are currently two options (each of which can be passed as an `unsupportedBehavior` option for the hook, or an `unsupportedBehavior` prop of the component):

- `UnsupportedBehavior.AnimationFrame` (default): run the callback in the next animation frame using `requestAnimationFrame`.
- `UnsupportedBehavior.Immediate`: run the callback immediately on mount.

```tsx
import {useIdleCallback, UnsupportedBehavior} from '@shopify/react-idle';

function MyComponent() {
  useIdleCallback(doSomethingThatCanBeDeferred, {
    unsupportedBehavior: UnsupportedBehavior.Immediate,
  });

  return null;
}
```

### Additional types

Because the typings for `requestIdleCallback` are not yet provided by the TypeScript standard library, this module also exports a number of types that are needed to interact with these globals.
npm package: @shopify/react-native-performance
Description: A library for measuring the render times for the different flows in your app.
Author: shopify
Latest version: 4.1.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# react-native-performance

A library for measuring the render times for the different flows in your app.

## Usage & installation

Please refer to [documentation](https://shopify.github.io/react-native-performance/docs/fundamentals/getting-started) to see more information and usage examples.
npm package: @shopify/react-native-performance-lists-profiler
Description: Extension library atop @shopify/react-native-performance. Contains utilities for profiling the FlatList and FlashList components.
Author: shopify
Latest version: 1.1.0

# react-native-performance-lists-profiler

Extension library atop [@shopify/react-native-performance-navigation](../react-native-performance-navigation/getting-started). Contains utilities for profiling the `FlatList` and `FlashList` components.

## Usage & installation

Please refer to [documentation](https://shopify.github.io/react-native-performance/docs/guides/react-native-performance-lists-profiler/) to see more information and usage examples.
npm package: @shopify/react-native-performance-navigation
Description: Extension library atop @shopify/react-native-performance. Contains some utilities for easier profiling of apps using react-navigation.
Author: shopify
Latest version: 3.0.0

# react-native-performance-navigation

This package contains some additional higher-order profilers that we anticipate most apps would find helpful, as well as `ReactNavigationPerformanceView`, built on top of vanilla `PerformanceMeasureView` with the addition of optimizations for [React Navigation library](https://reactnavigation.org/).

## Usage & installation

Please refer to [documentation](https://react-native-performance.docs.shopify.io/guides/react-native-performance-navigation/getting-started) to see more information and usage examples.
npm package: @shopify/react-native-performance-navigation-bottom-tabs
Description: Extension library atop @shopify/react-native-performance. Contains some utilities for easier profiling of apps using @react-navigation/bottom-tabs.
Author: shopify
Latest version: 3.0.0

# react-native-performance-navigation-bottom-tabs

Extension library atop [@shopify/react-native-performance-navigation](../react-native-performance-navigation/getting-started) with additional helper methods for `@react-navigation/bottom-tabs` library.

## Usage & installation

Please refer to [documentation](https://react-native-performance.docs.shopify.io/guides/react-native-performance-navigation/bottom-tabs) to see more information and usage examples.
npm package: @shopify/react-native-performance-navigation-drawer
Description: Extension library atop @shopify/react-native-performance. Contains some utilities for easier profiling of apps using @react-navigation/drawer.
Author: shopify
Latest version: 3.0.0

# react-native-performance-navigation-drawer

Extension library atop [@shopify/react-native-performance-navigation](../react-native-performance-navigation/getting-started) with additional helper methods for `@react-navigation/drawer` library.

## Usage & installation

Please refer to [documentation](https://react-native-performance.docs.shopify.io/guides/react-native-performance-navigation/drawer) to see more information and usage examples.
npm package: @shopify/react-preconnect
Description: Reduces request latency by preconnecting hosts
Author: Shopify Inc.
Latest version: 0.1.11
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/react-preconnect`

**Note**: This module is now deprecated. You should move to using the `<Preconnect />` component from [`@shopify/react-html`](../react-html) instead.

[![Build Status](https://travis-ci.org/Shopify/quilt.svg?branch=master)](https://travis-ci.org/Shopify/quilt)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-preconnect.svg)](https://badge.fury.io/js/%40shopify%2Freact-preconnect.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/react-preconnect.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/react-preconnect.svg)

Reduces request latency by preconnecting hosts

## Installation

```bash
$ yarn add @shopify/react-preconnect
```

## Usage

This library default exports a `<Preconnect />` component, which adds `<link />`s to `<head></head>` for the given `hosts` with `dns-prefetch` and `preconnect` [relations](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).

```javascript
import Preconnect from 'react-preconnect';

...

function App(props) {
  const preconnectHosts = [
    'api.example.com',
    'example.com',
    'example2.com',
  ]

  <Preconnect hosts={preconnectHosts} />
}
```

## Interface

```typescript
export interface Props {
  hosts: string[];
}
```
npm package: @shopify/react-serialize
Description: Provides an idiomatic way to serialize data for rehydration in a universal react application.
Author: Shopify Inc.
Latest version: 1.0.22
Deprecated: This module is now deprecated. You should move to using the serialization features of @shopify/react-html instead.

# `@shopify/react-serialize`

**Note**: This module is now deprecated. You should move to using the serialization features of [`@shopify/react-html`](../react-html) instead.

---

[![Build Status](https://travis-ci.org/Shopify/quilt.svg?branch=master)](https://travis-ci.org/Shopify/quilt)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-serialize.svg)](https://badge.fury.io/js/%40shopify%2Freact-serialize) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/react-serialize.svg)

Provides an idiomatic way to serialize data for rehydration in a universal react application.

## Installation

```bash
$ yarn add @shopify/react-serialize
```

## Usage

On the server, the `<Serializer />` component will serialize whatever you pass as it's `data` prop.

```javascript
// in your server renderer
import {Serializer} from '@shopify/react-serialize';

...

const apolloState = getDatafromTree(appMarkup)

const markup = react.renderToString(
  <React.Fragment>
    {appMarkup}
    <Serializer id="apollo-data" data={apolloState}>
  </React.Fragment>
);
```

Then on the client, you can use `getSerialized` to fetch that data out of the DOM and initialize whatever you need.

```javascript
// when you are rehydrating on the client
import {getSerialized} from '@shopify/react-serialize';
import ApolloClient from 'apollo-client';

...

const {data: initialApolloData} = getSerialized('apollo-data');
const client = new ApolloClient({
  ...myConfig,
  cache: cache.restore(initialApolloData),
});
```
npm package: @shopify/react-utilities
Description: A set of utilities for React projects at Shopify.
Author: Shopify Inc.
Latest version: 2.0.7
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# react-utilities

[![CircleCI](https://circleci.com/gh/Shopify/react-utilities.svg?style=shield&circle-token=3a8fc955d07b5bd4cb53eeb4b01c57cde84e1154)](https://circleci.com/gh/Shopify/react-utilities)

A set of utilities for React projects at Shopify.

## 🛑 Deprecated Package

This package is no longer supported and has been deprecated.

### Migration

Both `classNames` and `variationName` utilities can no be found in [`@shopify/css-utilities`](https://github.com/Shopify/quilt/tree/master/packages/css-utilities)

All other utilities should either be inline or no longer be used.

## Installation

```bash
$ yarn add @shopify/react-utilities
```

## API

See the comments and TypeScript annotations in the code for details on the provided utilities.

## License

MIT, see [LICENSE.md](http://github.com/Shopify/react-utilities/blob/master/LICENSE.md) for details.

<img src="https://cdn.shopify.com/shopify-marketing_assets/builds/19.0.0/shopify-full-color-black.svg" width="200" />
npm package: @shopify/react-web-worker
Description: A hook for using web workers in React applications
Author: Shopify Inc.
Latest version: 5.1.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/react-web-worker`

[![Build Status](https://github.com/Shopify/quilt/workflows/Node-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ANode-CI)
[![Build Status](https://github.com/Shopify/quilt/workflows/Ruby-CI/badge.svg?branch=main)](https://github.com/Shopify/quilt/actions?query=workflow%3ARuby-CI)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Freact-web-worker.svg)](https://badge.fury.io/js/%40shopify%2Freact-web-worker.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/react-web-worker.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/react-web-worker.svg)

A hook for using web workers in React applications.

## Installation

```bash
yarn add @shopify/react-web-worker
```

## Usage

This package provides a `useWorker` hook to leverage web workers in React. For convenience, it also re-exports the entirety of [`@shopify/web-worker`](https://github.com/Shopify/quilt/tree/main/packages/web-worker), so you only need to install this package to get access to those additional exports.

### `useWorker()`

`useWorker` allows your React applications to take advantage of [web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) provided by `createWorkerFactory` from `@shopify/web-worker`. This hook creates a web worker during render and terminates it when the component unmounts.

```tsx
import React, {useEffect} from 'react';
import {Page} from '@shopify/polaris';
import {createWorkerFactory, useWorker} from '@shopify/react-web-worker';

// assume ./worker.ts contains
// export function hello(name) {
//  return `Hello, ${name}`;
// }

const createWorker = createWorkerFactory(() => import('./worker'));

function Home() {
  const worker = useWorker(createWorker);
  const [message, setMessage] = React.useState(null);

  useEffect(() => {
    (async () => {
      // Note: in your actual app code, make sure to check if Home
      // is still mounted before setting state asynchronously!
      const webWorkerMessage = await worker.hello('Tobi');
      setMessage(webWorkerMessage);
    })();
  }, [worker]);

  return <Page title="Home"> {message} </Page>;
}
```

You can optionally pass a second argument to `useWorker`, which will be used as the [options to the worker creator function](../web-worker#customizing-worker-creation).
npm package: @shopify/repo-package-stats
Description: Get usage of NPM packages across the Shopify organisation.
Author: Alex Page
Latest version: 0.0.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @shopify/repo-package-stats

Generate a CSV file of repositories that install specific packages across the Shopify organisation. Find the total number of repositories that install `@shopify/polaris`, total contributors, repo creation date, service tier and more!

| Status       | Owner         | Help                                                                  |
| ------------ | ------------- | --------------------------------------------------------------------- |
| Experimental | @polaris-team | [New issue](https://github.com/Shopify/repo-package-stats/issues/new) |

## How to use

To collect data from Grok and GitHub we need authentication tokens.

### Minerva authentication

To acces the data in Grok we need a `MINERVA_TOKEN` for OAUTH. Visit [grok.shopifycloud.com/search](https://grok.shopifycloud.com/search) and get it from the cookies.

### GitHub authentication

To access the repository creation date and total contributors we need a `GH_PAT` for authentication. Visit [the settings page](https://github.com/settings/tokens/new?description=package-usage&scopes=repo) to create a personal access token. After created you must [enable SSO](https://docs.github.com/en/authentication/authenticating-with-saml-single-sign-on/authorizing-a-personal-access-token-for-use-with-saml-single-sign-on).

### Get started

Once you have your tokens you can run:

```
npx @shopify/repo-package-stats @shopify/polaris MINERVA_TOKEN GH_PAT
```
npm package: @shopify/restyle
Description: A system for building constraint-based UI components
Author: Shopify Inc.
Latest version: 2.4.5

![Restyle Image](./Restyle.png)

<div align="center">
<a href="https://shopify.github.io/restyle/">Getting started</a> •
<a href="https://shopify.github.io/restyle/#installation">Installation</a> •
<a href="https://github.com/Shopify/restyle/tree/master/fixture">Playground</a> •
<a href="https://discord.gg/k2gzABTfav">Discord</a>
</br></br>

**Build a consistent, themed UI in minutes.**
</br>
</br>

![RestyleTheme 2020-02-25 17_43_51](https://user-images.githubusercontent.com/688415/75268245-91084b80-57f7-11ea-905b-2a9046aa5ca3.gif)
</br>
</br>

</div>

The Restyle library provides a type-enforced system for building UI components in React Native with TypeScript. It's a library for building UI libraries, with themability as the core focus.

This library assumes that the UI is built upon a design system that (at the very least) defines a set of colors and spacing constants that lays as a foundation. While the library acknowledges that there can be exceptions to the system by allowing any style to be overridden, it keeps the developer most productive when one-off values are kept to a minimum.

## Installation

Add the package to your project using one of the following:

```bash
yarn add @shopify/restyle
```

```bash
npm install @shopify/restyle
```

```bash
npx expo install @shopify/restyle
```

## Usage

See [Usage](https://shopify.github.io/restyle/#usage) in the documentation, or see below for the fixture app.

## App / Playground

The [fixture](https://github.com/Shopify/restyle/tree/master/fixture) is an example app to showcase the library's usage.

## Running the Documentation site locally

To run the Documentation site locally, please follow the steps below:

1. `cd documentation`
2. `yarn`
3. `yarn start`
4. Go to http://localhost:3000/restyle/

## Migrating to restyle v2

Read more about migration to v2 [here](https://shopify.github.io/restyle/guides/migrating-to-v2)

## Inspiration

Restyle is heavily inspired by [https://styled-system.com](https://styled-system.com/).

## Contributing

For help on setting up the repo locally, building, testing, and contributing
please see [CONTRIBUTING.md](https://github.com/Shopify/restyle/blob/master/CONTRIBUTING.md).

## Code of Conduct

All developers who wish to contribute through code or issues, take a look at the
[CODE_OF_CONDUCT.md](https://github.com/Shopify/restyle/blob/master/CODE_OF_CONDUCT.md).

## License

MIT, see [LICENSE.md](https://github.com/Shopify/restyle/blob/master/LICENSE.md) for details.

<img src="https://cdn.shopify.com/shopify-marketing_assets/builds/19.0.0/shopify-full-color-black.svg" width="200" />
npm package: @shopify/rpc
Description: Utilities for `postMessage`-based remote procedure calls
Author: Shopify Inc.
Latest version: 3.0.0
Deprecated: This package has been deprecated. We recommend you use @remote-ui/rpc, which is a more modern version of the package. @shopify/web-worker has been updated to depend on @remote-ui/rpc for communication with web workers.

# `@shopify/rpc`

This package has been deprecated. We recommend you use [`@remote-ui/rpc`](https://github.com/Shopify/remote-ui/tree/main/packages/rpc), which is a more modern version of the package. [`@shopify/web-worker`](../web-worker) has been updated to depend on `@remote-ui/rpc` for communication with web workers.
npm package: @shopify/screenshot-glb
Description: A command line utility for taking screenshots of a glTF 2.0 binary file using Google's <model-viewer> component.
Author: Stephan Leroux
Latest version: 4.1.0

# 📸 screenshot-glb

Easily take screenshots and create thumbnail images for glTF 2.0 Binary (GLB) files.

## Install

Use npm to install this tool:

`npm install ---save @shopify/screenshot-glb`

## Usage

To start taking screenshots of GLB files

```sh
$ screenshot-glb
Options:
  --help         Show help                                              [boolean]
  --version      Show version number                                    [boolean]
  -i, --input    Input glTF 2.0 binary (GLB) filepath                  [required]
  -o, --output   Output PNG screenshot filepath                        [required]
  -t, --timeout  Timeout length
  -w, --width    Output image width
  -h, --height   Output image height
  -c, --color    Change the background color of the rendered image
  -@, --model_viewer_version
                 Pass the version of Model Viewer which should be used .eg 1.9
  -m, --model_viewer_attributes
                 Pass <model-viewer> attributes as a URL search param string
  -q, --image_quality
                 Change the image quality of the rendered JPG default 0.92
```

## Dependencies

The module relies on using [puppeteer](https://www.npmjs.com/package/puppeteer) to spawn a headless instance of Chrome to render Google's [<model-viewer>](https://github.com/GoogleWebComponents/model-viewer) web component with the GLB model loaded.

## Development

For Shopify Employees

- `dev up`
- `yarn link`
- You may need to need to do `chmod 755 dist/cli.js` to allow for execution
- `screenshot-glb -i <PATH_TO_MODEL> -o <PATH_TO_OUTPUT_IMAGE>`

Outside Development

- `yarn install`
- `yarn link`
- `screenshot-glb -i <PATH_TO_MODEL> -o <PATH_TO_OUTPUT_IMAGE>`

## Examples

```
// Simply render a GLB to a JPG
$ screenshot-glb -i <PATH_TO_MODEL> -o <PATH_TO_OUTPUT_IMAGE>

// Change the width and height of the render
$ screenshot-glb -i <PATH_TO_MODEL> -o <PATH_TO_OUTPUT_IMAGE> --width 600 --height 1200

// Change the exposure and environment-image
$ screenshot-glb -i <PATH_TO_MODEL> -o <PATH_TO_OUTPUT_IMAGE> -m "environment-image=neutral&exposure=0.92"

// Use a specific version of Model Viewer to create the screenshot
$ screenshot-glb -i <PATH_TO_MODEL> -o <PATH_TO_OUTPUT_IMAGE> -@ 1.9
```

### Linux

You may need to install the following packages in order for the headless Chrome instance to work on headless Linux VM machines:

```
gconf-service
libasound2
libatk1.0-0
libatk-bridge2.0-0
libc6
libcairo2
libcups2
libdbus-1-3
libexpat1
libfontconfig1
libgcc1
libgconf-2-4
libgdk-pixbuf2.0-0
libglib2.0-0
libgtk-3-0
libnspr4
libpango-1.0-0
libpangocairo-1.0-0
libstdc++6
libx11-6
libx11-xcb1
libxcb1
libxcomposite1
libxcursor1
libxdamage1
libxext6
libxfixes3
libxi6
libxrandr2
libxrender1
libxss1
libxtst6
ca-certificates
fonts-liberation
libappindicator1
libnss3
lsb-release
xdg-utils
wget
```