@meatech/payblend_app_ui_component 1.0.69

package/components/PaymentMethodCard/PaymentMethodCard.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+  TouchableOpacity,
+} from 'react-native';
+import { EPaymentCardTypes, paymentCardDataByTypes } from '@ui/constants';
+import { Text, Icon, Image } from '@ui/components';
+import {
+  ACTIVE_OPACITY,
+  colors,
+  deviceWidth,
+  FontSizes,
+  metrics,
+  ph,
+} from '@ui/themes';
+
+interface PaymentMethodCardProps {
+  type?: EPaymentCardTypes;
+  style?: StyleProp<ViewStyle>;
+  hideShadow?: boolean;
+  onPress?: () => void;
+  photo: string;
+  disabled?: boolean;
+}
+
+export const PaymentMethodCard: React.FC<PaymentMethodCardProps> = ({
+  photo,
+  type = EPaymentCardTypes.DIRECT,
+  style,
+  hideShadow = false,
+  disabled = false,
+  onPress,
+}) => {
+  // console.log('disabled', disabled);
+
+  const data = paymentCardDataByTypes[type];
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        style,
+        !hideShadow && styles.shadow,
+        disabled && styles.disabled,
+      ]}
+      activeOpacity={ACTIVE_OPACITY}
+      disabled={disabled || !onPress}
+      onPress={onPress}
+    >
+      <View style={[styles.bannerContainer, styles.banner]}>
+        <Image
+          uri={photo}
+          resizeMode="cover"
+          width={deviceWidth() * 0.3}
+          height={ph(70)}
+          style={styles.banner}
+        />
+      </View>
+      <View style={styles.content}>
+        <Icon
+          name={data.icon}
+          width={metrics.iconMediumPlus}
+          height={metrics.iconMediumPlus}
+          tintColor={colors.neutral['80']}
+        />
+        <Text size="medium" color="tertiary" lineHeight={FontSizes.fontXL}>
+          {data.label}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    backgroundColor: colors.white['10'],
+    margin: metrics.width.spacingBase,
+    borderRadius: metrics.borderRadiusSemiLarge,
+    paddingHorizontal: metrics.width.spacingBase,
+    paddingVertical: metrics.height.spacingExtraSmall,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  shadow: {
+    shadowColor: colors.neutral[100],
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  bannerContainer: {
+    backgroundColor: colors.white['10'],
+    shadowColor: colors.neutral[100],
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 12,
+    elevation: 12,
+  },
+  banner: {
+    borderRadius: metrics.borderRadiusSemiLarge,
+  },
+  content: {
+    flexDirection: 'row',
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: metrics.width.spacingExtraSmall,
+  },
+});

package/components/PaymentMethodCard/index.ts

@@ -0,0 +1 @@
+export * from './PaymentMethodCard';

package/components/PaymentMethodCardWithAmount/PaymentMethodCardWithAmount.tsx

