@meatech/payblend_app_ui_component 1.0.69

package/components/BalanceCard/BalanceCard.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { debounce } from 'lodash';
+import { ACTIVE_OPACITY, colors, FontSizes, metrics, pf } from '@ui/themes';
+import { Icon } from '../Icons';
+import Text from '../Text';
+import { formatDateToJapaneseStyle, formatNumber } from '@ui/utils';
+
+export interface BalanceCardProps {
+  datetime?: string;
+  balance?: string;
+  delay?: number;
+  waitRefreshTime?: number;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+}
+
+export const BalanceCard: React.FC<BalanceCardProps> = ({
+  datetime,
+  balance = '0',
+  delay = 300,
+  waitRefreshTime = 5000,
+  style,
+  onPress,
+}) => {
+  const [disabled, setDisabled] = useState<boolean>(false);
+  const [hideBalance, setHideBalance] = useState<boolean>(false);
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>;
+    if (disabled) {
+      timeout = setTimeout(() => {
+        setDisabled(false);
+      }, waitRefreshTime);
+    }
+    return () => clearTimeout(timeout);
+  }, [waitRefreshTime, disabled]);
+
+  const handleBalanceUpdate = debounce(() => {
+    setDisabled(true);
+    onPress?.();
+  }, delay);
+
+  const handleToggleHideBalance = () => setHideBalance((prev) => !prev);
+
+  return (
+    <View style={[styles.container, style]}>
+      {datetime && (
+        <Text size="xs" color="disabled" lineHeight={pf(18)}>
+          {formatDateToJapaneseStyle(datetime)}
+        </Text>
+      )}
+      <TouchableOpacity
+        style={[styles.balanceButton, disabled && styles.buttonDisabled]}
+        disabled={!onPress || disabled}
+        activeOpacity={ACTIVE_OPACITY}
+        onPress={handleBalanceUpdate}
+      >
+        <Icon
+          name="ic_white_rotate_right"
+          width={metrics.height.spacingExtraSmall}
+          height={metrics.height.spacingExtraSmall}
+        />
+        <Text size="xxs" color="white" lineHeight={FontSizes.fontXS}>
+          残高更新
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={styles.balanceContainer}
+        activeOpacity={ACTIVE_OPACITY}
+        onPress={handleToggleHideBalance}
+      >
+        {hideBalance ? (
+          <Text
+            size="medium"
+            color="primary"
+            fontWeight="700"
+            lineHeight={pf(30)}
+          >
+            ****
+          </Text>
+        ) : (
+          <>
+            <Text
+              size="medium"
+              color="primary"
+              fontWeight="700"
+              lineHeight={pf(30)}
+            >
+              ¥
+            </Text>
+            <Text
+              size="xl"
+              color="primary"
+              fontWeight="700"
+              lineHeight={pf(30)}
+            >
+              {formatNumber(balance)}
+            </Text>
+            <Text
+              size="medium"
+              color="primary"
+              fontWeight="700"
+              lineHeight={pf(30)}
+            >
+              -
+            </Text>
+          </>
+        )}
+        <Icon
+          name={hideBalance ? 'ic_eye_off' : 'ic_eye'}
+          width={metrics.iconSmall}
+          height={metrics.iconSmall}
+          tintColor={colors.neutral['80']}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    gap: metrics.height.spacingTiny,
+  },
+  balanceButton: {
+    flexDirection: 'row',
+    backgroundColor: colors.neutral['60'],
+    paddingVertical: metrics.height.spacingNano,
+    paddingHorizontal: metrics.width.spacingExtraSmall,
+    borderRadius: metrics.borderRadiusMassive,
+    gap: metrics.width.spacingNano,
+    alignItems: 'center',
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  balanceContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: metrics.width.spacingTiny,
+  },
+});

package/components/BalanceCard/index.ts

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

