@adiraku/react-native-ui 0.1.14

package/package.json

@@ -0,0 +1,129 @@
+{
+  "name": "@adiraku/react-native-ui",
+  "version": "0.1.14",
+  "description": "test",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!lib/typescript/example",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepack": "bob build",
+    "release": "release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn example && yarn install && yarn example pods",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": "https://bitbucket.org/dcoedev/adiraku-react-native-ui/",
+  "author": "DCOEDev",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://bitbucket.org/dcoedev/adiraku-react-native-ui/issues"
+  },
+  "homepage": "https://bitbucket.org/dcoedev/adiraku-react-native-ui#readme",
+  "devDependencies": {
+    "@commitlint/config-conventional": "^17.0.2",
+    "@evilmartians/lefthook": "^1.2.2",
+    "@react-native-community/eslint-config": "^3.0.2",
+    "@release-it/conventional-changelog": "^5.0.0",
+    "@types/jest": "^28.1.2",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "0.70.0",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.0.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^28.1.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "18.2.0",
+    "react-native": "0.71.1",
+    "react-native-builder-bob": "^0.20.0",
+    "react-native-svg-web": "^1.0.9",
+    "react-native-web": "^0.19.4",
+    "release-it": "^15.0.0",
+    "typescript": "4.5.2",
+    "react-native-svg": "^13.9.0"
+  },
+  "resolutions": {
+    "@types/react": "17.0.21"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-svg": "*"
+  },
+  "packageManager": "^yarn@1.22.15",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+  }
+}

package/react-native-ui.podspec

