@hero-design/rn 8.113.1 → 8.114.0

package/src/components/Progress/SegmentedBar/utils.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+export const getTextComponent = (
+  content: ReactNode,
+  textElement: ReactNode
+): ReactNode => {
+  if (!content) {
+    return null;
+  }
+
+  if (typeof content === 'string' || typeof content === 'number') {
+    return textElement;
+  }
+
+  return content;
+};

package/src/components/Progress/index.tsx

@@ -1,10 +1,12 @@
 import ProgressCircle from './ProgressCircle';
 import ProgressBar from './ProgressBar';
 import ProgressStep from './ProgressStep';
+import ProgressSegmentedBar from './SegmentedBar';
 
 const Progress = {
   Circle: ProgressCircle,
   Bar: ProgressBar,
+  SegmentedBar: ProgressSegmentedBar,
   Step: ProgressStep,
 } as const;
 

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,8 +1,10 @@
+import type { FunctionComponent } from 'react';
 import React, { useEffect, useMemo, useRef } from 'react';
 import PagerView from 'react-native-pager-view';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { TabsProps } from '.';
 import SceneView from './SceneView';
+import type { ScrollableTabHeaderProps } from './ScrollableTabsHeader/ScrollableTabsHeader';
 import ScrollableTabHeader from './ScrollableTabsHeader/ScrollableTabsHeader';
 import { TabContainer } from './StyledScrollableTabs';
 import useHandlePageScroll from './useHandlePageScroll';