@@ -0,0 +1,196 @@
+import React from "react";
+import {
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  StyleProp,
+  ViewStyle,
+  ActivityIndicator,
+} from "react-native";
+import { EPaymentCardTypes, paymentCardDataByTypes } from "@ui/constants";
+import { Icon, Image, Text } from "@ui/components";
+import {
+  ACTIVE_OPACITY,
+  colors,
+  deviceWidth,
+  getColorOpacity,
+  metrics,
+  pf,
+  ph,
+  pw,
+} from "@ui/themes";
+import { formatNumber } from "@ui/utils";
+
+export interface PaymentMethodCardWithAmountProps {
+  title?: string;
+  type?: EPaymentCardTypes;
+  balance?: string;
+  cardImgUrl?: string;
+  style?: StyleProp<ViewStyle>;
+  unit?: string;
+  disabled?: boolean;
+  isLoading?: boolean;
+  onPress?: () => void;
+  onCreate?: () => void;
+}
+
+export const PaymentMethodCardWithAmount: React.FC<
+  PaymentMethodCardWithAmountProps
+> = ({
+  type = EPaymentCardTypes.DIRECT,
+  title = '',
+  balance = '0',
+  unit = '￥',
+  isLoading = false,
+  style,
+  cardImgUrl,
+  onPress,
+  onCreate,
+}) => {
+  const data = paymentCardDataByTypes[type];
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        style,
+        onCreate && styles.notAvailable,
+        isLoading && styles.notAvailable,
+      ]}
+      activeOpacity={ACTIVE_OPACITY}
+      disabled={!onPress}
+      onPress={onPress}>
+      <View style={styles.content}>
+        <Icon
+          name={data.icon}
+          width={metrics.iconMediumPlus}
+          height={metrics.iconMediumPlus}
+          tintColor={colors.neutral['80']}
+        />
+        <Text size="medium" color="tertiary">
+          {title}
+        </Text>
+      </View>
+      <View style={styles.balance}>
+        <Text
+          size="medium"
+          fontWeight="500"
+          color="primary"
+          lineHeight={pf(40)}>
+          {unit}
+        </Text>
+        <Text size="xl" fontWeight="700" color="primary" lineHeight={pf(40)}>
+          {formatNumber(balance)}
+        </Text>
+        <Text
+          size="medium"
+          fontWeight="500"
+          color="primary"
+          lineHeight={pf(40)}>
+          -
+        </Text>
+      </View>
+      <View style={styles.bannerIntro}>
+        <Image
+          uri={cardImgUrl || data.photo}
+          width={deviceWidth() * 0.33}
+          height={pw(84)}
+          style={styles.banner}
+          resizeMode="cover"
+        />
+        {onCreate && (
+          <TouchableOpacity
+            style={styles.add}
+            activeOpacity={ACTIVE_OPACITY}
+            disabled={isLoading}
+            onPress={onCreate}>
+            {!isLoading ? (
+              <Icon
+                name="ic_white_plus"
+                width={metrics.iconExtraLarge}
+                height={metrics.iconExtraLarge}
+              />
+            ) : (
+              <ActivityIndicator size="small" color={colors.primary['100']} />
+            )}
+          </TouchableOpacity>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.white['10'],
+    height: ph(108),
+    shadowColor: colors.neutral['100'],
+    shadowOffset: {width: 0, height: 4},
+    shadowOpacity: 0.25,
+    shadowRadius: 6,
+    elevation: 6,
+    justifyContent: 'space-between',
+    borderRadius: metrics.borderRadiusSemiLarge,
+  },
+  notAvailable: {
+    opacity: 0.4,
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: metrics.width.spacingExtraSmall,
+    paddingTop: ph(14),
+    gap: metrics.width.spacingExtraSmall,
+    borderTopRightRadius: metrics.borderRadiusSemiLarge,
+    borderTopLeftRadius: metrics.borderRadiusSemiLarge,
+  },
+  balance: {
+    flexDirection: 'row',
+    backgroundColor: colors.neutral['20'],
+    paddingHorizontal: metrics.width.spacingExtraSmall,
+    paddingVertical: metrics.height.spacingTiny,
+    gap: metrics.width.spacingNano,
+    borderBottomRightRadius: metrics.borderRadiusSemiLarge,
+    borderBottomLeftRadius: metrics.borderRadiusSemiLarge,
+  },
+  bannerIntro: {
+    position: 'absolute',
+    zIndex: 1,
+    top: metrics.height.spacingExtraSmall,
+    right: metrics.width.spacingExtraSmall,
+    borderRadius: metrics.borderRadiusExtraLarge,
+    backgroundColor: colors.white['10'],
+    padding: metrics.width.spacingTiny,
+    shadowColor: colors.neutral['100'],
+    shadowOffset: {width: 0, height: metrics.height.spacingTiny},
+    shadowOpacity: 0.25,
+    shadowRadius: metrics.borderRadiusExtraLarge,
+    elevation: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  banner: {
+    borderRadius: metrics.borderRadiusExtraLarge,
+  },
+  add: {
+    position: 'absolute',
+    zIndex: 2,
+    width: metrics.iconHuge,
+    height: metrics.iconHuge,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: getColorOpacity(colors.black['100'], 0.6),
+    borderRadius: metrics.borderRadiusMassive,
+  },
+  loading: {
+    position: 'absolute',
+    zIndex: 2,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: getColorOpacity(colors.black['100'], 0.2),
+    borderRadius: metrics.borderRadiusExtraLarge,
+  },
+});

