elemental-design / elemental-react Goto Github PK

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.

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.

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'
  },
});

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

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

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

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;
}