@bitrise/bitkit 9.17.0-alpha-chakra.1 → 9.17.0-alpha-chakra.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.17.0-alpha-chakra.1",
+  "version": "9.17.0-alpha-chakra.4",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Tabs/Tabs.stories.tsx

@@ -9,6 +9,11 @@ export default {
   title: 'Components/Tabs',
   component: Tabs,
   subcomponents: { Tab },
+  argTypes: {
+    onChange: {
+      action: 'onChange event',
+    },
+  },
 } as ComponentMeta<typeof Tabs>;
 
 const badge = {
@@ -17,16 +22,20 @@ const badge = {
   color: 'neutral.10',
 };
 
-export const WithDefaults: ComponentStory<typeof Tabs> = () => {
+export const WithDefaults: ComponentStory<typeof Tabs> = (props) => {
   return (
-    <Tabs defaultIndex={1} variant="unstyled">
+    <Tabs defaultIndex={1} variant="unstyled" {...props}>
       <TabList>
-        <Tab>Default</Tab>
-        <Tab>Selected as default</Tab>
+        <Tab id="basic">Basic</Tab>
+        <Tab id="selected-as-default">Selected as default</Tab>
         <Tab leftIconName="Bell">With left icon</Tab>
-        <Tab badge={badge}>With badge</Tab>
+        <Tab id="with-badge" badge={badge}>
+          With badge
+        </Tab>
         <Tab isDisabled>Disabled</Tab>
-        <Tab rightIconName="ArrowForward">With right icon</Tab>
+        <Tab id="with-right-icon" rightIconName="ArrowForward">
+          With right icon
+        </Tab>
       </TabList>
 
       <TabPanels>
@@ -46,3 +55,7 @@ export const WithDefaults: ComponentStory<typeof Tabs> = () => {
     </Tabs>
   );
 };
+
+WithDefaults.args = {
+  withHistory: true,
+};

package/src/Components/Tabs/Tabs.tsx

@@ -1,13 +1,55 @@
-import React from 'react';
-import { Tabs as ChakraTabs, TabsProps, forwardRef } from '@chakra-ui/react';
+import React, { useEffect, useState } from 'react';
+import { Tabs as ChakraTabs, TabsProps as ChakraTabsProps, forwardRef } from '@chakra-ui/react';
+import { useHistory } from '../../hooks';
+
+export interface TabsProps extends ChakraTabsProps {
+  onChange?: (index: number, tabId?: string) => void;
+  withHistory?: boolean;
+}
+
+const getTabIds = (props: TabsProps) => {
+  const ids: string[] = [];
+  const tabs = React.Children.toArray(props.children)[0] as any;
+  React.Children.forEach(tabs.props.children, (c, index) => {
+    ids[index] = c?.props?.id;
+  });
+  return ids;
+};
 
 /**
  * An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern.
  */
 const Tabs = forwardRef<TabsProps, 'div'>((props, ref) => {
-  return <ChakraTabs {...props} ref={ref} />;
-});
+  const { defaultIndex = 0, onChange, withHistory, ...rest } = props;
+  const { searchParams, replace } = useHistory();
+  const [actualIndex, setActualIndex] = useState(defaultIndex);
 
-export type { TabsProps };
+  const tabIds = getTabIds(props);
+
+  useEffect(() => {
+    if (withHistory && searchParams.get('tab')) {
+      const tabName = searchParams.get('tab') || '';
+      const index = tabIds.indexOf(tabName) > -1 ? tabIds.indexOf(tabName) : defaultIndex;
+      setActualIndex(index);
+    }
+  }, []);
+
+  const onTabChange = (index: number) => {
+    const tabId = tabIds[index];
+    setActualIndex(index);
+    if (withHistory) {
+      if (tabId) {
+        searchParams.set('tab', tabId);
+      } else {
+        searchParams.delete('tab');
+      }
+      replace(`?${searchParams.toString()}`);
+    }
+    if (onChange) {
+      onChange(index, tabId);
+    }
+  };
+  return <ChakraTabs {...rest} ref={ref} onChange={onTabChange} index={actualIndex} />;
+});
 
 export default Tabs;

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useHistory } from './useHistory';

package/src/hooks/useHistory.ts

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+
+type UseLocation = {
+  pathname: string;
+  push: (url: string) => void;
+  replace: (url: string) => void;
+  search: string;
+  searchParams: URLSearchParams;
+};
+
+const getCurrentLocation = () => ({
+  pathname: window.location.pathname,
+  search: window.location.search,
+});
+
+const listeners: Array<() => void> = [];
+
+const notify = () => {
+  listeners.forEach((listener) => listener());
+};
+
+const getSearchParams = (search: string): URLSearchParams => {
+  const searchParams = new URLSearchParams(search);
+  return searchParams;
+};
+
+const useLocation = (): UseLocation => {
+  const [{ pathname, search }, setLocation] = useState(getCurrentLocation());
+
+  const handleChange = () => {
+    setLocation(getCurrentLocation());
+  };
+
+  const push = (url: string) => {
+    window.history.pushState(null, '', url);
+    notify();
+  };
+
+  const replace = (url: string) => {
+    window.history.replaceState(null, '', url);
+    notify();
+  };
+
+  useEffect(() => {
+    window.addEventListener('popstate', handleChange);
+    return () => {
+      window.removeEventListener('popstate', handleChange);
+    };
+  }, []);
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  useEffect(() => {
+    listeners.push(handleChange);
+    return () => listeners.splice(listeners.indexOf(handleChange), 1);
+  }, []);
+
+  return {
+    pathname,
+    push,
+    replace,
+    search,
+    searchParams: getSearchParams(search),
+  };
+};
+
+export default useLocation;

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './old';
 export * from './types/chakra';
 export * from './utils/chakra';
+export * from './hooks';
 
 export type { LinkProps } from './Components/Link/Link';
 export { default as Link } from './Components/Link/Link';