package/components/PaymentMethodCardWithAmount/index.ts

@@ -0,0 +1 @@
+export * from './PaymentMethodCardWithAmount';

package/components/ProgressBars/CircleProgressBar.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import {View, StyleSheet} from 'react-native';
+import Svg, {Circle} from 'react-native-svg';
+import {colors} from '@ui/themes';
+
+interface CircleProgressBarProps {
+  size: number;
+  progress: number;
+  activeColor?: string;
+  children?: React.ReactNode;
+}
+
+export const CircleProgressBar: React.FC<CircleProgressBarProps> = ({
+  size,
+  progress,
+  activeColor = colors.teal[80],
+  children,
+}) => {
+  const strokeWidth = size * 0.1;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - (circumference * progress) / 100;
+
+  return (
+    <View>
+      <Svg height={size} width={size}>
+        <Circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke={colors.neutral[40]}
+          strokeWidth={strokeWidth}
+          fill="none"
+        />
+        <Circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke={activeColor}
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        />
+      </Svg>
+      <View style={[styles.textContainer, { width: size, height: size }]}>
+        {children}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: "relative",
+  },
+  textContainer: {
+    position: "absolute",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

package/components/ProgressBars/index.ts

@@ -0,0 +1 @@
+export * from './CircleProgressBar';

package/components/SkeletonLoader/SkeletonLoader.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import * as React from 'react';
+import {useEffect} from 'react';
+import {View, StyleSheet} from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import LinearGradient from 'react-native-linear-gradient';
+import {colors} from '@ui/themes';
+
+const linearGradientColor = '#E1E9EE';
+
+export const SkeletonLoader = ({
+  width,
+  height,
+  duration = 800,
+}: {
+  width: number;
+  height: number;
+  duration?: number;
+}) => {
+  const translateX = useSharedValue(-width);
+
+  useEffect(() => {
+    translateX.value = withRepeat(withTiming(width, {duration}), -1, false);
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{translateX: translateX.value}],
+  }));
+
+  return (
+    <View style={[styles.container, {width, height}]}>
+      <Animated.View style={[StyleSheet.absoluteFillObject, animatedStyle]}>
+        <LinearGradient
+          start={{x: 0, y: 0}}
+          end={{x: 1, y: 0}}
+          colors={[
+            linearGradientColor,
+            colors.white['10'],
+            linearGradientColor,
+          ]}
+          style={styles.gradient}
+        />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    backgroundColor: linearGradientColor,
+  },
+  gradient: {
+    width: '100%',
+    height: '100%',
+  },
+});

package/components/SkeletonLoader/index.ts

@@ -0,0 +1 @@
+export * from './SkeletonLoader';

package/components/SnapImageCarousel/CardStatusThumbnail.tsx

