react-native-boxes 1.0.0

package/src/Styles.tsx

@@ -0,0 +1,117 @@
+import { StyleSheet } from "react-native";
+
+export const Dimens = {
+    space: {
+        xs: 1,
+        sm: 5,
+        md: 10,
+        lg: 20,
+        xl: 50,
+    },
+    font: {
+        sm: 12,
+        md: 14,
+        lg: 16,
+        xl: 24,
+    },
+    icon: {
+        sm: 12,
+        md: 20,
+        lg: 30,
+        xl: 50,
+        xxl: 80,
+    }
+}
+
+export const Fonts = {
+    Regular: 'Regular',
+    Bold: 'Bold',
+    Styled: 'Styled',
+}
+
+export const Colors = {
+    accent: '#1976D2',
+    accentLight: '#2196F3',
+    text: '#444444',
+    caption: '#A9A9A9',
+    heading: '#222222',
+    background: '#E6E6E6',
+    forground: '#fff',
+    transparent: 'transparent',
+    semitransparent: '#111a1a1c',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FFA726',
+    critical: '#F44336',
+    invert: {
+        text: '#fff',
+        caption: '#fff',
+        heading: '#fff',
+        background: '#1a1a1c'
+    }
+}
+
+export const LightColors = Colors
+
+export const DarkColors = {
+    accent: '#1976D2',
+    accentLight: '#2196F3',
+    text: '#f2f2f2',
+    caption: '#565656',
+    heading: '#dddddd',
+    background: '#212121',
+    forground: '#191919',
+    transparent: 'transparent',
+    semitransparent: '#111a1a1c',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FFA726',
+    critical: '#F44336',
+    invert: {
+        text: '#fff',
+        caption: '#fff',
+        heading: '#fff',
+        background: '#E6E6E6'
+    }
+}
+
+export function extendValues(
+    dimens: typeof Dimens,
+    colors: typeof Colors,
+    fonts: typeof Fonts): {
+        dimens: typeof Dimens,
+        colors: typeof Colors,
+        fonts: typeof Fonts
+    } {
+    return {
+        dimens: Object.assign(dimens || {}, Dimens),
+        colors: Object.assign(colors || {}, Colors),
+        fonts: Object.assign(fonts || {}, Fonts),
+    }
+}
+
+export function createStyle(
+    dimens: typeof Dimens,
+    colors: typeof Colors,
+    fonts: typeof Fonts) {
+
+    const Styles = StyleSheet.create({
+        container: {
+            marginTop: dimens.space.xl,
+            backgroundColor: colors.background,
+        },
+        center: {
+            alignContent: 'center',
+            justifyContent: 'center'
+        },
+        textHead: {
+            color: colors.text,
+            fontSize: dimens.font.xl,
+        },
+        text: {
+            fontFamily: fonts.Regular,
+            fontSize: dimens.font.md,
+        }
+    });
+    return Styles
+}

package/src/Text.tsx

@@ -0,0 +1,56 @@
+import { useContext } from "react";
+import { TextProps, Text } from "react-native";
+import { ThemeContext } from "./ThemeContext";
+
+export function TextView(props: TextProps) {
+    const theme = useContext(ThemeContext)
+    return (
+        <Text {...props}
+            style={[{
+                flexWrap: 'wrap',
+                color: theme.colors.text,
+                padding: theme.dimens.space.sm
+            }, theme.styles.text, props.style]} />
+    )
+}
+
+
+export function Subtitle(props: TextProps) {
+    const theme = useContext(ThemeContext)
+    return (
+        <TextView {...props} style={[
+            {
+                fontSize: theme.dimens.font.lg,
+                color: theme.colors.text
+            },
+            props.style
+        ]} />
+    )
+}
+
+
+export function Title(props: TextProps) {
+    const theme = useContext(ThemeContext)
+    return (
+        <TextView {...props} style={[
+            {
+                fontSize: theme.dimens.font.xl,
+                color: theme.colors.heading
+            },
+            props.style
+        ]} />
+    )
+}
+
+export function Caption(props: TextProps) {
+    const theme = useContext(ThemeContext)
+    return (
+        <TextView {...props} style={[
+            {
+                fontSize: theme.dimens.font.sm,
+                color: theme.colors.caption
+            },
+            props.style
+        ]} />
+    )
+}

package/src/ThemeContext.ts