package/components/Button/index.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { TouchableOpacity } from "react-native";
+import { CustomButtonProps } from "./type";
+import Text from "../Text";
+import { buttonColors, styles, textColors, textSizes } from "./styles";
+import { colors, metrics } from "@ui/themes";
+
+const Button: React.FC<CustomButtonProps> = ({
+  children,
+  textSize = "medium",
+  textWeight = "700",
+  color = "secondary",
+  textColor = "primary",
+  type = "fill",
+  onPress,
+  style,
+  disabled = false,
+}) => {
+  const buttonStyle = [
+    styles.base,
+    type === "fill" && {
+      backgroundColor: disabled ? colors.neutral[20] : buttonColors[color],
+    },
+    type === "outline" && {
+      borderColor: disabled ? colors.neutral[20] : buttonColors[color],
+      borderWidth: metrics.borderWidthMedium,
+    },
+    type === "noline" && {
+      backgroundColor: disabled ? "white" : "transparent",
+    },
+    textSize === "small" && {
+      paddingVertical: metrics.height.spacingSmall,
+      paddingHorizontal: metrics.width.spacingSlightlySmall,
+    },
+    (textSize === "small" || "large") && {
+      paddingVertical: metrics.height.spacingExtraSmall,
+      paddingHorizontal: metrics.width.spacingBase,
+    },
+  ];
+
+  const textStyle = [
+    {
+      fontSize: textSizes[textSize],
+      color: disabled
+        ? colors.neutral[60]
+        : type === "fill"
+        ? "white"
+        : textColors[textColor],
+    },
+  ];
+
+  return (
+    <TouchableOpacity
+      disabled={disabled}
+      style={[buttonStyle, style]}
+      onPress={onPress}
+    >
+      <Text
+        fontWeight={textWeight}
+        style={textStyle}
+        ellipsizeMode="tail"
+        numberOfLines={1}
+      >
+        {children}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+export default Button;

package/components/Button/styles.tsx

@@ -0,0 +1,34 @@
+import { StyleSheet } from "react-native";
+import { FontSizes, metrics, colors } from "@ui/themes";
+
+export const buttonColors: Record<string, string> = {
+  primary: colors.teal[80],
+  secondary: colors.secondary[100],
+  error: colors.red[60],
+  black: colors.neutral[100],
+  disabled: colors.neutral[60],
+};
+
+export const textSizes: { [key: string]: number } = {
+  small: FontSizes.fontSmall,
+  medium: FontSizes.fontMedium,
+  large: FontSizes.fontLarge,
+};
+
+export const textColors: { [key: string]: string } = {
+  primary: colors.teal[80],
+  error: colors.red[60],
+  black: colors.neutral[100],
+  white: colors.white[10],
+  disabled: colors.neutral[60],
+  while: colors.white[10],
+  secondary: colors.neutral[60],
+};
+
+export const styles = StyleSheet.create({
+  base: {
+    borderRadius: metrics.borderRadiusBase,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/components/Button/type.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import {StyleProp, ViewStyle} from 'react-native';
+export interface CustomButtonProps {
+  children: React.ReactNode;
+  textSize?: 'small' | 'medium' | 'large';
+  color?: 'primary' | 'secondary' | 'error' | 'black' | 'disabled';
+  type?: 'noline' | 'outline' | 'fill' | 'secondary';
+  textColor?:
+    | 'primary'
+    | 'secondary'
+    | 'error'
+    | 'black'
+    | 'white'
+    | 'disabled'
+    | 'secondary';
+  textWeight?:
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+}

package/components/Container/Container.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { colors, deviceHeight } from '@ui/themes';
+
+import Header from '../Header';
+
+export const Container = ({
+  children,
+  isShowHeader,
+  headerTitle,
+  backgroundColor = colors.white[10],
+  keyboardAvoidingEnabled = false,
+  subScreenName,
+  webHeaderTitle,
+  onRightPress,
+  onLeftPress,
+  onClose,
+}: {
+  children: React.ReactNode;
+  isShowHeader?: boolean;
+  headerTitle?: string;
+  backgroundColor?: string;
+  keyboardAvoidingEnabled?: boolean;
+  subScreenName?: string;
+  webHeaderTitle?: string;
+  onRightPress?: () => void;
+  onLeftPress?: () => void;
+  onClose?: () => void;
+}) => {
+  return (
+    <SafeAreaView style={[styles.flex1, { backgroundColor }]}>
+      <KeyboardAvoidingView
+        enabled={keyboardAvoidingEnabled}
+        behavior="padding"
+        style={styles.keyboardAvoidingViewContainer}
+      >
+        {isShowHeader && (
+          <Header
+            screenName={headerTitle}
+            subScreenName={subScreenName}
+            children={webHeaderTitle}
+            onLeftPress={onLeftPress}
+            onRightPress={onRightPress}
+            onClose={onClose}
+          />
+        )}
+        {children}
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex1: {
+    flex: 1,
+  },
+  keyboardAvoidingViewContainer: {
+    flexGrow: 1,
+    maxHeight: deviceHeight(),
+  },
+});

package/components/Container/index.ts

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

package/components/Header/index.tsx

@@ -0,0 +1,225 @@
+import * as React from "react";
+import { useState } from "react";
+import { View, Image, Pressable, TextStyle, Platform } from "react-native";
+import Animated, {
+  Easing,
+  measure,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { CustomHeaderProps } from "./type";
+import Text from "../Text";
+import { Icon } from "../Icons";
+import { styles } from "./styles";
+import { colors, Images, ph, pw } from "@ui/themes";
+
+const hamburgerBussinessServicesList = [
+  {
+    id: 1,
+    title: "Home",
+  },
+  {
+    id: 2,
+    title: "試合情報",
+  },
+  {
+    id: 3,
+    title: "選手紹介",
+  },
+  {
+    id: 4,
+    title: "****",
+  },
+  {
+    id: 5,
+    title: "******",
+  },
+  {
+    id: 6,
+    title: "****",
+  },
+];
+
+const hamburgerWalletList = [
+  {
+    id: 1,
+    title: "口座一覧",
+  },
+  {
+    id: 2,
+    title: "Visaプリペイド",
+  },
+  {
+    id: 3,
+    title: "***Pay",
+  },
+  {
+    id: 4,
+    title: "ファンDX",
+  },
+  {
+    id: 5,
+    title: "アカウント",
+  },
+];
+
+const Header: React.FC<CustomHeaderProps> = ({
+  style,
+  screenName,
+  subScreenName,
+  isShowLeftIcon = true,
+  textColors = colors.white[10],
+  children,
+  leftIcon = "ic_close",
+  onRightPress,
+  onLeftPress,
+  onClose,
+}) => {
+  const headerRef = useAnimatedRef<View>();
+  const opacity = useSharedValue(0);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+    opacity.value = withTiming(isOpen ? 0 : 1, {
+      duration: 300,
+      easing: Easing.out(Easing.quad),
+    });
+  };
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const layout = measure(headerRef);
+    return {
+      pointerEvents: opacity.value === 0 ? "none" : "auto",
+      opacity: opacity.value,
+      top: layout?.height,
+    };
+  });
+
+  const handleRightClick = () => {
+    onRightPress && onRightPress();
+  };
+  const handleLeftClick = () => {
+    if (onLeftPress) {
+      onLeftPress();
+    }
+  };
+  const colorStyle: TextStyle = textColors ? { color: textColors } : {};
+  return (
+    <>
+      {Platform.OS === "web" ? (
+        <View>
+          <View style={[style, styles.headerContainer]}>
+            {isShowLeftIcon && (
+              <Icon
+                tintColor={textColors}
+                width={pw(24)}
+                height={ph(24)}
+                name={leftIcon}
+                onPress={onClose}
+              />
+            )}
+            <Text
+              style={colorStyle}
+              size="medium"
+              fontFamily={"Inter"}
+              fontWeight="700"
+            >
+              {children || ""}
+            </Text>
+            <View />
+          </View>
+          {subScreenName && (
+            <View style={styles.headerScreenNameContainer}>
+              <View style={styles.headerScreenNameTextWrapper}>
+                <Text size="medium" fontWeight="700">
+                  {subScreenName}
+                </Text>
+              </View>
+
+              <View style={styles.headerScreenNameRightBoxContainer}>
+                <Icon
+                  name="ic_back"
+                  tintColor={colors.neutral[90]}
+                  onPress={handleLeftClick}
+                />
+                <Icon
+                  name="ic_chevron_right"
+                  tintColor={colors.neutral[90]}
+                  onPress={handleRightClick}
+                />
+              </View>
+            </View>
+          )}
+        </View>
+      ) : (
+        <View>
+          <Animated.View ref={headerRef} style={styles.shadowWrapper}>
+            <View style={[style, styles.headerUpperContentWrapper]}>
+              <Pressable>
+                <Image source={Images.payblend_logo} />
+              </Pressable>
+              <Pressable onPress={toggleDropdown} style={styles.rightBox}>
+                <View style={styles.line} />
+                <View style={styles.line} />
+                <View style={styles.line} />
+              </Pressable>
+            </View>
+          </Animated.View>
+          <Animated.View style={[styles.dropdown, animatedStyle]}>
+            <View style={styles.dropdownContentWrapper}>
+              <View style={styles.dropdownTitleNameContainer}>
+                <Text size="medium" fontWeight="700" color={"white"}>
+                  事業者のサービス
+                </Text>
+              </View>
+              {hamburgerBussinessServicesList.map((item) => (
+                <Pressable
+                  key={item.id}
+                  style={styles.dropdownMenuNameContainer}
+                >
+                  <Text size="medium" fontWeight="400" color={"white"}>
+                    {item.title}
+                  </Text>
+                </Pressable>
+              ))}
+              <View style={styles.dropdownTitleNameContainer}>
+                <Text size="medium" fontWeight="700" color={"white"}>
+                  Wallet
+                </Text>
+              </View>
+              {hamburgerWalletList.map((item) => (
+                <Pressable
+                  key={item.id}
+                  style={styles.dropdownMenuNameContainer}
+                >
+                  <Text size="medium" fontWeight="400" color={"white"}>
+                    {item.title}
+                  </Text>
+                </Pressable>
+              ))}
+            </View>
+          </Animated.View>
+          {screenName && (
+            <View style={styles.headerScreenNameContainer}>
+              <View style={styles.headerScreenNameTextWrapper}>
+                <Text size="medium" fontWeight="700">
+                  {screenName}
+                </Text>
+              </View>
+
+              <View style={styles.headerScreenNameRightBoxContainer}>
+                <Icon name="ic_back" onPress={handleLeftClick} />
+                <Icon name="ic_chevron_right" onPress={handleRightClick} />
+              </View>
+            </View>
+          )}
+        </View>
+      )}
+    </>
+  );
+};
+
+export default Header;

package/components/Header/styles.tsx

@@ -0,0 +1,119 @@
+import { Platform, StyleSheet } from "react-native";
+import { FontSizes, Space, metrics, ph, pw } from "@ui/themes";
+import { colors } from "@ui/themes/colors";
+
+export const buttonColors: Record<string, string> = {
+  primary: colors.teal[80],
+  secondary: colors.neutral[20],
+  error: colors.red[60],
+  black: colors.neutral[100],
+};
+
+export const textSizes: { [key: string]: number } = {
+  small: FontSizes.fontSmall,
+  medium: FontSizes.fontMedium,
+  large: FontSizes.fontLarge,
+};
+
+export const textColors: { [key: string]: string } = {
+  primary: colors.teal[80],
+  secondary: colors.neutral[20],
+  error: colors.red[60],
+  black: colors.neutral[100],
+  while: colors.white[10],
+};
+
+export const styles = StyleSheet.create({
+  shadowWrapper: {
+    overflow: "hidden",
+    paddingBottom: 5,
+  },
+  headerUpperContentWrapper: {
+    width: "100%",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    paddingHorizontal: metrics.width.spacingXXLarge,
+    paddingVertical: Space.xxxxs,
+    alignItems: "center",
+    backgroundColor: colors.white[10],
+    shadowColor: colors.black[10],
+    shadowOffset: {
+      width: 0,
+      height: 5,
+    },
+    shadowOpacity: 0.01,
+    elevation: 5,
+  },
+  headerScreenNameContainer: {
+    paddingHorizontal: Space.medium,
+    paddingVertical: Space.small,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "white",
+  },
+  headerScreenNameTextWrapper: {
+    width: "60%",
+  },
+  headerScreenNameRightBoxContainer: {
+    flexDirection: "row",
+    width: "40%",
+    justifyContent: "flex-end",
+  },
+  leftBtn: {
+    backgroundColor: "red",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  rightBox: {
+    borderWidth: metrics.borderWidthMedium,
+    borderColor: colors.neutral[60],
+    borderRadius: metrics.borderRadiusTiny,
+    paddingHorizontal: pw(14),
+    paddingVertical: Space.xs,
+    gap: Space.xxs,
+  },
+  line: {
+    backgroundColor: colors.neutral[85],
+    width: pw(23),
+    height: ph(1),
+  },
+  dropdown: {
+    position: "absolute",
+    width: "100%",
+    overflow: "hidden",
+    backgroundColor: colors.neutral[90],
+    zIndex: 10,
+    shadowColor: colors.neutral[100],
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 6,
+    elevation: 6,
+  },
+  dropdownContentWrapper: {
+    paddingVertical: Space.large,
+  },
+
+  dropdownTitleNameContainer: {
+    paddingHorizontal: Space.medium,
+    paddingVertical: Space.xs,
+  },
+  dropdownMenuNameContainer: {
+    paddingHorizontal: Space.large,
+    paddingVertical: Space.xs,
+  },
+  headerContainer: {
+    width: "100%",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    paddingHorizontal: metrics.width.spacingXXLarge,
+    paddingVertical: Space.xs,
+    alignItems: "center",
+    backgroundColor:
+      Platform.OS === "web" ? colors.primaryWeb[100] : colors.primary[100],
+    shadowColor: "rgba(13, 26, 38, 0.15)",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+});