@cleartrip/ct-design-nav-tabs 4.0.0 → 5.1.0

package/package.json

@@ -1,35 +1,50 @@
 {
   "name": "@cleartrip/ct-design-nav-tabs",
-  "version": "4.0.0",
+  "version": "5.1.0",
   "description": "NavTabs Component",
   "types": "dist/index.d.ts",
-  "main": "dist/ct-design-nav-tabs.cjs.js",
+  "main": "./dist/ct-design-nav-tabs.cjs.js",
   "jsnext:main": "dist/ct-design-nav-tabs.esm.js",
   "module": "dist/ct-design-nav-tabs.esm.js",
+  "react-native": "src/index.ts",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ct-design-nav-tabs.esm.js",
+      "default": "./dist/ct-design-nav-tabs.cjs.js"
+    }
+  },
   "browser": {
     "./dist/ct-design-nav-tabs.esm.js": "./dist/ct-design-nav-tabs.browser.esm.js",
     "./dist/ct-design-nav-tabs.cjs.js": "./dist/ct-design-nav-tabs.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-tokens": "4.0.0",
-    "@cleartrip/ct-design-theme": "4.0.0",
-    "@cleartrip/ct-design-types": "4.0.0",
-    "@cleartrip/ct-design-container": "4.0.0",
-    "@cleartrip/ct-design-typography": "4.0.0",
-    "@cleartrip/ct-design-chip": "4.0.0",
-    "@cleartrip/ct-design-horizontal-scroll": "4.0.0"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@cleartrip/ct-design-tokens": "5.1.0",
+    "@cleartrip/ct-design-theme": "5.1.0",
+    "@cleartrip/ct-design-types": "5.1.0",
+    "@cleartrip/ct-design-container": "5.1.0",
+    "@cleartrip/ct-design-typography": "5.1.0",
+    "@cleartrip/ct-design-chip": "5.1.0",
+    "@cleartrip/ct-design-id-container": "5.1.0",
+    "@cleartrip/ct-design-style-manager": "5.1.0",
+    "@cleartrip/ct-design-scroll-container": "5.1.0",
+    "@cleartrip/ct-design-horizontal-scroll": "5.1.0",
+    "@cleartrip/ct-design-use-merge-refs": "5.1.0"
   },
   "devDependencies": {
-    "@cleartrip/ct-design-icons": "26.0.0"
+    "@emotion/babel-plugin": "^11.12.0",
+    "@cleartrip/ct-design-icons": "6.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "styled-components": "^5.3.6"
+    "react-dom": ">=16.8.0"
   },
   "publishConfig": {
     "access": "public"
@@ -40,6 +55,8 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch-package": "rollup -c -w",
     "build-package": "rollup -c",
-    "build-package:clean": "rm -rf dist && rollup -c"
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish --no-scripts",
+    "publish-package:local:registry": "pnpm publish --registry http://localhost:4873 --no-git-checks --access public"
   }
 }

package/src/FlatTab/FlatTab.tsx

