@bitrise/bitkit 9.16.5 → 9.17.0-alpha-chakra.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.16.5",
+  "version": "9.17.0-alpha-chakra.3",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -55,7 +55,7 @@
     "@babel/core": "^7.18.2",
     "@bitrise/eslint-plugin": "^2.1.0",
     "@chakra-ui/cli": "^1.9.0",
-    "@chakra-ui/storybook-addon": "^3.0.2",
+    "@chakra-ui/storybook-addon": "^1.0.3",
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
     "@google-cloud/storage": "^5.19.4",

package/src/Components/Tabs/Tab.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  Badge as ChakraBadge,
+  BadgeProps as ChakraBadgeProps,
+  Button,
+  Tab as ChakraTab,
+  TabProps as ChakraTabProps,
+  forwardRef,
+  useMultiStyleConfig,
+  useTab,
+} from '@chakra-ui/react';
+import Icon from '../../Old/Icon/Icon';
+import { TypeIconName } from '../../Old/Icon/tsx';
+
+// TODO: separated component
+interface BadgeProps extends ChakraBadgeProps {
+  backgroundColor?: ChakraBadgeProps['backgroundColor'];
+  children?: number | string;
+  color?: ChakraBadgeProps['color'];
+}
+
+const Badge = (props: BadgeProps) => {
+  const properties: ChakraBadgeProps = {
+    ...props,
+    borderRadius: '4',
+    fontSize: '1',
+    lineHeight: '1',
+    paddingY: '3px',
+    paddingX: '8',
+    textTransform: 'uppercase',
+  };
+  return <ChakraBadge {...properties} />;
+};
+
+export interface TabProps extends ChakraTabProps {
+  badge?: BadgeProps;
+  leftIconName?: TypeIconName;
+  isDisabled?: boolean;
+  rightIconName?: TypeIconName;
+}
+
+const CustomTab = forwardRef((props, ref) => {
+  const { badge, leftIconName, rightIconName, ...rest } = props;
+  const tabProps = useTab({ ...rest, ref });
+  const styles = useMultiStyleConfig('Tabs', tabProps);
+
+  return (
+    <Button __css={styles.tab} {...tabProps}>
+      {leftIconName && <Icon name={leftIconName} />}
+      <span>{tabProps.children}</span>
+      {badge?.children && <Badge {...badge} />}
+      {rightIconName && <Icon name={rightIconName} />}
+    </Button>
+  );
+});
+
+const Tab = forwardRef<TabProps, 'div'>((props, ref) => {
+  const { badge, leftIconName, rightIconName, ...rest } = props;
+  const properties = rest;
+  if (badge?.children || leftIconName || rightIconName) {
+    return <CustomTab {...props} />;
+  }
+  return <ChakraTab {...properties} ref={ref} />;
+});
+
+export default Tab;

package/src/Components/Tabs/TabList.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TabList as ChakraTabList, TabListProps, forwardRef } from '@chakra-ui/react';
+
+const TabList = forwardRef<TabListProps, 'div'>((props, ref) => {
+  return <ChakraTabList {...props} ref={ref} />;
+});
+
+export type { TabListProps };
+
+export default TabList;

package/src/Components/Tabs/TabPanel.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TabPanel as ChakraTabPanel, TabPanelProps, forwardRef } from '@chakra-ui/react';
+
+const TabPanel = forwardRef<TabPanelProps, 'div'>((props, ref) => {
+  return <ChakraTabPanel {...props} ref={ref} />;
+});
+
+export type { TabPanelProps };
+
+export default TabPanel;

package/src/Components/Tabs/TabPanels.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TabPanels as ChakraTabPanels, TabPanelsProps, forwardRef } from '@chakra-ui/react';
+
+const TabPanels = forwardRef<TabPanelsProps, 'div'>((props, ref) => {
+  return <ChakraTabPanels {...props} ref={ref} />;
+});
+
+export type { TabPanelsProps };
+
+export default TabPanels;

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

@@ -0,0 +1,52 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Tabs from './Tabs';
+import TabList from './TabList';
+import Tab from './Tab';
+import TabPanels from './TabPanels';
+import TabPanel from './TabPanel';
+
+export default {
+  title: 'Components/Tabs',
+  component: Tabs,
+  subcomponents: { Tab },
+} as ComponentMeta<typeof Tabs>;
+
+const badge = {
+  backgroundColor: 'yellow.80',
+  children: 'new',
+  color: 'neutral.10',
+};
+
+export const WithDefaults: ComponentStory<typeof Tabs> = () => {
+  return (
+    <Tabs defaultIndex={1} variant="unstyled" withHistory>
+      <TabList>
+        <Tab id="default">Default</Tab>
+        <Tab id="selected-as-default">Selected as default</Tab>
+        <Tab leftIconName="Bell">With left icon</Tab>
+        <Tab id="with-badge" badge={badge}>
+          With badge
+        </Tab>
+        <Tab isDisabled>Disabled</Tab>
+        <Tab id="with-right-icon" rightIconName="ArrowForward">
+          With right icon
+        </Tab>
+      </TabList>
+
+      <TabPanels>
+        <TabPanel paddingTop="16">
+          <p>
+            You can add any style prop to <code>TabPanel</code>, like padding.
+            <br />
+            But doesn't have any default style.
+          </p>
+        </TabPanel>
+        <TabPanel paddingTop="16">You can use defaultIndex for this</TabPanel>
+        <TabPanel paddingTop="16">You can add icon to tab</TabPanel>
+        <TabPanel paddingTop="16">Or Badge</TabPanel>
+        <TabPanel paddingTop="16">This panel is disabled</TabPanel>
+        <TabPanel paddingTop="16">You can add icon to tab</TabPanel>
+      </TabPanels>
+    </Tabs>
+  );
+};