@@ -0,0 +1,156 @@
+/* eslint-disable curly */
+import * as React from 'react';
+import { StyleSheet, View, ActivityIndicator } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
+import { colors, FontSizes, getColorOpacity, metrics, pf } from '@ui/themes';
+import { Icon, Image, Text } from '@ui/components';
+import { CardStatusThumbnailProps } from './types';
+import {
+  ECardThumbnailType,
+  THUMBNAIL_HEIGHT,
+  THUMBNAIL_WIDTH,
+} from './consts';
+import { formatNumber } from '@ui/utils';
+
+export const CardStatusThumbnail = <T,>({
+  type = ECardThumbnailType.DEFAULT,
+  photo,
+  unit = '¥',
+  balance,
+  thumbnailHeight = THUMBNAIL_HEIGHT,
+  thumbnailWidth = THUMBNAIL_WIDTH,
+  animation,
+  index = 0,
+  onCreate,
+  children,
+  style,
+  cardItem,
+  isLoading,
+}: CardStatusThumbnailProps<T>) => {
+  const unActiveStyle = useAnimatedStyle(() => {
+    if (!animation) return {};
+    return {
+      transform: [{scale: withTiming(animation.value === index ? 1 : 0.6)}],
+      marginTop: withTiming(
+        animation.value === index ? 0 : THUMBNAIL_HEIGHT * 0.19,
+      ),
+      opacity: withTiming(animation.value === index ? 1 : 0.6),
+    };
+  });
+
+  const renderCardInteractions = () => {
+    switch (type) {
+      case ECardThumbnailType.NOT_ISSUED:
+        return isLoading ? (
+          <ActivityIndicator
+            style={styles.circleContainer}
+            color={colors.primary['100']}
+            size="large"
+          />
+        ) : (
+          <Icon
+            name="ic_white_plus"
+            width={metrics.iconExtraLarge}
+            height={metrics.iconExtraLarge}
+            style={styles.circleContainer}
+            onPress={() => onCreate?.(cardItem as T)}
+          />
+        );
+      case ECardThumbnailType.SHIPPED:
+        return (
+          <View style={styles.circleContainer}>
+            <Text
+              size="large"
+              color="white"
+              fontWeight="700"
+              lineHeight={pf(30)}>
+              カード発送手配済み
+            </Text>
+          </View>
+        );
+      case ECardThumbnailType.CANCELED:
+        return (
+          <View style={styles.circleContainer}>
+            <Text
+              size="small"
+              color="white"
+              lineHeight={pf(21)}
+              style={styles.label}>
+              ご解約済み
+            </Text>
+          </View>
+        );
+      default:
+        return typeof balance === 'string' ? (
+          <View style={styles.circleContainer}>
+            <Text
+              size="medium"
+              color="white"
+              fontWeight="700"
+              lineHeight={FontSizes.fontXL}
+              style={styles.label}>
+              {`${unit} `}
+              <Text
+                size="large"
+                color="white"
+                fontWeight="700"
+                lineHeight={pf(30)}>
+                {formatNumber(balance)}
+              </Text>
+              {' -'}
+            </Text>
+          </View>
+        ) : null;
+    }
+  };
+
+  return (
+    <Animated.View style={[styles.container, style, unActiveStyle]}>
+      <Image
+        uri={photo}
+        resizeMode="contain"
+        width={thumbnailWidth}
+        height={thumbnailHeight}
+        style={[
+          type !== ECardThumbnailType.DEFAULT && styles.overlay,
+          styles.image,
+        ]}
+      />
+      {renderCardInteractions()}
+      {children}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: metrics.borderRadiusSemiLarge,
+    overflow: 'hidden',
+  },
+  overlay: {
+    opacity: 0.5,
+    borderRadius: metrics.borderRadiusSemiLarge,
+  },
+  circleContainer: {
+    position: 'absolute',
+    zIndex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: metrics.width.spacingExtraSmall,
+    borderRadius: metrics.borderRadiusMassive * 2,
+    backgroundColor: getColorOpacity(colors.black['100'], 0.6),
+  },
+  label: {
+    marginHorizontal: metrics.width.spacingBase,
+  },
+  image: {
+    borderRadius: metrics.borderRadiusSemiLarge,
+  },
+});

package/components/SnapImageCarousel/PaginationItem.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import Animated, {useAnimatedStyle} from 'react-native-reanimated';
+import {colors, metrics} from '@ui/themes';
+import {PaginationItemProps} from './types';
+
+export const PaginationItem = ({animation, index}: PaginationItemProps) => {
+  const unActiveStyle = useAnimatedStyle(() => ({
+    opacity: animation.value === index ? 1 : 0.24,
+  }));
+
+  return <Animated.View style={[styles.inActiveDot, unActiveStyle]} />;
+};
+
+const styles = StyleSheet.create({
+  inActiveDot: {
+    height: metrics.height.spacingExtraSmall,
+    width: metrics.height.spacingExtraSmall,
+    borderRadius: metrics.borderRadiusSemiLarge,
+    backgroundColor: colors.teal['80'],
+  },
+});