@@ -0,0 +1,163 @@
+import { useTheme } from '@cleartrip/ct-design-theme';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { Container } from '@cleartrip/ct-design-container';
+import { Typography } from '@cleartrip/ct-design-typography';
+import { TypographyColor } from '@cleartrip/ct-design-typography';
+import { IDContainer } from '@cleartrip/ct-design-id-container';
+
+import { FlatTabProps } from './type';
+import { TabSize, IconPosition } from './type';
+import { getLabelVariant, getTabLabelColor, getTabStyles } from './style';
+import FlatTabContainer from './FlatTabContainer';
+
+const styles = makeStyles((theme) => {
+  return {
+    root: {
+      position: 'relative',
+    },
+    tabContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    iconContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    countContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginLeft: theme.spacing[1],
+      marginRight: theme.spacing[1],
+      height: theme.size[4],
+      width: theme.size[4],
+    },
+    countSubContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: theme.spacing['0.5'],
+      width: '100%',
+      borderRadius: theme.border.radius[32],
+    },
+    pr2: {
+      paddingRight: theme.spacing[2],
+    },
+    pl2: {
+      paddingLeft: theme.spacing[2],
+    },
+  };
+});
+
+const FlatTab: React.FC<FlatTabProps> = ({
+  label,
+  size = TabSize.SMALL,
+  showIcon = false,
+  iconPosition = IconPosition.LEFT,
+  Icon = undefined,
+  showCounter = false,
+  count = -1,
+  isSelected = false,
+  onClick,
+  tabWidth,
+  counterBgColor,
+  nonSelectedCounterBgColor,
+  styleConfig = {},
+  id,
+  onLayout,
+  hideBottomBorder = false,
+}) => {
+  const theme = useTheme();
+  const {
+    containerWrapper: customContainerWrapper = [],
+    countContainer: customCountContainer = [],
+    countSubContainer: customCountSubContainer = [],
+    countTypography: customCountTypographyStyles = [],
+    iconContainer: customIconContainerStyles = [],
+    labelTypography: customLabelStyles = [],
+    root: customRootStyles = [],
+    tabContainer: customTabContainer = [],
+    selectedRoot: customSelectedTab = [],
+  } = styleConfig;
+  const tabStyles = getTabStyles({ isSelected, theme, tabWidth });
+  const showCountPill = showCounter && count > 0;
+
+  const dynmaicStyles = useStyles(() => {
+    return {
+      countSubContainer: {
+        backgroundColor: isSelected ? counterBgColor : nonSelectedCounterBgColor,
+      },
+    };
+  }, [isSelected]);
+
+  const renderLabelComponent = () => {
+    if (typeof label === 'string') {
+      return (
+        <Typography
+          variant={getLabelVariant({ size })}
+          colorCode={getTabLabelColor({ isSelected, theme })}
+          styleConfig={{ root: customLabelStyles }}
+        >
+          {label}
+        </Typography>
+      );
+    }
+    return label;
+  };
+
+  return (
+    <IDContainer id={id} onLayout={onLayout}>
+      <Container
+        onClick={onClick}
+        id={id}
+        styleConfig={{ root: [styles.root, ...customRootStyles, ...(isSelected ? customSelectedTab : [])] }}
+      >
+        <FlatTabContainer
+          width={tabStyles?.width}
+          borderBottomWidth={hideBottomBorder ? 0 : tabStyles?.borderBottomWidth}
+          borderBottomColor={hideBottomBorder ? 'transparent' : tabStyles?.borderBottomColor}
+          rootStyles={customContainerWrapper}
+        >
+          <Container
+            styleConfig={{
+              root: [styles.tabContainer, ...customTabContainer],
+            }}
+          >
+            {Icon && showIcon && iconPosition === IconPosition.LEFT && (
+              <Container styleConfig={{ root: [styles.iconContainer, styles.pr2, ...customIconContainerStyles] }}>
+                {Icon}
+              </Container>
+            )}
+            {renderLabelComponent()}
+            {Icon && showIcon && iconPosition === IconPosition.RIGHT && (
+              <Container styleConfig={{ root: [styles.iconContainer, styles.pl2, ...customIconContainerStyles] }}>
+                {Icon}
+              </Container>
+            )}
+            {showCountPill && (
+              <Container styleConfig={{ root: [styles.countContainer, ...customCountContainer] }}>
+                <Container
+                  styleConfig={{
+                    root: [styles.countSubContainer, dynmaicStyles.countSubContainer, ...customCountSubContainer],
+                  }}
+                >
+                  <Typography
+                    variant={'TAG'}
+                    color={TypographyColor.NEUTRAL}
+                    styleConfig={{ root: customCountTypographyStyles }}
+                  >
+                    {count}
+                  </Typography>
+                </Container>
+              </Container>
+            )}
+          </Container>
+        </FlatTabContainer>
+      </Container>
+    </IDContainer>
+  );
+};
+
+export default FlatTab;

package/src/FlatTab/FlatTabContainer/index.tsx

@@ -0,0 +1,43 @@
+import { Styles } from '@cleartrip/ct-design-types';
+import { Container } from '@cleartrip/ct-design-container';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+
+import { StyledFlatTabProps } from './type';
+
+const styles = makeStyles((theme) => {
+  return {
+    root: {
+      padding: theme.spacing[2],
+      flexDirection: 'row',
+      alignTtems: 'center',
+      justifyContent: 'center',
+      whiteSpace: 'nowrap',
+    },
+  };
+});
+
+const FlatTabContainer: React.FC<StyledFlatTabProps & { rootStyles: Styles[] }> = ({
+  width,
+  borderBottomColor,
+  borderBottomWidth,
+  children,
+  rootStyles: customRootStyles = [],
+}) => {
+  const dynamicStyles = useStyles(
+    (_) => {
+      return {
+        root: {
+          width: width,
+          borderBottomWidth: borderBottomWidth,
+          borderBottomColor: borderBottomColor,
+        },
+      };
+    },
+    [borderBottomColor, borderBottomWidth, width],
+  );
+  return (
+    <Container styleConfig={{ root: [styles.root, dynamicStyles.root, ...customRootStyles] }}>{children}</Container>
+  );
+};
+
+export default FlatTabContainer;