@@ -0,0 +1,36 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-ui"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "11.0" }
+  s.source       = { :git => "https://bitbucket.com/AndhikaK/react-native-ui.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  s.dependency "React-Core"
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+    s.dependency "React-RCTFabric"
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+  end
+end

package/src/components/Appbar/Appbar.component.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { TouchableHighlight, View } from 'react-native';
+
+import { getStyle } from './Appbar.style';
+import { Palettes, Shadow } from '../../themes';
+import { IconArrowLeft } from '../../icons';
+import { Typography } from '../typography/typography.component';
+
+import type { AppbarProps } from './Appbar.type';
+
+const Appbar: React.FunctionComponent<AppbarProps> = (props) => {
+  const {
+    backIcon = (
+      <IconArrowLeft width={20} height={20} fill={Palettes.black[900]} />
+    ),
+    title = '',
+    customHeader = null,
+    containerStyle,
+    onBackPress = () => {},
+    buttonActions = [],
+    withShadow = true,
+  } = props;
+
+  const computedStyle = getStyle();
+
+  return (
+    <View
+      style={[
+        computedStyle.container,
+        containerStyle,
+        withShadow && Shadow['shadow-elevation-2'],
+      ]}
+    >
+      {customHeader || (
+        <>
+          <TouchableHighlight
+            onPress={onBackPress}
+            style={[computedStyle.iconWrapper]}
+            underlayColor={Palettes.grey[50]}
+          >
+            {backIcon}
+          </TouchableHighlight>
+          <View style={[computedStyle.contentWrapper]}>
+            <Typography variant="subtitle1" style={[computedStyle.title]}>
+              {title}
+            </Typography>
+            {buttonActions.length > 0 &&
+              buttonActions.map((action, idx) => (
+                <TouchableHighlight
+                  key={idx}
+                  onPress={action.onPress}
+                  style={[computedStyle.iconWrapper]}
+                  underlayColor={Palettes.grey[50]}
+                >
+                  {action.icon}
+                </TouchableHighlight>
+              ))}
+          </View>
+        </>
+      )}
+    </View>
+  );
+};
+
+export { Appbar };

package/src/components/Appbar/Appbar.style.tsx

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native';
+
+import { Palettes, Radius, Spacing } from '../../themes';
+
+import type { ViewStyle } from 'react-native';
+import { TextStyle } from 'react-native';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  iconWrapper?: ViewStyle;
+  contentWrapper?: ViewStyle;
+  title?: TextStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    width: '100%',
+    height: 56,
+    padding: Spacing[16],
+    backgroundColor: Palettes.white[50],
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  };
+
+  computedStyle.iconWrapper = {
+    padding: Spacing[8],
+    borderRadius: Radius[4],
+  };
+
+  computedStyle.contentWrapper = {
+    flex: 1,
+    marginLeft: Spacing[16],
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  };
+
+  computedStyle.title = {
+    flex: 1,
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/Appbar/Appbar.type.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+
+export interface AppbarProps {
+  title?: string;
+
+  onBackPress: () => void;
+
+  backIcon?: ReactNode;
+
+  customHeader?: ReactNode;
+
+  containerStyle?: ViewStyle;
+
+  withShadow?: boolean;
+
+  buttonActions?: {
+    icon: ReactNode;
+    onPress: () => void;
+  }[];
+}

package/src/components/BottomSheet/BottomSheet.component.tsx

@@ -0,0 +1,222 @@
+import * as React from 'react';
+import {
+  Animated,
+  Dimensions,
+  PanResponder,
+  Modal,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+import { getStyle } from './BottomSheet.style';
+import { Typography } from '../typography/typography.component';
+
+import type { BottomSheetProps } from './BottomSheet.type';
+import { TouchableHighlight } from 'react-native';
+
+type BottomSheetRefHandle = {
+  open: () => void;
+  close: () => void;
+};
+
+export type BottomSheetHandler = React.ElementRef<typeof BottomSheet>;
+
+const BottomSheet = React.forwardRef<BottomSheetRefHandle, BottomSheetProps>(
+  (props, ref) => {
+    const {
+      onDismiss,
+      title,
+      subtitle,
+      isOverlayDismissDisabled = false,
+      dismissIcon = null,
+      action = null,
+      largeIcon = null,
+      largeIconContainerHeight = 50,
+      animationType = 'slide',
+      children,
+    } = props;
+    const screenHeight = Dimensions.get('screen').height;
+    const screenWidth = Dimensions.get('screen').width;
+    const panY = React.useRef(new Animated.Value(screenHeight)).current;
+
+    const [visibility, setVisibility] = React.useState(false);
+
+    React.useImperativeHandle(
+      ref,
+      () => {
+        return {
+          open() {
+            setVisibility(true);
+          },
+          close() {
+            setVisibility(false);
+          },
+        };
+      },
+      []
+    );
+
+    const computedStyle = getStyle();
+
+    const resetPositionAnim = Animated.timing(panY, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true,
+    });
+
+    const closeAnim = Animated.timing(panY, {
+      toValue: screenHeight,
+      duration: 300,
+      useNativeDriver: true,
+    });
+
+    const translateY = panY.interpolate({
+      inputRange: [-1, 0, 1],
+      outputRange: [0, 0, 1],
+    });
+
+    const handleDismiss = () => {
+      setVisibility(false);
+      closeAnim.start(onDismiss);
+    };
+
+    React.useEffect(() => {
+      resetPositionAnim.start();
+    }, [resetPositionAnim]);
+
+    const panResponders = React.useRef(
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => false,
+        onPanResponderMove: Animated.event([null, { dy: panY }], {
+          useNativeDriver: false,
+        }),
+        onPanResponderRelease: (_, gs) => {
+          if (gs.dy > 0 && gs.vy > 0.3) {
+            return handleDismiss();
+          }
+          return resetPositionAnim.start();
+        },
+      })
+    ).current;
+
+    const renderSheetHeader = () => {
+      return (
+        <View style={[computedStyle.sheetHeaderWrapper]}>
+          <View style={[computedStyle.sheetHeader]}>
+            <View
+              style={[
+                {
+                  maxWidth: ((screenWidth - 32) / 8) * 2,
+                  minWidth: ((screenWidth - 32) / 8) * 2,
+                },
+              ]}
+            >
+              {dismissIcon && (
+                <TouchableHighlight
+                  onPress={handleDismiss}
+                  style={[computedStyle.sheetDismissIconWrapper]}
+                  underlayColor={'transparent'}
+                >
+                  {dismissIcon}
+                </TouchableHighlight>
+              )}
+            </View>
+            <View
+              style={[
+                {
+                  maxWidth: ((screenWidth - 32) / 8) * 4,
+                  minWidth: ((screenWidth - 32) / 8) * 4,
+                },
+              ]}
+            >
+              {title && (
+                <Typography
+                  variant="subtitle1"
+                  style={[computedStyle.textCenter]}
+                  numberOfLines={2}
+                >
+                  {title}
+                </Typography>
+              )}
+            </View>
+            <View
+              style={[
+                {
+                  maxWidth: ((screenWidth - 32) / 8) * 2,
+                  minWidth: ((screenWidth - 32) / 8) * 2,
+                },
+                computedStyle.sheetActionWrapper,
+              ]}
+            >
+              {action || null}
+            </View>
+          </View>
+          {subtitle && (
+            <Typography
+              variant="body2"
+              numberOfLines={2}
+              style={[computedStyle.textCenter]}
+            >
+              {subtitle}
+            </Typography>
+          )}
+        </View>
+      );
+    };
+
+    const renderLargeIconComponent = () => {
+      return (
+        <View
+          style={[
+            computedStyle.largeIconContainer,
+            { height: largeIconContainerHeight },
+          ]}
+        >
+          <View style={[computedStyle.largeIconAbsoluteWrapper]}>
+            {largeIcon}
+          </View>
+        </View>
+      );
+    };
+
+    return (
+      <Modal
+        animated
+        animationType={animationType}
+        visible={visibility}
+        transparent
+        onRequestClose={handleDismiss}
+      >
+        <View style={[computedStyle.flex, computedStyle.overlayColor]}>
+          <TouchableWithoutFeedback
+            onPress={handleDismiss}
+            disabled={isOverlayDismissDisabled}
+          >
+            <View style={[computedStyle.overlay]} />
+          </TouchableWithoutFeedback>
+          <Animated.View
+            style={{
+              ...computedStyle.container,
+              transform: [{ translateY: translateY }],
+            }}
+          >
+            <View>
+              <View
+                style={[computedStyle.sheetIndicatorWrapper]}
+                {...panResponders.panHandlers}
+              >
+                {!largeIcon && <View style={computedStyle.sliderIndicator} />}
+              </View>
+              {largeIcon ? renderLargeIconComponent() : renderSheetHeader()}
+            </View>
+
+            {children}
+          </Animated.View>
+        </View>
+      </Modal>
+    );
+  }
+);
+
+export { BottomSheet };

