open-index/open-npm huggingface dataset:
npm package: @shopify/loom-plugin-babel
Description: loom technology plugin for babel
Author: Shopify Inc.
Latest version: 1.0.2

# `@shopify/loom-plugin-babel`

Exposes hooks to configure [Babel](https://babeljs.io), which may then be used by other build and test plugins.

## Installation

```sh
yarn add @shopify/loom-plugin-babel --dev
```

## Usage

`babel()` is a plugin that exposes hooks to configure babel at the project level and sets default values for that configuration based on what the user provides.

Add the plugin to your project and specify any defaults that you wish to set using the `config` option, which is either an object containing all the options described on [Babel's options page](https://babeljs.io/docs/en/options) with the exception of `include` and `exclude`, or a function that accepts the existing babel options and expects the new babel options object to be returned. This example defines a `config` that uses the `@shopify/babel-preset` preset.

```js
import {createPackage} from '@shopify/loom';
import {babel} from '@shopify/loom-plugin-babel';

export default createPackage((pkg) => {
  pkg.use(
    babel({
      // Overrides any current config that is set
      config: {presets: ['@shopify/babel-preset']},
    }),
  );
});
```

```js
import {createPackage} from '@shopify/loom';
import {babel} from '@shopify/loom-plugin-babel';

export default createPackage((pkg) => {
  pkg.use(
    // Override initial babel options.
    // Return a new object, instead of mutating the argument object.
    babel({
      config(babelConfig) {
        return {
          ...babelConfig,
          plugins: [...(babelConfig.plugins || []), 'my-custom-babel-plugin'],
        };
      },
    }),
  );
});
```

### Hooks

This plugin adds the following hooks to each of the `TestProjectConfigurationHooks`, `BuildProjectConfigurationHooks`, and `DevProjectConfigurationHooks`:

- `babelConfig`: the configuration used when transpiling with Babel.

  ```js
  import {createProjectBuildPlugin} from '@shopify/loom';

  const plugin = createProjectBuildPlugin(({hooks}) => {
    hooks.configure.hook((configure) => {
      // Add an additional plugins when building
      configure.babelConfig?.hook((config) => ({
        ...config,
        plugins: [...config.plugins, require.resolve('my-babel-plugin')],
      }));
    });
  });
  ```
npm package: @shopify/loom-plugin-eslint
Description: loom plugin for linting with eslint
Author: Shopify Inc.
Latest version: 2.0.1

# `@shopify/loom-plugin-eslint`

This package provides a `loom` plugin that runs [ESLint](https://eslint.org) as part of the `loom lint` command.

This package does not make any assumptions about what version of ESLint or what ruleset you should use. You will need to install `eslint` as a peerDependency and you will need to [configure ESLint](https://eslint.org/docs/user-guide/configuring/configuration-files) yourself. We recommend using the presets provided by [`@shopify/eslint-plugin`](https://github.com/Shopify/web-configs/tree/main/packages/eslint-plugin).

## Installation

```sh
yarn add @shopify/loom-plugin-eslint eslint --dev
```

## Usage

Add `eslint` to your loom worksace plugins.

```js
import {createWorkspace} from '@shopify/loom';
import {eslint} from '@shopify/loom-plugin-eslint';

// `createWorkspace` may be `createPackage`, or `createApp` if your workspace
// consists of a single project
export default createWorkspace((workspace) => {
  workspace.use(eslint());
});
```

By default ESLint runs over everything in the current folder. You can modify the files that are processed by passing in a `files` glob to the plugin's options.

```js
export default createWorkspace((workspace) => {
  // Run eslint on a single subfolder
  workspace.use(eslint({files: 'some-subfolder/**/*'}));
});
```

### Running only ESLint when linting

To run only the ESLint linting step, you can use `--isolate-step`:

```sh
loom lint --isolate-step=ESLint
```

### Hooks

This plugin adds the following hooks to `LintWorkspaceConfigurationCustomHooks`:

- `eslintFlags`: an object of options to convert into command line flags for the `eslint` command. These options are camelcase versions of their [CLI counterparts](https://eslint.org/docs/user-guide/command-line-interface).

  ```js
  import {createWorkspacePlugin} from '@shopify/loom';

  function demoPlugin() {
    return createWorkspacePlugin('Demo', ({tasks: {lint}}) => {
      lint.hook(({hooks}) => {
        hooks.configure.hook((configure) => {
          // Modify the maximum number of allowed warnings from the default of 0
          configure.eslintFlags?.hook((flags) => ({
            ...flags,
            maxWarnings: 5,
          }));
        });
      });
    });
  }
  ```
npm package: @shopify/loom-plugin-postcss
Description: loom technology plugin for postcss
Author: Shopify Inc.
Latest version: 1.0.1

# `@shopify/loom-plugin-postcss`

Exposes hooks to configure [PostCSS](https://postcss.org/), which may then be used by other build and test plugins.

## Installation

```sh
yarn add @shopify/loom-plugin-postcss --dev
```

## Usage

`postcss()` is a plugin that exposes hooks to configure postcss at the project level and sets default values for that configuration based on what the user provides.

Add the plugin to your project and specify any defaults that you wish to set using the `config` option, which is either an object containing a `plugins` array of PostCSS plugins that are passed to the [PostCSS processor](https://postcss.org/api/#processor) and [the other options that are passed to the process command](https://postcss.org/api/#processoptions) with the exception of `to` and `from`, or a function that accepts the existing PostCSS options and expects the new PostCSS options object to be returned. This example defines a `config` that uses the `autoprefixer` plugin.

```js
import {createPackage} from '@shopify/loom';
import {postcss} from '@shopify/loom-plugin-postcss';
import {autoprefixer} from 'autoprefixer';

export default createPackage((pkg) => {
  pkg.use(
    postcss({
      // Overrides any current config that is set
      config: {plugins: [autoprefixer()]},
    }),
  );
});
```

```js
import {createPackage} from '@shopify/loom';
import {postcss} from '@shopify/loom-plugin-postcss';
import {autoprefixer} from 'autoprefixer';

export default createPackage((pkg) => {
  pkg.use(
    // Override initial postcss options.
    // Return a new object, instead of mutating the argument object.
    postcss({
      config(config) {
        return {
          ...config,
          plugins: [...(config.plugins || []), autoprefixer()],
        };
      },
    }),
  );
});
```

### Hooks

This plugin adds the following hooks to each of the `TestProjectConfigurationHooks`, `BuildProjectConfigurationHooks`, and `DevProjectConfigurationHooks`:

- `postcssConfig`: the configuration used when transpiling with PostCss.

  ```js
  import {createProjectBuildPlugin} from '@shopify/loom';
  import {myPostCssPlugin} from 'my-postcss-plugin';

  const plugin = createProjectBuildPlugin(({hooks}) => {
    hooks.configure.hook((configure) => {
      // Add an additional plugins when building
      configure.postcssConfig?.hook((config) => ({
        ...config,
        plugins: [...config.plugins, myPostCssPlugin()],
      }));
    });
  });
  ```
npm package: @shopify/loom-plugin-prettier
Description: loom plugin for linting with prettier
Author: Shopify Inc.
Latest version: 2.0.1

# `@shopify/loom-plugin-prettier`

This package provides a `loom` plugin that runs [Prettier](https://prettier.io) as part of the `loom lint` command.

This package does not make any assumptions about what version of Prettier or what ruleset you should use. You will need to install `prettier` as a peerDependency and you will need to [configure Prettier](https://prettier.io/docs/en/configuration.html) yourself. We recommend using the preset provided by [`@shopify/prettier-config`](https://github.com/Shopify/web-configs/tree/main/packages/prettier-config).

## Installation

```sh
yarn add @shopify/loom-plugin-prettier prettier --dev
```

## Usage

Add `prettier` to your loom workspace plugins.

```js
import {createWorkspace} from '@shopify/loom';
import {prettier} from '@shopify/loom-plugin-prettier';

// `createWorkspace` may be `createPackage`, or `createWebApp` if your workspace
// consists of a single project
export default createWorkspace((workspace) => {
  workspace.use(prettier());
});
```

By default prettier runs over everything in the current folder. You can modify the files that are processed by passing in a `files` glob to the plugin's options. This is useful if you use `eslint-plugin-prettier` or `stylelint-prettier` to run prettier as part of `eslint` or `stylelint` as there is no point to running prettier over those files twice.

```js
export default createWorkspace((workspace) => {
  // Run prettier on md, json, yaml and yml files
  workspace.use(prettier({files: '**/*.{md,json,yaml,yml}'}));
});
```

### Running only Prettier when linting

To run only the Prettier linting step, you can use `--isolate-step`:

```sh
loom lint --isolate-step=Prettier
```

### Hooks

This plugin adds the following hooks to `LintWorkspaceConfigurationCustomHooks`:

- `prettierFlags`: an object of options to convert into command line flags for the `prettier` command. These options are camelcase versions of their [CLI counterparts](https://prettier.io/docs/en/cli.html).

  ```js
  import {createWorkspacePlugin} from '@shopify/loom';

  function demoPlugin() {
    return createWorkspacePlugin('Demo', ({tasks: {lint}}) => {
      lint.hook(({hooks}) => {
        hooks.configure.hook((configure) => {
          // Trigger error when encountering unknown files matched by patterns
          configure.prettierFlags?.hook((flags) => ({
            ...flags,
            ignoreUnknown: false,
          }));
        });
      });
    });
  }
  ```
npm package: @shopify/loom-plugin-stylelint
Description: loom plugin for linting with stylelint
Author: Shopify Inc.
Latest version: 2.0.1

# `@shopify/loom-plugin-stylelint`

This package provides a `loom` plugin that runs [stylelint](https://stylelint.io) as part of the `loom lint` command.

This package does not make any assumptions about what version of stylelint or what ruleset you should use. You will need to install `stylelint` as a peerDependency and you will need to [configure stylelint](https://stylelint.io/user-guide/configure) yourself. We recommend using the presets provided by [`@shopify/stylelint-plugin`](https://github.com/Shopify/web-configs/tree/main/packages/stylelint-plugin).

## Installation

```sh
yarn add @shopify/loom-plugin-stylelint stylelint --dev
```

## Usage

Add `stylelint` to your loom worksace plugins.

```js
import {createWorkspace} from '@shopify/loom';
import {stylelint} from '@shopify/loom-plugin-stylelint';

// `createWorkspace` may be `createPackage`, or `createApp` if your workspace
// consists of a single project
export default createWorkspace((workspace) => {
  workspace.use(stylelint());
});
```

By default stylelint runs over css files. You can modify the files that are processed by passing in a `files` glob to the plugin's options.

```js
export default createWorkspace((workspace) => {
  // Run stylelint on css and scss files
  workspace.use(stylelint({files: '**/*.{css,scss}'}));
});
```

### Running only Stylelint when linting

To run only the Stylelint linting step, you can use `--isolate-step`:

```sh
loom lint --isolate-step=Stylelint
```

### Hooks

This plugin adds the following hooks to `LintWorkspaceConfigurationCustomHooks`:

- `stylelintFlags`: an object of options to convert into command line flags for the `stylelint` command. These options are camelcase versions of their [CLI counterparts](https://stylelint.io/user-guide/usage/cli/).

  ```js
  import {createWorkspacePlugin} from '@shopify/loom';

  function demoPlugin() {
    return createWorkspacePlugin('Demo', ({tasks: {lint}}) => {
      lint.hook(({hooks}) => {
        hooks.configure.hook((configure) => {
          // Modify the maximum number of allowed warnings from the default of 0
          configure.stylelintFlags?.hook((flags) => ({
            ...flags,
            maxWarnings: 5,
          }));
        });
      });
    });
  }
  ```
npm package: @shopify/loom-plugin-typescript
Description: loom technology plugin for typescript
Author: Shopify Inc.
Latest version: 1.1.1

# `@shopify/loom-plugin-typescript`

This package provides a `loom` plugin that runs [TypeScript](https://www.typescriptlang.org/) type-checking as part of the `loom type-check` command.

This package does not make any assumptions about what TypeScript config you should used. You will need to [configure TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) yourself. We recommend extending from the configs provided by [`@shopify/typescript-configs`](https://github.com/Shopify/web-configs/tree/main/packages/typescript-configs).

## Installation

```sh
yarn add @shopify/loom-plugin-typescript --dev
```

## Usage

Add `typescript` to your loom workspace plugins.

```js
import {createWorkspace} from '@shopify/loom';
import {typescript} from '@shopify/loom-plugin-typescript';

// `createWorkspace` may be `createPackage`, or `createWebApp` if your workspace
// consists of a single project
export default createWorkspace((workspace) => {
  workspace.use(typescript());
});
```

### Hooks

This plugin adds the following hooks to `BuildWorkspaceConfigurationCustomHooks` and `TypeCheckWorkspaceConfigurationCustomHooks`:

- `typescriptHeap`: a number correponding to the max size in megabytes to use for [node's old memory section](https://nodejs.org/api/cli.html#cli_max_old_space_size_size_in_megabytes).

  ```js
  import {createWorkspacePlugin} from '@shopify/loom';

  function demoPlugin() {
    return createWorkspacePlugin('Demo', ({tasks: {build, typeCheck}}) => {
      build.hook(({hooks}) => {
        hooks.configure.hook((configure) => {
          // Set the heap size to 2 gigabytes
          configure.typescriptHeap?.hook(() => 2048);
        });
      });

      typeCheck.hook(({hooks}) => {
        hooks.configure.hook((configure) => {
          // Set the heap size to 2 gigabytes
          configure.typescriptHeap?.hook(() => 2048);
        });
      });
    });
  }
  ```
npm package: @shopify/magic-entries-webpack-plugin
Description: A webpack plugin that automatically sets up entrypoints from filename conventions
Author: Shopify Inc.
Latest version: 2.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/magic-entries-webpack-plugin`

This package has been deprecated. We recommend that you update your webpack configuration to specify your [entrypoints](https://webpack.js.org/concepts/entry-points/).
npm package: @shopify/manifests
Description: [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE.md) [![npm version](https://badge.fury.io/js/%40shopify%2Fmanifests.svg)](https://badge.fury.io/js/%40shopify%2Fmanifests.svg)
Latest version: 1.1.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/manifests`

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

Utilities for manipulating manifests generated by `@shopify/webpack-asset-metadata-plugin`, and `@shopify/sewing-kit`.

## Installation

```sh
$ yarn add @shopify/manifests
```

## Commands

### `consolidate` command

Finds `assets.json` / `sewing-kit-manifest.json` files inside a build directory, and combines them into a single JSON file.

#### Options

##### `--root` (required)

Directory to scan for manifest files (e.g., `public/bundles` / `build/client`).

##### `--destination` (required)

Path of the combined manifest file (e.g., `public/bundles/sewing-kit-manifest.json`)

##### `--manifestGlob`

Glob pattern to search for within 'root'.

##### `--removeLegacyData`

If enabled, removes the `assets` array from consolidated manifests. This reduces unused bulk in `@shopify/sewing-kit-koa` deployments.

##### `--zip`

If enabled, gzips the consolidated output. A '.gz' extension will be automatically applied to `destination`.

#### Usage

For full details of each option and its defaults, use:

```sh
yarn run manifests consolidate --help
```

An example command:

```sh
yarn run manifests consolidate --root public/bundles --destination public/bundles/sewing-kit-manifest.json --removeLegacyData
```
npm package: @shopify/mime-types
Description: MIME type consistency
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/mime-types`

[![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%2Fmime-types.svg)](https://badge.fury.io/js/%40shopify%2Fmime-types.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/mime-types.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/mime-types.svg)

MIME type consistency.

## Installation

```bash
yarn add @shopify/mime-types
```

## Usage

This package exposes utilities to dynamically get MIME types from file names and/or get file extensions based on common MIME types.

The types of files currently supported are:

```
  'image/jpeg',
  'image/png',
  'image/gif',
  'image/webp',
  'image/heic',
  'image/svg+xml',
  'application/pdf',
  'video/mp4',
  'video/quicktime',
  'video/webm',
  'model/gltf-binary',
  'application/x-mpegURL',
  'model/vnd.usdz+zip',
```

This helps keeping MIME types and file extensions consistent.

### `getMimeTypeFromFilename`

Takes in a file name string and returns a `MimeType`.

```ts
import {getMimeTypeFromFilename} from '@shopify/mime-types';

getMimeTypeFromFilename('image.jpg'); // image/jpeg
```

### `getExtensionFromMimeType`

Takes in a `MimeType` and returns a string filename extension that matches the inputted `MimeType`.

```ts
import {getExtensionFromMimeType, MimeType} from '@shopify/mime-types';

getExtensionFromMimeType(MimeType.Pdf); // .pdf
```
npm package: @shopify/mini-oxygen
Description: Development assistant for custom Shopify Oxygen hosted storefronts
Latest version: 4.0.2

# Mini Oxygen

## Getting Started

MiniOxygen is a local runtime that simulates Oxygen production. It is based on Cloudflare's [workerd](https://github.com/cloudflare/workerd) via [Miniflare](https://miniflare.dev/).

To use MiniOxygen within your app, follow these steps:

Add `@shopify/mini-oxygen` as a dev dependency of your app:

```shell
npm install --save-dev @shopify/mini-oxygen
```

Import it and create a new instance of Mini Oxygen:

```js
import {createMiniOxygen} from '@shopify/mini-oxygen';

const miniOxygen = createMiniOxygen({
  workers: [
    {
      name: 'main',
      modules: true,
      script: `export default {
        async fetch() {
          const response = await fetch("https://hydrogen.shopify.dev");
          return response;
        }
      }`,
    },
  ],
});
```

Dispatch requests to MiniOxygen from the browser or any other environment:

```js
const response = await miniOxygen.dispatchFetch('http://placeholder');
// Or with the following code via network request:
// const {workerUrl} = await miniOxygen.ready;
// const response = await fetch(workerUrl);

console.log(await response.text());

await miniOxygen.dispose();
```

### Legacy Node.js Sandbox runtime

The previous Node.js sandbox runtime has been moved to the `@shopify/mini-oxygen/node` export. It is not recommended for new projects, but can be used as follows:

```js
import {createMiniOxygen} from '@shopify/mini-oxygen/node';

const miniOxygen = createMiniOxygen({
  script: `export default {
  async fetch() {
     const response = await fetch("https://hydrogen.shopify.dev");
     return response;
  }
 }`,
});

const response = await miniOxygen.dispatchFetch('http://placeholder');

console.log(await response.text());

await miniOxygen.dispose();
```
npm package: @shopify/name
Description: Name-related utilities
Author: Shopify Inc.
Latest version: 1.3.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/name`

> [!CAUTION]
>
> `@shopify/name` 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%2Fname.svg)](https://badge.fury.io/js/%40shopify%2Fname)
![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/%40shopify%2Fname.svg)

Utilities for formatting localized names.

## Installation

```bash
yarn add @shopify/name
```

### formatName

Formats a name (given name and/or family name) according to the locale. For example:

- `formatName({name: {givenName: 'John', familyName: 'Smith'}, locale: 'en'})` will return `John` in English and `Smith様` in Japanese
- `formatName({name: {givenName: 'John', familyName: 'Smith'}, locale: 'en', options: {full: true}})` will return `John Smith` in English and `SmithJohn` in Japanese

### hasFamilyNameGivenNameOrdering

Returns `true` when the provided locale formats family name before given name.
For example:

- `hasFamilyNameGivenNameOrdering('ja')` will return `true`
- `hasFamilyNameGivenNameOrdering('en')` will return `false`

### abbreviateName

Takes a name (given and family name) and returns a language appropriate abbreviated name, or will return `formatName` if
it is unable to find a suitable abbreviation.

For example:

- `abbreviateName({name: {givenName: 'John', familyName: 'Smith'}, locale: 'en'})` will return `JS`
- `abbreviateName({name: {givenName: '健', familyName: '田中'}, locale: 'en'})` will return `田中`

You may also pass an optional `idealMaxLength` parameter, which gives the maximum allowable abbreviation length when
trying to abbreviate a name in the Korean language (default 3 characters). In Korean, if the given name is longer than
this length, the method will instead return the first character of the given name.

### abbreviateBusinessName

Takes a business name and returns a language appropriate abbreviated name, or will return the input name if it is unable to find
a suitable abbreviation.

For example:

- `abbreviateBusinessName({name: 'Shopify'})` will return `Sho`
- `abbreviateBusinessName({name: 'My Store'})` will return `MS`
- `abbreviateBusinessName({name: '任天堂'})` will return `任天堂`

You may also pass an optional `idealMaxLength` parameter, which gives the maximum allowable abbreviation length when
trying to abbreviate a name.
npm package: @shopify/network
Description: Common values related to dealing with the network
Author: Shopify Inc.
Latest version: 3.3.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/network`

[![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%2Fnetwork.svg)](https://badge.fury.io/js/%40shopify%2Fnetwork.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/network.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/network.svg)

Common values related to dealing with the network.

## Installation

```bash
yarn add @shopify/network
```

## Usage

Import any of the enums or functions in this package to get a friendly API to common network details. The following values are exposed from this library:

- `Method`: enum for HTTP methods
- `StatusCode`: enum for HTTP status codes (mapping from name to number)
- `ResponseType`: response type enum (2xx, 3xx, etc)
- `Header`: enum for common header names
- `CspDirective`: enum for names of [content security policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) directives
- `CspSandboxAllow`: enum for values allowed in the [CSP `sandbox`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/sandbox) directive
- `SpecialSource`: enum for "special" (non-URI) sources usable in many CSP directives
- `nonceSource()`: function for generating nonce sources in CSP directives
- `getResponseType`: returns the `ResponseType` for an HTTP status code
- `HashAlgorithm`: enum for hash algorithms usable in several CSP directives
- `hashSource()`: function for generating hash sources in CSP directives
npm package: @shopify/phone
Description: Phone number utilities for formatting phone numbers
Author: Shopify Inc.
Latest version: 1.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `@shopify/phone`

[![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%2Fphone.svg)](https://badge.fury.io/js/%40shopify%2Fphone.svg) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/@shopify/phone.svg)](https://img.shields.io/bundlephobia/minzip/@shopify/phone.svg)

Phone number utilities for formatting phone numbers.

## Installation

```bash
yarn add @shopify/phone
```

## PhoneNumberFormatter methods

```ts
import PhoneNumberFormatter from '@shopify/phone';

// Pass a region code to the constructor
const phoneFormatter = new PhoneNumberFormatter('US');
const formatted = phoneFormatter.format(myPhoneNumber);
```

#### `format(phoneNumber: string): string`

Formats the given phone number

#### `update(regionCode: string): void`

Update formatter regionCode which will format number based on that (eg: 'CA' | 'JP' etc.)

#### `getNormalizedNumber(phoneNumber: string): string`

Returns phone number in E164 format

#### `getNationalNumber(phoneNumber: string): string`

Returns the non-formatted version without the country code

#### `requiresItalianLeadingZero(phoneNumber: string)`

Indicates if the leading zero of a national number should be retained when dialling internationally

#### `updateCountryCode(phoneNumber: string): void`

Updates the country code of the formatter based on the phoneNumber passed

## Exported functions

### `getRegionCodeFromNumber(phoneNumber: string): string`

Returns the region code from the provided phone number

### `getCountryCodeFromNumber(phoneNumber: string): number | undefined`

Returns the country code from the provided phone number
npm package: @shopify/polaris-design-language-css-patch
Description: 🩹 A CSS patch for applications and channels to update the design language
Author: Polaris team + Serg
Latest version: 0.0.0-rc.9
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @shopify/polaris-design-language-css-patch

> 🩹 A CSS patch for applications and channels to update the design language

This was created for the 2020 design language rollout. Partners who could not easily update the polaris dependency were given a small CSS file to override the styles to make the application or channel look like the design language.

This repo hosts the `style.min.css` file on [unpkg.com](https://unpkg.com/@shopify/polaris-design-language-css-patch@0.0.0-rc.7/style.min.css) through a [NPM package](https://www.npmjs.com/package/@shopify/polaris-design-language-css-patch). The `style.min.css` file is minified from `style.css` when releasing a new version.

## How to use

### Local development

1. Clone the repository `dev clone polaris-design-language-css-patch`
2. Install dependencies `dev up`
3. Make changes to the `style.css` file
4. Create a pull request and merge your changes into master

**Release changes**

1. Checkout the master branch and get the latest changes `git checkout master && git pull`
2. Create a new version and push the `yarn version`
3. Push the version tag to GitHub `git push --follow-tags`
4. Open [Shipit](https://shipit.shopify.io/shopify/polaris-design-language-css-patch/production) and deploy the tag

### Applications and channels using style.min.css

1. Add the patch CSS file to your HTML
2. Add a `.NewDesign` class to the parent element of your HTML `<body class="NewDesign">`
3. Test the new styles and make sure that interactive states like focus and hover still work

```diff
<!DOCTYPE html>
<html lang="en">
<head>
+  <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris-design-language-css-patch@latest/style.min.css">
</head>
- <body>
+ <body class="NewDesign">
  <!-- Your content -->
</body>
</html>
```