v1.4.0

.all-contributorsrc

@@ -6,19 +6,19 @@
   "commit": false,
   "contributors": [
     {
-      "login": "leiteszeke",
-      "name": "Ezequiel Leites",
-      "avatar_url": "https://avatars2.githubusercontent.com/u/1316339?v=4",
-      "profile": "https://leites.dev",
+      "login": "mateosilguero",
+      "name": "Mateo Silguero",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/25598400?v=4",
+      "profile": "https://github.com/mateosilguero",
       "contributions": [
         "code"
       ]
     },
     {
-      "login": "mateosilguero",
-      "name": "Mateo Silguero",
-      "avatar_url": "https://avatars0.githubusercontent.com/u/25598400?v=4",
-      "profile": "https://github.com/mateosilguero",
+      "login": "leiteszeke",
+      "name": "Ezequiel Leites",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/1316339?v=4",
+      "profile": "https://leites.dev",
       "contributions": [
         "code"
       ]

README.md

@@ -1,6 +1,9 @@
 # consistencss
+
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![npm version](https://badge.fury.io/js/consistencss.svg)](https://badge.fury.io/js/consistencss)
@@ -25,41 +28,7 @@ yarn add consistencss
 
 ## Troubleshooting
 
-### "Property 'Proxy' doesn't exist, js engine: hermes"
-
-> android
-
-If [Hermes](https://reactnative.dev/docs/hermes) is enabled in your project, you probably will see a red screen with the "Property 'Proxy' doesn't exist, js engine: hermes" message.
-
-> Quick fix: disable Hermes (not recommend).
-
-React Native 0.63 includes v0.5.0 of hermes, wich is not compatible with this lib yet. So you could install v0.5.2-rc1 temporarily.
-
-```sh
-npm install [email protected]
-```
-
-using yarn:
-
-```sh
-yarn add [email protected]
-```
-
-And React Native React Native <= 0.62.2 includes v0.4.0 of hermes, wich is not compatible either. So you could install v0.4.2-rc1 temporarily. (since Proxy was not inside hermes before)
-
-```sh
-npm install [email protected]
-```
-
-using yarn:
-
-```sh
-yarn add [email protected]
-```
-
-> https://twitter.com/HermesEngine/status/1245136667414913024
-
-We are actively tracking the changes to Hermes to ensure support.
+See [Troubleshooting](./Troubleshooting.md).
 
 ## Usage
 
@@ -149,6 +118,27 @@ const App = () => {
 };
 ```
 
+Uses the classNames API, and create your custom classes !
+
+```js
+import C, { apply, extend, classNames, View, Text } from 'consistencss';
+
+extend({
+  classes: {
+    debug: apply(C.border1, C.borderRed),
+  },
+});
+
+const App = () => {
+  return (
+    <View style={C.debug}>
+      <Text style={classNames('debug')}>
+        ...
+      </Text>
+    </View>;
+};
+```
+
 ## This repository includes:
 
 - [source code](./src/index.tsx) (with their respective unit test and 100% of code coverage, and benchmark test)
@@ -168,13 +158,14 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="https://leites.dev"><img src="https://avatars2.githubusercontent.com/u/1316339?v=4" width="100px;" alt=""/><br /><sub><b>Ezequiel Leites</b></sub></a><br /><a href="https://github.com/mateosilguero/consistencss/commits?author=leiteszeke" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/mateosilguero"><img src="https://avatars0.githubusercontent.com/u/25598400?v=4" width="100px;" alt=""/><br /><sub><b>Mateo Silguero</b></sub></a><br /><a href="https://github.com/mateosilguero/consistencss/commits?author=mateosilguero" title="Code">💻</a></td>
+   <td align="center"><a href="https://github.com/mateosilguero"><img src="https://avatars0.githubusercontent.com/u/25598400?v=4" width="100px;" alt=""/><br /><sub><b>Mateo Silguero</b></sub></a><br /><a href="https://github.com/mateosilguero/consistencss/commits?author=mateosilguero" title="Code">💻</a></td>
+    <td align="center"><a href="https://leites.dev"><img src="https://avatars2.githubusercontent.com/u/1316339?v=4" width="100px;" alt=""/><br /><sub><b>Ezequiel Leites</b></sub></a><br /><a href="https://github.com/mateosilguero/consistencss/commits?author=leiteszeke" title="Code">💻</a></td> 
   </tr>
 </table>
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

Troubleshooting.md

@@ -0,0 +1,37 @@
+# Troubleshooting
+
+### "Property 'Proxy' doesn't exist, js engine: hermes"
+
+> android
+
+If [Hermes](https://reactnative.dev/docs/hermes) is enabled in your project, you probably will see a red screen with the "Property 'Proxy' doesn't exist, js engine: hermes" message.
+
+> Quick fix: disable Hermes (not recommend).
+
+React Native 0.63 includes v0.5.0 of hermes, wich is not compatible with this lib yet. So you could install v0.5.2-rc1 temporarily.
+
+```sh
+npm install [email protected]
+```
+
+using yarn:
+
+```sh
+yarn add [email protected]
+```
+
+And React Native React Native <= 0.62.2 includes v0.4.0 of hermes, wich is not compatible either. So you could install v0.4.2-rc1 temporarily. (since Proxy was not inside hermes before)
+
+```sh
+npm install [email protected]
+```
+
+using yarn:
+
+```sh
+yarn add [email protected]
+```
+
+> https://twitter.com/HermesEngine/status/1245136667414913024
+
+We are actively tracking the changes to Hermes to ensure support.

docs/usage.md

@@ -95,4 +95,25 @@ const App = () => {
 };
 ```
 
+Uses the classNames API, and create your custom classes !
+
+```js
+import C, { apply, extend, classNames, View, Text } from 'consistencss';
+
+extend({
+  classes: {
+    debug: apply(C.border1, C.borderRed),
+  },
+});
+
+const App = () => {
+  return (
+    <View style={C.debug}>
+      <Text style={classNames('debug')}>
+        ...
+      </Text>
+    </View>;
+};
+```
+
 Now you can go to read the [API](background.md) specification

package.json

@@ -1,6 +1,6 @@
 {
   "name": "consistencss",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "react native css",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

website/i18n/en.json

@@ -192,6 +192,16 @@
       },
       "version-1.3.0/version-1.3.0-classNames": {
         "title": "classNames"
+      },
+      "version-1.4.0/version-1.4.0-classNames": {
+        "title": "classNames"
+      },
+      "version-1.4.0/version-1.4.0-extend": {
+        "title": "Extend"
+      },
+      "version-1.4.0/version-1.4.0-usage": {
+        "title": "Usage",
+        "sidebar_label": "Usage"
       }
     },
     "links": {

website/pages/en/index.js

@@ -52,6 +52,11 @@ class HomeSplash extends React.Component {
       </div>
     );
 
+    const codeExaple = `
+      <View style={C}>
+      </View>
+    `;
+
     return (
       <SplashContainer>
         <div className="inner">
@@ -62,6 +67,10 @@ class HomeSplash extends React.Component {
               Getting Started
             </Button>
           </PromoSection>
+          <img
+            src={`${baseUrl}img/code_home.png`}
+            style={{ width: 500, height: 500, paddingTop: 16 }}
+          />
         </div>
       </SplashContainer>
     );

website/versioned_docs/version-1.4.0/class-names.md

@@ -0,0 +1,42 @@
+---
+id: version-1.4.0-classNames
+title: classNames
+original_id: classNames
+---
+
+> API inspired by https://github.com/JedWatson/classnames
+
+class names API. insert styles using class names.
+
+```js
+import { classNames } from 'consistencss';
+
+const App = () => {
+  return <View style={classNames('shadowMd p2 radius4')}>...</View>;
+};
+```
+
+```js
+import { extend } from 'consistencss';
+
+extend({
+  classes: {
+    disabled: classNames('bgGrey'),
+  },
+});
+
+const App = ({ withBg, withMargin, index, disabled }) => {
+  return (
+    <View
+      style={classNames('shadowMd p2 radius4', {
+        bgRed: withBg,
+        disabled,
+        'mx2 my4': withMargin,
+        wHalf: index % 2 === 0,
+      })}
+    >
+      ...
+    </View>
+  );
+};
+```

website/versioned_docs/version-1.4.0/extend.md

@@ -0,0 +1,101 @@
+---
+id: version-1.4.0-extend
+title: Extend
+original_id: extend
+---
+
+`extends(config: {}) => void`
+
+The extend method, overrides the default config from `consistencss`
+
+Where:
+
+unit base is 4: (m4 = margin: 16, m2 = margin = 8)
+
+custom colors are undefined
+
+and components are styless
+
+```js
+import { Platform, Text } from 'react-native'
+import C, { apply, extend, View } from 'consistencss'
+
+...
+
+extend({
+    sizing: {
+        base: 8,
+        xs: 12
+    },
+    classes: {
+        debug: apply(C.border1, C.borderRed),
+    },
+    colors: {
+        primary: 'cornflowerblue',
+        secondary: 'green',
+        randomcolor: '#186dfe'
+    },
+    components: {
+        View: apply(C.m4, C.p2)
+    },
+    fonts: {
+        primary: Platform.select({
+            android: 'monospace',
+            ios: 'San Francisco',
+            default: 'sans-serif',
+        }),
+    },
+})
+
+return (
+    <>
+        <Text style={apply(C.textPrimary, C.font8, C.uppercase)}>
+            Hello
+        </Text>
+        <Text style={[C.fontXs, C.familyPrimary, C.debug]}>Hello</Text>
+        {/* this View have margin 8 and padding 4 */}
+        <View>
+            <Text style={subtitle}>
+                Hello
+            </Text>
+        </View>
+    </>
+)
+```
+
+Now:
+
+unit base is 2: (m4 = margin: 8, m2 = margin = 4)
+
+primary color is 'cornflowerblue'
+
+secondary color is 'green',
+
+randomcolor is '#186dfe'
+
+and View has some default styles.
+
+---
+
+## Responsive Layout
+
+extends could help you to set a dinamic unit size, based on the device resolution, like this:
+
+source: https://stackoverflow.com/questions/33628677/react-native-responsive-font-size
+
+```js
+import { Dimensions } from 'react-native';
+import { extend } from 'consistencss';
+
+const guidelineBaseWidth = 350;
+const scale = (size: number) =>
+  (Dimensions.get('window').width / guidelineBaseWidth) * size;
+
+extend({
+  sizing: {
+    base: scale(16),
+  },
+});
+```
+
+Now, your layout is resposive, the result of styles like C.m4, C.font6 or C.px2, depends on the screen resolution/size.