be-components 0.1.1

package/src/Components/Spring.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useSpring, animated } from '@react-spring/web';
+
+type SpringViewProps = {
+    style?: any,
+    slide: 'vertical'|'horizontal'
+    from: number,
+    to:number,
+    children: any
+}
+const SpringView = ({ style, children, from, to, slide }:SpringViewProps) => {
+    let config:any = {
+        from: { x: from},
+        to: { x: to }
+    }
+    if(slide == 'vertical'){
+        config = {
+            from: { y: from},
+            to: { y: to }
+        }
+    }
+
+    const springs = useSpring(config)
+
+
+    return (
+        <animated.div
+        style={{
+            ...springs,
+            ...style
+        }}
+    >
+        {children}
+        </animated.div>
+    )
+}
+
+export default SpringView

package/src/Components/Text.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Text as RNText } from 'react-native';
+import '../font.css';
+import Colors from '../constants/colors';
+
+
+export interface TextProps { 
+    weight?:'bold'|'semibold'|'regular'|'light', 
+    color?:string, 
+    size?: number, 
+    children:any, 
+    textAlign?:'left'|'center'|'right', 
+    style?:any 
+}
+
+const Text = ({ weight, color, size, children, textAlign, style }: TextProps) => {
+
+    const getFontFamily = (weight:string) => {
+        switch(weight){
+            case 'bold': return 'barlow-bold'
+            case 'semibold': return 'barlow-semibold'
+            case 'regular': return 'barlow-regular'
+            case 'light': return 'barlow-light'
+            default: return 'barlow-regular'
+        }
+    }
+
+    return (
+        <RNText style={[{ color:color??Colors.shades.black, fontSize: size??14, fontFamily: weight?getFontFamily(weight):'barlow-regular', textAlign:textAlign??'left' }, style]}>
+            {children}
+        </RNText>
+    )
+}
+
+export default Text

package/src/Components/TextInput.tsx

@@ -0,0 +1,45 @@
+
+import React from 'react';
+import { TextInput as RNTextInput } from 'react-native';
+import Colors from '../constants/colors';
+
+type TextInputProps = {
+    value?:string,
+    placeholder?:string,
+    autoFocus?:boolean,
+    keyboardType?:string,
+    textContentType?:string,
+    secureTextEntry?:boolean,
+    placeholderTextColor?:string,
+    onChangeText:(text:string) => void,
+    style?:any
+}
+
+const TextInput = ({ onChangeText, placeholderTextColor, value, placeholder, style, autoFocus, keyboardType, textContentType, secureTextEntry } : TextInputProps) => {
+
+    return (
+        <RNTextInput
+            style={{ 
+                padding:15, 
+                borderRadius:22, 
+                borderWidth:1,
+                textAlign:'center', 
+                fontFamily:'barlow-bold', 
+                fontSize:16,
+                borderColor:Colors.shades.shade600,
+                backgroundColor:Colors.shades.white,
+                ...style 
+            }}
+            placeholder={placeholder}
+            value={value}
+            secureTextEntry={secureTextEntry}
+            placeholderTextColor={placeholderTextColor}
+            autoFocus={autoFocus}
+            textContentType={textContentType as any}
+            keyboardType={keyboardType as any}
+            onChangeText={(text) => onChangeText(text)}
+        />
+    )
+}
+
+export default TextInput

package/src/Components/index.tsx

@@ -0,0 +1,15 @@
+import Button from './Button';
+import Text from './Text';
+import Spring from './Spring';
+import TextInput from './TextInput';
+import Icons from './Icons';
+import Checkbox from './Checkbox';
+
+export {
+    Button,
+    Text,
+    Spring,
+    TextInput,
+    Checkbox,
+    Icons
+}

package/src/Font.css

