v0.4.0

TextInput component

docs/components.md

@@ -9,10 +9,11 @@ Components:
 
 - View
 - Text
+- TextInput
 - TouchableOpacity
 
 ```js
-import C, { apply, extend, View, Text } from 'consistencss';
+import C, { apply, extend, View, Text, TextInput } from 'consistencss';
 
 extend({
   colors: {
@@ -22,6 +23,7 @@ extend({
   components: {
     View: C.p4,
     Text: apply(C.textPrimary),
+    TextInput: apply(C.borderRed, C.borderHairline),
     TouchableOpacity: apply(C.p2, C.bgSecondary),
   },
 });
@@ -35,6 +37,7 @@ const App = () => {
       >
         <Text>primary text</Text>
       </TouchableOpacity>
+      <TextInput placeholder="search..." />
     </View>
   );
 };

example/src/App.tsx

@@ -12,6 +12,7 @@ extend({
   },
   components: {
     Text: apply(C.textBlue, C.m8, C.uppercase, { fontSize: 24 }),
+    TextInput: apply(C.borderRed, C.borderHairline, C.font4, C.px3),
   },
   sizing: {},
 });

example/src/views/Another.tsx

@@ -7,7 +7,13 @@
  */
 
 import React, { FC } from 'react';
-import C, { apply, Text, TouchableOpacity, View } from 'consistencss';
+import C, {
+  apply,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'consistencss';
 import { NavigationStack } from '../types';
 
 const row = apply(C.itemsCenter, C.justifyBetween, C.row);
@@ -19,6 +25,7 @@ const Another: FC<{ navigation: NavigationStack }> = ({ navigation }) => {
         <Text style={apply(C.textBlue, C.font4)}>left</Text>
         <Text style={apply(C.textSecondary, C.weightBold)}>right</Text>
       </View>
+      <TextInput placeholder="search..." />
       <TouchableOpacity
         style={apply(C.flex, C.m4, C.bgPrimary, C.radius4)}
         onPress={() => navigation.goBack()}

package.json

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

src/__tests__/index.test.tsx

@@ -3,6 +3,7 @@ import C, {
   exists,
   extend,
   Text,
+  TextInput,
   TouchableOpacity,
   View,
 } from '../index';
@@ -128,11 +129,13 @@ test('extend should change the default style from components', () => {
   expect(View({}).props.style).toEqual([{}, {}]);
   expect(Text({}).props.style).toEqual([{}, {}]);
   expect(TouchableOpacity({}).props.style).toEqual([{}, {}]);
+  expect(TextInput({}).props.style).toEqual([{}, {}]);
   extend({
     components: {
       View: apply(C.m4),
       Text: apply(C.textRed),
       TouchableOpacity: apply(C.p4),
+      TextInput: apply(C.px2),
     },
   });
   expect(View({}).props.style).toEqual([{ margin: 8 }, {}]);
@@ -147,4 +150,5 @@ test('extend should change the default style from components', () => {
   ]);
   expect(Text({}).props.style).toEqual([{ color: 'red' }, {}]);
   expect(TouchableOpacity({}).props.style).toEqual([{ padding: 8 }, {}]);
+  expect(TextInput({}).props.style).toEqual([{ paddingHorizontal: 4 }, {}]);
 });

src/__tests__/performance.test.tsx

@@ -16,15 +16,10 @@ test("perfomance matters, consistencss's apply should be similar than StyleSheet
           color: 'skyblue',
           paddingVertical: 16,
         },
-        test2: {
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-        },
       });
     })
     .add('apply', function() {
       apply(C.bgRed, C.m4, C.alignCenter, C.textSkyblue, C.py);
-      apply(C.row, C.justifyBetween);
     })
     // add listeners
     .on('cycle', function(event: any) {

src/components.tsx

@@ -2,6 +2,8 @@ import React, { ReactNode } from 'react';
 import {
   Text as RNText,
   TextProps,
+  TextInput as RNTextInput,
+  TextInputProps,
   TouchableOpacity as RNTouchableOpacity,
   TouchableOpacityProps,
   View as RNView,
@@ -20,6 +22,10 @@ export const Text = ({ children, style = {}, ...rest }: Props & TextProps) => (
   </RNText>
 );
 
+export const TextInput = ({ style = {}, ...rest }: TextInputProps) => (
+  <RNTextInput style={apply(components.TextInput, style)} {...rest} />
+);
+
 export const TouchableOpacity = ({
   children,
   style = {},

src/constants.tsx

@@ -11,6 +11,7 @@ const sizing: AnyObject = {
 
 export const components: DynamicObject<StylesObject> = {
   Text: {},
+  TextInput: {},
   TouchableOpacity: {},
   View: {},
 };

src/index.tsx

@@ -1,6 +1,6 @@
 import { StyleSheet, StyleProp } from 'react-native';
 import constants from './constants';
-import { Text, TouchableOpacity, View } from './components';
+import { Text, TextInput, TouchableOpacity, View } from './components';
 import dictionary from './dictionary';
 import { DynamicObject, Styles, StylesObject } from './types';
 import { camelCaseSplit, isEmpty, warnOnInvalidKey } from './utils';
@@ -56,7 +56,7 @@ const handler = {
   },
 };
 
-export { apply, exists, extend, Text, TouchableOpacity, View };
+export { apply, exists, extend, Text, TextInput, TouchableOpacity, View };
 
 const C: StylesObject = StyleSheet.create(new Proxy({}, handler));
 

website/i18n/en.json

@@ -108,6 +108,9 @@
       },
       "version-0.3.0/version-0.3.0-typography": {
         "title": "Typography"
+      },
+      "version-0.4.0/version-0.4.0-components": {
+        "title": "Components"
       }
     },
     "links": {

website/versioned_docs/version-0.4.0/components.md

@@ -0,0 +1,45 @@
+---
+id: version-0.4.0-components
+title: Components
+original_id: components
+---
+
+Consistencss gives an implementation of RN components, with default styles
+
+Components:
+
+- View
+- Text
+- TextInput
+- TouchableOpacity
+
+```js
+import C, { apply, extend, View, Text, TextInput } from 'consistencss';
+
+extend({
+  colors: {
+    primary: 'red',
+    secondary: 'blue',
+  },
+  components: {
+    View: C.p4,
+    Text: apply(C.textPrimary),
+    TextInput: apply(C.borderRed, C.borderHairline),
+    TouchableOpacity: apply(C.p2, C.bgSecondary),
+  },
+});
+
+const App = () => {
+  return (
+    <View>
+      <Text>primary text</Text>
+      <TouchableOpacity
+        onPress={() => console.log('button with background secondary')}
+      >
+        <Text>primary text</Text>
+      </TouchableOpacity>
+      <TextInput placeholder="search..." />
+    </View>
+  );
+};
+```

website/versions.json

@@ -1,4 +1,5 @@
 [
+  "0.4.0",
   "0.3.0",
   "0.2.0",
   "0.1.1"