@@ -0,0 +1,25 @@
+import { createContext } from "react"
+import { Colors, Dimens, createStyle, DarkColors, LightColors, Fonts } from "./Styles"
+import { randomColor } from "./utils"
+const DEFAULT_STYLE = createStyle(Dimens, Colors, Fonts)
+export class Theme {
+    appname: string = ''
+    styles: typeof DEFAULT_STYLE
+    dimens: typeof Dimens
+    colors: typeof Colors
+    fonts: typeof Fonts
+    randomColor = randomColor
+    constructor(appname = '',
+        colors = Colors,
+        dimens = Dimens,
+        fonts = Fonts,
+        styles = DEFAULT_STYLE) {
+        this.appname = appname
+        this.fonts = fonts ?? Fonts
+        this.colors = colors ?? Colors
+        this.dimens = dimens ?? Dimens
+        this.fonts = fonts ?? Fonts
+        this.styles = styles ?? createStyle(this.dimens, this.colors, this.fonts)
+    }
+}
+export const ThemeContext = createContext(new Theme())

package/src/demo.tsx

@@ -0,0 +1,383 @@
+import { useContext, useEffect, useReducer, useState } from 'react';
+import * as React from 'react'
+import { LayoutAnimation, SafeAreaView } from 'react-native';
+import { BottomNavBar, ButtonView, Caption, Center, CompositeTextInputView, Expand, HBox, LoadingButton, PressableView, RightIconButton, SimpleToolbar, Subtitle, TextInputView, TextView, Theme, ThemeContext, Title, VBox } from '.';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { AlertMessage } from './Message';
+import { BottomSheet } from './Modal';
+import { Avatar, Icon } from './Image';
+import { ReactWrapper } from './utils';
+import KeyboardAvoidingScrollView from './Box';
+import { DarkColors, LightColors } from './Styles';
+
+export interface DemoScreenProps {
+  navigation?: any
+}
+
+export function DemoScreen({ navigation }: DemoScreenProps) {
+
+  const theme: Theme = useContext(ThemeContext)
+  console.log('Rendering')
+  const btnIcon = (<FontAwesome name='google'
+    size={theme.dimens.icon.md}
+    color={theme.colors.invert.text} />)
+  const insets = useSafeAreaInsets();
+  const [loading, setLoading] = useState(false)
+  const [alert, setBs] = useState(`In this version, the icon used is always 'chevron-right' even when expanded.`)
+  const [bottomsheetVisible, setbottomsheetVisible] = useState(false)
+  function setAlert(bs: string) {
+    setBs(bs)
+    setTimeout(() => {
+      setBs(`In this version, the icon used is always 'chevron-right' even when expanded.`)
+    }, 5000)
+  }
+
+  const [selectedBottombarId, setSelectedBottomBarId] = useState('home')
+  const [mText, setMText] = useState(`@shivesh`)
+  const [bottomBarHeight, setBottombarHeight] = useState(theme.dimens.space.xl)
+  const [selectedTheme, setSelectedTheme] = useState(true)
+  useEffect(() => {
+    theme.colors = selectedTheme ? LightColors : DarkColors
+    forceUpdate()
+  }, [selectedTheme])
+  const [, forceUpdate] = useReducer(x => x + 1, 0);
+
+  return (
+    <VBox
+      style={{
+        backgroundColor: theme.colors.background,
+        padding: 0,
+        paddingBottom: bottomBarHeight,
+        margin: 0,
+        height: '100%'
+      }} >
+      <SimpleToolbar
+        title="Demo"
+        homeIcon={
+          ReactWrapper(<Icon color={theme.colors.invert.text} name="plus" />)
+        }
+        options={[
+          {
+            id: 'test',
+            icon: 'gear',
+            onClick: (id) => {
+            }
+          },
+          {
+            id: 'test2',
+            icon: ReactWrapper(<PressableView>
+              <Avatar
+                style={{
+                  margin: 0,
+                  height: theme.dimens?.icon?.md * 1.25,
+                  width: theme.dimens?.icon?.md * 1.25,
+                }}
+                iconUrl="https://avatars.githubusercontent.com/u/16799797?v=4" />
+            </PressableView>),
+            onClick: (id) => {
+            }
+          }
+        ]} />
+      <KeyboardAvoidingScrollView
+        automaticallyAdjustKeyboardInsets={true}
+        keyboardShouldPersistTaps={'handled'}
+        style={{
+          flexGrow: 1,
+        }}
+        nestedScrollEnabled={true}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+      >
+
+        <Center style={{
+          flexDirection: 'row',
+          padding: 20
+        }}>
+
+          <Avatar
+            onPress={() => {
+              setbottomsheetVisible(true)
+            }}
+            style={{
+              borderColor: theme.colors.success,
+            }}
+            iconNameProps={{
+              name: 'user',
+              color: theme.colors.success,
+              size: theme.dimens.icon.lg
+            }}
+          />
+          <Center>
+            <Avatar
+              style={{
+                borderWidth: theme.dimens.space.sm,
+                width: 100,
+                height: 100,
+                borderColor: theme.colors.success
+              }}
+              iconText='SN'
+              onPress={() => {
+                setbottomsheetVisible(true)
+              }}
+              iconNameProps={{
+                name: 'user',
+                color: theme.colors.success,
+                size: theme.dimens.icon.lg
+              }}
+              iconUrl='https://cdn.truelancer.com/user-picture/307510-5c1f11bad82e9.jpg' />
+            <Subtitle>{mText}</Subtitle>
+          </Center>
+
+          <Avatar
+            style={{
+              borderColor: theme.colors.success,
+              color: theme.colors.success
+            }}
+            onPress={() => {
+              setbottomsheetVisible(true)
+            }}
+            iconText='SN' />
+        </Center>
+        <Expand title='Message Alert' initialExpand={false}
+          style={{
+            backgroundColor: theme.colors.forground
+          }}
+          titleBackgroundColor={theme.colors.forground}
+        >
+          <VBox>
+            <AlertMessage text={alert} onDismiss={() => {
+              LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+              setAlert('')
+            }} />
+            <AlertMessage text='Critial Message' type='critical' />
+            <AlertMessage text='Success' type='success' />
+            <AlertMessage text='Warning Message' type='warning' />
+          </VBox>
+
+        </Expand>
+        <Expand
+          style={{
+            padding: 0,
+            borderWidth: 0.1,
+            borderColor: '#DCDCDC'
+          }}
+          duration={200}
+          title='In this version, the icon used is always chevron-right even when expanded. In this version, the icon used is always chevron-right even when expanded.'
+          initialExpand={false} iconPosition='right'>
+          <VBox>
+            <Title>Text A</Title>
+            <Subtitle>Text A Text A Text AText A Text AText A</Subtitle>
+            <TextView>Text A</TextView>
+            <Caption>Text Caption</Caption>
+          </VBox>
+        </Expand>
+        <Expand title='Inputs'>
+
+          <VBox>
+            <TextInputView
+              style={{
+                fontFamily: theme.fonts.Bold
+              }}
+              initialText={mText}
+              value={mText}
+              onChangeText={t => setMText(t)} />
+            <CompositeTextInputView
+              onChangeText={t => setMText(t)}
+              placeholder='A test'
+              initialText='Test' />
+            <CompositeTextInputView
+              inputMode='decimal'
+              icon={"close"}
+              style={{
+              }}
+              alertTextColor={theme.colors.warning}
+              placeholder='Enter your name'
+              initialText='Test'
+              value={mText}
+              onChangeText={t => setMText(t)} />
+            <CompositeTextInputView
+              style={{
+              }}
+              placeholder='Enter number'
+              alertText={mText?.indexOf("@") > -1 ? '' : 'Please enter @ or else I am gonna come down at your place and mess you up buddy !'}
+              initialText='Test'
+              value={mText}
+              onChangeText={t => setMText(t)} />
+          </VBox>
+        </Expand>
+
+        <Expand
+          iconStyle={{
+            name: 'chevron-right',
+            color: 'red'
+          }}
+          title='Buttons'
+          initialExpand={false}>
+          <VBox style={{
+          }}>
+            <VBox >
+              <ButtonView
+                icon={btnIcon}
+                style={{
+                }}>Button Icon</ButtonView>
+
+              <ButtonView style={{
+              }}>Button Text</ButtonView>
+            </VBox>
+            <RightIconButton
+              text='Click Me Icon'
+              icon={btnIcon}>
+            </RightIconButton>
+
+            <Center>
+              <LoadingButton
+
+                onPress={(e) => {
+                  setLoading(!loading)
+                }}
+                loading={loading}
+                text='Click Me' />
+
+              <ButtonView
+                underlayColor={theme.colors.transparent}
+                style={{
+                  color: theme.colors.accent,
+                  backgroundColor: theme.colors.transparent,
+                }}>Tertiary button</ButtonView>
+
+            </Center>
+
+            <Expand title='Nested expand'>
+              <HBox style={{
+                justifyContent: 'center',
+              }}>
+                <LoadingButton
+                  style={{
+                    width: 'auto'
+                  }}
+                  onPress={(e) => {
+                    setLoading(!loading)
+                  }}
+                  loading={loading}
+                  text='Click Me left' />
+                <LoadingButton
+                  loaderStyle='transparent'
+                  style={{
+                    width: 'auto'
+                  }}
+                  onPress={(e) => {
+                    setLoading(!loading)
+                  }}
+                  loading={loading}
+                  text='Click Me right' />
+              </HBox>
+            </Expand>
+
+          </VBox>
+        </Expand>
+
+
+
+        <ButtonView
+          underlayColor={theme.colors.transparent}
+          style={{
+            color: theme.colors.accent,
+            backgroundColor: theme.colors.transparent,
+          }}
+          onPress={() => {
+            setSelectedTheme(!selectedTheme)
+          }}>{selectedTheme ? 'Light' : 'Dark'}</ButtonView>
+
+
+        <ButtonView
+          underlayColor={theme.colors.transparent}
+          style={{
+            color: theme.colors.accent,
+            backgroundColor: theme.colors.transparent,
+          }}
+          onPress={() => {
+            setbottomsheetVisible(true)
+          }}>Show Sheet</ButtonView>
+
+
+      </KeyboardAvoidingScrollView>
+      <BottomNavBar
+        style={{
+          borderTopLeftRadius: theme.dimens.space.md,
+          borderTopRightRadius: theme.dimens.space.md,
+        }}
+        onSelect={setSelectedBottomBarId}
+        selectedId={selectedBottombarId}
+        options={[
+          {
+            id: 'home',
+            title: 'Home',
+            icon: 'home'
+          },
+          {
+            id: 'create',
+            title: 'Create',
+            icon: 'plus'
+          },
+          {
+            id: 'search',
+            title: 'Search',
+            icon: 'search'
+          },
+          {
+            id: 'profile',
+            title: 'Profile',
+            icon: ReactWrapper(<PressableView>
+              <Avatar
+                onPress={() => {
+                  setSelectedBottomBarId('profile')
+                }}
+                style={{
+                  borderColor: selectedBottombarId == 'profile' ?
+                    theme.colors.accent : theme.colors.caption,
+                  margin: 0,
+                  height: theme.dimens?.icon?.md,
+                  width: theme.dimens?.icon?.md,
+                }}
+                // iconName='user'
+                iconUrl="https://avatars.githubusercontent.com/u/16799797?v=4"
+              />
+            </PressableView>)
+          }
+        ]}
+        onDimens={(w, h) => {
+          setBottombarHeight(h)
+          console.log("bottomBarHeight", h)
+        }} />
+
+      <BottomSheet
+        title="About"
+        visible={bottomsheetVisible} onDismiss={() => {
+          setbottomsheetVisible(false)
+        }} >
+        <TextView>Dinosaurs are a diverse group of reptiles of the clade Dinosauria. They first appeared during the Triassic period, between 243 and 233.23 million years ago, although the exact origin and timing of the evolution of dinosaurs is a subject of active research.</TextView>
+
+        <TextView>Dinosaurs are a diverse group of reptiles of the clade Dinosauria. They first appeared during the Triassic period, between 243 and 233.23 million years ago, although the exact origin and timing of the evolution of dinosaurs is a subject of active research.</TextView>
+        <Expand title='Types' initialExpand={false}
+          style={{
+            padding: 0,
+            backgroundColor: theme.colors.forground
+          }}
+          titleBackgroundColor={theme.colors.forground}
+        >
+          <VBox>
+            <AlertMessage text={alert} onDismiss={() => {
+              LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+              setAlert('')
+            }} />
+            <AlertMessage text='Tyrannosaurus rex' type='critical' />
+            <AlertMessage text='Spinosaurus' type='success' />
+            <AlertMessage text='Ankylosaurs' type='warning' />
+          </VBox>
+
+        </Expand>
+      </BottomSheet>
+    </VBox>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,8 @@
+export * from './Text';
+export * from './Box';
+export * from './Button';
+export * from './Modal';
+export * from './Image';
+export * from './Input';
+export * from './Bar';
+export * from './ThemeContext';

package/src/utils.ts

@@ -0,0 +1,49 @@
+import { Platform } from "react-native";
+import { Dimensions } from 'react-native';
+
+
+export function ReactWrapper(component: any) {
+    return (props: any) => {
+        return component
+    }
+}
+
+export function randomColor() {
+    const letters = '0123456789ABCDEF';
+    let color = '#';
+
+    for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+
+    // return color;
+    return undefined;
+}
+
+export function isWeb() {
+    return Platform.OS == 'web'
+}
+
+
+export function isDesktop() {
+    const windowWidth = Dimensions.get('window').width;
+    const windowHeight = Dimensions.get('window').height;
+    return windowWidth > windowHeight
+}
+
+export function assignFields(
+    target: any,
+    source: any,
+    fields: string[],
+    skipUndefined: boolean = true) {
+    if (!target)
+        target = {}
+    Object.keys(source || {}).forEach(k => {
+        if (fields?.indexOf(k) > -1) {
+            if (!skipUndefined && !source[k])
+                return
+            target[k] = source[k]
+        }
+    })
+    return target
+}

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "extends": "@tsconfig/react-native/tsconfig.json",
+    "compilerOptions": {
+        "noEmit": false,
+        "declaration": true,
+        "resolveJsonModule": true,
+        "sourceMap": true,
+        "outDir": "./dist",
+        "baseUrl": "./",
+        "paths": {
+            "@/*": [
+                "src/*"
+            ]
+        }
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.js",
+        "src/**/*.tsx",
+        "src/**/*.jsx"
+    ],
+    "exclude": [
+        "node_modules"
+    ]
+}