@adiraku/react-native-ui 1.2.3-snapshot.5 → 1.2.3-snapshot.6

package/src/components/StepperCounter/StepperCounter.component.tsx

@@ -1,111 +1,111 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import { getStyle } from './StepperCounter.style';
-import type { StepperCounterProps } from './StepperCounter.type';
-import { Typography } from '../typography/typography.component';
-import { LayoutChangeEvent } from 'react-native';
-
-const StepperCounter: React.FunctionComponent<StepperCounterProps> = (
-  props
-) => {
-  const {
-    labels = [],
-    activeStepIndex = 0,
-    activeStepIndicator = null,
-  } = props;
-
-  const [firstItemWidth, setFirstItemWidth] = React.useState(0);
-  const [lastItemWidth, setLastItemWidth] = React.useState(0);
-
-  const computedStyle = getStyle();
-
-  const getFirstAndLastWidthItem = (event: LayoutChangeEvent, idx: number) => {
-    const { width } = event.nativeEvent.layout;
-    if (idx === 0) {
-      setFirstItemWidth(width);
-    } else if (idx === labels.length - 1) {
-      setLastItemWidth(width);
-    }
-  };
-
-  const isCurrentStep = (idx: number) => {
-    return idx === activeStepIndex;
-  };
-
-  const isBeforeStep = (idx: number) => {
-    return idx < activeStepIndex;
-  };
-
-  const isAfterStep = (idx: number) => {
-    return idx > activeStepIndex;
-  };
-
-  const getStepNumber = (idx: number) => {
-    return idx.toLocaleString('en-US', {
-      minimumIntegerDigits: 2,
-      useGrouping: false,
-    });
-  };
-
-  return (
-    <View style={computedStyle.container}>
-      <View
-        style={[
-          computedStyle.lineContainer,
-          {
-            paddingLeft: firstItemWidth / 2,
-            paddingRight: lastItemWidth / 2,
-          },
-        ]}
-      >
-        {labels.length > 0 &&
-          [...Array(labels.length - 1)].map((_, idx) => (
-            <View
-              style={[
-                computedStyle.stepLine,
-                idx <= activeStepIndex - 1 && computedStyle.stepLineActive,
-              ]}
-            />
-          ))}
-      </View>
-      <View style={computedStyle.stepItemContainer}>
-        {labels.map((label, idx) => (
-          <View
-            style={computedStyle.stepItemWrapper}
-            onLayout={(event) => getFirstAndLastWidthItem(event, idx)}
-          >
-            <View
-              style={[
-                computedStyle.stepItem,
-                isCurrentStep(idx) && computedStyle.stepItemActive,
-                isAfterStep(idx) && computedStyle.stepItemInactive,
-              ]}
-            >
-              {isBeforeStep(idx) ? (
-                activeStepIndicator
-              ) : (
-                <Typography
-                  variant="caption2"
-                  style={[
-                    computedStyle.stepItemNumberActive,
-                    isAfterStep(idx) && computedStyle.stepItemNumberInactive,
-                  ]}
-                >
-                  {getStepNumber(idx + 1)}
-                </Typography>
-              )}
-            </View>
-            <Typography
-              variant="overline"
-              style={[isAfterStep(idx) && computedStyle.labelInactive]}
-            >
-              {label}
-            </Typography>
-          </View>
-        ))}
-      </View>
-    </View>
-  );
-};
-
-export { StepperCounter };
+import * as React from 'react';
+import { View } from 'react-native';
+import { getStyle } from './StepperCounter.style';
+import type { StepperCounterProps } from './StepperCounter.type';
+import { Typography } from '../typography/typography.component';
+import { LayoutChangeEvent } from 'react-native';
+
+const StepperCounter: React.FunctionComponent<StepperCounterProps> = (
+  props
+) => {
+  const {
+    labels = [],
+    activeStepIndex = 0,
+    activeStepIndicator = null,
+  } = props;
+
+  const [firstItemWidth, setFirstItemWidth] = React.useState(0);
+  const [lastItemWidth, setLastItemWidth] = React.useState(0);
+
+  const computedStyle = getStyle();
+
+  const getFirstAndLastWidthItem = (event: LayoutChangeEvent, idx: number) => {
+    const { width } = event.nativeEvent.layout;
+    if (idx === 0) {
+      setFirstItemWidth(width);
+    } else if (idx === labels.length - 1) {
+      setLastItemWidth(width);
+    }
+  };
+
+  const isCurrentStep = (idx: number) => {
+    return idx === activeStepIndex;
+  };
+
+  const isBeforeStep = (idx: number) => {
+    return idx < activeStepIndex;
+  };
+
+  const isAfterStep = (idx: number) => {
+    return idx > activeStepIndex;
+  };
+
+  const getStepNumber = (idx: number) => {
+    return idx.toLocaleString('en-US', {
+      minimumIntegerDigits: 2,
+      useGrouping: false,
+    });
+  };
+
+  return (
+    <View style={computedStyle.container}>
+      <View
+        style={[
+          computedStyle.lineContainer,
+          {
+            paddingLeft: firstItemWidth / 2,
+            paddingRight: lastItemWidth / 2,
+          },
+        ]}
+      >
+        {labels.length > 0 &&
+          [...Array(labels.length - 1)].map((_, idx) => (
+            <View
+              style={[
+                computedStyle.stepLine,
+                idx <= activeStepIndex - 1 && computedStyle.stepLineActive,
+              ]}
+            />
+          ))}
+      </View>
+      <View style={computedStyle.stepItemContainer}>
+        {labels.map((label, idx) => (
+          <View
+            style={computedStyle.stepItemWrapper}
+            onLayout={(event) => getFirstAndLastWidthItem(event, idx)}
+          >
+            <View
+              style={[
+                computedStyle.stepItem,
+                isCurrentStep(idx) && computedStyle.stepItemActive,
+                isAfterStep(idx) && computedStyle.stepItemInactive,
+              ]}
+            >
+              {isBeforeStep(idx) ? (
+                activeStepIndicator
+              ) : (
+                <Typography
+                  variant="caption2"
+                  style={[
+                    computedStyle.stepItemNumberActive,
+                    isAfterStep(idx) && computedStyle.stepItemNumberInactive,
+                  ]}
+                >
+                  {getStepNumber(idx + 1)}
+                </Typography>
+              )}
+            </View>
+            <Typography
+              variant="overline"
+              style={[isAfterStep(idx) && computedStyle.labelInactive]}
+            >
+              {label}
+            </Typography>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+export { StepperCounter };

package/src/components/StepperCounter/StepperCounter.style.tsx

@@ -1,96 +1,96 @@
-import type { TextStyle } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import { Palettes, Radius, Spacing } from '../../themes';
-
-interface ComputedStyleProps {
-  container?: ViewStyle;
-  lineContainer?: ViewStyle;
-  stepLine?: ViewStyle;
-  stepLineActive?: ViewStyle;
-  stepItemWrapper?: ViewStyle;
-  stepItemContainer?: ViewStyle;
-  stepItem?: ViewStyle;
-  stepItemActive?: ViewStyle;
-  stepItemInactive?: ViewStyle;
-  stepItemNumberActive?: TextStyle;
-  stepItemNumberInactive?: TextStyle;
-  labelInactive?: TextStyle;
-}
-
-export const getStyle = () => {
-  const computedStyle: ComputedStyleProps = {};
-
-  computedStyle.container = {
-    minHeight: 30,
-    borderRadius: 4,
-    width: '100%',
-    flexDirection: 'row',
-  };
-
-  computedStyle.lineContainer = {
-    position: 'absolute',
-    width: '100%',
-    flexDirection: 'row',
-    top: 10,
-  };
-
-  computedStyle.stepLine = {
-    height: 4,
-    flexGrow: 1,
-    backgroundColor: Palettes.grey[50],
-  };
-
-  computedStyle.stepLineActive = {
-    backgroundColor: Palettes.green[700],
-  };
-
-  computedStyle.stepItemContainer = {
-    padding: 0,
-    margin: 0,
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    position: 'absolute',
-  };
-
-  computedStyle.stepItemWrapper = {
-    justifyContent: 'center',
-    alignItems: 'center',
-  };
-
-  computedStyle.stepItem = {
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: 24,
-    width: 24,
-    borderRadius: Radius.full,
-    backgroundColor: Palettes.green[700],
-    borderWidth: 2,
-    borderColor: Palettes.green[700],
-    marginBottom: Spacing[4],
-  };
-
-  computedStyle.stepItemActive = {
-    backgroundColor: Palettes.white[50],
-  };
-
-  computedStyle.stepItemInactive = {
-    backgroundColor: Palettes.grey[50],
-    borderColor: Palettes.grey[50],
-  };
-
-  computedStyle.stepItemNumberActive = {
-    color: Palettes.green[700],
-  };
-
-  computedStyle.stepItemNumberInactive = {
-    color: Palettes.grey[500],
-  };
-
-  computedStyle.labelInactive = {
-    color: Palettes.grey[500],
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import type { TextStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { Palettes, Radius, Spacing } from '../../themes';
+
+interface ComputedStyleProps {
+  container?: ViewStyle;
+  lineContainer?: ViewStyle;
+  stepLine?: ViewStyle;
+  stepLineActive?: ViewStyle;
+  stepItemWrapper?: ViewStyle;
+  stepItemContainer?: ViewStyle;
+  stepItem?: ViewStyle;
+  stepItemActive?: ViewStyle;
+  stepItemInactive?: ViewStyle;
+  stepItemNumberActive?: TextStyle;
+  stepItemNumberInactive?: TextStyle;
+  labelInactive?: TextStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.container = {
+    minHeight: 30,
+    borderRadius: 4,
+    width: '100%',
+    flexDirection: 'row',
+  };
+
+  computedStyle.lineContainer = {
+    position: 'absolute',
+    width: '100%',
+    flexDirection: 'row',
+    top: 10,
+  };
+
+  computedStyle.stepLine = {
+    height: 4,
+    flexGrow: 1,
+    backgroundColor: Palettes.grey[50],
+  };
+
+  computedStyle.stepLineActive = {
+    backgroundColor: Palettes.green[700],
+  };
+
+  computedStyle.stepItemContainer = {
+    padding: 0,
+    margin: 0,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    position: 'absolute',
+  };
+
+  computedStyle.stepItemWrapper = {
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  computedStyle.stepItem = {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 24,
+    width: 24,
+    borderRadius: Radius.full,
+    backgroundColor: Palettes.green[700],
+    borderWidth: 2,
+    borderColor: Palettes.green[700],
+    marginBottom: Spacing[4],
+  };
+
+  computedStyle.stepItemActive = {
+    backgroundColor: Palettes.white[50],
+  };
+
+  computedStyle.stepItemInactive = {
+    backgroundColor: Palettes.grey[50],
+    borderColor: Palettes.grey[50],
+  };
+
+  computedStyle.stepItemNumberActive = {
+    color: Palettes.green[700],
+  };
+
+  computedStyle.stepItemNumberInactive = {
+    color: Palettes.grey[500],
+  };
+
+  computedStyle.labelInactive = {
+    color: Palettes.grey[500],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/StepperCounter/StepperCounter.type.ts

@@ -1,18 +1,18 @@
-import { ReactNode } from 'react';
-
-export interface StepperCounterProps {
-  /**
-   * A list of string that display the StepperCounter component.
-   */
-  labels?: string[];
-
-  /**
-   * Index that represent current active step.
-   */
-  activeStepIndex?: number;
-
-  /**
-   * A component that will be displayed if the step already passed.
-   */
-  activeStepIndicator?: ReactNode;
-}
+import { ReactNode } from 'react';
+
+export interface StepperCounterProps {
+  /**
+   * A list of string that display the StepperCounter component.
+   */
+  labels?: string[];
+
+  /**
+   * Index that represent current active step.
+   */
+  activeStepIndex?: number;
+
+  /**
+   * A component that will be displayed if the step already passed.
+   */
+  activeStepIndicator?: ReactNode;
+}

package/src/components/Tabs/Tabs.component.tsx

@@ -1,94 +1,95 @@
-import * as React from 'react';
-import {
-  Animated,
-  Easing,
-  View,
-  LayoutChangeEvent,
-  TouchableOpacity,
-} from 'react-native';
-
-import { getStyle } from './Tabs.style';
-import { Typography } from '../typography/typography.component';
-
-import type { TabsProps } from './Tabs.type';
-
-type LabelsLayoutType = {
-  [number: string]: number;
-};
-
-const Tabs: React.FunctionComponent<TabsProps> = (props) => {
-  const { labels = [], onTabPress = () => {}, activeIndex = 0 } = props;
-
-  const computedStyle = getStyle();
-
-  const [labelsLayout, setLabelsLayout] = React.useState<LabelsLayoutType>({});
-  const indicatorWidth = React.useState(new Animated.Value(0))[0];
-  const indicatorOffsetX = React.useState(new Animated.Value(0))[0];
-
-  React.useEffect(() => {
-    const getActiveIndex = () => {
-      if (activeIndex < 0) {
-        return 0;
-      } else if (activeIndex > labels.length - 1) {
-        return labels.length - 1;
-      } else {
-        return activeIndex;
-      }
-    };
-
-    if (Object.keys(labelsLayout).length !== 0) {
-      const currentActiveIndex = getActiveIndex();
-      let indicatorOffset = 0;
-      for (let i = 0; i < currentActiveIndex; i++) {
-        indicatorOffset += labelsLayout[i] ?? 0;
-      }
-
-      const updatedWith = labelsLayout[currentActiveIndex] ?? 0;
-      Animated.timing(indicatorOffsetX, {
-        toValue: indicatorOffset,
-        easing: Easing.ease,
-        useNativeDriver: false,
-        duration: 300,
-      }).start();
-      Animated.timing(indicatorWidth, {
-        toValue: updatedWith,
-        easing: Easing.ease,
-        useNativeDriver: false,
-        duration: 300,
-      }).start();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeIndex, labels, labelsLayout]);
-
-  const onLayout = (event: LayoutChangeEvent, idx: number) => {
-    const { width } = event.nativeEvent.layout;
-    setLabelsLayout({
-      ...labelsLayout,
-      [idx]: width,
-    });
-  };
-
-  return (
-    <View style={[computedStyle.container]}>
-      {labels.map((label, idx) => (
-        <TouchableOpacity
-          onPress={() => onTabPress(idx)}
-          style={[computedStyle.tabContainer]}
-          onLayout={(event) => onLayout(event, idx)}
-        >
-          <Typography key={idx} variant="subtitle2">
-            {label}
-          </Typography>
-        </TouchableOpacity>
-      ))}
-      <Animated.View
-        style={[
-          computedStyle.bottomMarker,
-          { width: indicatorWidth, left: indicatorOffsetX },
-        ]}
-      />
-    </View>
-  );
-};
-
-export { Tabs };
+import * as React from 'react';
+import {
+  Animated,
+  Easing,
+  View,
+  LayoutChangeEvent,
+  TouchableOpacity,
+} from 'react-native';
+
+import { getStyle } from './Tabs.style';
+import { Typography } from '../typography/typography.component';
+
+import type { TabsProps } from './Tabs.type';
+
+type LabelsLayoutType = {
+  [number: string]: number;
+};
+
+const Tabs: React.FunctionComponent<TabsProps> = (props) => {
+  const { labels = [], onTabPress = () => {}, activeIndex = 0 } = props;
+
+  const computedStyle = getStyle();
+
+  const [labelsLayout, setLabelsLayout] = React.useState<LabelsLayoutType>({});
+  const indicatorWidth = React.useState(new Animated.Value(0))[0];
+  const indicatorOffsetX = React.useState(new Animated.Value(0))[0];
+
+  React.useEffect(() => {
+    const getActiveIndex = () => {
+      if (activeIndex < 0) {
+        return 0;
+      } else if (activeIndex > labels.length - 1) {
+        return labels.length - 1;
+      } else {
+        return activeIndex;
+      }
+    };
+
+    if (Object.keys(labelsLayout).length !== 0) {
+      const currentActiveIndex = getActiveIndex();
+      let indicatorOffset = 0;
+      for (let i = 0; i < currentActiveIndex; i++) {
+        indicatorOffset += labelsLayout[i] ?? 0;
+      }
+
+      const updatedWith = labelsLayout[currentActiveIndex] ?? 0;
+      Animated.timing(indicatorOffsetX, {
+        toValue: indicatorOffset,
+        easing: Easing.ease,
+        useNativeDriver: false,
+        duration: 300,
+      }).start();
+      Animated.timing(indicatorWidth, {
+        toValue: updatedWith,
+        easing: Easing.ease,
+        useNativeDriver: false,
+        duration: 300,
+      }).start();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeIndex, labels, labelsLayout]);
+
+  const onLayout = (event: LayoutChangeEvent, idx: number) => {
+    const { width } = event.nativeEvent.layout;
+    setLabelsLayout({
+      ...labelsLayout,
+      [idx]: width,
+    });
+  };
+
+  return (
+    <View style={[computedStyle.container]}>
+      {labels.map((label, idx) => (
+        <TouchableOpacity
+          key={idx}
+          onPress={() => onTabPress(idx)}
+          style={[computedStyle.tabContainer]}
+          onLayout={(event) => onLayout(event, idx)}
+        >
+          <Typography key={idx} variant="subtitle2">
+            {label}
+          </Typography>
+        </TouchableOpacity>
+      ))}
+      <Animated.View
+        style={[
+          computedStyle.bottomMarker,
+          { width: indicatorWidth, left: indicatorOffsetX },
+        ]}
+      />
+    </View>
+  );
+};
+
+export { Tabs };