package/src/components/BottomSheet/BottomSheet.style.tsx

@@ -0,0 +1,88 @@
+import type { ViewStyle, TextStyle } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
+
+import { Palettes, Radius, Spacing } from '../../../src/themes';
+
+interface ComputedStyleProps {
+  overlay?: ViewStyle;
+  container?: ViewStyle;
+  overlayColor?: ViewStyle;
+  sliderIndicatorRow?: ViewStyle;
+  sliderIndicator?: ViewStyle;
+  sheetIndicatorWrapper?: ViewStyle;
+  sheetHeaderWrapper?: ViewStyle;
+  sheetHeader?: ViewStyle;
+  flex?: ViewStyle;
+  textCenter?: TextStyle;
+  sheetDismissIconWrapper?: ViewStyle;
+  sheetActionWrapper?: ViewStyle;
+  largeIconContainer?: ViewStyle;
+  largeIconAbsoluteWrapper?: ViewStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.flex = {
+    flex: 1,
+  };
+
+  computedStyle.overlay = {
+    flex: 1,
+    justifyContent: 'flex-end',
+  };
+  computedStyle.overlayColor = {
+    backgroundColor: 'rgba(0,0,0,0.2)',
+  };
+
+  computedStyle.container = {
+    maxHeight: (Dimensions.get('window').height / 8) * 7,
+    borderTopRightRadius: Radius[16],
+    borderTopLeftRadius: Radius[16],
+    backgroundColor: Palettes.whiteDark[50],
+  };
+  computedStyle.sliderIndicator = {
+    height: 5,
+    width: 100,
+    borderRadius: Radius.full,
+    backgroundColor: Palettes.grey[100],
+  };
+
+  computedStyle.sheetIndicatorWrapper = {
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  computedStyle.sheetHeader = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  };
+
+  computedStyle.sheetHeaderWrapper = {
+    paddingHorizontal: Spacing[16],
+  };
+  computedStyle.sheetDismissIconWrapper = {
+    padding: 4,
+  };
+  computedStyle.sheetActionWrapper = {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  };
+
+  computedStyle.textCenter = {
+    textAlign: 'center',
+  };
+
+  computedStyle.largeIconContainer = {
+    alignItems: 'center',
+  };
+
+  computedStyle.largeIconAbsoluteWrapper = {
+    position: 'absolute',
+    bottom: 0,
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/BottomSheet/BottomSheet.type.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+
+export interface BottomSheetProps {
+  onDismiss?: () => void;
+
+  sheetHeader?: ReactNode;
+
+  title: string;
+
+  subtitle?: string;
+
+  isOverlayDismissDisabled?: boolean;
+
+  dismissIcon?: ReactNode;
+
+  action?: ReactNode;
+
+  largeIcon?: ReactNode;
+
+  largeIconContainerHeight?: number;
+
+  animationType?: 'slide' | 'none' | 'fade';
+
+  children?: ReactNode;
+}
+
+export type BottomSheetRefHandle = {
+  open: () => void;
+  close: () => void;
+};