Install

Clone the library.

1. cd [library] and run yarn install

Note the step below requires (sinopia)[https://github.com/rlidwka/sinopia] to be installed and running you can follow the install instructions (here)[https://github.com/rlidwka/sinopia].

2. npm publish --registry http://localhost:4873/

3. Create a new project

4. yarn add local-biomeme-components

Purpose:

Wanted to have a component library for Biomeme that allowed quick building various sections of our site. I based it off of the Rebass (google Rebass) that would basically be a drop in. Rebass uses inline styles in the entire library and I wanted to get away from that because those styles add up per component. At the same time I liked the idea of inline styles from CSSINJSS as well as functionalCSS, so this is my attempt to merge the two which are kind of opposites.

The components of this library use the Theme wrapper to attact one main customizaed sheet and use the styles from that to build it.

*Inline styles used occasionally from dynamic properties

Tradeoffs:

initial render time => No clue not sure how the delay is compared to Rebass itself.. | Components should render fast because most of the time no need to attach a sheet and they are kept light as functional Components

Problems Encounted:

1. Dynamic style elements: Keep using inline styles for things such as width and height which will depend on the compent props and are not globally available
2. Passing down style={ someStyleObject }: Detect if style is being passed and merge it with current style
3. Passing down className=“some class string”: added to the class by using classNames lib
4. Global conflicts: HOC passes down globalClasses to component, which you can then compose using jss compose
5. Customization: User passes in global style sheet and merges in own css, inline styles used for width and colors that dont exist

Library Implementation Notes:

*Library uses a slight modification of react-css’s (github.com/cssinjss/react-css) inject sheet method which allows for the user to compose from the global style sheet as opposed to repeating the styles, this is used only when element specific styles do not exist in the global sheet and is used at a limited rate. This is done In order to avoid naming conflicts with the global sheet, when a style sheet is injected that also requires styles from the global sheet, the specific style sheet composes from the global sheet.

Components with inline styles every time (Dynamic properties such as width, and height):

• Any class depending on colors will first look at global, if not found uses inline
• Any class that can have a variable width and height: Avatar, Card, DropdownMenu, Drawer,
• Slight adjustments to make components work together: InlineForm

Components where sheet needs to be injected:

Arrow, Badge, CardImage, ButtonCircle Most input fields: Select, Checkbox, Radio, ===> Need to be refactored to compose ===> Badge, Button Circle

Also noted that the library will attempt to look for height-[scale] and width-[scale] for elements that require them, these are not set by the acecss library.

Todo:

Refactor out some styles that are being used often such as cursor: pointer top: 0, bottom: 0, left: 0, right: 0, ===> Need to be refactored to compose ===> Badge, Button Circle

// Usage Example, importing css requires some css loader
import acecss from 'raw!ace-css-kyle-custom/css/ace.css';
import { App, config } from 'local-biomeme-components';

const addons = {
  // Required for some elements
  'pointer': { cursor: 'pointer'},
  'inline-flex': { display: 'inline-flex' },
  // End Requirement,
  'height-1': { height: 12 },
  'height-2': 12,
  'height-3': 12,
  'height-4': 12,
  'height-5': 12,
  // Override previous classes
  'bg-red': { backgroundColor: '#D3422E' },
  'bg-yellow': { backgroundColor: '#F5BB12' },
  'bg-green': { backgroundColor: '#4BAE16' },
  'bg-blue': { backgroundColor: '#3299CC' },
  'bg-orange': { backgroundColor: '#FFBA60' },
  'bw1': { borderWidth: 1 },
  'bw2': { borderWidth: 2 },
  'bw3': { borderWidth: 4 },
  'bw4': { borderWidth: 8 },
}

const finalStyle = config(acecss, addons);

// Top level of React App
<App sharedSheet={finalStyle}>
</App>