Develop

Installation and usage instructions for developing with Match.

1. Install external dependencies

npm install --save formik prop-types react react-dom react-is react-uid styled-components styled-system

2. Install Match packages

Install the following packages so you can consume Match’s tokens and themes to build custom page sections.

PackageVersion
@twilio-labs/match2.x
@twilio-labs/match-icons1.x
@twilio-labs/match-logos1.x
@twilio-labs/match-flags1.x
npm install --save @twilio-labs/match @twilio-labs/match-icons @twilio-labs/match-logos @twilio-labs/match-flags

3. Wrap your app with a theme component

For example, if you want to use the TwilioTheme:

import * as React from "react";
import { TwilioTheme } from "@twilio-labs/match/themes";
const App: React.FC = ({ children }) => <TwilioTheme>{children}</TwilioTheme>;
export { App };

See available themes here.

Code Quality

Match distributes reusable configuration for ESLint, Stylelint, Browserslist and TypeScript. It is highly recommended to extend from these configs for a consistent development experience. Additionally we recommend using cspell and Prettier for code spell checking and automatic formatting.

ESLint

Install the Match ESLint configuration and all peer dependencies.

npm install --save-dev @twilio-labs/eslint-config-match @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-eslint eslint eslint-config-prettier eslint-plugin-eslint-comments eslint-plugin-import eslint-import-resolver-typescript eslint-plugin-jest eslint-plugin-jest-formatting eslint-plugin-jsx-a11y eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-testing-library eslint-plugin-unicorn

Create a .eslintrc.json file in the root of your project and add the following.

{
"extends": ["@twilio-labs/eslint-config-match"]
}

Stylelint

Install the Match Stylelint configuration and all peer dependencies.

npm install --save-dev @twilio-labs/stylelint-config-match stylelint stylelint-a11y stylelint-config-prettier stylelint-config-rational-order stylelint-config-recommended stylelint-declaration-block-no-ignored-properties stylelint-no-unsupported-browser-features stylelint-order

Create a .stylelintrc.json file in the root of your project and add the following.

{
"extends": ["@twilio-labs/stylelint-config-match"]
}

TypeScript

Install the Match TypeScript configuration.

npm install --save-dev @twilio-labs/tsconfig-match

Create a tsconfig.json file in the root of your project and add the following.

{
"extends": "@twilio-labs/tsconfig-match"
}

Browserslist

Install the Match browserslist configuration.

npm install --save-dev @twilio-labs/browserslist-config-match

Add the following to your project's package.json file.

{
"browserslist": ["extends @twilio-labs/browserslist-config-match"]
}