@cleartrip/ct-design-nav-tabs 4.0.0-TEST.3 → 5.0.0

package/src/Tab.tsx

@@ -0,0 +1,155 @@
+import { forwardRef } from 'react';
+
+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 staticStyles = makeStyles(() => ({
+  scrollContainer: {
+    backgroundColor: 'white',
+  },
+  root: {
+    width: '100%',
+  },
+}));
+
+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,
+    },
+    forwardedRef,
+  ) => {
+    const theme = useTheme();
+    const { chip, container = [], flatTab, root, tabContainer = [], tabTypeContainer = [] } = styleConfig;
+    const showBottomLine = showBottomBorder && tabType === TabVariants.FLAT;
+    const tabContainerStyles = getTabContainerStyles({ showBottomLine, theme: theme });
+
+    const _counterBgColor = counterBgColor || theme.color.background.link2;
+    const _nonSelectedCounterBgColor = nonSelectedCounterBgColor || theme.color.background.defaultDark;
+
+    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) => {
+        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}
+          />
+        );
+      });
+    };
+
+    const renderTabType = () => {
+      switch (tabType) {
+        case TabVariants.FLAT: {
+          return renderFlatTab();
+        }
+        case TabVariants.CHIP: {
+          return renderChipTab();
+        }
+        default: {
+          return renderFlatTab();
+        }
+      }
+    };
+
+    const dynamicStyles = useStyles(
+      (theme) => {
+        return {
+          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={forwardedRef}
+      >
+        <Container styleConfig={{ root: [staticStyles.root, ...container] }}>
+          <TabContainer {...tabContainerStyles} rootStyles={tabContainer}>
+            <Container styleConfig={{ root: [dynamicStyles.tabTypeContainer, ...tabTypeContainer] }}>
+              {renderTabType()}
+            </Container>
+          </TabContainer>
+        </Container>
+      </HorizontalScroll>
+    );
+  },
+);
+
+NavTabs.displayName = 'NavTabs';
+
+export default NavTabs;

package/src/TabContainer/TabContainer.tsx

@@ -0,0 +1,29 @@
+import { Styles } from '@cleartrip/ct-design-types';
+import { Container } from '@cleartrip/ct-design-container';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+
+import { TabContainerProps } from './type';
+
+const TabContainer: React.FC<TabContainerProps & { rootStyles: Styles[] }> = ({
+  borderBottomWidth,
+  borderColor,
+  children,
+  rootStyles: customRootStyles = [],
+}) => {
+  const dynamicStyles = useStyles(
+    (_) => {
+      return {
+        root: {
+          borderBottomWidth,
+          borderColor,
+          minWidth: '100%',
+          width: 'auto',
+        },
+      };
+    },
+    [borderBottomWidth, borderColor],
+  );
+  return <Container styleConfig={{ root: [dynamicStyles.root, ...customRootStyles] }}>{children}</Container>;
+};
+
+export default TabContainer;

package/src/TabContainer/type.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export interface TabContainerProps {
+  borderBottomWidth?: number;
+  borderColor?: string;
+  children?: ReactNode;
+}

package/src/constants.ts

@@ -0,0 +1,4 @@
+export enum TabVariants {
+  FLAT = 'flat',
+  CHIP = 'chip',
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as NavTabs } from './Tab';
+export type * from './type';
+export * from './constants';

package/src/style.ts

@@ -0,0 +1,8 @@
+import { Theme } from '@cleartrip/ct-design-theme';
+
+export const getTabContainerStyles = ({ showBottomLine, theme }: { showBottomLine: boolean; theme: Theme }) => {
+  return {
+    borderBottomWidth: showBottomLine ? theme.border.width.sm : theme.border.width.none,
+    borderColor: theme.color.border.default,
+  };
+};

package/src/type.ts

