Polarwind

Polarwind is a React component library for the Envoy design system.

App development

Using the React components

While we do offer a CSS-only version, **we strongly recommend using the React versions of
our components**. It allows for rich, complex components like Tabs and autogrowing
multline TextFields, and will not have as many breaking changes as the CSS-only version.

$3

Run the following command using npm:

``bash
npm install @envoy/polarwind --save
`

If you prefer Yarn, use the following command instead:

`bash
yarn add @envoy/polarwind
`

$3

1. Import the CSS directly into your project if your asset packager supports it:

`js
import "@envoy/polarwind/polarwind.css";
`

Otherwise include the CSS in your HTML. We suggest copying the styles file into your own
project, but you may also use it directly:

`html
rel="stylesheet"
href="https://unpkg.com/@envoy/polarwind@3.0.0/polarwind.css"
/>
`

2. Include any of the provided components in your project:

`js
import { AppProvider, Page, Button } from "@envoy/polarwind";
`

3. Tell React to render the element in the DOM:

`js
ReactDOM.render(


alert("Button clicked!")}>Example button

,
document.querySelector("#app")
);
`

Using the CSS components

If React doesn't make sense for your application, you can use a CSS-only version of our
components. This includes all the styles you need for every component in the library, but
you'll be responsible for writing the correct markup and updating classes and DOM
attributes in response to user events.

$3

1. Include the CSS in your HTML. We suggest copying the styles file into your own project,
but you may also use it directly:

`html
rel="stylesheet"
href="https://unpkg.com/@envoy/polarwind@3.0.0/polarwind.css"
/>
`

2. Include the markup and associated classes in your HTML document:

`html
Example button
`

Examples

We have created example applications to document some of the ways you could include
Polarwind in one of your own applications. Each of these examples includes further
documentation on how to install dependencies and run the app:

- create-react-app
example

Development

This package has a development dependency on a private @envoy/tailwind package hosted on
GitHub Packages. It contains the common Envoy shared preset for Tailwind. You will need to
perform an npm login against the @envoy scope for you to be able to install the
package (yes, even if this project uses yarn you still need to use npm for logging in)

`
$ npm login --scope envoy --registry=https://npm.pkg.github.com
Username:
Password: repo and read:packages>
Email:
`

You will have to generate a Personal Access Token (PAT) with the scopes repo and
read:packages in order to log in. Now you should be able to yarn install as normal.

GitHub Actions in this project will use a PAT from envoybot.

We use Storybook to create a simple, hot-reloading playground for development on these
components. Run yarn start in order to start the Storybook server.

We use generators to build scaffolding for a typical component. Run yarn generate to see
the list of generators provided.

$3

Chromatic runs for every pull request. Chromatic is a tool that compares
screenshots for every single component we have in the library.

Chromatic is not always 100% accurate. Since it uses screenshot comparison, even browser
sub-pixel rendering differences can cause Chromatic to ask for user confirmation of whether a
change was intended or not. In cases like that, use your best judgement to determine
whether you need to address it or not. This is why the choice to approve something or not
is always manual. While everyone can view changes, only members of the Envoy team an
approve changes.

#### Manual visual regression testing

To start a server for manually viewing the visual regression testing examples, run yarn storybook`.

Learning resources

If you're new to React, we recommend you start with the official React Getting Started
documentation. As you read
through the topics we suggest you follow along using their React Hello World CodePen
example.

Additional resources:

- Online training courses at reacttraining.com,
buildwithreact.com, and
reactforbeginners.com.
- The community resources in Awesome React.
- As questions and find answers in the various React support
communities.

License

Source code is under a custom license based on MIT. The license restricts
Polarwind usage to applications that integrate or interoperate with Envoy software or
services, with additional restrictions for external, stand-alone applications.

Trivia

Polarwind is a portmanteau of Polaris and Tailwind
CSS.