rootstrap/react-native-use-styles

A classy approach to manage your react native styles.

react-native-use-styles's Issues

Pre-commit or pre-push hook

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

We should run a linter and the tests before pushing it to the repository. Having a pre-commit or pre-push hook would be great.

Contributions are welcome

Contributions are welcome

This is a new library; so, if you come up with a cool feature to add to this library, just create an issue and we can discuss it.

Thanks!

Improve errors: computed style outside computed property

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

As a developer, I want to have descriptive errors when the library fails.

Error:

invalid-style-type: when you are trying to use an invalid path.

Example:

This should raise an error:

Styles({
  style: ([isFlex1]) => isFlex ? 'fx:1' : 'fx:2'
})

This is a common mistake for computed styles that should be added inside the computed property as following:

Styles({
  computed: {
    style: ([isFlex1]) => isFlex ? 'fx:1' : 'fx:2'
  }
})

If the style type is a function outside the computed styles, we should raise an error only in development. This is an example of an error implementation: #15

Feature: constants in object styles

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

Given that currently, we can use constants but not for object styles; It would be great having the possibility of using constants when defining object styles too.

What we can do right now:

GlobalStyles({
  constants: {
    red: '#ff0000'
  },
  global: 'color:$red'
});

What we should have too:

GlobalStyles({
  constants: {
    red: '#ff0000'
  },
  global: {
    color: '$red'
  }
});

Not sure how this is going to impact on the performance, given we need to check if there's a constant in every object's property value, maybe we should create a draft for this.

Feature: Media queries, conditional based styles or size normalizer

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

It could be great to have some kind of conditional based styles feature, like media queries. Something as this: https://github.com/vitalets/react-native-extended-stylesheet#media-queries. Maybe is not worth; but it could be a good feature.

export default Styles({
  queries: {
    "ios": {
       ...
     },
     "android": {
      ...
    },
    "max-width: 329": {
      ...
    }
  }
})

As an alternative, we can go for a size normalizer as https://github.com/nirsky/react-native-size-matters; where you can put the sizes with a notation like 100@vs to normalize the size depending on the device specifications.

Improve USER_GUIDE.md

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

The USER_GUIDE.md is pretty lame, we can improve it. This probably involves changes in the README.md.

Add object styles inheritance.

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

Add object styles inheritance. Something like this:

{
  style1: {
    fontSize: 12,
  },
  style2: {
    color: 'red',
  },
  style3: {
    extends: '.style1 .style2'
    textAlign: 'center',
  }
}

Improve errors: invalid-path

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

As a developer, I want to have descriptive errors when the library fails.

Error:

invalid-path: when you are trying to use an invalid path.

Example:

const s = useStyles();

return <Text styles={s`invalid-path`} />

If the path is invalid given we are not receiving what we expect, that is a key-value path key:value, a class.myClass, or a namespace @namespace.class we should raise an error.

Feature: Add Components with styles attribute

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

It would be awesome having custom components that internally uses the useStyles hook. This is a proof of concept, we need a draft for this.

import namespace from './my-namespaced-styles';
const { Text } = namespace;

const component = () ⇒ {
  return (
    <Text styles=".global-style .local-style ">
      Hello World!
    </Text>
  );
}

In this case, the custom Text component is a wrapper of the React Native's Text component and this wrap is using the library to transform the styles prop to its respective styles.

Return a merged style object instead of an array

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

This is a small change, today the hook is returning an array of styles, it should be more usable to return just a merged object of the styles inside these array of styles.

The purpose of this change is to be able to do this:

<Component style={[s`.global .namespaced`, { color: red }]} />

Instead of doing this:

<Component style={[...(s`.global .namespaced`), { color: red }]} />

It should be a small change when returning styles inside this function:

react-native-use-styles/src/core/stylesManager.js

Line 34 in 2652c16

export const GlobalUse = (path, namespace) => {

This is going to break the tests given they are expecting an array, not an object, but the solution should be trivial.

React test renderer config

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

It would be great having tests with react-test-renderer. We should add the necessary configuration for them, and maybe an example test using the renderer. Maybe we can use react-native-testing-library (?)

Documentation: Benchmark

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

I had made some performance tests and all seems to be working as expected, but It would be great to have some kind of benchmarking (when using this library in a large project with lots of styles defined) in the README.md or USER_GUIDE.md.

Warnings code

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

Improve warnings code. Today we have a repetitive code to add a development warning; e.g:

if (process.env.NODE_ENV !== "production" && someCondition) {
    console.warn(
        `useStyles [warningKey]: "[description]. You are seeing this warning because you are in development mode. In a production build there will be no warning.`
    );
}

It would be great to have this logic encapsulated into a function as this:

warn(someCondition, description, warningKey);

It's important that these warns don't appear in the production build. For that we are using @rollup/plugin-replace, so we need to change its configuration in order to support this.

Typescript types declaration file

Bugs and Questions

Checklist

• This is a @rootstrap/react-native-use-styles specific issue.

• I am using the latest version of @rootstrap/react-native-use-styles

• I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

It would be great to have typescript types to avoid the warning about not having them Could not find a declaration file for module ....

Feature: CSS notation

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

It would be great to have the possibility of writing styles with a CSS notation, something similar as you can do in emotion maybe (?).

This doesn't seem something tough to create, given there are a couple of libraries that make the CSS to JS-Styles transformation; the only blockers are the custom fields that need to be treated differently: constants and computed.

Typings are missing in latest release 1.3.0

Bugs and Questions

Checklist

• This is a @rootstrap/react-native-use-styles specific issue.

• I am using the latest version of @rootstrap/react-native-use-styles

• I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

I just installed version 1.3.0 and it seems it's missing the typings that were added with #11.

Reproduction

Install version 1.3.0 and check the node_modules.

Improve errors: non-existent-namespace

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

As a user, I want to have descriptive errors when the library fails.

Errors:

Non-existent-namespace: when you are trying to use a namespace that doesn't exist.

Example:

const s = useGlobalStyles('non existent namespace here');
const styles = globalUse('non existent namespace here');

These should raise an error only on development.

Integration with styled-components

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

We would like to use react-native-use-styles with styled-components. Because styled-components is not supporting global styles with react-native, what could be fixed with react-native-use-styles. Would it be possible to seed styles from react-native-use-styles in a styled-components string template?