@@ -0,0 +1,75 @@
+import { ReactNode } from 'react';
+
+import { Styles } from '@cleartrip/ct-design-types';
+import { IChipStyleConfig } from '@cleartrip/ct-design-chip';
+import { ContainerRef, IContainer } from '@cleartrip/ct-design-container';
+
+import { FlatTabStyleConfigProps, TabSizeType, IconPosition } from './FlatTab/type';
+
+import { TabVariants } from './constants';
+
+/** Configuration object for individual tab items */
+export type TabListType = {
+  /** Unique identifier for the tab */
+  id: string;
+  /** Display text for the tab */
+  label: string;
+  /** Optional icon element to display in the tab */
+  Icon?: ReactNode;
+  /** Optional count/badge number to display */
+  count?: number;
+};
+
+/** Configuration object for customizing NavTabs styling */
+export interface INavTabsStyleConfig {
+  /** Styles for the root wrapper element */
+  root?: Styles[];
+  /** Styles for the main container */
+  container?: Styles[];
+  /** Styles for the tab items container */
+  tabContainer?: Styles[];
+  /** Styles for the tab type specific container */
+  tabTypeContainer?: Styles[];
+  /** Style configuration for flat tab variant */
+  flatTab?: FlatTabStyleConfigProps;
+  /** Style configuration for chip tab variant */
+  chip?: IChipStyleConfig;
+}
+
+/** Props for the NavTabs component */
+export interface NavTabsProps {
+  /** The visual variant of the tabs. Defaults to 'flat' */
+  tabType?: `${TabVariants}`;
+  /** Whether to display icons in the tabs. Icons are provided via tabList items */
+  showIcon?: boolean;
+  /** Callback function called when a tab is clicked. Receives the tab id as parameter */
+  onClick: (value: string) => void;
+  /** Array of tab configuration objects defining the tabs to render */
+  tabList: TabListType[];
+  /** ID of the currently selected/active tab */
+  selectedTab?: string;
+  /** Spacing between individual tabs in pixels */
+  tabGap?: number;
+  /** Position of icons relative to tab text. Only applies when showIcon is true */
+  iconPosition?: `${IconPosition}`;
+  /** Size variant of the tabs affecting padding and font size */
+  tabSize?: TabSizeType;
+  /** Whether to display count badges on tabs that have count values */
+  showCounter?: boolean;
+  /** Horizontal spacing around the entire tab container in pixels */
+  containerSpace?: number;
+  /** Fixed width for individual tabs. Can be any valid CSS width value */
+  tabWidth?: number | 'auto';
+  /** Background color for count badges on selected tabs */
+  counterBgColor?: string;
+  /** Background color for count badges on non-selected tabs */
+  nonSelectedCounterBgColor?: string;
+  /** Whether to show a bottom border under the tab container */
+  showBottomBorder?: boolean;
+  /** Custom style configuration object for overriding component styles */
+  styleConfig?: INavTabsStyleConfig;
+  /** Props to forward to the root container component */
+  rootProps?: React.ForwardRefExoticComponent<IContainer & React.RefAttributes<ContainerRef>>;
+  /** Prefix string for generating unique tab element IDs for accessibility */
+  navTabsIdPrefix?: string;
+}

package/dist/FlatTab/StyledFlatTab/StyledFlatTab.d.ts

@@ -1,7 +0,0 @@
-import { CSSProperties } from 'styled-components';
-import { StyledFlatTabProps } from './type';
-declare const StyledFlatTab: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledFlatTabProps & {
-    css?: CSSProperties | undefined;
-}, never>;
-export default StyledFlatTab;
-//# sourceMappingURL=StyledFlatTab.d.ts.map

package/dist/FlatTab/StyledFlatTab/StyledFlatTab.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledFlatTab.d.ts","sourceRoot":"","sources":["../../../packages/components/NavTabs/src/FlatTab/StyledFlatTab/StyledFlatTab.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAc,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAE5C,QAAA,MAAM,aAAa;;SAMlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/FlatTab/StyledFlatTab/index.d.ts

@@ -1,2 +0,0 @@
-export { default as StyledFlatTab } from './StyledFlatTab';
-//# sourceMappingURL=index.d.ts.map

package/dist/FlatTab/StyledFlatTab/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/components/NavTabs/src/FlatTab/StyledFlatTab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/FlatTab/StyledFlatTab/style.d.ts

@@ -1,6 +0,0 @@
-import { Theme } from '@cleartrip/ct-design-theme';
-import { StyledFlatTabProps } from './type';
-export declare const getStyledFlatTabStyles: ({ theme, borderBottomColor, borderBottomWidth, width, }: StyledFlatTabProps & {
-    theme: Theme;
-}) => import("styled-components").FlattenSimpleInterpolation;
-//# sourceMappingURL=style.d.ts.map

