Demo calculator

demo/calculator/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

demo/calculator/.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

demo/calculator/App.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useComponents, useComponentStyles } from '@webbee/bamboo-atoms';
+import { calcWrapper } from './src/components/Theme';
+import Views from './src/views';
+
+const App = () => {
+    const { View } = useComponents();
+    const mainContainer = useComponentStyles('MainContainer');
+
+    return (
+        <View style={mainContainer}>
+            <Views />
+        </View>
+    );
+};
+
+export default calcWrapper(App);

demo/calculator/app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "calc-example",
+    "slug": "calc-example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

demo/calculator/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

demo/calculator/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "calculator",
+    "version": "1.0.0",
+    "main": "node_modules/expo/AppEntry.js",
+    "scripts": {
+        "start": "expo start",
+        "android": "expo start --android",
+        "ios": "expo start --ios",
+        "web": "expo start --web"
+    },
+    "dependencies": {
+        "@expo/webpack-config": "^0.17.2",
+        "@webbee/bamboo-atoms": "^0.0.12",
+        "expo": "~46.0.16",
+        "expo-status-bar": "~1.4.0",
+        "react": "18.0.0",
+        "react-dom": "18.0.0",
+        "react-native": "0.69.6",
+        "react-native-web": "~0.18.7"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.12.9",
+        "@types/react": "~18.0.14",
+        "@types/react-native": "~0.69.1",
+        "typescript": "~4.3.5"
+    },
+    "private": true
+}

demo/calculator/src/components/Button/AccentButton.tsx

@@ -0,0 +1,17 @@
+import { useComponents, useComponentStyles } from '@webbee/bamboo-atoms';
+import { CustomButtonProps } from '.';
+import { InjectedComponentTypes } from '../Theme';
+
+const AccentButton = ({ children, style, ...props }: CustomButtonProps) => {
+    const accentButton = useComponentStyles('AccentButton', style);
+    const { RoundButton, Text } = useComponents<InjectedComponentTypes>();
+
+    // custom logic
+    return (
+        <RoundButton {...props} style={accentButton}>
+            <Text>{children as any}</Text>
+        </RoundButton>
+    );
+};
+
+export default AccentButton;

demo/calculator/src/components/Button/DoubleButton.tsx

@@ -0,0 +1,17 @@
+import { useComponents, useComponentStyles } from '@webbee/bamboo-atoms';
+import { CustomButtonProps } from '.';
+import { InjectedComponentTypes } from '../Theme';
+
+const DoubleButton = ({ children, ...props }: CustomButtonProps) => {
+    const doubleButton = useComponentStyles('DoubleButton');
+    const { Text, RoundButton } = useComponents<InjectedComponentTypes>();
+
+    // custom logic
+    return (
+        <RoundButton {...props} style={doubleButton}>
+            <Text>{children as any}</Text>
+        </RoundButton>
+    );
+};
+
+export default DoubleButton;

demo/calculator/src/components/Button/RoundButton.tsx

@@ -0,0 +1,26 @@
+import React, { useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { useComponents, useComponentStyles } from '@webbee/bamboo-atoms';
+import { CustomButtonProps } from '.';
+
+export const RoundButton = ({ style, children, ...props }: CustomButtonProps) => {
+    // set dimmenstion
+    const screen = useWindowDimensions();
+    const buttonWidth = screen.width / 6;
+    const { Button, Text } = useComponents();
+    const roundButton = useComponentStyles('RoundButton', style);
+
+    const screenSize = useMemo(
+        () => ({ height: Math.floor(buttonWidth - 10), borderRadius: Math.floor(buttonWidth) }),
+        [buttonWidth],
+    );
+
+    // custom logic
+    return (
+        <Button {...props} style={[screenSize, roundButton, style]}>
+            <Text>{children as any}</Text>
+        </Button>
+    );
+};
+
+export default RoundButton;

demo/calculator/src/components/Button/SymbolButton.tsx

@@ -0,0 +1,17 @@
+import { useComponents, useComponentStyles } from '@webbee/bamboo-atoms';
+import { CustomButtonProps } from '.';
+import { InjectedComponentTypes } from '../Theme';
+
+const SymbolButton = ({ children, style, ...props }: CustomButtonProps) => {
+    const symbolButton = useComponentStyles('SymbolButton', style);
+    const { Text, RoundButton } = useComponents<InjectedComponentTypes>();
+
+    // custom logic
+    return (
+        <RoundButton {...props} style={symbolButton}>
+            <Text>{children as any}</Text>
+        </RoundButton>
+    );
+};
+
+export default SymbolButton;

demo/calculator/src/components/Button/index.tsx

@@ -0,0 +1,10 @@
+import { ButtonProps } from '@webbee/bamboo-atoms';
+
+export type CustomButtonProps = ButtonProps & {
+    type?: 'symbol' | 'accent' | 'default';
+};
+
+export { default as RoundButton } from './RoundButton';
+export { default as AccentButton } from './AccentButton';
+export { default as SymbolButton } from './SymbolButton';
+export { default as DoubleButton } from './DoubleButton';

demo/calculator/src/components/ResultText/index.tsx

@@ -0,0 +1,11 @@
+import { useComponents, useComponentStyles, ViewProps } from '@webbee/bamboo-atoms';
+import React from 'react';
+
+const Index = ({ style }: ViewProps) => {
+    const { Text } = useComponents();
+    const { ResultText } = useComponentStyles('ResultText', style);
+
+    return <Text style={ResultText}>{parseFloat('0').toLocaleString()}</Text>;
+};
+
+export default Index;

demo/calculator/src/components/Row/index.tsx

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+import { useComponents, ViewProps } from '@webbee/bamboo-atoms';
+
+const Row = ({ children, style, ...rest }: ViewProps) => {
+    const { View } = useComponents();
+    return (
+        <View style={[styles.container, style]} {...rest}>
+            {children}
+        </View>
+    );
+};
+
+// create styles of Row
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+    },
+});
+
+export default Row;

