@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.2

package/src/Tab/TabTab.js

@@ -1,99 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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,
-});

package/src/Tab/subComponent/TabContext.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const TabContext = createContext(null);
-
-export default TabContext;

package/src/Tab/subComponent/TabListV2.js

@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-const TabListV2 = ({ children, ...props }) => {
-  return (
-    <Container role='tablist' {...props}>
-      {children}
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-`;
-
-export default TabListV2;

package/src/Tab/subComponent/TabPanelV2.js

@@ -1,38 +0,0 @@
-import { useContext, useEffect, useState, useMemo } from 'react';
-import styled from 'styled-components';
-import TabContext from './TabContext';
-
-const TabPanelV2 = ({ 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;
-  background: var(--color-background2);
-  border-bottom-left-radius: var(--border-radius-s);
-  border-bottom-right-radius: var(--border-radius-s);
-`;
-
-export default TabPanelV2;

package/src/Tab/subComponent/TabTabV2.js

@@ -1,47 +0,0 @@
-import { useContext, useCallback } from 'react';
-import styled from 'styled-components';
-import TabContext from './TabContext';
-
-const TabTabV2 = ({ children, name, ...props }) => {
-  const { selected, onChange } = useContext(TabContext);
-
-  const handleClick = useCallback(() => {
-    if (selected !== name) {
-      onChange(name);
-    }
-  }, [name, selected, onChange]);
-
-  return (
-    <Tab role='tab' onClick={handleClick} active={selected === name} {...props}>
-      {children}
-    </Tab>
-  );
-};
-
-const Tab = styled.button`
-  background: transparent;
-  color: var(--font-on-mute);
-  font-weight: bold;
-  padding: 10px var(--spacing-s);
-  border: none;
-  border-top-left-radius: var(--border-radius-s);
-  border-top-right-radius: var(--border-radius-s);
-  transition:
-    color 0.3s,
-    border 0.3s;
-  cursor: pointer;
-  flex: 1;
-
-  &:hover {
-    color: var(--font-on-background);
-  }
-
-  ${({ active }) =>
-    active &&
-    `
-      background: var(--color-background2);
-      color: var(--font-on-background);
-    `}
-`;
-
-export default TabTabV2;

package/src/VerticalTab/TabList.js

@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-const TabList = ({ children, ...props }) => {
-  return (
-    <Container role='tablist' {...props}>
-      {children}
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  height: 100%;
-  width: 316px;
-  background: var(--color-background2);
-  overflow-y: auto;
-`;
-
-export default TabList;

package/src/VerticalTab/TabPanel.js

@@ -1,38 +0,0 @@
-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;
-  flex: 1;
-  padding: var(--spacing-s);
-  overflow-y: auto;
-`;
-
-export default TabPanel;