package/src/FlatTab/FlatTabContainer/type.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface StyledFlatTabProps {
+  borderBottomWidth?: number;
+  borderBottomColor?: string;
+  width?: number | '100%' | 'auto';
+  children?: ReactNode;
+}

package/src/FlatTab/style.ts

@@ -0,0 +1,53 @@
+import { TypographyVariant } from '@cleartrip/ct-design-typography';
+import { Theme } from '@cleartrip/ct-design-theme';
+
+import { TabSize, TabSizeType } from './type';
+
+export const getLabelVariant = ({ size }: { size: TabSizeType }) => {
+  switch (size) {
+    case TabSize.SMALL: {
+      return TypographyVariant.B2;
+    }
+    case TabSize.MEDIUM: {
+      return TypographyVariant.B1;
+    }
+    case TabSize.LARGE: {
+      return TypographyVariant.B1;
+    }
+    default: {
+      return TypographyVariant.B2;
+    }
+  }
+};
+
+export const getTabLabelColor = ({ isSelected, theme }: { isSelected: boolean; theme: Theme }) => {
+  if (isSelected) {
+    return theme.color.tab.selectedPrimaryLabel;
+  } else {
+    return theme.color.tab.nonSelectedPrimaryLabel;
+  }
+};
+
+export const getTabStyles = ({
+  isSelected,
+  theme,
+  tabWidth,
+}: {
+  isSelected: boolean;
+  theme: Theme;
+  tabWidth?: number | 'auto';
+}) => {
+  if (isSelected) {
+    return {
+      borderBottomColor: theme.color.border.primary,
+      borderBottomWidth: theme.border.width.lg,
+      width: tabWidth || 'auto',
+    };
+  } else {
+    return {
+      borderBottomWidth: theme.border.width.lg,
+      width: tabWidth || 'auto',
+      borderBottomColor: theme.color.border.neutral100,
+    };
+  }
+};

package/src/FlatTab/type.ts

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+
+import { Styles, TextStyle } from '@cleartrip/ct-design-types';
+
+export const enum IconPosition {
+  LEFT = 'left',
+  RIGHT = 'right',
+  TOP = 'top',
+}
+
+/** Available tab size variants */
+export enum TabSize {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+}
+
+/** String literal type for tab sizes */
+export type TabSizeType = `${TabSize}`;
+
+export interface FlatTabStyleConfigProps {
+  root?: Styles[];
+  containerWrapper?: Styles[];
+  tabContainer?: Styles[];
+  iconContainer?: Styles[];
+  labelTypography?: TextStyle[];
+  countContainer?: Styles[];
+  countSubContainer?: Styles[];
+  countTypography?: TextStyle[];
+  selectedRoot?: Styles[];
+}
+
+export interface FlatTabProps {
+  size?: TabSizeType;
+  label: string;
+  showIcon?: boolean;
+  iconPosition?: `${IconPosition}`;
+  Icon?: ReactNode;
+  showCounter?: boolean;
+  count?: number;
+  isSelected?: boolean;
+  onClick: () => void;
+  tabWidth?: number | 'auto';
+  counterBgColor?: string;
+  nonSelectedCounterBgColor?: string;
+  styleConfig?: FlatTabStyleConfigProps;
+  id?: string;
+  onLayout?: (event: {
+    layout: {
+      height: number;
+      width: number;
+      x: number;
+      y: number;
+    };
+  }) => void;
+  hideBottomBorder?: boolean;
+}

package/src/Tab.native.tsx