demo/calculator/src/components/Theme/index.tsx

@@ -0,0 +1,120 @@
+import React, { ComponentType } from 'react';
+import { Platform, StatusBar } from 'react-native';
+import {
+    extendTheme,
+    ProvideComponents,
+    ProvideTheme,
+    TextProps,
+    ViewProps,
+} from '@webbee/bamboo-atoms';
+import {
+    CustomButtonProps,
+    RoundButton,
+    AccentButton,
+    SymbolButton,
+    DoubleButton,
+} from '../Button';
+import Row from '../Row';
+import ResultText from '../ResultText';
+
+const customTheme = extendTheme({
+    Text: {
+        lineHeight: 26,
+        color: '#fff',
+        fontSize: 24,
+    },
+    CustomText: {
+        lineHeight: 24,
+        marginHorizontal: 2,
+        paddingVertical: 3,
+        paddingHorizontal: 5,
+        whiteSpace: 'nowrap',
+        borderRadius: 3,
+        fontSize: 14,
+        borderWidth: 1,
+        borderColor: '#EEEEEE',
+        color: 'rgba(51,51,51,0.9)',
+        backgroundColor: '#F8F8F8',
+    },
+    RoundButton: {
+        backgroundColor: '#333333',
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        margin: 5,
+        dark: {
+            borderColor: '#fff',
+            borderWidth: 1,
+            color: '#fff',
+        },
+        light: {
+            borderColor: '#333333',
+            borderWidth: 1,
+            backgroundColor: '#fff',
+        },
+    },
+    TextSecondary: {
+        color: '#060606',
+    },
+    DoubleButton: {
+        backgroundColor: 'green',
+    },
+    SymbolButton: {
+        backgroundColor: '#a6a6a6',
+    },
+    AccentButton: {
+        dark: {
+            borderColor: '#ffc107',
+            borderWidth: 1,
+            color: '#fff',
+        },
+        light: {
+            borderColor: '#fff',
+            borderWidth: 1,
+            backgroundColor: '#ffc107',
+        },
+    },
+    ResultText: {
+        color: '#202020',
+        fontSize: 42,
+        textAlign: 'right',
+        marginRight: 20,
+        marginBottom: 10,
+        dark: {
+            color: '#fff',
+        },
+    },
+    MainContainer: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        marginTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+        dark: {
+            backgroundColor: '#202020',
+        },
+        light: {
+            background: '#fff',
+        },
+    },
+    colorMode: 'dark',
+});
+
+export interface InjectedComponentTypes {
+    Row: ComponentType<ViewProps>;
+    ResultText: ComponentType<TextProps>;
+    RoundButton: ComponentType<CustomButtonProps>;
+    AccentButton: ComponentType<CustomButtonProps>;
+    SymbolButton: ComponentType<CustomButtonProps>;
+    DoubleButton: ComponentType<CustomButtonProps>;
+}
+
+const components = { Row, RoundButton, AccentButton, SymbolButton, DoubleButton, ResultText };
+
+export const calcWrapper = (Component: () => JSX.Element) => (props: typeof Component) => {
+    return (
+        <ProvideTheme theme={customTheme}>
+            <ProvideComponents components={components}>
+                <Component {...props} />
+            </ProvideComponents>
+        </ProvideTheme>
+    );
+};