v0.3.0

New classes: overflox, flex, textAlignVertical
added missing documentation to border radius

docs/borders.md

@@ -35,6 +35,28 @@ border[side: string][color: string]
 
 `border[top | bottom | left | right | start | end]`
 
+## radius
+
+set the border radius of an element, use `radius` property:
+
+```js
+import { View } from 'react-native'
+import C from 'consistencss'
+
+...
+return (
+    <View style={C.radius4} />
+    <View style={C.radiusTop4} />
+    <View style={C.radiusLeft2} />
+)
+```
+
+especify side:
+
+radius[side: string][size: number]
+
+`border[top | bottom | left | right | start | end]`
+
 ## Examples:
 
 `bordertopYellow` returns `{ borderTopColor: 'yellow' }`

docs/flex.md

@@ -14,6 +14,16 @@ return (
 )
 ```
 
+## flex
+
+set flex:
+
+flex[flex: number]
+
+`flex` -> { flex: 1 }
+
+`flex2` -> { flex: 2 }
+
 ## row
 
 set the flex direction to `row`

docs/layout.md

@@ -19,10 +19,44 @@ return (
 
 `absolute` -> { position: 'absolute' }
 
+## top
+
+`top4` -> { top: 16 }
+
+## bottom
+
+`bottom4` -> { bottom: 16 }
+
+## left
+
+`left4` -> { left: 16 }
+
+## right
+
+`right4` -> { right: 16 }
+
+## start
+
+`start6` -> { start: 24 }
+
+## end
+
+`end2` -> { end: 8 }
+
 ## ltr
 
 `ltr` -> { direction: 'ltr' }
 
 ## rtl
 
 `rtl` -> { direction: 'ltrtlr' }
+
+## overflow
+
+set overflow behavior
+
+overflow[behavior: string]
+
+`overflowScroll` -> { overflow: 'scroll' }
+
+`overflowHidden` -> { overflow: 'hidden' }

docs/typography.md

@@ -40,6 +40,14 @@ set the alignment of text
 
 `alignCenter` -> { textAlign: 'center' }
 
+## alignvertical
+
+alignvertical[alignment: string]
+
+set the vertical alignment of text
+
+`alignverticalCenter` -> { textAlignVertical: 'center' }
+
 ## line
 
 line[height: number]

example/src/views/Another.tsx

@@ -20,7 +20,7 @@ const Another: FC<{ navigation: NavigationStack }> = ({ navigation }) => {
         <Text style={apply(C.textSecondary, C.weightBold)}>right</Text>
       </View>
       <TouchableOpacity
-        style={apply(C.m4, C.bgPrimary, C.radius4)}
+        style={apply(C.flex, C.m4, C.bgPrimary, C.radius4)}
         onPress={() => navigation.goBack()}
       >
         <Text style={apply(C.textWhite)}>Go back</Text>

package.json

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

src/__tests__/dictionary.test.tsx

@@ -30,4 +30,13 @@ test('atomGenerator should return a new atom', () => {
   expect(dictionary['h']('full')).toEqual({
     height: '100%',
   });
+  expect(dictionary['flex']('')).toEqual({
+    flex: 1,
+  });
+  expect(dictionary['flex']('2')).toEqual({
+    flex: 2,
+  });
+  expect(dictionary['overflow']('scroll')).toEqual({
+    overflow: 'scroll',
+  });
 });

src/__tests__/index.test.tsx

@@ -54,6 +54,12 @@ test('C proxy get', () => {
   expect(C.elevation1).toEqual({
     elevation: 1,
   });
+  expect(C.flex).toEqual({
+    flex: 1,
+  });
+  expect(C.overflowHidden).toEqual({
+    overflow: 'hidden',
+  });
   C['a'] = { backgroundColor: 'red' };
   expect(C.a).toEqual({});
   expect(C).toEqual({});

src/dictionary.ts

@@ -9,10 +9,10 @@ import { atomGenerator, capitalize } from './utils';
 import constants from './constants';
 import { Dimensions } from 'react-native';
 
-const compose = (transformer: Function) => (property: string) => (
-  value: string,
-  key?: string
-) => atomGenerator(property, transformer(value, key));
+const compose = (transformer: Function = (v: string) => v) => (
+  property: string
+) => (value: string, key?: string) =>
+  atomGenerator(property, transformer(value, key));
 
 const useColor = compose(getColorForKey);
 const useSize = compose(getSizeForKey);
@@ -43,6 +43,7 @@ const dictionary: AnyObject = {
   text: useColor('color'),
   font: useSize('fontSize'),
   align: useAlignment('textAlign'),
+  alignvertical: useAlignment('textAlignVertical'),
   line: useSize('lineHeight'),
   italic: useKey('fontStyle'),
   uppercase: useKey('textTransform'),
@@ -77,7 +78,9 @@ const dictionary: AnyObject = {
   rtl: useKey('direction'),
   /* layout: top, bottom, left, right, start, end */
   ...getSidesFor('', position => useSize(position.toLowerCase())),
+  overflow: compose()('overflow'),
   // flexbox
+  flex: compose((value: string) => Number(value || 1))('flex'),
   row: useKey('flexDirection'),
   wrap: useKey('flexWrap'),
   justify: useAlignment('justifyContent'),

website/i18n/en.json

@@ -85,6 +85,12 @@
       "version-0.1.1/version-0.1.1-typography": {
         "title": "Typography"
       },
+      "version-0.2.0/version-0.2.0-borders": {
+        "title": "Borders"
+      },
+      "version-0.2.0/version-0.2.0-layout": {
+        "title": "Layout"
+      },
       "version-0.2.0/version-0.2.0-sizing": {
         "title": "Sizing"
       },
@@ -93,6 +99,15 @@
       },
       "version-0.2.0/version-0.2.0-typography": {
         "title": "Typography"
+      },
+      "version-0.3.0/version-0.3.0-flex": {
+        "title": "Flex"
+      },
+      "version-0.3.0/version-0.3.0-layout": {
+        "title": "Layout"
+      },
+      "version-0.3.0/version-0.3.0-typography": {
+        "title": "Typography"
       }
     },
     "links": {

website/siteConfig.js

@@ -20,6 +20,14 @@ const users = [
       'https://play.google.com/store/apps/details?id=com.bitrise&hl=es_AR',
     pinned: true,
   },
+  {
+    caption: 'JSand',
+    image:
+      'https://lh3.googleusercontent.com/JOloldr8-Uf4enRFzcvnZeKzeZR4TN3jquhNezvRS2dRvzRhOCOBTm6m3d8m_WNVLdU=s360-rw',
+    infoLink:
+      'https://play.google.com/store/apps/details?id=com.JSand&hl=en_US',
+    pinned: true,
+  },
 ];
 
 const siteConfig = {

website/versioned_docs/version-0.2.0/borders.md

@@ -0,0 +1,69 @@
+---
+id: version-0.2.0-borders
+title: Borders
+original_id: borders
+---
+
+## border
+
+set the border style of an element, use `border` property:
+
+```js
+import { View } from 'react-native'
+import C from 'consistencss'
+
+...
+return (
+    <View style={C.borderYellow} />
+)
+```
+
+---
+
+border has many variants:
+
+- border[color: string]
+
+`borderBlue` returns { borderColor: 'blue' }
+
+- border[width: number]
+
+`border4` returns { borderWidth: 16 }
+
+especify side:
+
+border[side: string][color: string]
+
+`border[top | bottom | left | right | start | end]`
+
+## radius
+
+set the border radius of an element, use `radius` property:
+
+```js
+import { View } from 'react-native'
+import C from 'consistencss'
+
+...
+return (
+    <View style={C.radius4} />
+    <View style={C.radiusTop4} />
+    <View style={C.radiusLeft2} />
+)
+```
+
+especify side:
+
+radius[side: string][size: number]
+
+`border[top | bottom | left | right | start | end]`
+
+## Examples:
+
+`bordertopYellow` returns `{ borderTopColor: 'yellow' }`
+
+`borderleft8` returns `{ borderLeftWidth: 32 }`
+
+`borderbottomHairline` returns `{ borderBottomWidth: 0.38095238095238093 }`
+
+> see more colors at https://reactnative.dev/docs/colors

website/versioned_docs/version-0.2.0/layout.md

@@ -0,0 +1,53 @@
+---
+id: version-0.2.0-layout
+original_id: layout
+title: Layout
+---
+
+```js
+import { View } from 'react-native'
+import C, { apply } from 'consistencss'
+
+...
+return (
+    <View style={C.absolute} />
+    <View style={C.ltr} />
+    <View style={C.rtl} />
+)
+```
+
+## absolute
+
+`absolute` -> { position: 'absolute' }
+
+## top
+
+`top4` -> { top: 16 }
+
+## bottom
+
+`bottom4` -> { bottom: 16 }
+
+## left
+
+`left4` -> { left: 16 }
+
+## right
+
+`right4` -> { right: 16 }
+
+## start
+
+`start6` -> { start: 24 }
+
+## end
+
+`end2` -> { end: 8 }
+
+## ltr
+
+`ltr` -> { direction: 'ltr' }
+
+## rtl
+
+`rtl` -> { direction: 'ltrtlr' }