package/dist/FlatTab/StyledFlatTab/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../packages/components/NavTabs/src/FlatTab/StyledFlatTab/style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAE5C,eAAO,MAAM,sBAAsB;WAM1B,KAAK;4DAyBb,CAAC"}

package/dist/FlatTab/StyledFlatTab/type.d.ts

@@ -1,6 +0,0 @@
-export interface StyledFlatTabProps {
-    borderBottomWidth?: string;
-    borderBottomColor?: string;
-    width?: string;
-}
-//# sourceMappingURL=type.d.ts.map

package/dist/FlatTab/StyledFlatTab/type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../packages/components/NavTabs/src/FlatTab/StyledFlatTab/type.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/FlatTab/index.d.ts

@@ -1,2 +0,0 @@
-export { default as FlatTab } from './FlatTab';
-//# sourceMappingURL=index.d.ts.map

package/dist/FlatTab/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/NavTabs/src/FlatTab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/NavTabs.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { NavTabsProps } from './type';
-declare const NavTabs: React.FC<NavTabsProps>;
-export default NavTabs;
-//# sourceMappingURL=NavTabs.d.ts.map

package/dist/NavTabs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavTabs.d.ts","sourceRoot":"","sources":["../packages/components/NavTabs/src/NavTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,YAAY,EAAwB,MAAM,QAAQ,CAAC;AAQ5D,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAsGnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/StyledCounter/StyledCounter.d.ts

@@ -1,4 +0,0 @@
-import { StyledCounterProps } from './type';
-declare const StyledCounter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledCounterProps, never>;
-export default StyledCounter;
-//# sourceMappingURL=StyledCounter.d.ts.map

package/dist/StyledCounter/StyledCounter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledCounter.d.ts","sourceRoot":"","sources":["../../packages/components/NavTabs/src/StyledCounter/StyledCounter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAE5C,QAAA,MAAM,aAAa,yHAElB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/StyledCounter/index.d.ts

@@ -1,2 +0,0 @@
-export { default as StyledCounter } from './StyledCounter';
-//# sourceMappingURL=index.d.ts.map

package/dist/StyledCounter/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/NavTabs/src/StyledCounter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/StyledCounter/style.d.ts

@@ -1,7 +0,0 @@
-import { CSSObject } from 'styled-components';
-import { Theme } from '@cleartrip/ct-design-theme';
-import { StyledCounterProps } from './type';
-export declare const getStyledCounterStyles: ({ backgroundColor, theme, }: StyledCounterProps & {
-    theme: Theme;
-}) => CSSObject;
-//# sourceMappingURL=style.d.ts.map

package/dist/StyledCounter/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../packages/components/NavTabs/src/StyledCounter/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAE5C,eAAO,MAAM,sBAAsB;WAGF,KAAK;MAAK,SAU1C,CAAC"}

package/dist/StyledCounter/type.d.ts

@@ -1,6 +0,0 @@
-import { CSSProperties } from "styled-components";
-export interface StyledCounterProps {
-    backgroundColor?: string;
-    css?: CSSProperties;
-}
-//# sourceMappingURL=type.d.ts.map

package/dist/StyledCounter/type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../packages/components/NavTabs/src/StyledCounter/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,WAAW,kBAAkB;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,GAAG,CAAC,EAAE,aAAa,CAAA;CACnB"}

package/dist/TabContainer/index.d.ts

@@ -1,2 +0,0 @@
-export { default as TabContainer } from './TabContainer';
-//# sourceMappingURL=index.d.ts.map

package/dist/TabContainer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/NavTabs/src/TabContainer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/TabContainer/style.d.ts

@@ -1,7 +0,0 @@
-import { CSSObject } from 'styled-components';
-import { Theme } from '@cleartrip/ct-design-theme';
-import { TabContainerProps } from './type';
-export declare const getTabContainerStyles: ({ borderBottomWidth, borderColor, theme, }: TabContainerProps & {
-    theme: Theme;
-}) => CSSObject;
-//# sourceMappingURL=style.d.ts.map

package/dist/TabContainer/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../packages/components/NavTabs/src/TabContainer/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE3C,eAAO,MAAM,qBAAqB;WAIF,KAAK;MAAK,SAQzC,CAAC"}