@cashub/ui 0.48.28 → 0.49.0-beta.0

package/src/Tab/TabList.js

@@ -0,0 +1,159 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import styled from 'styled-components';
+import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
+import { Button } from '../button';
+
+const MAX_MOVE_PIXEL = 300;
+const TabList = ({ children, wrap = true, ...props }) => {
+  const wrapperRef = useRef(null);
+  const [exceedContainerWidth, setExceedContainerWidth] = useState(false);
+  const [hasPrevious, setHasPrevious] = useState(false);
+  const [hasNext, setHasNext] = useState(false);
+
+  const checkExceedContainerWidth = useCallback(() => {
+    if (wrapperRef.current) {
+      const { offsetWidth, scrollWidth } = wrapperRef.current;
+      let { marginLeft } = getComputedStyle(wrapperRef.current);
+      const currentMarginLeft = Math.abs(parseInt(marginLeft));
+
+      setHasPrevious(currentMarginLeft > 0);
+      setHasNext(scrollWidth - offsetWidth > 0);
+      setExceedContainerWidth(scrollWidth > offsetWidth - currentMarginLeft);
+    }
+  }, []);
+
+  const handleResize = useCallback(() => {
+    checkExceedContainerWidth();
+  }, []);
+
+  const handleTransitionend = useCallback((event) => {
+    // only allow margin-left transition event
+    if (event && event.propertyName !== 'margin-left') {
+      return;
+    }
+
+    checkExceedContainerWidth();
+  }, []);
+
+  const getMovePixel = (offsetWidth) => {
+    // move 1/3 pixel as default
+    const defaultMovePixel = Math.ceil(offsetWidth / 3);
+    return defaultMovePixel > MAX_MOVE_PIXEL
+      ? MAX_MOVE_PIXEL
+      : defaultMovePixel;
+  };
+
+  const updateScrollPosition = (marginLeft) => {
+    wrapperRef.current.style.marginLeft = marginLeft;
+  };
+
+  const handlePrevious = () => {
+    const { offsetWidth } = wrapperRef.current;
+    const { marginLeft } = getComputedStyle(wrapperRef.current);
+    const currentMarginLeft = Math.abs(parseInt(marginLeft));
+    const availableMovePixel = currentMarginLeft;
+    const movePixel = getMovePixel(offsetWidth - currentMarginLeft);
+
+    if (movePixel > availableMovePixel) {
+      // exceed edge, so move to edge only
+      updateScrollPosition('0px');
+    } else {
+      updateScrollPosition(`-${currentMarginLeft - movePixel}px`);
+    }
+  };
+
+  const handleNext = () => {
+    const { offsetWidth, scrollWidth } = wrapperRef.current;
+    const { marginLeft } = getComputedStyle(wrapperRef.current);
+    const currentMarginLeft = Math.abs(parseInt(marginLeft));
+    const availableMovePixel = scrollWidth - offsetWidth;
+    const movePixel = getMovePixel(offsetWidth - currentMarginLeft);
+
+    if (movePixel > availableMovePixel) {
+      // exceed edge, so move to edge only
+      updateScrollPosition(`-${currentMarginLeft + availableMovePixel}px`);
+    } else {
+      updateScrollPosition(`-${currentMarginLeft + movePixel}px`);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [wrap, children]);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+      wrapperRef.current.addEventListener('transitionend', handleTransitionend);
+    }
+  }, [wrap]);
+
+  return (
+    <Container role='tablist' $wrap={wrap} {...props}>
+      {wrap ? (
+        children
+      ) : (
+        <>
+          <TabWrapper ref={wrapperRef}>{children}</TabWrapper>
+
+          {exceedContainerWidth && (
+            <Paginate>
+              <Button
+                aria-label='Previous'
+                reverse
+                onClick={handlePrevious}
+                iconOnly
+                disabled={!hasPrevious}
+              >
+                <FaAngleLeft />
+              </Button>
+              <Button
+                aria-label='Next'
+                reverse
+                onClick={handleNext}
+                iconOnly
+                disabled={!hasNext}
+              >
+                <FaAngleRight />
+              </Button>
+            </Paginate>
+          )}
+        </>
+      )}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: relative;
+  border-bottom: var(--border-width) solid var(--border-color);
+  margin-bottom: var(--spacing);
+
+  ${({ $wrap }) => !$wrap && 'white-space: nowrap;'}
+
+  ${({ noMargin }) => noMargin && 'margin-bottom: 0;'}
+`;
+
+const TabWrapper = styled.div`
+  margin-right: calc(1rem * 2 + 10px * 4 + var(--spacing-xs) * 2);
+  overflow: hidden;
+  margin-left: 0;
+  transition: margin-left 0.3s;
+`;
+
+const Paginate = styled.div`
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  > :not(:last-child) {
+    margin-right: var(--spacing-xs);
+  }
+`;
+
+export default TabList;

package/src/Tab/TabPanel.js

@@ -0,0 +1,35 @@
+import { useContext, useEffect, useState, useMemo } from 'react';
+import styled from 'styled-components';
+import TabContext from './subComponent/TabContext';
+
+const TabPanel = ({ children, name, ...props }) => {
+  const { selected } = useContext(TabContext);
+  const [rendered, setRendered] = useState(false);
+
+  const tabContent = useMemo(() => {
+    if (rendered) {
+      return children;
+    }
+
+    return null;
+  }, [rendered, children]);
+
+  useEffect(() => {
+    if (name === selected) {
+      setRendered(true);
+    }
+  }, [selected, name]);
+
+  return (
+    <Panel role='tabpanel' $display={selected === name} {...props}>
+      {tabContent}
+    </Panel>
+  );
+};
+
+const Panel = styled.div`
+  display: ${({ $display }) => ($display ? 'block' : 'none')};
+  position: relative;
+`;
+
+export default TabPanel;

package/src/Tab/TabTab.js

@@ -0,0 +1,99 @@
+import { useContext, useState, useCallback } from 'react';
+import { KEY_CODE } from '@cashub/utils';
+import styled from 'styled-components';
+import TabContext from './subComponent/TabContext';
+
+const TabTab = ({ children, name, title, onClick, ...props }) => {
+  const { selected, onChange, mode, onTitleChange } = useContext(TabContext);
+  const [isModify, setIsModify] = useState(false);
+  const [currentTitle, setCurrentTitle] = useState(title);
+
+  const handleClick = useCallback(() => {
+    if (selected !== name) {
+      onChange(name);
+    }
+
+    if (onClick && typeof onClick === 'function') {
+      onClick();
+    }
+  }, [name, selected, onChange, onClick]);
+
+  const handleDoubleClick = () => {
+    if (mode !== 'modify') return;
+
+    setIsModify(true);
+  };
+
+  const handleBlur = () => {
+    onTitleChange(name, currentTitle);
+    setIsModify(false);
+  };
+
+  const handleKeyUp = (event) => {
+    const key = event.keyCode;
+    if (key === KEY_CODE.ENTER) {
+      onTitleChange(name, currentTitle);
+      setIsModify(false);
+    }
+  };
+
+  return isModify ? (
+    <InputTab
+      role='tab'
+      type='text'
+      value={currentTitle}
+      onChange={(event) => {
+        setCurrentTitle(event.target.value);
+      }}
+      onBlur={handleBlur}
+      onKeyUp={handleKeyUp}
+      autoFocus
+    />
+  ) : (
+    <ButtonTab
+      role='tab'
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      active={selected === name}
+      {...props}
+    >
+      {children}
+    </ButtonTab>
+  );
+};
+
+const Tab = styled.div`
+  background: transparent;
+  padding: 10px var(--spacing-s);
+  border: none;
+  border-bottom: 4px solid transparent;
+`;
+
+const ButtonTab = styled(Tab).attrs({
+  as: 'button',
+})`
+  color: var(--font-on-mute);
+  transition: color 0.3s, border 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--font-on-background);
+  }
+
+  ${({ active }) =>
+    active &&
+    `
+      border-color: var(--color-primary);
+      color: var(--font-on-background);
+    `}
+`;
+
+const InputTab = styled(Tab).attrs({
+  as: 'input',
+})`
+  color: var(--font-on-background);
+  border-color: var(--color-primary);
+  outline: none;
+`;
+
+export default TabTab;

package/src/Tab/__stories__/Tab.stories.js

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import Tab from '../';
+
+const metadata = {
+  title: 'Tab/Tab',
+  component: Tab,
+  argTypes: {
+    onChange: {},
+    onTitleChange: {},
+    mode: {
+      description: '',
+      control: 'radio',
+      options: ['view', 'modify'],
+    },
+  },
+};
+
+const Template = (args) => {
+  const { onChange, ...props } = args;
+  const [selectedTab, setSelectedTab] = useState('dashboard');
+
+  return (
+    <Tab
+      selected={selectedTab}
+      onChange={(name) => {
+        setSelectedTab(name);
+        onChange(name);
+      }}
+      {...props}
+    >
+      <Tab.List>
+        <Tab.Tab name='dashboard' title='dashboard'>Dashboard</Tab.Tab>
+        <Tab.Tab name='information' title='information'>Information</Tab.Tab>
+        <Tab.Tab name='license' title='license'>License</Tab.Tab>
+      </Tab.List>
+      <Tab.Panel name='dashboard' style={{ color: '#ffff' }}>
+        Dashboard Content
+      </Tab.Panel>
+      <Tab.Panel name='information' style={{ color: '#ffff' }}>
+        Information Content
+      </Tab.Panel>
+      <Tab.Panel name='license' style={{ color: '#ffff' }}>
+        License Content
+      </Tab.Panel>
+    </Tab>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  mode: 'view',
+};
+
+export default metadata;
+export { Default };

package/src/Tab/__stories__/TabList.stories.js

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import Tab from '../';
+import { Tooltip } from '../../tooltip';
+import { BadgeFill } from '../../badge';
+
+const metadata = {
+  title: 'Tab/TabList',
+  component: Tab,
+};
+
+const Template = (args) => {
+  const [selectedTab, setSelectedTab] = useState('tab1');
+
+  return (
+    <>
+      <Tab
+        selected={selectedTab}
+        onChange={(event) => {
+          setSelectedTab(event);
+        }}
+      >
+        <Tab.List {...args}>
+          <Tab.Tab name='tab1'>Tab 1</Tab.Tab>
+          <Tab.Tab name='tab2'>Tab 2</Tab.Tab>
+          <Tab.Tab name='tab3'>Tab 3</Tab.Tab>
+          <Tab.Tab name='tab4'>Tab 4</Tab.Tab>
+          <Tab.Tab name='tab5'>Tab 5</Tab.Tab>
+          <Tab.Tab name='tab6'>
+            Tab 6&nbsp;
+            <Tooltip inline title='Descriptions'>
+              <BadgeFill small>
+              &nbsp;i&nbsp;
+              </BadgeFill>
+            </Tooltip>
+          </Tab.Tab>
+        </Tab.List>
+      </Tab>
+    </>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  wrap: true,
+  noMargin: false,
+};
+
+export default metadata;
+export { Default };

package/src/Tab/__stories__/TabPanel.stories.js

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import Tab from '../';
+
+const metadata = {
+  title: 'Tab/TabPanel',
+  component: Tab,
+  argTypes: {
+    children: {
+      description: 'TabPanel contnet',
+    },
+  },
+};
+
+const Template = (args) => {
+  const [selectedTab, setSelectedTab] = useState('dashboard');
+
+  return (
+    <Tab selected={selectedTab} onChange={setSelectedTab}>
+      <Tab.List>
+        <Tab.Tab name='dashboard'>Dashboard</Tab.Tab>
+        <Tab.Tab name='information'>Information</Tab.Tab>
+        <Tab.Tab name='license'>License</Tab.Tab>
+      </Tab.List>
+      <Tab.Panel
+        name='dashboard'
+        style={{ color: '#ffff' }}
+        {...args}
+      ></Tab.Panel>
+      <Tab.Panel
+        name='information'
+        style={{ color: 'orange' }}
+        {...args}
+      ></Tab.Panel>
+      <Tab.Panel name='license' style={{ color: 'red' }} {...args}></Tab.Panel>
+    </Tab>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  children: <p>content</p>,
+};
+
+export default metadata;
+export { Default };

package/src/Tab/__stories__/TabTab.stories.js

@@ -0,0 +1,30 @@
+import Tab from '../';
+
+const metadata = {
+  title: 'Tab/TabTab',
+  component: Tab,
+  argTypes: {
+    name: {
+      //   description: "name",
+    },
+  },
+};
+
+const Template = (args) => {
+  return (
+    <Tab>
+      <Tab.List>
+        <Tab.Tab name='dashboard' {...args}></Tab.Tab>
+      </Tab.List>
+    </Tab>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  children: 'Dashboard',
+  //   name: "dashboard",
+};
+
+export default metadata;
+export { Default };

package/src/Tab/__stories__/TabV2.stories.js

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { TabV2 } from '../';
+
+const metadata = {
+  title: 'Tab/TabV2',
+  component: TabV2,
+  argTypes: {
+    onChange: {},
+  },
+};
+
+const Template = (args) => {
+  const { onChange, ...props } = args;
+  const [selectedTab, setSelectedTab] = useState('custom');
+
+  return (
+    <TabV2
+      selected={selectedTab}
+      onChange={(name) => {
+        setSelectedTab(name);
+        onChange(name);
+      }}
+      {...props}
+    >
+      <TabV2.List>
+        <TabV2.Tab name='custom' title='Custom'>
+          Custom
+        </TabV2.Tab>
+        <TabV2.Tab name='monthly' title='Monthly'>
+          Monthly
+        </TabV2.Tab>
+      </TabV2.List>
+      <TabV2.Panel name='custom' style={{ color: '#ffff' }}>
+        Custom Content
+      </TabV2.Panel>
+      <TabV2.Panel name='monthly' style={{ color: '#ffff' }}>
+        Monthly Content
+      </TabV2.Panel>
+    </TabV2>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {};
+
+export default metadata;
+export { Default };

package/src/Tab/__test__/Tab.test.js

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import Tab from '../Tab';
+
+jest.mock('../subComponent/TabContext', () => {
+  return {
+    Provider: ({ value, children }) => {
+      return (
+        <div>
+          {children}
+          <div>selected: {value.selected}</div>
+          <div>onChange: {typeof value.onChange}</div>
+        </div>
+      );
+    },
+  };
+});
+
+describe('Test Tab Component', () => {
+  test('render Tab', () => {
+    render(<Tab>Tab content</Tab>);
+
+    const tab = screen.getByText('Tab content');
+    expect(tab).toBeInTheDocument();
+  });
+
+  test('context', () => {
+    const onChangeFunction = jest.fn();
+    const selectedValue = 'dashboard';
+
+    render(
+      <Tab onChange={onChangeFunction} selected={selectedValue}>
+        Tab content
+      </Tab>,
+    );
+
+    const selected = screen.getByText('selected: dashboard');
+    expect(selected).toBeInTheDocument();
+
+    const onChange = screen.getByText('onChange: function');
+    expect(onChange).toBeInTheDocument();
+  });
+});

package/src/Tab/__test__/TabList.test.js

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import TabList from '../TabList';
+
+describe('Test TabList Component', () => {
+  test('render Tab list', () => {
+    render(<TabList>TabList content</TabList>);
+
+    const tablist = screen.getByRole('tablist');
+    expect(tablist).toBeInTheDocument();
+
+    const tabListChildren = screen.getByText('TabList content');
+    expect(tabListChildren).toBeInTheDocument();
+  });
+
+  test('variant style', () => {
+    render(<TabList noMargin>TabList content</TabList>);
+
+    const tablist = screen.getByRole('tablist');
+    expect(tablist).toHaveStyle('margin-bottom: 0');
+  });
+});

package/src/Tab/__test__/TabPanel.test.js

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import TabContext from '../subComponent/TabContext';
+import TabPanel from '../TabPanel';
+
+describe('Test TabPanel Component', () => {
+  const onChange = jest.fn();
+  const selected = 'dashboard';
+
+  test('render TabPanel', () => {
+    render(
+      <TabContext.Provider value={{ selected, onChange }}>
+        <TabPanel name='dashboard'>dashboard</TabPanel>
+      </TabContext.Provider>,
+    );
+
+    const tabpanel = screen.getByRole('tabpanel');
+    expect(tabpanel).toBeInTheDocument();
+
+    const tabPanelChildren = screen.getByText('dashboard');
+    expect(tabPanelChildren).toBeInTheDocument();
+
+    expect(tabpanel).toHaveStyle({
+      display: 'block',
+    });
+  });
+});

package/src/Tab/__test__/TabTab.test.js

@@ -0,0 +1,58 @@
+import { render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import TabContext from '../subComponent/TabContext';
+import TabTab from '../TabTab';
+import userEvent from '@testing-library/user-event';
+
+describe('Test TabTab Component', () => {
+  const onChange = jest.fn();
+  const selected = 'dashboard';
+
+  test('render TabTab', () => {
+    render(
+      <TabContext.Provider value={{ selected, onChange }}>
+        <TabTab name='information'>Information</TabTab>
+      </TabContext.Provider>,
+    );
+
+    const tab = screen.getByRole('tab');
+    expect(tab).toBeInTheDocument();
+
+    const tabChildren = screen.getByText('Information');
+    expect(tabChildren).toBeInTheDocument();
+
+    userEvent.hover(tab);
+    expect(tab).toHaveStyleRule('color', 'var(--color-white)', {
+      modifier: ':hover',
+    });
+  });
+
+  test('on change', () => {
+    render(
+      <TabContext.Provider value={{ selected, onChange }}>
+        <TabTab name='information'>Information</TabTab>
+      </TabContext.Provider>,
+    );
+
+    const tab = screen.getByRole('tab');
+    expect(tab).toBeInTheDocument();
+
+    const tabChildren = screen.getByText('Information');
+    expect(tabChildren).toBeInTheDocument();
+
+    userEvent.click(tab);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  test('variant style', () => {
+    render(
+      <TabContext.Provider value={{ selected, onChange }}>
+        <TabTab name='dashboard'>Dashboard</TabTab>
+      </TabContext.Provider>,
+    );
+
+    const tab = screen.getByText('Dashboard', { selector: 'button' });
+    expect(tab).toHaveStyleRule('border-color', 'var(--color-primary)');
+    expect(tab).toHaveStyleRule('color', 'var(--color-white)');
+  });
+});

package/src/Tab/index.js

@@ -0,0 +1,22 @@
+import Tab from './Tab';
+import TabList from './TabList';
+import TabTab from './TabTab';
+import TabPanel from './TabPanel';
+import TabListV2 from './subComponent/TabListV2';
+import TabTabV2 from './subComponent/TabTabV2';
+import TabPanelV2 from './subComponent/TabPanelV2';
+
+export default Object.assign(Tab, {
+  List: TabList,
+  Tab: TabTab,
+  Panel: TabPanel,
+});
+
+const TabV2Base = (props) => {
+  return <Tab {...props} />;
+};
+export const TabV2 = Object.assign(TabV2Base, {
+  List: TabListV2,
+  Tab: TabTabV2,
+  Panel: TabPanelV2,
+});