package/src/Components/Tabs/Tabs.theme.ts

@@ -0,0 +1,51 @@
+const TextTheme = {
+  baseStyle: {
+    tab: {
+      display: 'flex',
+      alignItems: 'center',
+      fontSize: '3',
+      gap: '8',
+      lineHeight: '3',
+      paddingX: '16',
+      paddingTop: '12',
+      paddingBottom: '10px',
+      borderBottom: '2px solid',
+      borderBottomColor: 'transparent',
+      color: 'neutral.50',
+      fontWeight: 'bold',
+      _selected: {
+        borderBottomColor: 'purple.50',
+        color: 'purple.50',
+      },
+      _focusVisible: {
+        backgroundColor: 'purple.95',
+        boxShadow: 'none',
+        color: 'purple.50',
+      },
+      _hover: {
+        backgroundColor: 'neutral.95',
+      },
+      _active: {
+        backgroundColor: 'neutral.93',
+      },
+      _disabled: {
+        color: 'neutral.70',
+        cursor: 'not-allowed',
+        _hover: {
+          background: 'transparent',
+        },
+      },
+    },
+    tablist: {
+      borderBottom: '1px solid',
+      borderBottomColor: 'separator.primary',
+    },
+    tabpanel: {
+      _focusVisible: {
+        boxShadow: 'none',
+      },
+    },
+  },
+};
+
+export default TextTheme;

package/src/Components/Tabs/Tabs.tsx

@@ -0,0 +1,53 @@
+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 {
+  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) => {
+  const { defaultIndex = 0, onChange, withHistory, ...rest } = props;
+  const { searchParams, replace } = useHistory();
+  const [actualIndex, setActualIndex] = useState(defaultIndex);
+
+  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) => {
+    setActualIndex(index);
+    if (withHistory) {
+      if (tabIds[index]) {
+        searchParams.set('tab', tabIds[index]);
+      } else {
+        searchParams.delete('tab');
+      }
+      replace(`?${searchParams.toString()}`);
+    }
+    if (onChange) {
+      onChange(index);
+    }
+  };
+  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';
@@ -37,3 +38,18 @@ export { default as Box } from './Components/Box/Box';
 
 export type { ColorButtonProps } from './Components/ColorButton/ColorButton';
 export { default as ColorButton } from './Components/ColorButton/ColorButton';
+
+export type { TabsProps } from './Components/Tabs/Tabs';
+export { default as Tabs } from './Components/Tabs/Tabs';
+
+export type { TabListProps } from './Components/Tabs/TabList';
+export { default as TabList } from './Components/Tabs/TabList';
+
+export type { TabProps } from './Components/Tabs/Tab';
+export { default as Tab } from './Components/Tabs/Tab';
+
+export type { TabPanelsProps } from './Components/Tabs/TabPanels';
+export { default as TabPanels } from './Components/Tabs/TabPanels';
+
+export type { TabPanelProps } from './Components/Tabs/TabPanel';
+export { default as TabPanel } from './Components/Tabs/TabPanel';

package/src/old.ts

@@ -226,12 +226,6 @@ export { default as TableHeaderRow } from './Old/Table/TableHeaderRow';
 export type { Props as TableRowProps } from './Old/Table/TableRow';
 export { default as TableRow } from './Old/Table/TableRow';
 
-export type { Props as TabProps } from './Old/Tabs/Tab';
-export { default as Tab } from './Old/Tabs/Tab';
-
-export type { Props as TabsProps } from './Old/Tabs/Tabs';
-export { default as Tabs } from './Old/Tabs/Tabs';
-
 export type { Props as TextareaProps } from './Old/Textarea/Textarea';
 export { default as Textarea } from './Old/Textarea/Textarea';
 

package/src/theme.ts

@@ -4,6 +4,7 @@ import ColorButton from './Components/ColorButton/ColorButton.theme';
 import Divider from './Components/Divider/Divider.theme';
 import Link from './Components/Link/Link.theme';
 import Menu from './Components/Menu/Menu.theme';
+import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
 
 import colors from './Foundations/Colors/Colors';
@@ -52,6 +53,7 @@ const theme = {
     Divider,
     Link,
     Menu,
+    Tabs,
     Text,
   },
 };