@cashub/ui 0.22.8 → 0.22.9

package/dist/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@cashub/ui",
+  "version": "0.22.9",
+  "private": false,
+  "author": "CASHUB Team",
+  "description": "CASHUB UI components library",
+  "main": "index.js",
+  "keywords": [
+    "CASHUB"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@cashub/hooks": "^0.3.1",
+    "@cashub/utils": "^0.5.0",
+    "@googlemaps/markerclusterer": "^2.5.1",
+    "@googlemaps/react-wrapper": "^1.1.35",
+    "@popperjs/core": "^2.11.5",
+    "@yaireo/tagify": "^4.12.0",
+    "brace": "^0.11.1",
+    "chart.js": "^3.8.0",
+    "cropperjs": "^1.5.12",
+    "jsoneditor": "^9.8.0",
+    "jsoneditor-react": "^3.1.2",
+    "leaflet": "^1.7.1",
+    "leaflet-draw": "^1.0.4",
+    "lodash.uniqueid": "^4.0.1",
+    "moment": "^2.29.3",
+    "overlapping-marker-spiderfier": "^1.1.4",
+    "qrcode.react": "^3.0.2",
+    "rc-time-picker": "^3.7.3",
+    "react-chartjs-2": "^3.3.0",
+    "react-datepicker": "^4.8.0",
+    "react-helmet-async": "^2.0.3",
+    "react-leaflet": "^3.1.0",
+    "react-leaflet-markercluster": "^3.0.0-rc1",
+    "react-outside-click-handler": "^1.3.0",
+    "react-popper": "^2.3.0",
+    "react-router-dom": "^5.2.0",
+    "react-toastify": "^7.0.4",
+    "react-transition-group": "^4.4.2",
+    "styled-components": "^5.3.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/{table → dist/table}/Table.js

@@ -67,7 +67,7 @@ const Table = _ref => {
       onRowClick(event, rowData);
     }
   }, [onRowClick]);
-  const showFullValue = (0, _react.useCallback)(event => {
+  const showFullValue = (0, _react.useCallback)((event, customPop) => {
     let {
       id
     } = event.target;
@@ -88,7 +88,7 @@ const Table = _ref => {
         id,
         container: popoverContainer,
         target: event.target,
-        content: innerText,
+        content: customPop ? customPop : innerText,
         boundary: tableRef.current
       });
     }
@@ -144,6 +144,7 @@ const Table = _ref => {
           fieldName,
           render,
           custom,
+          customPop,
           ...props
         } = column;
         const key = rowIndex + columnIndex.toString();
@@ -173,7 +174,7 @@ const Table = _ref => {
           // call render function to get custom data(part)
           renderedData = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
             id: key,
-            onClick: showFullValue,
+            onClick: event => showFullValue(event, customPop),
             children: render ? render(value, row) : String(value)
           });
         }

package/package.json

