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

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;

package/src/VerticalTab/TabTab.js

@@ -1,54 +0,0 @@
-import { useContext, useCallback } from 'react';
-import styled from 'styled-components';
-import TabContext from './subComponent/TabContext';
-
-const TabTab = ({ 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`
-  width: 100%;
-  padding: 12px var(--spacing-s);
-  border: none;
-  background: transparent;
-  text-align: left;
-  color: var(--font-on-background);
-  transition: 0.3s;
-  cursor: pointer;
-
-  &:hover {
-    background: var(--color-active);
-    color: var(--color-primary);
-    font-weight: var(--font-bold);
-
-    span {
-      color: var(--color-primary);
-    }
-  }
-
-  ${({ active }) =>
-    active &&
-    `
-      background: var(--color-active);
-      color: var(--color-primary);
-      font-weight: var(--font-bold);
-
-      span {
-        color: var(--color-primary);
-      }
-    `}
-`;
-
-export default TabTab;

package/src/VerticalTab/VerticalTab.js

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-import TabContext from './subComponent/TabContext';
-
-const VerticalTab = ({ children, height, selected, onChange }) => {
-  return (
-    <TabContext.Provider value={{ selected, onChange }}>
-      <Container height={height}>{children}</Container>
-    </TabContext.Provider>
-  );
-};
-
-const Container = styled.div`
-  display: flex;
-  height: ${({ height }) => (height ? height : '100vh')};
-  border-radius: var(--border-radius-s);
-  background: var(--color-background3);
-  overflow: hidden;
-`;
-
-export default VerticalTab;

package/src/VerticalTab/index.js

@@ -1,10 +0,0 @@
-import VerticalTab from './VerticalTab';
-import TabList from './TabList';
-import TabTab from './TabTab';
-import TabPanel from './TabPanel';
-
-export default Object.assign(VerticalTab, {
-  List: TabList,
-  Tab: TabTab,
-  Panel: TabPanel,
-});

package/src/VerticalTab/subComponent/TabContext.js

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

package/src/VerticalTab/subComponent/VerticalTab.stories.js

@@ -1,82 +0,0 @@
-import { useState } from 'react';
-import VerticalTab from '../';
-import { Checkbox } from '../../form';
-
-const metadata = {
-  title: 'VerticalTab/VerticalTab',
-  component: VerticalTab,
-  argTypes: {
-    onChange: {},
-  },
-};
-
-const Template = (args) => {
-  const { onChange, ...props } = args;
-  const [selectedTab, setSelectedTab] = useState('enterprise');
-
-  return (
-    <VerticalTab
-      height='500px'
-      selected={selectedTab}
-      onChange={(name) => {
-        setSelectedTab(name);
-        onChange(name);
-      }}
-      {...props}
-    >
-      <VerticalTab.List>
-        <VerticalTab.Tab name='enterprise'>
-          <Checkbox
-            htmlFor='enterprise'
-            text='Enterprise'
-            checked={false}
-            noMargin
-          />
-        </VerticalTab.Tab>
-        <VerticalTab.Tab name='merchant'>
-          <Checkbox
-            htmlFor='merchant'
-            text='Merchant'
-            checked={true}
-            noMargin
-          />
-        </VerticalTab.Tab>
-        <VerticalTab.Tab name='terminal'>
-          <Checkbox htmlFor='terminal' text='Terminal' noMargin />
-        </VerticalTab.Tab>
-        <VerticalTab.Tab name='manufacturer'>
-          <Checkbox htmlFor='manufacturer' text='Manufacturer' noMargin />
-        </VerticalTab.Tab>
-        <VerticalTab.Tab name='announcement'>
-          <Checkbox htmlFor='announcement' text='Announcement' noMargin />
-        </VerticalTab.Tab>
-        <VerticalTab.Tab name='remoteKeyInjection'>
-          Remote Key Injection
-        </VerticalTab.Tab>
-      </VerticalTab.List>
-      <VerticalTab.Panel name='enterprise'>
-        <div>Enterprise Content</div>
-      </VerticalTab.Panel>
-      <VerticalTab.Panel name='merchant'>
-        <div>Merchant Content</div>
-      </VerticalTab.Panel>
-      <VerticalTab.Panel name='terminal'>
-        <div>Terminal Content</div>
-      </VerticalTab.Panel>
-      <VerticalTab.Panel name='manufacturer'>
-        <div>Manufacturer Content</div>
-      </VerticalTab.Panel>
-      <VerticalTab.Panel name='announcement'>
-        <div>Announcement Content</div>
-      </VerticalTab.Panel>
-      <VerticalTab.Panel name='remoteKeyInjection'>
-        <div>Remote Key Injection Content</div>
-      </VerticalTab.Panel>
-    </VerticalTab>
-  );
-};
-
-const Default = Template.bind({});
-
-export default metadata;
-export { Default };

package/src/alert/Alert.js

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-const Alert = styled.div`
-  background: var(--color-background1);
-  border-radius: var(--border-radius);
-  color: var(--font-on-background);
-  padding: var(--spacing);
-
-  ${({ backgroundReverse }) =>
-    backgroundReverse && 'background: var(--color-background2);'}
-
-  ${({ marginBottom }) => marginBottom && 'margin-bottom: var(--spacing);'}
-`;
-
-export default Alert;

package/src/alert/__stories__/Alert.stories.js

@@ -1,18 +0,0 @@
-import Alert from '../Alert';
-
-const metadata = {
-  title: 'Alert/Alert',
-  component: Alert,
-};
-
-const Template = (args) => {
-  return <Alert {...args}>You can place some information here that you want to announce.</Alert>;
-};
-
-const Default = Template.bind({});
-Default.args = {
-  backgroundReverse: false,
-};
-
-export default metadata;
-export { Default };

package/src/alert/index.js

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