@@ -0,0 +1,270 @@
+import { forwardRef, useCallback, useEffect, useRef } from 'react';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+
+import { IconPosition } from '@cleartrip/ct-design-types';
+import { useTheme } from '@cleartrip/ct-design-theme';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { Container } from '@cleartrip/ct-design-container';
+import { HorizontalScroll } from '@cleartrip/ct-design-horizontal-scroll';
+import { Chip } from '@cleartrip/ct-design-chip';
+
+import { getTabContainerStyles } from './style';
+import TabContainer from './TabContainer/TabContainer';
+import FlatTab from './FlatTab/FlatTab';
+import { NavTabsProps } from './type';
+import { TabVariants } from './constants';
+import { ScrollContainerRef } from '@cleartrip/ct-design-scroll-container';
+import { TabSize } from './FlatTab/type';
+
+const SCROLL_PADDING = 32;
+
+const staticStyles = makeStyles((theme) => ({
+  scrollContainer: {
+    backgroundColor: 'white',
+  },
+  root: {
+    width: '100%',
+  },
+  indicator: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    height: theme.border.width.lg,
+    backgroundColor: theme.color.border.primary,
+  },
+}));
+
+const NavTabs = forwardRef<ScrollContainerRef, NavTabsProps>(
+  ({
+    tabType = TabVariants.FLAT,
+    tabList,
+    selectedTab,
+    showIcon = false,
+    tabGap,
+    onClick,
+    iconPosition = IconPosition.LEFT,
+    tabSize = TabSize.SMALL,
+    showCounter = false,
+    counterBgColor,
+    nonSelectedCounterBgColor,
+    containerSpace,
+    tabWidth,
+    showBottomBorder = true,
+    styleConfig = {},
+    navTabsIdPrefix = '',
+    rootProps,
+  }) => {
+    const theme = useTheme();
+    const { chip, container = [], flatTab, root, tabContainer = [], tabTypeContainer = [] } = styleConfig;
+    const showBottomLine = showBottomBorder && tabType === TabVariants.FLAT;
+    const tabContainerStyles = getTabContainerStyles({ showBottomLine, theme });
+
+    const _counterBgColor = counterBgColor || theme.color.background.link2;
+    const _nonSelectedCounterBgColor = nonSelectedCounterBgColor || theme.color.background.defaultDark;
+
+    // Layout and scroll state
+    const tabPositionsRef = useRef<Array<{ x: number; width: number } | undefined>>([]);
+    const containerWidthRef = useRef(0);
+    const scrollOffsetRef = useRef(0);
+    const prevScrollXRef = useRef(0);
+    const isAutoScrollingRef = useRef(false);
+    const internalScrollRef = useRef<ScrollContainerRef>(null);
+    const scrollEndTimerRef = useRef<NodeJS.Timeout>(undefined);
+
+    // Reanimated shared values for the sliding indicator (both run on UI thread)
+    const indicatorX = useSharedValue(0);
+    const indicatorWidth = useSharedValue(0);
+    const indicatorOpacity = useSharedValue(0);
+
+    // Keep effective padding current without re-creating callbacks
+    const effectivePaddingRef = useRef(containerSpace ?? theme.spacing[4]);
+    effectivePaddingRef.current = containerSpace ?? theme.spacing[4];
+
+    const easeInConfig = { duration: 250, easing: Easing.in(Easing.cubic) };
+
+    const animateIndicatorToIndex = useCallback(
+      (index: number) => {
+        const pos = tabPositionsRef.current[index];
+        if (!pos) return;
+        indicatorX.value = withTiming(effectivePaddingRef.current + pos.x, easeInConfig);
+        indicatorWidth.value = withTiming(pos.width, easeInConfig);
+        if (indicatorOpacity.value === 0) {
+          indicatorOpacity.value = withTiming(1, { duration: 150 });
+        }
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [indicatorX, indicatorWidth, indicatorOpacity],
+    );
+
+    const indicatorStyle = useAnimatedStyle(() => ({
+      transform: [{ translateX: indicatorX.value - 16 }],
+      width: indicatorWidth.value,
+      opacity: indicatorOpacity.value,
+    }));
+
+    // Auto-scroll selected tab into view and animate the indicator
+    useEffect(() => {
+      if (!selectedTab) return;
+      const index = tabList.findIndex((t) => t.id === selectedTab);
+      if (index < 0) return;
+
+      animateIndicatorToIndex(index);
+
+      const pos = tabPositionsRef.current[index];
+      if (!pos || containerWidthRef.current === 0) return;
+
+      const absoluteX = effectivePaddingRef.current + pos.x;
+      const scrollX = scrollOffsetRef.current;
+      const visibleWidth = containerWidthRef.current;
+
+      if (absoluteX < scrollX + SCROLL_PADDING) {
+        isAutoScrollingRef.current = true;
+        internalScrollRef.current?.scrollTo?.(Math.max(0, absoluteX - SCROLL_PADDING), 0);
+        setTimeout(() => {
+          isAutoScrollingRef.current = false;
+        }, 500);
+      } else if (absoluteX + pos.width > scrollX + visibleWidth - SCROLL_PADDING) {
+        isAutoScrollingRef.current = true;
+        internalScrollRef.current?.scrollTo?.(absoluteX + pos.width - visibleWidth + SCROLL_PADDING, 0);
+        setTimeout(() => {
+          isAutoScrollingRef.current = false;
+        }, 500);
+      }
+    }, [selectedTab, tabList, animateIndicatorToIndex]);
+
+    // Cleanup scroll-end timer on unmount
+    useEffect(() => {
+      return () => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        clearTimeout(scrollEndTimerRef.current);
+      };
+    }, []);
+
+    // Track scroll offset and smart-select the edge visible tab after scroll settles
+    const handleScroll = useCallback((event: { nativeEvent: { contentOffset: { x: number } } }) => {
+      const x = event.nativeEvent.contentOffset.x;
+      prevScrollXRef.current = x;
+      scrollOffsetRef.current = x;
+
+      if (isAutoScrollingRef.current) return;
+
+      clearTimeout(scrollEndTimerRef.current);
+    }, []);
+
+    // Record each tab's position and width; trigger indicator once positions are known
+    const handleTabLayout = useCallback(
+      (index: number, event: { layout: { x: number; width: number } }) => {
+        tabPositionsRef.current[index] = { x: event.layout.x, width: event.layout.width };
+
+        const selectedIndex = tabList.findIndex((t) => t.id === selectedTab);
+        if (index === selectedIndex) {
+          animateIndicatorToIndex(index);
+        }
+      },
+      [tabList, selectedTab, animateIndicatorToIndex],
+    );
+
+    const renderChipTab = () => {
+      return tabList.map((tab) => {
+        const { label, id, Icon = undefined, count } = tab || {};
+        return (
+          <Chip
+            label={label}
+            key={id}
+            isSelected={selectedTab === id}
+            {...{
+              prefixIcon: iconPosition === IconPosition.LEFT ? Icon : null,
+              topIcon: iconPosition === IconPosition.TOP ? Icon : null,
+              suffixIcon: iconPosition === IconPosition.RIGHT ? Icon : null,
+            }}
+            onClick={() => onClick(id)}
+            showCounter={showCounter}
+            count={count}
+            styleConfig={chip}
+            id={navTabsIdPrefix + id}
+          />
+        );
+      });
+    };
+
+    const renderFlatTab = () => {
+      return tabList.map((tab, index) => {
+        const { label, id, Icon = undefined, count } = tab || {};
+        return (
+          <FlatTab
+            key={id}
+            label={label}
+            onClick={() => onClick(id)}
+            size={tabSize}
+            isSelected={selectedTab === id}
+            showCounter={showCounter}
+            count={count}
+            counterBgColor={_counterBgColor}
+            nonSelectedCounterBgColor={_nonSelectedCounterBgColor}
+            showIcon={showIcon}
+            iconPosition={iconPosition}
+            Icon={Icon}
+            tabWidth={tabWidth}
+            styleConfig={flatTab}
+            id={navTabsIdPrefix + id}
+            onLayout={(event) => handleTabLayout(index, event)}
+            hideBottomBorder
+          />
+        );
+      });
+    };
+
+    const renderTabType = () => {
+      switch (tabType) {
+        case TabVariants.FLAT:
+          return renderFlatTab();
+        case TabVariants.CHIP:
+          return renderChipTab();
+        default:
+          return renderFlatTab();
+      }
+    };
+
+    const dynamicStyles = useStyles(
+      (theme) => ({
+        tabTypeContainer: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          columnGap: tabGap || theme?.spacing[4],
+          paddingLeft: containerSpace || theme?.spacing[4],
+          paddingRight: containerSpace || theme?.spacing[4],
+        },
+      }),
+      [tabGap, containerSpace],
+    );
+
+    return (
+      <HorizontalScroll
+        {...rootProps}
+        styleConfig={{ childContainer: [...(root || []), staticStyles.scrollContainer] }}
+        ref={internalScrollRef}
+        onLayout={(event) => {
+          containerWidthRef.current = event.layout.width;
+        }}
+        onScroll={(event) => {
+          handleScroll(event);
+        }}
+        scrollEventThrottle={16}
+      >
+        <Container styleConfig={{ root: [staticStyles.root, ...container] }}>
+          <TabContainer {...tabContainerStyles} rootStyles={tabContainer}>
+            <Container styleConfig={{ root: [dynamicStyles.tabTypeContainer, ...tabTypeContainer] }}>
+              {renderTabType()}
+              {tabType === TabVariants.FLAT && (
+                <Animated.View pointerEvents='none' style={[staticStyles.indicator, indicatorStyle]} />
+              )}
+            </Container>
+          </TabContainer>
+        </Container>
+      </HorizontalScroll>
+    );
+  },
+);
+
+NavTabs.displayName = 'NavTabs';
+export default NavTabs;