twitch-core-ui v0.0.1-security.0

Core UI

Twitch Core UI is a front-end library that provides:

• React (and non-react) components
• CSS variables and utilities for theming, color, spacing, and typography
• and, an icon library

The goal of Core UI is to ensure usability, accessibility, and performance across the Twitch platform while making it easier for designs and developers to build scalable solutions.

Visit our Design System Site for more information on designing and building interfaces at Twitch.

Quickstart

Starting with a blank new Create React App, you can add Core UI with these steps:

1. yarn add twitch-core-ui react-router-dom
2. Use Core UI in your app.js file like this:

// This imports the entire Core UI CSS bundle
import "twitch-core-ui/css/index.css";
import { Button, SVGAsset } from "twitch-core-ui";

class App extends Component {
  render() {
    return <Button icon={SVGAsset.Wrench}>Hello World</Button>;
  }
}

For more advanced usage, see below.

Exports

JS

This package comes with several different JS exports to adapt to the needs of various applications, with the appropriate keys added to package.json so that consumers' tooling/environment can automatically choose the most appropriate version:

• dist/index.js is the main ES5 single bundle entrypoint, useful for legacy applications and node environments
• module/index.js and its siblings is an ES5 + ES modules entrypoint, enabling tree-shaking when consumed via a compatible bundling tool (webpack, rollup, parcel, etc)

Due to the proper configuration of package.json, most consumers don't need to worry about the distinction between these 2 exports and can just use import { foo } from 'twitch-core-ui' or const { foo } = require('twitch-core-ui'). dist and module are (and must be) functionally equivalent to allow proper functionality in a isomorphic javascript application.

There is a 3rd export that includes styles as well:

• module-scss/index.js (and its siblings) is an ES5+ESM entrypoint that has not had its scss imports removed, meaning that it will have to be passed through a build tool like webpack. It includes per-component .scss files along with the imports, allowing for more advanced usages (normally via webpack aliasing and sass loaders).

CSS

There are several stylesheets available for consumption:

• css/base.css includes "browser reset" styles, "base" element styles, and CSS variables for theme tokens. It should be included in all React projects.
• css/components/ is a directory containing all of the individual component styles
• css/index.css is a single bundle containing all of the variables, base styles, and components styles
• css/functional.css is the basic layout styles (including base) and is intended for non-React applications

Choosing which styles to use comes down to an application's needs. index.css is more convenient and is guaranteed to have all the styles for any components that you use, but will include unnecessary styles if you are only using a few components. The components/ directory's individual files (along with base.css) can allow you to pick and choose the styles you want (or programmatically include them somehow), but note that several core-ui components themselves use other core-ui components and it can be easy to miss a sub-components styles. See the SCSS section for a third style-inclusion option. This is also an area of future focus for improved convenience and performance.

All of the generated CSS has been run through auto-prefixing and minification, so it shouldn't need to be reprocessed. If your build pipeline does reprocess it, you need to be careful to not strip out some of the more exotic-but-necessary style attributes. In the specific case of the PostCSS autoprefixer tool, you'll need to set { remove: false } in the config to avoid removing things like -webkit-box-orient; other tools will probably need similar configuration.

Note: The styles key is intentionally not set in package.json to give consumers the most flexibility in choosing their preferred style export.

SCSS

variables.scss is a collection of SCSS themes, functions, and variables that can be imported into .scss files to allow creation of custom styling based on the core-ui design standards. Simply add @import '~twitch-core-ui/variables'; to the top of a .scss file to access this functionality.

As mentioned above, there are also individual per-component SCSS files included next to (and imported by) the component files within the module-scss export directory. For more optimized builds, it is possible to alias twitch-core-ui imports to target the module-scss export, and with appropriate style-loading (including the includePaths: ['node_modules/twitch-core-ui/'] option for the sass-loader) you can generate a minimum-footprint stylesheet.

Types

This package comes with complete type definitions for all components, and TypeScript will automatically find them due to proper configuration.