@adiraku/react-native-ui 1.2.9-canary-7 → 1.2.9-canary-9

package/src/components/DashboardBalanceCard/DashboardBalanceCard.component.tsx

@@ -0,0 +1,578 @@
+import React from 'react';
+import { View, Image, ScrollView, TouchableOpacity } from 'react-native';
+import { Typography } from '../typography/typography.component';
+import { Divider } from '../Divider/Divider.component';
+import { Shadow } from '../../themes';
+import { Radius } from '../../themes';
+
+interface Wallet {
+  adirapoin: string;
+  points: number;
+  payment: string;
+  balance: string;
+}
+
+interface DashboardBalanceCardProps {
+  variant: 'single' | 'singleDisable' | 'multiple' | 'multipleDisable';
+  wallets: Wallet[];
+  showInstallmentLimit: boolean;
+  installmentLimit?: string;
+}
+
+const DashboardBalanceCard: React.FC<DashboardBalanceCardProps> = ({
+  variant,
+  wallets,
+  showInstallmentLimit,
+  installmentLimit,
+}) => {
+  return (
+    <View style={{ flex: 1 }}>
+      {variant === 'single' ? (
+        <View style={{ flex: 1 }}>
+          <View
+            style={{
+              width: 360,
+              height: 89,
+              flexDirection: 'row',
+              alignItems: 'center',
+              ...Shadow['shadow-elevation-1'],
+            }}
+          >
+            <Image
+              style={{
+                width: 20,
+                height: 20,
+                margin: 8,
+                marginLeft: 20,
+              }}
+              source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/IconAdirapoin.png')}
+            />
+            <View>
+              <View style={{ flexDirection: 'row' }}>
+                <Typography variant="caption">
+                  {wallets[0]?.adirapoin}
+                </Typography>
+                <Image
+                  style={{
+                    width: 16,
+                    height: 16,
+                    marginLeft: 10,
+                    marginRight: 50,
+                  }}
+                  source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                />
+              </View>
+              <Typography variant="button-small">
+                {wallets[0]?.points} poin
+              </Typography>
+            </View>
+            <Divider
+              orientation="vertical"
+              style={{ marginHorizontal: 10, height: 38 }}
+            />
+            <Image
+              style={{
+                width: 20,
+                height: 20,
+                margin: 8,
+              }}
+              source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/IconAdirapay.png')}
+            />
+            <View>
+              <View style={{ flexDirection: 'row' }}>
+                <Typography variant="caption">{wallets[0]?.payment}</Typography>
+                <Image
+                  style={{
+                    width: 16,
+                    height: 16,
+                    marginLeft: 10,
+                  }}
+                  source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                />
+              </View>
+              <Typography variant="button-small">
+                {wallets[0]?.balance}
+                {'\n'}
+              </Typography>
+            </View>
+          </View>
+          {showInstallmentLimit && (
+            <View
+              style={{
+                flexDirection: 'row',
+                backgroundColor: '#FFF9C1',
+                width: 360,
+                height: 37,
+              }}
+            >
+              <Image
+                style={{
+                  width: 21,
+                  height: 21,
+                  margin: 8,
+                }}
+                source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/CreditLimit.png')}
+              />
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <Typography variant="caption">Limit angsuran: </Typography>
+                <Typography variant="button-small">
+                  {installmentLimit}
+                </Typography>
+                <Typography variant="caption"> / bulan</Typography>
+                <Image
+                  style={{
+                    width: 21,
+                    height: 21,
+                    marginLeft: 70,
+                  }}
+                  source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                />
+              </View>
+            </View>
+          )}
+        </View>
+      ) : variant === 'singleDisable' ? (
+        <View style={{ flex: 1 }}>
+          <View
+            style={{
+              width: 360,
+              height: 89,
+              flexDirection: 'row',
+              alignItems: 'center',
+              ...Shadow['shadow-elevation-1'],
+            }}
+          >
+            <Image
+              style={{
+                width: 20,
+                height: 20,
+                margin: 8,
+                marginLeft: 20,
+              }}
+              source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/IconAdirapoin.png')}
+            />
+            <View>
+              <View style={{ flexDirection: 'row' }}>
+                <Typography variant="caption">
+                  {wallets[0]?.adirapoin}
+                </Typography>
+                <Image
+                  style={{
+                    width: 16,
+                    height: 16,
+                    marginLeft: 10,
+                    marginRight: 50,
+                  }}
+                  source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                />
+              </View>
+              <Typography variant="button-small">
+                {wallets[0]?.points} poin
+              </Typography>
+            </View>
+            <Divider
+              orientation="vertical"
+              style={{ marginHorizontal: 10, height: 38 }}
+            />
+            <View
+              style={{
+                width: 140,
+                height: 57,
+                backgroundColor: '#EEF0F2',
+                borderRadius: Radius[12],
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}
+            >
+              <Image
+                style={{
+                  width: 20,
+                  height: 20,
+                  margin: 8,
+                }}
+                source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/IconDwallet.png')}
+              />
+              <View>
+                <View style={{ flexDirection: 'row' }}>
+                  <Typography variant="caption">
+                    {wallets[0]?.payment}
+                  </Typography>
+                  <Image
+                    style={{
+                      width: 16,
+                      height: 16,
+                      marginLeft: 10,
+                    }}
+                    source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                  />
+                </View>
+                <Typography variant="button-small">
+                  {wallets[0]?.balance}
+                  {'\n'}
+                </Typography>
+              </View>
+            </View>
+          </View>
+          {showInstallmentLimit && (
+            <View
+              style={{
+                flexDirection: 'row',
+                backgroundColor: '#FFF9C1',
+                width: 360,
+                height: 37,
+              }}
+            >
+              <Image
+                style={{
+                  width: 21,
+                  height: 21,
+                  margin: 8,
+                }}
+                source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/CreditLimit.png')}
+              />
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <Typography variant="caption">Limit angsuran: </Typography>
+                <Typography variant="button-small">
+                  {installmentLimit}
+                </Typography>
+                <Typography variant="caption"> / bulan</Typography>
+                <Image
+                  style={{
+                    width: 21,
+                    height: 21,
+                    marginLeft: 70,
+                  }}
+                  source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                />
+              </View>
+            </View>
+          )}
+        </View>
+      ) : variant === 'multiple' ? (
+        <View style={{ flex: 1 }}>
+          <View
+            style={{
+              width: 360,
+              height: 89,
+              flexDirection: 'row',
+              alignItems: 'center',
+              ...Shadow['shadow-elevation-1'],
+            }}
+          >
+            <Image
+              style={{
+                width: 20,
+                height: 20,
+                margin: 8,
+                marginLeft: 20,
+              }}
+              source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/IconAdirapoin.png')}
+            />
+            <View>
+              <View style={{ flexDirection: 'row' }}>
+                <Typography variant="caption">
+                  {wallets[0]?.adirapoin}
+                </Typography>
+                <Image
+                  style={{
+                    width: 16,
+                    height: 16,
+                    marginLeft: 10,
+                    marginRight: 50,
+                  }}
+                  source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                />
+              </View>
+              <Typography variant="button-small">
+                {wallets[0]?.points} poin
+              </Typography>
+            </View>
+            <Divider
+              orientation="vertical"
+              style={{ marginHorizontal: 10, height: 38 }}
+            />
+            <ScrollView>
+              <View style={{ flexDirection: 'row', height: 59 }}>
+                <TouchableOpacity
+                  style={{
+                    width: 140,
+                    height: 57,
+                    ...Shadow['shadow-elevation-1'],
+                    borderRadius: Radius[12],
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    marginRight: 7,
+                  }}
+                >
+                  <Image
+                    style={{
+                      width: 20,
+                      height: 20,
+                      margin: 8,
+                    }}
+                    source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/IconDwallet.png')}
+                  />
+                  <View>
+                    <View style={{ flexDirection: 'row' }}>
+                      <Typography variant="caption">
+                        {wallets[0]?.payment}
+                      </Typography>
+                      <Image
+                        style={{
+                          width: 16,
+                          height: 16,
+                          marginLeft: 10,
+                        }}
+                        source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                      />
+                    </View>
+                    <Typography variant="button-small">
+                      {wallets[0]?.balance}
+                      {'\n'}
+                    </Typography>
+                  </View>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={{
+                    width: 140,
+                    height: 57,
+                    ...Shadow['shadow-elevation-1'],
+                    borderRadius: Radius[12],
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  }}
+                >
+                  <Image
+                    style={{
+                      width: 20,
+                      height: 20,
+                      margin: 8,
+                    }}
+                    source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/IconDwallet.png')}
+                  />
+                  <View>
+                    <View style={{ flexDirection: 'row' }}>
+                      <Typography variant="caption">
+                        {wallets[0]?.payment}
+                      </Typography>
+                      <Image
+                        style={{
+                          width: 16,
+                          height: 16,
+                          marginLeft: 10,
+                        }}
+                        source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                      />
+                    </View>
+                    <Typography variant="button-small">
+                      {wallets[0]?.balance}
+                      {'\n'}
+                    </Typography>
+                  </View>
+                </TouchableOpacity>
+              </View>
+            </ScrollView>
+          </View>
+          {showInstallmentLimit && (
+            <View
+              style={{
+                flexDirection: 'row',
+                backgroundColor: '#FFF9C1',
+                width: 360,
+                height: 37,
+              }}
+            >
+              <Image
+                style={{
+                  width: 21,
+                  height: 21,
+                  margin: 8,
+                }}
+                source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/CreditLimit.png')}
+              />
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <Typography variant="caption">Limit angsuran: </Typography>
+                <Typography variant="button-small">
+                  {installmentLimit}
+                </Typography>
+                <Typography variant="caption"> / bulan</Typography>
+                <Image
+                  style={{
+                    width: 21,
+                    height: 21,
+                    marginLeft: 70,
+                  }}
+                  source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                />
+              </View>
+            </View>
+          )}
+        </View>
+      ) : (
+        <View style={{ flex: 1 }}>
+          <View
+            style={{
+              width: 360,
+              height: 89,
+              flexDirection: 'row',
+              alignItems: 'center',
+              ...Shadow['shadow-elevation-1'],
+            }}
+          >
+            <Image
+              style={{
+                width: 20,
+                height: 20,
+                margin: 8,
+                marginLeft: 20,
+              }}
+              source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/IconAdirapoin.png')}
+            />
+            <View>
+              <View style={{ flexDirection: 'row' }}>
+                <Typography variant="caption">
+                  {wallets[0]?.adirapoin}
+                </Typography>
+                <Image
+                  style={{
+                    width: 16,
+                    height: 16,
+                    marginLeft: 10,
+                    marginRight: 50,
+                  }}
+                  source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                />
+              </View>
+              <Typography variant="button-small">
+                {wallets[0]?.points} poin
+              </Typography>
+            </View>
+            <Divider
+              orientation="vertical"
+              style={{ marginHorizontal: 10, height: 38 }}
+            />
+            <ScrollView>
+              <View style={{ flexDirection: 'row', height: 59 }}>
+                <TouchableOpacity
+                  style={{
+                    width: 140,
+                    height: 57,
+                    ...Shadow['shadow-elevation-1'],
+                    borderRadius: Radius[12],
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: '#EEF0F2',
+                    marginRight: 7,
+                  }}
+                >
+                  <Image
+                    style={{
+                      width: 20,
+                      height: 20,
+                      margin: 8,
+                    }}
+                    source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/IconDwallet.png')}
+                  />
+                  <View>
+                    <View style={{ flexDirection: 'row' }}>
+                      <Typography variant="caption">
+                        {wallets[0]?.payment}
+                      </Typography>
+                      <Image
+                        style={{
+                          width: 16,
+                          height: 16,
+                          marginLeft: 10,
+                        }}
+                        source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                      />
+                    </View>
+                    <Typography variant="button-small">
+                      {wallets[0]?.balance}
+                      {'\n'}
+                    </Typography>
+                  </View>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={{
+                    width: 140,
+                    height: 57,
+                    ...Shadow['shadow-elevation-1'],
+                    borderRadius: Radius[12],
+                    flexDirection: 'row',
+                    backgroundColor: '#EEF0F2',
+                    alignItems: 'center',
+                  }}
+                >
+                  <Image
+                    style={{
+                      width: 20,
+                      height: 20,
+                      margin: 8,
+                    }}
+                    source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/IconDwallet.png')}
+                  />
+                  <View>
+                    <View style={{ flexDirection: 'row' }}>
+                      <Typography variant="caption">
+                        {wallets[0]?.payment}
+                      </Typography>
+                      <Image
+                        style={{
+                          width: 16,
+                          height: 16,
+                          marginLeft: 10,
+                        }}
+                        source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                      />
+                    </View>
+                    <Typography variant="button-small">
+                      {wallets[0]?.balance}
+                      {'\n'}
+                    </Typography>
+                  </View>
+                </TouchableOpacity>
+              </View>
+            </ScrollView>
+          </View>
+          {showInstallmentLimit && (
+            <View
+              style={{
+                flexDirection: 'row',
+                backgroundColor: '#FFF9C1',
+                width: 360,
+                height: 37,
+              }}
+            >
+              <Image
+                style={{
+                  width: 21,
+                  height: 21,
+                  margin: 8,
+                }}
+                source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/CreditLimit.png')}
+              />
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <Typography variant="caption">Limit angsuran: </Typography>
+                <Typography variant="button-small">
+                  {installmentLimit}
+                </Typography>
+                <Typography variant="caption"> / bulan</Typography>
+                <Image
+                  style={{
+                    width: 21,
+                    height: 21,
+                    marginLeft: 70,
+                  }}
+                  source={require('../../../storybookwebpreview/assets/images/DashboardBalanceCard/Navigation.png')}
+                />
+              </View>
+            </View>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default DashboardBalanceCard;

package/src/components/FilterList/FilterList.component.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, TouchableHighlight } from 'react-native';
+
+import { Typography } from '../typography/typography.component';
+import { getStyle } from './FilterList.style';
+
+import type { FilterListProps } from './FilterList.type';
+import { Palettes } from '../../themes';
+
+const FilterList: React.FC<FilterListProps> = (props) => {
+  const {
+    onPress = () => {},
+    title,
+    description,
+    textStyles,
+    disabled = false,
+    leadingComponent,
+    trailingComponent,
+    containerStyle,
+    ...rest
+  } = props;
+
+  const computedStyle = getStyle({
+    ...props,
+  });
+
+  return (
+    <TouchableHighlight
+      onPress={onPress}
+      disabled={disabled}
+      {...rest}
+      underlayColor={Palettes.grey[50]}
+    >
+      <View style={[computedStyle.container, containerStyle]}>
+        {leadingComponent && (
+          <View style={computedStyle.leadingWrapper}>{leadingComponent}</View>
+        )}
+        <View style={computedStyle.textContainer}>
+          <Typography
+            variant={'subtitle2'}
+            textStyles={{ ...computedStyle.title, ...textStyles }}
+          >
+            {title}
+          </Typography>
+          <Typography
+            variant={'body2'}
+            textStyles={{ ...computedStyle.description, ...textStyles }}
+          >
+            {description}
+          </Typography>
+        </View>
+        {trailingComponent && (
+          <View style={computedStyle.trailingWrapper}>{trailingComponent}</View>
+        )}
+      </View>
+    </TouchableHighlight>
+  );
+};
+
+export { FilterList };

package/src/components/FilterList/FilterList.style.tsx

@@ -0,0 +1,64 @@
+import type { TextStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Palettes, Spacing } from '../../themes';
+import type { FilterListProps } from './FilterList.type';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  title?: TextStyle;
+  description?: TextStyle;
+  textContainer?: TextStyle;
+  leadingWrapper?: ViewStyle;
+  trailingWrapper?: ViewStyle;
+}
+
+export const getStyle = (props: FilterListProps) => {
+  const { disabled, isLast } = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    paddingVertical: 16,
+    paddingHorizontal: disabled ? 16 : 0,
+    borderBottomColor: Palettes.grey[50],
+    borderBottomWidth: disabled || isLast ? 0 : 6,
+    backgroundColor: disabled ? Palettes.grey[50] : 'transparent',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: '100%',
+    minWidth: 350,
+  };
+  computedStyle.title = {
+    fontWeight: '600',
+    fontSize: 14,
+    lineHeight: 21,
+    color: disabled ? Palettes.grey[500] : Palettes.black[900],
+  };
+  computedStyle.description = {
+    fontWeight: '400',
+    fontSize: 14,
+    lineHeight: 21,
+    color: disabled ? Palettes.grey[500] : Palettes.black[900],
+  };
+
+  computedStyle.textContainer = {
+    alignItems: 'flex-start',
+    flex: 1,
+  };
+
+  computedStyle.leadingWrapper = {
+    marginRight: Spacing[16],
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  computedStyle.trailingWrapper = {
+    marginLeft: Spacing[16],
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  return StyleSheet.create(computedStyle);
+};