@@ -0,0 +1,23 @@
+@font-face {
+    font-family: 'barlow-bold';
+    src: local('Barlow-Bold'),
+    url('./fonts/Barlow-Bold.ttf')
+}
+
+@font-face {
+    font-family: 'barlow-semibold';
+    src: local('Barlow-SemiBold'),
+    url('./fonts/Barlow-SemiBold.ttf')
+}
+
+@font-face {
+    font-family: 'barlow-regular';
+    src: local('Barlow-Regular'),
+    url('./fonts/Barlow-Regular.ttf')
+}
+
+@font-face {
+    font-family: 'barlow-light';
+    src: local('Barlow-Light'),
+    url('./fonts/Barlow-Light.ttf')
+}

package/src/constants/colors.ts

@@ -0,0 +1,61 @@
+
+const Colors = {
+    brand: {
+      cobalt: '#003566',
+      midnight: '#002A51',
+      midnightTopGradient: '#003a85',
+      electric: '#005FB7',
+      cyan: '#08A4BD',
+      slate: '#6E8894',
+      mint: '#B2F2D6',
+      yellow: '#FFD60A',
+      facebook: '#1877F2',
+      new:'#264A6B'
+    },
+    chart:{
+      cyan: '#52BCD1',
+      electric:'#4D8FCD'
+    },
+    shades: {
+      white: '#FFFFFF',
+      shade100: '#F2F5F7',
+      shade200: '#F8F8F8',
+      shade300: '#EEEEEE',
+      shade400: '#DAE1E4',
+      shade500: '#4A4A4A',
+      shade600: '#DBE9F5',
+      black: '#111111',
+      black_faded: 'rgba(0,0,0,0.25)',
+      black_faded_heavy: 'rgba(0,0,0,0.5)',
+      black_faded_super_heavy: 'rgba(0,0,0,0.9)',
+
+    },
+    accents: {
+      accent100: '#ADD7FF',
+      accent200: '#7F9AB2'
+    },
+    highlights: {
+      highlight100: '#620AFF',
+      highlight100Faded: `rgba(98,10,255,0.4)`,
+      highlight200: '#FCA311',
+      highlight200Faded: 'rgba(252,163,17,0.4)',
+      highlight300: '#FF4747',
+      highlight300Faded: 'rgba(255,71,71,0.4)',
+      highlight400: '#4DBA58',
+      highlight400Faded: 'rgba(125,205,133,0.4)',
+      highlight500: '#05A4BD',
+      highlight500Faded: 'rgba(5,164,189,0.25)'
+    },
+    utility: {
+      success: '#7DCD85',
+      error: '#D5573B',
+      warning: '#FCA311'
+    },
+    incentive: {
+      gold: '#AB9F5E',
+      gold_faded: 'rgba(171,159,94, 0.1)',
+      silver: '#C0C0C0',
+      bronze: '#997840'
+    }
+  }
+  export default Colors

package/src/constants/styles.ts

@@ -0,0 +1,40 @@
+
+import { StyleSheet } from 'react-native';
+import Colors from './colors';
+
+
+export const view_styles = StyleSheet.create({
+    container: {
+        backgroundColor:Colors.shades.white,
+        borderTopRightRadius:22,
+        borderTopLeftRadius:22
+    }
+})
+
+
+export const text_styles = StyleSheet.create({
+    dark_heading_1: {
+        fontSize: 16,
+        color:Colors.brand.midnight
+    },
+    dark_heading_2: {
+        fontSize: 14,
+        color:Colors.brand.midnight
+    },
+    dark_heading_3: {
+        fontSize: 12,
+        color:Colors.brand.midnight
+    },
+    light_heading_1: {
+        fontSize: 16,
+        color:Colors.shades.white
+    },
+    light_heading_2: {
+        fontSize: 14,
+        color:Colors.shades.white
+    },
+    light_heading_3: {
+        fontSize: 12,
+        color:Colors.shades.white
+    }
+})

package/src/index.tsx

@@ -0,0 +1,9 @@
+import AuthenticateWizard from "./AuthenticateWizard";
+import { Text, Button, Spring } from './Components';
+
+export {
+  AuthenticateWizard,
+  Text,
+  Button,
+  Spring
+}