Reonomy Design Styles Library

Install:

$ yarn add @reonomy/styles

Usage:

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:

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:

{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:

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

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

<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.

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):

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

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

$ 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

$ npm version <update_type>

To publish updates to the package:

$ 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:

"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:

"@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:

$ yarn cache clean

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

$ npm publish

You may need to be added to the NPM Reonomy organization before publishing.

Reference

See Create/Publishing NPM Package for more info on updating NPM.

See Material UI for more info on getting setup with Material UI in React.

Author

Reonomy Team

License

MIT