@@ -10,6 +12,7 @@ import { ScreenContext, TabContext } from './useIsFocused';
 
 export interface ScrollableTabProps extends TabsProps {
   variant?: 'underlined' | 'highlighted';
+  header?: FunctionComponent<ScrollableTabHeaderProps>;
 }
 
 const ScrollableTab = ({
@@ -23,6 +26,7 @@ const ScrollableTab = ({
   swipeEnabled = true,
   testID: componentTestID,
   variant = 'highlighted',
+  header,
 }: ScrollableTabProps) => {
   const pagerViewRef = useRef<PagerView>(null);
   const insets = useSafeAreaInsets();
@@ -57,18 +61,35 @@ const ScrollableTab = ({
     [selectedTabKey]
   );
 
+  const headerProps = useMemo(
+    () => ({
+      tabs,
+      selectedIndex: selectedTabIndex,
+      onTabPress,
+      barStyle,
+      insets,
+      testID: componentTestID ? `${componentTestID}-tab-bar` : undefined,
+      variant,
+    }),
+    [
+      tabs,
+      selectedTabIndex,
+      onTabPress,
+      barStyle,
+      insets,
+      componentTestID,
+      variant,
+    ]
+  );
+
   return (
     <TabContext.Provider value={tabContextProviderValue}>
       <TabContainer style={containerStyle} testID={componentTestID}>
-        <ScrollableTabHeader
-          tabs={tabs}
-          selectedIndex={selectedTabIndex}
-          onTabPress={onTabPress}
-          barStyle={barStyle}
-          insets={insets}
-          testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
-          variant={variant}
-        />
+        {header ? (
+          header(headerProps)
+        ) : (
+          <ScrollableTabHeader {...headerProps} />
+        )}
         <PagerView
           initialPage={selectedTabIndex}
           ref={pagerViewRef}

package/src/components/Tabs/ScrollableTabsHeader/ScrollableTabsHeader.tsx

@@ -53,7 +53,7 @@ const getTabItem = ({
   return item({ color });
 };
 
-interface ScrollableTabHeaderProps extends ViewProps {
+export interface ScrollableTabHeaderProps extends ViewProps {
   /**
    * Callback which is called on tab press, receiving key of upcoming active Tab.
    */

package/src/components/Tabs/__tests__/ScrollableTabs.spec.tsx

@@ -8,6 +8,8 @@ import ScrollableTabs from '../ScrollableTabs';
 import Button from '../../Button';
 import type { TabType } from '..';
 import { useIsFocused } from '../useIsFocused';
+import type { ScrollableTabHeaderProps } from '../ScrollableTabsHeader/ScrollableTabsHeader';
+import ScrollableTabsHeader from '../ScrollableTabsHeader/ScrollableTabsHeader';
 
 const CustomScreen = ({ title }: { title: string }) => {
   const isFocused = useIsFocused();
@@ -17,12 +19,15 @@ const CustomScreen = ({ title }: { title: string }) => {
     </Text>
   );
 };
-const TestTabsComponent = (
-  props: Omit<
-    ComponentProps<typeof ScrollableTabs>,
-    'selectedTabKey' | 'onTabPress' | 'tabs'
-  >
-) => {
+const TestTabsComponent = ({
+  header,
+  ...props
+}: Omit<
+  ComponentProps<typeof ScrollableTabs>,
+  'selectedTabKey' | 'onTabPress' | 'tabs'
+> & {
+  header?: React.FunctionComponent<ScrollableTabHeaderProps>;
+}) => {
   const [selectedTabKey, setSelectedTabKey] = React.useState('work');
   const tabs: TabType[] = [
     {
@@ -74,6 +79,7 @@ const TestTabsComponent = (
         tabs={tabs}
         selectedTabKey={selectedTabKey}
         onTabPress={(newTabKey) => setSelectedTabKey(newTabKey)}
+        header={header}
       />
     </SafeAreaProvider>
   );
@@ -131,6 +137,25 @@ describe('Tabs.Scroll', () => {
     expect(onTabPress).toHaveBeenCalledTimes(1);
   });
 
+  it('renders correctly with custom header', () => {
+    const { getByText, getByTestId } = renderWithTheme(
+      <TestTabsComponent
+        header={(props) => (
+          <>
+            <Text>Custom Header</Text>
+            <ScrollableTabsHeader {...props} />
+          </>
+        )}
+      />
+    );
+
+    expect(getByText('Custom Header')).toBeDefined();
+    expect(getByText('Work')).toBeDefined();
+    expect(getByTestId('hero-icon-speaker-outlined')).toBeDefined();
+    expect(getByTestId('hero-icon-home-outlined')).toBeDefined();
+    expect(getByText('Work Screen focused')).toBeDefined();
+  });
+
   describe('lazy', () => {
     it('render all screens when lazy = false', async () => {
       const { queryByText } = renderWithTheme(

package/src/components/Tabs/index.tsx

@@ -11,6 +11,7 @@ import Typography from '../Typography';
 import ActiveTabIndicator from './ActiveTabIndicator';
 import SceneView from './SceneView';
 import ScrollableTabs from './ScrollableTabs';
+import ScrollableTabHeader from './ScrollableTabsHeader/ScrollableTabsHeader';
 import {
   HeaderTab,
   HeaderTabItem,
@@ -250,5 +251,6 @@ const Tabs = ({
 
 export default Object.assign(Tabs, {
   Scroll: ScrollableTabs,
+  ScrollHeader: ScrollableTabHeader,
   useIsFocused,
 });

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -1046,6 +1046,7 @@ exports[`theme returns correct theme object 1`] = `
           "warning": "#000000",
           "warningInverted": "#000000",
         },
+        "segmentedRemainderBackground": "#dadbde",
         "step": {
           "complete": "#401960",
           "current": "#ccd2d3",
@@ -1054,14 +1055,21 @@ exports[`theme returns correct theme object 1`] = `
       },
       "radii": {
         "default": 999,
+        "legendCircle": 999,
       },
       "sizes": {
         "barHeight": 8,
         "circleCompletenessHeight": 8,
         "circleDiameter": 72,
+        "legendHeight": 8,
+        "legendWidth": 8,
         "stepHeight": 8,
       },
       "space": {
+        "legendGap": 8,
+        "legendInnerGap": 4,
+        "segmentedHeaderMarginBottom": 8,
+        "segmentedLegendMarginTop": 8,
         "stepGap": 4,
       },
     },

package/src/theme/components/progress.ts

@@ -37,6 +37,7 @@ const getProgressTheme = (theme: GlobalTheme) => {
       incomplete: theme.colors.archivedSurface,
       current: theme.colors.decorativePrimarySurface,
     },
+    segmentedRemainderBackground: theme.colors.archivedSurface,
   };
 
   const sizes = {
@@ -44,14 +45,21 @@ const getProgressTheme = (theme: GlobalTheme) => {
     circleCompletenessHeight: theme.sizes.small,
     barHeight: theme.sizes.small,
     stepHeight: theme.sizes.small,
+    legendWidth: theme.space.small,
+    legendHeight: theme.space.small,
   };
 
   const radii = {
     default: theme.radii.rounded,
+    legendCircle: theme.radii.rounded,
   };
 
   const space = {
     stepGap: theme.space.xsmall,
+    segmentedHeaderMarginBottom: theme.space.small,
+    legendGap: theme.space.small,
+    legendInnerGap: theme.space.xsmall,
+    segmentedLegendMarginTop: theme.space.small,
   };
 
   return { colors, sizes, radii, space };

package/src/types.ts

@@ -59,6 +59,7 @@ import type { ThemeScale } from './components/Box/types';
 import type { TimePickerProps } from './components/TimePicker/types';
 import type { DatePickerProps } from './components/DatePicker/types';
 import type { SegmentedControlItemConfig } from './components/SegmentedControl/types';
+import type { ProgressSegmentedBarProps } from './components/Progress/SegmentedBar/types';
 
 export type {
   Space,
@@ -114,4 +115,5 @@ export type {
   TimePickerProps,
   DatePickerProps,
   SegmentedControlItemConfig,
+  ProgressSegmentedBarProps,
 };

package/src/utils/helpers.ts

@@ -233,3 +233,9 @@ export const transformKebabCaseToCamelCase = <T extends string>(
     /[a-z]/.test(char) ? char.toUpperCase() : char
   ) as CamelCase<T>;
 };
+
+export function assert(condition: unknown, message: string): asserts condition {
+  if (!condition) {
+    throw new Error(message);
+  }
+}

package/.turbo/turbo-build.log

@@ -1,17 +0,0 @@
-(node:2088) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
-(Use `node --trace-warnings ...` to show where the warning was created)
-
-src/index.ts → lib/index.js, es/index.js...
-(!) Circular dependencies
-node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/select.js -> node_modules/d3-selection/src/selection/index.js
-node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/selectAll.js -> node_modules/d3-selection/src/selection/index.js
-node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/filter.js -> node_modules/d3-selection/src/selection/index.js
-...and 12 more
-(!) [plugin replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-(!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/_work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 30.6s
-
-/home/runner/_work/hero-design/hero-design/packages/rn/src/locales/en_AU.ts, /home/runner/_work/hero-design/hero-design/packages/rn/src/locales/en_CA.ts, /home/runner/_work/hero-design/hero-design/packages/rn/src/locales/index.ts, /home/runner/_work/hero-design/hero-design/packages/rn/src/locales/types.ts → ., ....
-(!) Generated empty chunks
-"locales/types" and "locales/types"
-created ., . in 9.1s