@@ -1,50 +1,59 @@
-{
-  "name": "@cashub/ui",
-  "version": "0.22.8",
-  "private": false,
-  "author": "CASHUB Team",
-  "description": "CASHUB UI components library",
-  "main": "index.js",
-  "keywords": [
-    "CASHUB"
-  ],
-  "license": "MIT",
-  "dependencies": {
-    "@cashub/hooks": "^0.3.1",
-    "@cashub/utils": "^0.5.0",
-    "@googlemaps/markerclusterer": "^2.5.1",
-    "@googlemaps/react-wrapper": "^1.1.35",
-    "@popperjs/core": "^2.11.5",
-    "@yaireo/tagify": "^4.12.0",
-    "brace": "^0.11.1",
-    "chart.js": "^3.8.0",
-    "cropperjs": "^1.5.12",
-    "jsoneditor": "^9.8.0",
-    "jsoneditor-react": "^3.1.2",
-    "leaflet": "^1.7.1",
-    "leaflet-draw": "^1.0.4",
-    "lodash.uniqueid": "^4.0.1",
-    "moment": "^2.29.3",
-    "overlapping-marker-spiderfier": "^1.1.4",
-    "qrcode.react": "^3.0.2",
-    "rc-time-picker": "^3.7.3",
-    "react-chartjs-2": "^3.3.0",
-    "react-datepicker": "^4.8.0",
-    "react-helmet-async": "^2.0.3",
-    "react-leaflet": "^3.1.0",
-    "react-leaflet-markercluster": "^3.0.0-rc1",
-    "react-outside-click-handler": "^1.3.0",
-    "react-popper": "^2.3.0",
-    "react-router-dom": "^5.2.0",
-    "react-toastify": "^7.0.4",
-    "react-transition-group": "^4.4.2",
-    "styled-components": "^5.3.0"
-  },
-  "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@cashub/ui",
+  "version": "0.22.9",
+  "private": false,
+  "author": "CASHUB Team",
+  "description": "CASHUB UI components library",
+  "main": "index.js",
+  "keywords": [
+    "CASHUB"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "release": "npm run clean && npm run build && npm run copy",
+    "build": "node ../../scripts/build.js",
+    "copy": "node ../../scripts/copy-file.js",
+    "test": "node ../../scripts/test.js",
+    "test:coverage": "node ../../scripts/test.js --coverage",
+    "test:dev": "node ../../scripts/test.js --watch",
+    "clean": "rm -rf dist/*"
+  },
+  "dependencies": {
+    "@cashub/hooks": "^0.3.1",
+    "@cashub/utils": "^0.5.0",
+    "@googlemaps/markerclusterer": "^2.5.1",
+    "@googlemaps/react-wrapper": "^1.1.35",
+    "@popperjs/core": "^2.11.5",
+    "@yaireo/tagify": "^4.12.0",
+    "brace": "^0.11.1",
+    "chart.js": "^3.8.0",
+    "cropperjs": "^1.5.12",
+    "jsoneditor": "^9.8.0",
+    "jsoneditor-react": "^3.1.2",
+    "leaflet": "^1.7.1",
+    "leaflet-draw": "^1.0.4",
+    "lodash.uniqueid": "^4.0.1",
+    "moment": "^2.29.3",
+    "overlapping-marker-spiderfier": "^1.1.4",
+    "qrcode.react": "^3.0.2",
+    "rc-time-picker": "^3.7.3",
+    "react-chartjs-2": "^3.3.0",
+    "react-datepicker": "^4.8.0",
+    "react-helmet-async": "^2.0.3",
+    "react-leaflet": "^3.1.0",
+    "react-leaflet-markercluster": "^3.0.0-rc1",
+    "react-outside-click-handler": "^1.3.0",
+    "react-popper": "^2.3.0",
+    "react-router-dom": "^5.2.0",
+    "react-toastify": "^7.0.4",
+    "react-transition-group": "^4.4.2",
+    "styled-components": "^5.3.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/setupTests.js

@@ -0,0 +1,9 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
+
+// mock ResizeObserverModule
+import * as ResizeObserverModule from 'resize-observer-polyfill';
+global.ResizeObserver = ResizeObserverModule.default;

package/src/Tab/Tab.js

@@ -0,0 +1,11 @@
+import TabContext from './subComponent/TabContext';
+
+const Tab = ({ children, selected, onChange }) => {
+  return (
+    <TabContext.Provider value={{ selected, onChange }}>
+      {children}
+    </TabContext.Provider>
+  );
+};
+
+export default Tab;

package/src/Tab/TabList.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const TabList = ({ children, ...props }) => {
+  return (
+    <Container role='tablist' {...props}>
+      {children}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  border-bottom: var(--border-width) solid var(--border-color);
+  margin-bottom: var(--spacing);
+
+  ${({ noMargin }) => noMargin && 'margin-bottom: 0;'}
+`;
+
+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,42 @@
+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`
+  background: transparent;
+  color: var(--font-on-mute);
+  padding: 10px var(--spacing-s);
+  border: none;
+  border-bottom: 4px solid transparent;
+  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);
+    `}
+`;
+
+export default TabTab;

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

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import Tab from '../';
+
+const metadata = {
+  title: 'Tab/Tab',
+  component: Tab,
+  argTypes: {
+    onChange: {
+      action: '123',
+    },
+  },
+};
+
+const Template = (args) => {
+  const { onChange } = args;
+  const [selectedTab, setSelectedTab] = useState('dashboard');
+
+  return (
+    <Tab
+      selected={selectedTab}
+      onChange={(event) => {
+        setSelectedTab(event);
+        onChange();
+      }}
+    >
+      <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' }}>
+        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 = {};
+
+export default metadata;
+export { Default };

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

@@ -0,0 +1,26 @@
+import Tab from '../';
+
+const metadata = {
+  title: 'Tab/TabList',
+  component: Tab,
+};
+
+const Template = (args) => {
+  return (
+    <>
+      <Tab>
+        <Tab.List style={{ color: '#ffff' }} {...args}></Tab.List>
+      </Tab>
+      <p style={{ color: '#ffff' }}>content</p>
+    </>
+  );
+};
+
+const Default = Template.bind({});
+Default.args = {
+  children: 'this is a tab list',
+  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/__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,10 @@
+import Tab from './Tab';
+import TabList from './TabList';
+import TabTab from './TabTab';
+import TabPanel from './TabPanel';
+
+export default Object.assign(Tab, {
+  List: TabList,
+  Tab: TabTab,
+  Panel: TabPanel,
+});

package/src/Tab/subComponent/TabContext.js

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