npm package: @reonomy/styles
Description: Reonomy Design Styles Library
Author: Reonomy
Latest version: 2.13.0

# Reonomy Design Styles Library

[![npm version](https://img.shields.io/npm/v/@reonomy/styles.svg?style=flat-square)](https://www.npmjs.com/package/@reonomy/styles)

Install:

```bash
$ yarn add @reonomy/styles
```

Usage:

```jsx
import ReonomyStyles from '@reonomy/styles';

function App() {
  return (
    <ReonomyStyles>
      <MyApp />
    </ReonomyStyles>
  );
}
```

## What's included

The default export `ReonomyStyles` includes the "kitchen sink" of the Reonomy Web styles library:

- Default Material UI `CssBaseline`

- ReonomyTheme: A custom theme generated by Material UI's `createMuiTheme()`

- Ionicon icon set, each exported as an MUI `SvgIcon`

- Global CSS
  - Utilities
    - Helper classes like `.capitalize`, `.uppercase`, `.lowercase` etc, and `.icon-spin` for animated rotating icons.
  - Typography
    - Font references (see below).
  - Labels
    - Colors for Reonomy's user-generated labels `.label-style-1`, `.label-style-2` etc
  - Leader lines
    - Styles for common `dl`/`dt`/`dd` data display
  - MTA Icons
    - Styles for MTA transit line icons for NYC properties

## Running Storybook

To view components, icons and theme run the following command:

```bash
yarn storybook
```

## Font assets

In order for font files to be bundled along with your application, you will need a bundler (like webpack) that recognizes font file imports in order to include them in the bundle. Create-react-app supports this by default. Custom webpack configurations will need the `file-loader` plugin or something similar in order to load font assets.

For example, as seen in /example/webpack.config.js:

```js
{test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/, loaders: ['file-loader']}
```

## Icon assets

All SVG icons are wrapped in MUI's `SvgIcon`, inheriting all `SvgIconProps`, and formatted at `viewBox="0 0 24 24"`.

All icons are available individually as direct imports, alongside the exported Theme, and CssBaseline:

```js
import {
  ReonomyCssBaseline,
  ReonomyTheme,
  IconArrowDownOutline,
  IconArrowCircleDownFilled,
} from '@reonomy/styles`
```

They can be used and styled directly with inline styles or classes.

```jsx
<IconPlusCircleFilled style={{ width: 40, height: 40, color: 'red' }} className="iconstyle">
```

They will inherit their parent color and fontSize by default.

## Updating Icons

Currently all Icon SVGs are exported from our [Figma design system](https://www.figma.com/file/1sDRuHjkM96zSxlFTGtiEa/Liminal?node-id=800%3A4961).

All files inside /src/icons are auto-generated by the script `/scripts/figma-icon-import.js`. It fetches all icons in our Figma doc and writes them to individual React files in that directory. It also generates an index.tsx file for handling module exports, as well as a index.spec.tsx for adding to storybook.

To run, first export the necessary envs (Figma API token is stored in 1Password):

```bash
$ export FIGMA_PROJECT_ID=1sDRuHjkM96zSxlFTGtiEa
$ export FIGMA_API_TOKEN=<token>
```

Then run:
(Note that it will remove and rewrite the /src/icons directory entirely)

```bash
$ yarn icons
```

After a successful run, any issues or anomolies in the file outputs should be captured by `yarn lint` and `yarn compile` (see below).

To see a real diff of the updated code changes you will likely need to run `yarn pretty-quick` to prettify first.

## Update NPM

Update package version in package.json or bump npm version with <update_type> being `patch`, `minor`, or `major`

```bash
$ npm version <update_type>
```

To publish updates to the package:

```bash
$ yarn lint
$ yarn compile
$ npm pack
```

This will generate a .tgz file top level you can now update reference to in /example/package.json, eg:

```js
"dependencies": {
    "@reonomy/styles": "../reonomy-styles-1.0.5.tgz",
```

Update /example/public/index.html as needed, and ensure visual styles are as expected.

To test in visage locally, simply reference this file from the visage directory in the visage package.json:

```js
"@reonomy/styles": "../../../styles/reonomy-styles-1.0.5.tgz",
```

Delete any old .tgz files before generating packing new versions (as they will be included in the bundle).

You may periodically need to clear the yarn cache with:

```bash
$ yarn cache clean
```

After branch is updated/approved and merged, publish the package to npm:

```bash
$ npm publish
```

You may need to be added to the NPM [Reonomy organization](https://www.npmjs.com/org/reonomy) before publishing.

## Reference

See [Create/Publishing NPM Package](https://www.npmjs.com/package/@bcms-demo/new-project) for more info on updating NPM.

See [Material UI](https://material-ui.com/getting-started/usage/) for more info on getting setup with Material UI in React.

## Author

[Reonomy Team](https://github.com/reonomy)

## License

MIT