Getting started

Honeycomb-react

Honeycomb-react is a collection of reusable React components and resources to build awesome "flix-styled" products. It's based on Honeycomb core UI kit and shares same style base, head over to Honeycomb website if you need more design related documentation and guidelines..

Quick links:

Usage

Using components in your project

First ensure you have read permissions to the @flixbus jfrog npm registry.

npm i -S @flixbus/honeycomb-react

Second, make sure including the Roboto font into you project. We recommend 2 options:

Use our CDN link:

<link rel="preconnect" href="//honeycomb.flixbus.com/"/>
<link rel="preload" as="style" href="//honeycomb.flixbus.com/dist/13.4.1/css/honeycomb-fonts.css" crossorigin="" />
<link href="//honeycomb.flixbus.com/dist/13.4.1/css/honeycomb-fonts.css" rel="stylesheet" type="text/css" crossorigin="" />
<link rel="preconnect" href="//honeycomb.flixbus.com/"/>
<link rel="preload" as="style" href="//honeycomb.flixbus.com/dist/13.4.1/css/honeycomb-fonts.css" crossorigin="" />
<link href="//honeycomb.flixbus.com/dist/13.4.1/css/honeycomb-fonts.css" rel="stylesheet" type="text/css" crossorigin="" />

Use @fontsource/roboto package.

This option is beneficial if you want to have a fine grain control over the assets you load. In Honeycomb we use font weights 400, 500 and 700; so you can import just these when using it e.g.:

import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

And finally, make sure your App contents are wrapped with our <ThemeWrapper> component. It is required for themes and styles to work, please refer to its documentation to find out more.

Now you can access our tree shakable components as follows:

import { Button } from '@flixbus/honeycomb-react';
import { Button } from '@flixbus/honeycomb-react';

All the component specific css is self-contained and will be injected in the document head by the respective component.

Server side rendering

In order to provide styles from server side rendered markup you can make use of the InjecssProvider context. There are 2 options that are possible with this, depending on you setup: - context.styles has all the styles combined and concatenated as a single string; - context.styleNodes has an array of individual style nodes you can add to your <head> element.

We advise using style nodes as this prevents style duplication during runtime (honeycomb-react detects that nodes are already there and does nothing). To prevent specificity issues make sure to inject these styles before your application custom styles.

Here is an example:

const { InjecssContext } = require('@flixbus/honeycomb-react');
const HoneycombSsr = {}
ReactDOMServer.renderToString(
  <InjecssContext.Provider value={HoneycombSsr}>
    <YourAmazingApp />
  </InjecssContext.Provider>
);
// HoneycombSsr.styles will contain a single string with all required styles
// HoneycombSsr.styleNodes will contain an array of "<style>" nodes for all the HC-react components included on the page
const { InjecssContext } = require('@flixbus/honeycomb-react');
const HoneycombSsr = {}
ReactDOMServer.renderToString(
  <InjecssContext.Provider value={HoneycombSsr}>
    <YourAmazingApp />
  </InjecssContext.Provider>
);
// HoneycombSsr.styles will contain a single string with all required styles
// HoneycombSsr.styleNodes will contain an array of "<style>" nodes for all the HC-react components included on the page

Production builds

Honeycomb react offers production build for any variant without proptype validation. This will allow you to spare quite some bytes.

To enable it, add the following to your production webpack build (assuming you want esm modules):

{
  resolve: {
    alias: {
      '@flixbus/honeycomb-react': '@flixbus/honeycomb-react/dist/prod/esm/lib.js'
    }
  }
}

Included SASS/CSS files

We provide some useful tools from Honeycomb static for your beloved styling needs.

Theme variables

ThemeWrapper component takes care of injecting theme specific CSS variables to your page.

By default, it only adds them for the "default" theme, if you need your app to support more themes you'll need to pass a theme object with those themes to ThemeWrapper via themes prop. Please check ThemeWrapper component docs for more information on that specific topic.

No matter how many themes you utilize, all the theme variables are available for styling of your custom components.

You'll need to take care of proper prefexing of variables, in honeycomb-react all the theme design tokens have an --hcr- prefix.

So you need to use them like so:

.my-awesome-component {
  padding: 0 var(--hcr-spacing-2);
  background: var(--hcr-ui-primary-color);
}

More info regarding themes and available variables is provided in Honeycomb core library.

Helper classes

If you liked those helper classes from Honeycomb static and willing to use them in your project we have you covered just import:

// if you rely on SASS loader in your project use:
import '@flixbus/honeycomb-react/dist/scss/honeycomb-helpers.scss';
// otherwise use prebuilt CSS version
import '@flixbus/honeycomb-react/dist/css/honeycomb-helpers.css';
// if you rely on SASS loader in your project use:
import '@flixbus/honeycomb-react/dist/scss/honeycomb-helpers.scss';
// otherwise use prebuilt CSS version
import '@flixbus/honeycomb-react/dist/css/honeycomb-helpers.css';

in your project and enjoy the helpers gang.

Available components

Honeycomb react implementation is intended to work standalone and cover 100% of the components present in Honeycomb.

Missing components

You might need to develop features that require components that are not yet supported in this react package. In this case you can simply use the main css distribution to build the extra component as well as for styling the components of this package.

Of course, we would be really happy to welcome component contribution to help extending the functionality even further.