elemental-design / elemental-react

Build UI components once, render to any platform: web, React Native and Sketch.

Elemental React

Build UI components once, render to any platform using react-primitives. This library abstracts away common UI patterns for you.

Abstraction for app presentation to speed up cross-platform UI design and development with code using React/Sketch as a design function. This is an underlying cross-platform abstraction wrapper that allows you to build your own design language

Based off styled-system and styled-components. API is similar to rebass, but using React Native style components.

This is an alpha/preview release. Please test comprehensively before using in production.

Supported React Renderers:

• react - React web
• react-native - React Native (WIP)
• react-sketchapp - React Sketch.app
• more - Post an issue to suggest more! Ideally an API should exist that lets you override the primitives

Getting Started

npm install elemental-react

import React from 'react';
import {
  Box, Text, Button,
} from 'elemental-react';

// ...
return (
  <Box mt={3} bg="dark-blue">
    <Text color="white">
      Hello World
    </Text>
  </Box>
);

Example UI

Quick example of a design created by a coder (me 🙂), developed with live rendering to react-sketchapp:

Related Reading

• https://daneden.me/2018/01/05/subatomic-design-systems/
• https://medium.com/styled-components/build-better-component-libraries-with-styled-system-4951653d54ee
• https://medium.com/@_alanbsmith/layered-components-6f18996073a8
• https://medium.com/@_alanbsmith/component-api-design-3ff378458511

Design Properties

Line

Themed colour (primary)

• Weight
• Color
• Texture
• Style

Shape

Foundational element.

• Depth
  • Light, shadow and depth (illusion)

Texture

Physical quality of a surface.

Balance

Equal distribution of visual weight – spacing.

• Symmetry (each side is the same)
• Asymmetry – evenly distribute weight
• Rule of thirds – grid divided into thirds

Color

Properties

• Hue
• Saturation
  • Monochromatic
• Value

Analagous Colour Scheme

elemental-react's Issues

Align with Swift API (elemental-swift)

Radix UI and Tailwind CSS

How can we implement cross-platform support together with Radix UI and Tailwind CSS for web? Multilayer abstraction where base components have a styled-components/native implementation and Radix UI implementation? And molecules/components created from these elements can declare what primitive platforms they support?

• Radix UI
• Tailwind CSS

Standardise around Yoga CSS and styled-system API

Support 100% of Yoga CSS API.

Support styled-system aliases with proposed system:

const useStyles = (styles) => {
  return useMemo(() => {
    const parsedStyles = parseStyles(styles);
    return StyleSheet.create(parsedStyles);
  }, styles);
};

const filterStyles = props => props.filter(prop => ['backgroundColor, 'color, 'fontSize'].includes(prop);
const filterProps = props => props.filter(prop => !['backgroundColor, 'color, 'fontSize'].includes(prop);

const Box = (props) => {
  const styles = filterStyles(props);
  const style = useStyles(styles);

  return <View style={style} {...filterProps(props)} />;
};

const mapping = {
  bg: backgroundColor,
  p: padding,
  pt: paddingTop,
  pb: paddingBottom,
  pl: paddingLeft,
  pr: paddingRight,
  m: margin,
  mt: marginTop,
  mb: marginBottom
// ...
};

const parseStylesheet = (styles) => {
  const parsedStyles = {};

  Object.entries(styles).forEach(([att, val]) => {
    if (mapping[att]) {
      parsedStyles[mapping[att]] = val;
    }
  });

  return parsedStyles;
}

lineHeight warnings in React Native

There are lineHeight warnings in the console in development mode in React Native. I applied a fix that should be transforming line heights to px, but for some peculiar reason, the warnings are still being given.

Relevant code: https://github.com/elemental-design/elemental-react/blob/master/src/atoms/Text/Text.tsx#L20-L24

npm/yarn warnings due to dependencies that should be devDependencies

Add prop for onClick handler to choose Touchable interaction type

Implement enum for opacity, default (without feedback), highlight, material (TouchableNativeFeedback), to choose which react-native Touchable component is used.

Elemental React | Abstract [WIP]

What is Elemental React?

Prototype rapidly first, polish quickly after.

Elemental React is a new way of building React apps. Build your UI once, render it to any platform with our base elements.

elemental-react provides you base elements, which can be used to build a prototype of your app or design.

e.g. We provide you a base <Button> which can be extended by you to <PrimaryButton>, <SecondaryButton>, <FlatButton>, <OutlinedButton>, etc.

Import spec

Export base primitives from the main entrypoint:

import { Box, Text, Button } from 'elemental-react';

Export components from individual files also for better bundle size management e.g.

import BaseButton from 'elemental-react/lib/Button';

export default extend(BaseButton, {
  bg: 'green',
  outlined: true,
  borderColor: 'black',
  '&:hover': {
    bg: 'greens.7'
  },
});

Infer lineHeight prop from resolved style font size

If someone isn't passing a fontSize prop, but a style object instead, then we should extract the font size with StyleSheet.resolve() and use it as a default lineHeight value, potentially adding a configurable multiplier and grid rounding number in the theme object.